:root {
  --bg: #091018; --bg-soft: #101923; --panel: rgba(17, 27, 37, .9); --panel-solid: #131f2b;
  --line: rgba(188, 218, 229, .14); --line-strong: rgba(188, 218, 229, .28); --text: #e5edf0;
  --muted: #8c9da4; --accent: #a9e6d0; --accent-2: #f1c88a; --danger: #ed8d83; --shadow: 0 28px 80px rgba(0,0,0,.35);
}
html[data-theme="light"] { --bg:#e8eeeb; --bg-soft:#f5f8f6; --panel:rgba(248,251,249,.92); --panel-solid:#f5f8f6; --line:rgba(23,47,49,.14); --line-strong:rgba(23,47,49,.28); --text:#142326; --muted:#607174; --accent:#137d68; --accent-2:#a46428; --shadow:0 28px 80px rgba(30,52,47,.18); }
html[data-theme="dark"] { --bg:#06080d; --bg-soft:#10131b; --panel:rgba(15,18,27,.94); --panel-solid:#10131b; --line:rgba(214,220,235,.12); --line-strong:rgba(214,220,235,.26); --text:#edf0f5; --muted:#89909f; --accent:#99b7ff; --accent-2:#efbb80; }
html[data-theme="neon"] { --bg:#080b16; --bg-soft:#11142a; --panel:rgba(17,18,43,.92); --panel-solid:#11122b; --line:rgba(117,255,220,.2); --line-strong:rgba(117,255,220,.42); --text:#e7fdf5; --muted:#8b9db2; --accent:#75ffdc; --accent-2:#ff89cb; }
html[data-theme="retro"] { --bg:#20251b; --bg-soft:#323622; --panel:rgba(43,48,30,.93); --panel-solid:#2b301e; --line:rgba(239,225,157,.18); --line-strong:rgba(239,225,157,.4); --text:#f0e7b0; --muted:#a8a476; --accent:#c5db83; --accent-2:#efb56e; }
html[data-theme="vaporwave"] { --bg:#17132b; --bg-soft:#231b3e; --panel:rgba(34,24,61,.92); --panel-solid:#22183c; --line:rgba(255,173,232,.2); --line-strong:rgba(255,173,232,.4); --text:#f9edff; --muted:#ae9abb; --accent:#8ff5e3; --accent-2:#ff9bd9; }
html[data-theme="high-contrast"] { --bg:#000; --bg-soft:#111; --panel:#000; --panel-solid:#000; --line:#fff; --line-strong:#fff; --text:#fff; --muted:#ddd; --accent:#00ff88; --accent-2:#ffff00; --shadow:0 0 0 2px #fff; }
* { box-sizing: border-box; } html, body { width:100%; height:100%; margin:0; overflow:hidden; }
body { background: var(--bg); color:var(--text); font-family:Manrope, sans-serif; font-size:14px; }
button, input, textarea, select { font:inherit; } button { cursor:pointer; color:inherit; border:0; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.boot-screen { position:fixed; inset:0; z-index:100; display:grid; place-items:center; align-content:center; background:#081017; transition:opacity .7s, visibility .7s; }
.boot-screen.is-done { opacity:0; visibility:hidden; pointer-events:none; } .boot-screen > * { position:relative; z-index:1; }
.boot-screen:before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 50% 45%, rgba(110,182,169,.12), transparent 29%), linear-gradient(130deg, transparent 44%, rgba(255,255,255,.025) 45%, transparent 46%); }
.boot-orbit { width:86px; height:86px; border:1px solid rgba(169,230,208,.4); border-radius:50%; margin-bottom:28px; animation:spin 12s linear infinite; }
.boot-orbit:before { content:""; display:block; height:100%; border-left:1px solid rgba(241,200,138,.6); transform:rotate(58deg); } .boot-orbit span { position:absolute; width:5px; height:5px; border-radius:50%; background:var(--accent); }
.boot-orbit span:nth-child(1) { margin:4px 0 0 58px; } .boot-orbit span:nth-child(2) { margin:64px 0 0 16px; background:var(--accent-2); } .boot-orbit span:nth-child(3) { margin:38px 0 0 4px; }
.boot-kicker, .eyebrow, .boot-status, .widget-heading, .signal-row, .status-pill, .window-kicker, .app-label { font:500 10px/1.3 "DM Mono", monospace; letter-spacing:.14em; }
.boot-kicker { color:var(--accent); margin:0 0 10px; } .boot-screen h1 { font-size:clamp(48px,8vw,88px); letter-spacing:-.08em; line-height:.9; margin:0; font-weight:700; }
.boot-screen h1 em { font-weight:400; color:var(--accent); } #boot-message { color:var(--muted); margin:18px 0 34px; }
.boot-progress { width:245px; height:2px; background:#20303a; overflow:hidden; } #boot-progress-fill { display:block; height:100%; width:0; background:var(--accent); transition:width .35s; } .boot-status { color:#51636b; margin-top:14px; }
.desktop { position:relative; height:100%; min-height:580px; overflow:hidden; background:radial-gradient(circle at 70% 20%, rgba(51,94,106,.16), transparent 29%), radial-gradient(circle at 25% 85%, rgba(104,71,59,.12), transparent 28%), var(--bg); }
html[data-wallpaper="aurora"] .desktop { background:radial-gradient(circle at 72% 18%, rgba(87,214,190,.28), transparent 24%), radial-gradient(circle at 20% 80%, rgba(102,93,220,.24), transparent 30%), var(--bg); }
html[data-wallpaper="sunset"] .desktop { background:radial-gradient(circle at 78% 18%, rgba(241,200,138,.28), transparent 25%), radial-gradient(circle at 16% 84%, rgba(190,103,91,.25), transparent 32%), var(--bg); }
html[data-wallpaper="plain"] .desktop { background:var(--bg); }
.desktop.is-hidden { display:none; } .desktop:before { content:""; position:absolute; inset:0; opacity:.38; background-image:linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size:64px 64px; mask-image:linear-gradient(to bottom, black, transparent 75%); }
.ambient { position:absolute; border:1px solid rgba(169,230,208,.09); border-radius:50%; pointer-events:none; } .ambient-one { width:600px;height:600px;right:-180px;top:-290px; } .ambient-two { width:360px;height:360px;left:-220px;bottom:-180px;border-color:rgba(241,200,138,.09); }
.topbar { height:64px; padding:0 32px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; position:relative; z-index:5; background:rgba(9,16,24,.3); }
.brand-button, .icon-button { background:transparent; display:flex; align-items:center; gap:9px; } .brand-button { font:700 12px "DM Mono",monospace; letter-spacing:.12em; } .brand-mark { display:grid; place-items:center; width:24px;height:24px; border:1px solid var(--accent); color:var(--accent); font-size:13px; }
.topbar-center { font:500 10px "DM Mono",monospace; letter-spacing:.14em; color:var(--muted); } .live-dot { display:inline-block; width:5px;height:5px;border-radius:50%;background:var(--accent); margin-right:7px; box-shadow:0 0 10px var(--accent); } .topbar-actions { display:flex;align-items:center;gap:19px;font:500 11px "DM Mono",monospace;color:var(--muted); } .icon-button { font-size:22px;color:var(--text); }
.desktop-content { position:relative; z-index:1; padding:clamp(40px,9vh,95px) clamp(28px,7vw,110px); } .eyebrow { color:var(--accent-2); margin:0 0 22px; } .welcome-block h2 { font-size:clamp(34px,5.2vw,70px); line-height:.98; letter-spacing:-.07em; margin:0; font-weight:600; } .welcome-block h2 span { color:var(--accent); } .welcome-copy { color:var(--muted); margin:25px 0 0; }
.desktop-icons { display:flex; gap:16px; margin-top:58px; flex-wrap:wrap; max-width:430px; } .desktop-icon { width:82px; height:92px; padding:9px 4px; color:var(--muted); background:transparent; display:flex; flex-direction:column; align-items:center; gap:9px; border:1px solid transparent; } .desktop-icon:hover { background:rgba(255,255,255,.04); border-color:var(--line); color:var(--text); } .app-glyph { width:42px;height:42px; display:grid;place-items:center; border:1px solid var(--line-strong); font-size:20px; background:rgba(255,255,255,.04); } .desktop-icon:nth-child(2) .app-glyph, .dock-app:nth-child(2) .app-glyph { color:var(--accent-2); } .desktop-icon:nth-child(3) .app-glyph { color:#ef9e9e; } .app-label { letter-spacing:.05em; font-size:9px; }
.glass-panel { background:rgba(17,27,37,.68); border:1px solid var(--line); backdrop-filter:blur(18px); } .system-widget { position:absolute; right:clamp(28px,8vw,130px); top:clamp(110px,17vh,180px); width:218px; padding:16px; } .widget-heading { display:flex;justify-content:space-between;color:var(--muted);font-size:9px; } .status-pill { color:var(--accent); font-size:8px; } .system-readout { display:flex;align-items:center;gap:14px;margin:25px 0 24px; } .system-readout strong { font-size:42px; letter-spacing:-.08em;font-weight:500; } .system-readout span { color:var(--muted);font-size:10px;line-height:1.6; } .signal-row { display:flex;justify-content:space-between;color:var(--muted);font-size:8px;margin-top:14px; } .signal-bar { height:2px;background:#25323b;margin-top:6px; } .signal-bar span { display:block;height:100%;background:var(--accent); }
.window-layer { position:absolute; inset:64px 0 88px; z-index:4; pointer-events:none; } .window { position:absolute; min-width:320px; min-height:220px; width:520px; height:390px; resize:both; overflow:hidden; pointer-events:auto; background:var(--panel); border:1px solid var(--line-strong); box-shadow:var(--shadow); backdrop-filter:blur(22px); animation:window-in .25s ease-out; } .window.is-focused { border-color:rgba(169,230,208,.48); } .window.maximized { inset:12px 20px!important; width:auto!important;height:auto!important;resize:none; } .window.minimized { display:none; }
.window-titlebar { height:43px; display:flex;align-items:center;justify-content:space-between;padding:0 12px 0 16px;border-bottom:1px solid var(--line);cursor:grab;user-select:none; } .window-title { display:flex;gap:9px;align-items:center;font-size:12px;font-weight:600; } .window-title .small-glyph { color:var(--accent);font-family:"DM Mono";font-size:16px; } .window-controls { display:flex;gap:3px; } .window-controls button { width:27px;height:25px;background:transparent;color:var(--muted);font-size:15px; } .window-controls button:hover { background:rgba(255,255,255,.08);color:var(--text); } .window-controls .close:hover { color:var(--danger); } .window-body { height:calc(100% - 43px); overflow:auto; }
.dock { position:absolute; z-index:10; bottom:19px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:8px; padding:8px 10px; background:rgba(13,23,31,.78); border:1px solid var(--line-strong); backdrop-filter:blur(20px); box-shadow:0 12px 40px rgba(0,0,0,.22); } .dock-apps { display:flex;gap:5px; } .dock-app { width:42px;height:42px;display:grid;place-items:center;background:transparent;color:var(--muted);font-size:22px;position:relative; } .dock-app:hover { background:rgba(255,255,255,.08);color:var(--text); } .dock-app.is-open:after { content:"";position:absolute;bottom:2px;left:50%;width:4px;height:4px;background:var(--accent);border-radius:50%;transform:translateX(-50%); } .dock-divider { width:1px;height:28px;background:var(--line);margin:0 3px; } .dock-time { position:absolute;bottom:27px;right:32px;display:flex;align-items:end;gap:12px;font:500 13px "DM Mono"; } .dock-time small { color:var(--muted);font-size:8px;letter-spacing:.1em;margin-bottom:2px; }
.app-shell { height:100%;display:flex;flex-direction:column; } .app-toolbar { display:flex;align-items:center;justify-content:space-between;padding:15px 17px;border-bottom:1px solid var(--line); } .app-toolbar h3 { margin:0;font-size:15px;font-weight:600; } .app-toolbar p { margin:4px 0 0;color:var(--muted);font-size:11px; } .tool-button, .primary-button { background:var(--accent);color:#0c1717;padding:9px 12px;font-size:11px;font-weight:700; } .tool-button { background:transparent;color:var(--accent);border:1px solid var(--line-strong); } .app-content { padding:16px;overflow:auto;flex:1; } .notes-textarea { width:100%;height:100%;min-height:260px;background:transparent;border:0;resize:none;color:var(--text);line-height:1.8; } .notes-textarea::placeholder { color:#63757d; }
.file-actions { display:flex; gap:6px; } .file-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:8px; } .file-item { padding:15px 10px;border:1px solid var(--line);background:rgba(255,255,255,.025);text-align:left; } .file-item:hover { border-color:var(--accent); } .file-item strong { display:block;font-size:20px;color:var(--accent-2);margin-bottom:10px; } .file-item span { color:var(--text);font-size:11px; } .file-item small { display:block;color:var(--muted);font:9px "DM Mono";margin-top:5px; }
.calc { max-width:300px;margin:auto; } .calc-display { width:100%;height:65px;background:rgba(0,0,0,.2);border:1px solid var(--line);text-align:right;padding:13px;font:500 27px "DM Mono";margin-bottom:10px;color:var(--accent); } .calc-keys { display:grid;grid-template-columns:repeat(4,1fr);gap:5px; } .calc-keys button { height:45px;background:rgba(255,255,255,.05);border:1px solid var(--line); } .calc-keys button:hover { background:rgba(169,230,208,.14); }.calc-keys .operator { color:var(--accent-2); }
.terminal-output { font:12px/1.7 "DM Mono",monospace;color:#afc3c0;white-space:pre-wrap;min-height:230px; } .terminal-line { display:flex;gap:8px;border-top:1px solid var(--line);padding-top:10px; } .terminal-line span { color:var(--accent);font-family:"DM Mono"; } .terminal-line input { flex:1;background:transparent;border:0;color:var(--text);font:12px "DM Mono"; }
.ai-content { display:flex; flex-direction:column; gap:12px; } .ai-output { flex:1; overflow:auto; font-size:12px; line-height:1.65; } .ai-message { margin:0 0 15px; } .ai-message > span { display:block; color:var(--accent); font:10px "DM Mono"; letter-spacing:.08em; text-transform:uppercase; margin-bottom:4px; } .ai-message p, .ai-markdown p { margin:0 0 9px; } .ai-message h2, .ai-message h3, .ai-message h4 { margin:12px 0 6px; color:var(--text); } .ai-message ul { margin:6px 0 10px; padding-left:20px; } .ai-message blockquote { border-left:2px solid var(--accent-2); margin:9px 0; padding-left:10px; color:var(--muted); } .ai-message code { color:var(--accent-2); background:rgba(0,0,0,.22); padding:2px 4px; font:11px "DM Mono"; } .ai-message pre { overflow:auto; background:rgba(0,0,0,.28); border:1px solid var(--line); padding:10px; } .ai-message pre code { background:transparent; padding:0; color:var(--text); } .ai-message a { color:var(--accent); } .ai-user { border-left:1px solid var(--line-strong); padding-left:10px; } .ai-user > span { color:var(--accent-2); } .ai-pending p { color:var(--muted); font-style:italic; } .ai-thinking { margin:0 0 12px; border:1px solid rgba(241,200,138,.25); background:rgba(241,200,138,.05); } .ai-thinking summary { cursor:pointer; padding:8px 10px; color:var(--accent-2); font:10px "DM Mono"; letter-spacing:.08em; list-style:none; } .ai-thinking summary::-webkit-details-marker { display:none; } .ai-thinking summary:before { content:"+"; margin-right:8px; } .ai-thinking[open] summary:before { content:"−"; } .ai-thinking > div { padding:0 10px 10px; color:var(--muted); border-top:1px solid rgba(241,200,138,.14); } .thinking-orbit { display:inline-block; margin-right:4px; animation:spin 3s linear infinite; }
.browser-bar { display:flex;gap:6px;padding:11px;border-bottom:1px solid var(--line); } .browser-bar input, .settings-select { flex:1;background:rgba(0,0,0,.18);border:1px solid var(--line);padding:9px 11px;color:var(--text);font-size:11px; } .browser-page { padding:25px;min-height:270px;background:linear-gradient(135deg,rgba(169,230,208,.08),transparent); } .browser-page h3 { font-size:27px;letter-spacing:-.06em;margin:10px 0; } .browser-page p { color:var(--muted);line-height:1.7;max-width:360px; }
.settings-list { display:grid;gap:18px; } .setting-row { display:flex;justify-content:space-between;align-items:center;padding-bottom:16px;border-bottom:1px solid var(--line); } .setting-row strong { display:block;font-size:12px; }.setting-row small { color:var(--muted);font-size:10px;display:block;margin-top:4px; } .settings-select { flex:0 0 130px; } .toggle { width:35px;height:20px;border-radius:20px;background:#34454e;padding:3px;text-align:left; }.toggle span { display:block;background:var(--muted);width:14px;height:14px;border-radius:50%;transition:.2s; }.toggle.active { background:var(--accent); }.toggle.active span { transform:translateX(15px);background:#0d1b1b; }
.music-card { text-align:center;padding:25px 10px; }.album-art { width:125px;height:125px;margin:5px auto 20px;display:grid;place-items:center;background:linear-gradient(135deg,#a9e6d0,#334d55 54%,#e8b878);color:#0b1717;font-size:46px; }.music-card h3 { margin:0;font-size:17px; }.music-card p { color:var(--muted);font-size:11px;margin:7px 0 24px; }.player-controls { display:flex;justify-content:center;gap:14px;align-items:center; }.player-controls button { background:transparent;color:var(--muted);font-size:18px; }.player-controls .play { width:42px;height:42px;background:var(--accent);color:#091b1a;border-radius:50%; }
.toast-region { position:fixed;z-index:100;bottom:95px;left:50%;transform:translateX(-50%);display:grid;gap:8px; }.toast { background:var(--panel-solid);border:1px solid var(--line-strong);padding:10px 14px;color:var(--text);font-size:11px;box-shadow:var(--shadow);animation:toast-in .25s both; }
@keyframes spin { to { transform:rotate(360deg); } } @keyframes window-in { from { opacity:0;transform:translateY(8px) scale(.98); } } @keyframes toast-in { from { opacity:0;transform:translateY(10px); } } 
@media (max-width:700px) { .topbar { padding:0 16px; }.topbar-center { display:none; }.desktop-content { padding:50px 22px; }.welcome-block h2 { font-size:42px; }.system-widget { position:relative;right:auto;top:auto;margin-top:40px;width:100%;max-width:290px; }.desktop-icons { margin-top:34px; }.window-layer { inset:64px 0 80px; }.window { left:12px!important;top:16px!important;width:calc(100% - 24px)!important;height:calc(100% - 28px)!important;min-width:0; }.dock { bottom:15px;max-width:calc(100% - 112px);overflow:auto; }.dock-time { right:12px;bottom:91px; }.dock-time small { display:none; } }