:root{--primary:#E50914;--bg:#141414;--card:#1f1f1f;--text:#f5f5f1;--muted:#b3b3b3;--line:#333}
*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text);line-height:1.7}
.skip{position:absolute;left:-999px}.skip:focus{left:10px;top:10px;background:#fff;color:#000;padding:8px;z-index:300}
a{color:#ff5a63}a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid #fff;outline-offset:3px}
/* header + menu */
.top{background:#000;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:200}
.bar{max-width:1100px;margin:0 auto;padding:10px 20px;display:flex;align-items:center;gap:18px}
.logo{font-size:1.3rem;font-weight:800;color:var(--primary);text-decoration:none;margin-right:auto}
#menu{display:flex;align-items:center;gap:14px}
.nav-list{display:flex;list-style:none;gap:2px;align-items:center}
.nav-list a.plain,.grp>button{background:none;border:0;color:var(--text);font:inherit;font-size:.92rem;padding:10px 12px;cursor:pointer;text-decoration:none;border-radius:6px;display:flex;gap:4px;align-items:center}
.nav-list a.plain:hover,.grp>button:hover,.grp.open>button{background:#222}
.grp{position:relative}.grp.has-cur>button,a.plain[aria-current]{box-shadow:inset 0 -2px 0 var(--primary)}
.car{font-size:.7rem;color:var(--muted)}
.menu{display:none;position:absolute;top:100%;left:0;min-width:240px;background:#181818;border:1px solid var(--line);border-radius:8px;padding:6px;list-style:none;box-shadow:0 12px 30px rgba(0,0,0,.6)}
.grp.open>.menu{display:block}
.menu a{display:block;padding:9px 12px;color:var(--text);text-decoration:none;border-radius:6px;font-size:.92rem}.menu a:hover,.menu a[aria-current]{background:#2a2a2a;color:#fff}
.hdr-actions{display:flex;gap:10px;align-items:center}.coffee{color:#ffd166;text-decoration:none;font-size:.9rem;white-space:nowrap}
.burger{display:none;background:none;border:1px solid var(--line);border-radius:8px;padding:10px;cursor:pointer;flex-direction:column;gap:4px}.burger span{display:block;width:22px;height:2px;background:#fff}
@media(max-width:1040px){
 .burger{display:flex}
 #menu{display:none;position:absolute;top:100%;left:0;right:0;background:#0b0b0b;border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;padding:10px 20px 20px;max-height:calc(100vh - 62px);overflow:auto}@supports(height:100dvh){#menu{max-height:calc(100dvh - 62px)}}
 #menu.open{display:flex}.nav-list{flex-direction:column;align-items:stretch;gap:0}
 .nav-list a.plain,.grp>button{width:100%;justify-content:space-between;padding:14px 6px;border-bottom:1px solid #222;border-radius:0;font-size:1rem}
 .menu{position:static;box-shadow:none;border:0;background:#141414;min-width:0;margin:0 0 6px}.menu a{padding:12px 14px}
 .hdr-actions{flex-direction:column;align-items:stretch;margin-top:14px;text-align:center}.hdr-actions .cta-button{width:100%}.coffee{padding:8px}}
/* layout */
.container{max-width:860px;margin:0 auto;padding:30px 20px}
.crumbs{font-size:.85rem;color:var(--muted);margin-bottom:10px}.crumbs a{color:var(--muted)}
h1{font-size:clamp(1.9rem,5vw,2.6rem);margin-bottom:20px;line-height:1.2}.home-h1{text-align:center;font-size:clamp(2.1rem,6vw,3.1rem)}
h2{font-size:1.6rem;margin:38px 0 14px;color:var(--primary)}h3{font-size:1.2rem;margin:22px 0 10px}
p{margin-bottom:18px;color:var(--muted);font-size:1.07rem}ul,ol{margin-bottom:24px;padding-left:22px;color:var(--muted);font-size:1.07rem}li{margin-bottom:11px}
strong{color:var(--text)}.tiny{font-size:.82rem;color:#7d7d7d}.center{text-align:center}
.hero{text-align:center;padding:24px 0 10px}.hero .lead{font-size:1.2rem;color:var(--text);max-width:650px;margin:0 auto 26px}
.cta-button{display:inline-block;background:var(--primary);color:#fff!important;text-decoration:none;padding:15px 34px;font-size:1.08rem;font-weight:700;border-radius:6px;transition:background .2s;text-align:center;border:0;cursor:pointer;font-family:inherit}
.cta-button:hover{background:#b80710}.cta-button.small{padding:9px 18px;font-size:.92rem}
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin:26px 0}
.card{background:var(--card);padding:20px;border-radius:8px;border-left:4px solid var(--primary)}.card h3{margin-top:0}.card p{margin:0;font-size:1rem}
.link-card{text-decoration:none;display:block}.link-card:hover{background:#2a2a2a}.link-card h3{color:#fff}
.info-box{background:#1a2635;border:1px solid #2a4563;padding:18px;border-radius:8px;margin:24px 0}.info-box p{color:#b3d4ff;margin:0}
.cta-inline{text-align:center;margin:38px 0;padding:28px;background:var(--card);border-radius:8px}.cta-inline h3{margin-top:0}
.table-wrap{overflow-x:auto;margin:20px 0}table{width:100%;border-collapse:collapse;font-size:.97rem}th,td{padding:11px 12px;border-bottom:1px solid var(--line);text-align:left;color:var(--muted)}th{color:var(--text);background:#1b1b1b}td:first-child{color:var(--text)}
/* stats */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:26px 0 8px}
.stats div{background:var(--card);border-radius:8px;padding:16px;text-align:center}.stats b{display:block;font-size:1.6rem;color:#fff}.stats span{font-size:.82rem;color:var(--muted)}
/* faq */
.faq{background:var(--card);border-radius:8px;margin-bottom:10px;padding:0 18px}.faq summary{cursor:pointer;padding:15px 0;font-weight:600;color:var(--text)}.faq p{margin:0 0 16px}
/* related + guides */
.related{margin-top:46px;border-top:1px solid var(--line);padding-top:6px}.related h2{font-size:1.2rem;color:var(--text)}.related ul{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:4px 20px}
#guide-search{width:100%;padding:14px 16px;font-size:1rem;border-radius:8px;border:1px solid var(--line);background:#1b1b1b;color:#fff;margin:6px 0 10px}
.guide-list{list-style:none;padding:0}.guide-list a{display:block;background:var(--card);padding:14px 16px;border-radius:8px;text-decoration:none;color:var(--text)}.guide-list a:hover{background:#2a2a2a}.guide-list span{display:block;color:var(--muted);font-size:.9rem;margin-top:2px}
/* support */
.support{margin-top:50px;padding:28px;border-radius:12px;background:linear-gradient(135deg,#2a1215,#1b1b1b);border:1px solid #4a1d22;text-align:center}.support h2{margin-top:0;color:#fff}
.sup-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin:18px 0}
.sup-btn{display:flex;flex-direction:column;align-items:center;gap:2px;background:#000;border:1px solid #444;border-radius:10px;padding:16px 10px;text-decoration:none;color:#fff;transition:transform .15s,border-color .15s}
.sup-btn:hover{border-color:var(--primary);transform:translateY(-2px)}.sup-btn .ico{font-size:1.6rem}.sup-btn em{font-style:normal;color:#ffd166;font-weight:700}
/* about */
.about{display:flex;gap:20px;align-items:center;margin-bottom:10px}.avatar{width:84px;height:84px;border-radius:50%;background:var(--primary);display:grid;place-items:center;font-weight:800;font-size:1.8rem;flex:none}.lead2{font-size:1.2rem;color:var(--text);margin-bottom:12px}
/* finder */
.finder fieldset{border:1px solid var(--line);border-radius:8px;padding:16px;margin-bottom:16px}.finder legend{padding:0 8px;color:#fff;font-weight:700}
.finder label{display:block;padding:8px 6px;color:var(--muted);cursor:pointer}.finder input{margin-right:8px;accent-color:var(--primary)}
.find-out{margin-top:20px}.find-out .res{background:var(--card);border-left:4px solid var(--primary);border-radius:8px;padding:18px;margin-bottom:12px}.find-out h3{margin:0 0 8px}
/* demo */
.demo{margin:20px 0 30px}.browser{position:relative;background:#0f0f0f;border:1px solid #444;border-radius:12px;overflow:hidden}
.bar-dots{display:flex;align-items:center;gap:7px;padding:10px 12px;background:#242424}.bar-dots i{width:11px;height:11px;border-radius:50%;background:#555}.bar-dots i:nth-child(1){background:#ff5f56}.bar-dots i:nth-child(2){background:#ffbd2e}.bar-dots i:nth-child(3){background:#27c93f}
.url{flex:1;background:#141414;border-radius:6px;padding:4px 12px;font-size:.8rem;color:#999;margin-left:8px}.ext-btn{background:#333;border:0;border-radius:6px;padding:4px 9px;cursor:pointer;font-size:1rem}
.popup{position:absolute;right:10px;top:46px;width:250px;background:#1f1f1f;border:1px solid #555;border-radius:10px;padding:14px;z-index:5;box-shadow:0 10px 30px #000}
.pop-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}.pop-h small{color:#888}.pop-s{margin:10px 0 0;font-size:.85rem}
.switch{display:flex;align-items:center;gap:10px;cursor:pointer;color:#fff;font-size:.95rem}.switch input{position:absolute;opacity:0}.slider{width:42px;height:24px;background:#555;border-radius:12px;position:relative;transition:background .2s}.slider::after{content:"";position:absolute;width:18px;height:18px;border-radius:50%;background:#fff;top:3px;left:3px;transition:left .2s}.switch input:checked+.slider{background:#2e9e4f}.switch input:checked+.slider::after{left:21px}.switch input:focus-visible+.slider{outline:2px solid #fff}
.screen{position:relative;min-height:260px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:16px;padding:30px;background:radial-gradient(circle at 50% 30%,#2b2b2b,#0b0b0b)}
.title-card{text-align:center}.title-card h3{margin:0}.title-card p{margin:4px 0 0;font-size:.85rem}
.play{background:#fff;color:#000;border:0;border-radius:6px;padding:12px 26px;font-weight:700;font-size:1rem;cursor:pointer}
.progress{width:70%;height:6px;background:#444;border-radius:3px;overflow:hidden}.progress div{height:100%;width:0;background:var(--primary)}
.modal{position:absolute;inset:0;background:rgba(0,0,0,.88);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px}.modal[hidden],.popup[hidden],.progress[hidden]{display:none}.modal h4{font-size:1.2rem;margin-bottom:8px}.modal button{background:var(--primary);color:#fff;border:0;border-radius:6px;padding:10px 22px;cursor:pointer;font-weight:700}
.demo-note{font-size:.88rem;color:#8a8a8a;margin-top:10px}
footer{margin-top:50px;border-top:1px solid var(--line);padding:40px 20px;text-align:center;color:#777;font-size:.9rem}
.foot-grid{max-width:1000px;margin:0 auto 26px;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:20px;text-align:left}.foot-grid h3{font-size:.95rem;color:#fff;margin:0 0 8px}.foot-grid a{display:block;color:#9a9a9a;font-size:.88rem;text-decoration:none;padding:3px 0}.foot-grid a:hover{color:#fff}
footer p{font-size:.88rem;color:#777;margin-bottom:8px}.sig{margin-top:16px;color:#c8c8c8;font-size:1rem}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

.ic{width:1em;height:1em;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.15em;flex:none}
.ic.fill{fill:currentColor;stroke:none}
.car .ic{width:.9em;height:.9em;transition:transform .15s}.grp.open .car .ic{transform:rotate(180deg)}
.nav-list>.grp:nth-last-child(-n+2) .menu{left:auto;right:0}
.coffee{display:inline-flex;gap:6px;align-items:center}
.burger span{transition:transform .2s,opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.sup-btn .ico{font-size:1.7rem;color:#ffd166;line-height:1}
.stats b .star{color:#ffd166;width:.8em;height:.8em;vertical-align:-.05em}
.ext-btn{display:grid;place-items:center;color:#fff}.ext-btn .ic{width:18px;height:18px}
.play{display:inline-flex;gap:8px;align-items:center}
.sig .heart{color:#ff4d8d;width:1.05em;height:1.05em;vertical-align:-.2em}
.grp>button .car{display:inline-flex}
/* --- menu reset: stop global ul/li/line-height rules leaking into the header --- */
.top{line-height:1.3}
.nav-list{margin:0;padding:0;list-style:none;font-size:1rem}
.menu{margin:0;list-style:none;font-size:1rem;min-width:270px}
.nav-list li,.menu li{margin:0;padding:0;line-height:1.3}
.car{font-size:1rem}
.menu a{white-space:normal}
@media(max-width:1040px){.menu{min-width:0;margin:0 0 6px}.nav-list{padding:0}}
html{scroll-padding-top:72px}
@media(max-width:600px){.sup-grid{grid-template-columns:1fr 1fr}.sup-btn{padding:14px 6px}.sup-btn strong{font-size:.92rem;text-align:center}}