:root{color-scheme:dark;--ink:#090912;--white:#f5effa;--faint:#6f6b85;--line:#302a41;--lilac:#d9bbff;--pink:#f6aee7;--gold:#ffe1ae}
*{box-sizing:border-box}
html,body{margin:0;min-width:320px;background:#090911;color:var(--white)}
body{font-family:Inter,-apple-system,BlinkMacSystemFont,'Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif;-webkit-font-smoothing:antialiased;background:radial-gradient(ellipse at 50% 5%,#1d1528 0,#0a0911 50%,#08080d 100%)}
button,input,select{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--lilac);outline-offset:3px}
.app{max-width:1640px;padding:0 44px;margin:0 auto}
.topbar{height:67px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #52415b55}
.brand{display:flex;align-items:center;gap:13px;font-weight:900;letter-spacing:.18em;font-size:11px}.brand-emblem{font-size:25px;color:var(--pink);font-weight:400;line-height:1}.brand-muted{color:#93899c;font-weight:500}
.top-meta{color:#968caa;font-size:9px;display:flex;gap:12px;align-items:center;letter-spacing:.18em;font-weight:800}.pulse{width:6px;height:6px;background:#d8aefc;border-radius:50%;box-shadow:0 0 10px #bf94fa}.top-divider{color:#514860}
.main{padding-top:26px}.titleline{min-height:102px;display:flex;justify-content:space-between;align-items:end;padding-bottom:21px}.overline{font-size:9px;font-weight:800;letter-spacing:.27em;color:#b2a9bf}.faded{color:#6b556b;margin:0 9px}
h1{font-family:'Hiragino Mincho ProN','Yu Mincho',serif;font-size:clamp(30px,3.1vw,54px);letter-spacing:.06em;margin:5px 0 0;line-height:1.2;font-weight:800}.title-dot{color:#d6a6d5}.title-en{font-family:Inter,-apple-system,sans-serif;color:#81748c;font-size:10px;letter-spacing:.28em;vertical-align:middle;margin-left:18px;font-weight:800}.title-side{font-size:9px;font-weight:800;letter-spacing:.14em;color:#8e819a;white-space:nowrap;margin-bottom:8px}.title-side span{color:#efc6e9;margin:0 8px}
.theater{border:1px solid #493858;background:#111019;box-shadow:0 30px 90px #0009,0 0 60px #85448b12}
.frame{position:relative;aspect-ratio:16/9;overflow:hidden;background:#010107;isolation:isolate}
#scene{display:block;width:100%;height:100%;object-fit:fill}
.frame-label{position:absolute;top:16px;left:20px;right:20px;display:flex;align-items:center;gap:9px;color:#e4c9ecb5;text-shadow:0 1px 9px #000;letter-spacing:.2em;font-size:9px;font-weight:800;pointer-events:none}.frame-label-right{margin-left:auto;color:#d4c3e9}.red-square{width:6px;height:6px;background:#fbc6dc;box-shadow:0 0 13px #f69bd6;transform:rotate(45deg)}
.fullscreen{position:absolute;bottom:18px;right:19px;width:35px;height:35px;border:1px solid #e3cbea55;background:#05030988;display:grid;place-items:center;color:#faf2ff;transition:background .18s}.fullscreen:hover{background:#412954d9}.fullscreen svg{width:17px;height:17px}
.loading{position:absolute;inset:0;background:#090815;display:grid;place-content:center;text-align:center;gap:18px;font-size:11px;font-weight:800;letter-spacing:.24em;color:#a9a0c3;transition:opacity .35s}.loading strong{color:#e8c3f7;font-size:42px;font-weight:400}.loading.hidden{opacity:0;pointer-events:none}
.transport{min-height:77px;display:flex;align-items:center;gap:13px;padding:14px 20px;background:#11101a;border-top:1px solid #574265}
.run,.pause{height:44px;border:1px solid #6e5377;display:flex;align-items:center;justify-content:center;color:white;font-size:12px;white-space:nowrap}.run{gap:13px;background:linear-gradient(110deg,#ebc4ec,#ecc3b9);color:#241224;border:0;font-weight:800;padding:0 22px}.run span{font-size:23px;line-height:1}.run:hover{filter:brightness(1.15)}.pause{width:45px;background:#1b1827;font-weight:900;font-size:16px}.pause:hover{background:#30253b}
.transport-timeline{flex:1;min-width:90px;padding:0 18px 0 14px}.timelabels{display:flex;justify-content:space-between;align-items:center;font-size:10px;font-variant-numeric:tabular-nums;color:#aaa0b8}.timelabels strong{font-size:10px;letter-spacing:.1em;color:#d9c5e7}.track{position:relative;height:17px;display:flex;align-items:center}.track input{position:relative;z-index:1;width:100%;height:3px;appearance:none;-webkit-appearance:none;background:linear-gradient(to right,#eac4ef 0%,#eac4ef var(--seek,0%),#3b344b var(--seek,0%),#3b344b 100%);border-radius:0;cursor:pointer}.track input::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:11px;height:11px;background:white;border-radius:50%;box-shadow:0 0 12px #eeafef}.track input::-moz-range-thumb{width:11px;height:11px;background:white;border-radius:50%;border:0}.track i{position:absolute;top:1px;bottom:1px;width:1px;background:#73568c;pointer-events:none}
.toggles{display:flex;align-items:center;gap:7px}.toggle,.speed{height:37px;display:flex;justify-content:center;align-items:center;gap:10px;border:1px solid #494052;background:#191521;padding:0 13px;color:#a59aae;font-size:10px;font-weight:800;letter-spacing:.08em;white-space:nowrap}.toggle.active{color:#f1d5fd;background:#30213a;border-color:#9c70a1}.toggle b{font-size:9px;color:#d9bdce}.toggle.active b{color:#ffe0a6}.speed select{background:transparent;border:0;color:#f5e6f8;outline:0;cursor:pointer;font-weight:800;font-size:11px}.speed option{color:#241c29}
.sequence{display:flex;align-items:stretch;gap:27px;padding:28px 3px 36px}.sequence-title{align-self:start;padding-top:5px;font-size:9px;letter-spacing:.17em;font-weight:800;color:#b5a3c5;white-space:nowrap}.sequence-title span{color:#8a6787}.beats{flex:1;display:grid;grid-template-columns:repeat(5,1fr)}.beats>div{display:flex;flex-direction:column;gap:6px;min-height:60px;padding-left:19px;border-left:1px solid #4c3c50}.beats i{font-size:9px;color:#deacd1;font-style:normal;font-variant-numeric:tabular-nums;font-weight:800}.beats b{font-size:11px;letter-spacing:.09em;color:#f0d9ee}.beats span{font-size:10px;color:#81788a}
footer{border-top:1px solid #392c3f;display:flex;justify-content:space-between;gap:12px;padding:19px 0 34px;color:#6b5e72;font-size:9px;font-weight:700;letter-spacing:.14em}
.frame:fullscreen{width:100vw;height:100vh;aspect-ratio:auto;display:grid;place-items:center;background:black}.frame:fullscreen canvas{width:min(100vw,177.777vh);height:min(100vh,56.25vw)}.frame:fullscreen .frame-label{top:5%;left:5%;right:5%}
@media(max-width:1080px){.app{padding:0 24px}.transport{flex-wrap:wrap}.transport-timeline{min-width:250px}.toggles{width:100%;justify-content:flex-end}.title-side{display:none}.sequence{display:block}.sequence-title{display:block;margin-bottom:16px}}
@media(max-width:650px){.app{padding:0 12px}.topbar{height:53px}.brand{font-size:10px}.top-meta{font-size:8px;gap:6px}.top-meta span:last-child,.top-divider{display:none}.main{padding-top:24px}.titleline{min-height:95px;padding-bottom:16px}.title-en{display:block;margin:7px 0 0;font-size:9px}h1{font-size:35px}.frame-label{top:10px;left:10px;right:10px;font-size:7px}.fullscreen{width:27px;height:27px;bottom:8px;right:9px}.fullscreen svg{width:15px}.transport{gap:9px;padding:12px 10px}.run{height:39px;padding:0 10px;font-size:11px;gap:7px}.pause{height:39px;width:36px}.transport-timeline{padding:0;min-width:90px}.timelabels strong{display:none}.toggles{gap:7px}.toggle,.speed{height:33px;flex:1;padding:0 6px;font-size:9px}.sequence{padding:20px 0 23px}.beats{grid-template-columns:repeat(5,minmax(0,1fr))}.beats>div{min-height:57px;padding-left:7px}.beats b{font-size:9px;letter-spacing:0}.beats span{font-size:8px}footer{font-size:7px}}
@media(prefers-reduced-motion:reduce){.loading{transition:none}}