@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Noto+Sans+SC:wght@400;500;600;700&display=swap');

:root {
  --taskbar-height: 56px;
  --accent: #426ee8;
  --accent-rgb: 66,110,232;
  --text: #1c2433;
  --muted: #68758a;
  --surface: rgba(250,252,255,.91);
  --surface-solid: #f7f9fd;
  --surface-2: #edf1f8;
  --border: rgba(43,58,84,.12);
  --shadow: 0 22px 70px rgba(15,28,55,.22), 0 2px 10px rgba(15,28,55,.08);
  --taskbar: rgba(246,249,255,.72);
  --glass-blur: 40px;
  --glass-sat: 1.45;
  --glass-bright: 1.04;
  --glass-fill: rgba(255,255,255,.52);
  --glass-fill-strong: rgba(255,255,255,.62);
  --glass-stroke: rgba(255,255,255,.55);
  --glass-shadow: 0 18px 48px rgba(15,28,55,.18), 0 2px 8px rgba(15,28,55,.06);
  --glass-inset: inset 0 1px 0 rgba(255,255,255,.72), inset 0 -.5px 0 rgba(255,255,255,.18);
  --wallpaper-a: #dce9ff;
  --wallpaper-b: #b8c9f5;
  --wallpaper-c: #f2e6ff;
}
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; font-family: Inter, "Noto Sans SC", system-ui, sans-serif; color: var(--text); }
button, input, textarea { font: inherit; }
button { cursor: pointer; color: inherit; }
button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hidden { display: none !important; }
body.dark {
  --text: #edf2fc; --muted: #a3b0c5; --surface: rgba(27,34,47,.94); --surface-solid: #202838;
  --surface-2: #2a3548; --border: rgba(211,224,247,.13); --taskbar: rgba(25,32,45,.72);
  --shadow: 0 22px 70px rgba(0,0,0,.42), 0 2px 10px rgba(0,0,0,.18);
  --glass-fill: rgba(36,42,56,.55);
  --glass-fill-strong: rgba(48,56,72,.66);
  --glass-stroke: rgba(255,255,255,.14);
  --glass-shadow: 0 22px 56px rgba(0,0,0,.42), 0 2px 8px rgba(0,0,0,.2);
  --glass-inset: inset 0 1px 0 rgba(255,255,255,.16), inset 0 -.5px 0 rgba(0,0,0,.22);
}
.welcome-screen { position:fixed; inset:0; z-index:9000; display:grid; place-items:center; padding:32px 20px max(24px,env(safe-area-inset-bottom)); overflow:auto; background:#fff; color:#20232a; animation:welcomeFade .55s ease both; }
.welcome-content { width:min(620px,100%); display:flex; flex-direction:column; align-items:center; text-align:center; animation:welcomeRise .8s cubic-bezier(.2,.75,.25,1) both; }
.welcome-hello { display:block; width:min(438px,78vw); height:auto; margin:0 auto 8px; mix-blend-mode:multiply; animation:helloReveal 1.1s cubic-bezier(.2,.75,.25,1) .12s both; }
.welcome-eyebrow { margin:8px 0 13px; color:#8790a1; font-size:10px; font-weight:700; letter-spacing:.17em; }
.welcome-content h1 { margin:0; font-size:clamp(23px,4vw,34px); font-weight:600; letter-spacing:-.045em; line-height:1.3; }
.welcome-copy { margin:12px 0 30px; color:#7a8290; font-size:14px; }
.welcome-enter { min-width:154px; min-height:48px; display:inline-flex; align-items:center; justify-content:center; gap:16px; padding:0 20px; border:0; border-radius:999px; background:#20232a; color:white; font-size:13px; font-weight:600; box-shadow:0 8px 24px rgba(32,35,42,.14); transition:background .18s,box-shadow .18s; }
.welcome-enter:hover { background:#343841; box-shadow:0 12px 28px rgba(32,35,42,.2); }
.welcome-enter span { font-size:18px; font-weight:400; }
.welcome-footnote { position:absolute; bottom:max(20px,env(safe-area-inset-bottom)); margin:0; color:#a1a7b1; font-size:10px; letter-spacing:.02em; }
@keyframes welcomeFade { from { opacity:0; } to { opacity:1; } }
@keyframes welcomeRise { from { opacity:0; transform:translateY(14px) scale(.99); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes helloReveal { from { clip-path:inset(0 100% 0 0); } to { clip-path:inset(0); } }
.boot-screen { position:fixed; inset:0; z-index:100000; display:none; place-items:center; background:#000; color:#fff; pointer-events:none; }
.boot-screen.boot-play, .boot-screen.boot-out { display:grid !important; background:#000; opacity:1; }
.boot-stage { width:min(320px,78vw); display:flex; flex-direction:column; align-items:center; transition:opacity .55s cubic-bezier(.22,1,.36,1), transform .55s cubic-bezier(.22,1,.36,1); }
.boot-screen.boot-hello-finale .boot-stage { opacity:0; transform:scale(.96) translateY(-8px); pointer-events:none; }
.boot-logo-mark {
  width:72px; height:72px; display:grid; place-items:center; margin-bottom:86px; border-radius:18px;
  background:linear-gradient(160deg,#f5f7fb 0%,#d7dee9 48%,#9aa8bc 100%);
  color:#111; font-size:28px; font-weight:800; letter-spacing:-.08em;
  box-shadow:0 0 0 1px rgba(255,255,255,.18), 0 18px 40px rgba(0,0,0,.35); opacity:0;
}
.boot-screen.boot-play .boot-logo-mark { animation:bootLogoIn 1.1s cubic-bezier(.22,1,.36,1) .15s both; }
.boot-progress { width:148px; height:4px; border-radius:99px; background:rgba(255,255,255,.16); overflow:hidden; opacity:0; }
.boot-screen.boot-play .boot-progress { animation:bootBarIn .4s ease .95s both; }
.boot-progress span { display:block; height:100%; width:0; border-radius:inherit; background:#fff; box-shadow:0 0 12px rgba(255,255,255,.55); }
.boot-screen.boot-play.boot-loading .boot-progress span { animation:bootProgress 2.2s cubic-bezier(.4,0,.2,1) 1.05s both; }
.boot-hello { margin:28px 0 0; min-height:1.2em; font-size:28px; font-weight:300; letter-spacing:.04em; color:#fff; opacity:0; }
.boot-screen.boot-play .boot-hello.boot-hello-tick { animation:bootHelloSwap .55s cubic-bezier(.22,1,.36,1) both; }
.boot-screen.boot-play.boot-ready { pointer-events:auto; cursor:pointer; }
.boot-screen.boot-out { animation:bootOut .55s cubic-bezier(.4,0,1,1) both; }
.boot-screen.boot-hello-finale { background:#fff !important; }
.boot-glass-hello { position:absolute; inset:0; z-index:5; display:none; place-items:center; pointer-events:none; background:#fff; }
.boot-screen.boot-hello-finale .boot-glass-hello { display:grid; }
.boot-hello-canvas { width:min(1100px,96vw); height:auto; max-height:min(620px,78vh); display:block; background:#fff; }
@keyframes bootLogoIn { from { opacity:0; transform:scale(.88); filter:blur(4px); } to { opacity:1; transform:none; filter:none; } }
@keyframes bootBarIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
@keyframes bootProgress { from { width:0; } to { width:100%; } }
@keyframes bootHelloSwap { from { opacity:0; transform:translateY(10px); filter:blur(2px); } to { opacity:1; transform:none; filter:none; } }
@keyframes bootOut { to { opacity:0; } }
@media (prefers-reduced-motion:reduce) {
  *:not(.boot-screen):not(.boot-screen *), *:not(.boot-screen):not(.boot-screen *)::before, *:not(.boot-screen):not(.boot-screen *)::after {
    scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important;
  }
}
.desktop { position: fixed; inset: 0; overflow: hidden; background: #b9c9ef; }
.desktop-wallpaper { position: absolute; inset: 0; background: radial-gradient(ellipse at 18% 18%,rgba(255,255,255,.9),transparent 32%), radial-gradient(ellipse at 80% 15%,var(--wallpaper-c),transparent 34%), radial-gradient(ellipse at 76% 82%,#86a7f5,transparent 36%), linear-gradient(135deg,var(--wallpaper-a),var(--wallpaper-b)); transition: filter .2s, background .4s; }
.desktop-wallpaper.image-wallpaper { background-position:center; background-repeat:no-repeat; background-size:cover; }
.desktop-wallpaper.image-wallpaper::before, .desktop-wallpaper.image-wallpaper::after { display:none; }
.desktop-wallpaper::before { content:""; position:absolute; width:70vw; height:70vw; max-width:900px; max-height:900px; border-radius:48%; left:24%; top:15%; background:linear-gradient(135deg,rgba(255,255,255,.42),rgba(255,255,255,.06)); filter:blur(1px); transform:rotate(-25deg); box-shadow:inset 0 0 80px rgba(255,255,255,.25),0 0 120px rgba(74,104,190,.12); }
.desktop-wallpaper::after { content:""; position:absolute; width:54vw; height:54vw; max-width:680px; max-height:680px; border-radius:50%; left:42%; top:22%; background:linear-gradient(145deg,rgba(108,144,231,.28),rgba(255,255,255,.18)); filter:blur(2px); }
body.dark .desktop-wallpaper { filter: brightness(.48) saturate(.8); }
.desktop-icons, .desktop-imported-files {
  position:absolute; inset:0 0 var(--taskbar-height); z-index:1; pointer-events:none;
}
.desktop-icon {
  position:absolute; left:18px; top:20px; width:82px; min-height:82px; display:flex; flex-direction:column; gap:7px; align-items:center; justify-content:center;
  border:1px solid transparent; background:transparent; border-radius:8px; color:#18253a; text-shadow:0 1px 3px rgba(255,255,255,.65); font-size:12px;
  pointer-events:auto; touch-action:none; user-select:none; cursor:grab;
}
.desktop-icon:hover, .desktop-icon:focus-visible { background:rgba(255,255,255,.25); border-color:rgba(255,255,255,.3); }
.desktop-icon:active, .desktop-icon.dragging { cursor:grabbing; }
.desktop-icon.dragging { z-index:4; background:rgba(255,255,255,.32); border-color:rgba(255,255,255,.46); }
.app-icon { width:42px; height:42px; display:grid; place-items:center; overflow:hidden; font-size:24px; border-radius:12px; box-shadow:0 5px 12px #263c5a20; text-shadow:none; }
.app-icon img, .taskbar-button img, .pinned-icon img, .launchpad-icon-face img, .window-app-icon img {
  width:100%; height:100%; object-fit:contain; display:block; pointer-events:none;
}
.app-icon:has(img) { background:transparent; box-shadow:none; }
.folder-icon { background:linear-gradient(145deg,#ffdf83,#f3ad38); }
.terminal-icon { background:#1f2c40; color:#7ef2b2; font-size:20px; font-weight:700; }
.browser-icon { background:linear-gradient(145deg,#e5f2ff,#c0dbf7); font-size:23px; }
.settings-icon { background:linear-gradient(145deg,#eaf0fb,#b9c9e7); color:#536887; }
.about-icon { background:linear-gradient(145deg,#6f98ff,#385bd0); color:white; font-size:13px; font-weight:800; letter-spacing:-1px; }
.window-layer { position:absolute; inset:0 0 var(--taskbar-height); pointer-events:none; z-index:3; }
.os-window { position:absolute; min-width:300px; min-height:220px; width:min(760px,calc(100vw - 36px)); height:min(510px,calc(100vh - 100px)); display:flex; flex-direction:column; overflow:hidden; background:var(--surface); border:1px solid rgba(255,255,255,.48); border-radius:12px; box-shadow:var(--shadow); backdrop-filter:blur(28px) saturate(1.3); pointer-events:auto; animation:windowIn .16s ease-out; }
.os-window.maximized { inset:8px 8px 8px 8px !important; width:auto !important; height:auto !important; min-width:0; min-height:0; }
@keyframes windowIn { from { opacity:0; transform:scale(.98) translateY(5px); } to { opacity:1; transform:scale(1) translateY(0); } }
.window-titlebar { height:46px; min-height:46px; display:flex; align-items:center; padding:0 8px 0 14px; gap:10px; background:rgba(255,255,255,.18); border-bottom:1px solid var(--border); user-select:none; cursor:grab; }
.window-titlebar:active { cursor:grabbing; }
.window-app-icon { width:23px; text-align:center; font-size:16px; }
.window-title { flex:1; font-size:12px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.window-controls { display:flex; align-items:center; gap:3px; }
.window-control { border:0; background:transparent; width:32px; height:30px; border-radius:5px; font-size:14px; color:var(--muted); }
.window-control:hover { background:var(--surface-2); color:var(--text); }
.window-control.close:hover { background:#e64d55; color:white; }
.window-content { flex:1; min-height:0; overflow:auto; }
.taskbar { position:absolute; bottom:0; left:0; right:0; height:var(--taskbar-height); z-index:20; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:8px; padding:0 14px env(safe-area-inset-bottom, 0px); background:var(--taskbar); border-top:1px solid var(--glass-stroke); box-shadow:var(--glass-inset); backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(var(--glass-bright)); -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(var(--glass-bright)); }
.taskbar-left, .taskbar-center, .taskbar-right { display:flex; align-items:center; gap:7px; min-width:0; }
.taskbar-left, .taskbar-right { flex:none; }
.taskbar-os-mark { display:grid; place-items:center; width:30px; height:30px; color:var(--text); font-size:15px; font-weight:800; letter-spacing:-1.2px; }
.taskbar-os-label { font-size:12px; font-weight:700; letter-spacing:-.2px; }
.taskbar-center { position:relative; left:auto; transform:none; height:100%; gap:2px; justify-content:center; overflow-x:auto; scrollbar-width:none; }
.taskbar-center::-webkit-scrollbar { display:none; }
.taskbar-files, .taskbar-calculator, .taskbar-viewer, .taskbar-clock, .taskbar-gallery, .taskbar-recorder {
  width:26px; height:26px; display:grid; place-items:center; overflow:hidden;
}
.taskbar-button { position:relative; width:42px; height:42px; display:grid; place-items:center; border:1px solid transparent; border-radius:9px; background:transparent; font-size:22px; transition:background .15s,transform .15s; }
.taskbar-button:hover { background:rgba(128,145,172,.17); }
.taskbar-button:active { transform:scale(.93); }
.taskbar-button.running::after { content:""; position:absolute; bottom:2px; width:13px; height:3px; border-radius:3px; background:var(--accent); }
.taskbar-button.active { background:rgba(var(--accent-rgb),.14); }
.start-button { font-size:12px; font-weight:800; letter-spacing:-.5px; }
.taskbar-terminal { font-size:16px; font-weight:700; color:#36a36e; }
.taskbar-emoji { font-size:21px; }
.tray-button { height:36px; display:flex; align-items:center; gap:7px; border:0; background:transparent; border-radius:8px; padding:0 7px; color:var(--text); }
.tray-button:hover { background:rgba(128,145,172,.15); }
.tray-button svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.tray-button svg.tray-battery { width:20px; }
.tray-button svg.battery-low { color:#d34b4b; }
.tray-button [data-battery-percent] { font-size:10px; font-variant-numeric:tabular-nums; }
.tray-overflow-button { width:28px; height:32px; border:0; border-radius:7px; background:transparent; color:var(--text); font-size:14px; }
.tray-overflow-button:hover { background:rgba(128,145,172,.15); }
.tray-language { display:grid; place-items:center; min-width:21px; height:27px; border-radius:5px; font-size:12px; }
.clock { min-width:72px; display:flex; flex-direction:column; align-items:flex-end; gap:2px; font-size:12px; font-variant-numeric:tabular-nums; }
.clock small { color:var(--muted); font-size:10px; }
.start-menu, .quick-settings { position:absolute; z-index:30; bottom:calc(var(--taskbar-height) + 10px); max-height:calc(100vh - var(--taskbar-height) - 20px); overflow:auto; padding:20px; border-radius:22px; }
.start-menu {
  left:50%; transform:translateX(-50%); width:min(510px,calc(100vw - 20px));
  background:var(--glass-fill); border:1px solid var(--glass-stroke);
  box-shadow:var(--glass-shadow), var(--glass-inset);
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(var(--glass-bright));
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(var(--glass-bright));
  animation:startMenuIn .38s cubic-bezier(.16,1,.3,1) both; transform-origin:50% 100%;
}
@keyframes startMenuIn { from { opacity:0; transform:translateX(-50%) scale(.92) translateY(18px); } to { opacity:1; transform:translateX(-50%) scale(1) translateY(0); } }
@keyframes controlIn { from { opacity:0; transform:scale(.94) translateY(14px); } to { opacity:1; transform:none; } }
.start-search { height:39px; display:flex; align-items:center; gap:9px; padding:0 12px; background:var(--surface-solid); border:1px solid var(--border); border-bottom:2px solid var(--accent); border-radius:7px; color:var(--muted); }
.start-search input { flex:1; min-width:0; border:0; outline:none; background:transparent; color:var(--text); font-size:12px; }
.start-section-heading { display:flex; justify-content:space-between; margin:22px 2px 12px; font-size:12px; font-weight:700; }
.muted { color:var(--muted); font-size:10px; font-weight:400; }
.pinned-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; }
.pinned-app { display:flex; flex-direction:column; align-items:center; gap:8px; padding:10px 4px; border:1px solid transparent; border-radius:8px; background:transparent; font-size:11px; }
.pinned-app:hover, .recommended-item:hover { background:var(--surface-2); }
.pinned-icon { display:grid; place-items:center; width:40px; height:40px; border-radius:12px; background:var(--surface-2); font-size:21px; }
.terminal-pinned { background:#1f2c40; color:#7ef2b2; font-size:17px; font-weight:700; }
.about-pinned { background:linear-gradient(145deg,#6f98ff,#385bd0); color:white; font-weight:800; font-size:13px; }
.recommended-item { display:flex; align-items:center; gap:12px; width:100%; padding:10px 8px; border:0; border-radius:8px; background:transparent; text-align:left; font-size:17px; }
.recommended-item span:nth-child(2) { display:flex; flex-direction:column; gap:4px; }
.recommended-item b { font-size:11px; font-weight:600; }
.recommended-item small { color:var(--muted); font-size:10px; }
.start-footer { display:flex; justify-content:space-between; align-items:center; margin:18px -20px -20px; padding:13px 20px; border-top:1px solid var(--border); }
.user-chip { display:flex; align-items:center; gap:9px; font-size:11px; }
.user-avatar { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--accent); color:white; font-weight:700; }
#power-button { width:32px; height:32px; border:0; border-radius:7px; background:transparent; font-size:17px; }
#power-button:hover { background:var(--surface-2); }
.quick-settings {
  left:auto; right:12px; transform:none; width:min(352px,calc(100vw - 16px)); padding:18px;
  background:var(--glass-fill); border:1px solid var(--glass-stroke);
  box-shadow:var(--glass-shadow), var(--glass-inset);
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(var(--glass-bright));
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(var(--glass-bright));
  overflow:hidden; isolation:isolate; animation:controlIn .4s cubic-bezier(.16,1,.3,1) both; transform-origin:90% 100%;
}
.quick-settings::before { content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit; background:linear-gradient(180deg, rgba(255,255,255,.38), rgba(255,255,255,.08) 28%, transparent 52%); }
.quick-settings > * { position:relative; z-index:1; }
body.dark .quick-settings::before { background:linear-gradient(180deg, rgba(255,255,255,.12), transparent 46%); }
.quick-title { font-size:13px; font-weight:650; margin-bottom:12px; }
.control-status { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:12px; }
.control-status-item { min-width:0; min-height:58px; display:flex; align-items:center; gap:9px; padding:10px; border:1px solid rgba(255,255,255,.28); border-radius:16px; background:var(--glass-fill-strong); box-shadow:inset 0 1px 0 rgba(255,255,255,.4); }
.control-status-item > span:first-child { flex:none; width:22px; text-align:center; color:var(--accent); font-size:17px; }
.control-status-item > span:last-child { min-width:0; display:flex; flex-direction:column; gap:4px; }
.control-status-item b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10px; }
.control-status-item small { overflow:hidden; color:var(--muted); text-overflow:ellipsis; white-space:nowrap; font-size:9px; }
.quick-toggles { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.quick-toggles button { display:flex; align-items:center; gap:10px; padding:14px 12px; border:1px solid rgba(255,255,255,.28); border-radius:16px; background:var(--glass-fill-strong); text-align:left; font-size:17px; box-shadow:inset 0 1px 0 rgba(255,255,255,.4); }
.quick-toggles button span { font-size:11px; font-weight:500; }
.control-slider-row { display:flex; flex-direction:column; gap:8px; margin:16px 2px; font-size:11px; }
.control-slider-row > span { display:flex; justify-content:space-between; }
.control-slider-row output { color:var(--muted); font-variant-numeric:tabular-nums; }
.control-slider-row input { width:100%; accent-color:var(--accent); }
.control-slider-row small { color:var(--muted); font-size:9px; line-height:1.5; }
.quick-bottom { display:flex; justify-content:space-between; color:var(--muted); font-size:10px; padding-top:12px; border-top:1px solid rgba(255,255,255,.22); }
.context-menu { position:absolute; z-index:50; width:190px; padding:5px; border:1px solid var(--glass-stroke); border-radius:14px; background:var(--glass-fill); box-shadow:var(--glass-shadow), var(--glass-inset); backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat)); -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat)); }
body.pref-no-glass { --glass-blur:0px; --glass-sat:1; --glass-bright:1; --glass-fill:var(--surface-solid); --glass-fill-strong:var(--surface-2); --glass-stroke:var(--border); --glass-shadow:var(--shadow); --glass-inset:none; --taskbar:var(--surface-solid); }
body.pref-no-glass .taskbar,
body.pref-no-glass .start-menu,
body.pref-no-glass .quick-settings,
body.pref-no-glass .context-menu,
body.pref-no-glass .launchpad-blur,
body.pref-no-glass .launchpad-search,
body.pref-no-glass .os-window { backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
body.pref-no-glass .quick-settings::before { display:none; }
body.pref-no-glass .launchpad-blur { background:rgba(18,24,36,.72); }
body.pref-no-glass .start-menu,
body.pref-no-glass .quick-settings { background:var(--surface-solid); border-color:var(--border); }
body.pref-no-glass .control-status-item,
body.pref-no-glass .quick-toggles button { background:var(--surface-2); border-color:var(--border); box-shadow:none; }
.context-menu button { display:block; width:100%; padding:9px 10px; border:0; border-radius:5px; background:transparent; text-align:left; font-size:11px; }
.context-menu button:hover { background:var(--surface-2); }
.toast-region { position:fixed; z-index:20000; right:18px; bottom:72px; display:flex; flex-direction:column; gap:8px; pointer-events:none; }
.toast { padding:11px 15px; border:1px solid var(--border); border-radius:9px; background:var(--surface); box-shadow:var(--shadow); font-size:12px; animation:windowIn .15s ease-out; }
.toast.out { opacity:0; transform:translateY(6px); transition:.2s; }

/* App common styles */
.app-toolbar { display:flex; align-items:center; gap:8px; padding:12px 15px; border-bottom:1px solid var(--border); }
.app-toolbar button, .app-button { border:1px solid var(--border); border-radius:6px; padding:7px 10px; background:var(--surface-solid); font-size:11px; }
.app-toolbar button:hover, .app-button:hover { background:var(--surface-2); }
.app-toolbar .primary, .app-button.primary { background:var(--accent); color:white; border-color:var(--accent); }
.editor-icon { background:linear-gradient(145deg,#f3f5fb,#d8e1f3); color:#536887; font-size:24px; }
.app-input { min-width:0; padding:9px 10px; border:1px solid var(--border); border-radius:7px; background:var(--surface-solid); color:var(--text); font-size:12px; }
.app-input:focus { outline:2px solid rgba(var(--accent-rgb),.2); border-color:var(--accent); }
.app-label { display:block; color:var(--muted); font-size:11px; margin-bottom:7px; }
.app-heading { font-size:18px; font-weight:700; letter-spacing:-.5px; }
.app-subheading { color:var(--muted); font-size:11px; margin-top:5px; }
.browser-shell { display:flex; flex-direction:column; height:100%; min-height:0; background:var(--surface-solid); }
.browser-toolbar { display:flex; align-items:center; gap:5px; padding:9px 12px; border-bottom:1px solid var(--border); }
.browser-nav { flex:none; width:32px; height:32px; display:grid; place-items:center; border:0; border-radius:50%; background:transparent; color:var(--text); font-size:17px; }
.browser-nav:hover:not(:disabled) { background:var(--surface-2); }
.browser-nav:disabled { opacity:.38; cursor:default; }
.browser-address-wrap { flex:1; min-width:0; height:34px; display:flex; align-items:center; gap:8px; padding:0 12px; border:1px solid transparent; border-radius:18px; background:var(--surface-2); color:var(--muted); }
.browser-address-wrap:focus-within { background:var(--surface-solid); border-color:var(--accent); box-shadow:0 0 0 2px rgba(var(--accent-rgb),.12); }
.browser-address { flex:1; min-width:0; border:0; outline:0; background:transparent; color:var(--text); font-size:12px; }
.browser-go { height:30px; padding:0 11px; border:0; border-radius:15px; background:var(--accent); color:white; font-size:11px; }
.browser-go:hover { filter:brightness(1.06); }
.browser-external { flex:none; height:30px; padding:0 9px; border:1px solid var(--border); border-radius:15px; background:var(--surface-solid); color:var(--text); font-size:10px; white-space:nowrap; }
.browser-notice { display:flex; align-items:center; gap:7px; padding:7px 14px; color:var(--muted); font-size:10px; background:rgba(var(--accent-rgb),.055); }
.browser-notice span { color:var(--accent); }
.browser-viewport { position:relative; flex:1; min-height:0; overflow:hidden; background:var(--surface-solid); }
.browser-frame { display:block; width:100%; height:100%; border:0; background:white; }
.browser-viewport { display:flex; flex-direction:column; }
.browser-home { width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:28px 16px; overflow:auto; }
.browser-brand { display:flex; align-items:center; gap:11px; margin-bottom:25px; font-size:22px; letter-spacing:-.6px; }
.browser-brand-icon { display:grid; place-items:center; width:43px; height:43px; border-radius:14px; background:rgba(var(--accent-rgb),.12); font-size:24px; }
.browser-home-search { width:min(560px,100%); height:46px; display:flex; align-items:center; gap:10px; padding:0 13px; border:1px solid var(--border); border-radius:24px; background:var(--surface); box-shadow:0 3px 12px rgba(15,28,55,.08); color:var(--muted); }
.browser-home-search:focus-within { border-color:rgba(var(--accent-rgb),.55); box-shadow:0 3px 16px rgba(var(--accent-rgb),.12); }
.browser-home-search input { flex:1; min-width:0; border:0; outline:0; background:transparent; color:var(--text); font-size:12px; }
.browser-home-search button { width:30px; height:30px; border:0; border-radius:50%; background:var(--accent); color:white; }
.browser-shortcuts { display:flex; justify-content:center; gap:14px; margin-top:25px; }
.browser-shortcuts button { width:78px; display:flex; flex-direction:column; align-items:center; gap:8px; padding:10px 5px; border:0; border-radius:9px; background:transparent; color:var(--text); }
.browser-shortcuts button:hover { background:var(--surface-2); }
.browser-shortcuts button span { width:38px; height:38px; display:grid; place-items:center; border-radius:12px; background:var(--surface); box-shadow:0 2px 8px rgba(15,28,55,.1); color:var(--accent); font-size:18px; font-weight:700; }
.browser-shortcuts button small { font-size:10px; }
.paint-icon, .paint-pinned { background:linear-gradient(145deg,#fff0d7,#f8cfaa); }
.paint-app { height:100%; min-height:0; display:flex; flex-direction:column; background:var(--surface-2); }
.paint-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:9px; padding:9px 11px; border-bottom:1px solid var(--border); background:var(--surface); }
.paint-tool-group, .paint-color-group, .paint-options, .paint-actions { min-height:36px; display:flex; align-items:center; gap:5px; padding:0 7px; border-right:1px solid var(--border); }
.paint-actions { margin-left:auto; border-right:0; }
.paint-tool { min-width:40px; height:36px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; padding:3px 6px; border:1px solid transparent; border-radius:6px; background:transparent; font-size:16px; line-height:1; }
.paint-tool span { font-size:9px; line-height:1.2; }
.paint-tool:hover, .paint-tool.active { background:rgba(var(--accent-rgb),.11); border-color:rgba(var(--accent-rgb),.25); color:var(--accent); }
.paint-color { width:20px; height:20px; padding:0; border:2px solid var(--surface); border-radius:50%; background:var(--paint-swatch); box-shadow:0 0 0 1px var(--border); }
.paint-color.active { outline:2px solid var(--accent); outline-offset:2px; }
.paint-custom-color { position:relative; width:25px; height:25px; display:grid; place-items:center; overflow:hidden; border:1px solid var(--border); border-radius:50%; background:conic-gradient(#f44,#ff0,#4d4,#4df,#44f,#f4f,#f44); color:white; font-size:17px; text-shadow:0 1px 3px #222; }
.paint-custom-color input { position:absolute; inset:-5px; width:36px; height:36px; padding:0; border:0; opacity:0; cursor:pointer; }
.paint-width-label { display:flex; align-items:center; gap:5px; color:var(--muted); font-size:10px; white-space:nowrap; }
.paint-width-label select { max-width:66px; padding:5px 6px; border:1px solid var(--border); border-radius:5px; background:var(--surface-solid); color:var(--text); font-size:10px; }
.paint-fill { display:flex; align-items:center; gap:4px; font-size:10px; white-space:nowrap; }
.paint-fill input { margin:0; accent-color:var(--accent); }
.paint-action { min-height:30px; padding:0 9px; border:1px solid var(--border); border-radius:6px; background:var(--surface-solid); font-size:10px; white-space:nowrap; }
.paint-action:hover { background:var(--surface-2); }
.paint-action.primary { border-color:var(--accent); background:var(--accent); color:white; }
.paint-stage { flex:1; min-height:0; margin:12px; overflow:hidden; border:1px solid rgba(43,58,84,.16); border-radius:7px; background:#fff; box-shadow:0 3px 14px rgba(15,28,55,.08); }
.paint-canvas { display:block; width:100%; height:100%; touch-action:none; cursor:crosshair; }
.paint-canvas[data-tool="eraser"] { cursor:cell; }
.files-layout { display:flex; height:100%; min-height:0; }
.files-sidebar { width:155px; flex-shrink:0; padding:14px 8px; border-right:1px solid var(--border); background:rgba(128,145,172,.04); }
.files-nav { display:flex; align-items:center; gap:9px; width:100%; padding:9px 10px; border:0; border-radius:6px; background:transparent; text-align:left; font-size:11px; }
.files-nav:hover, .files-nav.active { background:rgba(var(--accent-rgb),.12); color:var(--accent); }
.files-main { flex:1; min-width:0; display:flex; flex-direction:column; }
.files-path { display:flex; align-items:center; gap:6px; padding:11px 15px; border-bottom:1px solid var(--border); font-size:11px; color:var(--muted); }
.files-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(100px,1fr)); align-content:start; gap:8px; padding:14px; overflow:auto; }
.file-item { position:relative; min-width:0; padding:13px 6px 10px; display:flex; flex-direction:column; align-items:center; gap:8px; border:1px solid transparent; border-radius:8px; background:transparent; font-size:10px; }
.file-item:hover { background:var(--surface-2); }
.file-item.selected { background:rgba(var(--accent-rgb),.12); border-color:rgba(var(--accent-rgb),.3); }
.file-item .file-emoji { font-size:29px; }
.file-item .file-name { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.file-empty { grid-column:1/-1; text-align:center; color:var(--muted); padding:40px 12px; font-size:12px; }
.terminal-body { height:100%; padding:14px; background:#111923; color:#dce7f5; font-family:Consolas, "SFMono-Regular", monospace; font-size:12px; overflow:auto; }
.terminal-output { white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.65; }
.terminal-line { display:flex; gap:7px; align-items:center; margin-top:7px; }
.terminal-prompt { color:#72e2a6; white-space:nowrap; }
.terminal-input { flex:1; min-width:0; border:0; outline:none; background:transparent; color:#fff; font:inherit; }
.terminal-output .success { color:#72e2a6; }
.terminal-output .error { color:#ff9298; }
.terminal-output .muted-line { color:#90a0b6; }
.settings-layout { display:flex; min-height:100%; }
.settings-nav { width:170px; padding:17px 9px; border-right:1px solid var(--border); }
.settings-nav button { width:100%; padding:10px; border:0; border-radius:6px; background:transparent; text-align:left; font-size:11px; }
.settings-nav button.active, .settings-nav button:hover { background:var(--surface-2); }
.settings-main { flex:1; min-width:0; padding:22px; overflow:auto; }
.settings-main h2 { margin:0 0 6px; font-size:20px; letter-spacing:-.5px; }
.settings-main .lead { color:var(--muted); font-size:11px; margin:0 0 24px; }
.settings-card { padding:16px; border:1px solid var(--border); border-radius:10px; margin-bottom:12px; }
.settings-card h3 { margin:0 0 6px; font-size:12px; }
.settings-card p { margin:0 0 12px; color:var(--muted); font-size:11px; line-height:1.6; }
.setting-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 0; font-size:11px; }
.switch { position:relative; width:36px; height:21px; border:0; border-radius:99px; background:#b6c0cf; flex-shrink:0; }
.switch::after { content:""; position:absolute; width:15px; height:15px; top:3px; left:3px; border-radius:50%; background:white; transition:.18s; box-shadow:0 1px 3px #0002; }
.switch.on { background:var(--accent); }
.switch.on::after { left:18px; }
.wallpaper-options { display:grid; grid-template-columns:repeat(auto-fill,minmax(116px,1fr)); gap:12px; }
.accent-options { display:flex; gap:9px; flex-wrap:wrap; }
.wallpaper-choice { position:relative; width:100%; aspect-ratio:16/10; min-height:70px; overflow:hidden; border:2px solid transparent; border-radius:9px; background-position:center; background-size:cover; transition:box-shadow .16s; }
.wallpaper-choice:hover { box-shadow:0 6px 16px rgba(15,28,55,.18); }
.wallpaper-choice.active, .accent-choice.active { outline:2px solid var(--accent); outline-offset:2px; }
.wallpaper-choice.blue { background:linear-gradient(135deg,#dce9ff,#9ab4f0,#f2e6ff); }
.wallpaper-choice.sunset { background:linear-gradient(135deg,#ffe1cb,#ee9d9d,#897fe4); }
.wallpaper-choice.forest { background:linear-gradient(135deg,#d2f1d7,#6cb89d,#315b6a); }
.wallpaper-choice.midnight { background:linear-gradient(135deg,#202a47,#5266aa,#101723); }
.accent-choice { width:25px; height:25px; border:2px solid transparent; border-radius:50%; }
.about-content { padding:30px; text-align:center; }
.about-logo { display:grid; place-items:center; width:66px; height:66px; margin:0 auto 16px; border-radius:20px; background:linear-gradient(145deg,#6f98ff,#385bd0); color:white; font-size:20px; font-weight:800; letter-spacing:-1px; box-shadow:0 10px 24px #426ee833; }
.about-content h2 { margin:0; font-size:23px; }
.about-content p { color:var(--muted); font-size:12px; line-height:1.7; }
.about-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:24px; }
.about-stat { padding:12px 5px; background:var(--surface-2); border-radius:8px; }
.about-stat b { display:block; font-size:13px; }
.about-stat small { display:block; color:var(--muted); margin-top:5px; font-size:10px; }
.editor-overlay { position:absolute; inset:0; z-index:10; display:flex; flex-direction:column; background:var(--surface); }
.editor-header { display:flex; align-items:center; gap:8px; padding:9px 12px; border-bottom:1px solid var(--border); }
.editor-header input { flex:1; min-width:0; border:1px solid var(--border); border-radius:5px; padding:7px; background:var(--surface-solid); color:var(--text); font-size:12px; }
.editor-overlay textarea { flex:1; resize:none; border:0; outline:none; padding:14px; background:var(--surface-solid); color:var(--text); font:12px/1.6 Consolas,monospace; }
.text-editor { height:100%; min-height:0; display:flex; flex-direction:column; }
.editor-toolbar { display:flex; align-items:center; gap:8px; padding:9px 12px; border-bottom:1px solid var(--border); }
.editor-kind { flex:none; color:var(--muted); font-size:11px; font-weight:600; }
.editor-toolbar input { flex:1; min-width:70px; padding:7px 9px; border:1px solid var(--border); border-radius:6px; background:var(--surface-solid); color:var(--text); font-size:11px; }
.editor-toolbar kbd { margin-left:4px; font-size:9px; font-weight:400; opacity:.8; }
.editor-workspace { flex:1; min-height:0; display:flex; overflow:auto; }
.editor-workspace textarea { flex:1; min-width:0; width:100%; resize:none; border:0; outline:none; padding:18px; background:var(--surface-solid); color:var(--text); font:13px/1.7 Inter,"Noto Sans SC",sans-serif; }
.editor-workspace textarea.code-source { font:13px/1.65 Consolas,"Courier New",monospace; tab-size:2; }
.markdown-preview { flex:1; min-width:0; overflow:auto; padding:20px 24px; border-left:1px solid var(--border); line-height:1.7; }
.markdown-preview h1,.markdown-preview h2,.markdown-preview h3 { margin:0 0 12px; }
.markdown-preview p { margin:0 0 10px; }
.markdown-preview blockquote { margin:8px 0; padding:3px 12px; border-left:3px solid var(--accent); color:var(--muted); }
.markdown-preview code { padding:2px 5px; border-radius:4px; background:var(--surface-2); font-family:Consolas,monospace; }
.markdown-preview .markdown-list-item { padding-left:10px; }
.editor-status { display:flex; justify-content:space-between; padding:6px 12px; border-top:1px solid var(--border); color:var(--muted); font-size:10px; }
.modal-backdrop { position:absolute; inset:0; z-index:12; display:grid; place-items:center; padding:16px; background:rgba(11,20,35,.24); }
.modal-card { width:min(360px,100%); padding:19px; border:1px solid var(--border); border-radius:12px; background:var(--surface); box-shadow:var(--shadow); }
.modal-card h3 { margin:0 0 8px; font-size:15px; }
.modal-card p { color:var(--muted); font-size:11px; line-height:1.6; }
.modal-card input { width:100%; margin:8px 0 14px; }
.modal-actions { display:flex; justify-content:flex-end; gap:8px; }
@media (max-width:650px) {
  :root { --taskbar-height:calc(54px + env(safe-area-inset-bottom, 0px)); }
  .taskbar { justify-content:space-between; gap:5px; padding:0 6px env(safe-area-inset-bottom, 0px); }
  .taskbar-left .taskbar-os-label { display:none; }
  .taskbar-center { position:static; left:auto; flex:none; height:100%; gap:2px; transform:none; }
  .taskbar-button { width:34px; height:38px; border-radius:8px; }
  .taskbar-center .taskbar-button { font-size:20px; }
  .taskbar-center .start-button { font-size:11px; }
  .taskbar-right { flex:none; gap:3px; margin-left:auto; }
  .taskbar-left, .tray-overflow-button, .tray-language { display:none; }
  .tray-button { height:34px; gap:3px; padding:0 3px; }
  .tray-button svg { width:14px; height:14px; }
  .tray-button svg.tray-battery { width:16px; }
  .clock { min-width:42px; font-size:11px; }
  .clock small { display:none; }
  .desktop-icon { width:70px; min-height:72px; }
  .os-window { min-width:0; min-height:0; width:calc(100% - 12px) !important; height:calc(100% - 12px) !important; left:6px !important; top:6px !important; border-radius:10px; }
  .resize-handle { display:none; }
  .window-titlebar { cursor:default; }
  .files-layout { flex-direction:column; }
  .files-sidebar { display:flex; width:100%; flex:none; gap:4px; overflow-x:auto; padding:6px; border-right:0; border-bottom:1px solid var(--border); }
  .files-nav { width:auto; flex:none; white-space:nowrap; padding:8px; }
  .files-main { flex:1; min-height:0; }
  .files-grid { grid-template-columns:repeat(auto-fill,minmax(78px,1fr)); padding:8px; }
  .app-toolbar { flex-wrap:wrap; gap:5px; padding:8px; }
  .app-toolbar input[data-files-search] { order:2; flex:1 1 100% !important; width:100%; }
  .app-toolbar button[data-action="back"], .app-toolbar button[data-action="up"] { flex:0 0 36px; }
  .app-toolbar button[data-action="new-folder"], .app-toolbar button[data-action="new-file"] { flex:1; }
  .browser-toolbar { display:grid; grid-template-columns:repeat(4,30px) minmax(0,1fr) auto auto; gap:2px; padding:7px 6px; }
  .browser-nav { width:28px; height:30px; }
  .browser-address-wrap { padding:0 8px; }
  .browser-go { padding:0 8px; font-size:10px; }
  .browser-notice { padding:6px 9px; font-size:9px; }
  .browser-shortcuts { gap:4px; }
  .settings-layout { height:100%; min-height:0; flex-direction:column; }
  .settings-nav { display:flex; width:100%; flex:none; gap:4px; overflow-x:auto; padding:7px; border-right:0; border-bottom:1px solid var(--border); }
  .settings-nav button { width:auto; flex:none; white-space:nowrap; padding:8px 10px; }
  .settings-main { flex:1; min-height:0; overflow:auto; }
  .settings-main { padding:14px; }
  .paint-toolbar { gap:5px; padding:7px; }
  .paint-tool-group, .paint-color-group, .paint-options, .paint-actions { flex-wrap:wrap; border-right:0; padding:0 3px; }
  .paint-actions { margin-left:0; }
  .paint-stage { margin:7px; }
  .wallpaper-options { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .wallpaper-choice { min-height:74px; }
  .start-menu { bottom:calc(var(--taskbar-height) + 8px); max-height:calc(100dvh - var(--taskbar-height) - 16px); padding:14px; }
  .quick-settings { right:6px; bottom:calc(var(--taskbar-height) + 8px); max-height:calc(100dvh - var(--taskbar-height) - 16px); padding:15px; }
  .control-status { grid-template-columns:1fr; }
  .control-status-item { min-height:48px; }
  .start-footer { margin:18px -14px -14px; padding:12px 14px; }
}
@media (max-width:360px) {
  .taskbar { padding-right:4px; padding-left:4px; gap:2px; }
  .taskbar-center { gap:0; }
}

.mobile-warning-dialog, .os-message-dialog {
  width:min(390px, calc(100vw - 32px));
  padding:26px;
  border:1px solid rgba(255,255,255,.7);
  border-radius:20px;
  background:var(--surface-solid);
  color:var(--text);
  box-shadow:0 24px 80px rgba(16,28,48,.26);
}
.mobile-warning-dialog::backdrop, .os-message-dialog::backdrop { background:rgba(14,22,36,.32); backdrop-filter:blur(5px); }
.mobile-warning-dialog { text-align:center; }
.mobile-warning-icon { display:grid; place-items:center; width:50px; height:50px; margin:0 auto 14px; border-radius:16px; background:var(--surface-2); color:var(--accent); font-size:22px; }
.mobile-warning-dialog h2, .os-message-dialog h2 { margin:0 0 10px; font-size:19px; }
.mobile-warning-dialog p, .os-message-dialog p { color:var(--muted); font-size:13px; line-height:1.65; white-space:pre-line; }
.mobile-warning-dialog button, .os-message-dialog button, .viewer-toolbar button {
  min-height:36px;
  padding:0 15px;
  border:0;
  border-radius:9px;
  background:var(--accent);
  color:#fff;
  font-size:12px;
  font-weight:600;
}
.mobile-warning-dialog button { width:100%; margin-top:9px; }
.os-message-dialog button { display:block; margin:18px 0 0 auto; }
.desktop-import-button {
  position:absolute;
  z-index:2;
  top:14px;
  right:16px;
  min-height:34px;
  padding:0 12px;
  border:1px solid rgba(255,255,255,.48);
  border-radius:9px;
  background:rgba(255,255,255,.62);
  color:#243149;
  box-shadow:0 3px 12px rgba(26,42,68,.1);
  backdrop-filter:blur(16px);
  font-size:11px;
}
.desktop-import-button:hover { background:rgba(255,255,255,.82); }
.desktop-imported-files { overflow:visible; }
.imported-file-icon { min-width:0; }
.imported-file-icon.selected { background:rgba(255,255,255,.32); border-color:rgba(255,255,255,.46); }
.imported-file-type-icon { background:rgba(255,255,255,.82); }
.imported-file-name { display:block; width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.desktop-drop-overlay {
  position:absolute;
  z-index:2;
  inset:0 0 var(--taskbar-height);
  border:0 solid rgba(255,255,255,.85);
  pointer-events:none;
  transition:background .15s,border-width .15s;
}
.desktop-drop-hint {
  position:absolute;
  z-index:3;
  left:50%;
  top:50%;
  display:none;
  min-width:260px;
  padding:25px;
  border:1px solid rgba(255,255,255,.8);
  border-radius:18px;
  background:rgba(250,252,255,.84);
  color:#1c2433;
  text-align:center;
  box-shadow:0 18px 50px rgba(15,28,55,.2);
  transform:translate(-50%,-50%);
  backdrop-filter:blur(22px);
}
.desktop-drop-hint > span { display:block; color:var(--accent); font-size:34px; }
.desktop-drop-hint b, .desktop-drop-hint small { display:block; margin-top:7px; }
.desktop-drop-hint small { color:#68758a; font-size:10px; }
.desktop.drag-active .desktop-drop-overlay { border:3px solid rgba(255,255,255,.85); background:rgba(66,110,232,.17); }
.desktop.drag-active .desktop-drop-hint { display:block; }
.calculator-app { height:100%; display:flex; flex-direction:column; padding:14px; background:#f2f2f7; color:#17171a; }
.calculator-display { display:flex; flex:1; min-height:90px; align-items:flex-end; justify-content:flex-end; padding:12px 8px 18px; overflow:hidden; color:#17171a; font-size:clamp(36px,9vw,58px); font-weight:300; letter-spacing:-2px; white-space:nowrap; }
.calculator-keys { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; }
.calculator-keys button { aspect-ratio:1; border:0; border-radius:50%; background:#e4e4e8; color:#1a1a1b; font-size:22px; font-weight:500; transition:filter .12s,transform .12s; }
.calculator-keys button:hover { filter:brightness(1.07); }
.calculator-keys button:active { transform:scale(.95); filter:brightness(.95); }
.calculator-keys .calc-function { background:#d1d1d6; font-size:16px; }
.calculator-keys .calc-operator { background:#ff9f0a; color:white; font-size:24px; }
.calculator-keys .calc-zero { grid-column:span 2; aspect-ratio:auto; border-radius:999px; text-align:left; padding-left:26%; }
.file-viewer { height:100%; display:flex; flex-direction:column; background:var(--surface-solid); }
.viewer-toolbar { min-height:48px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:7px 14px; border-bottom:1px solid var(--border); }
.viewer-toolbar strong { min-width:0; overflow:hidden; color:var(--text); font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.viewer-toolbar button { flex:none; min-height:32px; }
.viewer-toolbar button:disabled { opacity:.5; cursor:default; }
.viewer-content { flex:1; min-height:0; overflow:auto; padding:20px; }
.viewer-empty, .viewer-loading, .viewer-notice { max-width:650px; margin:10vh auto; color:var(--muted); font-size:13px; line-height:1.8; text-align:center; }
.viewer-text { min-height:100%; margin:0 auto; max-width:850px; color:var(--text); font:13px/1.75 Consolas,"SFMono-Regular",monospace; white-space:pre-wrap; overflow-wrap:anywhere; }
.viewer-slide { max-width:820px; min-height:240px; margin:0 auto 18px; padding:28px; border:1px solid var(--border); border-radius:12px; background:var(--surface); box-shadow:0 5px 18px rgba(15,28,55,.06); }
.viewer-slide h2 { margin:0 0 22px; font-size:16px; }
.viewer-slide p { margin:0; color:var(--text); font-size:14px; line-height:1.8; white-space:pre-wrap; }
.viewer-content audio, .viewer-content video { display:block; width:min(100%,850px); max-height:100%; margin:20px auto; }
.viewer-toolbar-title { min-width:0; display:flex; align-items:center; gap:9px; }
.viewer-back-button { width:30px; height:30px; flex:none; border:0; border-radius:8px; background:var(--surface-2); color:var(--text); font-size:18px; }
.viewer-back-button[hidden] { display:none; }
.viewer-folder-items { display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:8px; }
.viewer-folder-item { min-width:0; min-height:96px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; padding:10px 8px; border:1px solid transparent; border-radius:10px; background:transparent; color:var(--text); font-size:11px; }
.viewer-folder-item:hover, .viewer-folder-item:focus-visible { border-color:var(--border); background:var(--surface); }
.viewer-folder-item > span:last-child { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.viewer-folder-item-icon { font-size:29px; }
.viewer-image { display:block; max-width:100%; max-height:100%; margin:0 auto; object-fit:contain; }
.calculator-icon, .calculator-pinned, .taskbar-calculator { color:#fff; background:#ff9f0a; }
.calculator-icon { font-size:24px; }
.calculator-pinned { display:grid; place-items:center; }
.taskbar-calculator { display:grid; place-items:center; width:25px; height:25px; border-radius:8px; font-size:20px; }
.viewer-icon, .viewer-pinned { background:linear-gradient(145deg,#fff,#dbe5f4); color:#41699e; }
.viewer-pinned { display:grid; place-items:center; }
@media (max-width:650px) {
  .taskbar-center [data-app="calculator"], .taskbar-center [data-app="viewer"] { display:none; }
  .desktop-import-button { top:8px; right:8px; min-height:32px; padding:0 8px; font-size:10px; }
  .desktop-imported-files .desktop-icon { width:68px; min-height:70px; font-size:10px; }
  .desktop-drop-hint { min-width:min(300px,calc(100vw - 32px)); padding:18px; }
  .viewer-content { padding:12px; }
  .viewer-slide { min-height:180px; padding:18px; }
  .calculator-app { padding:10px; }
  .calculator-keys { gap:7px; }
  .taskbar-button { width:30px; }
  .taskbar-right { gap:1px; }
  .tray-button { gap:1px; padding:0 2px; }
  .tray-button svg { width:13px; height:13px; }
  .tray-button svg.tray-battery { width:15px; }
  .clock { min-width:38px; font-size:10px; }
}
.viewer-preview-note { margin:0 0 14px; color:var(--muted); font-size:11px; line-height:1.6; }
.notes-app { height:100%; min-height:0; display:flex; background:var(--surface-solid); color:var(--text); }
.notes-sidebar { width:230px; flex:none; display:flex; flex-direction:column; min-height:0; padding:14px 10px; border-right:1px solid var(--border); background:var(--surface); }
.notes-sidebar > header { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:0 4px 12px; }
.notes-sidebar > header strong { font-size:13px; }
.notes-list { flex:1; min-height:0; overflow:auto; }
.notes-list-item { width:100%; display:block; padding:10px; border:1px solid transparent; border-radius:8px; background:transparent; color:var(--text); text-align:left; }
.notes-list-item:hover, .notes-list-item.active { border-color:var(--border); background:var(--surface-2); }
.notes-list-item strong, .notes-list-item small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.notes-list-item strong { font-size:11px; }
.notes-list-item small { margin-top:5px; color:var(--muted); font-size:10px; }
.notes-editor { flex:1; min-width:0; min-height:0; display:flex; flex-direction:column; padding:20px; }
.notes-title-label { color:var(--muted); font-size:10px; }
.notes-title-label input { width:100%; margin-top:6px; padding:8px 0; border:0; border-bottom:1px solid var(--border); outline:none; background:transparent; color:var(--text); font-size:20px; font-weight:650; }
.notes-editor textarea { flex:1; min-height:0; width:100%; resize:none; padding:16px 0; border:0; outline:none; background:transparent; color:var(--text); font:13px/1.8 Inter,"Noto Sans SC",sans-serif; }
.notes-editor footer { display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:10px; border-top:1px solid var(--border); color:var(--muted); font-size:10px; }
.notes-empty { padding:18px 8px; color:var(--muted); font-size:11px; line-height:1.6; text-align:center; }
.notes-empty-editor { margin:auto; }
.app-button.danger { color:#b4232c; }
.calendar-app { height:100%; min-height:0; display:grid; grid-template-columns:minmax(270px, .95fr) minmax(300px, 1.05fr); background:var(--surface-solid); color:var(--text); }
.calendar-month-view { min-width:0; padding:18px; border-right:1px solid var(--border); }
.calendar-header { display:flex; align-items:center; gap:8px; margin-bottom:18px; }
.calendar-header h2 { flex:1; margin:0; font-size:17px; text-align:center; }
.calendar-header .app-button { min-width:34px; padding:0 9px; }
.calendar-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px; }
.calendar-weekdays { margin-bottom:7px; color:var(--muted); font-size:10px; text-align:center; }
.calendar-weekdays span { padding:6px 0; }
.calendar-day, .calendar-day-spacer { aspect-ratio:1; }
.calendar-day { position:relative; display:grid; place-items:center; border:0; border-radius:50%; background:transparent; color:var(--text); font-size:11px; }
.calendar-day:hover { background:var(--surface-2); }
.calendar-day.today { box-shadow:inset 0 0 0 1px var(--accent); }
.calendar-day.selected { background:var(--accent); color:white; }
.calendar-day.has-events::after { position:absolute; bottom:4px; width:4px; height:4px; border-radius:50%; background:currentColor; content:""; }
.calendar-agenda { min-width:0; min-height:0; display:flex; flex-direction:column; padding:20px; }
.calendar-agenda h3 { margin:0 0 16px; font-size:14px; }
.calendar-event-form { display:grid; grid-template-columns:minmax(100px,1fr) auto; gap:7px; }
.calendar-event-form input { min-width:0; min-height:34px; padding:6px 8px; border:1px solid var(--border); border-radius:7px; background:var(--surface); color:var(--text); font-size:10px; }
.calendar-event-form input[name="title"] { grid-column:1 / -1; }
.calendar-events { flex:1; min-height:0; overflow:auto; margin-top:14px; }
.calendar-event { display:grid; grid-template-columns:55px minmax(0,1fr) 30px; align-items:start; gap:8px; padding:11px 4px; border-bottom:1px solid var(--border); }
.calendar-event time { padding-top:2px; color:var(--accent); font-size:10px; font-weight:650; }
.calendar-event strong { font-size:11px; overflow-wrap:anywhere; }
.calendar-event p { margin:5px 0 0; color:var(--muted); font-size:10px; }
.calendar-event > button { border:0; border-radius:6px; background:transparent; color:var(--muted); font-size:18px; }
.calendar-event > button:hover { background:var(--surface-2); color:var(--text); }
.calendar-empty { padding:24px 8px; color:var(--muted); font-size:11px; text-align:center; }
.os-window-win98 {
  border-radius:0; border:2px solid; border-color:#fff #404040 #404040 #fff; background:#c0c0c0; box-shadow:1px 1px 0 #000; backdrop-filter:none; font-family:Tahoma,"MS Sans Serif",sans-serif; color:#000;
}
.os-window-win98 .window-titlebar { height:22px; min-height:22px; padding:0 3px 0 5px; background:linear-gradient(90deg,#000080,#1084d0); color:#fff; border-bottom:0; gap:6px; }
.os-window-win98 .window-title { font-size:11px; font-weight:700; color:#fff; }
.os-window-win98 .window-control { width:16px; height:14px; border-radius:0; border:1px solid; border-color:#fff #000 #000 #fff; background:#c0c0c0; color:#000; font-size:9px; line-height:1; }
.os-window-win98 .window-control:hover, .os-window-win98 .window-control.close:hover { background:#c0c0c0; color:#000; }
.os-window-win98 .maximize, .os-window-win98 .resize-handle { display:none; }
.os-window-win98 .window-content { overflow:hidden; background:#c0c0c0; }
.win98-welcome { height:100%; min-height:0; display:grid; grid-template-columns:168px minmax(0,1fr); background:#c0c0c0; }
.win98-hero { min-width:0; padding:16px 12px; background:linear-gradient(180deg,#7eb0e8 0%,#1b4fa3 58%,#0b2d68 100%); color:#fff; display:flex; flex-direction:column; justify-content:flex-end; gap:6px; }
.win98-hero b { font-size:18px; letter-spacing:-.04em; }
.win98-hero small { font-size:10px; opacity:.85; }
.win98-panel { min-width:0; min-height:0; display:flex; flex-direction:column; padding:12px 12px 10px; }
.win98-panel h2 { margin:0 0 4px; font-size:16px; font-weight:700; color:#000080; }
.win98-panel > p { margin:0 0 10px; font-size:11px; }
.win98-actions { display:flex; flex-direction:column; gap:5px; margin-bottom:10px; }
.win98-actions button, .win98-close { border:2px solid; border-color:#fff #404040 #404040 #fff; background:#c0c0c0; color:#000; text-align:left; padding:5px 8px; font-size:11px; }
.win98-actions button:active, .win98-close:active { border-color:#404040 #fff #fff #404040; }
.win98-actions button.active { outline:1px dotted #000; }
.win98-tip { flex:1; min-height:72px; overflow:auto; padding:8px; border:2px solid; border-color:#808080 #fff #fff #808080; background:#fff; font-size:11px; line-height:1.55; color:#000; }
.win98-tip strong { display:block; margin-bottom:4px; }
.win98-foot { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:8px; font-size:11px; }
.win98-foot label { display:flex; align-items:center; gap:6px; }
.launchpad-button .launchpad-glyph { width:18px; height:18px; display:grid; }
.launchpad-button .launchpad-glyph::before {
  content:""; width:100%; height:100%;
  background:
    radial-gradient(circle closest-side, currentColor 55%, transparent 56%) 0 0 / 33.33% 33.33%,
    radial-gradient(circle closest-side, currentColor 55%, transparent 56%) 50% 0 / 33.33% 33.33%,
    radial-gradient(circle closest-side, currentColor 55%, transparent 56%) 100% 0 / 33.33% 33.33%,
    radial-gradient(circle closest-side, currentColor 55%, transparent 56%) 0 50% / 33.33% 33.33%,
    radial-gradient(circle closest-side, currentColor 55%, transparent 56%) 50% 50% / 33.33% 33.33%,
    radial-gradient(circle closest-side, currentColor 55%, transparent 56%) 100% 50% / 33.33% 33.33%,
    radial-gradient(circle closest-side, currentColor 55%, transparent 56%) 0 100% / 33.33% 33.33%,
    radial-gradient(circle closest-side, currentColor 55%, transparent 56%) 50% 100% / 33.33% 33.33%,
    radial-gradient(circle closest-side, currentColor 55%, transparent 56%) 100% 100% / 33.33% 33.33%;
  background-repeat:no-repeat;
}
.launchpad { position:absolute; inset:0; z-index:40; display:grid; place-items:center; }
.launchpad.hidden { display:none !important; }
.launchpad-blur { position:absolute; inset:0; background:rgba(20,28,42,.28); backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat)); -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat)); }
.launchpad-panel { position:relative; z-index:1; width:min(920px,94vw); height:min(680px,calc(100% - var(--taskbar-height) - 36px)); display:flex; flex-direction:column; align-items:center; padding:28px 12px 18px; }
.launchpad-search { width:min(360px,80vw); height:36px; display:flex; align-items:center; gap:8px; margin-bottom:28px; padding:0 14px; border-radius:999px; border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.28); color:#fff; }
.launchpad-search input { flex:1; min-width:0; border:0; outline:none; background:transparent; color:#fff; font-size:14px; }
.launchpad-pages { flex:1; min-height:0; width:100%; overflow:hidden; position:relative; }
.launchpad-page { position:absolute; inset:0; display:none; overflow:auto; }
.launchpad-page.active { display:block; }
.launchpad-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:26px 16px; justify-items:center; width:100%; max-width:860px; margin:0 auto; }
.launchpad-app { width:100%; max-width:96px; display:flex; flex-direction:column; align-items:center; gap:10px; border:0; background:transparent; color:#fff; }
.launchpad-icon-face { width:72px; height:72px; display:grid; place-items:center; border-radius:18px; font-size:34px; background:rgba(255,255,255,.18); overflow:hidden; }
.launchpad-dots { display:flex; gap:8px; justify-content:center; padding-top:10px; }
.launchpad-dots button { width:8px; height:8px; border:0; border-radius:50%; background:rgba(255,255,255,.35); padding:0; }
.launchpad-dots button.active { background:#fff; }
@media (max-width:650px) {
  .win98-welcome { grid-template-columns:1fr; }
  .win98-hero { min-height:72px; }
  .launchpad-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .taskbar-center { max-width:calc(100vw - 150px); overflow-x:auto; }
  .taskbar-center::-webkit-scrollbar { display:none; }
  .calendar-app { grid-template-columns:1fr; grid-template-rows:auto minmax(0,1fr); overflow:auto; }
  .calendar-month-view { padding:12px; border-right:0; border-bottom:1px solid var(--border); }
  .calendar-agenda { padding:14px; }
  .notes-sidebar { width:135px; padding:10px 6px; }
  .notes-editor { padding:14px; }
  .notes-editor footer { align-items:flex-start; flex-direction:column; }
  .music-app, .gallery-app { grid-template-columns:1fr; }
  .tasks-app, .clock-app, .recorder-app, .trash-app, .shortcuts-app, .game-app { padding:14px; }
  .shortcut-row { grid-template-columns:1fr; }
}
.window-app-icon { width:23px; height:23px; display:grid; place-items:center; overflow:hidden; }
.window-app-icon-image { width:23px; height:23px; object-fit:contain; display:block; }
.app-empty-state { max-width:420px; margin:12vh auto; padding:8px 20px; text-align:center; color:var(--muted); font-size:13px; line-height:1.7; }
.app-empty-state h2 { margin:0 0 8px; color:var(--text); font-size:18px; }
.about-note { margin-top:18px !important; }
.about-disclaimer { margin-top:8px; text-align:left; }
.about-disclaimer h3 { margin-bottom:8px; }
.about-disclaimer p { margin:0 0 8px; font-size:11px; line-height:1.65; }
.about-disclaimer p:last-child { margin-bottom:0; }
.control-environment { margin:0 0 12px; color:var(--muted); font-size:10px; line-height:1.5; }
.notes-icon, .notes-pinned { background:linear-gradient(145deg,#fff6d8,#f0c14a); }
.calendar-icon, .calendar-pinned { background:linear-gradient(145deg,#ffe8ea,#e25b6a); color:#fff; }
.tasks-icon, .tasks-pinned, .taskbar-tasks { background:linear-gradient(145deg,#e7f8ee,#3aaa6a); color:#fff; }
.music-icon, .music-pinned { background:linear-gradient(145deg,#f3e8ff,#8b5cf6); color:#fff; }
.trash-icon, .trash-pinned { background:linear-gradient(145deg,#eef2f7,#9aa8bc); }
.guide-icon, .guide-pinned { background:linear-gradient(145deg,#e8f1ff,#4c7fe0); color:#fff; }
.shortcuts-icon, .shortcuts-pinned { background:linear-gradient(145deg,#f4f6fb,#c5d0e4); }
.minesweeper-icon, .minesweeper-pinned { background:linear-gradient(145deg,#ffe9e4,#e15b4a); }
.snake-icon, .snake-pinned { background:linear-gradient(145deg,#e5ffe8,#2f9e55); }
.puzzle2048-icon, .puzzle2048-pinned { background:linear-gradient(145deg,#fff1d6,#edc22e); color:#776e65; }
.memory-icon, .memory-pinned { background:linear-gradient(145deg,#efe7ff,#7c5cbf); color:#fff; }
.clock-icon, .clock-pinned { background:transparent; box-shadow:none; }
.recorder-icon, .recorder-pinned, .gallery-icon, .gallery-pinned, .folder-pinned { background:transparent; box-shadow:none; }
.parkour-icon, .parkour-pinned { background:linear-gradient(145deg,#ffe8c8,#f08a3c); color:#fff; }
.flight-icon, .flight-pinned { background:linear-gradient(145deg,#d9ecff,#3d7fd6); color:#fff; }
.driving-icon, .driving-pinned { background:linear-gradient(145deg,#e4ffe8,#2f9e55); color:#fff; }
.tasks-app, .clock-app, .recorder-app { height:100%; min-height:0; display:flex; flex-direction:column; padding:18px; background:var(--surface-solid); color:var(--text); }
.tasks-app header, .clock-tabs, .recorder-app header { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px; }
.tasks-app h2, .recorder-app h2 { margin:0; font-size:16px; }
.tasks-form { display:flex; gap:8px; margin-bottom:12px; }
.tasks-form input { flex:1; min-width:0; }
.tasks-list { flex:1; min-height:0; overflow:auto; display:flex; flex-direction:column; gap:6px; }
.task-item { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--border); border-radius:10px; background:var(--surface); }
.task-item label { min-width:0; display:flex; align-items:center; gap:10px; }
.task-item label span { min-width:0; overflow-wrap:anywhere; }
.task-item.done span { color:var(--muted); text-decoration:line-through; }
.task-item button { border:0; background:transparent; color:var(--muted); font-size:16px; }
.clock-tabs { display:flex; gap:6px; }
.clock-tabs button { flex:1; }
.clock-tabs button.active { background:var(--accent); color:#fff; border-color:var(--accent); }
.clock-face { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; text-align:center; }
.clock-time { font-size:42px; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:-.04em; }
.clock-date { color:var(--muted); font-size:13px; }
.clock-actions { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
.clock-laps { width:100%; max-height:140px; overflow:auto; margin-top:10px; color:var(--muted); font-size:11px; }
.clock-timer-inputs { display:flex; gap:8px; align-items:center; }
.clock-timer-inputs input { width:72px; text-align:center; }
.music-app, .gallery-app { height:100%; min-height:0; display:grid; grid-template-columns:240px minmax(0,1fr); background:var(--surface-solid); color:var(--text); }
.music-list, .gallery-list { min-width:0; overflow:auto; padding:12px; border-right:1px solid var(--border); background:var(--surface); }
.music-list button, .gallery-list button { width:100%; display:block; padding:9px 10px; border:1px solid transparent; border-radius:8px; background:transparent; color:var(--text); text-align:left; font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.music-list button.active, .gallery-list button.active, .music-list button:hover, .gallery-list button:hover { background:var(--surface-2); }
.music-stage, .gallery-stage { min-width:0; min-height:0; display:flex; flex-direction:column; padding:18px; }
.music-stage audio { width:100%; margin-top:auto; }
.gallery-stage img { max-width:100%; max-height:100%; margin:auto; object-fit:contain; border-radius:10px; }
.recorder-status { margin:0 0 16px; color:var(--muted); font-size:12px; line-height:1.6; }
.recorder-level { height:8px; border-radius:99px; background:var(--surface-2); overflow:hidden; margin-bottom:16px; }
.recorder-level span { display:block; height:100%; width:0; background:#e24b4b; }
.recorder-actions { display:flex; gap:8px; flex-wrap:wrap; }
.trash-app, .shortcuts-app, .game-app { height:100%; min-height:0; display:flex; flex-direction:column; padding:16px; background:var(--surface-solid); color:var(--text); gap:10px; }
.trash-app header, .shortcuts-app header, .game-app header { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.trash-app h2, .shortcuts-app h2, .game-app h2 { margin:0; font-size:16px; }
.trash-actions, .game-meta { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.trash-list { flex:1; min-height:0; overflow:auto; display:flex; flex-direction:column; gap:8px; }
.trash-item { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; border:1px solid var(--border); border-radius:10px; background:var(--surface); }
.trash-item strong { display:block; font-size:13px; }
.trash-item small { color:var(--muted); font-size:11px; }
.trash-item-actions { display:flex; gap:6px; flex-shrink:0; }
.shortcuts-list { display:flex; flex-direction:column; gap:8px; overflow:auto; }
.shortcut-row { display:grid; grid-template-columns:minmax(160px,auto) 1fr; gap:12px; align-items:center; padding:10px 12px; border:1px solid var(--border); border-radius:10px; background:var(--surface); }
.shortcut-row kbd { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:11px; padding:4px 8px; border-radius:6px; background:var(--surface-2); border:1px solid var(--border); }
.mine-grid, .snake-grid, .puzzle-grid, .memory-grid { margin:auto; width:min(100%,360px); display:grid; gap:4px; }
.mine-grid { grid-template-columns:repeat(var(--mine-cols),minmax(0,1fr)); }
.mine-cell { aspect-ratio:1; border:1px solid var(--border); border-radius:6px; background:var(--surface-2); color:var(--text); font-size:12px; font-weight:700; }
.mine-cell.open { background:var(--surface); }
.mine-cell.flag { background:#fff4d6; }
.snake-grid { grid-template-columns:repeat(var(--snake-size),minmax(0,1fr)); background:#1d2a24; padding:6px; border-radius:12px; }
.snake-cell { aspect-ratio:1; border-radius:3px; background:transparent; }
.snake-cell.head { background:#7dffb1; }
.snake-cell.body { background:#2f9e62; }
.snake-cell.food { background:#ff6b6b; border-radius:50%; }
.puzzle-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.puzzle-tile { aspect-ratio:1; display:grid; place-items:center; border-radius:10px; font-size:22px; font-weight:700; background:var(--surface-2); color:var(--text); }
.puzzle-tile.t0 { background:var(--surface); color:transparent; }
.puzzle-tile.t2 { background:#eee4da; color:#776e65; }
.puzzle-tile.t4 { background:#ede0c8; color:#776e65; }
.puzzle-tile.t8 { background:#f2b179; color:#fff; }
.puzzle-tile.t16 { background:#f59563; color:#fff; }
.puzzle-tile.t32 { background:#f67c5f; color:#fff; }
.puzzle-tile.t64 { background:#f65e3b; color:#fff; }
.puzzle-tile.t128, .puzzle-tile.t256, .puzzle-tile.t512 { background:#edc850; color:#fff; }
.puzzle-tile.t1024, .puzzle-tile.t2048 { background:#edc22e; color:#fff; }
.memory-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; width:min(100%,420px); }
.memory-card { aspect-ratio:1; border:1px solid var(--border); border-radius:12px; background:var(--surface-2); font-size:28px; color:var(--text); }
.memory-card.open, .memory-card.matched { background:var(--surface); }
.memory-card.matched { opacity:.72; }
.sim-stage { flex:1; min-height:0; display:flex; flex-direction:column; gap:8px; }
.sim-stage canvas { width:100%; flex:1; min-height:220px; border-radius:12px; background:#0b1220; display:block; touch-action:none; }
.sim-hint { margin:0; color:var(--muted); font-size:11px; }