:root{font-family:Inter,ui-sans-serif,system-ui,sans-serif;color:#e8eef7;background:#0a101a;font-synthesis:none;--muted:#8c9db3;--green:#57e0ae;--blue:#6aaaff;--purple:#c29cff}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 70% 0,#14303766,transparent 45%)}main{max-width:1200px;margin:auto;padding:40px 24px}header,.heading{display:flex;justify-content:space-between;gap:20px;align-items:center}header{margin-bottom:30px}.eyebrow{letter-spacing:3px;color:var(--green);font-size:11px;font-weight:800}h1{font-size:clamp(36px,6vw,58px);letter-spacing:-2px;margin:10px 0}h1 span{color:var(--green)}h2{font-size:18px;margin:0 0 12px;letter-spacing:-.3px}p{color:var(--muted);font-size:13px;margin:4px 0}.status{border:1px solid #2c6155;border-radius:30px;padding:9px 14px;color:var(--green);font-size:12px;white-space:nowrap}.status.bad{color:#ff9f94;border-color:#864f48}.summary{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px}.panel,.metric{background:#121d2bdb;border:1px solid #253449;border-radius:18px;padding:24px}.panel{margin-bottom:20px}.metric .label{font-size:11px;letter-spacing:1.5px;color:var(--muted)}.metric .value{font-size:34px;font-weight:650;letter-spacing:-1.5px;margin:10px 0}.metric small{font-size:12px;color:var(--muted)}.bar{height:5px;background:#26364a;border-radius:8px;overflow:hidden;margin-top:13px}.bar i{height:100%;display:block;background:var(--green);border-radius:8px}.columns{display:grid;grid-template-columns:1fr 1fr;gap:20px}.columns .panel{min-width:0}.legend{font-size:11px;display:flex;gap:14px}.cpu{color:var(--green)}.ram{color:var(--blue)}.gpu{color:var(--purple)}canvas{display:block;width:100%;height:200px;margin-top:22px}.axis{display:flex;justify-content:space-between;color:var(--muted);font-size:10px}.cores{display:grid;grid-template-columns:repeat(8,1fr);gap:8px;margin-top:20px}.core{background:#1a293b;border:1px solid #2d4054;border-radius:9px;padding:10px;position:relative;overflow:hidden}.core .fill{position:absolute;inset:0;top:auto;background:#57e0ae22}.core span,.core strong{position:relative;display:block}.core span{font-size:10px;color:var(--muted)}.core strong{font-size:15px;margin-top:5px}.row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid #263449;font-size:13px}.row:last-child{border-bottom:0}.row span{color:var(--muted);overflow-wrap:anywhere}.row strong{font-weight:550;text-align:right}.subhead{margin-top:28px}.disk{padding:12px 0}.disk .row{padding:0;border:0}.disk p{font-size:11px;margin-top:8px}footer{font-size:11px;line-height:1.8;color:var(--muted)}footer span{display:block}#frequency{font-size:12px;color:var(--muted)}@media(max-width:700px){main{padding:26px 16px}.summary{grid-template-columns:repeat(2,1fr);gap:10px}.metric,.panel{padding:18px}.columns{display:block}.cores{grid-template-columns:repeat(4,1fr)}.heading{align-items:flex-start;flex-wrap:wrap;gap:6px}.metric .value{font-size:29px}.status{font-size:10px;padding:8px 10px}header{gap:10px}canvas{height:170px}}

.brand-logo{display:block;width:235px;max-width:100%;height:auto;margin-bottom:22px}header>div:first-child{min-width:0}@media(max-width:700px){.brand-logo{width:190px;margin-bottom:18px}header{align-items:flex-start}.status{margin-top:8px}}

/* Phone layout: keep metrics readable without horizontal scrolling. */
.summary{grid-template-columns:repeat(4,minmax(0,1fr))}
.metric,.panel,.heading>div,.row>*{min-width:0}
#machine,.metric small,.row strong{overflow-wrap:anywhere}
.metric small{display:block;line-height:1.5}
@media(max-width:700px){
 main{padding:24px max(14px,env(safe-area-inset-right)) 28px max(14px,env(safe-area-inset-left))}
 header{flex-direction:column;align-items:stretch;gap:14px;margin-bottom:20px}
 .brand-logo{width:180px;margin-bottom:16px}
 h1{font-size:42px;margin:8px 0}
 #machine{font-size:12px;line-height:1.6}
 .status{align-self:flex-start;margin-top:0;font-size:12px;padding:8px 12px}
 .summary{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:14px}
 .metric,.panel{padding:16px;border-radius:14px}
 .panel{margin-bottom:14px}
 .metric .value{font-size:clamp(24px,7vw,32px);letter-spacing:-1px}
 .metric .label{font-size:10px;letter-spacing:1px}
 .metric small{font-size:11px}
 .heading{gap:10px}
 .heading p{line-height:1.5}
 .legend{gap:16px;flex-wrap:wrap}
 canvas{height:180px;margin-top:16px}
 .cores{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:14px}
 .core{padding:9px 6px}
 .core strong{font-size:13px}
 .row{align-items:flex-start;flex-wrap:wrap;gap:5px 12px;line-height:1.5}
 .row span{flex:1 1 110px}
 .row strong{flex:0 1 auto;max-width:100%;margin-left:auto}
 .disk p{line-height:1.6}
 footer{overflow-wrap:anywhere}
}
@media(max-width:360px){
 .metric,.panel{padding:12px}
 .row{flex-direction:column;gap:3px}
 .row span{flex:auto}
 .row strong{margin-left:0;text-align:left}
 .core strong{font-size:12px}
}

.temperature-row span{flex:1;min-width:0}.temperature-row b{display:block;font-weight:550;color:#e8eef7}.temperature-row small{display:block;font-size:11px;line-height:1.5;margin-top:4px;color:var(--muted)}.temperature-row strong{flex:none;white-space:nowrap}