:root{font-family:Tahoma,Arial,sans-serif;color:#f4efe5;background:#111719;color-scheme:dark}*{box-sizing:border-box}body{margin:0}main{max-width:1180px;margin:auto;padding:24px}header{display:flex;justify-content:space-between;gap:20px;font-size:.85rem;color:#c9b789}a{color:#e8d2a3;text-underline-offset:5px}h1{font-size:clamp(1.6rem,4vw,2.5rem);font-weight:500;margin:28px 0 12px}.notice{font-size:1.05rem;line-height:1.8;margin:0}.detail,.hint,footer{color:#b7c1c3;font-size:.87rem;line-height:1.8}#viewer{position:relative;margin-top:20px;height:clamp(260px,54vh,650px);background:#070b0d;border:1px solid #334044;border-radius:12px;overflow:hidden}canvas{width:100%;height:100%;display:block;touch-action:none;cursor:grab}canvas:active{cursor:grabbing}video{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.start{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);white-space:nowrap;background:#e8d2a3!important;color:#151b1d!important;font-weight:bold}#status{position:absolute;bottom:12px;right:12px;left:12px;width:fit-content;max-width:calc(100% - 24px);padding:6px 12px;border-radius:6px;background:#101719d9;font-size:.8rem;pointer-events:none}.controls{display:flex;align-items:center;gap:14px;padding:14px 0;flex-wrap:wrap}button{font:inherit;color:inherit;background:#243134;border:1px solid #58605b;border-radius:7px;padding:11px 17px;min-height:44px;cursor:pointer}button:disabled{opacity:.5}input{accent-color:#e8d2a3;min-height:32px;cursor:pointer}.timeline{display:flex;align-items:center;gap:10px;flex:1;min-width:130px}.timeline input{width:100%;direction:ltr}.zoom{display:flex;align-items:center;gap:7px}.zoom input{width:90px;direction:rtl}output{font-size:.8rem;font-variant-numeric:tabular-nums}footer{display:flex;flex-wrap:wrap;gap:10px 24px;border-top:1px solid #334044;padding-top:16px}#error{padding:14px;border:1px solid #c99683;background:#382622;line-height:1.8}[hidden]{display:none!important}:focus-visible{outline:3px solid #e8d2a3;outline-offset:4px}@media(max-width:600px){main{padding:16px}h1{margin-top:23px}.controls{gap:10px}.timeline{flex-basis:55%}.zoom{margin-inline-start:auto}.detail{margin-bottom:8px}#viewer{height:45vh;min-height:260px}.hint{margin-top:0}}