:root{color-scheme:dark;--bg:#0a121e;--panel:#121f30;--line:#29384c;--text:#e2edf5;--muted:#a6b9c9;--mint:#67e8c3;--gold:#ffc477}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:16px/1.6 system-ui,sans-serif}header{padding:22px 5%;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);gap:20px}a{color:var(--mint)}header a{text-decoration:none;font-weight:750}header span{color:var(--muted);font-weight:400}main{max-width:1450px;margin:auto;padding:30px 5%}h1{font-size:clamp(2rem,4.5vw,3.6rem);line-height:1.15;letter-spacing:-.035em;margin:14px 0}h2{font-size:1.2rem;margin:0 0 18px}h3{font-size:1.05rem}.intro{max-width:930px;margin-bottom:36px}.intro p{color:var(--muted)}.eyebrow{letter-spacing:.15em;font-size:.75rem}.badge{color:var(--mint);font-size:.72rem;letter-spacing:.1em}.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px;margin-bottom:22px}.controls{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}label{display:flex;flex-direction:column;gap:6px;font-size:.85rem}input,select,button{font:inherit;color:var(--text);border:1px solid #43556d;background:#0d1827;border-radius:7px;padding:10px;max-width:100%}button{cursor:pointer}button:hover{border-color:var(--mint)}button[type=submit],#play{background:var(--mint);color:#09251e;border-color:var(--mint);font-weight:700}:focus-visible{outline:3px solid var(--gold);outline-offset:3px}.toolbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:18px}.file{max-width:260px;font-size:.8rem}.file input{padding:5px;font-size:.75rem}.views{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.views .panel{padding:16px;overflow:hidden}.viewport{height:260px;background:#0d1827;border-radius:9px}.viewport canvas{display:block;width:100%;height:100%}small,.muted{color:var(--muted)}.playback{margin-top:0}#time{flex:1;min-width:130px;accent-color:var(--mint)}output{font-variant-numeric:tabular-nums}.lower{display:grid;grid-template-columns:1fr 1.3fr;gap:20px}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;font-size:.85rem}th,td{text-align:left;padding:8px;border-bottom:1px solid var(--line)}#error{color:#ffaaa7}#notice{color:var(--mint)}#checks strong{color:var(--gold)}summary{cursor:pointer}footer{color:var(--muted);font-size:.8rem;padding:20px 0}.checks-row{margin:12px 0} @media(max-width:900px){.views{grid-template-columns:1fr}.viewport{height:240px}.lower{grid-template-columns:1fr}.controls{grid-template-columns:repeat(2,1fr)}header{align-items:flex-start;flex-direction:column}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}

main{max-width:1800px;padding-left:3%;padding-right:3%}.viewport{height:360px}.camera-controls{margin-bottom:12px}.camera-controls span{color:var(--muted);font-size:.85rem}.expand-view{margin-bottom:12px;padding:6px 12px}.views .expanded{grid-column:1/-1;grid-row:1}.views .expanded .viewport{height:clamp(360px,65vh,760px)}@media(max-width:900px){.viewport{height:340px}.views .expanded .viewport{height:65vh}}

.viewport{position:relative;overflow:hidden}.position-tag{position:absolute;transform:translate(-50%,-100%);padding:1px 7px;border:1px solid currentColor;border-radius:5px;background:#0a121eee;font-weight:800;font-size:14px;line-height:1.5;pointer-events:none;z-index:1}.position-tag[hidden]{display:none}