:root{--bg: #0a0c0b;--bg2: #0e1110;--card: #141917;--card2: #1c2220;--line: rgba(255, 255, 255, .09);--text: #f2f5f3;--sub: #97a09a;--faint: #5b635e;--accent: #3be07f;--on-accent: #04150b;--accent-soft: rgba(59, 224, 127, .14);--lime: #ddf55f;--amber: #f6c453;--orange: #ff8a4c;--red: #ff5e62;--blue: #6fa8ff;--violet: #b8a2ff;--radius: 18px;--radius-sm: 11px;--font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;--gutter: 16px;color-scheme:dark}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{margin:0;background:radial-gradient(1200px 600px at 15% -10%,rgba(59,224,127,.08),transparent 60%),radial-gradient(900px 500px at 100% 0%,rgba(120,90,255,.07),transparent 60%),var(--bg);color:var(--text);font:15px/1.5 var(--font);min-height:100vh;overflow-x:hidden}a{color:var(--accent)}h1,h2,h3{margin:0;line-height:1.2}.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}.card{background:linear-gradient(180deg,rgba(255,255,255,.025),transparent 40%),var(--card);border:1px solid var(--line);border-radius:var(--radius)}.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;display:flex;align-items:center;gap:12px;padding:10px var(--gutter);background:#0a0c0bd1;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:9px;color:var(--text);text-decoration:none}.brand-mark{width:30px;height:30px;border-radius:9px;background:var(--accent);display:grid;place-items:center;box-shadow:0 0 18px #3be07f59}.brand-mark svg{width:20px;height:20px;fill:none;stroke:var(--on-accent);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}.brand-name{font-weight:700;font-size:18px;letter-spacing:-.3px}.brand-name b{color:var(--accent)}.tag{font-size:11.5px;font-weight:600;color:var(--accent);background:var(--accent-soft);padding:3px 8px;border-radius:999px;letter-spacing:.2px}.top-game{color:var(--text);font:inherit;font-size:14px;max-width:46vw;background:var(--card, #151917);border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:5px 8px;cursor:pointer}.top-link{margin-left:auto;color:var(--sub);font-size:14px;text-decoration:none}.top-link:hover{color:var(--text)}.layout{display:grid;gap:14px;padding:14px var(--gutter) 90px;grid-template-columns:minmax(0,1fr);grid-template-areas:"stage" "explain" "how";max-width:1480px;margin:0 auto}.stage{grid-area:stage;display:grid;gap:12px;min-width:0}.panel{grid-area:panel;min-width:0}.explain{grid-area:explain;display:grid;gap:12px;min-width:0}.how{grid-area:how;padding:18px}.explain>h2,.how h2{font-size:18px;letter-spacing:-.2px;margin-top:6px}.scene{position:relative;aspect-ratio:4 / 3.1;border-radius:var(--radius);overflow:hidden;background:radial-gradient(80% 70% at 50% 40%,#121a24,#06070a);border:1px solid var(--line);touch-action:pan-y}.scene-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}.scene-placeholder{position:absolute;inset:0;display:grid;place-content:center;gap:12px;justify-items:center;color:var(--sub);font-size:14px;text-align:center;padding:20px}.scene[data-ready=true] .scene-placeholder{display:none}.spinner{width:26px;height:26px;border-radius:50%;border:3px solid rgba(255,255,255,.1);border-top-color:var(--accent);animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.osd{position:absolute;pointer-events:none;display:none;font:700 11px/1.25 var(--mono);color:#ffe25a;text-shadow:0 0 2px #000,0 1px 0 #000,1px 0 0 #000,-1px 0 0 #000,0 -1px 0 #000;white-space:pre;letter-spacing:.2px}.scene[data-ready=true] .osd{display:block}.osd b{color:#fff}.click-flash{position:absolute;pointer-events:none;display:flex;align-items:center;gap:6px;padding:4px 9px 4px 6px;border-radius:999px;background:#0a0c0bc7;border:1px solid rgba(59,224,127,.6);color:var(--accent);font-size:11.5px;font-weight:600;opacity:0;transform:translate(-50%) scale(.92);transition:opacity .12s,transform .12s}.click-flash.on{opacity:1;transform:translate(-50%) scale(1)}.click-flash.hint{opacity:.7;transform:translate(-50%) scale(1);border-color:#ffffff2e;color:#c9d0cb}.scene canvas{cursor:crosshair}.click-flash svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}.slow-label{position:absolute;pointer-events:none;display:none;font:800 12px/1 var(--font);letter-spacing:.6px;text-transform:uppercase;color:#0a0c0b;background:var(--amber);padding:5px 8px;border-radius:6px}.slow-label.on{display:block}.hotspots{position:absolute;inset:0;pointer-events:none}.hotspot{position:absolute;pointer-events:auto;transform:translate(-50%,-50%);display:flex;align-items:center;gap:6px;padding:4px 10px 4px 5px;border-radius:999px;background:#0a0c0bb8;border:1px solid var(--line);color:var(--text);font:600 12px/1 var(--font);cursor:pointer;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}.hotspot:before{content:"";width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px #3be07f38;animation:pulse 2.4s ease-in-out infinite}.hotspot[hidden]{display:none}@keyframes pulse{50%{box-shadow:0 0 0 7px #3be07f0f}}.hud{padding:14px 16px;display:grid;gap:12px}.hud-top{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap}.fps-big{display:flex;align-items:baseline;gap:6px}.fps-num{font:800 54px/.95 var(--font);letter-spacing:-2px;font-variant-numeric:tabular-nums;color:var(--tone, var(--accent))}.fps-unit{font-weight:700;color:var(--sub);font-size:16px}.fps-meta{display:grid;gap:4px;min-width:0}.fps-range{color:var(--sub);font-size:13.5px}.fps-range b{color:var(--text);font-weight:600}.badges{display:flex;gap:6px;flex-wrap:wrap}.badge{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;padding:3px 9px;border-radius:999px;background:var(--card2);border:1px solid var(--line);color:var(--text)}.badge:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--dot, var(--sub))}.badge.l-gpu{--dot: var(--blue)}.badge.l-cpu{--dot: var(--orange)}.badge.l-balanced{--dot: var(--accent)}.badge.l-vram{--dot: var(--red)}.badge.l-display,.badge.l-game_cap{--dot: var(--violet)}.badge.c-high{--dot: var(--accent)}.badge.c-medium{--dot: var(--amber)}.badge.c-low{--dot: var(--red)}.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0}.stats div{background:var(--card2);border-radius:var(--radius-sm);padding:8px 10px;min-width:0}.stats dt{color:var(--sub);font-size:12px}.stats dd{margin:2px 0 0;font-weight:700;font-size:17px;font-variant-numeric:tabular-nums}.stats dd small{color:var(--sub);font-weight:500;font-size:12px}.bars{display:grid;gap:7px}.bar{display:grid;grid-template-columns:92px minmax(0,1fr) 52px;align-items:center;gap:8px;font-size:12.5px}.bar span:first-child{color:var(--sub)}.bar span:last-child{text-align:right;font-variant-numeric:tabular-nums}.bar-track{height:8px;border-radius:99px;background:var(--card2);overflow:hidden;position:relative}.bar-fill{display:block;height:100%;border-radius:99px;background:var(--c, var(--accent))}.bar-mark{display:block;position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--text);opacity:.6}.graph{padding:12px 14px 10px}.graph-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:6px}.graph-head h2{font-size:15px}.graph-legend{margin:0;display:flex;gap:12px;flex-wrap:wrap;color:var(--sub);font-size:12px}.graph-legend span{display:inline-flex;align-items:center;gap:5px}.sw{width:10px;height:10px;border-radius:3px;display:inline-block}.sw-base{background:var(--accent)}.sw-gen{background:var(--violet)}.sw-spike{background:var(--red)}#graph{width:100%;height:140px;display:block}.panel-sheet{display:grid;gap:12px}.sheet-head{display:none}.build-card{padding:14px 16px;display:grid;gap:10px}.build-card h2{font-size:15px}.build-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}.part-select{display:block;width:100%;max-width:100%;font:inherit;font-size:14px;color:var(--text);background:#ffffff0a;border:1px solid rgba(255,255,255,.14);border-radius:8px;padding:4px 6px;margin:-2px 0 2px;cursor:pointer}.part-select:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.build-list li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:8px;align-items:start;font-size:13.5px}.build-list svg{width:18px;height:18px;fill:none;stroke:var(--accent);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;margin-top:2px}.build-list small{display:block;color:var(--sub);font-size:12px}.assume{margin:0;padding:8px 10px;border-radius:var(--radius-sm);background:var(--card2);color:var(--sub);font-size:12px}.controls{padding:14px 16px;display:grid;gap:14px}.group{border:0;padding:0;margin:0;min-width:0;display:grid;gap:7px}.group legend{padding:0;font-weight:600;font-size:13px;color:var(--text);margin-bottom:6px}.group .hint{color:var(--sub);font-size:12px;margin:-2px 0 0}.seg{display:flex;flex-wrap:wrap;gap:6px}.seg label{position:relative}.seg input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}.seg span{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:7px 12px;border-radius:10px;font-size:13px;font-weight:600;background:var(--card2);border:1px solid var(--line);color:var(--text);transition:background .15s,border-color .15s,color .15s}.seg input:hover+span{border-color:#ffffff38}.seg input:checked+span{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}.seg input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}.seg input:disabled+span{opacity:.38;cursor:not-allowed}.switch{display:flex;align-items:center;gap:10px;font-size:13px;cursor:pointer}.switch input{appearance:none;-webkit-appearance:none;width:42px;height:24px;border-radius:99px;background:var(--card2);border:1px solid var(--line);position:relative;cursor:pointer;margin:0;flex:none}.switch input:after{content:"";position:absolute;width:18px;height:18px;border-radius:50%;background:var(--sub);top:2px;left:2px;transition:transform .15s,background .15s}.switch input:checked{background:var(--accent-soft);border-color:var(--accent)}.switch input:checked:after{transform:translate(18px);background:var(--accent)}.switch input:disabled{opacity:.5;cursor:not-allowed}details.more{border-top:1px solid var(--line);padding-top:10px}details.more summary{cursor:pointer;font-weight:600;font-size:13px;color:var(--sub);list-style:none}details.more summary::-webkit-details-marker{display:none}details.more summary:before{content:"\ff0b  ";color:var(--accent)}details.more[open] summary:before{content:"\ff0d  "}details.more>.group{margin-top:12px}.btn{font:600 13px/1 var(--font);padding:9px 13px;border-radius:10px;cursor:pointer;background:var(--accent);color:var(--on-accent);border:0}.btn.ghost{background:transparent;color:var(--accent);border:1px solid rgba(59,224,127,.5)}.icon-btn{background:var(--card2);border:1px solid var(--line);color:var(--text);border-radius:10px;width:36px;height:36px;display:grid;place-items:center;cursor:pointer}.icon-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}.cards{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr))}.xcard{padding:14px 14px 13px;display:grid;grid-template-columns:34px minmax(0,1fr);gap:11px;align-items:start;border-left:3px solid var(--tone-c, var(--line))}.xcard.highlight{box-shadow:0 0 0 2px var(--accent)}.xcard[data-tone=good]{--tone-c: var(--accent)}.xcard[data-tone=info]{--tone-c: var(--blue)}.xcard[data-tone=warn]{--tone-c: var(--amber)}.xcard[data-tone=bad]{--tone-c: var(--red)}.xicon{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--tone-c, var(--sub)) 16%,transparent)}.xicon svg{width:19px;height:19px;fill:none;stroke:var(--tone-c, var(--sub));stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.xcard h3{font-size:14.5px;margin-bottom:4px}.xcard p{margin:0;color:#c9d0cb;font-size:13.5px}.tips{display:grid;gap:8px}.tip{display:flex;align-items:center;gap:12px;padding:11px 14px;flex-wrap:wrap}.tip-text{min-width:0;flex:1 1 220px}.tip-text b{display:block;font-size:14px}.tip-text span{color:var(--sub);font-size:13px}.tips-empty{color:var(--sub);font-size:13.5px;margin:0}.how-grid{display:grid;gap:14px;margin-top:12px;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}.how-grid h3{font-size:14.5px;margin-bottom:4px}.how-grid p,.how-grid li{color:#c9d0cb;font-size:13.5px;margin:0}.how-grid ul{margin:6px 0 0;padding-left:18px;display:grid;gap:4px}.foot{max-width:1480px;margin:0 auto;padding:0 var(--gutter) 110px;color:var(--faint);font-size:12.5px}.foot b{color:var(--sub)}.noscript{padding:20px;text-align:center}.error-box{padding:16px;border-radius:var(--radius);border:1px solid rgba(255,94,98,.5);background:#ff5e6214}.sheet-toggle{position:fixed;left:50%;bottom:max(14px,env(safe-area-inset-bottom));transform:translate(-50%);z-index:40;display:flex;align-items:center;gap:9px;max-width:calc(100vw - 32px);padding:12px 18px;border-radius:999px;border:0;cursor:pointer;background:var(--accent);color:var(--on-accent);font:700 14px/1.1 var(--font);box-shadow:0 10px 30px #00000080,0 0 0 1px #ffffff0f}.sheet-toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;flex:none}.sheet-toggle span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media(max-width:899px){.panel{position:fixed;inset:0;z-index:50;display:none;background:#0000008c}.panel.open{display:block}.panel-sheet{position:absolute;left:0;right:0;bottom:0;max-height:86vh;overflow-y:auto;background:var(--bg2);border-radius:22px 22px 0 0;border-top:1px solid var(--line);padding:14px var(--gutter) max(18px,env(safe-area-inset-bottom));overscroll-behavior:contain}.sheet-head{display:flex;align-items:center;justify-content:space-between}.sheet-head h2{font-size:17px}}@media(min-width:600px){.stats{grid-template-columns:repeat(4,minmax(0,1fr))}.scene{aspect-ratio:16 / 10}.fps-num{font-size:64px}}@media(min-width:900px){.layout{grid-template-columns:minmax(0,1fr) 360px;grid-template-areas:"stage panel" "explain panel" "how panel";align-items:start}.panel{position:sticky;top:70px;max-height:calc(100vh - 84px);overflow-y:auto;scrollbar-width:thin}.sheet-toggle{display:none}.foot{padding-bottom:32px}.scene{aspect-ratio:16 / 9}}@media(min-width:1280px){.layout{grid-template-columns:minmax(0,1fr) 390px}}@media(prefers-reduced-motion:reduce){.spinner,.hotspot:before{animation:none}}.picker-host{display:block}.picker{position:relative}.part-input{display:block;width:100%;font:inherit;font-size:14px;color:var(--text);background:#ffffff0a;border:1px solid rgba(255,255,255,.14);border-radius:8px;padding:5px 30px 5px 8px;margin:-2px 0 2px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2397a09a' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6'/%3E%3Cpath d='M20 20l-4.5-4.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;background-size:16px}.part-input::placeholder{color:var(--sub)}.part-input:focus{outline:2px solid var(--accent);outline-offset:1px;background-color:var(--card2)}.picker-list{position:absolute;z-index:30;left:0;right:0;top:calc(100% + 2px);margin:0;padding:4px;list-style:none;max-height:280px;overflow-y:auto;background:#1f2623;color:var(--text);border:1px solid rgba(255,255,255,.18);border-radius:10px;box-shadow:0 12px 30px #0000008c}.picker-list li{display:block;padding:7px 9px;border-radius:7px;font-size:14px;cursor:pointer;color:var(--text)}.picker-list li[aria-selected=true]{color:var(--accent);font-weight:600}.picker-list li.active{background:var(--accent-soft)}.picker-list .picker-empty{color:var(--sub);cursor:default}.part-select{color-scheme:dark}.part-select option,.part-select optgroup{background:#1f2623;color:var(--text)}