:root{--gold:#d4c4a0;--jade:#9ad0a4;--ink:#05060a;--wood:#3a2a1c;--warm:#f3e6d4;--line:#d4c4a047;--safe-b:env(safe-area-inset-bottom,0px);--safe-t:env(safe-area-inset-top,0px)}*{box-sizing:border-box;margin:0;padding:0}html,body{background:var(--ink);height:100%;color:var(--gold);overscroll-behavior:none;font-family:Songti SC,Noto Serif SC,Source Han Serif SC,serif;overflow:hidden}#app{background:#000;width:100vw;height:100dvh;margin:0 auto;position:relative;overflow:hidden}.screen{display:none;position:absolute;inset:0}.screen.on{display:block}.screen.fade{animation:.26s ease-out scr-in}@keyframes scr-in{0%{opacity:0}to{opacity:1}}#gate{padding:32px 28px calc(40px + var(--safe-b));background:radial-gradient(ellipse at 50% 78%, #16241a 0%, var(--ink) 68%);flex-direction:column;justify-content:flex-end;display:none}#gate.on{display:flex}#gate h1{letter-spacing:.3em;margin-bottom:6px;font-size:44px;font-weight:400}#gate .sub{letter-spacing:.42em;opacity:.72;margin-bottom:26px;font-size:13px}#gate p{opacity:.84;margin-bottom:22px;font-size:13px;line-height:1.75}#gate strong{color:var(--warm);font-weight:400}.gate-note{opacity:.5;margin-top:14px;font-size:11px;line-height:1.6}#boot{background:var(--ink);flex-direction:column;justify-content:center;align-items:center;gap:16px;display:none}#boot.on{display:flex}.boot-bar{background:#d4c4a02e;width:148px;height:2px;overflow:hidden}.boot-bar>i{background:var(--jade);transform-origin:0;width:100%;height:100%;transition:transform .24s ease-out;display:block;transform:scaleX(0)}.boot-text{letter-spacing:.3em;opacity:.55;font-size:11px}:root{--breath-rot:.7deg;--breath-sx:.004;--breath-sy:.012;--sway-x:4px;--sway-rot:.4deg;--hem-x:6px;--hem-rot:.9deg;--amp:1}.stage{background:var(--ink,#05060a);touch-action:none;overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;position:fixed;inset:0;overflow:hidden}.design-canvas{will-change:transform;position:absolute;top:0;left:0}.bg-slot{position:absolute;inset:0;overflow:hidden}.bg{object-fit:cover;transform-origin:50% 60%;width:100%;height:100%;display:block;position:absolute;inset:0}.bg-slot[data-loop=breath] .bg{animation:tui-breath var(--loop-dur,3.2s) ease-in-out infinite}.bg-slot[data-loop=sway] .bg{animation:9s ease-in-out infinite tui-sway}.bg-slot[data-loop=hem] .bg{animation:14s ease-in-out infinite alternate tui-parallax}.actor-slot,.camera-space,.layer-host{position:absolute;inset:0}.camera-space{--amp:1}.camera-space[data-mood=warm]{--amp:1.25}.camera-space[data-mood=excited]{--amp:1.7}.camera-space[data-mood=bored]{--amp:.45}.rig{position:absolute}.rig>.loop,.rig>.loop>.impulse{position:absolute;inset:0}.rig img{object-fit:fill;pointer-events:none;-webkit-user-drag:none;width:100%;height:100%;display:block;position:absolute;inset:0}.rig[data-loop]>.loop{will-change:transform}.rig[data-loop=breath]>.loop{animation:tui-breath var(--loop-dur,3.2s) ease-in-out infinite;animation-delay:var(--loop-delay,0s)}.rig[data-loop=sway]>.loop{animation:tui-sway var(--loop-dur,5s) ease-in-out infinite;animation-delay:var(--loop-delay,0s)}.rig[data-loop=hem]>.loop{animation:tui-hem var(--loop-dur,4.6s) ease-in-out infinite;animation-delay:var(--loop-delay,0s)}@keyframes tui-breath{0%,to{transform:rotate(calc(var(--breath-rot) * var(--amp) * -1)) scale(calc(1 - var(--breath-sx) * var(--amp)), calc(1 - var(--breath-sy) * var(--amp)))}50%{transform:rotate(calc(var(--breath-rot) * var(--amp))) scale(calc(1 + var(--breath-sx) * var(--amp)), calc(1 + var(--breath-sy) * var(--amp)))}}@keyframes tui-sway{0%,to{transform:translate3d(calc(var(--sway-x) * var(--amp) * -1), 0, 0) rotate(calc(var(--sway-rot) * var(--amp) * -1))}50%{transform:translate3d(calc(var(--sway-x) * var(--amp)), 0, 0) rotate(calc(var(--sway-rot) * var(--amp)))}}@keyframes tui-hem{0%,to{transform:translate3d(calc(var(--hem-x) * var(--amp) * -1), 0, 0) rotate(calc(var(--hem-rot) * var(--amp) * -1))}50%{transform:translate3d(calc(var(--hem-x) * var(--amp)), 0, 0) rotate(calc(var(--hem-rot) * var(--amp)))}}@keyframes tui-parallax{0%{transform:scale(1.06)translate(0,0)}to{transform:scale(1.12)translate(-1.5%,-1%)}}.fx-surface{pointer-events:none;z-index:20;position:absolute;inset:0}@media (prefers-reduced-motion:reduce){.rig[data-loop]>.loop,.bg-slot[data-loop] .bg{animation:none!important}}.btn{border:1px solid var(--gold);color:var(--gold);letter-spacing:.24em;cursor:pointer;background:0 0;padding:13px 18px;font-family:inherit;font-size:13px;transition:background .16s,color .16s}.btn:active{background:#d4c4a024}.btn.solid{color:#12140f;background:#d4c4a0e6}.text-btn{color:var(--gold);opacity:.6;letter-spacing:.18em;cursor:pointer;background:0 0;border:0;padding:8px 4px;font-family:inherit;font-size:12px}.hud{pointer-events:none;z-index:30;position:absolute;inset:0}.hud>*{pointer-events:none}.hud button,.hud .text-btn{pointer-events:auto}.hud-top{top:calc(10px + var(--safe-t));letter-spacing:.16em;justify-content:space-between;align-items:center;gap:10px;font-size:12px;display:flex;position:absolute;left:14px;right:14px}.hud-top .who{opacity:.85}.hud-top .realm{opacity:.55;font-size:11px}.pbar{left:14px;right:14px;bottom:calc(66px + var(--safe-b));background:#d4c4a029;height:2px;position:absolute}.pbar>i{background:linear-gradient(90deg, var(--jade), var(--gold));transform-origin:0;height:100%;transition:transform .22s cubic-bezier(.22,.61,.36,1);display:block;transform:scaleX(0)}.pbar-label{left:14px;bottom:calc(74px + var(--safe-b));letter-spacing:.3em;opacity:.5;font-size:11px;position:absolute}.stage-note{letter-spacing:.4em;opacity:0;white-space:nowrap;text-shadow:0 2px 18px #000c;font-size:15px;position:absolute;top:46%;left:50%;transform:translate(-50%,-50%)}.stage-note.show{animation:1.5s ease-out note-pop}@keyframes note-pop{0%{opacity:0;transform:translate(-50%,-38%)}18%{opacity:.95;transform:translate(-50%,-50%)}72%{opacity:.95}to{opacity:0;transform:translate(-50%,-62%)}}.ripple{pointer-events:none;z-index:25;border:1px solid #d4c4a0b3;border-radius:50%;width:10px;height:10px;margin:-5px 0 0 -5px;animation:.56s ease-out forwards ripple-out;position:absolute}.charge-ring{pointer-events:none;z-index:26;width:80px;height:80px;margin:-40px 0 0 -40px;position:absolute}.charge-ring .ring-outer{stroke:#d4c4a0d9;stroke-width:2.5px;stroke-linecap:round}.charge-ring .ring-outer.full{stroke:var(--jade)}.charge-ring .ring-inner{stroke:#9ad0a466;stroke-width:1.5px;stroke-linecap:round}.charge-ring .ring-core{fill:#d4c4a014}.charge-ring.peak .ring-core{fill:#9ad0a480}.charge-ring.peak .ring-inner{stroke:var(--jade)}@keyframes ripple-out{0%{opacity:.85;transform:scale(.4)}to{opacity:0;transform:scale(6.5)}}.hud-bot{padding:10px 14px calc(12px + var(--safe-b));background:linear-gradient(#0000,#05060ab8);justify-content:space-between;align-items:center;gap:12px;display:flex;position:absolute;bottom:0;left:0;right:0}.hud-bot .hint{opacity:.45;letter-spacing:.16em;font-size:11px}#gallery{background:var(--ink);-webkit-overflow-scrolling:touch;overflow-y:auto}.gal-head{padding:calc(14px + var(--safe-t)) 16px 12px;letter-spacing:.23em;opacity:.75;background:linear-gradient(180deg, var(--ink) 60%, transparent);z-index:2;justify-content:space-between;align-items:center;font-size:12px;display:flex;position:sticky;top:0}.gal-grid{padding:0 3px calc(24px + var(--safe-b));grid-template-columns:repeat(3,1fr);gap:3px;display:grid}.gal-cell{aspect-ratio:9/16;cursor:pointer;background:#0b0d12;border:0;padding:0;position:relative;overflow:hidden}.gal-cell img{object-fit:cover;width:100%;height:100%;display:block}.gal-cell.locked img{opacity:.14}.gal-cell.locked:after{content:"";background:repeating-linear-gradient(-45deg,#0000 0 6px,#d4c4a00d 6px 12px);position:absolute;inset:0}.gal-cell .cap{letter-spacing:.1em;text-align:left;color:var(--gold);background:linear-gradient(#0000,#000000d1);padding:10px 6px 5px;font-size:10px;position:absolute;bottom:0;left:0;right:0}#lightbox{z-index:60;touch-action:none;background:#000;display:none;position:fixed;inset:0}#lightbox.on{display:block}#lightbox .lb-stage{position:absolute;inset:0;overflow:hidden}#lightbox img{transform-origin:0 0;will-change:transform;display:block;position:absolute}#lightbox .lb-close{top:calc(12px + var(--safe-t));z-index:2;position:absolute;right:12px}#lightbox .lb-meta{left:16px;right:16px;bottom:calc(14px + var(--safe-b));letter-spacing:.16em;opacity:.5;text-align:center;font-size:11px;position:absolute}
