:root{--device-ink:#f4efe6;--device-dim:#8d877b;--device-glass:#0c0d10;--device-edge:#262a30}.hw-layout{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-areas:"device reading""network network""study study";align-items:start;gap:16px;max-width:1240px;margin:0 auto;padding:20px 24px 8px;display:grid}.device-panel{grid-area:device;animation-delay:50ms}.reading-panel{grid-area:reading;animation-delay:.12s}.hw-layout .network-panel{grid-area:network;animation-delay:.19s}.study-panel{grid-area:study;animation-delay:.26s}@media (width<=860px){.hw-layout{grid-template-columns:minmax(0,1fr);grid-template-areas:"device""reading""network""study"}}@media (width<=720px){.hw-layout{padding-left:16px;padding-right:16px}}.device-panel{background:radial-gradient(120% 70% at 50% 62%, color-mix(in srgb, var(--ink) 7%, transparent), transparent 70%), var(--panel);justify-items:center;gap:22px;padding:28px 16px 20px;display:grid}.display{background:linear-gradient(180deg, #15181c, var(--device-glass));border:1px solid var(--device-edge);width:min(100%,440px);color:var(--device-ink);border-radius:14px;padding:12px 16px 14px;box-shadow:inset 0 1px #ffffff0d,0 14px 30px -20px #000000b3}.display-label{font:500 10px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--device-dim)}.display-text{font:400 30px/1.2 var(--mono);letter-spacing:.06em;white-space:nowrap;min-height:1.2em;margin:6px 0 10px;overflow:hidden}.caret{vertical-align:-.12em;background:#ffb060;width:2px;height:.95em;margin-left:2px;animation:1.1s steps(2,start) infinite blink;display:inline-block;box-shadow:0 0 8px #ffb060cc}@keyframes blink{to{visibility:hidden}}.chips{gap:6px;min-height:34px;display:flex}.chips button{min-height:34px;color:var(--device-ink);font:500 13px/1 var(--mono);background:#1b1e23;border:1px solid #3a3f46;border-radius:999px;padding:4px 12px}.chips button b{font:400 18px/1 var(--serif);margin-right:6px}.chips button[aria-pressed=true]{border-color:#ffb060;box-shadow:0 0 0 1px #ffb06059,0 0 14px -4px #ffb060cc}.chips button:hover:not([aria-pressed=true]){border-color:#5a6068}.knob{aspect-ratio:1;background:radial-gradient(circle at 50% 30%,#ffffff29,#0000 60%),repeating-conic-gradient(#2b2e33 0deg 1.4deg,#43474e 1.4deg 2.8deg);border-radius:50%;width:min(100%,360px);padding:16px;box-shadow:0 26px 40px -22px #000000a6,0 2px #00000040,inset 0 0 0 1px #00000080}.bezel{background:conic-gradient(from 200deg,#cfccc5,#7c7973,#eeeae2,#8a8781,#d9d5cd,#75726c,#cfccc5);border-radius:50%;width:100%;height:100%;padding:5px;box-shadow:inset 0 0 0 1px #00000059}.glass{background:radial-gradient(circle at 36% 26%, #2a2f35 0%, #121417 52%, var(--device-glass) 100%);border-radius:50%;width:100%;height:100%;transition:box-shadow .25s;position:relative;overflow:hidden;box-shadow:inset 0 3px 10px #000000d9,inset 0 -1px #ffffff0f}.glass:after{content:"";pointer-events:none;background:radial-gradient(60% 38% at 32% 16%,#ffffff17,#0000 70%);border-radius:50%;position:absolute;inset:0}.glass.read{box-shadow:inset 0 3px 10px #000000d9, inset 0 0 0 2px color-mix(in srgb, var(--s1) 70%, transparent), inset 0 0 26px -6px var(--s1)}.glass canvas{touch-action:none;cursor:crosshair;width:100%;height:100%;position:absolute;inset:0}.pad-hint{font:500 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#6f6a60;pointer-events:none;place-items:center;transition:opacity .3s;display:grid;position:absolute;inset:0}.pad-hint[data-off=true]{opacity:0}.keys{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.hint{font:400 12px/1.5 var(--mono);color:var(--ink-3);text-align:center;margin:0}.reader+.reader{border-top:1px dashed var(--panel-edge);margin-top:18px;padding-top:16px}.prob-list,.dist-list{gap:6px;margin:10px 0 6px;padding:0;list-style:none;display:grid}.prob-list li,.dist-list li{grid-template-columns:30px minmax(0,1fr) 64px;align-items:center;gap:10px;display:grid}.prob-list b,.dist-list b{font:400 28px/1 var(--serif)}.prob-list li:first-child b{color:var(--s1)}.bar{background:var(--track);border-radius:2px;height:10px;overflow:hidden}.bar i{background:var(--s1);height:100%;transition:width .3s;display:block}.prob-list li:not(:first-child) .bar i{background:color-mix(in srgb, var(--s1) 45%, var(--panel-edge))}.prob-list span,.dist-list span{font:500 12px/1 var(--mono);color:var(--ink-2);text-align:right}.dist-list .dist{font:400 12px/1 var(--mono);color:var(--ink-3);text-align:left}.dist-list li:first-child b{color:var(--food)}.cost-line{font:400 12px/1.5 var(--mono);color:var(--ink-3);margin:0}.reading-panel li.empty{display:block}.reading-panel .empty{font:400 13px/1.5 var(--sans);color:var(--ink-3)}.verdict{border-left:3px solid var(--s1);background:color-mix(in srgb, var(--s1) 8%, transparent);margin:16px 0 0;padding:10px 12px;font-size:14px}.verdict[data-agree=false]{border-color:var(--guard);background:color-mix(in srgb, var(--guard) 10%, transparent)}.work{margin-top:16px}.work-row{font:400 12px/1 var(--mono);color:var(--ink-2);grid-template-columns:64px minmax(0,1fr) 96px;align-items:center;gap:10px;margin-top:8px;display:grid}.work-row>span:last-child{text-align:right}.work-bar{background:var(--track);border-radius:2px;height:12px;overflow:hidden}.work-bar i{background:var(--s1);width:0;height:100%;transition:width .5s;display:block}.work-bar i.pd{background:var(--food)}.study-table{border-collapse:collapse;width:100%;margin:8px 0 14px;font-size:14px}.study-table th{font:500 10px/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);text-align:left;border-bottom:1px solid var(--panel-edge);padding:6px 8px 8px 0}.study-table td{border-bottom:1px dashed var(--panel-edge);font-variant-numeric:tabular-nums;padding:8px 8px 8px 0}.study-table td:first-child{font-weight:600}@media (width<=560px){.study-table th:nth-child(3),.study-table td:nth-child(3){display:none}}.targets{flex-wrap:wrap;gap:8px;margin:0 0 12px;padding:0;list-style:none;display:flex}.targets li{font:500 12px/1.3 var(--mono);border:1px solid var(--panel-edge);border-radius:3px;padding:6px 10px}.targets li[data-ok=true]{border-color:color-mix(in srgb, var(--s1) 60%, transparent);color:var(--s1)}.targets li[data-ok=false]{border-color:color-mix(in srgb, var(--s2) 60%, transparent);color:var(--s2)}@media (prefers-reduced-motion:reduce){.caret{animation:none}}
