@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700&family=Noto+Sans+TC:wght@400;500;700&display=swap');
:root{--ink:#eef6ff;--muted:#aab9c8;--gold:#d8a96f;--panel:rgba(6,18,30,.56);--line:rgba(255,255,255,.15)}
*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden;background:#07131f;color:var(--ink);font-family:Manrope,'Noto Sans TC',sans-serif}canvas{display:block;width:100%;height:100%;outline:none}.grain{position:fixed;inset:0;pointer-events:none;opacity:.12;mix-blend-mode:soft-light;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='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E")}.topbar{position:fixed;top:0;left:0;right:0;padding:24px 32px;display:flex;justify-content:space-between;align-items:center;z-index:5}.brand{display:flex;align-items:center;gap:12px}.brand-mark{width:30px;height:30px;border:1px solid rgba(255,255,255,.45);border-radius:50%;position:relative}.brand-mark:before,.brand-mark:after{content:"";position:absolute;background:var(--gold)}.brand-mark:before{width:1px;height:17px;left:14px;top:6px}.brand-mark:after{height:1px;width:17px;left:6px;top:14px}.brand strong,.brand small{display:block;letter-spacing:.18em}.brand strong{font-size:12px}.brand small{font-size:8px;color:var(--muted);margin-top:4px}.status{font-size:10px;letter-spacing:.16em;display:flex;gap:9px;align-items:center}.dot{width:7px;height:7px;border-radius:50%;background:#7dffb2;box-shadow:0 0 16px #7dffb2}.hero-copy{position:fixed;left:5vw;top:50%;transform:translateY(-47%);z-index:4;width:min(520px,42vw);pointer-events:none;text-shadow:0 2px 18px rgba(0,0,0,.25)}.eyebrow{font-size:10px;letter-spacing:.25em;color:#d5e4f1}.hero-copy h1{font-family:'Noto Sans TC',sans-serif;font-size:clamp(42px,5vw,76px);line-height:1.13;margin:16px 0 20px;font-weight:500;letter-spacing:-.04em}.hero-copy h1 em{font-style:normal;color:#f3c98e}.hero-copy>p:not(.eyebrow){max-width:470px;color:#d4deea;line-height:1.85;font-size:14px}.actions{display:flex;gap:12px;margin-top:28px;pointer-events:auto}.actions button,.preset-grid button{border:0;color:#fff;font:600 12px inherit;letter-spacing:.08em;cursor:pointer;transition:.25s}.primary{background:linear-gradient(135deg,#d9a668,#a96f39);padding:14px 20px;border-radius:999px;box-shadow:0 10px 30px rgba(129,76,30,.28)}.ghost{background:rgba(255,255,255,.08);border:1px solid var(--line)!important;padding:14px 20px;border-radius:999px;backdrop-filter:blur(12px)}button:hover{transform:translateY(-2px);filter:brightness(1.08)}.glass{background:var(--panel);border:1px solid var(--line);backdrop-filter:blur(18px);box-shadow:0 15px 50px rgba(0,0,0,.18)}.control-panel{position:fixed;right:28px;bottom:28px;z-index:5;width:280px;padding:18px;border-radius:18px}.panel-title{display:flex;justify-content:space-between;font-size:9px;letter-spacing:.16em;margin-bottom:18px}.panel-title b{color:#f0bd7b}.control-panel>label{display:block;font-size:11px;color:#c7d4df;margin:13px 0}.control-panel input[type=range]{width:100%;accent-color:#d5a062;margin-top:9px}.preset-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:16px 0}.preset-grid button{padding:10px;border-radius:10px;background:rgba(255,255,255,.075);border:1px solid rgba(255,255,255,.08)}.toggles{display:flex;justify-content:space-between;font-size:10px;color:#bfcbd6}.toggles label{display:flex;gap:6px;align-items:center}.toggles input{accent-color:#d8a96f}.hint{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:4;border-radius:999px;padding:10px 14px;font-size:9px;letter-spacing:.1em;color:#d4e0ea}.mouse-icon{display:inline-block;width:12px;height:17px;border:1px solid #d4e0ea;border-radius:8px;margin-right:8px;vertical-align:middle;position:relative}.mouse-icon:after{content:"";position:absolute;width:2px;height:4px;background:#d4e0ea;left:4px;top:3px;border-radius:2px}#loader{position:fixed;inset:0;background:#07131f;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;font-size:10px;letter-spacing:.18em;transition:opacity .8s}.loader-ring{width:46px;height:46px;border:1px solid rgba(255,255,255,.14);border-top-color:#d8a96f;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:800px){.topbar{padding:18px}.hero-copy{left:20px;top:auto;bottom:120px;transform:none;width:calc(100vw - 40px)}.hero-copy h1{font-size:42px}.hero-copy>p:not(.eyebrow){display:none}.actions{margin-top:18px}.control-panel{right:14px;bottom:14px;width:230px;padding:13px}.control-panel>label,.preset-grid,.toggles{display:none}.hint{display:none}.brand small{display:none}}