:root{color-scheme:dark;--bg:#120e1c;--surface:#211830;--surface2:#2d203d;--line:#594268;--ink:#fff2fb;--muted:#d7bfdc;--pink:#ff9bd3;--violet:#cab3ff;--radius:20px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:radial-gradient(circle at 60% -5%,#392247,#120e1c 52%);color:var(--ink);font-family:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;line-height:1.66}
a{color:var(--pink)}
a:hover{color:#fff}
img{max-width:100%;height:auto;display:block}
button{font:inherit;cursor:pointer}
button:focus-visible,a:focus-visible{outline:3px solid #fff;outline-offset:3px}
.wrap{width:min(1140px,calc(100% - 36px));margin:auto}
.top{background:#170f20e8;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5;backdrop-filter:blur(14px)}
.nav{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:9px 0;overflow:visible}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;color:white;text-decoration:none;white-space:nowrap}
.brand img{width:42px;height:42px;object-fit:contain;border-radius:10px}
.links{display:flex;align-items:stretch;gap:18px;flex-wrap:wrap}
.links>a,.nav-drop-btn{display:flex;align-items:center;color:#f4dbf1;text-decoration:none;font-weight:700;font-size:.9rem;white-space:nowrap}
.nav-drop{position:relative;display:flex;align-items:stretch}
.nav-drop-btn{background:none;border:0;padding:0;gap:5px}
.nav-drop-btn .caret{font-size:.7rem;color:var(--pink)}
.nav-drop-panel{position:absolute;top:100%;right:0;left:auto;min-width:262px;display:flex;flex-direction:column;background:#241a33;border:1px solid var(--line);border-radius:14px;padding:8px;box-shadow:0 18px 40px #0008;z-index:9;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .12s ease}
.nav-drop.open .nav-drop-panel,.nav-drop:focus-within .nav-drop-panel{opacity:1;visibility:visible;pointer-events:auto}
@media(hover:hover){.nav-drop:hover .nav-drop-panel{opacity:1;visibility:visible;pointer-events:auto}}
.nav-drop-panel a{display:block;padding:9px 12px;border-radius:10px;color:#f6dcf4;text-decoration:none;font-weight:700;font-size:.88rem;white-space:nowrap}
.nav-drop-panel a:hover{background:#37284a;color:#fff}
.nav-drop-panel a small{display:block;font-weight:600;color:var(--muted);font-size:.76rem;white-space:normal}
.hero{position:relative;display:grid;border-radius:26px;margin:28px 0 30px;overflow:hidden;background:#2e203b;aspect-ratio:16/9}
.hero-media{grid-area:1/1;position:relative;width:100%;height:100%}
.hero-media img{width:100%;height:100%;object-fit:cover;display:block}
.hero:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#110b1deb 0%,#110b1d9e 48%,#110b1d15 100%)}
.hero-content{grid-area:1/1;position:relative;z-index:1;padding:46px;max-width:690px;align-self:center}
.pill{display:inline-block;border-radius:50px;padding:5px 11px;border:1px solid #be91ba91;background:#3a2945ae;color:#ffe5f5;font-size:.76rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.hero h1{font-size:clamp(1.75rem,3.6vw,3.4rem);line-height:1.14;letter-spacing:-.03em;margin:16px 0 12px}
.hero p{max-width:58ch;color:#f0dff0;margin:0 0 6px}
.btn{display:inline-block;border:0;background:#ffacd8;color:#2b1431;font-weight:800;padding:12px 17px;border-radius:12px;text-decoration:none;margin:10px 8px 0 0}
.btn.ghost{background:#372b43;color:#ffddf2;border:1px solid #845d87}
.section{padding:14px 0 26px}
.section h2{font-size:clamp(1.4rem,3vw,2.1rem);line-height:1.2;margin:5px 0 20px}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.box{background:#23192fe8;border:1px solid #694e779c;border-radius:var(--radius);padding:22px}
.box p,.box li{color:var(--muted)}
.box h3{margin:0 0 8px}
.box h3 a{text-decoration:none;color:white}
.box img{border-radius:14px}
.media{display:block;margin:0 0 15px}
.media img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:14px;display:block}
.media:hover img{outline:2px solid #ff9bd3;outline-offset:2px}
.answer{padding:22px 24px;border:1px solid #db91c58c;border-radius:18px;background:#4930507a;color:#fff}
.answer strong{color:#fff}
.tag{font-size:.78rem;color:#f4bcdb;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.article-head{margin:28px 0 18px}
.article-head h1{font-size:clamp(1.8rem,3.6vw,3rem);line-height:1.14;letter-spacing:-.03em;margin:12px 0}
.article-head p{font-size:1.07rem;color:var(--muted);max-width:64ch}
/* the press-kit logo art has a white background of its own: present it as a
   deliberate centred tile instead of a full-width white slab in the dark theme */
.brand-art{width:100%;max-width:760px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:18px}
.brand-art + .caption{text-align:center;margin-top:10px}
.layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:22px;margin:28px 0}
.toc{align-self:start;position:sticky;top:88px;background:#241b32;border:1px solid var(--line);border-radius:18px;padding:16px}
.toc a{display:block;padding:5px 0;color:#f3cae7;text-decoration:none}
.prose section{padding:24px;margin-bottom:18px;background:#20162b;border:1px solid #5f476ac2;border-radius:18px}
.prose h2{font-size:1.45rem;line-height:1.27;margin:0 0 12px}
.prose h3{margin:25px 0 4px}
.prose p,.prose li{color:#e5cfe7}
.prose li{margin:9px 0}
.feature{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:20px;display:block}
.figure{margin:0 0 14px}
.figure a{display:block}
.figure a:hover img{outline:2px solid #ff9bd3;outline-offset:2px}
.caption{font-size:.83rem;color:var(--muted)}
.video{position:relative;aspect-ratio:16/9;background:#130f20;border-radius:16px;overflow:hidden}
.video iframe{position:absolute;width:100%;height:100%;inset:0;border:0}
.scroll{overflow-x:auto}
table.tbl{width:100%;min-width:530px;border-collapse:collapse}
table.tbl th,table.tbl td{border-bottom:1px solid var(--line);text-align:left;padding:12px 10px;vertical-align:top}
table.tbl th{color:#ffbbdf}
table.tbl td{color:#f6e8f6}
.note{background:#30243f;border-left:4px solid var(--pink);padding:12px 16px;border-radius:6px}
.clue{border:1px solid var(--line);border-radius:14px;margin:16px 0;padding:16px}
.clue button{background:#f9b8db;color:#28142b;border:0;border-radius:8px;font-weight:800;padding:9px 14px}
.clue [hidden]{display:none}
.footer{border-top:1px solid var(--line);padding:28px 0 40px;margin-top:32px;background:#120c1b;color:var(--muted)}
.footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.footer a{margin-left:15px}
.footer .fan{flex-basis:100%;font-size:.8rem;color:#a893ad;margin-top:6px}
.source-list a{word-break:break-word}
.muted{color:var(--muted)}
.warn{background:#442d35;border:1px solid #f3a3bb;border-radius:12px;padding:12px 16px}
.checklist label{display:block;margin:10px 0}
.checklist input{accent-color:#e88cbd;width:18px;height:18px;margin-right:8px}
.checklist button{margin-top:15px}
.sr-only{position:absolute;left:-10000px}
@media(max-width:900px){
  .grid,.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* anchor the panel to the whole nav bar, not the 64px button, so it cannot
     overflow the viewport on narrow screens */
  .nav-drop{position:static}
  .nav-drop-panel{position:absolute;left:0;right:0;width:100%;min-width:0}
}
@media(max-width:850px){
  .layout{grid-template-columns:1fr}
  .toc{position:static;display:flex;flex-wrap:wrap;gap:10px}
  .toc strong{width:100%}
}
@media(max-width:610px){
  .nav{flex-direction:column;align-items:flex-start;gap:8px}
  .links{gap:6px 14px}
  .links a,.nav-drop-btn{padding:8px 2px}
  .brand{font-size:.95rem}
  .hero{display:block;aspect-ratio:auto}
  .hero-media{border-radius:22px 22px 0 0}
  .hero-media img{aspect-ratio:16/9;height:auto;object-fit:cover}
  .hero:after{display:none}
  .hero-content{padding:20px 4px 0;max-width:none}
  .btns{align-items:stretch}
  .btn{text-align:center}
  .grid,.grid.two{grid-template-columns:1fr}
  .prose section{padding:18px}
  .footer .wrap{display:block}
  .footer a{margin:0 12px 0 0}
}