:root{--bg:#070a17;--line:#303047;--muted:#8d93b4;--violet:#a995fd;--gold:#ffdfab;--ice:#9fe3ff;font-synthesis:none}
*{box-sizing:border-box}
html{color-scheme:dark;min-width:320px} body{margin:0;background:radial-gradient(ellipse at 75% 1%,#262048 0%,transparent 31%),radial-gradient(ellipse at 0 55%,#0d1f38 0%,transparent 44%),#080b17;color:#f5f0fc;font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;-webkit-font-smoothing:antialiased}
button,input,select{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #e3c4ff;outline-offset:3px}
.grain{position:fixed;inset:0;pointer-events:none;z-index:9;opacity:.15;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E")}
.shell{width:min(1440px,100% - 64px);margin:0 auto}
.masthead{height:87px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #49405865}.identity{display:flex;align-items:center;gap:14px}.sigil{display:grid;place-items:center;width:39px;height:39px;border:1px solid #b6a7f5;border-radius:50%;box-shadow:0 0 18px #816ef342,inset 0 0 17px #816ef33b;position:relative;color:#f2d6b1;font-size:23px}.sigil:after{content:"";position:absolute;inset:-5px;border:1px dashed #a09bf15a;border-radius:50%}.id-stack{display:flex;flex-direction:column;gap:3px}.id-stack strong{font-size:11px;letter-spacing:.21em}.id-stack small{font-size:9px;color:var(--muted);letter-spacing:.14em}.project-tag{font-size:9px;font-weight:700;letter-spacing:.14em;color:#c5bfdd;display:flex;align-items:center;gap:10px}.project-tag i,.live-dot{width:6px;height:6px;border-radius:50%;background:#9adee9;box-shadow:0 0 10px #83efff;display:inline-block}.project-tag em{font-style:normal;color:#837eaa;border-left:1px solid #6d6485;padding-left:12px;margin-left:7px}
.page-heading{padding:34px 0 31px;position:relative}.eyebrow{font-size:10px;letter-spacing:.26em;color:#a3a8c4;display:flex;align-items:center;gap:15px;font-weight:700}.eyebrow-line{width:33px;height:1px;background:linear-gradient(90deg,#cda8ff,transparent)}.slash{color:#e8c9f5}
h1{margin:9px 0 6px;font-size:clamp(42px,5.3vw,76px);line-height:1.22;letter-spacing:.065em;font-weight:800;font-family:"Hiragino Mincho ProN","Yu Mincho",serif;text-shadow:0 3px 25px #a583e72b}h1 .dot{color:#9979c3}.accent-text{background:linear-gradient(100deg,#f7d8a9 5%,#ffffff 37%,#c9a2ff 85%);-webkit-background-clip:text;background-clip:text;color:transparent}.page-heading p{font-size:12px;letter-spacing:.08em;color:#d7d1ed;margin:0}.page-heading p span{color:#9495b2;margin-left:15px}
.player{background:linear-gradient(150deg,#292840,#0f1429);border:1px solid #47405d;box-shadow:0 22px 80px #01010aaf,0 0 70px #54358f1b;border-radius:9px;overflow:hidden}.player-topline{height:42px;background:linear-gradient(90deg,#15172a,#201d38);display:flex;justify-content:space-between;align-items:center;padding:0 22px;border-bottom:1px solid #4d4864}.player-label,.player-id{font-size:10px;letter-spacing:.18em;font-weight:700;color:#bdbad0;display:flex;align-items:center;gap:11px}.player-label b{letter-spacing:.08em;color:#7c7894;font-size:9px}.player-id{font-size:9px;color:#a6a2b9}.player-id b{color:#e7dcff}.player-id .divide{color:#665c7d}.player-id #phaseDisplay{color:#ebcc9c}
.stage{position:relative;aspect-ratio:16/9;overflow:hidden;background:#030719;isolation:isolate}.stage canvas{width:100%;height:100%;display:block;object-fit:fill}.stage-sheen{pointer-events:none;position:absolute;inset:0;background:linear-gradient(115deg,transparent 0%,transparent 34%,#9b93e309 48%,transparent 61%),linear-gradient(to bottom,#04031a6b,transparent 17%,transparent 83%,#08041ea8)}.stage-ui{position:absolute;inset:0;pointer-events:none}.stage-target{position:absolute;top:35px;left:43px;display:flex;align-items:center;gap:10px;font-size:9px;letter-spacing:.2em;color:#e4d3ff;text-shadow:0 0 15px #a96de6}.stage-target>span{opacity:.65}.stage-corner{position:absolute;width:25px;height:25px;border-color:#d7d2fc82;border-style:solid}.corner-tl{top:18px;left:19px;border-width:1px 0 0 1px}.corner-tr{top:18px;right:19px;border-width:1px 1px 0 0}.corner-bl{bottom:18px;left:19px;border-width:0 0 1px 1px}.corner-br{bottom:18px;right:19px;border-width:0 1px 1px 0}.vertical-type{position:absolute;right:30px;top:50%;writing-mode:vertical-rl;transform:translateY(-50%);font-weight:700;letter-spacing:.23em;font-size:9px;color:#e2d8ffae}.vertical-type span{font-size:22px;margin:18px 0;color:#fae2ac}
.ability-copy{position:absolute;left:7%;bottom:9%;display:flex;flex-direction:column;gap:0;filter:drop-shadow(0 4px 23px #000);opacity:0;transform:translate(-23px,10px) skew(-3deg);transition:opacity .12s,transform .16s}.ability-copy.visible{opacity:1;transform:translate(0,0) skew(-3deg)}.ability-en{font-size:clamp(7px,.92vw,14px);font-weight:900;letter-spacing:.35em;color:#fee0a4}.ability-copy strong{font-family:"Hiragino Mincho ProN","Yu Mincho",serif;font-size:clamp(25px,4.6vw,72px);line-height:1.32;font-weight:900;letter-spacing:.06em;background:linear-gradient(#fff 12%,#ffe1b7 59%,#cb9ffc 100%);color:transparent;-webkit-background-clip:text;background-clip:text;-webkit-text-stroke:.5px #fff6dd55;text-shadow:0 4px 36px #f9b0f633}.ability-caption{font-size:clamp(8px,1vw,14px);letter-spacing:.22em;color:#e6d6fa}
.stage-bottom{position:absolute;bottom:20px;left:46px;right:42px;display:flex;justify-content:space-between;font-weight:700;color:#d6d2e17a;font-size:9px;letter-spacing:.18em}.stage-bottom b{color:#ffdda2}.stage-bottom i{display:inline-block;width:15px;border-top:1px solid #746d8f;vertical-align:middle;margin:0 5px}
.expand{position:absolute;right:60px;bottom:55px;background:#0b0c2290;border:1px solid #ddd4ff56;color:#efeaff;display:grid;place-items:center;width:34px;height:34px;border-radius:4px;transition:background .2s}.expand:hover{background:#a17ae656}.expand svg{width:17px;height:17px}
.loadveil{position:absolute;inset:0;background:#080c1cec;display:flex;flex-direction:column;gap:16px;align-items:center;justify-content:center;font-size:12px;color:#ddd5ef;letter-spacing:.14em;z-index:5;transition:opacity .5s}.loadveil.hidden{opacity:0;pointer-events:none}.load-star{font-size:50px;color:#d8c5ff;filter:drop-shadow(0 0 20px #bc90f5);animation:spinning 5s linear infinite}@keyframes spinning{to{transform:rotate(360deg)}}
.playback{padding:17px 21px 18px;display:flex;align-items:center;justify-content:space-between;gap:24px}.playback-main{display:flex;align-items:center;flex:1;gap:11px;min-width:0}.action-btn{background:#22233e;color:#e6e2f7;border:1px solid #625a7e;height:44px;border-radius:4px;font-size:12px;letter-spacing:.05em;display:flex;justify-content:center;align-items:center;gap:13px;white-space:nowrap;font-weight:700;transition:transform .12s,filter .18s}.action-btn:hover{filter:brightness(1.23)}.action-btn:active{transform:scale(.97)}.action-btn.primary{background:linear-gradient(107deg,#f7d7a2,#e8b3ea);border:0;color:#222034;padding:0 20px;box-shadow:0 3px 22px #d89aba30}.play-icon{font-size:12px}.key-hint{font-size:8px;border:1px solid #7e6b77;padding:3px 4px;opacity:.66}.pause-btn{width:44px;font-size:15px}
.timeline-wrap{flex:1;max-width:620px;min-width:100px;margin:0 7px}.timeline-meta{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:#a4a1bb;font-variant-numeric:tabular-nums;letter-spacing:.07em}.timeline-meta span:nth-child(2){font-weight:600;color:#cfb8f1}.timeline-rail{position:relative;height:23px;display:flex;align-items:center}.timeline-rail input{position:relative;width:100%;z-index:1;appearance:none;-webkit-appearance:none;height:4px;border:0;border-radius:4px;background:linear-gradient(to right,#d7aeff 0%,#d7aeff var(--seek,0%),#46425f var(--seek,0%),#46425f 100%);cursor:pointer}.timeline-rail input::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:#fff0cc;border:2px solid #a877d7;box-shadow:0 0 12px #d8a6ff}.timeline-rail input::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#fff0cc;border:2px solid #a877d7}.tick{position:absolute;width:2px;height:10px;background:#846dbd;pointer-events:none;opacity:.48}
.playback-settings{display:flex;align-items:center;gap:9px}.toggle,.select-wrap{border:1px solid #59536f;background:#15182d;border-radius:4px;height:37px;display:flex;align-items:center;gap:8px;padding:0 11px;font-size:10px;letter-spacing:.08em;color:#bcb6d4;font-weight:700;white-space:nowrap}.toggle.active{color:#f4e3fd;border-color:#a789cf;background:#392c54}.toggle strong{font-size:9px;color:#f4d6a1}.mini-icon{font-size:16px;color:#d7c3ff}.select-wrap{padding-right:8px}.select-wrap select{background:transparent;color:#faf3ff;border:0;outline:0;font-size:11px;font-weight:700;cursor:pointer}.select-wrap option{color:#18142d}
.under-player{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:25px 0 29px;border-bottom:1px solid #3b354b}.under-title{display:flex;align-items:center;gap:14px;font-size:10px;font-weight:800;letter-spacing:.17em;color:#a99bc7}.under-title strong{font-family:"Hiragino Mincho ProN","Yu Mincho",serif;font-size:17px;color:#f2e9ff;letter-spacing:.08em;font-weight:600}.tiny-diamond{font-size:27px;color:#e9c890}.under-meta{display:flex;align-items:center;gap:14px;font-size:9px;letter-spacing:.12em;color:#747b9e;font-weight:800}.link-line{height:2px;width:3px;border-radius:50%;background:#a8a1be}
.notes{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin:24px 0 48px}.notes>div{border-left:1px solid #56506c;padding:2px 0 4px 19px}.note-index{display:block;font-size:9px;font-weight:800;letter-spacing:.16em;color:#ceb4ea;margin-bottom:12px}.notes strong{display:block;font-size:14px;letter-spacing:.06em;color:#eee8f6}.notes p{margin:7px 0 0;font-size:11px;line-height:1.7;letter-spacing:.03em;color:#999ab6}
footer{display:flex;justify-content:space-between;gap:12px;border-top:1px solid #3e3750;padding:20px 0 30px;color:#676887;font-size:9px;font-weight:700;letter-spacing:.14em}
.stage:fullscreen{width:100vw;height:100vh;aspect-ratio:auto;display:grid;place-items:center;background:#030715}.stage:fullscreen canvas{width:min(100vw,177.78vh);height:min(100vh,56.25vw);margin:auto}.stage:fullscreen .stage-ui,.stage:fullscreen .stage-sheen{inset:0;margin:auto;width:min(100vw,177.78vh);height:min(100vh,56.25vw)}
@media(max-width:1050px){.playback{flex-wrap:wrap}.playback-settings{width:100%;justify-content:flex-end}.stage-target{top:20px;left:28px}.stage-bottom{left:30px;bottom:13px;right:30px}.vertical-type{right:18px}.under-meta{display:none}}
@media(max-width:700px){.shell{width:calc(100% - 24px)}.masthead{height:63px}.id-stack strong{font-size:10px}.id-stack small{font-size:7px}.project-tag{font-size:0;gap:7px}.project-tag em{font-size:8px}.page-heading{padding:27px 2px 24px}.page-heading h1{font-size:clamp(38px,10vw,58px);margin:10px 0}.page-heading p{font-size:11px;line-height:1.7}.page-heading p span{display:block;margin:4px 0 0}.eyebrow{font-size:8px;letter-spacing:.12em}.player-topline{height:33px;padding:0 11px}.player-label,.player-id{font-size:8px;letter-spacing:.06em}.player-label b{display:none}.stage-target,.stage-bottom,.vertical-type,.ability-caption{display:none}.stage-corner{width:12px;height:12px}.corner-tl{top:10px;left:10px}.corner-tr{top:10px;right:10px}.corner-bl{bottom:10px;left:10px}.corner-br{bottom:10px;right:10px}.ability-copy{bottom:7%;left:6%}.ability-copy strong{font-size:clamp(21px,5.1vw,41px)}.ability-en{font-size:7px}.expand{right:21px;bottom:19px;width:26px;height:26px}.expand svg{width:14px}.playback{padding:13px 11px;gap:10px}.action-btn{height:38px}.action-btn.primary{padding:0 11px;font-size:10px;gap:7px}.key-hint{display:none}.pause-btn{width:34px;font-size:13px}.timeline-wrap{margin:0 0 0 3px}.timeline-meta{font-size:9px}.timeline-meta span:nth-child(2){display:none}.playback-settings{justify-content:space-between;gap:6px}.toggle,.select-wrap{flex:1;justify-content:center;padding:0 6px;font-size:9px;height:34px}.toggle .mini-icon{font-size:12px}.under-player{padding:18px 0}.under-title{gap:8px;font-size:9px}.under-title strong{font-size:13px}.tiny-diamond{font-size:19px}.notes{grid-template-columns:1fr;gap:18px;margin:20px 0 29px}.notes>div{padding-left:14px}.note-index{margin-bottom:5px}footer{font-size:8px;line-height:1.5}}
@media(prefers-reduced-motion:reduce){.load-star{animation:none}.ability-copy,.loadveil{transition:none}}