:root{--bg: #0f1216;--surface: #171c23;--surface-2: #1f2630;--border: #2a323e;--text: #e8ecf2;--muted: #8a93a3;--ok: #4ade80;--err: #f87171;--radius: 18px;--gap: 12px;--cols: 4;--font: -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI", Roboto, sans-serif;--mono: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;color-scheme:dark}:root[data-theme=lcd]{--bg: #d1d1d1;--surface: #e4e4e2;--surface-2: #f4f4f2;--border: #9e9d9d;--text: #2d2d2d;--muted: #5f5f5f;--ok: #2e8b57;--err: #c0392b;--radius: 13px;color-scheme:light}@media(prefers-color-scheme:light){:root:not([data-theme]){--bg: #d1d1d1;--surface: #e4e4e2;--surface-2: #f4f4f2;--border: #9e9d9d;--text: #2d2d2d;--muted: #5f5f5f;--ok: #2e8b57;--err: #c0392b;--radius: 13px;color-scheme:light}}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;scroll-padding-top:120px}body{background:var(--bg);color:var(--text);font-family:var(--font);line-height:1.45;min-height:100vh;display:flex;flex-direction:column;padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);-webkit-tap-highlight-color:transparent;overflow-x:hidden}a{color:inherit}img{max-width:100%;height:auto;display:block}button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}:focus-visible{outline:3px solid #60a5fa;outline-offset:3px;border-radius:8px}.i{width:1.15em;height:1.15em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}.i-sm{width:1em;height:1em;vertical-align:-.15em}.skip{position:absolute;left:-999px;top:8px;z-index:100;background:var(--text);color:var(--bg);padding:8px 14px;border-radius:10px}.skip:focus{left:8px}.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 18px 8px;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.brand{display:flex;align-items:center;gap:10px;min-width:0}.brand .logo{border-radius:8px}.brand-name{font-size:17px;font-weight:700;letter-spacing:.2px;white-space:nowrap}.status-dot{width:9px;height:9px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok);flex:none}.version{font-family:var(--mono);font-size:10px;color:var(--muted);border:1px solid var(--border);border-radius:6px;padding:2px 6px}.top-right{display:flex;align-items:center;gap:8px;flex:none}.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid var(--border);border-radius:10px;color:var(--muted);text-decoration:none;transition:background .2s,color .2s}.icon-btn:hover,.icon-btn.active{background:var(--surface-2);color:var(--text)}.icon-btn.lang{font-size:12px;font-weight:700;letter-spacing:.04em}.pages{position:sticky;top:58px;z-index:29;display:flex;gap:8px;overflow-x:auto;padding:6px 18px 12px;scrollbar-width:none;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.pages::-webkit-scrollbar{display:none}.page-tab{flex:none;padding:8px 16px;border-radius:999px;border:1px solid var(--border);color:var(--muted);font-size:14.5px;text-decoration:none;white-space:nowrap;transition:background .2s,color .2s}.page-tab:hover{color:var(--text)}.page-tab.active{background:var(--surface-2);color:var(--text)}main{flex:1;width:100%;max-width:1240px;margin:0 auto;overflow-x:clip}.page{padding:6px 18px 24px}.page-title{font-size:13px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);font-weight:650;padding:18px 2px 10px}.grid{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));grid-auto-rows:minmax(124px,auto);grid-auto-flow:dense;gap:var(--gap)}@media(max-width:1099px){:root{--cols: 4}}@media(min-width:1100px){:root{--cols: 6}}@media(max-width:760px){:root{--cols: 3}}@media(max-width:480px){:root{--cols: 2;--gap: 10px}.page{padding:4px 12px 20px}}.key{--led: #8a93a3;position:relative;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:16px 12px 20px;border:1px solid var(--border);border-radius:var(--radius);text-align:center;text-decoration:none;color:var(--text);overflow:hidden;background:radial-gradient(120% 90% at 50% 115%,color-mix(in srgb,var(--led) 22%,transparent),transparent 60%),var(--surface);transition:transform .09s ease,filter .09s ease,border-color .2s;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.key:after{content:"";position:absolute;left:30%;right:30%;bottom:0;height:4px;border-radius:4px 4px 0 0;background:var(--led);box-shadow:0 0 14px var(--led)}.key:hover{border-color:color-mix(in srgb,var(--led) 45%,var(--border))}.key:active,.key.pressed{transform:scale(.95);filter:brightness(1.25)}.k-ic{display:inline-flex;font-size:30px;color:var(--text)}.k-lb{font-size:13.5px;font-weight:650;color:var(--muted);max-width:100%}.k-desc{font-size:12.5px;color:var(--muted);max-width:32ch}.k-big{grid-column:span 2}.k-big .k-ic{font-size:38px}.k-big .k-lb{font-size:16px;color:var(--text)}.key.on,.key.k-state.on{--led: #f87171;border-color:var(--led)}.key.on .k-ic{color:var(--led)}.key.flash{border-color:var(--led)}.key.led-blue{--led: #60a5fa}.key.led-green{--led: #4ade80}.key.led-red{--led: #f87171}.key.led-amber{--led: #fbbf24}.key.led-violet{--led: #a78bfa}.key.led-pink{--led: #f472b6}.key.led-teal{--led: #34d399}.key.led-gray{--led: #8a93a3}.widget{min-width:0;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);padding:16px;display:flex;flex-direction:column;gap:10px;overflow:hidden}.w-wide{grid-column:span 2}.w-title{font-size:13px;font-weight:650;color:var(--muted)}.w-note{font-size:13px;color:var(--muted)}.w-shot{padding:0}.w-shot img{width:100%;height:100%;object-fit:cover}.w-hero{grid-column:1 / -1;grid-row:span 3;display:grid;gap:22px;padding:22px;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:center;background:radial-gradient(120% 90% at 50% 115%,color-mix(in srgb,#f472b6 14%,transparent),transparent 60%),var(--surface)}.np-art{border-radius:16px;overflow:hidden;border:1px solid var(--border);background:var(--surface-2);box-shadow:0 10px 40px #00000059}.np-art img{width:100%}.np-info{display:flex;flex-direction:column;gap:14px;min-width:0}.np-info h1{font-size:clamp(28px,4.6vw,52px);line-height:1.05;letter-spacing:-.02em}.np-sub{font-size:clamp(15px,1.6vw,19px);color:var(--muted)}.np-seek{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;color:var(--muted)}.np-seek i{flex:1;height:5px;border-radius:5px;background:linear-gradient(to right,#f472b6 72%,var(--surface-2) 72%)}.np-ctl{display:flex;align-items:center;gap:18px}.np-btn{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;color:var(--text);font-size:22px;text-decoration:none}.np-btn:hover{background:var(--surface-2)}.np-big{width:64px;height:64px;background:#f472b6;color:#0f1216;font-size:26px;box-shadow:0 4px 20px color-mix(in srgb,#f472b6 55%,transparent)}.np-big:hover{background:#f472b6;filter:brightness(1.1)}.w-slider{grid-column:span 2;justify-content:center}.sl-head{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:14px}.sl-head strong{margin-left:auto;color:var(--text);font-size:22px}.sl-track{height:8px;border-radius:8px;background:var(--surface-2);position:relative}.sl-track i{position:absolute;left:0;top:50%;width:22px;height:22px;margin-top:-11px;border-radius:50%;background:#fff;box-shadow:0 1px 6px #00000073}.w-mixer{grid-column:span 2;justify-content:center}.mx-row{display:grid;grid-template-columns:auto 8.5em 1fr;align-items:center;gap:10px;font-size:14px}.mx-bar{height:6px;border-radius:6px;background:var(--surface-2);overflow:hidden}.mx-bar i{display:block;height:100%;width:100%;background:#60a5fa;transform-origin:left;animation:fill 1.6s ease-out both}@keyframes fill{0%{transform:scaleX(0)}}.w-obs{grid-column:span 4}@media(max-width:760px){.w-obs{grid-column:1 / -1}}.obs-head{display:flex;align-items:center;gap:10px;font-weight:650}.obs-head>span:nth-child(2){margin-right:auto}.obs-dot{width:9px;height:9px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok)}.obs-btn{border:1px solid var(--border);border-radius:8px;padding:4px 10px;font-size:12px;font-weight:800;color:var(--muted)}.obs-btn.on{background:var(--err);border-color:var(--err);color:#fff;box-shadow:0 0 12px color-mix(in srgb,var(--err) 60%,transparent)}.obs-scenes{display:flex;gap:8px;flex-wrap:wrap}.obs-scene{border:1px solid var(--border);border-radius:10px;padding:8px 14px;background:var(--surface-2);font-size:14px}.obs-scene.on{border-color:#a78bfa;color:#a78bfa}.w-sysmon{grid-column:1 / -1;flex-direction:row;justify-content:space-around;flex-wrap:wrap;gap:6px}.sm-tile{display:flex;flex-direction:column;align-items:center;min-width:6em;padding:6px}.sm-tile strong{font-family:var(--mono);font-size:clamp(26px,4vw,40px)}.sm-tile span{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}.w-cmd{justify-content:center}.cmd{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:12px}.cmd code{font-family:var(--mono);font-size:13px;overflow-wrap:anywhere;flex:1}.cmd:hover{border-color:var(--muted)}.w-note-card{justify-content:center}.w-faq{grid-column:1 / -1;padding:0}.w-faq details{padding:16px 18px}.w-faq summary{cursor:pointer;font-weight:650;list-style:none;display:flex;justify-content:space-between;gap:12px}.w-faq summary:after{content:"+";color:var(--muted);font-size:20px;line-height:1}.w-faq details[open] summary:after{content:"–"}.w-faq summary::-webkit-details-marker{display:none}.w-faq p{margin-top:10px;color:var(--muted)}.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));z-index:60;transform:translate(-50%,20px);max-width:min(92vw,520px);padding:11px 18px;background:var(--surface-2);border:1px solid var(--border);border-radius:12px;font-size:14px;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;box-shadow:0 8px 30px #00000059}.toast.show{opacity:1;transform:translate(-50%)}.foot{padding:28px 18px calc(28px + env(safe-area-inset-bottom));text-align:center;color:var(--muted);font-size:13px;display:flex;flex-direction:column;gap:6px}.foot .tm{font-size:11.5px;opacity:.8}.js-only{display:none}html.js .js-only{display:inline-flex}html.js .k-desc{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}html.js .page{display:none}html.js .page.active{display:block;animation:slide .28s ease both}html.js .page.active.from-left{animation-name:slide-r}@keyframes slide{0%{opacity:0;transform:translate(26px)}}@keyframes slide-r{0%{opacity:0;transform:translate(-26px)}}html.js .page-title{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}body.editing .key,body.editing .widget{animation:wiggle .6s ease-in-out infinite;border-style:dashed}body.editing .grid>:nth-child(2n){animation-delay:-.3s}@keyframes wiggle{0%,to{transform:rotate(-.6deg)}50%{transform:rotate(.6deg)}}.fs-exit,body.immersive .topbar,body.immersive .pages,body.immersive .foot{display:none}body.immersive .fs-exit{display:flex;align-items:center;justify-content:center;position:fixed;z-index:70;top:12px;right:12px;width:38px;height:38px;border-radius:50%;background:var(--surface-2);border:1px solid var(--border);opacity:.6}body.immersive .fs-exit:hover{opacity:1}@media(max-width:760px){.w-hero{grid-template-columns:1fr;grid-row:auto;padding:16px;gap:16px}.w-slider,.w-mixer,.w-wide{grid-column:1 / -1}}@media(max-width:480px){.topbar{padding:12px 12px 8px}.pages{padding:6px 12px 10px;top:54px}.version{display:none}.top-right{gap:6px}.icon-btn{width:32px;height:32px}.k-big{grid-column:1 / -1}.np-ctl{justify-content:center}}@media(max-width:360px){.brand-name{font-size:15px}html.js .icon-btn[data-action=fullscreen]{display:none}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}html{scroll-behavior:auto}}body.nf{align-items:center;justify-content:center;padding:24px}.nf-box{display:flex;flex-direction:column;gap:18px;align-items:center;text-align:center;max-width:420px;width:100%}.nf-box .key{width:100%;min-height:200px}.nf-box .k-desc{position:static;width:auto;height:auto;clip:auto;white-space:normal}
