*{box-sizing:border-box}html,body{margin:0;height:100%;background:#08111f;color:#ecf4ff;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
body{display:flex;justify-content:center}
.app{width:100%;max-width:900px;min-height:100%;background:#08111f}
.topbar{padding:14px 16px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.topbar h1{margin:0;font-size:1.25rem}.sub{margin:4px 0 0;color:#a7bddc;font-size:.9rem}
.viewer{position:relative;aspect-ratio:9/16;background:#000;overflow:hidden}
video,canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hud{position:absolute;left:10px;right:10px;top:10px;background:rgba(4,10,20,.52);backdrop-filter:blur(8px);border:1px solid rgba(150,180,220,.25);border-radius:14px;padding:10px 12px}
.hud-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:6px}.hud-row:last-child{margin-bottom:0}
.badge{display:inline-block;padding:4px 10px;border-radius:999px;background:#17355f;color:#fff;font-weight:700}
.mono{font-variant-numeric:tabular-nums}
.controls{padding:14px 16px 22px}
.button-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:14px}
button{background:#245eaa;color:#fff;border:none;border-radius:12px;padding:12px 14px;font-size:1rem;font-weight:700}
button.ghost{background:transparent;border:1px solid rgba(255,255,255,.22)}button.hidden{display:none}
details{background:#0f1b31;border:1px solid rgba(140,170,210,.18);border-radius:14px;padding:12px 14px;margin-bottom:12px}
summary{cursor:pointer;font-weight:700}
.settings{display:grid;gap:10px;margin-top:10px}
label{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}
label input[type='range']{grid-column:1 / span 2;width:100%}
.inline{display:flex;justify-content:flex-start;align-items:center;gap:10px}
#log{white-space:pre-wrap;word-break:break-word;max-height:220px;overflow:auto;margin:10px 0 0;color:#cfe0f7}
.help{color:#cfe0f7}
.marker-label{position:absolute}