*{box-sizing:border-box;margin:0;padding:0}body{color:#f8fafc;background:#0f172a;flex-direction:column;align-items:center;gap:16px;padding:30px 20px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;display:flex}.panel{background:#1e293b;border:1px solid #334155;border-radius:8px;flex-direction:column;gap:14px;width:100%;max-width:680px;padding:20px;display:flex}.header-actions{justify-content:space-between;align-items:center;display:flex}.btn-debug{color:#f8fafc;cursor:pointer;background:#334155;border:1px solid #475569;border-radius:6px;padding:6px 14px;font-size:12px;font-weight:600;transition:all .2s}.btn-debug.active{color:#fff;background:#0284c7;border-color:#38bdf8}.telemetry{background:#0f172a;border:1px solid #334155;border-radius:6px;grid-template-columns:repeat(4,1fr);gap:10px;padding:12px;font-size:13px;display:grid}.telemetry-item div:first-child{color:#94a3b8;font-size:11px}.telemetry-item div:last-child{color:#38bdf8;margin-top:2px;font-weight:700}#viewport{will-change:transform;background:#090d16;border:1px solid #334155;border-radius:6px;width:100%;height:520px;position:relative;overflow-y:auto}#phantom{z-index:-1;position:absolute;top:0;left:0;right:0}#content-box{pointer-events:none;position:absolute;top:0;left:0;right:0}.list-item{pointer-events:auto;box-sizing:border-box;background:#131c2e;border-bottom:1px solid #1e293b;flex-direction:column;gap:6px;padding:12px 16px;transition:border .15s,background .15s;display:flex;position:absolute;top:0;left:0;right:0}.list-item-header{color:#38bdf8;justify-content:space-between;font-size:12px;display:flex}.list-item-desc{color:#cbd5e1;word-break:break-all;font-size:13px;line-height:1.5}.slot-tag{color:#fff;background:#3b82f6;border-radius:4px;margin-left:8px;padding:2px 6px;font-size:10px;display:none}body.debug-mode #viewport{border-color:#f59e0b;box-shadow:0 0 0 1px #f59e0b}body.debug-mode #phantom{outline-offset:-2px;outline:2px dashed #f59e0b40}body.debug-mode .list-item{background:#0f172af2;margin:2px 0;border:2px solid #38bdf8!important}body.debug-mode .slot-tag{display:inline-block}[hidden]{display:none!important}.panel{max-width:960px}.header-actions{flex-wrap:wrap;gap:16px}h1{font-size:clamp(24px,3vw,32px);font-weight:650;line-height:1.25}h2{font-size:19px;font-weight:600}.eyebrow{color:#38bdf8;letter-spacing:.12em;margin-bottom:8px;font-size:10px}.subtitle{color:#94a3b8;margin-top:8px;font-size:12px;line-height:1.7}button,select{font:inherit}button:disabled{opacity:.45;cursor:not-allowed}button:focus-visible,select:focus-visible,summary:focus-visible,a:focus-visible,#viewport:focus-visible{outline-offset:3px;outline:2px solid #38bdf8}.experiment-controls{border-top:1px solid #334155;flex-wrap:wrap;align-items:end;gap:12px;padding-top:18px;display:flex}.experiment-controls label{color:#94a3b8;gap:7px;font-size:11px;display:grid}select{color:#f8fafc;background:#0f172a;border:1px solid #475569;border-radius:6px;min-height:40px;padding:10px 12px;font-size:12px}.primary-button{color:#fff;cursor:pointer;background:#0284c7;border:1px solid #38bdf8;border-radius:6px;min-height:40px;padding:10px 14px;font-size:12px}.btn-debug{min-height:38px}.muted,.measurement-note{color:#94a3b8;font-size:11px;line-height:1.7}.list-heading{color:#94a3b8;justify-content:space-between;gap:12px;font-size:11px;display:flex}#active-mode{color:#e2e8f0}#viewport{scrollbar-gutter:stable;overflow-anchor:none}#viewport.is-measuring,#viewport.is-measuring .list-item{pointer-events:none}#viewport.is-full #phantom{display:none}#viewport.is-full #content-box,#viewport.is-full .list-item{position:relative}.item-size{display:none}body.debug-mode .item-size{color:#94a3b8;display:block}.list-item-header{align-items:baseline;gap:8px}.results{border-top:1px solid #334155;gap:12px;margin-top:8px;padding-top:22px;display:grid}#measurement-status{color:#cbd5e1;font-size:12px;line-height:1.7}.table-scroll{width:100%;overflow-x:auto}table{border-collapse:collapse;text-align:left;width:100%;font-size:11px}caption{text-align:left;color:#94a3b8;padding:0 0 8px;font-size:10px}th,td{white-space:nowrap;border-bottom:1px solid #334155;padding:12px 10px}th{color:#94a3b8;background:#0f172a;font-weight:500}td{font-variant-numeric:tabular-nums}summary{cursor:pointer;color:#cbd5e1;padding:10px 0;font-size:12px}.environment{white-space:pre-wrap;overflow-wrap:anywhere;color:#94a3b8;margin:8px 0 14px;font-size:11px;line-height:1.7}.protocol{border-top:1px solid #334155;padding-top:8px}.protocol ol{padding-left:24px}.protocol li,.protocol p{color:#94a3b8;margin:8px 0;font-size:12px;line-height:1.9}footer{color:#94a3b8;border-top:1px solid #334155;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-top:16px;font-size:10px;display:flex}footer a{color:#7dd3fc;text-decoration:none}footer a:hover{text-decoration:underline}@media (width<=640px){body{padding:12px}.panel{padding:16px}.telemetry{grid-template-columns:repeat(2,minmax(0,1fr));font-size:12px}.list-heading{flex-direction:column;gap:4px}#viewport{height:420px}.list-item{padding:10px 12px}.list-item-header{flex-wrap:wrap}.experiment-controls label{flex:140px}}@media (prefers-reduced-motion:reduce){*{transition:none!important}}