:root{--ink:#e5eff2;--muted:rgba(218,233,238,.55)}*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#07101a}body{color:var(--ink);font-family:"SF Pro Display","PingFang SC","Noto Sans CJK SC",system-ui,sans-serif;-webkit-font-smoothing:antialiased}.rain-scene{position:relative;width:100vw;height:100svh;isolation:isolate;overflow:hidden;background:#07101a}.canvas-host,.canvas-host canvas{position:absolute;inset:0;width:100%!important;height:100%!important;display:block}.canvas-host{z-index:0}.window-frame{position:absolute;z-index:1;pointer-events:none;inset:18px;border:1px solid rgba(212,233,240,.16);border-radius:2px;box-shadow:inset 0 0 0 6px rgba(4,11,17,.25),inset 0 0 70px rgba(2,7,11,.42),0 0 0 18px rgba(2,8,13,.45)}.window-frame:before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,rgba(221,241,247,.045),transparent 22%),linear-gradient(90deg,transparent 49.88%,rgba(3,9,14,.22) 50%,transparent 50.12%)}.scene-label{position:absolute;z-index:2;top:clamp(42px,7vw,88px);left:clamp(38px,7vw,110px);pointer-events:none;text-shadow:0 2px 24px rgba(0,0,0,.7)}.scene-kicker{display:block;margin-bottom:11px;color:rgba(210,230,236,.46);font-size:10px;font-weight:500;letter-spacing:.27em}.scene-label h1{margin:0;font-family:"Songti SC","Noto Serif CJK SC",serif;font-size:clamp(30px,4.2vw,58px);font-weight:400;letter-spacing:.1em;color:rgba(232,243,246,.86)}.auto-note{position:absolute;z-index:2;left:clamp(38px,7vw,110px);bottom:clamp(38px,7vw,80px);display:flex;align-items:center;gap:12px;margin:0;color:var(--muted);font-size:11px;letter-spacing:.11em;pointer-events:none}.auto-note span{width:26px;height:1px;background:rgba(208,230,236,.35)}.parameter-panel{position:absolute;z-index:3;top:clamp(42px,6vw,76px);right:clamp(38px,6vw,90px);width:min(248px,calc(100vw - 76px));padding:18px 18px 16px;border:1px solid rgba(214,233,239,.12);background:rgba(6,16,24,.38);box-shadow:0 14px 44px rgba(0,0,0,.18);backdrop-filter:blur(13px)}.panel-heading{display:flex;justify-content:space-between;padding-bottom:14px;border-bottom:1px solid rgba(218,234,239,.1);color:rgba(224,238,242,.62);font-size:9px;letter-spacing:.19em}.panel-heading span:last-child{color:rgba(157,203,217,.38)}.parameter-panel label{display:block;margin-top:15px}.parameter-panel label>span{display:flex;justify-content:space-between;margin-bottom:10px;color:rgba(214,231,236,.52);font-size:10px;letter-spacing:.09em}.parameter-panel output{color:rgba(231,242,245,.72);font-variant-numeric:tabular-nums}.parameter-panel input{width:100%;height:14px;margin:0;appearance:none;background:transparent;cursor:ew-resize}.parameter-panel input::-webkit-slider-runnable-track{height:1px;background:rgba(208,230,236,.24)}.parameter-panel input::-webkit-slider-thumb{width:9px;height:9px;margin-top:-4px;appearance:none;border:1px solid rgba(229,243,247,.72);border-radius:50%;background:#7895a1;box-shadow:0 0 12px rgba(182,221,234,.28)}@media(max-width:640px){.window-frame{inset:10px;box-shadow:inset 0 0 0 4px rgba(4,11,17,.3),inset 0 0 48px rgba(2,7,11,.38),0 0 0 10px rgba(2,8,13,.45)}.scene-label{top:42px;left:34px}.scene-label h1{font-size:34px}.auto-note{left:34px;right:32px;bottom:32px;font-size:9px;line-height:1.5}.parameter-panel{top:auto;right:24px;bottom:68px;width:206px;padding:14px}}