*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#F3F0E6;color:#111;font-family:'Archivo',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:#111}a:hover{color:#5a4a00}
:focus-visible{outline:3px solid #FFC90E;outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mono{font-family:'JetBrains Mono',monospace}
.wrap{max-width:1200px;margin:0 auto;padding:88px 24px}
.eyebrow{font:600 13px 'JetBrains Mono',monospace;letter-spacing:.12em;text-transform:uppercase}
.h2{margin:0;font-weight:900;font-size:clamp(36px,5vw,60px);letter-spacing:-.03em;line-height:1}

/* pager case */
.case{position:relative;background:#FFC90E;border:3px solid #111;border-radius:72px;padding:26px 30px 22px;display:flex;flex-direction:column;gap:18px;box-shadow:inset 0 -8px 0 rgba(0,0,0,.08),inset 0 3px 0 rgba(255,255,255,.4)}
.face{background:#2B2B29;border-radius:40px;padding:14px 20px 14px 22px;display:flex;gap:12px;align-items:stretch;box-shadow:inset 0 2px 0 rgba(255,255,255,.08)}
.screen{flex:1 1 auto;min-width:0;background:#141414;border-radius:22px;padding:8px}
.lcd{background:#E7E5DD;color:#151515;border-radius:15px;padding:9px 11px;font:400 14px/1.25 'Silkscreen',monospace;display:flex;flex-direction:column;gap:6px;box-shadow:inset 0 1px 3px rgba(0,0,0,.18)}
.lcd-status{display:flex;justify-content:space-between;font-size:10px;opacity:.7}
.lcd-row{display:flex;justify-content:space-between;gap:10px}
.grille{display:flex;flex-direction:column;justify-content:center;gap:5px}
.grille i{display:block;width:18px;height:4px;border-radius:2px;background:#111}
.slide{position:absolute;top:-13px;left:92px;width:62px;height:13px;background:#2B2B29;border-radius:7px 7px 0 0}
.slide::after{content:'';position:absolute;left:8px;top:3px;width:22px;height:8px;border-radius:3px;background:#FFC90E}
.nub{position:absolute;top:-9px;right:88px;width:30px;height:9px;background:#2B2B29;border-radius:5px 5px 0 0}
.keys{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;justify-items:center;padding-bottom:6px}
.key{appearance:none;border:0;cursor:pointer;width:60px;height:34px;border-radius:17px;background:#46463F;box-shadow:0 4px 0 #111,inset 0 2px 0 rgba(255,255,255,.14);font:400 11px/1 'Silkscreen',monospace;color:#FFC90E;display:grid;place-items:center;transition:transform .08s,box-shadow .08s}
.key:active{transform:translateY(3px);box-shadow:0 1px 0 #111}
.key.off{background:#D9AD0B;color:#9C7C00;box-shadow:inset 0 2px 3px rgba(0,0,0,.25);cursor:default}
.key.mine{background:#111;color:#FFC90E;box-shadow:0 4px 0 #000,0 0 0 3px #F3F0E6}
.case-foot{display:flex;justify-content:space-between;align-items:baseline;padding:0 22px}
.wordmark{font-weight:900;font-size:16px;font-style:italic}

/* buttons */
.tab{appearance:none;cursor:pointer;border:2px solid #111;background:transparent;border-radius:999px;padding:12px 20px;font:600 14px/1 'JetBrains Mono',monospace;color:#111;min-height:44px}
.tab.on{background:#111;color:#FFC90E}
.btn{appearance:none;cursor:pointer;border:2px solid #111;border-radius:12px;padding:14px 22px;font:700 16px/1 'Archivo',sans-serif;min-height:48px;display:inline-flex;align-items:center;text-decoration:none}
.btn:disabled{opacity:.6;cursor:default}
.ctl{appearance:none;cursor:pointer;border:2px solid #F3F0E6;background:transparent;color:#F3F0E6;border-radius:999px;padding:10px 16px;min-height:44px;font:600 13px 'JetBrains Mono',monospace}
.ctl.on{background:#FFC90E;border-color:#FFC90E;color:#111}

/* 3D model */
.hb-stage{position:relative;overflow:hidden;cursor:grab;touch-action:none;perspective:1500px;height:560px;border-radius:24px;background:#262623;flex:999 1 480px;min-width:0}
.hb-stage:active{cursor:grabbing}
.hb-scene,.hb-scene *{transform-style:preserve-3d}
.hb-p{position:absolute;box-sizing:border-box;transition:transform .6s cubic-bezier(.2,.8,.2,1),opacity .4s}
.hb-body{left:-184px;top:-120px;width:368px;height:240px;border-radius:96px}
.hb-nub{position:absolute;top:-10px;right:100px;width:36px;height:11px;border-radius:6px 6px 0 0;background:#2B2B29}
.hb-slide{position:absolute;top:-13px;left:104px;width:66px;height:14px;border-radius:7px 7px 0 0;background:#2B2B29}
.hb-knob{position:absolute;top:3px;width:24px;height:9px;border-radius:3px;background:#FFC90E;transition:left .3s}
.hb-pill{width:52px;height:30px;border-radius:15px}
.hb-lcd{background:#E7E5DD;color:#151515;border-radius:22px;padding:9px 16px;font:400 13px/1.25 'Silkscreen',monospace;display:flex;flex-direction:column;justify-content:space-between;height:100%;box-shadow:inset 0 1px 3px rgba(0,0,0,.18)}
.hb-spin{animation:hbspin 20s linear infinite}
@keyframes hbspin{from{transform:rotateY(0deg)}to{transform:rotateY(360deg)}}
.hb-scale{transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.hb-scale.ex{transform:scale3d(.9,.9,.9)}
@media (max-width:600px){.hb-scale{transform:scale3d(.74,.74,.74)}.hb-scale.ex{transform:scale3d(.5,.5,.5)}.hb-stage{height:440px}}
@media (prefers-reduced-motion:reduce){.hb-spin{animation:none}html{scroll-behavior:auto}}

/* network animation */
#net-canvas{display:block;width:100%;border-radius:24px;background:#262623}
.net-row{display:grid;grid-template-columns:72px minmax(0,1fr) 40px;gap:10px;align-items:center;font-size:13px}
.net-bar{height:14px;border-radius:7px;background:#33332F;overflow:hidden}
.net-bar>div{height:100%;width:0;transition:width .6s cubic-bezier(.2,.8,.2,1)}
.legend-dot{display:inline-block;width:10px;height:10px;border-radius:50%;vertical-align:middle;margin-right:6px}
.kit{border:2px solid #FFC90E;border-radius:24px;padding:24px;display:flex;flex-direction:column;gap:10px}

/* results */
.bar{height:18px;border:2px solid #111;border-radius:9px;background:#fff;overflow:hidden}
.bar>div{height:100%;background:#111;transition:width .3s}
[x-cloak]{display:none!important}