/* Aba Blog com janelas (mesma base do blog the whisker girls). As cores, fontes e tamanhos vêm do
   "Estilo do blog" (variáveis --c-*, --f-*, --s-*), aplicado pelo blog.js. Nada aqui tem cor fixa da marca. */
:root {
  --c-pageBg: #211713; --c-text: #f4e8e3; --c-muted: #bea9a0; --c-heading: #efc0cb; --c-link: #efc0cb;
  --c-accent: #d9a6b2; --c-accentText: #2a1916; --c-accent2: #c9a27e; --c-accent2Text: #2a1916; --c-panelBg: #2d201a; --c-panelBorder: #4d3a31; --c-boxBg: #362720;
  --c-menuBg: #2d201a; --c-menuText: #f4e8e3; --c-menuActive: #d9a6b2; --c-menuActiveText: #2a1916; --c-headerBg: #2d201a; --c-headerText: #f4e8e3;
  --c-starOn: #efc0cb; --c-starOff: #4d3a31;
  --f-body: 'Figtree', system-ui, sans-serif; --f-heading: 'Cormorant Garamond', Georgia, serif; --f-title: 'Pinyon Script', cursive; --f-menu: var(--f-body);
  --s-body: 15px; --s-heading: 26px; --s-title: 76px; --s-menu: 15px;
  --panel-radius: 14px; --panel-bw: 1px; --panel-bs: solid; --panel-shadow: none;
  --page-bg: var(--c-pageBg); --grid-max: 1100px;
}

* { box-sizing: border-box; }
html { background: var(--c-pageBg); }
body.bl {
  margin: 0;
  min-height: 100vh;
  position: relative;
  display: flow-root; /* a margem de baixo do site fica dentro do body: o fundo vai até o fim da página */
  background: var(--c-pageBg);
  color: var(--c-text);
  font-family: var(--f-body);
  font-size: var(--s-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--c-link); text-decoration: none; }
a:hover { text-decoration: underline dotted; }
img { max-width: 100%; }

.page {
  position: relative; z-index: 1;
  max-width: var(--grid-max); margin: var(--grid-top, 10px) auto 60px;
  padding: var(--ct-pad, 0);
  background: var(--ct-bg, transparent); border-radius: var(--ct-radius, 0); border: var(--ct-border, 0);
}
#page-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
#page-bg .bg-layer { position: absolute; inset: 0; }
.site-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.site-bg .bg-layer { position: absolute; inset: 0; }
/* Tamanho fixo: o site nunca encolhe; se a janela for menor, aparece rolagem para o lado */
html.mode-fixed { overflow-x: auto; }
html.mode-fixed body.bl { min-width: calc(var(--grid-max) + 12px); overflow-x: clip; }
.grid-wrap { position: relative; margin: 0 6px; }
.grid-stack { position: relative; z-index: 2; }
.grid-stack { pointer-events: none; }
.grid-stack > .grid-stack-item, .mobile-stack > * { pointer-events: auto; }
.mobile-item > .grid-stack-item-content { position: relative; height: 100%; }
html { overflow-x: clip; }
.topic-list--list { flex-direction: column; gap: 2px; }
.topic-list--list a { background: none; border: 0; padding: 0; }
.topic-list--cloud { gap: 4px 10px; align-items: baseline; }
.topic-list--cloud a { background: none; border: 0; padding: 0; }

/* ---------- Adesivos (decor) ---------- */
.decor-layer { position: absolute; inset: 0; pointer-events: none; }
.decor-layer--back { z-index: 1; }
.decor-layer--front { z-index: 5; }
.decor { position: absolute; transform-origin: center; pointer-events: none; user-select: none; }
.decor img { display: block; width: 100%; height: auto; pointer-events: none; -webkit-user-drag: none; }
.decor a { pointer-events: auto; }
.decor-text { white-space: pre; line-height: 1.1; }
@keyframes d-float { 0%,100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@keyframes d-spin { to { rotate: 360deg; } }
@keyframes d-pulse { 0%,100% { scale: 1; } 50% { scale: 1.08; } }
@keyframes d-swing { 0%,100% { rotate: -6deg; } 50% { rotate: 6deg; } }
@keyframes d-blink { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.anim-float { animation: d-float 3s ease-in-out infinite; }
.anim-spin { animation: d-spin 8s linear infinite; }
.anim-pulse { animation: d-pulse 1.8s ease-in-out infinite; }
.anim-swing { animation: d-swing 2.4s ease-in-out infinite; }
.anim-blink { animation: d-blink 1.4s ease-in-out infinite; }
.grid-stack { min-height: 200px; }
.grid-stack > .grid-stack-item > .grid-stack-item-content { overflow: visible; }
.grid-stack-item.w-scroll > .grid-stack-item-content { overflow-y: auto; overflow-x: hidden; }
.grid-stack-item.auto-h .w { height: auto; }
.grid-stack-item.auto-h > .grid-stack-item-content { overflow: hidden; }

/* ---------- Janelas (painéis) ---------- */
.w { height: 100%; }
.w-panel {
  background: var(--w-bg, var(--c-panelBg));
  border: var(--panel-bw) var(--panel-bs) var(--c-panelBorder);
  border-radius: var(--panel-radius);
  box-shadow: var(--panel-shadow);
  padding: var(--panel-pad, 15px);
}
.w-frameless .w-panel, .w-frameless .post { background: transparent; border: 0; box-shadow: none; }
.w-frameless .w-panel { padding: 0; }
.w-plain { background: transparent; border: 0; box-shadow: none; padding: 0; }
.w-title {
  font-family: var(--w-title-font, var(--f-heading));
  font-size: calc(var(--s-heading) * .85);
  color: var(--c-heading);
  margin: 0 0 8px;
  line-height: 1.2;
  font-weight: 700;
}
.w-empty { color: var(--c-muted); font-size: .9em; text-align: center; padding: 12px 0; }

/* ---------- Menu em abas ---------- */
.w-menu { display: flex; align-items: flex-end; height: 100%; }
.menu-tabs { display: flex; flex-wrap: wrap; gap: var(--menu-gap, 6px); list-style: none; margin: 0; padding: 0 8px; }
.menu-tabs a {
  display: flex; align-items: center; gap: 6px;
  padding: var(--menu-pad-y, 7px) var(--menu-pad-x, 18px) calc(var(--menu-pad-y, 7px) - 1px);
  background-color: var(--c-menuBg);
  background-image: var(--menu-img-item, var(--menu-img, none));
  background-size: var(--menu-img-size, cover);
  background-repeat: var(--menu-img-repeat, no-repeat);
  background-position: center;
  text-shadow: var(--menu-text-shadow, none);
  color: var(--c-menuText);
  font-family: var(--f-menu);
  font-size: var(--s-menu);
  font-weight: var(--menu-weight, inherit);
  border: var(--menu-bw, var(--panel-bw)) solid var(--menu-border, var(--c-panelBorder));
  border-bottom: 0;
  border-radius: var(--menu-radius, 12px) var(--menu-radius, 12px) 0 0;
  transition: transform .15s, background .15s;
}
.menu-icon { height: 1.3em; width: auto; display: block; }
.menu-tabs a:hover { text-decoration: none; transform: translateY(-2px); }
.menu-tabs a[aria-current='page'] { background-color: var(--c-menuActive); background-image: var(--menu-img-active, var(--menu-img-item, var(--menu-img, none))); color: var(--c-menuActiveText, var(--c-menuText)); }
.w-menu--center { justify-content: center; } .w-menu--center .menu-tabs { justify-content: center; }
.w-menu--right { justify-content: flex-end; } .w-menu--right .menu-tabs { justify-content: flex-end; }
.w-menu--pills { align-items: center; } .w-menu--pills .menu-tabs a { border-radius: 999px; border-bottom: var(--menu-bw, var(--panel-bw)) solid var(--menu-border, var(--c-panelBorder)); }
.w-menu--plain { align-items: center; } .w-menu--plain .menu-tabs a { background-color: transparent; border: 0; padding: 4px 10px; }
.w-menu--plain .menu-tabs a[aria-current='page'] { text-decoration: underline wavy var(--c-accent); }
.w-menu--buttons { align-items: center; } .w-menu--buttons .menu-tabs a { border-radius: var(--menu-radius, 8px); border-bottom: var(--menu-bw, var(--panel-bw)) solid var(--menu-border, var(--c-panelBorder)); box-shadow: 0 3px 0 var(--menu-border, var(--c-panelBorder)); }
.w-menu--vertical .menu-tabs { flex-direction: column; width: 100%; }
.w-menu--vertical .menu-tabs a { border-radius: var(--menu-radius, 10px); border-bottom: var(--menu-bw, var(--panel-bw)) solid var(--menu-border, var(--c-panelBorder)); }

/* ---------- Cabeçalho ---------- */
.w-header { position: relative; height: 100%; display: grid; place-items: center; text-align: center; overflow: hidden; }
.header-cloud { position: absolute; inset: 0; width: 100%; height: 100%; }
.header-text { position: relative; padding: 10px 40px; color: var(--c-headerText); }
.header-title {
  font-family: var(--w-title-font, var(--f-title));
  font-size: clamp(36px, 7vw, var(--s-title));
  line-height: 1;
  margin: 0;
  font-weight: 400;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}
.header-sub { font-family: var(--f-title); font-size: clamp(20px, 3vw, calc(var(--s-title) * .5)); margin: 4px 0 0; }
.header-deco { position: absolute; font-size: clamp(28px, 4vw, 52px); right: 8%; top: 50%; transform: translateY(-30%) rotate(12deg); }
.w-header--images { display: block; position: relative; overflow: hidden; height: 100%; }
.w-header--images.w-header--natural { height: auto; }
.w-header--images .header-text { position: absolute; inset: 0; display: grid; place-content: center; z-index: 1; }
.hdr-bg { position: absolute; inset: 0; }
.hdr-bg-img { display: block; width: 100%; height: auto; }
.hdr-front { position: absolute; z-index: 2; max-width: none; height: auto; pointer-events: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.w-header--banner { background: var(--c-headerBg); border: var(--panel-bw) var(--panel-bs) var(--c-panelBorder); border-radius: var(--panel-radius); }
.w-header--banner::after { content: ''; position: absolute; inset: 8px; border: 2px dashed color-mix(in srgb, var(--c-accent) 70%, transparent); border-radius: calc(var(--panel-radius) - 4px); pointer-events: none; }

/* ---------- Pesquisa ---------- */
.search-form { display: flex; gap: 6px; }
.search-form input {
  flex: 1; min-width: 0;
  font: inherit; color: var(--c-text);
  padding: 6px 12px;
  border: 2px solid var(--c-panelBorder);
  border-radius: 999px;
  background: var(--c-boxBg);
  outline: none;
}
.search-form input:focus { border-color: var(--c-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-accent) 30%, transparent); }
.btn {
  font: inherit; cursor: pointer;
  background: var(--c-accent); color: var(--c-accentText);
  border: 0; border-radius: 999px;
  padding: 6px 14px;
  box-shadow: 0 2px 0 color-mix(in srgb, var(--c-accent) 60%, #000);
}
.btn:hover { filter: brightness(1.05); }
.btn:active { transform: translateY(1px); box-shadow: none; }

/* ---------- Perfil ---------- */
.w-profile { text-align: center; }
.profile-photo {
  --ring: var(--c-accent);
  display: block;
  width: 78%; max-width: 220px;
  aspect-ratio: 1;
  margin: 0 auto 8px;
  border-radius: 12px;
  object-fit: cover;
  background: var(--c-boxBg);
  border: 4px solid var(--c-boxBg);
  box-shadow: 0 0 0 2px var(--c-panelBorder), 0 4px 10px rgba(0,0,0,.2);
  transform: rotate(-2deg);
}
.w-profile { --photo-w: 78%; }
.w-profile .profile-photo { width: var(--photo-w); max-width: none; transform: rotate(var(--photo-tilt, -2deg)); }
.profile-photo.shape-round { border-radius: 50%; }
.profile-photo.shape-plain { border: 0; box-shadow: none; border-radius: 8px; }
.profile-photo.shape-polaroid { border-radius: 2px; border-width: 8px 8px 26px; }
.profile-photo.shape-heart { border: 0; box-shadow: none; border-radius: 0;
  -webkit-mask: radial-gradient(at 70% 31%, #000 29%, #0000 30%), radial-gradient(at 30% 31%, #000 29%, #0000 30%), linear-gradient(#000 0 0) bottom / 100% 50% no-repeat;
  clip-path: polygon(-41% 0, 50% 91%, 141% 0); }
.profile-photo.shape-ring { border-radius: 50%; box-shadow: 0 0 0 3px var(--c-boxBg), 0 0 0 6px var(--ring); }
.profile-photo.shape-original { aspect-ratio: auto; height: auto; object-fit: contain; border-radius: 8px; }
.w-profile--full { padding: 0; overflow: hidden; }
.w-profile--full .profile-photo-link, .w-profile--full > .profile-photo { display: block; }
.w-profile--full .profile-photo { width: 100%; aspect-ratio: auto; height: auto; margin: 0; border: 0; border-radius: 0; box-shadow: none; transform: none; display: block; }
.w-profile--full .profile-info { padding: 10px var(--panel-pad, 15px) var(--panel-pad, 15px); }
.w-profile--full .profile-info:empty { display: none; }
.profile-photo-link { display: block; }
.profile-extra { font-size: .92em; margin-top: 6px; }
.profile-extra > :last-child { margin-bottom: 0; }
.w-profile--row { display: flex; align-items: center; gap: 12px; text-align: left; }
.w-profile--row .profile-photo { margin: 0; flex-shrink: 0; }
.w-profile--row .profile-info { min-width: 0; }
.profile-photo--empty { display: grid; place-items: center; font-size: 48px; color: var(--c-accent); font-family: var(--f-title); }
.profile-name { font-family: var(--w-title-font, var(--f-heading)); font-size: calc(var(--s-heading) * .95); color: var(--c-heading); margin: 2px 0; font-weight: 700; }
.profile-bio { font-size: .92em; white-space: pre-line; margin: 0; }
.profile-link { font-size: .85em; }

/* ---------- Tópicos ---------- */
.topic-list { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.topic-list a {
  display: inline-block; padding: 2px 10px;
  border-radius: 999px; background: var(--c-boxBg);
  border: 1px solid var(--c-panelBorder);
  font-size: .9em;
}
.topic-list a small { color: var(--c-muted); }

/* ---------- Texto livre / imagem ---------- */
.w-text .w-body > :first-child { margin-top: 0; }
.w-image { display: grid; place-items: center; height: 100%; }
.w-image img { max-height: 100%; object-fit: contain; border-radius: calc(var(--panel-radius) - 4px); }
.w-image figcaption { font-size: .85em; color: var(--c-muted); text-align: center; }

/* ---------- Posts ---------- */
.feed { display: flex; flex-direction: column; gap: 14px; }
.feed-day {
  font-family: var(--day-font, var(--f-body));
  text-transform: var(--day-tt, uppercase);
  letter-spacing: .04em;
  color: var(--day-color, var(--c-accent2));
  font-size: var(--day-size, .85em);
  text-align: var(--day-align, left);
  font-weight: 700;
  margin: 6px 4px -6px;
}
.feed-day--inside { margin: 0 0 10px; }
.feed-day--pill span { display: inline-block; background: var(--day-bg, var(--c-panelBg)); border: 2px solid var(--c-panelBorder); padding: 2px 12px; border-radius: 999px; }
.feed-day--ribbon span { display: inline-block; background: var(--day-bg, var(--c-accent)); color: var(--day-color, var(--c-accentText)); padding: 3px 18px; clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 50%, 100% 100%, 0 100%, 10px 50%); }
.w-today { height: 100%; display: flex; flex-direction: column; justify-content: center; }
.w-today .feed-day { margin: 0; }
.feed-head { padding: 10px 16px; }
.feed-head h2 { font-family: var(--f-heading); color: var(--c-heading); margin: 0; font-size: var(--s-heading); }
.feed-head p { margin: 2px 0 0; color: var(--c-muted); }

.post {
  background: var(--c-panelBg);
  border: var(--panel-bw) var(--panel-bs) var(--c-panelBorder);
  border-radius: var(--panel-radius);
  box-shadow: var(--panel-shadow);
  padding: 18px 22px;
}
.post-title { font-family: var(--f-heading); font-size: var(--s-heading); color: var(--c-heading); margin: 0; line-height: 1.2; }
.post-title a { color: inherit; }
.post-time { color: var(--c-muted); font-size: .85em; margin-top: 2px; }
.post-cover { display: block; margin: 14px auto 4px; border-radius: 8px; border: 4px solid var(--c-boxBg); box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.post-body { overflow-wrap: anywhere; }
.post-body img { border-radius: 6px; height: auto; }
.post-body blockquote { margin: 1em 0; padding: 6px 14px; border-left: 4px solid var(--c-accent); background: color-mix(in srgb, var(--c-boxBg) 70%, transparent); border-radius: 0 8px 8px 0; }
.post-body hr.ler-mais { display: none; }
.post-body h1, .post-body h2, .post-body h3 { font-family: var(--f-heading); color: var(--c-heading); line-height: 1.2; }
.post-body p { margin: 0 0 .8em; }
.read-more { text-align: center; margin: 10px 0 2px; }
.btn-read-more {
  display: inline-block; padding: 6px 20px;
  background: var(--c-boxBg); border: 2px dashed var(--c-accent); border-radius: 999px;
  color: var(--c-link); font-weight: 700;
}
.btn-read-more:hover { background: var(--c-accent); color: var(--c-accentText); text-decoration: none; }
.post-footer {
  margin-top: 16px; padding-top: 12px;
  border-top: 2px dotted var(--c-panelBorder);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
}
.author-card {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 14px 6px 6px;
  background: var(--c-boxBg); border-radius: 999px;
  border: 2px solid var(--author-color);
  color: var(--c-text);
}
.author-card:hover { text-decoration: none; transform: rotate(-1deg); }
.author-card img, .author-initial { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.author-initial { display: grid; place-items: center; background: var(--author-color); color: var(--c-accentText); font-weight: 700; }
.author-card span { display: flex; flex-direction: column; line-height: 1.15; }
.author-card small { font-size: .72em; color: var(--c-muted); }
.post-tags { font-size: .85em; color: var(--c-muted); }
/* Final do post: posição e card do perfil de quem postou */
.post-footer.pf-left, .post-footer.pf-center, .post-footer.pf-right { flex-direction: column; }
.post-footer.pf-left { align-items: flex-start; --pa-align: flex-start; }
.post-footer.pf-center { align-items: center; --pa-align: center; text-align: center; }
.post-footer.pf-right { align-items: flex-end; --pa-align: flex-end; text-align: right; }
.post-author-big { width: var(--pa-w, 140px); max-width: 100%; flex-shrink: 0; }
.post-author-big .profile-photo { width: 100%; max-width: none; margin: 0; transform: rotate(var(--photo-tilt, -2deg)); }
.post-author-big .profile-photo--empty { font-size: calc(var(--pa-w, 140px) / 3); }
.post-author-big .story-ring { padding: 5px; }
.post-author-big .profile-photo-link:hover { text-decoration: none; }
.post-author-both { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.post-author-both.is-stack { flex-direction: column; align-items: var(--pa-align, flex-start); gap: 10px; }

/* Review */
.review-head { display: flex; gap: 16px; align-items: flex-start; margin: 14px 0 10px; }
.review-poster {
  width: 140px; flex-shrink: 0; aspect-ratio: 2 / 3; object-fit: cover;
  border-radius: 6px; border: 4px solid var(--c-boxBg); box-shadow: 0 3px 10px rgba(0,0,0,.3);
  background: var(--c-boxBg);
}
.review-poster--empty { display: grid; place-items: center; font-size: 42px; }
.review-kind { display: inline-block; font-size: .78em; padding: 1px 10px; border-radius: 999px; background: var(--c-accent2); color: var(--c-accent2Text); }
.review-title { font-family: var(--f-heading); color: var(--c-heading); font-size: calc(var(--s-heading) * 1.05); margin: 6px 0 4px; line-height: 1.15; }
.review-rating { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.review-score { font-weight: 700; color: var(--c-text); }
.stars { display: inline-flex; gap: 1px; vertical-align: middle; }

/* Navegação entre páginas/posts */
.pager { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.pager a, .pager span { padding: 6px 16px; border-radius: 999px; background: var(--c-boxBg); border: 2px solid var(--c-panelBorder); }
.pager span { opacity: 0; pointer-events: none; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chips a { padding: 2px 12px; border-radius: 999px; background: var(--c-boxBg); border: 2px solid var(--c-panelBorder); font-size: .9em; }
.chip-count { display: inline-block; min-width: 1.5em; padding: 0 6px; margin-left: 4px; border-radius: 999px; background: color-mix(in srgb, var(--c-accent) 25%, transparent); font-size: .8em; text-align: center; }
.chips a[aria-current='true'] .chip-count { background: rgba(255,255,255,.35); }
.kind-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.kind-list a { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 8px; }
.kind-list a:hover { background: color-mix(in srgb, var(--c-accent) 18%, transparent); text-decoration: none; }
.kind-list .chip-count { margin-left: auto; }
.kind-list--chips { flex-direction: row; flex-wrap: wrap; }
.kind-list--chips a { border: 2px solid var(--c-panelBorder); border-radius: 999px; padding: 2px 10px; background: var(--c-boxBg); }
.kind-list--chips .chip-count { margin-left: 4px; }
.chips a[aria-current='true'] { background: var(--c-accent); color: var(--c-accentText); border-color: var(--c-accent); }

/* Divisor, botão, HTML */
.w-divider { display: grid; place-items: center; height: 100%; color: var(--c-accent); font-size: 1.2em; letter-spacing: .3em; overflow: hidden; white-space: nowrap; }
.w-divider hr { width: 100%; border: 0; border-top: 2px var(--div-style, dashed) var(--c-panelBorder); margin: 0; }
.w-button { display: grid; place-items: center; height: 100%; }
.w-button a { display: inline-block; padding: 8px 22px; border-radius: 999px; background: var(--c-accent); color: var(--c-accentText); font-weight: 700; box-shadow: 0 3px 0 color-mix(in srgb, var(--c-accent) 60%, #000); }
.w-button a:hover { text-decoration: none; filter: brightness(1.05); }
.w-html iframe { width: 100%; height: 100%; border: 0; display: block; background: transparent; }
.w-html { height: 100%; }
.is-edit .w-html iframe, .is-edit .w-ipod iframe, .w-html--still iframe { pointer-events: none; }
.hide-desktop { display: none !important; }
@media (max-width: 768px) { .hide-mobile { display: none !important; } .hide-desktop { display: block !important; } }

/* ---------- iPod ----------
   Desenhado num tamanho fixo (.ipod-shell) e escalado por inteiro pelo JS para caber na janela. */
.w-ipod { height: 100%; padding: 4px 0; }
.auto-h .w-ipod, .mobile-item:not([style*="height"]) .w-ipod { height: auto; }
.ipod-fit { width: 100%; height: 100%; display: flex; justify-content: var(--ipod-align, center); align-items: center; overflow: hidden; }
.ipod-sizer { position: relative; flex: none; }
.ipod-shell { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.ipod {
  position: relative; width: 100%; margin: 0 auto;
  background: linear-gradient(160deg, color-mix(in srgb, var(--ipod-body) 70%, #fff), var(--ipod-body) 60%, color-mix(in srgb, var(--ipod-body) 85%, #000));
  border-radius: 30px; padding: 16px 16px 24px;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.75), inset 0 -4px 8px rgba(0,0,0,.08), 0 10px 24px rgba(0,0,0,.16);
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.ipod-screen { position: relative; background: var(--ipod-screen); color: var(--ipod-text); border-radius: 8px; border: 3px solid rgba(0,0,0,.2); overflow: hidden; display: flex; flex-direction: column; box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); }
.ipod-bar { display: flex; justify-content: space-between; align-items: center; font-size: 11px; font-weight: 700; padding: 4px 7px; background: linear-gradient(#ffffff, #d9dee5); color: #333; border-bottom: 1px solid #a9b0bb; flex: none; }
.ipod-live { color: #e0457b; font-size: 10px; }
.ipod-live[hidden] { display: none; }
.ipod-video { position: relative; aspect-ratio: var(--ipod-aspect, 1 / 1); background: #111; flex: none; }
.ipod-video iframe, .ipod-yt { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ipod-cover { position: absolute; inset: 0; display: grid; place-items: center; background: #2b2b2b center / cover no-repeat; }
.ipod-hint { background: rgba(0,0,0,.6); color: #fff; font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 999px; text-align: center; max-width: 85%; }
.ipod-art { position: relative; aspect-ratio: 1 / 1; background: #222; display: grid; place-items: center; overflow: hidden; flex: none; }
.ipod-art-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ipod-art .ipod-hint { position: absolute; }
.ipod-art-empty { color: #fff; font-size: 64px; opacity: .6; }
.ipod.is-started .ipod-hint { display: none; }
.ipod-np { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 4px; padding: 18px 12px 12px; min-height: 150px; }
.ipod-np-icon { font-size: 34px; line-height: 1; opacity: .55; }
.ipod-np-art { width: 92px; height: 92px; border-radius: 6px; box-shadow: 0 3px 10px rgba(0,0,0,.25); flex: none; }
.ipod-np-song { font-size: 17px; font-weight: 800; line-height: 1.2; max-width: 100%; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ipod-np-song.is-long { font-size: 14px; }
.ipod-np-artist { font-size: 13px; opacity: .75; min-height: 1em; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ipod-np-hint { font-size: 11px; font-weight: 700; opacity: .7; margin-top: 4px; }
.ipod.is-started .ipod-np-hint { visibility: hidden; }
.ipod-title { flex: none; font-size: 12px; font-weight: 600; line-height: 1.3; padding: 5px 8px; color: #222; white-space: nowrap; overflow: hidden; background: linear-gradient(#f5f7f9, #e2e6eb); }
.ipod-title span { display: inline-block; }
.ipod.is-playing .ipod-title.is-long span { animation: ipod-marquee 12s linear infinite; padding-left: 100%; }
@keyframes ipod-marquee { to { transform: translateX(-100%); } }
.ipod-progress { flex: none; display: flex; align-items: center; gap: 6px; padding: 5px 8px 7px; font-size: 10px; font-variant-numeric: tabular-nums; }
.ipod-bar-track { flex: 1; height: 6px; border-radius: 3px; background: rgba(0,0,0,.15); overflow: hidden; box-shadow: inset 0 1px 1px rgba(0,0,0,.15); }
.ipod-bar-track i { display: block; height: 100%; width: 0; background: linear-gradient(#8fc7ff, #3b8fe0); transition: width .5s linear; }
/* Player escondido dos modos "só capa" e "só nome": fica atrás de tudo, invisível */
.ipod-hidden-player { position: absolute; left: 0; top: 0; width: 200px; height: 200px; opacity: 0; pointer-events: none; z-index: -1; overflow: hidden; }
.ipod-flash { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: rgba(0,0,0,.72); color: #fff; font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 999px; z-index: 5; white-space: nowrap; pointer-events: none; }
.ipod-flash[hidden] { display: none; }
.ipod-wheel { position: relative; width: 72%; aspect-ratio: 1; margin: 18px auto 0; border-radius: 50%; background: var(--ipod-wheel); box-shadow: inset 0 3px 6px rgba(0,0,0,.08), 0 1px 0 rgba(255,255,255,.9); }
.ipod--screen-title .ipod-wheel, .ipod--screen-cover .ipod-wheel { width: 66%; }
.ipod-btn { position: absolute; background: none; border: 0; color: var(--ipod-label); font-size: 13px; font-weight: 800; cursor: pointer; padding: 8px; line-height: 1; }
.ipod-btn:hover { filter: brightness(.85); }
.ipod-menu { top: 5%; left: 50%; transform: translateX(-50%); letter-spacing: .04em; font-size: 12px; }
.ipod-prev { left: 4%; top: 50%; transform: translateY(-50%); }
.ipod-next { right: 4%; top: 50%; transform: translateY(-50%); }
.ipod-play { bottom: 5%; left: 50%; transform: translateX(-50%); }
.ipod-center { position: absolute; left: 50%; top: 50%; width: 38%; height: 38%; transform: translate(-50%, -50%); border-radius: 50%; border: 0; cursor: pointer;
  background: linear-gradient(160deg, color-mix(in srgb, var(--ipod-center) 70%, #fff), var(--ipod-center)); box-shadow: inset 0 2px 3px rgba(255,255,255,.6), 0 1px 3px rgba(0,0,0,.15); }
.ipod-center:active { transform: translate(-50%, -50%) scale(.96); }
.ipod--image { background: none; box-shadow: none; padding: 0; border-radius: 0; }
.ipod--image .ipod-skin { display: block; width: 100%; height: auto; pointer-events: none; }
.ipod--image .ipod-screen { border-width: 0; border-radius: 4px; }
.ipod--image .ipod-video, .ipod--image .ipod-art { flex: 1 1 auto; aspect-ratio: auto; min-height: 0; }
.ipod--image .ipod-np { flex: 1 1 auto; min-height: 0; padding: 6px; }
.ipod--nolabels .ipod-btn { color: transparent; }
.ipod--image .ipod-center { background: transparent; box-shadow: none; }

/* ---------- Reações ---------- */
.reactions { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 4px; }
.rx { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; border: 1.5px solid var(--c-panelBorder); background: var(--c-panelBg); color: var(--c-text); font: inherit; font-size: 14px; cursor: pointer; transition: transform .15s, background .15s; }
.rx:hover { transform: translateY(-1px); }
.rx b { font-size: 12px; min-width: .5em; }
.rx b:empty { display: none; }
.rx.is-on { background: color-mix(in srgb, var(--c-accent) 35%, var(--c-panelBg)); border-color: var(--c-accent); }
.rx.pop span { animation: rx-pop .45s ease; }
@keyframes rx-pop { 40% { transform: scale(1.5) rotate(-10deg); } 100% { transform: scale(1); } }

/* ---------- Status (anel na foto, bolinhas e visualizador) ---------- */
.story-ring { position: relative; display: block; width: 100%; padding: 4px; border: 0; background: none; cursor: pointer; border-radius: 22px; font: inherit; color: inherit; }
.story-ring::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 3px; background: conic-gradient(var(--ring), #ffd36e, var(--c-accent2), var(--ring));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: ring-spin 6s linear infinite; }
.story-ring.is-seen::before { background: color-mix(in srgb, var(--c-muted) 55%, transparent); animation: none; }
@keyframes ring-spin { to { filter: hue-rotate(360deg); } }
.story-tag { position: absolute; left: 50%; bottom: -4px; transform: translateX(-50%); background: var(--ring); color: var(--c-accentText); font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,.15); }
.w-profile--full .story-ring { border-radius: 0; padding: 4px; }
/* Foto redonda: o anel acompanha a foto (redondo e do tamanho dela) */
.w-profile .story-ring:has(> .shape-round), .w-profile .story-ring:has(> .shape-ring) { width: calc(var(--photo-w) + 10px); margin-inline: auto; border-radius: 50%; padding: 5px; }
.w-profile .story-ring > .shape-round, .w-profile .story-ring > .shape-ring { width: 100%; }
.stories-row { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; padding: 4px; }
.stories-row--column { flex-direction: column; align-items: center; }
.story-bubble { display: flex; flex-direction: column; align-items: center; gap: 4px; background: none; border: 0; cursor: pointer; font: inherit; color: inherit; padding: 0; }
.story-bubble:disabled { cursor: default; }
.story-avatar { width: var(--sz); height: var(--sz); border-radius: 50%; padding: 3px; display: grid; place-items: center; background: var(--c-panelBorder); }
.story-bubble.is-new .story-avatar { background: conic-gradient(var(--c-accent), #ffd36e, var(--c-accent2), var(--c-accent)); }
.story-bubble.is-seen .story-avatar { background: color-mix(in srgb, var(--c-muted) 55%, transparent); }
.story-avatar img, .story-avatar span { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 3px solid var(--c-panelBg); background: var(--c-panelBg); display: grid; place-items: center; font-weight: 800; color: var(--c-heading); }
.story-bubble small { font-size: 12px; max-width: calc(var(--sz) + 20px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.story-open { overflow: hidden; }
.story-viewer { position: fixed; inset: 0; z-index: 10000; background: rgba(20, 10, 18, .88); display: grid; place-items: center; padding: 12px; cursor: auto; }
.story-card { position: relative; width: min(420px, 100%, calc((100dvh - 24px) * 9 / 16)); aspect-ratio: 9 / 16; border-radius: 18px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.4); user-select: none; }
.story-card > .sc { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; }
.story-card--link .story-nav { bottom: 16%; }
.story-bars { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; gap: 4px; z-index: 3; }
.story-bars span { flex: 1; height: 3px; background: rgba(255,255,255,.4); border-radius: 2px; overflow: hidden; }
.story-bars i { display: block; height: 100%; background: #fff; }
.story-head { position: absolute; top: 20px; left: 12px; right: 12px; display: flex; align-items: center; gap: 8px; z-index: 3; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.story-head img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; }
.story-head small { opacity: .85; }
.story-close { margin-left: auto; background: none; border: 0; color: #fff; font-size: 22px; cursor: pointer; padding: 4px 8px; text-shadow: inherit; }
.story-img { width: 100%; height: 100%; object-fit: contain; position: absolute; inset: 0; }
.story-text { position: relative; z-index: 2; padding: 24px; font-size: clamp(20px, 5vw, 30px); font-weight: 700; text-align: center; white-space: pre-wrap; overflow-wrap: anywhere; }
.story-text--over { position: absolute; left: 0; right: 0; bottom: 40px; font-size: 20px; background: rgba(0,0,0,.35); padding: 14px 18px; }
.story-nav { position: absolute; top: 70px; bottom: 0; width: 35%; background: none; border: 0; z-index: 2; cursor: pointer; }
.story-nav--prev { left: 0; }
.story-nav--next { right: 0; width: 65%; }

/* ---------- Mural de recados ---------- */
.gb-form { display: grid; gap: 8px; margin-bottom: 14px; }
.gb-input { width: 100%; font: inherit; color: var(--c-text); background: var(--c-boxBg); border: 1.5px solid var(--c-panelBorder); border-radius: 10px; padding: 8px 10px; resize: vertical; }
.gb-input:focus { outline: 2px solid var(--c-accent); outline-offset: 1px; }
.gb-form .btn { justify-self: start; }
.gb-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.gb-msg { font-size: 13px; color: var(--c-heading); margin: 0; min-height: 1em; }
.gb-msg:empty { display: none; }
.gb-list { display: grid; gap: 10px; }
.gb-item { background: color-mix(in srgb, var(--c-boxBg) 70%, var(--c-panelBg)); border: 1px dashed var(--c-panelBorder); border-radius: 12px; padding: 10px 12px; }
.gb-item header { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.gb-item header strong { color: var(--c-heading); }
.gb-item header small { color: var(--c-muted); font-size: 11px; }
.gb-item p { margin: 6px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.gb-reply { margin-top: 8px; padding: 6px 10px; border-left: 3px solid var(--c-accent); background: color-mix(in srgb, var(--c-boxBg) 80%, transparent); border-radius: 0 8px 8px 0; font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.gb-reply small { font-weight: 700; color: var(--c-heading); }
.gb-more { margin-top: 10px; }
.gb-more[hidden] { display: none; }

/* ---------- Modo edição (painel) ---------- */
.is-edit .peer-sel { outline: 3px dashed var(--peer, #ff8fb8) !important; outline-offset: 4px; }
.is-edit .peer-sel::after {
  content: attr(data-peer) ' está aqui'; position: absolute; right: 4px; top: -20px; z-index: 41; pointer-events: none;
  font: 700 11px/16px system-ui, sans-serif; color: #fff; background: var(--peer, #ff8fb8); padding: 0 7px; border-radius: 4px; white-space: nowrap;
}
.is-edit a, .is-edit button, .is-edit input { cursor: inherit; }
.is-edit .grid-stack-item img, .is-edit .grid-stack-item a { -webkit-user-drag: none; user-select: none; }
.is-edit .grid-stack-item input, .is-edit .grid-stack-item textarea, .is-edit .grid-stack-item button { pointer-events: none; }
.is-edit .grid-stack > .grid-stack-item > .grid-stack-item-content { cursor: move; }
.is-edit .grid-stack-item { outline: 1px dashed transparent; outline-offset: 2px; }
.is-edit .grid-stack-item:hover { outline-color: #8a7bff; }
.is-edit .grid-stack-item.is-selected { outline: 2px solid #6c5ce7; z-index: 30; }
.is-edit .grid-stack-item::before {
  content: attr(data-label); position: absolute; left: 4px; top: -18px; z-index: 40;
  font: 700 11px/16px system-ui, sans-serif; color: #fff; background: #6c5ce7; padding: 0 6px; border-radius: 4px;
  opacity: 0; pointer-events: none; white-space: nowrap;
}
.is-edit .grid-stack-item:hover::before, .is-edit .grid-stack-item.is-selected::before { opacity: 1; }
.is-edit .grid-stack-item.is-hidden-dev { opacity: .35; }
.is-edit .grid-stack > .grid-stack-item > .ui-resizable-handle { opacity: 0; }
.is-edit .grid-stack > .grid-stack-item.is-selected > .ui-resizable-handle { opacity: 1; }
.is-edit .ui-resizable-se, .is-edit .ui-resizable-sw, .is-edit .ui-resizable-ne, .is-edit .ui-resizable-nw {
  width: 12px !important; height: 12px !important; background: #fff; border: 2px solid #6c5ce7; border-radius: 3px; transform: none !important; }
.is-edit .ui-resizable-se { right: 0 !important; bottom: 0 !important; }
.is-edit .ui-resizable-sw { left: 0 !important; bottom: 0 !important; }
.is-edit .ui-resizable-ne { right: 0 !important; top: 0 !important; }
.is-edit .ui-resizable-nw { left: 0 !important; top: 0 !important; }
.is-edit .grid-stack-placeholder > .placeholder-content { background: rgba(108, 92, 231, .12); border: 2px dashed #6c5ce7; border-radius: 10px; }
.is-edit .decor-layer .decor { pointer-events: auto; cursor: move; }
.is-edit .decor:hover { outline: 1px dashed #8a7bff; }
.is-edit .decor.is-selected { outline: 2px solid #6c5ce7; z-index: 60; }
.is-edit .decor-layer--back .decor.is-selected { z-index: 60; }
.decor-handle { display: none; position: absolute; width: 14px; height: 14px; background: #fff; border: 2px solid #6c5ce7; border-radius: 50%; }
.is-edit .decor.is-selected .decor-handle { display: block; }
.decor-handle--size { right: -8px; bottom: -8px; cursor: nwse-resize; border-radius: 3px; }
.decor-handle--rot { left: 50%; top: -26px; margin-left: -7px; cursor: grab; }
.is-edit .decor-layer--back.lift { z-index: 6; }

/* Visualização (painel) */
.is-preview a { cursor: default; }

/* Ql (conteúdo gerado pelo editor) */
.ql-content .ql-align-center { text-align: center; }
.ql-content .ql-align-right { text-align: right; }
.ql-content .ql-align-justify { text-align: justify; }
.ql-content .ql-size-small { font-size: .8em; }
.ql-content .ql-size-large { font-size: 1.4em; }
.ql-content .ql-size-huge { font-size: 2em; }
.ql-content .ql-indent-1 { padding-left: 2em; }
.ql-content .ql-indent-2 { padding-left: 4em; }
.ql-content .ql-indent-3 { padding-left: 6em; }
.ql-content li[data-list='bullet'] { list-style-type: disc; }
.ql-content li[data-list='ordered'] { list-style-type: decimal; }
.ql-content .ql-ui { display: none; }
.ql-content .ql-font-title { font-family: var(--f-title); font-size: 1.6em; }
.ql-content .ql-font-heading { font-family: var(--f-heading); font-size: 1.2em; }

/* ---------- Celular ---------- */
@media (max-width: 768px) {
  .page { padding: 6px 6px 40px; }
  .post { padding: 14px; }
  .review-head { flex-direction: column; align-items: center; text-align: center; }
  .review-rating { justify-content: center; }
  .header-deco { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------- Minuit: renda, abas do topo e cantos nas páginas do blog ---------- */
.w-divider .div-lace { display: block; width: 100%; height: 100%; min-height: 14px; background: url('/assets/minuit/renda.webp') center / auto 100% repeat-x; }
.bl .tabs { padding-left: max(64px, env(safe-area-inset-left)); padding-right: max(64px, env(safe-area-inset-right)); }
.bl .tabs-in { max-width: var(--grid-max, 1100px); }
.bl .floats { position: relative; z-index: 70; }
.bl noscript .post { margin: 12px auto; max-width: 680px; }
.w-panel ::selection, .post ::selection { background: color-mix(in srgb, var(--c-accent) 45%, transparent); }
