[hidden]{display:none!important}
:root{--bg:#0d0b09;--bg2:#131008;--bg3:#1a1510;--border:#2e2620;--text:#e8e0d0;--muted:#9a8c7a;--accent:#c87941;--accent2:#b07a45;--accent3:#e8a060}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:'Crimson Pro',Georgia,serif;font-weight:300;font-size:18px;min-height:100vh;overflow-x:hidden;padding-bottom:5.5rem}
body::after{content:'';position:fixed;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");pointer-events:none;z-index:999;opacity:.5}
.ember-glow{position:fixed;bottom:-120px;left:50%;transform:translateX(-50%);width:700px;max-width:100vw;height:350px;background:radial-gradient(ellipse,rgba(200,121,65,.07) 0%,transparent 70%);pointer-events:none;z-index:0}
nav{position:sticky;top:0;z-index:100;background:rgba(13,11,9,.96);backdrop-filter:blur(10px);border-bottom:1px solid var(--border);padding:0 2rem;display:flex;align-items:center;justify-content:space-between;height:58px}
.nav-logo{font-family:'Playfair Display',serif;font-size:1.25rem;color:var(--accent);text-decoration:none;letter-spacing:.04em;display:flex;align-items:baseline;gap:.6rem}
.nav-links{display:flex;gap:.1rem;list-style:none}
.nav-links a{color:var(--muted);text-decoration:none;font-family:'Barlow',sans-serif;font-size:.7rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;padding:.4rem .65rem;border-radius:3px;transition:color .2s,background .2s}
.nav-links a:hover{color:var(--accent3);background:var(--bg3)}
.nav-links a.active{color:var(--accent)}
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:4px}
.hamburger span{display:block;width:22px;height:1px;background:var(--muted)}
.mobile-menu{display:none;flex-direction:column;background:var(--bg2);border-bottom:1px solid var(--border);padding:1.25rem 2rem;gap:.25rem;position:relative;z-index:99}
.mobile-menu a{color:var(--muted);text-decoration:none;font-family:'Barlow',sans-serif;font-size:.78rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;padding:.6rem 0;border-bottom:1px solid var(--border);transition:color .2s}
.mobile-menu a:hover{color:var(--accent3)}
.mobile-menu a:last-child{border-bottom:none}
.mobile-menu.open{display:flex}
.nav-home{color:var(--muted);text-decoration:none;font-family:'Barlow',sans-serif;font-size:.7rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase}
.nav-home:hover,.nav-home:focus-visible{color:var(--accent3)}
footer{position:relative;z-index:1;border-top:1px solid var(--border);padding:1.75rem 2rem 2rem;display:flex;flex-direction:column;align-items:center;gap:.6rem;text-align:center}
.footer-copy-text{color:var(--muted);font-size:.95rem;max-width:680px;line-height:1.6}
.footer-copy{font-family:'Barlow',sans-serif;font-size:.7rem;letter-spacing:.14em;color:var(--muted);margin-top:.35rem}
.footer-copy a{color:inherit;text-decoration:none;transition:color .2s}
.footer-copy a:hover,.footer-copy a:focus-visible{color:var(--accent3)}
.footer-support{font-family:'Barlow',sans-serif;font-size:.7rem;letter-spacing:.14em;line-height:1.6;color:#9a8c7a}
.footer-support a{color:var(--accent);text-decoration:none}
.footer-support a:hover,.footer-support a:focus{text-decoration:underline}
.footer-support .kofi-cup{display:inline-flex;align-items:center;margin-left:.4em;line-height:0;vertical-align:middle;text-decoration:none}
.footer-support .kofi-cup img{height:1.1em;width:auto;display:block}
.footer-support .kofi-cup:hover,.footer-support .kofi-cup:focus{text-decoration:none}
.skip{position:absolute;left:-999px;top:0;z-index:200;background:var(--accent);color:var(--bg);padding:.5rem 1rem;font-family:'Barlow',sans-serif}
.skip:focus{left:1rem;top:.5rem}
:focus-visible{outline:2px solid var(--accent3);outline-offset:3px;border-radius:4px}
.label,.section-title,.badge,.chip,.timer-status,.eyebrow,.btn-hero,.preview-len,.store,.soon,.mini-layer,.copy-link{font-family:'Barlow',sans-serif;font-weight:500;letter-spacing:.1em;text-transform:uppercase}
.label{font-size:.66rem;color:var(--muted)}
.hero{position:relative;z-index:1;max-width:960px;margin:0 auto;padding:4.5rem 1.25rem 3.5rem;text-align:center}
.eyebrow{font-size:.7rem;color:var(--accent2);margin-bottom:1rem}
.hero h1{font-family:'Playfair Display',serif;font-weight:400;font-size:clamp(2.4rem,9vw,4.4rem);line-height:1.05;margin-bottom:1.5rem}
.hero h1 em{color:var(--accent);font-style:italic}
.topic-intro{font-size:1.2rem;line-height:1.7;color:#afa89a;max-width:65ch;margin:0 auto 2.4rem}
.topic-intro p{margin-bottom:1em}
.topic-intro p:last-child{margin-bottom:0}
.topic-intro em{color:var(--accent3);font-style:italic}
.btn-hero{display:inline-flex;align-items:center;gap:.8rem;font-size:.82rem;padding:1.05rem 2rem 1.05rem 1.5rem;border-radius:999px;border:1px solid var(--accent);background:linear-gradient(180deg,rgba(200,121,65,.22),rgba(200,121,65,.08));color:var(--accent3);cursor:pointer;transition:box-shadow .3s,background .3s,transform .2s}
.btn-hero svg{width:22px;height:22px;fill:currentColor}
.btn-hero:hover:not(:disabled){box-shadow:0 0 34px rgba(200,121,65,.35);background:rgba(200,121,65,.26)}
.btn-hero:disabled{opacity:.45;cursor:default}
.follow{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;margin-top:1.75rem}
.feed{max-width:1080px;margin:0 auto;padding:0 1.25rem 5rem;position:relative;z-index:1}
.section-title{font-size:.72rem;color:var(--accent);margin:0 0 1.1rem}
.filters{display:flex;flex-direction:column;gap:.8rem;padding:1.6rem 0;border-top:1px solid var(--border)}
.filter-row,.chips{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.filter-row .label{min-width:4.6rem}
.chip{font-size:.66rem;background:transparent;border:1px solid var(--border);color:var(--muted);padding:.5rem .95rem;border-radius:999px;cursor:pointer;transition:color .2s,border-color .2s,box-shadow .3s,background .2s;min-height:36px}
.chip:hover{color:var(--accent3);border-color:var(--accent2);box-shadow:0 0 14px rgba(200,121,65,.18)}
.chip[aria-pressed=true]{color:var(--bg);background:var(--accent);border-color:var(--accent)}
.layer{border:1px solid var(--border);background:rgba(26,21,16,.55);border-radius:14px;padding:1.4rem 1.25rem;margin:.5rem 0 3rem;display:flex;flex-direction:column;gap:1rem}
.layer .section-title{margin:0}
.layer-row{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem}
.vol{display:flex;align-items:center;gap:.7rem}
input[type=range]{accent-color:var(--accent);width:150px}
.timer-status{font-size:.66rem;color:var(--accent3)}
.hint{color:var(--muted);font-size:.98rem}
.empty{color:var(--muted);font-style:italic;padding:1rem 0}
.grid{display:grid;grid-template-columns:1fr;gap:2.75rem 2rem}
@media(min-width:620px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.grid{grid-template-columns:repeat(3,1fr)}}
.card{display:flex;flex-direction:column;scroll-margin-top:5.5rem}
.card.linked .art{border-color:var(--accent3);box-shadow:0 0 44px rgba(200,121,65,.45)}
@keyframes linkglow{0%,35%{border-color:var(--accent3);box-shadow:0 0 44px rgba(200,121,65,.45)}100%{border-color:var(--border);box-shadow:none}}
@media (prefers-reduced-motion:no-preference){.card.linked .art{animation:linkglow 2.2s ease}}
.art{position:relative;aspect-ratio:1/1;border-radius:12px;overflow:hidden;background:var(--bg3);border:1px solid var(--border);transition:box-shadow .4s,border-color .4s}
.art img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s ease}
.card:hover .art,.card.playing .art{box-shadow:0 0 44px rgba(200,121,65,.22);border-color:var(--accent2)}
.card:hover .art img{transform:scale(1.03)}
.pp{position:absolute;right:14px;bottom:14px;width:62px;height:62px;border-radius:50%;border:none;background:rgba(13,11,9,.78);backdrop-filter:blur(6px);color:var(--accent3);cursor:pointer;display:grid;place-items:center;transition:box-shadow .3s,background .3s}
.pp:hover{box-shadow:0 0 22px rgba(200,121,65,.45);background:rgba(13,11,9,.92)}
.pp svg.icon{width:22px;height:22px;fill:currentColor;position:relative}
.pp svg.ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:2}
.ring .bg{stroke:rgba(232,160,96,.18)}
.ring .fg{stroke:var(--accent3);stroke-linecap:round;transition:stroke-dashoffset .25s linear}
.card h3{font-family:'Playfair Display',serif;font-weight:400;font-size:1.32rem;line-height:1.25;margin:1.1rem 0 .3rem}
.scene{color:#afa89a;font-size:1.02rem;line-height:1.45;margin-bottom:.8rem}
.versions{color:var(--text);font-size:1rem;line-height:1.5;margin-top:.85rem}
.desc{color:#cfc6b8;font-size:1rem;line-height:1.65;margin-top:.85rem}
.desc-fold{margin-top:.85rem;border-top:1px solid var(--border);padding-top:.7rem}
.desc-fold summary{font-family:'Barlow',sans-serif;font-weight:500;letter-spacing:.1em;text-transform:uppercase;font-size:.6rem;color:var(--muted);cursor:pointer}
.desc-fold summary:hover,.desc-fold summary:focus-visible{color:var(--accent3)}
.desc-fold .desc{margin-top:.55rem}
.badges{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.badge{font-size:.58rem;padding:.25rem .55rem;border-radius:3px;border:1px solid var(--border);color:var(--muted)}
.badge.sys{color:var(--accent3);border-color:var(--accent2)}
.preview-len{font-size:.6rem;color:var(--muted);margin-left:auto}
.phones{display:flex;align-items:center;gap:.4rem;color:var(--accent3);font-size:.92rem;margin-top:.6rem;font-style:italic}
.phones svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2}
.listen{display:flex;align-items:center;gap:.5rem;margin-top:.9rem;padding-top:.8rem;border-top:1px solid var(--border)}
.listen-on{display:flex;flex-wrap:wrap;align-items:baseline;gap:.35rem .7rem;margin-top:.7rem;font-family:'Barlow',sans-serif;font-weight:400;font-size:.72rem;letter-spacing:.015em;line-height:1.45;color:var(--muted)}
.listen-links{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:.4rem}
.listen-on a,.mini-links a{color:var(--accent);text-decoration:none}
.listen-on a:hover,.listen-on a:focus-visible,.mini-links a:hover,.mini-links a:focus-visible{color:var(--accent3)}
.listen-sep{color:var(--muted)}
.store{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;font-size:.6rem;color:var(--muted);text-decoration:none;border:1px solid var(--border);border-radius:999px;padding:.35rem .7rem;min-height:32px;transition:color .2s,border-color .2s,box-shadow .3s}
.store svg{width:14px;height:14px;fill:currentColor}
.store:hover{color:var(--accent3);border-color:var(--accent2);box-shadow:0 0 12px rgba(200,121,65,.2)}
.soon{font-size:.6rem;color:var(--muted)}
.copy-link{align-self:flex-start;margin-top:.85rem;background:none;border:0;padding:0;font-size:.6rem;letter-spacing:.12em;color:var(--muted);cursor:pointer}
.copy-link:hover,.copy-link:focus-visible{color:var(--accent3)}
.mini{position:fixed;left:0;right:0;bottom:0;z-index:150;display:flex;align-items:center;gap:.8rem;padding:.6rem 1rem;background:rgba(19,16,8,.96);backdrop-filter:blur(12px);border-top:1px solid var(--border);box-shadow:0 -10px 30px rgba(0,0,0,.4)}
.mini img{width:44px;height:44px;border-radius:6px;object-fit:cover;background:var(--bg3)}
.mini img[src=""]{visibility:hidden}
.mini-play{width:42px;height:42px;flex:none;border-radius:50%;border:1px solid var(--accent2);background:transparent;color:var(--accent3);cursor:pointer;display:grid;place-items:center}
.mini-play:hover{box-shadow:0 0 16px rgba(200,121,65,.35)}
.mini-play svg{width:18px;height:18px;fill:currentColor}
.mini-meta{display:flex;flex-direction:column;min-width:0;flex:1}
.mini-title{font-family:'Playfair Display',serif;font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini-layer{font-size:.58rem;color:var(--muted)}
.mini-links{display:none;align-items:center;gap:.4rem;font-family:'Barlow',sans-serif;font-weight:400;font-size:.68rem;letter-spacing:.015em;color:var(--muted)}
@media(min-width:640px){.mini-links{display:flex}.mini{padding:.6rem 2rem}}
@media (max-width:768px){nav{padding:0 1.5rem}.nav-links{display:none}.hamburger{display:flex}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}.card:hover .art img{transform:none}}
