:root{color:#17151a;font-family:Inter,PingFang SC,Microsoft YaHei,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden}button,input{font:inherit}button{color:inherit}.stage{--theme-a: #82e5e4;--theme-b: #cfbee9;--theme-c: #ff55d3;--theme-d: #ff8af0;--theme-fallback: linear-gradient(90deg, #b9e1e2 0%, #ccbadf 22%, #e6c0e6 41%, #f34acf 67%, #ff6bfc 98%);--media-speed-factor: 1;position:relative;width:100%;height:100%;min-height:640px;overflow:hidden;background:var(--theme-a);isolation:isolate}.fallback,.background-layer,.grain,.veil{position:absolute;inset:0;width:100%;height:100%}.fallback{z-index:-5;background:var(--theme-fallback);background-position:center;background-size:cover}.background-layer{z-index:-4;border:0;overflow:hidden;background-position:center;background-size:cover;opacity:0;transform:scale(1.012);transition:opacity .9s cubic-bezier(.2,.72,.18,1);will-change:opacity,transform,background-position}.background-layer>video{display:block;width:100%;height:100%;object-fit:cover}.background-layer.is-active.is-ready{opacity:1}.background-layer.has-error{display:none}.background-layer.has-normal-motion{animation:background-image-drift calc(15s * var(--media-speed-factor)) cubic-bezier(.45,.05,.55,.95) infinite alternate}@keyframes background-image-drift{0%{background-position:46% 47%;transform:scale(1.08) translate3d(-1.2%,-.7%,0)}48%{background-position:53% 50%;transform:scale(1.12) translate3d(.8%,.5%,0)}to{background-position:49% 55%;transform:scale(1.09) translate3d(-.3%,1.1%,0)}}.grain{z-index:-3;opacity:.035;pointer-events:none;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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.85'/%3E%3C/svg%3E");mix-blend-mode:soft-light}.veil{z-index:-2;pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,.2),transparent 25% 75%,rgba(255,255,255,.16)),linear-gradient(180deg,rgba(255,255,255,.08),transparent 24% 80%,rgba(24,18,31,.06))}.brand{position:absolute;top:4.4vh;left:3.6vw;display:flex;align-items:center;gap:13px}.brand-mark{display:grid;grid-template-columns:repeat(2,10px);gap:5px;padding:9px;border:1px solid rgba(20,18,24,.18);border-radius:14px;background:#ffffff52;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.brand-mark i{width:10px;height:23px;border-radius:999px;background:#17151a;transform:rotate(17deg)}.brand-mark i:last-child{transform:rotate(-17deg)}.brand>div{display:grid;gap:2px}.brand small{font-size:10px;font-weight:800;letter-spacing:.16em;opacity:.58}.brand strong{font-size:15px;font-weight:820;letter-spacing:.02em}.content-card{position:absolute;top:50%;left:7.2vw;width:min(430px,34vw);padding:34px 36px 31px;border:1px solid rgba(255,255,255,.56);border-radius:28px;background:#ffffff40;box-shadow:0 24px 70px #371b461c,inset 0 1px #ffffff73;-webkit-backdrop-filter:blur(18px) saturate(118%);backdrop-filter:blur(18px) saturate(118%);transform:translateY(-50%)}.eyebrow{font-size:10px;font-weight:850;letter-spacing:.18em;opacity:.55}.content-card h1{margin:10px 0 5px;font-size:clamp(42px,4.2vw,72px);font-weight:760;line-height:.98;letter-spacing:-.055em}.content-card p{max-width:330px;margin:16px 0 22px;font-size:14px;font-weight:560;line-height:1.7;opacity:.68}.palette{display:flex;padding-left:6px}.palette i{width:28px;height:28px;margin-left:-6px;border:2px solid rgba(255,255,255,.82);border-radius:50%;background:var(--swatch);box-shadow:0 4px 12px #261a2b1f}.load-state{display:flex;align-items:center;gap:8px;margin-top:25px;font-size:11px;font-weight:700;opacity:.6}.load-state i{width:7px;height:7px;border-radius:50%;background:#f5a623;box-shadow:0 0 0 5px #f5a6231f}.load-state[data-state=ready] i{background:#189b70;box-shadow:0 0 0 5px #189b701f}.load-state[data-state=fallback] i{background:#d74c62;box-shadow:0 0 0 5px #d74c621f}.theme-dock{position:absolute;top:50%;right:3.4vw;display:grid;gap:17px;width:310px;padding:22px;border:1px solid rgba(255,255,255,.66);border-radius:26px;background:#ffffff94;box-shadow:0 28px 90px #311b3e29,inset 0 1px #ffffff94;-webkit-backdrop-filter:blur(22px) saturate(118%);backdrop-filter:blur(22px) saturate(118%);transform:translateY(-50%);transition:opacity .28s ease,transform .36s cubic-bezier(.2,.72,.18,1)}.theme-dock[data-open=false]{pointer-events:none;opacity:0;transform:translate(40px,-50%) scale(.96)}.theme-dock>header{display:flex;align-items:center;justify-content:space-between}.theme-dock>header>span{display:grid;gap:2px}.theme-dock>header small{font-size:9px;font-weight:850;letter-spacing:.14em;opacity:.48}.theme-dock>header strong{font-size:17px;font-weight:820}.dock-toggle{display:grid;place-items:center;width:34px;height:34px;border:1px solid rgba(20,18,24,.1);border-radius:50%;background:#ffffff6b;font-size:21px;cursor:pointer}.theme-list{display:grid;gap:7px}.theme-option{position:relative;display:grid;grid-template-columns:42px minmax(0,1fr) 20px;align-items:center;gap:11px;min-height:54px;padding:6px 9px 6px 6px;border:1px solid transparent;border-radius:15px;background:transparent;text-align:left;cursor:pointer;transition:background .18s ease,border-color .18s ease,transform .18s ease}.theme-option:hover,.theme-option:focus-visible{outline:none;background:#fff6;transform:translate(-2px)}.theme-option[aria-pressed=true]{border-color:#14121829;background:#ffffffad;box-shadow:0 7px 20px #261a2b14}.theme-option img{width:42px;height:42px;border:2px solid rgba(255,255,255,.78);border-radius:50%;object-fit:cover;box-shadow:0 4px 10px #281c2c1f}.theme-option>span{display:grid;gap:3px;min-width:0}.theme-option strong{font-size:12px;font-weight:790}.theme-option small{overflow:hidden;font-size:9px;font-weight:550;opacity:.52;text-overflow:ellipsis;white-space:nowrap}.theme-option>i{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;color:#fff;background:#17151a;font-size:10px;font-style:normal;opacity:0;transform:scale(.6);transition:opacity .18s ease,transform .18s ease}.theme-option[aria-pressed=true]>i{opacity:1;transform:scale(1)}.theme-dock>footer{display:flex;align-items:center;gap:13px;padding-top:14px;border-top:1px solid rgba(20,18,24,.09)}.play-toggle{display:flex;align-items:center;gap:7px;min-height:38px;padding:0 13px;border:1px solid rgba(20,18,24,.12);border-radius:999px;background:#ffffff7a;font-size:11px;font-weight:760;cursor:pointer}.play-icon{font-family:monospace;font-size:12px}.theme-dock footer label{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:7px;flex:1;font-size:10px;font-weight:700;opacity:.72}.theme-dock input{width:100%;accent-color:#17151a;cursor:pointer}.theme-dock output{min-width:28px;text-align:right}.dock-open{position:absolute;right:3.2vw;bottom:4.5vh;display:flex;align-items:center;gap:0;padding:9px 15px 9px 11px;border:1px solid rgba(255,255,255,.65);border-radius:999px;background:#ffffff94;box-shadow:0 14px 35px #32193e24;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);cursor:pointer}.dock-open[hidden]{display:none}.dock-open span{width:15px;height:15px;margin-right:-7px;border:2px solid white;border-radius:50%;background:var(--theme-a)}.dock-open span:nth-child(2){background:var(--theme-b)}.dock-open span:nth-child(3){margin-right:10px;background:var(--theme-c)}.dock-open strong{font-size:11px;font-weight:800}.page-note{position:absolute;right:3.8vw;bottom:2.2vh;display:flex;gap:18px;font-size:9px;font-weight:800;letter-spacing:.12em;opacity:.42}@media(max-width:820px){.stage{min-height:620px}.brand{top:24px;left:22px}.content-card{top:22%;left:22px;width:calc(100% - 44px);transform:none}.content-card h1{font-size:45px}.theme-dock{inset:auto 14px 14px;width:auto;max-height:55vh;overflow-y:auto;transform:none}.theme-dock[data-open=false]{transform:translateY(30px) scale(.97)}.theme-list{grid-template-columns:repeat(2,minmax(0,1fr))}.theme-option{grid-template-columns:38px minmax(0,1fr)}.theme-option img{width:38px;height:38px}.theme-option>i{display:none}.page-note{display:none}}@media(prefers-reduced-motion:reduce){.background-layer{transition-duration:1ms}.background-layer.has-normal-motion{animation:none}}
