/* ════════════════════════════════════════════════════════════ feelingsOS — visual system present day. present time. present feelings. Five generation layers, themed entirely by tokens on : .gen-1 1948 wartime kernel (amber phosphor teletype) .gen-2 1974 the suppression era (beige, closed doors) .gen-3 1995 the therapy patch (teal desktop, grey bevel) .gen-4 2026 present day (Lain-layer: CRT dark + rose) ← default .gen-5 2053 the open heart protocol (luminous glass dawn) ════════════════════════════════════════════════════════════ */ * { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; overflow: hidden; } .hidden { display: none !important; } /* ─── Default tokens (GEN IV values live on body) ─── */ body { --font-ui: "Menlo", "Consolas", "Courier New", monospace; --font-mono: "Menlo", "Consolas", "Courier New", monospace; --bg-desktop: radial-gradient(120% 90% at 50% 10%, #171226 0%, #0a0912 60%, #060510 100%); --wp-opacity: .5; --ink: #e8e3f2; --ink-dim: #8d86a8; --accent: #ff9ecb; /* phosphor rose */ --accent-2: #8fffab; /* signal green */ --accent-3: #7fd8ff; /* carrier cyan */ --panel-bg: rgba(16, 13, 26, .92); --panel-border: rgba(255, 158, 203, .38); --panel-radius: 6px; --panel-shadow: 0 0 22px rgba(224, 90, 143, .18), 0 20px 60px rgba(0, 0, 0, .65); --titlebar-bg: linear-gradient(90deg, rgba(224, 90, 143, .30), rgba(127, 216, 255, .10)); --titlebar-ink: #ffd7e8; --titlebar-border: rgba(255, 158, 203, .3); --bar-bg: rgba(10, 8, 18, .82); --bar-ink: #d9d2ea; --bar-border: rgba(255, 158, 203, .25); --btn-bg: rgba(255, 158, 203, .10); --btn-border: rgba(255, 158, 203, .45); --btn-ink: #ffd7e8; --btn-radius: 4px; --card-bg: rgba(255, 158, 203, .06); --card-border: rgba(255, 158, 203, .22); --term-bg: rgba(9, 7, 16, .96); --term-fg: #cfe8d4; --term-dim: #767093; --term-accent: #f2a7cd; --term-err: #ff8fa3; --term-ok: #8fd0ff; --term-warn: #ffd479; --icon-ink: #efe9fb; --icon-shadow: 0 1px 6px rgba(0, 0, 0, .9); --mood-color: #9d8cff; --mood-blend: screen; --mood-opacity: .26; --scanline-opacity: .5; font-family: var(--font-ui); color: var(--ink); background: #060510; } /* ─── GEN I — 1948 wartime kernel ─── */ body.gen-1 { --font-ui: "Courier New", monospace; --bg-desktop: #050300; --wp-opacity: 0; --ink: #ffb000; --ink-dim: #8a6200; --accent: #ffb000; --accent-2: #ffd25e; --accent-3: #ffb000; --panel-bg: rgba(8, 5, 0, .97); --panel-border: #b97f00; --panel-radius: 0px; --panel-shadow: 0 0 18px rgba(255, 176, 0, .12); --titlebar-bg: #170e00; --titlebar-ink: #ffb000; --titlebar-border: #b97f00; --bar-bg: rgba(10, 6, 0, .92); --bar-ink: #ffb000; --bar-border: #7a5500; --btn-bg: transparent; --btn-border: #b97f00; --btn-ink: #ffb000; --btn-radius: 0px; --card-bg: rgba(255, 176, 0, .05); --card-border: #6b4a00; --term-bg: #050300; --term-fg: #ffb000; --term-dim: #8a6200; --term-accent: #ffd25e; --term-err: #ff7b39; --term-ok: #ffd25e; --term-warn: #ffd25e; --icon-ink: #ffb000; --icon-shadow: none; --mood-blend: screen; --mood-opacity: .10; --scanline-opacity: .65; } body.gen-1 .menubar, body.gen-1 .taskbar, body.gen-1 .titlebar, body.gen-1 .icon-label, body.gen-1 button.os-btn { text-transform: uppercase; letter-spacing: .06em; } body.gen-1 .icon-glyph, body.gen-1 .up-icon, body.gen-1 .dialog-icon, body.gen-1 .ex-file-glyph { filter: grayscale(1) sepia(1) saturate(4) hue-rotate(-12deg) brightness(1.05); } /* ─── GEN II — 1974 the suppression era ─── */ body.gen-2 { --font-ui: "Courier New", monospace; --bg-desktop: linear-gradient(180deg, #6d6350, #57503f); --wp-opacity: 0; --ink: #2f2a20; --ink-dim: #6d6350; --accent: #8a5a2b; --accent-2: #57683c; --accent-3: #8a5a2b; --panel-bg: #d8cdb6; --panel-border: #7a7059; --panel-radius: 2px; --panel-shadow: 0 10px 28px rgba(0, 0, 0, .45); --titlebar-bg: #6b6250; --titlebar-ink: #f2ecdc; --titlebar-border: #4f4839; --bar-bg: rgba(216, 205, 182, .95); --bar-ink: #2f2a20; --bar-border: #7a7059; --btn-bg: #cfc4ab; --btn-border: #7a7059; --btn-ink: #2f2a20; --btn-radius: 2px; --card-bg: #e3dac6; --card-border: #a89c80; --term-bg: #1d1a10; --term-fg: #b6c78e; --term-dim: #6f7a55; --term-accent: #d9c98a; --term-err: #d98a6a; --term-ok: #b6c78e; --term-warn: #d9c98a; --icon-ink: #f2ecdc; --icon-shadow: 0 1px 2px rgba(0,0,0,.5); --mood-blend: soft-light; --mood-opacity: .35; --scanline-opacity: 0; } /* ─── GEN III — 1995 the therapy patch ─── */ body.gen-3 { --font-ui: Tahoma, "MS Sans Serif", Verdana, sans-serif; --bg-desktop: #0f7a76; --wp-opacity: 0; --ink: #111; --ink-dim: #555; --accent: #000080; --accent-2: #008080; --accent-3: #000080; --panel-bg: #c0c0c0; --panel-border: #404040; --panel-radius: 0px; --panel-shadow: 3px 3px 0 rgba(0, 0, 0, .35); --titlebar-bg: linear-gradient(90deg, #000080, #1084d0); --titlebar-ink: #fff; --titlebar-border: #404040; --bar-bg: #c0c0c0; --bar-ink: #111; --bar-border: #808080; --btn-bg: #c0c0c0; --btn-border: #808080; --btn-ink: #111; --btn-radius: 0px; --card-bg: #d4d0c8; --card-border: #808080; --term-bg: #000; --term-fg: #c0c0c0; --term-dim: #6f6f6f; --term-accent: #ffff55; --term-err: #ff5555; --term-ok: #55ffff; --term-warn: #ffff55; --icon-ink: #fff; --icon-shadow: 1px 1px 0 rgba(0,0,0,.8); --mood-blend: soft-light; --mood-opacity: .3; --scanline-opacity: 0; } body.gen-3 button.os-btn { border: 2px outset #fff; box-shadow: none; } body.gen-3 button.os-btn:active { border-style: inset; } body.gen-3 .window { border: 2px outset #fff; } body.gen-3 .titlebar { font-weight: bold; } /* ─── GEN V — 2053 the open heart protocol ─── */ body.gen-5 { --font-ui: -apple-system, "SF Pro Text", "Segoe UI", system-ui, sans-serif; --bg-desktop: linear-gradient(180deg, #ffeef2 0%, #e8f4f1 60%, #fdf3e7 100%); --wp-opacity: .8; --ink: #45405e; --ink-dim: #8d87a8; --accent: #e26aa5; --accent-2: #4fb89a; --accent-3: #6aa5e2; --panel-bg: rgba(255, 255, 255, .74); --panel-border: rgba(255, 255, 255, .95); --panel-radius: 18px; --panel-shadow: 0 24px 70px rgba(120, 90, 140, .28); --titlebar-bg: rgba(255, 255, 255, .35); --titlebar-ink: #45405e; --titlebar-border: rgba(120, 90, 140, .15); --bar-bg: rgba(255, 255, 255, .6); --bar-ink: #45405e; --bar-border: rgba(120, 90, 140, .18); --btn-bg: rgba(226, 106, 165, .10); --btn-border: rgba(226, 106, 165, .45); --btn-ink: #b0407a; --btn-radius: 999px; --card-bg: rgba(255, 255, 255, .55); --card-border: rgba(120, 90, 140, .18); --term-bg: rgba(255, 253, 248, .92); --term-fg: #4a4536; --term-dim: #9a927e; --term-accent: #b0407a; --term-err: #c85a5a; --term-ok: #3f8f77; --term-warn: #b08a3f; --icon-ink: #45405e; --icon-shadow: 0 1px 2px rgba(255,255,255,.8); --mood-blend: soft-light; --mood-opacity: .4; --scanline-opacity: 0; } body.gen-5 .window .window-body, body.gen-5 .dropdown, body.gen-5 #mood-picker { backdrop-filter: blur(18px); } /* ════════════════════════════════════════════════════════════ */ /* ─── Boot ─── */ .boot { position: fixed; inset: 0; background: #060510; color: #b8e7c2; font-family: var(--font-mono); font-size: 13.5px; padding: 42px; z-index: 1000; cursor: pointer; } .boot pre { white-space: pre-wrap; line-height: 1.55; text-shadow: 0 0 6px rgba(143, 255, 171, .35); } .boot-hint { margin-top: 26px; color: #ff9ecb; letter-spacing: .18em; text-shadow: 0 0 10px rgba(255, 158, 203, .6); animation: blink 1.2s step-end infinite; } @keyframes blink { 50% { opacity: 0; } } /* ─── BSOD ─── */ .bsod { position: fixed; inset: 0; background: #29457f; color: #fff; z-index: 2000; display: flex; align-items: center; cursor: pointer; font-family: var(--font-ui); overflow-y: auto; } .bsod-inner { max-width: 660px; margin: auto; padding: 24px; line-height: 1.65; } .bsod-face { font-size: 96px; margin-bottom: 24px; } .bsod-progress { margin: 16px 0; font-size: 20px; } .bsod-code { font-family: var(--font-mono); font-size: 13px; opacity: .85; } .bsod-hint { margin-top: 20px; font-size: 13.5px; } /* ─── Desktop & wallpaper ─── */ .desktop { position: fixed; inset: 0; background: var(--bg-desktop); overflow: hidden; transition: background .6s; } #wallpaper { position: absolute; inset: 0; pointer-events: none; } #wallpaper img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .8s; display: none; } body.gen-4 #wp4 { display: block; opacity: var(--wp-opacity); } body.gen-5 #wp5 { display: block; opacity: var(--wp-opacity); } /* ─── Brand glitch wordmark ─── */ .brand { position: relative; display: inline-block; font-weight: bold; letter-spacing: .04em; } body.gen-4 .brand { color: var(--accent); text-shadow: 0 0 8px rgba(255, 158, 203, .55); } body.gen-4 .brand::before, body.gen-4 .brand::after { content: attr(data-text); position: absolute; left: 0; top: 0; width: 100%; overflow: hidden; opacity: 0; pointer-events: none; } body.gen-4 .brand::before { color: var(--accent-2); animation: glitch-a 7s infinite; } body.gen-4 .brand::after { color: var(--accent-3); animation: glitch-b 7s infinite; } @keyframes glitch-a { 0%, 93%, 100% { opacity: 0; transform: none; clip-path: none; } 94% { opacity: .9; transform: translate(-2px, -1px); clip-path: inset(0 0 55% 0); } 95% { opacity: .9; transform: translate(2px, 1px); clip-path: inset(60% 0 0 0); } 96% { opacity: 0; } } @keyframes glitch-b { 0%, 94%, 100% { opacity: 0; transform: none; clip-path: none; } 95% { opacity: .8; transform: translate(2px, 1px); clip-path: inset(40% 0 30% 0); } 96% { opacity: .8; transform: translate(-2px, 0); clip-path: inset(0 0 70% 0); } 97% { opacity: 0; } } /* ─── Menu bar ─── */ .menubar { position: absolute; top: 0; left: 0; right: 0; height: 30px; background: var(--bar-bg); backdrop-filter: blur(8px); display: flex; justify-content: space-between; align-items: center; padding: 0 12px; font-size: 12.5px; z-index: 500; color: var(--bar-ink); border-bottom: 1px solid var(--bar-border); } .menubar-left, .menubar-right { display: flex; gap: 2px; align-items: center; } .menu-item { padding: 4px 10px; border-radius: var(--btn-radius); cursor: pointer; user-select: none; } .menu-item:hover { background: var(--accent); color: var(--panel-bg); } .menu-status { padding: 3px 8px; font-size: 11.5px; user-select: none; cursor: pointer; white-space: nowrap; } #clock { font-variant-numeric: tabular-nums; } .gen-chip { border: 1px solid var(--btn-border); border-radius: var(--btn-radius); color: var(--accent); letter-spacing: .1em; font-weight: bold; } .gen-chip:hover { background: var(--btn-bg); } .dropdown { position: absolute; top: 32px; left: 8px; z-index: 900; background: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: var(--panel-radius); box-shadow: var(--panel-shadow); padding: 5px; min-width: 210px; font-size: 12.5px; color: var(--ink); } .dropdown-item { padding: 6px 12px; border-radius: var(--btn-radius); cursor: pointer; user-select: none; } .dropdown-item:hover { background: var(--accent); color: var(--panel-bg); } .dropdown-sep { height: 1px; background: var(--card-border); margin: 4px 8px; } /* ─── Icons ─── */ .icons { position: absolute; top: 46px; right: 16px; bottom: 56px; display: flex; flex-direction: column; flex-wrap: wrap-reverse; gap: 10px; align-content: flex-end; z-index: 10; } .icon { width: 86px; text-align: center; cursor: pointer; user-select: none; padding: 7px 2px; border-radius: 8px; } .icon:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); } .icon-glyph { font-size: 34px; line-height: 1.2; filter: drop-shadow(0 2px 4px rgba(0,0,0,.4)); } .icon-label { font-size: 10.5px; color: var(--icon-ink); margin-top: 4px; line-height: 1.3; text-shadow: var(--icon-shadow); } /* ─── Windows ─── */ /* #windows is its own stacking context so per-window z-indexes can grow forever without ever climbing above the menubar/taskbar/overlays */ #windows { position: absolute; inset: 0; z-index: 100; pointer-events: none; } .window { pointer-events: auto; } .window { position: absolute; min-width: 280px; background: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: var(--panel-radius); box-shadow: var(--panel-shadow); display: flex; flex-direction: column; overflow: hidden; z-index: 100; color: var(--ink); } .window.focused { border-color: var(--accent); } .titlebar { height: 30px; background: var(--titlebar-bg); color: var(--titlebar-ink); display: flex; align-items: center; padding: 0 8px; gap: 8px; cursor: grab; user-select: none; font-size: 12px; letter-spacing: .05em; border-bottom: 1px solid var(--titlebar-border); flex: 0 0 auto; touch-action: none; /* touch drags move the window, not the page */ } .window:not(.focused) .titlebar { opacity: .7; } .titlebar:active { cursor: grabbing; } .tb-buttons { display: flex; gap: 6px; } .tb-btn { width: 15px; height: 15px; border-radius: 50%; border: 1px solid var(--btn-border); background: var(--btn-bg); cursor: pointer; font-size: 10px; line-height: 13px; text-align: center; color: var(--titlebar-ink); } .tb-btn:hover { background: var(--accent); color: var(--panel-bg); } body.gen-1 .tb-btn, body.gen-3 .tb-btn { border-radius: 0; } .tb-title { flex: 1; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tb-spacer { width: 36px; } .window-body { flex: 1 1 auto; overflow: auto; position: relative; font-size: 13px; } /* ─── Terminal ─── */ .terminal { background: var(--term-bg); color: var(--term-fg); font-family: var(--font-mono); font-size: 12.5px; line-height: 1.5; padding: 10px; height: 100%; overflow-y: auto; cursor: text; } body.gen-4 .terminal { text-shadow: 0 0 5px color-mix(in srgb, var(--term-fg) 40%, transparent); } .terminal .t-line { white-space: pre-wrap; word-break: break-word; } .terminal .t-dim { color: var(--term-dim); } .terminal .t-warn { color: var(--term-warn); } .terminal .t-err { color: var(--term-err); } .terminal .t-ok { color: var(--term-ok); } .t-input-row { display: flex; } .t-prompt { color: var(--term-accent); white-space: pre; } .t-input { flex: 1; background: transparent; border: none; outline: none; color: var(--term-fg); font: inherit; caret-color: var(--term-accent); } /* ─── Monitor ─── */ .monitor { padding: 10px; font-size: 12px; } .monitor table { width: 100%; border-collapse: collapse; } .monitor th { text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-dim); border-bottom: 1px solid var(--card-border); padding: 4px 6px; } .monitor td { padding: 5px 6px; border-bottom: 1px solid color-mix(in srgb, var(--card-border) 50%, transparent); font-variant-numeric: tabular-nums; } .monitor tr { cursor: pointer; } .monitor tr.selected td { background: var(--accent); color: var(--panel-bg); } .monitor .cpu-hot { color: var(--term-err); font-weight: bold; } .monitor-actions { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; } .monitor-note { margin-top: 8px; font-size: 11px; color: var(--ink-dim); font-style: italic; } /* ─── Explorer ─── */ .explorer { display: flex; height: 100%; font-size: 12.5px; } .ex-side { width: 156px; background: var(--card-bg); border-right: 1px solid var(--card-border); padding: 10px 6px; flex: 0 0 auto; } .ex-side-item { padding: 5px 10px; border-radius: var(--btn-radius); cursor: pointer; user-select: none; white-space: nowrap; } .ex-side-item:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); } .ex-side-item.active { background: var(--accent); color: var(--panel-bg); } .ex-main { flex: 1; display: flex; flex-direction: column; min-width: 0; } .ex-toolbar { padding: 6px 10px; border-bottom: 1px solid var(--card-border); display: flex; align-items: center; gap: 10px; font-size: 11.5px; background: var(--card-bg); flex: 0 0 auto; } .ex-path { font-family: var(--font-mono); color: var(--ink-dim); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ex-files { flex: 1; overflow-y: auto; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px; padding: 12px; } .ex-file { width: 94px; text-align: center; padding: 8px 4px; border-radius: var(--btn-radius); cursor: pointer; user-select: none; } .ex-file:hover { background: color-mix(in srgb, var(--accent) 15%, transparent); } .ex-file-glyph { font-size: 28px; } .ex-file-name { font-size: 10.5px; margin-top: 4px; word-break: break-all; line-height: 1.3; } .ex-file.dotfile { opacity: .58; } .ex-file.dotfile .ex-file-name { font-style: italic; } .ex-status { padding: 5px 10px; border-top: 1px solid var(--card-border); font-size: 11px; color: var(--ink-dim); background: var(--card-bg); flex: 0 0 auto; } .ex-status a { color: var(--accent); } /* ─── Viewer / dialogs ─── */ .viewer { padding: 14px; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.6; white-space: pre-wrap; } .dialog { padding: 16px; display: flex; gap: 14px; align-items: flex-start; } .dialog-icon { font-size: 34px; flex: 0 0 auto; } .dialog-text { font-size: 12.5px; line-height: 1.55; } .dialog-buttons { display: flex; gap: 8px; justify-content: flex-end; padding: 0 16px 14px; flex-wrap: wrap; } button.os-btn { font-family: var(--font-ui); font-size: 11.5px; padding: 6px 14px; border-radius: var(--btn-radius); border: 1px solid var(--btn-border); background: var(--btn-bg); color: var(--btn-ink); cursor: pointer; } button.os-btn:hover { background: var(--accent); color: var(--panel-bg); border-color: var(--accent); } button.os-btn.primary { background: var(--accent); color: var(--panel-bg); border-color: var(--accent); } button.os-btn.primary:hover { filter: brightness(1.12); } /* ─── Settings (multi-pane control panel) ─── */ .settings-app { display: flex; height: 100%; font-size: 12.5px; } .st-side { width: 158px; background: var(--card-bg); border-right: 1px solid var(--card-border); padding: 10px 6px; flex: 0 0 auto; } .st-item { padding: 6px 10px; border-radius: var(--btn-radius); cursor: pointer; user-select: none; white-space: nowrap; margin-bottom: 2px; } .st-item:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); } .st-item.active { background: var(--accent); color: var(--panel-bg); } .st-main { flex: 1; overflow-y: auto; min-width: 0; } .st-hint { font-size: 10.5px; color: var(--ink-dim); line-height: 1.5; margin: 2px 0 6px; } .swatches { display: flex; gap: 8px; margin: 8px 0 4px; } .swatch { width: 24px; height: 24px; border-radius: 50%; cursor: pointer; border: 2px solid var(--card-border); color: var(--ink-dim); display: flex; align-items: center; justify-content: center; font-size: 11px; background: var(--card-bg); } .swatch:hover { transform: scale(1.12); } .swatch.active { border-color: var(--ink); box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 60%, transparent); } .settings select { font-family: var(--font-ui); font-size: 11.5px; padding: 4px 8px; background: var(--btn-bg); color: var(--btn-ink); border: 1px solid var(--btn-border); border-radius: var(--btn-radius); } .settings { padding: 14px 16px; font-size: 12.5px; } .settings h3 { font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--accent); margin: 16px 0 6px; } .settings h3:first-child { margin-top: 0; } .setting-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; gap: 12px; } .setting-label small { display: block; color: var(--ink-dim); font-size: 10.5px; margin-top: 2px; } .toggle { position: relative; width: 40px; height: 22px; flex: 0 0 auto; cursor: pointer; } .toggle input { opacity: 0; width: 0; height: 0; } .toggle .knob { position: absolute; inset: 0; background: var(--ink-dim); border-radius: 11px; transition: .2s; } .toggle .knob::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; background: #fff; border-radius: 50%; transition: .2s; box-shadow: 0 1px 3px rgba(0,0,0,.4); } .toggle input:checked + .knob { background: var(--accent); } .toggle input:checked + .knob::after { transform: translateX(18px); } input[type=range] { accent-color: var(--accent); width: 140px; } .sysinfo { font-family: var(--font-mono); font-size: 11px; line-height: 1.65; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--panel-radius); padding: 10px 12px; } /* ─── Journal ─── */ .journal { width: 100%; height: 100%; border: none; outline: none; resize: none; padding: 14px; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.65; background: transparent; color: var(--ink); } /* ─── Update Center & Sharing ─── */ .updates, .sharing { padding: 12px 14px; font-size: 12.5px; } .up-header { padding: 10px 12px; margin-bottom: 10px; line-height: 1.5; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--panel-radius); } .up-sub { color: var(--ink-dim); font-size: 11px; } .update-card, .share-card { display: flex; gap: 12px; padding: 11px 12px; margin-bottom: 9px; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--panel-radius); line-height: 1.45; } .up-icon { font-size: 26px; flex: 0 0 auto; } .up-body { flex: 1; min-width: 0; } .up-title { font-weight: bold; font-size: 12.5px; } .up-meta { color: var(--accent); font-size: 10.5px; margin: 3px 0; letter-spacing: .03em; } .up-desc { color: var(--ink-dim); font-size: 11.5px; margin-bottom: 6px; } .up-actions { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; } .up-footer { margin-top: 12px; font-size: 11px; color: var(--ink-dim); font-style: italic; text-align: center; line-height: 1.5; } .updatebar { height: 12px; border: 1px solid var(--btn-border); border-radius: 999px; overflow: hidden; background: transparent; margin: 8px 0 4px; } .updatebar > div { height: 100%; width: 2%; background: linear-gradient(90deg, var(--accent-3), var(--accent)); transition: width 1s; } .sh-h { font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em; color: var(--accent); margin: 14px 0 7px; } .sh-perm { display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; margin-top: 4px; } .sh-perm label { display: flex; align-items: center; gap: 6px; cursor: pointer; } .fw-table { width: 100%; border-collapse: collapse; font-size: 11.5px; } .fw-table th { text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-dim); border-bottom: 1px solid var(--card-border); padding: 4px 8px; } .fw-table td { padding: 5px 8px; border-bottom: 1px solid color-mix(in srgb, var(--card-border) 50%, transparent); } .fw-table td:last-child { font-family: var(--font-mono); color: var(--accent); font-size: 11px; } /* ─── Taskbar ─── */ .taskbar { position: absolute; left: 0; right: 0; bottom: 0; height: 40px; background: var(--bar-bg); backdrop-filter: blur(8px); border-top: 1px solid var(--bar-border); color: var(--bar-ink); display: flex; align-items: center; gap: 8px; padding: 0 10px; z-index: 500; } .taskbar-start { font-weight: bold; font-size: 12.5px; padding: 6px 14px; border-radius: var(--btn-radius); background: var(--accent); color: var(--panel-bg); cursor: pointer; user-select: none; } .taskbar-start:hover { filter: brightness(1.1); } .taskbar-windows { flex: 1; display: flex; gap: 6px; overflow-x: auto; } .tb-task { font-size: 11px; padding: 5px 12px; border-radius: var(--btn-radius); white-space: nowrap; background: var(--btn-bg); border: 1px solid var(--btn-border); color: var(--bar-ink); cursor: pointer; user-select: none; max-width: 180px; overflow: hidden; text-overflow: ellipsis; } .tb-task.active { background: var(--accent); color: var(--panel-bg); } .taskbar-tray { font-size: 10.5px; color: var(--ink-dim); user-select: none; white-space: nowrap; } /* ─── Toasts ─── */ #toasts { position: absolute; right: 14px; bottom: 52px; display: flex; flex-direction: column; gap: 8px; z-index: 800; } .toast { background: var(--panel-bg); border: 1px solid var(--panel-border); border-left: 3px solid var(--accent); border-radius: var(--panel-radius); box-shadow: var(--panel-shadow); padding: 10px 14px; color: var(--ink); font-size: 11.5px; max-width: 290px; line-height: 1.5; cursor: pointer; animation: toast-in .3s ease-out; } .toast b { display: block; margin-bottom: 2px; color: var(--accent); } @keyframes toast-in { from { transform: translateX(30px); opacity: 0; } } /* ─── Mood orb & tint ─── */ #mood-orb { position: absolute; left: 14px; bottom: 52px; z-index: 850; display: flex; align-items: center; gap: 9px; cursor: pointer; user-select: none; } .orb-ring { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--mood-color); box-shadow: 0 0 16px var(--mood-color), inset 0 0 10px color-mix(in srgb, var(--mood-color) 55%, transparent); display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--mood-color) 12%, transparent); } .orb-core { width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, var(--mood-color) 70%); animation: orb-pulse 3.2s ease-in-out infinite; } @keyframes orb-pulse { 50% { transform: scale(1.35); opacity: .8; } } .orb-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; color: var(--icon-ink); text-shadow: var(--icon-shadow); text-transform: lowercase; } #mood-tint { position: fixed; inset: 0; pointer-events: none; z-index: 950; background: radial-gradient(90% 70% at 72% 24%, color-mix(in srgb, var(--mood-color) 55%, transparent), transparent 70%), radial-gradient(70% 60% at 20% 85%, color-mix(in srgb, var(--mood-color) 30%, transparent), transparent 75%); mix-blend-mode: var(--mood-blend); opacity: var(--mood-opacity); transition: opacity 1.2s; } #mood-picker { position: absolute; left: 14px; bottom: 108px; z-index: 860; width: 300px; background: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: var(--panel-radius); box-shadow: var(--panel-shadow); padding: 12px; color: var(--ink); } .mp-title { font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: var(--accent); } .mp-sub { font-size: 10.5px; color: var(--ink-dim); margin: 4px 0 10px; line-height: 1.45; } .mp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .mp-mood { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border: 1px solid var(--card-border); border-radius: var(--btn-radius); cursor: pointer; user-select: none; font-size: 11.5px; } .mp-mood:hover { border-color: var(--accent); background: var(--card-bg); } .mp-mood.active { border-color: var(--accent); box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 50%, transparent); } .mp-foot { margin-top: 10px; font-size: 9.5px; color: var(--ink-dim); font-style: italic; } /* ─── Generation panel ─── */ #gen-panel { position: fixed; inset: 0; z-index: 1200; background: rgba(4, 3, 10, .6); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; } .gen-inner { position: relative; width: min(600px, calc(100vw - 32px)); max-height: calc(100vh - 24px); overflow-y: auto; background: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: var(--panel-radius); box-shadow: var(--panel-shadow); padding: 26px 30px; color: var(--ink); } .gen-close { position: absolute; top: 10px; right: 14px; font-size: 20px; cursor: pointer; color: var(--ink-dim); padding: 2px 8px; } .gen-close:hover { color: var(--accent); } .gen-title { font-size: 17px; letter-spacing: .34em; color: var(--accent); text-align: center; } body.gen-4 .gen-title { text-shadow: 0 0 12px color-mix(in srgb, var(--accent) 60%, transparent); } .gen-sub { font-size: 11px; color: var(--ink-dim); text-align: center; margin: 8px 0 22px; } #gen-range { width: 100%; } .gen-ticks { display: flex; justify-content: space-between; padding: 4px 4px 0; } .gen-ticks span { font-size: 12px; color: var(--ink-dim); letter-spacing: .1em; cursor: pointer; padding: 2px 8px; } .gen-ticks span.active { color: var(--accent); font-weight: bold; } .gen-card { margin-top: 18px; padding: 14px 16px; line-height: 1.6; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--panel-radius); min-height: 150px; } .gen-era { font-family: var(--font-mono); font-size: 11px; color: var(--accent-2); letter-spacing: .2em; } .gen-name { font-size: 15px; font-weight: bold; margin: 4px 0 8px; } .gen-desc { font-size: 12.5px; } .gen-inherit { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-dim); margin-top: 10px; line-height: 1.55; } .gen-foot { margin-top: 16px; font-size: 10.5px; color: var(--ink-dim); font-style: italic; text-align: center; line-height: 1.6; } /* ─── Sleep ─── */ .sleep-overlay { position: fixed; inset: 0; background: #060510; z-index: 1500; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; color: #8d86a8; } .sleep-z { font-size: 80px; animation: floaty 3s ease-in-out infinite; } .sleep-text { margin-top: 16px; font-size: 13px; } @keyframes floaty { 50% { transform: translateY(-14px); } } /* ─── CRT overlay & glitch burst ─── */ #crt { position: fixed; inset: 0; pointer-events: none; z-index: 3000; opacity: var(--scanline-opacity); background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .22) 0px, rgba(0, 0, 0, .22) 1px, transparent 1px, transparent 3px), radial-gradient(130% 100% at 50% 50%, transparent 55%, rgba(0, 0, 0, .38) 100%); animation: crt-flicker 6s infinite; } @keyframes crt-flicker { 0%, 100% { opacity: var(--scanline-opacity); } 47% { opacity: var(--scanline-opacity); } 48% { opacity: calc(var(--scanline-opacity) * .78); } 49% { opacity: var(--scanline-opacity); } } #glitch-burst { position: fixed; inset: 0; pointer-events: none; z-index: 3500; background: repeating-linear-gradient(0deg, rgba(255, 158, 203, .16) 0 3px, transparent 3px 9px, rgba(127, 216, 255, .14) 9px 11px, transparent 11px 23px), repeating-linear-gradient(90deg, rgba(143, 255, 171, .07) 0 2px, transparent 2px 17px); animation: burst .5s steps(6) forwards; } @keyframes burst { 0% { opacity: 1; transform: translateX(0); } 33% { opacity: .8; transform: translateX(-6px); } 66% { opacity: .5; transform: translateX(5px); } 100% { opacity: 0; transform: none; } } /* ─── Small screens ─── */ @media (max-width: 830px) { /* the clock outranks the app menu when the menubar gets tight */ .menubar-left .menu-item:not(.menu-logo) { display: none; } } @media (max-width: 700px) { .icons { right: 6px; gap: 6px; } .icon { width: 70px; } .icon-glyph { font-size: 28px; } .window { max-width: calc(100vw - 10px); } .menubar-left .menu-item:not(.menu-logo) { display: none; } .orb-label { display: none; } }