:root { --white:#fffdf6; --ink:#171712; --line:rgba(255,255,255,.28); }
* { box-sizing:border-box; }
html,body { width:100%; height:100%; margin:0; overflow:hidden; }
body { color:var(--white); background:#5f7778; font-family:"Arial Narrow","PingFang SC","Microsoft YaHei",sans-serif; }
button,a { font:inherit; }
.wallpaper-stage { position:fixed; inset:0; width:100%; height:100%; border:0; background:#5f7778; transition:opacity .45s ease; }
.page-loader { position:fixed; z-index:100; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; color:rgba(255,255,255,.72); background:#141d1a; font-size:11px; font-weight:800; letter-spacing:.16em; transition:opacity .36s ease,visibility .36s ease; }
.page-loader i { width:38px; height:38px; border:2px solid rgba(255,255,255,.16); border-top-color:#ffc367; border-radius:50%; animation:loader-spin .8s linear infinite; }
body.loading .wallpaper-stage,body.loading .shade,body.loading .topbar,body.loading .showcase-ui,body.loading .theme-reveal { opacity:0; }
body:not(.loading) .page-loader { opacity:0; visibility:hidden; pointer-events:none; }
.shade { position:fixed; inset:0; pointer-events:none; background:linear-gradient(90deg,rgba(5,9,8,.54) 0%,rgba(5,9,8,.15) 43%,transparent 70%),linear-gradient(0deg,rgba(5,8,7,.76) 0%,transparent 43%),linear-gradient(180deg,rgba(5,8,7,.28) 0%,transparent 24%); transition:opacity .34s ease; }
.topbar { position:fixed; z-index:10; top:0; left:0; right:0; height:100px; padding:0 clamp(24px,5vw,76px); display:flex; align-items:center; justify-content:space-between; gap:20px; pointer-events:none; transition:opacity .36s ease; }
.about-link { pointer-events:auto; display:flex; flex-direction:column; gap:4px; color:var(--white); text-decoration:none; text-shadow:0 1px 12px rgba(0,0,0,.55); }
.wordmark { font-family: "Segoe Script", "Bradley Hand", "Brush Script MT", cursive; font-size:25px; font-weight:600; letter-spacing:-.06em; line-height:.9; }
.wordmark>span { color:#ffc367; }
.brand-subline { font-family: "Segoe Script", "Bradley Hand", "Brush Script MT", cursive; font-size:12px; opacity:.82; letter-spacing:-.02em; }
.about-link:hover .brand-subline { opacity:1; text-decoration:underline; }
.install-switch { pointer-events:auto; }
.install-switch { display:flex; align-items:center; gap:5px; padding:6px 7px 6px 17px; border:1px solid var(--line); border-radius:999px; color:var(--white); background:rgba(8,12,11,.32); backdrop-filter:blur(14px); font-size:12px; font-weight:800; }
.install-switch>span { margin-right:7px; }
.install-switch a { display:grid; place-items:center; min-width:42px; height:32px; padding:0 10px; border-radius:999px; color:var(--white); text-decoration:none; font-size:10px; letter-spacing:.08em; transition:background .2s ease,color .2s ease; }
.install-switch a:first-of-type { color:var(--ink); background:var(--white); }
.install-switch a:hover { color:var(--ink); background:#ffc367; }
.showcase-ui { position:fixed; z-index:5; inset:0; pointer-events:none; }
.headline { position:absolute; left:clamp(24px,5vw,76px); bottom:clamp(315px,38vh,405px); width:min(480px,42vw); transition:opacity .24s ease,transform .32s cubic-bezier(.2,.8,.2,1); }
.kicker { margin:0 0 13px; padding-left:38px; position:relative; font-size:11px; font-weight:800; letter-spacing:.18em; }
.kicker::before { content:""; position:absolute; left:0; top:50%; width:27px; height:2px; background:#ffb13b; }
h1 { margin:0; max-width:580px; font-size:clamp(52px,7vw,104px); line-height:.93; letter-spacing:-.07em; text-shadow:0 2px 22px rgba(0,0,0,.26); }
.theme-copy { max-width:390px; margin:22px 0 0; font-size:15px; line-height:1.75; opacity:.84; text-shadow:0 1px 12px rgba(0,0,0,.4); }
.immersive-guide { position:absolute; inset:0; opacity:0; pointer-events:none; transition:opacity .3s ease .16s; }
.action-cue { position:absolute; display:flex; align-items:center; gap:10px; padding:8px 13px 8px 8px; border:1px solid rgba(255,255,255,.28); border-radius:999px; color:var(--white); background:rgba(8,12,11,.58); box-shadow:0 12px 35px rgba(0,0,0,.18); backdrop-filter:blur(12px); transform:translateY(10px); transition:transform .3s ease; }
.action-cue i { flex:0 0 auto; display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.14); font-style:normal; }
.action-cue i svg { width:19px; height:19px; }
.action-cue span { display:flex; flex-direction:column; gap:2px; white-space:nowrap; }
.action-cue b { font-size:11px; }
.action-cue small { color:rgba(255,255,255,.6); font-size:8px; }
.cue-pulse { position:relative; border:1px solid rgba(255,255,255,.6); font-size:18px; animation:pulse 1.9s ease-out infinite; }
.cue-icon img { display:block; width:29px; height:29px; object-fit:contain; }
.spawn-cue { left:50%; top:27%; transform:translate(-50%,10px); }
.settings-cue { left:clamp(28px,21vw,320px); bottom:92px; }
.play-cue { right:clamp(100px,20vw,300px); bottom:92px; }
.theme-dock { position:absolute; left:clamp(24px,5vw,76px); right:clamp(24px,5vw,76px); bottom:22px; pointer-events:auto; transition:opacity .22s ease,transform .34s cubic-bezier(.2,.8,.2,1); }
.dock-heading { display:flex; align-items:end; justify-content:space-between; margin:0 0 12px; }
.dock-heading>span { font-size:12px; font-weight:800; letter-spacing:.13em; }
.dock-heading em { margin-left:10px; opacity:.54; font-size:9px; font-style:normal; font-weight:600; letter-spacing:.08em; }
.dock-heading small { font-size:11px; letter-spacing:.1em; opacity:.66; }
.dock-heading small b { color:#ffbd55; font-size:20px; }
.dock-actions { display:flex; align-items:center; gap:14px; }
.dock-actions button { padding:5px 10px; border:1px solid var(--line); border-radius:999px; color:var(--white); background:rgba(10,13,12,.26); cursor:pointer; font-size:10px; }
.theme-track { display:flex; gap:13px; overflow-x:auto; padding:2px 2px 8px; cursor:grab; overscroll-behavior-x:contain; scrollbar-width:none; scroll-snap-type:x proximity; touch-action:pan-x; }
.theme-track.dragging { cursor:grabbing; scroll-snap-type:none; user-select:none; }
.theme-track.dragging img { pointer-events:none; }
.theme-track::-webkit-scrollbar { display:none; }
.theme-track::after { content:""; flex:0 0 14px; }
.theme-card { position:relative; flex:0 0 clamp(142px,15vw,206px); height:clamp(150px,21vh,210px); padding:0; overflow:hidden; border:1px solid rgba(255,255,255,.18); border-radius:13px; color:var(--white); background:#333; cursor:pointer; scroll-snap-align:start; text-align:left; text-decoration:none; transition:transform .22s ease,border-color .22s ease; }
.theme-card::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(7,9,8,.82),rgba(7,9,8,0) 66%); }
.theme-card img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.theme-card span { position:absolute; z-index:2; left:14px; right:14px; bottom:14px; display:flex; flex-direction:column; gap:3px; }
.theme-card small { font-size:8px; font-weight:700; letter-spacing:.13em; opacity:.72; }
.theme-card b { font-size:16px; }
.theme-card:hover,.theme-card.active { transform:translateY(-7px); border-color:#fff; }
.theme-card.active { outline:2px solid rgba(255,189,85,.9); outline-offset:-3px; }
.theme-card:hover img,.theme-card.active img { transform:scale(1.055); }
.theme-card.active::before { content:""; position:absolute; z-index:3; top:12px; right:12px; width:8px; height:8px; border:2px solid var(--white); border-radius:50%; background:#ffad31; }
.custom-card { display:block; border-style:dashed; background:linear-gradient(145deg,rgba(16,23,21,.82),rgba(62,76,70,.68)); backdrop-filter:blur(16px); }
.custom-card::after { background:radial-gradient(circle at 50% 35%,rgba(255,193,92,.16),transparent 42%),linear-gradient(0deg,rgba(7,9,8,.74),rgba(7,9,8,.05)); }
.custom-card>i { position:absolute; z-index:2; top:34%; left:50%; display:grid; place-items:center; width:54px; height:54px; border:1px solid rgba(255,255,255,.52); border-radius:50%; background:rgba(255,255,255,.08); transform:translate(-50%,-50%); font-size:28px; font-style:normal; font-weight:200; }
.custom-card span em { margin-top:2px; color:#ffc66f; font-size:9px; font-style:normal; font-weight:700; }
.headline.swap { animation:title-in .38s ease both; }
.theme-reveal { position:fixed; z-index:12; right:clamp(20px,3vw,42px); bottom:clamp(20px,3vw,38px); display:flex; align-items:center; gap:8px; padding:10px 15px 10px 10px; border:1px solid var(--line); border-radius:999px; color:var(--white); background:rgba(8,12,11,.48); backdrop-filter:blur(14px); cursor:pointer; opacity:0; pointer-events:none; transform:translateY(16px); transition:opacity .25s ease,transform .3s ease,background .2s ease; }
.theme-reveal span { display:grid; place-items:center; width:27px; height:27px; border-radius:50%; color:var(--ink); background:var(--white); }
.theme-reveal span svg { width:16px; height:16px; fill:currentColor; }
.theme-reveal:hover { background:rgba(8,12,11,.72); }
body.immersive .shade { opacity:.06; }
body.immersive .headline { opacity:0!important; transform:translateY(18px); pointer-events:none; animation:none!important; }
body.immersive .theme-dock { opacity:0; transform:translateY(calc(100% + 40px)); pointer-events:none; }
body.immersive .theme-reveal { opacity:1; pointer-events:auto; transform:none; }
body.immersive .immersive-guide { opacity:1; }
body.immersive .action-cue { transform:translateY(0); }
body.immersive .spawn-cue { transform:translate(-50%,0); }
@keyframes title-in { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
@keyframes pulse { 0% { box-shadow:0 0 0 0 rgba(255,255,255,.55); } 75%,100% { box-shadow:0 0 0 12px rgba(255,255,255,0); } }
@keyframes loader-spin { to { transform:rotate(360deg); } }
@media(max-width:760px){.shade{background:linear-gradient(0deg,rgba(5,8,7,.78) 0%,rgba(5,8,7,.35) 62%,rgba(5,8,7,.42) 100%),linear-gradient(90deg,rgba(5,8,7,.28),transparent)}.topbar{height:78px;padding-inline:18px}.about-link strong{font-size:13px}.about-link span{font-size:9px}.install-switch{padding-left:10px}.install-switch>span{display:none}.headline{left:20px;bottom:244px;width:calc(100% - 40px)}h1{font-size:clamp(42px,14vw,66px)}.theme-copy{margin-top:10px;font-size:12px}.theme-dock{left:18px;right:0;bottom:12px}.dock-heading{padding-right:18px}.theme-card{flex-basis:112px;height:140px}.theme-track{padding-right:18px}.theme-reveal{right:16px;bottom:16px}.spawn-cue{top:24%}.settings-cue{left:14px;bottom:76px}.play-cue{right:14px;bottom:136px}.action-cue{padding-right:10px}.action-cue small{display:none}}
@media(max-height:760px) and (min-width:761px){.headline{bottom:220px}h1{font-size:56px}.theme-copy{margin-top:10px}.theme-card{height:128px}.settings-cue,.play-cue{bottom:76px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}