@font-face{font-family:Gen2;src:url('gen2-dialogue.woff2?v=font-union')}*{box-sizing:border-box}:root{color-scheme:light;font-family:Gen2,system-ui,sans-serif;color:#263041;background:#e9e7ec}body{margin:0;padding:14px 12px;display:flex;justify-content:center;min-height:0}.player{width:100%;max-width:100%;min-width:0}header{display:flex;justify-content:space-between;align-items:center;padding:0 3px 8px;font-size:16px}#step-count{font-size:12px;color:#6f7381}.stage{position:relative;aspect-ratio:10/7;width:100%;overflow:hidden;border-radius:6px;background:#f3e8ce;isolation:isolate}video,img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}#poster{z-index:1}#poster[hidden]{display:none}#status{position:absolute;z-index:3;bottom:12px;left:12px;right:12px;padding:12px;background:#fffef8ed;font:14px system-ui;text-align:center;border-radius:6px}[hidden]{display:none!important}nav{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:10px;padding-top:12px}button{min-height:44px;font:16px Gen2,system-ui;padding:8px;background:#f8f6fa;color:#263041;border:2px solid #6b6278;border-bottom-width:4px;border-radius:9px;cursor:pointer}button:nth-child(2){background:#e6dfed}button:disabled{opacity:.4;cursor:default}button:active:not(:disabled){transform:translateY(2px);border-bottom-width:2px}.download{display:block;text-align:center;margin:12px 0;font:14px system-ui;color:#51445e;text-underline-offset:3px}button:focus-visible{outline:3px solid #9367b7;outline-offset:3px}@media(max-width:600px){body{padding:9px 8px}.player{width:100%;min-width:0}button{font-size:14px;padding:8px 4px}nav{gap:7px}}

.seek-row{display:flex;align-items:center;gap:10px;margin:8px 0;font:12px Arial,sans-serif}.seek-row input{flex:1;min-width:0;accent-color:#856396}.seek-row output{min-width:80px;text-align:right}.stage video{pointer-events:auto}

header{font-size:14px}#step-count{font-size:11px}button{font-size:13px}.seek-row{display:flex;align-items:center;gap:8px;margin-top:10px;font:11px/1.4 Arial,sans-serif}.seek-row input{min-width:0;flex:1;accent-color:#8a6b9b}.seek-row output{white-space:nowrap;font-variant-numeric:tabular-nums}.seek-row button{font:11px Arial,sans-serif;min-height:0;padding:5px 8px;border-width:1px;border-radius:3px}

header{gap:18px;align-items:start;font:14px/1.4 Georgia,serif}header>span:first-child{max-width:85%}#step-count{flex:none}


#fullscreen{flex:none;font:20px/1 Arial,sans-serif;min-height:30px;padding:4px 8px;border-width:1px;border-radius:4px}header>span:first-child{flex:1}header{gap:10px;align-items:center}
.player:fullscreen{background:#e9e7ec;width:100vw;height:100vh;display:flex;flex-direction:column;padding:12px;overflow:auto}
.player:fullscreen .stage{flex:1;min-height:0;aspect-ratio:auto}
.player:fullscreen header,.player:fullscreen nav,.player:fullscreen .seek-row{flex:none}