:root{--bg:#101415;--panel:#171d1e;--panel-2:#1b2223;--line:#2b3535;--text:#f2f4ed;--muted:#929e9a;--soft:#c5ceca;--lime:#d7f36d;--cyan:#79dbd1;--orange:#f5b762;--mono:'DM Mono',monospace;--sans:'Manrope',system-ui,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:14px}body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.22;background-image:linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(to bottom,black,transparent 74%)}.shell{max-width:1280px;margin:auto;padding:0 42px}.topbar{height:82px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;gap:11px;align-items:center;text-decoration:none;color:var(--text);font-size:15px;font-weight:800;letter-spacing:.02em}.brand-mark{display:flex;gap:3px;align-items:end;width:27px;height:22px}.brand-mark i{display:block;width:6px;background:var(--lime);border-radius:5px 5px 1px 1px}.brand-mark i:nth-child(1){height:11px;opacity:.55}.brand-mark i:nth-child(2){height:17px;opacity:.8}.brand-mark i:nth-child(3){height:22px}.topbar-meta{display:flex;align-items:center;color:var(--muted);font-size:11px;letter-spacing:.08em;text-transform:uppercase}.live-dot{width:6px;height:6px;border-radius:50%;background:var(--lime);margin-right:8px;box-shadow:0 0 0 4px rgba(215,243,109,.08)}.meta-divider{height:12px;width:1px;background:var(--line);margin:0 12px}.hero{padding:78px 0 55px;max-width:790px}.eyebrow,.section-kicker{font-family:var(--mono);font-size:10px;color:var(--cyan);letter-spacing:.17em}.eyebrow{display:flex;gap:10px;align-items:center;margin-bottom:22px}.eyebrow-line{width:25px;height:1px;background:var(--cyan)}h1{font-size:clamp(41px,5vw,70px);line-height:1.04;letter-spacing:-.065em;margin:0 0 22px;font-weight:700}h1 em{color:var(--lime);font-style:normal}.hero-copy{font-size:15px;line-height:1.8;color:var(--muted);margin:0}.hero-actions{display:flex;align-items:center;gap:10px;margin-top:29px}.button{font:600 12px var(--sans);border-radius:4px;padding:12px 16px;border:1px solid transparent;cursor:pointer;transition:transform .2s,background .2s}.button:hover{transform:translateY(-2px)}.button-primary{background:var(--lime);color:#182019}.button-primary:hover{background:#e4ff88}.button-ghost{color:var(--soft);border-color:var(--line);background:transparent}.button-ghost:hover{background:var(--panel-2)}.refresh-icon{font-size:18px;line-height:0;vertical-align:-2px;margin-right:5px}.copy-status{font-size:11px;color:var(--lime);min-width:80px}.overview-grid{display:grid;grid-template-columns:1.35fr 1.35fr .8fr;gap:14px;margin-bottom:14px}.resolution-card,.device-card,.panel{background:var(--panel);border:1px solid var(--line);border-radius:5px}.resolution-card,.device-card{min-height:196px;padding:23px 25px;position:relative;overflow:hidden}.resolution-card:after{content:"";position:absolute;width:190px;height:190px;border:1px solid rgba(121,219,209,.09);border-radius:50%;right:-70px;bottom:-105px}.card-accent{border-color:#5b6741;background:linear-gradient(135deg,#1b241f,var(--panel) 65%)}.card-accent:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--lime)}.card-label{font-size:12px;color:var(--soft);display:flex;gap:8px;align-items:center}.label-icon{color:var(--cyan);font-size:16px}.help{border:1px solid #52605d;color:#82908a;border-radius:50%;font-size:9px;width:14px;height:14px;text-align:center;line-height:13px;cursor:help}.big-value{display:flex;align-items:baseline;gap:12px;margin-top:25px;font-family:var(--mono);font-size:39px;letter-spacing:-.08em}.big-value b{color:#65716e;font-weight:400;font-size:20px}.big-value small,.dpr-value small{font-size:12px;color:var(--muted);letter-spacing:0;margin-left:2px}.card-foot{display:flex;justify-content:space-between;align-items:center;position:absolute;bottom:23px;left:25px;right:25px;color:var(--muted);font-size:11px}.status-pill{color:var(--lime);border:1px solid #50613c;background:rgba(215,243,109,.06);border-radius:3px;padding:5px 8px;font-family:var(--mono);font-size:10px}.dpr-value{font-family:var(--mono);font-size:48px;letter-spacing:-.09em;margin-top:22px;color:var(--lime)}.dpr-track{height:3px;background:#2c3634;margin-top:21px;border-radius:2px}.dpr-track span{display:block;height:100%;width:50%;background:var(--lime);border-radius:2px;transition:width .4s}.content-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.panel{padding:24px 25px;min-height:310px}.section-heading{display:flex;align-items:start;justify-content:space-between;margin-bottom:23px}.section-heading h2{font-size:20px;letter-spacing:-.04em;margin:7px 0 0}.panel-icon{color:#6f7c77;font-family:var(--mono);font-size:16px}.data-list{border-top:1px solid var(--line)}.data-row{display:flex;justify-content:space-between;align-items:center;padding:15px 0;border-bottom:1px solid var(--line);color:var(--muted);font-size:12px}.data-row strong{font-family:var(--mono);font-weight:400;color:var(--text)}.window-panel{background:linear-gradient(150deg,var(--panel-2),var(--panel))}.window-visual{display:flex;justify-content:center;align-items:center;height:141px}.window-frame{width:85%;border:1px solid #52605d;background:#111718;box-shadow:0 10px 25px rgba(0,0,0,.22)}.window-bar{height:18px;border-bottom:1px solid #2d3837;display:flex;align-items:center;padding:0 7px;gap:4px}.window-bar i{width:4px;height:4px;border-radius:50%;background:#596663}.window-bar span{height:2px;width:40%;margin:auto;background:#27302f}.window-screen{height:102px;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden}.window-screen:before,.window-screen:after{content:"";position:absolute;background:rgba(121,219,209,.11)}.window-screen:before{height:1px;left:13%;right:13%;top:50%}.window-screen:after{width:1px;top:20%;bottom:20%;left:50%}.screen-cross{position:absolute;width:7px;height:7px;border:1px solid var(--cyan);border-radius:50%}.window-screen b{font:500 17px var(--mono);z-index:1}.window-screen small{font:10px var(--mono);color:#65726f;z-index:1;margin-top:8px}.window-values{display:grid;grid-template-columns:1fr 1fr;gap:20px;border-top:1px solid var(--line);padding-top:16px}.window-values span{display:block;color:var(--muted);font-size:11px;margin-bottom:7px}.window-values strong{font:400 13px var(--mono)}.comparison{display:flex;flex-direction:column;gap:15px;margin-top:10px}.compare-row{display:grid;grid-template-columns:45px 1fr 62px;gap:10px;align-items:center;font:10px var(--mono);color:var(--muted)}.compare-row label{color:var(--soft)}.compare-bar{height:8px;background:#293332;border-radius:2px;overflow:hidden}.compare-bar span{display:block;height:100%;background:#64716d;border-radius:2px}.compare-row.current label{color:var(--lime)}.compare-row.current .compare-bar span{background:var(--lime)}.compare-row strong{color:var(--soft);font-weight:400;text-align:right}.panel-note{color:var(--muted);font-size:11px;line-height:1.6;margin:22px 0 0}.code-list{background:#111718;border:1px solid #283131;border-radius:3px;padding:4px 14px}.code-list div{display:flex;justify-content:space-between;gap:20px;padding:13px 0;border-bottom:1px solid #27302f}.code-list div:last-child{border:0}.code-list code{font:10px var(--mono);color:#899590;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.code-list strong{font:11px var(--mono);font-weight:400;color:var(--cyan);white-space:nowrap}.tip-banner{margin:14px 0 40px;border:1px solid #455339;background:rgba(215,243,109,.045);padding:20px 25px;display:flex;align-items:center;gap:17px;border-radius:4px}.tip-symbol{color:var(--lime);font-size:22px}.tip-banner strong{font-size:13px}.tip-banner p{margin:5px 0 0;color:var(--muted);font-size:11px;line-height:1.65}.tip-dpr{margin-left:auto;color:var(--lime);font:12px var(--mono);white-space:nowrap}footer{display:flex;justify-content:space-between;padding:20px 0 32px;color:#5f6b67;font:9px var(--mono);letter-spacing:.08em}
@media(max-width:800px){.shell{padding:0 20px}.topbar{height:66px}.topbar-meta{font-size:9px}.topbar-meta .meta-divider,.topbar-meta #lastUpdated{display:none}.hero{padding:55px 0 40px}.desktop-only{display:none}.overview-grid{grid-template-columns:1fr}.resolution-card,.device-card{min-height:172px}.content-grid{grid-template-columns:1fr}.panel{min-height:0}.hero-actions{flex-wrap:wrap}.tip-banner{align-items:flex-start}.tip-dpr{display:none}footer{display:block;line-height:2.2}footer span{display:block}}
@media(max-width:420px){h1{font-size:40px}.big-value{font-size:32px;gap:8px}.window-frame{width:100%}}

/* 品牌圖示配色：與使用者提供的 favicon.svg 保持一致 */
:root{--bg:#101923;--panel:#172330;--panel-2:#1b2b39;--line:#2b3c4a;--muted:#98a8b3;--soft:#c9d4d8;--lime:#68d5c1;--cyan:#68d5c1;--orange:#f2a36d}
.brand-logo{display:block;width:28px;height:28px;border-radius:8px;box-shadow:0 0 0 1px rgba(104,213,193,.25)}
.brand-mark{display:none}
.button-primary:hover{background:#82e3d1}.card-accent{border-color:#376b6c;background:linear-gradient(135deg,#182d36,var(--panel) 65%)}
.tip-banner{border-color:#3c6667;background:rgba(104,213,193,.045)}