:root{color-scheme:dark;--bg:#1a1b26;--surface:#24283b;--text:#c0caf5;--muted:#a9b1d6;--accent:#7aa2f7;--focus:#e0af68;--line:#414868;--radius:12px;--shadow:0 24px 100px #0009;--fast:180ms;--font: 'Trebuchet MS',Verdana,sans-serif;--mono:'SFMono-Regular',Consolas,'Liberation Mono',monospace}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font)}button,a,input{ -webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--focus);outline-offset:4px}button{border:0}button:disabled{opacity:.45;cursor:wait}a{color:inherit}#desktop{height:100svh;min-height:360px;position:relative;isolation:isolate;overflow:hidden}#wallpaper,.shade{position:absolute;width:100%;height:100%;inset:0;z-index:-2;object-fit:cover;object-position:center;transition:opacity .3s} .shade{z-index:-1;background:linear-gradient(90deg,#080b1a60,transparent 65%),linear-gradient(0deg,#080b1a9c,transparent 30%);pointer-events:none}.bar{height:44px;margin:10px 12px;display:flex;align-items:center;gap:22px;padding:0 14px;background:#1a1b26e8;border:1px solid #41486885;border-radius:9px;font:11px var(--mono);box-shadow:0 4px 24px #0003}.brand{display:flex;align-items:center;gap:10px;background:none;font:700 11px var(--mono);letter-spacing:1.5px;padding:0;min-height:36px}.brand svg{width:24px;height:24px;fill:none;stroke:var(--accent);stroke-width:2.6}.workspaces{display:flex;gap:14px;color:#737da9}.workspaces .active{color:var(--accent);border-bottom:2px solid var(--accent);padding:5px 0}#clock{margin-left:auto;color:var(--muted);white-space:nowrap}.bar-action{background:none;min-height:40px;color:var(--accent);font:11px var(--mono);white-space:nowrap}.intro{position:absolute;top:14%;left:6%;transition:opacity var(--fast)}.eyebrow{font:10px var(--mono);letter-spacing:2px;color:var(--muted);display:block}.intro .eyebrow{font-size:10px;letter-spacing:2px;margin-bottom:24px}.intro h1{font-size:clamp(50px,7.5vw,110px);line-height:.97;letter-spacing:-.065em;margin:0;font-weight:700;text-shadow:0 2px 40px #06091b}.intro em{font-style:normal;color:var(--accent)}.hint{font-size:14px;margin-top:22px;color:#c0caf5dd}.text-button{background:transparent;border-bottom:1px solid var(--accent);padding:10px 0;font:11px var(--mono);color:var(--accent)}.text-button span{margin-left:18px}.quick{position:absolute;top:78px;right:4%;display:flex;gap:10px;align-items:center;background:#1a1b26df;border:1px solid var(--line);border-radius:30px;padding:3px}.quick button{background:transparent;border-radius:50%;width:40px;height:40px;font-size:20px}.quick button:hover{background:var(--surface);color:var(--accent)}#counter{font:11px var(--mono);padding:0 4px}.wall-caption{position:absolute;bottom:116px;left:4%;display:flex;flex-direction:column;gap:10px}#wallname{font-size:18px;letter-spacing:-.3px}.key-hint{font:10px var(--mono);color:var(--muted)}.dock{position:absolute;bottom:38px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:7px;padding:9px 11px;border:1px solid #414868a0;background:#1a1b26ef;border-radius:18px;box-shadow:0 12px 40px #0005}.dock button{position:relative;display:grid;place-items:center;width:48px;height:48px;border-radius:11px;background:var(--surface);color:var(--accent);transition:transform var(--fast),background var(--fast)}.dock button:hover{transform:translateY(-5px);background:#323950}.dock svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.dock button span{position:absolute;bottom:65px;background:var(--bg);border:1px solid var(--line);padding:6px 9px;border-radius:5px;font:10px var(--mono);white-space:nowrap;opacity:0;pointer-events:none}.dock button:hover span,.dock button:focus-visible span{opacity:1}.dock-divider{height:28px;border-left:1px solid var(--line);margin:0 2px}.credit{position:absolute;bottom:12px;left:0;right:0;text-align:center;font:9px var(--mono);letter-spacing:1px;color:var(--muted)}.credit a{text-decoration:none}.credit span{margin:0 8px}.window{position:absolute;top:16%;left:50%;transform:translateX(-50%);width:min(620px,90%);max-height:66%;background:#1a1b26f5;border:1px solid var(--accent);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}.window[hidden]{display:none}.titlebar{display:flex;align-items:center;gap:10px;height:44px;padding:0 10px 0 17px;border-bottom:1px solid var(--line);background:var(--surface);touch-action:none;cursor:grab}.titlebar h2{font:11px var(--mono);margin:0;flex:1;color:var(--text)}.window-dot{width:7px;height:7px;border-radius:50%;background:var(--accent)}.titlebar button{width:36px;height:36px;border-radius:6px;background:none;color:var(--muted);font-size:24px}.titlebar button:hover{background:#f7768e22;color:#f7768e}#content{padding:22px;max-height:calc(66svh - 46px);overflow:auto}#content p{font-size:13px;line-height:1.7;color:var(--muted)}#content h3{font-size:26px;letter-spacing:-1px;margin:0 0 12px}.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.tile{padding:0;background:transparent;border:1px solid var(--line);border-radius:6px;overflow:hidden;text-align:left}.tile[aria-pressed=true]{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}.tile img{width:100%;aspect-ratio:1.5;object-fit:cover;display:block}.tile span{display:block;padding:10px 7px;font:10px var(--mono)}.gallery-note{margin:15px 0 0;font:10px var(--mono)!important}.terminal{font:12px/1.7 var(--mono);white-space:pre-wrap;overflow-wrap:anywhere;min-height:115px;color:var(--muted)}.terminal strong{color:var(--accent)}.command-row{display:flex;gap:10px;align-items:center;font:12px var(--mono)}.command-row label{color:#9ece6a;white-space:nowrap}.command-row input{background:none;border:0;color:var(--text);width:100%;padding:8px 0;outline-offset:0}.install-command{padding:14px;background:#10111b;border:1px solid var(--line);font:11px/1.8 var(--mono);white-space:pre-wrap;overflow-wrap:anywhere;color:var(--accent);user-select:all}.primary{background:var(--accent);color:#13141c;padding:12px 16px;border-radius:6px;font:700 11px var(--mono);min-height:44px;text-decoration:none;display:inline-block}.secondary{display:inline-block;margin:16px 0 0;font:11px var(--mono);color:var(--accent)}.palette{display:flex;height:24px;gap:5px;margin:20px 0}.palette i{flex:1;background:var(--swatch);border-radius:3px}.toast{position:absolute;bottom:128px;left:50%;transform:translateX(-50%);max-width:90%;padding:12px 18px;background:var(--bg);border:1px solid var(--line);border-radius:8px;font:11px var(--mono);box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:opacity var(--fast);text-align:center}.toast.visible{opacity:1}.clean .intro,.clean .wall-caption{opacity:0;pointer-events:none}.loading #wallpaper{opacity:.45}
@media(min-width:1400px){.intro{left:7%;top:17%}.wall-caption{left:7%;bottom:100px}}@media(max-width:700px){.bar{gap:13px;margin:8px;height:42px;padding:0 10px}.brand span{display:none}.workspaces{gap:9px}.bar-action{font-size:10px}#clock{font-size:10px}.intro{top:24%;left:7%}.intro h1{font-size:clamp(52px,12vw,78px)}.intro .eyebrow{font-size:8px;letter-spacing:1.2px;margin-bottom:16px}.hint{font-size:12px;max-width:220px;line-height:1.6}.quick{top:67px;right:5%}.dock{top:65px;left:5%;bottom:auto;transform:none;padding:5px;gap:5px;border-radius:12px}.dock button{width:38px;height:38px;border-radius:7px}.dock svg{width:21px;height:21px}.dock button span{display:none}.dock-divider{display:none}.dock button:nth-last-child(1){display:none}.quick button{width:34px;height:36px}.quick{gap:1px}#counter{font-size:10px}.wall-caption{bottom:34%;left:7%;gap:7px}.wall-caption .eyebrow{font-size:8px}.key-hint{display:none}.credit{bottom:12px;font-size:8px;letter-spacing:.5px}.window{top:125px;max-height:calc(65svh - 125px);width:92%}#content{padding:16px;max-height:calc(65svh - 171px)}.gallery{grid-template-columns:repeat(4,1fr);gap:7px}.tile span{font-size:8px;padding:8px 4px}.toast{top:112px;bottom:auto;margin:0;font-size:10px}.terminal{font-size:11px}.command-row{font-size:10px}}
@media(max-width:380px){.dock button{width:34px}.quick{right:3%}.dock{left:3%}.intro h1{font-size:50px}.workspaces{display:none}}@media(max-height:500px) and (min-width:701px){.intro{top:19%}.intro h1{font-size:49px}.intro .eyebrow{margin-bottom:12px}.hint{margin:12px 0 0}.wall-caption{left:auto;right:4%;bottom:110px;text-align:right}.window{top:65px;max-height:67%}.dock{bottom:29px}.credit{bottom:7px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
@media(max-width:700px){.dock button{width:44px;height:44px}.quick button{width:44px;height:44px}.bar-action{min-height:44px}}
@media(max-width:380px){.dock #zen{display:none}}

/* Player Cards get their own composition at every viewport size. */
.compact-embed #desktop { min-height:260px; }
.compact-embed .intro, .compact-embed .wall-caption, .compact-embed .credit,
.compact-embed .workspaces, .compact-embed #clock,
.compact-embed .dock-divider, .compact-embed #zen,
.compact-embed .dock [data-open="about"] { display:none; }
.compact-embed .bar { height:42px; margin:8px; padding:0 12px; gap:10px; background:#1a1b26db; box-shadow:none; }
.compact-embed .brand { gap:8px; font-size:10px; letter-spacing:1px; }
.compact-embed .brand span { display:inline; }
.compact-embed .brand svg { width:23px; }
.compact-embed .bar-action { margin-left:auto; min-height:44px; font-size:10px; }
.compact-embed .dock { top:60px; left:12px; bottom:auto; transform:none; padding:0; gap:5px; background:none; border:0; box-shadow:none; border-radius:0; }
.compact-embed .dock button { width:44px; height:44px; border-radius:9px; background:#1a1b26c9; border:1px solid #41486888; }
.compact-embed .dock button:hover { transform:none; border-color:var(--accent); background:var(--surface); }
.compact-embed .dock svg { width:21px; height:21px; }
.compact-embed .dock button span { display:none; }
.compact-embed .quick { top:60px; right:12px; padding:0; gap:0; border-radius:9px; background:#1a1b26c9; border:1px solid #41486888; }
.compact-embed .quick button { width:44px; height:42px; border-radius:8px; }
.compact-embed #counter { font-size:10px; padding:0 7px; }
.compact-embed .shade { background:linear-gradient(180deg,#080b1a35,transparent 30%); }
.compact-embed .window { top:116px; width:min(600px,94%); max-height:calc(100svh - 132px); }
.compact-embed #content { max-height:calc(100svh - 178px); padding:16px; }
.compact-embed .toast { top:111px; bottom:auto; margin:0; font-size:10px; }
@media(max-width:500px) {
 .compact-embed .window { max-height:calc(72svh - 116px); }
 .compact-embed #content { max-height:calc(72svh - 162px); padding:12px; }
 .compact-embed .gallery { grid-template-columns:repeat(4,1fr); gap:6px; }
 .compact-embed .tile span { font-size:8px; }
}

.mobile-brand,.mobile-more { display:none; }
.quick #counter { border:0; background:transparent; width:auto; min-width:58px; min-height:44px; border-radius:6px; font:11px var(--mono); }
.mobile-options { display:flex; flex-direction:column; }
.mobile-options button { display:flex; justify-content:space-between; gap:12px; align-items:center; width:100%; min-height:52px; padding:12px 4px; border-bottom:1px solid var(--line); background:none; color:var(--text); text-align:left; font:13px var(--font); }
.mobile-options button span { color:var(--accent); font:11px var(--mono); }
/* Mobile is a wallpaper viewer, with optional desktop features behind More. */
@media(max-width:700px) {
 :root body #desktop { min-height:280px; height:100svh; background:#0e101c; }
 :root body .intro,:root body .wall-caption,:root body .credit,:root body .dock,:root body .workspaces,:root body #clock,:root body .brand .desktop-brand { display:none; }
 :root body .bar { position:absolute; top:env(safe-area-inset-top,0px); left:0; right:0; height:52px; margin:0; padding:0 14px; gap:8px; background:#0e101c; border:0; border-radius:0; box-shadow:none; }
 :root body .brand { min-height:44px; cursor:default; }
 :root body .brand svg { display:none; }
 :root body .brand .mobile-brand { display:inline; font:600 13px var(--font); letter-spacing:.2px; }
 :root body .bar-action { display:inline-flex; align-items:center; justify-content:center; gap:5px; margin-left:auto; padding:0 10px; min-height:44px; flex-shrink:0; border:1px solid #414868; border-radius:8px; background:var(--surface); color:var(--accent); font:11px var(--mono); }
 :root body .mobile-more { display:grid; place-items:center; margin-left:0; flex-shrink:0; width:44px; height:44px; background:none; color:var(--text); font-size:28px; border-radius:8px; }
 :root body .quick { top:calc(55px + env(safe-area-inset-top,0px)); left:50%; right:auto; transform:translateX(-50%); display:flex; justify-content:center; width:190px; height:46px; gap:8px; padding:0; background:#1a1b26; border:1px solid #41486877; border-radius:24px; }
 :root body .quick button { width:44px; height:44px; min-height:44px; border-radius:50%; }
 :root body .quick #counter { min-width:68px; font-size:12px; text-decoration:underline; text-decoration-color:var(--accent); text-underline-offset:5px; }
 :root body #wallpaper { top:calc(112px + env(safe-area-inset-top,0px)); height:calc(100svh - 128px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)); object-fit:contain; object-position:center!important; z-index:0; touch-action:pan-y; user-select:none; -webkit-user-drag:none; }
 :root body .shade { display:none; }
 :root body .window { z-index:4; top:calc(56px + env(safe-area-inset-top,0px)); width:calc(100% - 20px); max-height:calc(100svh - 76px - env(safe-area-inset-top,0px)); }
 :root body #content { max-height:calc(100svh - 124px - env(safe-area-inset-top,0px)); padding:14px; }
 :root body .titlebar { height:48px; }
 :root body .titlebar button { width:44px; height:44px; }
 :root body .gallery { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
 :root body .tile span { font-size:11px; padding:10px 8px; }
 :root body .gallery-note { display:none; }
 :root body .command-row input { font-size:16px; }
 :root body .toast { z-index:5; top:112px; bottom:auto; }
 :root body.compact-embed #wallpaper { height:max(80px,calc(70svh - 112px - env(safe-area-inset-top,0px))); }
 :root body.compact-embed .window { max-height:calc(70svh - 66px - env(safe-area-inset-top,0px)); }
 :root body.compact-embed #content { max-height:calc(70svh - 114px - env(safe-area-inset-top,0px)); }
}