/* GENERATED by sara/gui/build.py from assets.json -- do not edit. */ /* ==== style/core/fonts.css ==== */ /* ========================================================================== fonts.css -- Instrument Sans, bundled locally (fonts/*.woff2, SIL Open Font License) so the UI looks the same offline. Latin subset; Devanagari / other scripts fall back to the system font exactly as before. ========================================================================== */ @font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/instrument-sans-latin-400-normal.woff2') format('woff2');} @font-face{font-family:'Instrument Sans';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/instrument-sans-latin-500-normal.woff2') format('woff2');} @font-face{font-family:'Instrument Sans';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/instrument-sans-latin-600-normal.woff2') format('woff2');} /* ==== style/core/tokens.css ==== */ /* ========================================================================== tokens.css -- ALL colours live here. Loaded FIRST; every other style/*.css reads these variables. RETHEME = change (or add) a block below. Rules: * colours that need transparency are stored as space-separated RGB triplets (--core-rgb: 63 216 196) and used as rgb(var(--core-rgb) / .35) -- never hardcode rgba(63,216,196,.35) in another file. * --core / --think / --speak are derived from those triplets, so they always match. * a theme = one :root[data-theme="name"] block (js/theme.js sets data-theme + the accent-hue override). Themes: sara = Terrarium (default) | paper | arctic = Sky | emerald = Mint | rose = Blush | violet = Lilac (all light) | slate = Midnight | ember | aurora (all dark; Cyber Blue was removed, it was too close to Midnight). Ids are kept stable so saved prefs keep loading. ========================================================================== */ /* ---- shared, theme-independent tokens ---- */ :root{ --font:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif; --shine-rgb:255 255 255; /* white sheen used by spotlights / shimmers in every theme */ /* semantic status colours -- theme-independent on purpose; the accent-hue slider never touches these (--danger is per theme, below) */ --success:#5FCB8A; --success-rgb:95 203 138; --warning:#E8B64A; --warning-rgb:232 182 74; --info:#6CB6F0; --info-rgb:108 182 240; --ease-premium: cubic-bezier(.22,1,.36,1); --ease-spring: cubic-bezier(.34,1.56,.64,1); --dur-fast: .16s; --dur-med: .28s; --dur-slow: .45s; /* Redesign spec section 4.2 / 4.4: spacing scale, radii and type roles (font shorthands: use as font: var(--t-title)) */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-7:32px; --sp-8:40px; --r-ctl:12px; --r-sm:16px; --r-card:20px; --r-hero:24px; --r-pill:999px; --t-display:500 56px/1 var(--font); --t-title:600 24px/1.2 var(--font); --t-section:600 15px/1.3 var(--font); --t-body:400 14px/1.55 var(--font); --t-label:500 14px/1.3 var(--font); --t-helper:400 12px/1.4 var(--font); --t-caption:500 11px/1.3 var(--font); --t-stat:600 22px/1.1 var(--font); --glass-blur: 24px; /* iOS-style frosted glass (components.css adds saturate) */ } /* ---- derived tokens (recomputed automatically per theme, incl. the accent-hue override) ---- */ :root, :root[data-theme], [data-theme-preview]{ --core:rgb(var(--core-rgb)); /* theme-wide background wash: three soft accent blobs. --mesh-k scales it per theme (light themes / vivid dark themes use more) */ --bg-mesh: radial-gradient(55% 45% at 10% 6%, rgb(var(--core-rgb) / calc(.20 * var(--mesh-k,1))), transparent 70%), radial-gradient(50% 45% at 94% 94%, rgb(var(--think-rgb) / calc(.18 * var(--mesh-k,1))), transparent 72%), radial-gradient(35% 30% at 88% 8%, rgb(var(--speak-rgb) / calc(.10 * var(--mesh-k,1))), transparent 70%); --think:rgb(var(--think-rgb)); --speak:rgb(var(--speak-rgb)); --core-hover:color-mix(in srgb,var(--core) 82%,white); --glass-bg:rgb(var(--panel-rgb) / .72); --glass-border:rgb(var(--fg-rgb) / .08); --glow:rgb(var(--core-rgb) / .22); --focus-ring:rgb(var(--core-rgb) / .55); /* one focus ring for every control (components.css) */ --card-hairline:linear-gradient(90deg,transparent,rgb(var(--core-rgb) / .45),transparent); /* the 1px accent line on top of cards */ --scrim:rgb(var(--void-rgb,4 8 8) / .72); /* skill cards (js/skill_cards.js reads these) follow the theme */ --sara-card-bg:var(--panel-2); --sara-text:var(--text); --sara-accent:var(--core); } /* ---- 1. SARA / Terrarium (default dark) ---- */ /* every theme block also matches [data-theme-preview="id"] so the Settings theme cards can show a real mini-UI of any theme */ :root, [data-theme-preview="sara"]{ --mesh-k:1.3; --void:#080C0D; --deep:#0E1D1C; --panel:#101917; --panel-rgb:16 25 23; --panel-2:#152321; --line:#1D2C29; --core-rgb:63 216 196; --think-rgb:139 111 216; --speak-rgb:232 192 143; --text:#CBD8D6; --text-soft:#8FA09D; --muted:#7A8B88; --faint:#4B5957; --danger:#D97A6B; --danger-rgb:217 122 107; --on-core:#08110F; --fg-rgb:255 255 255; color-scheme:dark; --void-rgb:8 12 13; --vignette:rgba(0,0,0,.5); --shadow-rest: 0 1px 2px rgba(0,0,0,.22), 0 8px 20px -12px rgba(0,0,0,.45); --shadow-hover: 0 2px 4px rgba(0,0,0,.24), 0 14px 32px -14px rgba(0,0,0,.55), 0 0 26px -6px var(--glow); --shadow-hover-flat: 0 2px 4px rgba(0,0,0,.24), 0 14px 32px -14px rgba(0,0,0,.55); /* the same without the accent glow: used outside the High tier (style/fx/quality.css) */ } /* ---- EMBER (warm dark): charcoal-brown base, molten orange + hot pink + gold ---- */ :root[data-theme="ember"], [data-theme-preview="ember"]{ --void:#0E0605; --deep:#2B130B; --panel:#1D0F0B; --panel-rgb:29 15 11; --panel-2:#2B1811; --line:#47281C; --core-rgb:255 138 61; --think-rgb:255 69 112; --speak-rgb:255 207 90; --text:#F6E7DD; --text-soft:#C4A898; --muted:#9C8274; --faint:#62493D; --danger:#FF3B30; --danger-rgb:255 59 48; --on-core:#1F0C03; --fg-rgb:255 255 255; color-scheme:dark; --mesh-k:1.5; --void-rgb:14 6 5; --vignette:rgba(0,0,0,.5); } /* ---- 3. VIOLET ---- */ /* ---- LILAC (light, iOS indigo): airy lavender-white, indigo + orchid + coral ---- */ :root[data-theme="violet"], [data-theme-preview="violet"]{ --void:#EFEDFC; --deep:#F9F8FF; --panel:#FFFFFF; --panel-rgb:255 255 255; --panel-2:#F5F3FE; --line:#D9D4F0; --core-rgb:94 92 230; --think-rgb:191 90 242; --speak-rgb:255 107 157; --text:#1A1633; --text-soft:#46406B; --muted:#666090; --faint:#A9A4C8; --danger:#E3291D; --danger-rgb:227 41 29; --on-core:#FFFFFF; --fg-rgb:26 22 51; color-scheme:light; --mesh-k:1.15; --void-rgb:239 237 252; --vignette:rgba(94,92,230,.07); } /* ---- MIDNIGHT (iOS dark): true-black base, iOS system blue + purple + orange ---- */ :root[data-theme="slate"], [data-theme-preview="slate"]{ --void:#050509; --deep:#10131F; --panel:#1C1C1E; --panel-rgb:28 28 30; --panel-2:#2C2C2E; --line:#3A3A3C; --core-rgb:10 132 255; --think-rgb:191 90 242; --speak-rgb:255 159 10; --text:#F5F5F7; --text-soft:#B0B0B6; --muted:#939397; --faint:#545458; --danger:#FF453A; --danger-rgb:255 69 58; --on-core:#04122B; --fg-rgb:255 255 255; color-scheme:dark; --mesh-k:.9; --void-rgb:5 5 9; --vignette:rgba(0,0,0,.5); } /* ---- BLUSH (light): petal-white base, rose-magenta + orchid + amber ---- */ :root[data-theme="rose"], [data-theme-preview="rose"]{ --void:#FFEFF3; --deep:#FFF9FB; --panel:#FFFFFF; --panel-rgb:255 255 255; --panel-2:#FFF6F8; --line:#F3D2DC; --core-rgb:212 36 114; --think-rgb:175 82 222; --speak-rgb:255 149 0; --text:#2A1118; --text-soft:#5B3A44; --muted:#7E5C67; --faint:#C2A3AD; --danger:#D9301F; --danger-rgb:217 48 31; --on-core:#FFFFFF; --fg-rgb:42 17 24; color-scheme:light; --mesh-k:1.2; --void-rgb:255 239 243; --vignette:rgba(212,36,114,.06); } /* ---- AURORA (futuristic dark): deep teal night, northern-lights green + violet + magenta ---- */ :root[data-theme="aurora"], [data-theme-preview="aurora"]{ --void:#040E12; --deep:#0A2B2F; --panel:#0A1B20; --panel-rgb:10 27 32; --panel-2:#10282F; --line:#1B4048; --core-rgb:50 230 170; --think-rgb:124 92 255; --speak-rgb:255 99 200; --text:#DDF5EF; --text-soft:#9CC4BD; --muted:#7BA39C; --faint:#46706A; --danger:#FF5A52; --danger-rgb:255 90 82; --on-core:#03140E; --fg-rgb:255 255 255; color-scheme:dark; --mesh-k:1.7; --void-rgb:4 14 18; --vignette:rgba(0,0,0,.5); } /* ---- CYBER BLUE (futuristic dark): navy night, electric blue + cyan + magenta pop ---- */ /* ---- MINT (light): sea-glass white, fresh green + teal + amber ---- */ :root[data-theme="emerald"], [data-theme-preview="emerald"]{ --void:#E8F7EF; --deep:#F6FDF9; --panel:#FFFFFF; --panel-rgb:255 255 255; --panel-2:#F0FAF5; --line:#CDE6DA; --core-rgb:8 132 84; --think-rgb:0 168 176; --speak-rgb:255 159 10; --text:#11271F; --text-soft:#35504A; --muted:#587068; --faint:#9BB3A8; --danger:#E3291E; --danger-rgb:227 41 30; --on-core:#FFFFFF; --fg-rgb:17 39 31; color-scheme:light; --mesh-k:1.2; --void-rgb:232 247 239; --vignette:rgba(8,132,84,.06); } /* ---- SKY (light, iOS blue): cloud-white base, system blue + indigo + orange ---- */ :root[data-theme="arctic"], [data-theme-preview="arctic"]{ --void:#EAF1FB; --deep:#F7FAFF; --panel:#FFFFFF; --panel-rgb:255 255 255; --panel-2:#F2F6FD; --line:#D3DFEF; --core-rgb:0 108 235; --think-rgb:88 86 214; --speak-rgb:255 149 0; --text:#0F1B2D; --text-soft:#3C4A60; --muted:#5B6B82; --faint:#9AA7BA; --danger:#EB0D00; --danger-rgb:235 13 0; --on-core:#FFFFFF; --fg-rgb:15 27 45; color-scheme:light; --mesh-k:1.15; --void-rgb:234 241 251; --vignette:rgba(0,108,235,.06); } /* ---- 10. PAPER (light) -- glass, shadow, vignette and scrim are re-done for a light surface ---- */ :root[data-theme="paper"], [data-theme-preview="paper"]{ --mesh-k:.7; --void:#F4F1EA; --deep:#ECE7DC; --panel:#FBF9F4; --panel-rgb:251 249 244; --panel-2:#F1EDE3; --line:#DDD5C6; --core-rgb:15 157 138; --think-rgb:107 84 201; --speak-rgb:181 118 58; --text:#26302E; --text-soft:#4B5856; --muted:#5E6A67; --faint:#98A19E; --danger:#BE4637; --danger-rgb:190 70 55; --on-core:#04201C; --fg-rgb:38 48 46; color-scheme:light; --void-rgb:244 241 234; --vignette:rgba(120,100,60,.10); --glass-bg:rgb(var(--panel-rgb) / .82); --glass-border:rgb(var(--fg-rgb) / .10); --shadow-rest: 0 1px 2px rgba(70,55,25,.10), 0 8px 20px -12px rgba(70,55,25,.28); --shadow-hover: 0 2px 4px rgba(70,55,25,.12), 0 14px 32px -14px rgba(70,55,25,.34), 0 0 26px -8px var(--glow); --shadow-hover-flat: 0 2px 4px rgba(70,55,25,.12), 0 14px 32px -14px rgba(70,55,25,.34); /* the same without the accent glow: used outside the High tier (style/fx/quality.css) */ --scrim:rgb(236 231 220 / .78); --success:#2E8F57; --success-rgb:46 143 87; --warning:#A8740E; --warning-rgb:168 116 14; --info:#2F72B8; --info-rgb:47 114 184; } /* ---- light family (Sky / Mint / Blush / Lilac): white glass, soft tinted shadows, darker status colours ---- */ :root[data-theme="arctic"], :root[data-theme="emerald"], :root[data-theme="rose"], :root[data-theme="violet"], [data-theme-preview="arctic"], [data-theme-preview="emerald"], [data-theme-preview="rose"], [data-theme-preview="violet"]{ --glass-bg:rgb(var(--panel-rgb) / .74); --glass-border:rgb(var(--fg-rgb) / .08); --shadow-rest: 0 1px 2px rgb(var(--fg-rgb) / .06), 0 10px 24px -14px rgb(var(--fg-rgb) / .24); --shadow-hover: 0 2px 4px rgb(var(--fg-rgb) / .08), 0 16px 34px -16px rgb(var(--fg-rgb) / .30), 0 0 26px -8px var(--glow); --shadow-hover-flat: 0 2px 4px rgb(var(--fg-rgb) / .08), 0 16px 34px -16px rgb(var(--fg-rgb) / .30); /* the same without the accent glow: used outside the High tier (style/fx/quality.css) */ --scrim:rgb(var(--void-rgb) / .72); --success:#2E8F57; --success-rgb:46 143 87; --warning:#A8740E; --warning-rgb:168 116 14; --info:#2F72B8; --info-rgb:47 114 184; } /* ---- NEON BLACK (futuristic dark): true-black base, electric blue + neon blue + cyan, no purple. Effects live in style/theme-neon.css ---- */ :root[data-theme="neon"], [data-theme-preview="neon"]{ --void:#020305; --deep:#05090F; --panel:#05080C; --panel-rgb:5 8 12; --panel-2:#081019; --line:#0F2236; --core-rgb:0 183 255; --think-rgb:0 140 255; --speak-rgb:0 231 255; --text:#EAF6FF; --text-soft:#A9C4DC; --muted:#7F98B0; --faint:#44566B; --danger:#FF4D5E; --danger-rgb:255 77 94; --on-core:#00121F; --fg-rgb:255 255 255; color-scheme:dark; --mesh-k:.8; --void-rgb:2 3 5; --vignette:rgba(0,0,0,.7); --shine-rgb:150 230 255; --glass-bg:rgb(var(--panel-rgb) / .78); --glass-border:rgb(var(--core-rgb) / .20); --glow:rgb(var(--core-rgb) / .38); --shadow-rest: 0 1px 2px rgba(0,0,0,.7), 0 10px 26px -14px rgba(0,0,0,.9), 0 0 22px -12px rgb(var(--core-rgb) / .35); --shadow-hover: 0 2px 4px rgba(0,0,0,.7), 0 18px 36px -14px rgba(0,0,0,.9), 0 0 30px -6px rgb(var(--core-rgb) / .5); --shadow-hover-flat: 0 2px 4px rgba(0,0,0,.7), 0 18px 36px -14px rgba(0,0,0,.9); /* the same without the accent glow: used outside the High tier (style/fx/quality.css) */ --scrim:rgb(2 3 5 / .82); } /* ---- MONO INK (minimal dark): pure black + greys, one vermilion accent ---- */ :root[data-theme="ink"], [data-theme-preview="ink"]{ --void:#050505; --deep:#0A0A0A; --panel:#0C0C0C; --panel-rgb:12 12 12; --panel-2:#131313; --line:#242424; --core-rgb:255 90 54; --think-rgb:150 150 150; --speak-rgb:236 236 236; --text:#EDEDED; --text-soft:#A8A8A8; --muted:#7E7E7E; --faint:#484848; --danger:#FF2D55; --danger-rgb:255 45 85; --on-core:#1A0600; --fg-rgb:255 255 255; color-scheme:dark; --mesh-k:0; --void-rgb:5 5 5; --vignette:rgba(0,0,0,.55); --glass-bg:rgb(var(--panel-rgb) / .92); --glass-border:rgb(255 255 255 / .10); --glow:rgb(var(--core-rgb) / .10); --shadow-rest: 0 0 0 1px rgb(255 255 255 / .03); --shadow-hover: 0 14px 26px -18px rgba(0,0,0,.9), 0 0 0 1px rgb(var(--core-rgb) / .35); --shadow-hover-flat: 0 14px 26px -18px rgba(0,0,0,.9), 0 0 0 1px rgb(var(--core-rgb) / .35); /* the same without the accent glow: used outside the High tier (style/fx/quality.css) */ --scrim:rgb(5 5 5 / .85); } /* ---- OAT & SAGE (minimal light): oat base, sage accent, clay + charcoal; matte, soft shadows ---- */ :root[data-theme="oat"], [data-theme-preview="oat"]{ --void:#E9E4D8; --deep:#F1EDE2; --panel:#F7F4EC; --panel-rgb:247 244 236; --panel-2:#EEE9DC; --line:#D6CFBE; --core-rgb:79 111 82; --think-rgb:139 154 126; --speak-rgb:196 154 108; --text:#2B2A26; --text-soft:#55524A; --muted:#69655B; --faint:#A8A294; --danger:#B3402F; --danger-rgb:179 64 47; --on-core:#FFFFFF; --fg-rgb:43 42 38; color-scheme:light; --mesh-k:.4; --void-rgb:233 228 216; --vignette:rgba(90,80,50,.08); --glass-bg:rgb(var(--panel-rgb) / .82); --glass-border:rgb(var(--fg-rgb) / .10); --glow:rgb(var(--core-rgb) / .16); --shadow-rest: 0 1px 2px rgb(var(--fg-rgb) / .06), 0 10px 22px -14px rgb(var(--fg-rgb) / .22); --shadow-hover: 0 2px 4px rgb(var(--fg-rgb) / .08), 0 16px 30px -16px rgb(var(--fg-rgb) / .30); --shadow-hover-flat: 0 2px 4px rgb(var(--fg-rgb) / .08), 0 16px 30px -16px rgb(var(--fg-rgb) / .30); /* the same without the accent glow: used outside the High tier (style/fx/quality.css) */ --scrim:rgb(var(--void-rgb) / .74); --success:#4A7C59; --success-rgb:74 124 89; --warning:#9A6B12; --warning-rgb:154 107 18; --info:#3F6F8F; --info-rgb:63 111 143; } /* ---- GRAPHITE LIME (minimal dark): charcoal greys, one acid-lime accent ---- */ :root[data-theme="lime"], [data-theme-preview="lime"]{ --void:#0F1011; --deep:#161719; --panel:#161718; --panel-rgb:22 23 24; --panel-2:#1D1E20; --line:#2B2D30; --core-rgb:198 255 61; --think-rgb:140 146 138; --speak-rgb:240 240 232; --text:#ECEDE8; --text-soft:#AEB0A8; --muted:#85887F; --faint:#50524C; --danger:#FF5A4D; --danger-rgb:255 90 77; --on-core:#0E1400; --fg-rgb:255 255 255; color-scheme:dark; --mesh-k:0; --void-rgb:15 16 17; --vignette:rgba(0,0,0,.5); --glass-bg:rgb(var(--panel-rgb) / .90); --glass-border:rgb(255 255 255 / .08); --glow:rgb(var(--core-rgb) / .12); --shadow-rest: 0 1px 2px rgba(0,0,0,.4), 0 8px 18px -12px rgba(0,0,0,.6); --shadow-hover: 0 2px 4px rgba(0,0,0,.4), 0 14px 28px -14px rgba(0,0,0,.7), 0 0 0 1px rgb(var(--core-rgb) / .30); --shadow-hover-flat: 0 2px 4px rgba(0,0,0,.4), 0 14px 28px -14px rgba(0,0,0,.7), 0 0 0 1px rgb(var(--core-rgb) / .30); /* the same without the accent glow: used outside the High tier (style/fx/quality.css) */ --scrim:rgb(15 16 17 / .82); } /* ---- OBSIDIAN GOLD (warm dark): near-black base, brushed gold + copper + champagne ---- */ :root[data-theme="obsidian"], [data-theme-preview="obsidian"]{ --void:#0A0A0B; --deep:#141210; --panel:#121110; --panel-rgb:18 17 16; --panel-2:#1A1815; --line:#2A2620; --core-rgb:224 181 92; --think-rgb:196 132 96; --speak-rgb:240 224 190; --text:#E6DFD0; --text-soft:#B3AA97; --muted:#978E7C; --faint:#5E584C; --danger:#E0786A; --danger-rgb:224 120 106; --on-core:#14100A; --fg-rgb:255 255 255; color-scheme:dark; --mesh-k:1.3; --void-rgb:10 10 11; --vignette:rgba(0,0,0,.5); } /* ---- DEEP OCEAN (futuristic dark): midnight water, sky-cyan + indigo + aqua ---- */ :root[data-theme="ocean"], [data-theme-preview="ocean"]{ --void:#060B14; --deep:#0A1626; --panel:#0C1522; --panel-rgb:12 21 34; --panel-2:#112036; --line:#1B2E48; --core-rgb:56 189 248; --think-rgb:99 102 241; --speak-rgb:94 234 212; --text:#D2E0F0; --text-soft:#92A8C2; --muted:#7F95B0; --faint:#4A5C74; --danger:#E5786E; --danger-rgb:229 120 110; --on-core:#04121C; --fg-rgb:255 255 255; color-scheme:dark; --mesh-k:1.3; --void-rgb:6 11 20; --vignette:rgba(0,0,0,.5); } /* ---- SUNSET GLASS (futuristic dark): plum night, coral + orchid + amber ---- */ :root[data-theme="sunset"], [data-theme-preview="sunset"]{ --void:#0D0A14; --deep:#1A1026; --panel:#17111F; --panel-rgb:23 17 31; --panel-2:#1F1729; --line:#2E2140; --core-rgb:255 138 101; --think-rgb:192 108 255; --speak-rgb:255 200 124; --text:#EADFF0; --text-soft:#B5A4C4; --muted:#9A89AB; --faint:#5F5070; --danger:#E5566B; --danger-rgb:229 86 107; --on-core:#1A0B06; --fg-rgb:255 255 255; color-scheme:dark; --mesh-k:1.4; --void-rgb:13 10 20; --vignette:rgba(0,0,0,.5); } /* ---- FOREST NIGHT (dark): moss-black base, sage green + olive + cream ---- */ :root[data-theme="forest"], [data-theme-preview="forest"]{ --void:#070C09; --deep:#0C1812; --panel:#0E1712; --panel-rgb:14 23 18; --panel-2:#14221A; --line:#1F3226; --core-rgb:120 200 140; --think-rgb:176 196 112; --speak-rgb:240 226 190; --text:#DCE6DA; --text-soft:#A0B4A2; --muted:#8A9E8C; --faint:#536657; --danger:#D9786B; --danger-rgb:217 120 107; --on-core:#07120B; --fg-rgb:255 255 255; color-scheme:dark; --mesh-k:1.2; --void-rgb:7 12 9; --vignette:rgba(0,0,0,.5); } /* ---- reset + body ---- */ *{box-sizing:border-box;} html,body{height:100%;} body{ margin:0; background:var(--bg-mesh,none), radial-gradient(ellipse 65% 50% at 50% 40%, var(--deep) 0%, var(--void) 68%), var(--void); -webkit-font-smoothing:antialiased; color:var(--text); font-family:var(--font); min-height:100vh; overflow:hidden; position:relative; } body::after{ /* soft vignette */ content:''; position:fixed; inset:0; background:radial-gradient(ellipse 90% 80% at 50% 50%, transparent 55%, var(--vignette) 100%); pointer-events:none; z-index:1; } button{font-family:inherit;} input,select,textarea{font-family:inherit;} ::selection{background:var(--core);color:var(--on-core);} ::-webkit-scrollbar{width:8px;height:8px;} ::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px;} ::-webkit-scrollbar-track{background:transparent;} /* colour changes glide when the theme is switched (class is added by js/theme.js for ~600ms only) */ :root.theme-anim, :root.theme-anim *{transition:background-color .45s ease,border-color .45s ease,color .45s ease,fill .45s ease,stroke .45s ease,box-shadow .45s ease !important;} @media (prefers-reduced-motion:reduce){ *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important;} } /* ==== style/core/palette.css ==== */ /* ========================================================================== palette.css -- Ctrl+K command palette (js/palette.js). Colours come only from tokens.css variables. ========================================================================== */ .pal-overlay{position:fixed;inset:0;z-index:80;background:var(--scrim);backdrop-filter:blur(3px);display:flex;align-items:flex-start;justify-content:center;padding-top:14vh;opacity:0;pointer-events:none;transition:opacity .18s;} .pal-overlay.open{opacity:1;pointer-events:auto;} .pal{width:min(560px,92vw);background:var(--panel);border:1px solid var(--glass-border);border-radius:16px;box-shadow:var(--shadow-hover);overflow:hidden;transform:translateY(-8px) scale(.98);transition:transform .28s var(--ease-premium);} .pal-overlay.open .pal{transform:none;} .pal-input{width:100%;background:transparent;border:none;border-bottom:1px solid var(--line);color:var(--text);font-size:15px;padding:16px 18px;outline:none;} .pal-input::placeholder{color:var(--muted);} .pal-list{max-height:min(340px,52vh);overflow-y:auto;padding:6px;} .pal-group{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:10px 12px 4px;} .pal-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 12px;border-radius:10px;cursor:pointer;color:var(--text-soft);font-size:13.5px;} .pal-item small{color:var(--muted);font-size:11.5px;} .pal-item.sel{background:rgb(var(--core-rgb) / .12);color:var(--text);} .pal-empty{padding:22px 16px;color:var(--muted);font-size:13px;text-align:center;} .pal-foot{display:flex;gap:16px;padding:8px 14px;border-top:1px solid var(--line);color:var(--muted);font-size:11px;} /* ==== style/core/ambient.css ==== */ /* ========================================================================== ambient.css -- very slow drifting teal/purple/amber glow behind everything (barely noticeable on purpose). Pure CSS (GPU transform + opacity only). body.sara-active (toggled by js/home/home.js refreshChrome() whenever Sara is listening/thinking/speaking/working) brings the glow to full strength, so the room itself feels like it's paying attention. (The old cursor parallax rewrote --mx/--my on :root on every pointer move, which re-styled the whole document -- measured at 54% of a core on the settings page -- and repainted this 150%-size layer; it was removed.) Sits between the body gradient and the app; the vignette in tokens.css stays on top. ========================================================================== */ body::before{ content:'';position:fixed;inset:-25%;z-index:0;pointer-events:none; background: radial-gradient(38% 34% at 28% 32%, rgb(var(--core-rgb) / .075), transparent 70%), radial-gradient(34% 30% at 74% 66%, rgb(var(--think-rgb) / .07), transparent 70%), radial-gradient(26% 24% at 62% 22%, rgb(var(--speak-rgb) / .035), transparent 70%); animation:nebulaDrift 80s ease-in-out infinite alternate; will-change:transform; opacity:.85; transition:opacity .8s ease; } body.sara-active::before{opacity:1;} html[data-quality="low"] body::before{animation-play-state:paused;} @keyframes nebulaDrift{ 0%{transform:translate3d(-2%,-1%,0) rotate(0deg) scale(1);} 50%{transform:translate3d(2.5%,1.5%,0) rotate(3deg) scale(1.06);} 100%{transform:translate3d(-1%,2.5%,0) rotate(-2deg) scale(1.02);} } @media (prefers-reduced-motion:reduce){ body::before{animation:none;transition:none;} } /* ---- time-of-day tint (js/motion.js sets --amb-1/2/3 on :root once per ~17 min) ---- Only the three glow blobs shift (warm-teal morning -> neutral day -> amber evening -> blue-void night); the app's teal accent (--core) is never touched. The vars are registered s so the change eases over 20s instead of stepping; engines without @property just apply the new colour (steps are tiny, the change is hours apart). The @supports block only replaces the hard-coded blobs above when color-mix is available, so older webviews keep the original look. */ @property --amb-1{syntax:'';inherits:true;initial-value:rgb(63,216,196);} @property --amb-2{syntax:'';inherits:true;initial-value:rgb(139,111,216);} @property --amb-3{syntax:'';inherits:true;initial-value:rgb(232,192,143);} :root.tint-ready{transition:--amb-1 20s linear,--amb-2 20s linear,--amb-3 20s linear;} @supports (color:color-mix(in srgb,red 10%,transparent)){ body::before{ background: radial-gradient(38% 34% at 28% 32%, color-mix(in srgb,color-mix(in srgb,var(--core) 75%,var(--amb-1)) 10%,transparent), transparent 70%), radial-gradient(34% 30% at 74% 66%, color-mix(in srgb,color-mix(in srgb,var(--think) 75%,var(--amb-2)) 9%,transparent), transparent 70%), radial-gradient(26% 24% at 62% 22%, color-mix(in srgb,color-mix(in srgb,var(--speak) 75%,var(--amb-3)) 6%,transparent), transparent 70%); } } @media (prefers-reduced-motion:reduce){:root.tint-ready{transition:none;}} /* ==== style/core/layout.css ==== */ /* ========================================================================== layout.css -- app shell: page container, page header, bottom nav, page transitions, toast stack, offline strip. Markup: index.html (.app, .page, .nav, #toastStack). Behaviour: js/core.js (nav) + js/ui.js (toast). ========================================================================== */ :root{--nav-reserve:72px;} .app{position:relative;z-index:2;height:calc(100vh - var(--nav-reserve));display:flex;flex-direction:column;} /* ---- pages + transition ---- */ .page{display:none;height:100%;flex-direction:column;animation:pageIn .22s cubic-bezier(.2,.7,.2,1);} .page.slide-r{animation-name:pageInR;} .page.slide-l{animation-name:pageInL;} .page.active{display:flex;} /* ---- inner-page header: arrives a beat after the page body so it reads as "settling in", not a separate flash -- same duration/easing family as the page transition itself. ---- */ .page-header{flex:none;display:flex;align-items:center;justify-content:space-between;padding:28px 40px 6px;animation:headerIn .32s var(--ease-premium,cubic-bezier(.22,1,.36,1)) .04s both;} .page-title{font-size:20px;font-weight:500;color:var(--text);} .page-status{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--muted);} .page-status span{transition:color .4s;} .mini-orb{ width:11px;height:11px;border-radius:50%;background:var(--core);box-shadow:0 0 8px var(--core); animation:orbPulse 2.6s ease-in-out infinite;transition:background .5s, box-shadow .5s;cursor:pointer;flex:none; } .page-body{flex:1;min-height:0;padding:16px 40px 110px;overflow-y:auto;} /* ---- staggered list entrance: the first handful of rows/setting-cards on a freshly-shown page ease in one after another instead of popping together. Capped at 8 items and ~220ms total so it never delays a page feeling ready, and only fires once per element (page revisits reuse cached DOM, so this only really plays on first render / first data arrival, not on every nav tap). ---- */ .page.stagger-in .page-body .row,.page.stagger-in .page-body .set-card{animation:rowIn .34s var(--ease-premium,cubic-bezier(.22,1,.36,1)) both;} .page.stagger-in .page-body .row:nth-of-type(1),.page.stagger-in .page-body .set-card:nth-of-type(1){animation-delay:.02s;} .page.stagger-in .page-body .row:nth-of-type(2),.page.stagger-in .page-body .set-card:nth-of-type(2){animation-delay:.05s;} .page.stagger-in .page-body .row:nth-of-type(3),.page.stagger-in .page-body .set-card:nth-of-type(3){animation-delay:.08s;} .page.stagger-in .page-body .row:nth-of-type(4),.page.stagger-in .page-body .set-card:nth-of-type(4){animation-delay:.11s;} .page.stagger-in .page-body .row:nth-of-type(5),.page.stagger-in .page-body .set-card:nth-of-type(5){animation-delay:.14s;} .page.stagger-in .page-body .row:nth-of-type(n+6),.page.stagger-in .page-body .set-card:nth-of-type(n+6){animation-delay:.16s;} /* ---- bottom nav (persistent) ---- */ .nav{ position:fixed;bottom:14px;left:50%;transform:translateX(-50%); display:flex;align-items:center;gap:2px;padding:6px;border-radius:999px; background:var(--glass-bg);border:1px solid var(--glass-border);box-shadow:var(--shadow-rest); opacity:.85;transition:opacity .25s; z-index:10;max-width:92vw;overflow-x:auto;scrollbar-width:none; } .nav::-webkit-scrollbar{display:none;} .nav:hover{opacity:1;} .nav button{background:none;border:none;color:var(--muted);font-size:12.5px;letter-spacing:.02em;cursor:pointer;padding:8px 10px;border-radius:999px;white-space:nowrap;flex:none;transition:color .2s,transform .12s;position:relative;z-index:1;} .nav button:active{transform:scale(.94);} /* sliding active-page pill (positioned by js/fx.js) */ .nav-ind{position:absolute;left:0;top:6px;bottom:6px;width:0;border-radius:999px;background:rgb(var(--core-rgb) / .16);box-shadow:inset 0 0 0 1px rgb(var(--core-rgb) / .30);transition:transform .4s cubic-bezier(.34,1.56,.64,1),width .4s cubic-bezier(.34,1.56,.64,1);pointer-events:none;} .nav-ind.no-anim{transition:none;} .nav button.active{color:var(--text);} .nav button:hover{color:var(--text);} /* ---- toast stack ---- */ .toast-stack{position:fixed;bottom:96px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;z-index:60;pointer-events:none;} .toast{ display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line);color:var(--text); padding:9px 16px;border-radius:8px;font-size:13px;max-width:min(520px,88vw); box-shadow:var(--shadow-rest,0 8px 20px -12px rgba(0,0,0,.45));border-left:2px solid var(--core); position:relative;overflow:hidden;animation:toastIn .34s cubic-bezier(.22,1,.36,1);pointer-events:auto;transition:opacity .22s,transform .22s,box-shadow .2s; } .toast:hover{box-shadow:var(--shadow-hover,0 14px 32px -14px rgba(0,0,0,.55));} .toast.leaving{opacity:0;transform:translateY(6px) scale(.98);} /* ---- semantic variants (optional -- SARA.toast(..., {variant:'success'|'info'|'warning'|'error'})). Existing calls that only pass an icon/color keep working unchanged; this just tints the left edge. ---- */ .toast.v-success{border-left-color:var(--core);} .toast.v-info{border-left-color:var(--think);} .toast.v-warning{border-left-color:var(--speak);} .toast.v-error{border-left-color:var(--danger);} /* ---- hover-to-pause: SARA.toast's auto-dismiss timer checks this class before firing ---- */ .toast.paused{box-shadow:var(--shadow-hover,0 14px 32px -14px rgba(0,0,0,.55));} .toast .t-dot{width:7px;height:7px;border-radius:50%;flex:none;background:var(--core);box-shadow:0 0 6px currentColor;animation:dotPop .5s cubic-bezier(.3,1.6,.5,1) .1s both;} .toast .t-ico{width:16px;height:16px;flex:none;display:inline-flex;animation:dotPop .5s cubic-bezier(.3,1.6,.5,1) .1s both;} .toast .t-ico svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;} .toast .t-x{background:none;border:none;color:var(--muted);cursor:pointer;font-size:14px;padding:0 0 0 6px;flex:none;align-self:flex-start;} .toast .t-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;overflow-wrap:anywhere;} .toast .t-title{font-weight:500;color:var(--text);line-height:1.3;} .toast .t-msg{line-height:1.35;} .toast.has-title .t-msg{color:var(--text-soft);font-size:12.5px;} .toast .t-sub{display:block;font-size:11px;opacity:.7;} .toast .t-meta{display:block;font-size:11px;color:var(--muted);margin-top:2px;} .toast .t-act{flex:none;align-self:center;background:none;border:1px solid rgb(var(--core-rgb) / .4);color:var(--core);border-radius:999px;padding:3px 11px;font-size:12px;cursor:pointer;transition:background .2s,transform .12s;} .toast .t-act:hover{background:rgb(var(--core-rgb) / .14);} .toast .t-act:active{transform:scale(.95);} .toast .t-act:disabled{opacity:.5;cursor:default;} .toast .t-ico{animation:icoPop .4s var(--ease-spring,cubic-bezier(.34,1.56,.64,1)) .08s both;} .toast .t-ico.is-check path{stroke-dasharray:24;stroke-dashoffset:24;animation:tCheck .4s cubic-bezier(.22,1,.36,1) .16s forwards;} .toast .t-bar{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--t-accent,var(--core));opacity:.5;transform-origin:left center;animation:tBar var(--t-dur,4500ms) linear forwards;pointer-events:none;} .toast.paused .t-bar{animation-play-state:paused;} @keyframes tBar{from{transform:scaleX(1);}to{transform:scaleX(0);}} @keyframes tCheck{to{stroke-dashoffset:0;}} @media (prefers-reduced-motion:reduce){.toast .t-ico.is-check path{stroke-dashoffset:0;animation:none;}} .toast .t-x:hover{color:var(--text);} /* ---- preview-mode strip (shown only when the backend bridge is missing) ---- */ .offline-strip{ position:fixed;top:0;left:0;right:0;z-index:70;text-align:center;font-size:12px;letter-spacing:.02em; padding:6px 12px;background:rgb(var(--danger-rgb) / .14);border-bottom:1px solid rgb(var(--danger-rgb) / .35);color:var(--danger); } .offline-strip[hidden]{display:none;} /* ==== style/core/shell.css ==== */ /* ========================================================================== shell.css -- app-shell tokens and helpers from the redesign spec (sections 4.3, 4.6, 5). Shell layout tokens and shared helpers for the page header and bottom navigation pill. ========================================================================== */ :root{ --sidebar-w:72px; --sidebar-w-open:232px; --header-h:64px; --pad-x:32px; --pad-top:24px; --pad-bottom:40px; --content-a:720px; /* reading pages: Chat, Notes, Apps, Automation */ --content-b:1144px; /* workspace pages: Home, Settings */ --gutter:16px; --gutter-section:24px; /* z-index scale (spec 5) */ --z-content:1; --z-header:5; --z-sidebar:10; --z-mini-player:20; --z-sheet:40; --z-modal:50; --z-palette:60; --z-toast:70; --z-offline:80; } /* icon sprite (index.html: ); size by class, colour follows the text */ .ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;pointer-events:none;} .ic.sm{width:16px;height:16px;} .ic.lg{width:24px;height:24px;} /* ========================================================================== Skip link, page header bar, bottom navigation pill and toasts ========================================================================== */ .skip-link{position:fixed;left:var(--sp-3);top:-64px;z-index:var(--z-offline);padding:var(--sp-2) var(--sp-4);border-radius:var(--r-ctl);background:var(--core);color:var(--on-core);font:var(--t-label);text-decoration:none;transition:top var(--dur-fast);} .skip-link:focus{top:var(--sp-3);} /* ---- header bar: 64 px, title + one-line subtitle on the left, search + status on the right ---- */ .page-header{height:var(--header-h);box-sizing:border-box;padding:0 40px;border-bottom:1px solid transparent;transition:border-color var(--dur-med);position:relative;z-index:var(--z-header);gap:var(--sp-4);} .page-header.scrolled{border-bottom-color:rgb(var(--fg-rgb) / .06);} .page-heading{display:flex;flex-direction:column;gap:1px;min-width:0;} .page-title{font:var(--t-title);letter-spacing:0;} .page-sub{font:var(--t-helper);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .page-tools{display:flex;align-items:center;gap:var(--sp-3);flex:none;} .hdr-search{display:inline-flex;align-items:center;gap:var(--sp-2);height:36px;min-width:150px;box-sizing:border-box;padding:0 14px;border-radius:var(--r-pill);background:var(--panel);border:1px solid var(--line); color:var(--muted);font:var(--t-helper);cursor:pointer;transition:border-color var(--dur-fast),color var(--dur-fast);} .hdr-search:hover{border-color:rgb(var(--core-rgb) / .45);color:var(--text);} .hdr-search span{flex:1;text-align:left;} .hdr-search kbd{font:inherit;font-size:11px;opacity:.8;white-space:nowrap;border:none;background:none;padding:0;margin:0;} .page-status{height:36px;box-sizing:border-box;padding:0 14px;border-radius:var(--r-pill);background:var(--panel);border:1px solid var(--line);} @media (max-width:1179.98px){:root{--pad-x:24px;}.page-header{padding:0 24px;}.hdr-search{width:36px;min-width:0;padding:0;justify-content:center;}.hdr-search span,.hdr-search kbd{display:none;}} /* Keep the reading-page title and tools on the same centered rail as their content. */ :is(#page-chat,#page-notes,#page-apps,#page-automation) > .page-header{ width:min(calc(100% - 80px),var(--content-a));margin-inline:auto;padding-inline:0; } /* ---- Navigation stays in the approved bottom pill at every window size. ---- */ .nav .ic{display:block;width:16px;height:16px;} .nav-logo,.nav-pin,.nav-foot{display:none;} .nav-bottom{display:contents;} .nav button[data-page]{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:31px;box-sizing:border-box;padding:8px 10px;font-size:12px;} .nav-label{opacity:1;pointer-events:auto;} .nav .nav-ind::before{display:none;} @media (min-width:1000px){ .toast-stack{top:calc(var(--header-h) + var(--sp-2));right:var(--sp-4);bottom:auto;left:auto;transform:none;align-items:flex-end;z-index:var(--z-toast);} .toast{width:min(320px,88vw);animation-name:toastInR;} .offline-strip{z-index:var(--z-offline);} @keyframes toastInR{from{opacity:0;transform:translateX(28px);}to{opacity:1;transform:none;}} } @media (prefers-reduced-motion:reduce){.nav,.app{transition:none;}.nav-label{transition:none;}.skip-link{transition:none;}} /* the offline strip (28 px) reserves header space without moving the fixed bottom navigation pill */ .offline-strip{display:flex;align-items:center;justify-content:center;gap:var(--sp-2);height:28px;box-sizing:border-box;padding:0 var(--sp-3);} .offline-strip button{padding-top:0;padding-bottom:0;line-height:1.2;} .offline-strip:not([hidden]) ~ .app{padding-top:28px;box-sizing:border-box;} .offline-strip:not([hidden]) ~ .app .nav{top:auto;bottom:14px;} /* ==== style/core/components.css ==== */ /* ========================================================================== components.css -- shared building blocks reused by several pages: section labels, rows, inputs, buttons, toggle, tabs, chips, overlay/modal, empty state, range. Page-specific styling lives in the per-page files (home.css, chat.css, ...). ========================================================================== */ /* hidden means hidden. Any rule that sets display (flex, grid ...) used to beat the attribute, which showed things meant to be out of sight, such as the "Yes, reset" confirmation of Smart routing, all the time. */ [hidden]{display:none !important;} .section-label{font-size:11.5px;letter-spacing:.06em;color:var(--muted);margin:22px 0 10px;text-transform:uppercase;} .section-label:first-child{margin-top:2px;} /* ---- list rows ---- */ .row{display:flex;align-items:center;gap:14px;padding:13px 4px;border-bottom:1px solid var(--line);max-width:640px;} /* .row .dot (reminder checkbox) lives in notes-reminders.css */ .row.done .r-text{color:var(--muted);text-decoration:line-through;} .r-time{font-size:12.5px;color:var(--muted);width:64px;flex:none;font-variant-numeric:tabular-nums;} .r-text{font-size:14.5px;flex:1;min-width:0;overflow-wrap:anywhere;} .r-del{background:none;border:none;color:var(--muted);cursor:pointer;font-size:16px;line-height:1;padding:2px 6px;opacity:0;transition:opacity .15s,color .15s;} .row:hover .r-del,.r-del:focus{opacity:1;} .r-del:hover{color:var(--danger);} /* ---- inputs + buttons ---- */ .add-row{max-width:640px;margin-top:16px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;} .add-row input[type=text]{flex:1;min-width:160px;} .field,.add-row input,.modal input,.modal select,.set-row input[type=text]{ background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:10px 13px;color:var(--text); font-size:13.5px;outline:none;font-family:inherit;color-scheme:dark; } .field:focus,.add-row input:focus,.modal input:focus,.modal select:focus,.set-row input[type=text]:focus{border-color:var(--core);} input::placeholder{color:var(--muted);} .pill-btn{background:var(--panel-2);border:1px solid var(--line);color:var(--text-soft);border-radius:12px;padding:10px 16px;font-size:13px;cursor:pointer;white-space:nowrap;transition:border-color .2s,color .2s,transform var(--dur-fast,.16s) var(--ease-spring,cubic-bezier(.34,1.56,.64,1)),box-shadow .2s;} .pill-btn:hover:not(:disabled){transform:scale(1.02);} :where(html[data-quality="high"]:not([data-motion="reduce"])) .pill-btn:hover:not(:disabled){box-shadow:0 0 14px rgb(var(--core-rgb) / .12);} /* hover glow: High tier only (spec 4.5) */ .pill-btn:active:not(:disabled){transform:scale(.97);transition-duration:.08s;} .pill-btn:hover{border-color:var(--core);color:var(--text);} .pill-btn:disabled{opacity:.45;cursor:default;} /* ---- loading / success micro-states (opt-in via class; nothing existing changes state on its own) ---- Usage from JS: btn.classList.add('is-loading') while a call is in flight, then either remove it or swap to 'is-success' for ~900ms on a good result. Text stays in the DOM (just dimmed) so button width never jumps. */ .pill-btn.is-loading,.dock-btn.is-loading{pointer-events:none;position:relative;color:transparent !important;} .pill-btn.is-loading::after,.dock-btn.is-loading::after{ content:'';position:absolute;top:50%;left:50%;width:14px;height:14px;margin:-7px 0 0 -7px; border-radius:50%;border:2px solid rgb(var(--fg-rgb) / .28);border-top-color:currentColor;color:var(--core); animation:btnSpin .7s linear infinite; } .pill-btn.is-success,.dock-btn.is-success{pointer-events:none;position:relative;color:transparent !important;border-color:var(--core) !important;} .pill-btn.is-success::after,.dock-btn.is-success::after{ content:'';position:absolute;top:50%;left:50%;width:14px;height:10px;margin:-6px 0 0 -7px; border-left:2px solid var(--core);border-bottom:2px solid var(--core);transform:rotate(-45deg) scale(0); animation:btnCheck .35s var(--ease-spring,cubic-bezier(.34,1.56,.64,1)) forwards; } @keyframes btnSpin{to{transform:rotate(360deg);}} @keyframes btnCheck{to{transform:rotate(-45deg) scale(1);}} @media (prefers-reduced-motion:reduce){ .pill-btn.is-loading::after{animation:none;border-top-color:rgb(var(--fg-rgb) / .28);} .pill-btn.is-success::after{animation:none;transform:rotate(-45deg) scale(1);} } .pill-btn.primary{background:var(--core);color:var(--on-core);border:none;font-weight:600;} .pill-btn.primary:hover{background:var(--core-hover);} .pill-btn.small{padding:6px 12px;font-size:12px;} .pill-btn.danger:hover{border-color:var(--danger);color:var(--danger);} .link-btn{background:none;border:none;color:var(--muted);font-size:12.5px;cursor:pointer;padding:4px 8px;letter-spacing:.02em;transition:color .2s;} .link-btn:hover{color:var(--text);} /* ---- toggle ---- */ .toggle{width:46px;height:28px;border-radius:14px;background:rgb(var(--fg-rgb) / .16);border:none;position:relative;cursor:pointer;flex:none;outline:none;transition:background .25s;} .toggle::after{content:'';position:absolute;top:2px;left:2px;width:24px;height:24px;border-radius:12px;background:#fff;box-shadow:0 2px 5px rgba(0,0,0,.28);transition:transform .38s cubic-bezier(.34,1.56,.64,1),width .34s cubic-bezier(.34,1.56,.64,1);} /* liquid knob: pressing stretches it into a pill (edge that is away from the travel direction stays put), release springs back. One class covers every toggle in the app (Settings, Today sheet chips use their own). */ .toggle:active::after{width:29px;transition-duration:.38s,.14s;} .toggle.on:active::after{transform:translateX(13px);} /* keyboard (Enter/Space) has no :active phase, so js/core.js bindToggle adds .liquid for one squash-and-settle */ .toggle.liquid::after{animation:knobStretch .38s cubic-bezier(.34,1.56,.64,1);} .toggle.on.liquid::after{animation-name:knobStretchOn;} @keyframes knobStretch{0%{width:24px;}35%{width:29px;}100%{width:24px;}} @keyframes knobStretchOn{0%{width:24px;}35%{width:29px;}100%{width:24px;}} .toggle.on{background:var(--core);} .toggle.on::after{transform:translateX(18px);} .toggle:focus-visible{box-shadow:0 0 0 2px rgb(var(--core-rgb) / .35);} @media (prefers-reduced-motion:reduce){.toggle.liquid::after{animation:none;}} /* Redesign phase 1: same focus ring as every other control. (The >= 44 px hit area comes from making the whole setting row the click target, phase 4c: .toggle::before is already the halo ring of the one-shot feedback in settings.css.) */ .toggle:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;} /* ---- slider ---- */ input[type=range]{-webkit-appearance:none;appearance:none;flex:1;height:3px;background:var(--line);border-radius:2px;outline:none;} input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:50%;background:var(--core);box-shadow:0 0 6px rgb(var(--core-rgb) / .6);cursor:pointer;} /* ---- tabs (Notes | Reminders) ---- */ .tabs{display:flex;gap:26px;border-bottom:1px solid var(--line);max-width:640px;margin:0 0 20px;} .tab{background:none;border:none;color:var(--muted);font-size:14px;padding:8px 2px 10px;cursor:pointer;position:relative;transition:color .2s;} .tab:hover{color:var(--text);} .tab.active{color:var(--text);} .tab.active::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--core);box-shadow:0 0 8px var(--core);border-radius:2px;} .pane{display:none;animation:pageIn .3s ease;} .pane.active{display:block;} /* ---- chips (language, modes) ---- */ .chip-row{display:flex;gap:10px;flex-wrap:wrap;} .chip{background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:8px 15px;font-size:12.5px;color:var(--text-soft);cursor:pointer;transition:border-color .2s,color .2s,transform var(--dur-fast,.16s) var(--ease-spring,cubic-bezier(.34,1.56,.64,1)),box-shadow .2s;} .chip:hover{transform:scale(1.02);} :where(html[data-quality="high"]:not([data-motion="reduce"])) .chip:hover{box-shadow:0 0 12px rgb(var(--core-rgb) / .10);} .chip:active{transform:scale(.97);transition-duration:.08s;} .chip:hover{color:var(--text);} .chip.on{border-color:rgb(var(--core-rgb) / .45);color:var(--core);} .chip.danger:hover{border-color:var(--danger);color:var(--danger);} /* ---- empty state ---- */ .empty{max-width:640px;padding:26px 4px;color:var(--muted);font-size:13.5px;line-height:1.55;} /* ---- overlay + modal ---- */ .overlay{position:fixed;inset:0;z-index:40;background:var(--scrim);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .22s;} .overlay.open{opacity:1;pointer-events:auto;} .modal{width:min(520px,100%);max-height:88vh;overflow-y:auto;background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:22px 24px;transform:translateY(8px) scale(.98);transition:transform .28s cubic-bezier(.22,1,.36,1);} .overlay.open .modal{transform:translateY(0) scale(1);} .modal h3{margin:0 0 4px;font-size:17px;font-weight:500;} .modal .m-sub{font-size:12.5px;color:var(--muted);margin-bottom:16px;} .modal label{display:block;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin:14px 0 6px;} .modal input,.modal select{width:100%;} .modal .m-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px;} .modal .m-error{color:var(--danger);font-size:12.5px;margin-top:12px;display:none;} /* ---- skeleton shimmer (replaces plain "Loading…" text; swapped out by the page JS when data arrives) ---- */ .skel{display:block;border-radius:6px;background:linear-gradient(100deg,var(--panel) 30%,var(--line) 50%,var(--panel) 70%);background-size:220% 100%;animation:skelShimmer 1.6s ease-in-out infinite;} .skel-inline{display:inline-block;width:46px;height:11px;vertical-align:middle;} .skel-line{height:11px;width:70%;margin:6px 0;} .skel-row{height:34px;margin:8px 0;border-radius:8px;} @keyframes skelShimmer{0%{background-position:120% 0;}100%{background-position:-120% 0;}} /* ---- ripple press-effect (js/fx.js delegates pointerdown for these selectors and injects a .ripple span). .tab is deliberately excluded -- its active-state underline sits at bottom:-1px and would get clipped. ---- */ .pill-btn,.chip,.dock-btn,.qa-btn,.mc-play{position:relative;overflow:hidden;} .ripple{position:absolute;border-radius:50%;background:rgb(var(--fg-rgb) / .28);transform:scale(0);pointer-events:none;animation:rippleOut .55s ease-out forwards;} @keyframes rippleOut{to{transform:scale(1);opacity:0;}} @media (prefers-reduced-motion:reduce){.ripple{display:none;}} /* ---- shared glass surface (was copy-pasted in 5 rules; tokens: --glass-bg / --glass-border / --glass-blur) ---- */ .glass,.clock-card,.today-card,.next-card,.home-activity,.plan-card{ background:var(--glass-bg);border:1px solid var(--glass-border); } /* ---- focus mode look (js/settings.js toggles body.focus-mode): chrome dims, orb breathes slower ---- */ body.focus-mode .clock-card,body.focus-mode .today-card,body.focus-mode .next-card,body.focus-mode .home-greet{opacity:.35;transition:opacity .6s ease;} body.focus-mode .clock-card:hover,body.focus-mode .today-card:hover,body.focus-mode .next-card:hover{opacity:1;} body.focus-mode .nav{opacity:.3;} body.focus-mode .nav:hover{opacity:1;} body.focus-mode #stage{animation:focusBreathe 7s ease-in-out infinite;} @keyframes focusBreathe{0%,100%{transform:scale(1);}50%{transform:scale(1.035);}} @media (prefers-reduced-motion:reduce){body.focus-mode #stage{animation:none;}} /* ---- Appearance card (Settings): theme swatches + accent hue ---- */ .theme-filters{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 2px;} .theme-filters .chip{padding:5px 12px;font-size:11.5px;} .theme-filters .chip:hover{transform:none;} .theme-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(144px,1fr));gap:10px;margin:6px 0 4px;} .theme-card{ position:relative;min-width:0;display:flex;flex-direction:column;gap:8px;padding:8px 8px 9px;text-align:left;cursor:pointer; background:var(--panel-2);color:var(--text-soft);border:1px solid var(--line);border-radius:14px; transition:border-color var(--dur-med,.28s),box-shadow var(--dur-med,.28s),transform var(--dur-fast,.16s) var(--ease-premium,ease),color .2s; } .theme-card[hidden]{display:none;} .theme-card:hover{border-color:rgb(var(--core-rgb) / .5);color:var(--text);transform:translateY(-2px);} .theme-card:active{transform:scale(.98);} .theme-card:focus-visible{outline:2px solid var(--core);outline-offset:2px;} .theme-card.on{border-color:var(--core);color:var(--text);box-shadow:0 0 0 1px rgb(var(--core-rgb) / .35),0 0 18px -6px var(--glow);animation:tcPop .32s var(--ease-spring,cubic-bezier(.34,1.56,.64,1));} .tc-meta{display:flex;flex-direction:column;gap:1px;padding:0 2px;min-width:0;} .tc-meta b{font-size:12.5px;font-weight:500;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .tc-meta small{font-size:10.5px;color:var(--muted);letter-spacing:.03em;} .tc-check{position:absolute;bottom:12px;right:12px;width:16px;height:16px;border-radius:50%;background:var(--core);display:grid;place-items:center;opacity:0;transform:scale(.6);transition:opacity .2s,transform .28s var(--ease-spring,cubic-bezier(.34,1.56,.64,1));} .tc-check svg{width:10px;height:10px;fill:none;stroke:var(--on-core);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;} .theme-card.on .tc-check{opacity:1;transform:scale(1);} /* mini SARA UI -- coloured purely by the tokens of its own data-theme-preview, so it always matches the real theme */ .tc-pv{display:flex;flex-direction:column;gap:5px;padding:7px 8px 8px;border-radius:9px;background:var(--bg-mesh,none),radial-gradient(ellipse 90% 70% at 50% 0%,var(--deep) 0%,var(--void) 75%);border:1px solid var(--line);color:var(--text);overflow:hidden;pointer-events:none;} .tc-bar{display:flex;justify-content:space-between;align-items:baseline;font-size:8.5px;letter-spacing:.12em;} .tc-bar b{font-weight:600;color:var(--text);} .tc-bar em{font-style:normal;color:var(--muted);font-variant-numeric:tabular-nums;letter-spacing:.04em;} .tc-active{display:inline-flex;align-items:center;gap:4px;align-self:flex-start;padding:2px 6px 2px 5px;border-radius:999px;font-size:7.5px;letter-spacing:.14em;color:var(--core);background:rgb(var(--core-rgb) / .12);border:1px solid rgb(var(--core-rgb) / .4);} .tc-active i{width:4px;height:4px;border-radius:50%;background:var(--core);box-shadow:0 0 5px var(--core);} .tc-row{display:grid;grid-template-columns:1.25fr 1fr;gap:5px;} .tc-panel{display:flex;flex-direction:column;gap:4px;justify-content:center;height:26px;padding:0 6px;border-radius:6px;background:var(--panel);border:1px solid var(--line);} .tc-panel i{display:block;height:3px;border-radius:2px;background:var(--text);opacity:.85;width:80%;} .tc-panel i + i{background:var(--muted);width:52%;opacity:.9;} .tc-accent{border-radius:6px;background:linear-gradient(135deg,var(--core),var(--think));box-shadow:0 0 12px -2px rgb(var(--core-rgb) / .55);} .tc-dots{display:flex;gap:4px;} .tc-dots i{width:7px;height:7px;border-radius:50%;display:block;} .tc-dots .p{background:var(--core);} .tc-dots .s{background:var(--think);} .tc-dots .h{background:var(--speak);} @media (prefers-reduced-motion:reduce){.theme-card.on{animation:none;}.theme-card:hover{transform:none;}} /* accent hue: full-spectrum track, thumb = the live accent, live preview row */ .hue-block{display:flex;flex-direction:column;gap:10px;} .hue-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;} .hue-row input[type=range]{flex:1;min-width:140px;} .hue-row b{font-size:12px;font-weight:500;color:var(--text-soft);min-width:78px;text-align:right;font-variant-numeric:tabular-nums;} .hue-row .pill-btn{padding:7px 12px;font-size:12px;} .hue-row .pill-btn:disabled{opacity:.45;cursor:default;pointer-events:none;} #hueSlider{-webkit-appearance:none;appearance:none;height:10px;border-radius:999px;border:1px solid rgb(var(--fg-rgb) / .14);outline:none;cursor:pointer; background:linear-gradient(90deg,hsl(0 78% 58%),hsl(30 85% 56%),hsl(60 80% 55%),hsl(90 65% 52%),hsl(120 60% 50%),hsl(150 65% 50%),hsl(180 75% 50%),hsl(210 80% 58%),hsl(240 80% 66%),hsl(270 75% 66%),hsl(300 70% 64%),hsl(330 78% 62%),hsl(360 78% 58%));} #hueSlider::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--core);border:2px solid var(--text);box-shadow:0 0 0 3px rgb(var(--core-rgb) / .28),0 1px 4px rgba(0,0,0,.5);transition:transform .16s var(--ease-premium,ease);} #hueSlider::-webkit-slider-thumb:hover{transform:scale(1.12);} #hueSlider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--core);border:2px solid var(--text);box-shadow:0 0 0 3px rgb(var(--core-rgb) / .28);} #hueSlider:focus-visible{box-shadow:0 0 0 2px var(--core);} .accent-pv{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:9px 11px;border-radius:12px;background:var(--panel-2);border:1px solid var(--line);} .accent-pv .ap-chip{width:22px;height:22px;border-radius:7px;background:var(--core);box-shadow:0 0 14px -2px var(--glow);flex:none;} .accent-pv .ap-btn{padding:4px 11px;border-radius:999px;font-size:11.5px;color:var(--on-core);background:var(--core);} .accent-pv .ap-link{font-size:11.5px;color:var(--core);border-bottom:1px solid rgb(var(--core-rgb) / .4);} .accent-pv .ap-status{margin-left:auto;display:flex;gap:10px;font-size:10.5px;color:var(--muted);} .accent-pv .ap-status span{display:inline-flex;align-items:center;gap:4px;} .accent-pv .ap-status i{width:7px;height:7px;border-radius:50%;display:block;} .ap-status .ok i{background:var(--success);} .ap-status .wn i{background:var(--warning);} .ap-status .er i{background:var(--danger);} .ap-status .in i{background:var(--info);} /* ========================================================================== Redesign phase 1 -- shared building blocks (nothing below changes an existing page by itself) ========================================================================== */ /* one focus ring everywhere; :where() keeps specificity at 0 so every existing, more specific focus rule still wins */ :where(a,button,input,select,textarea,summary,[role="button"],[role="switch"],[role="radio"],[role="tab"],[tabindex]:not([tabindex="-1"])):focus-visible{ outline:2px solid var(--focus-ring);outline-offset:2px; } /* tabindex="-1" = focus moved there by code for screen readers (page title, skip-link target), never a control: no ring */ :where([tabindex="-1"]):focus{outline:none;} /* card = the generic surface; .set-card gets the same accent hairline on its top edge (no animation, so no cost) */ .card{position:relative;background:var(--panel);border:1px solid rgb(var(--fg-rgb) / .09);border-radius:var(--r-card);padding:var(--sp-5) var(--sp-6);box-shadow:var(--shadow-rest);} .card:hover{border-color:rgb(var(--core-rgb) / .28);box-shadow:var(--shadow-hover);} .card::before,#page-settings .set-card::before{ content:'';position:absolute;top:0;left:var(--r-card);right:var(--r-card);height:1px;background:var(--card-hairline);opacity:.6;pointer-events:none; } /* segmented control (spec 4.7): replaces .tabs / .rt-seg / .sec-seg page by page. Markup:
The selected segment can be marked either with aria-checked="true" or with .on */ .seg{display:inline-flex;align-items:stretch;gap:2px;padding:2px;min-height:40px;box-sizing:border-box;background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-ctl);} .seg>button{flex:1 1 0;display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);padding:0 var(--sp-4);border:none;background:none;border-radius:calc(var(--r-ctl) - 3px); font:var(--t-label);font-size:13px;color:var(--text-soft);cursor:pointer;white-space:nowrap; transition:color var(--dur-fast),background var(--dur-fast),box-shadow var(--dur-fast);} .seg>button:hover{color:var(--text);} .seg>button[aria-checked="true"],.seg>button[aria-pressed="true"],.seg>button.on,.seg>button.active{background:var(--panel);color:var(--text);box-shadow:var(--shadow-rest);} .seg>button:disabled{opacity:.45;cursor:default;} /* badge / status dot (spec 4.7): tinted with the status colour, never decoration */ .badge{display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 var(--sp-2);border-radius:var(--r-pill);font:var(--t-caption);letter-spacing:.02em; color:var(--text-soft);background:rgb(var(--fg-rgb) / .08);white-space:nowrap;} .badge.ok{color:var(--success);background:rgb(var(--success-rgb) / .14);} .badge.warn{color:var(--warning);background:rgb(var(--warning-rgb) / .14);} .badge.info{color:var(--info);background:rgb(var(--info-rgb) / .14);} .badge.danger{color:var(--danger);background:rgb(var(--danger-rgb) / .14);} .badge.dot::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;} /* banner: a short message inside a card */ .banner{display:block;padding:var(--sp-2) var(--sp-3);border-radius:var(--r-ctl);font-size:12.5px;line-height:1.45;color:var(--text-soft);background:rgb(var(--info-rgb) / .12);overflow-wrap:anywhere;} /* ==== style/home/home.css ==== */ /* ========================================================================== home.css -- Home page: orb stage, caption, hint, Today card + Today sheet. Markup: index.html #page-home, #todaySheet. JS: js/home.js (orb), js/today.js (card + sheet). ========================================================================== */ #page-home{align-items:stretch;justify-content:flex-start;position:relative;} .home-greet{font-size:13px;color:var(--muted);} /* the name inside the header title (phase 3); see the Home grid section at the end */ .stage{width:var(--orb,min(400px,72vw));aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;position:relative;cursor:pointer;transition:transform 1.4s ease,opacity 1.4s ease;} canvas#org{width:100%;height:100%;display:block;} /* ---- wake flash: quick radial burst the instant the orb is tapped/woken (js/home.js SARA.wake) ---- */ .stage.wake-flash::after{ content:'';position:absolute;inset:-6%;border-radius:50%;pointer-events:none; background:radial-gradient(circle, rgb(var(--core-rgb) / .55) 0%, rgb(var(--core-rgb) / 0) 68%); animation:wakeFlash .6s cubic-bezier(.2,.8,.2,1) forwards; } @keyframes wakeFlash{0%{opacity:0;transform:scale(.55);}25%{opacity:1;}100%{opacity:0;transform:scale(1.55);}} @media (prefers-reduced-motion:reduce){.stage.wake-flash::after{display:none;}} /* ---- Ambient mode (js/home.js) ---- Tier 1: just a calmer caption + a touch less orb energy (handled in JS), no layout change. Tier 2: orb shrinks into the background and a clock + "next up" line take over as the focal point. All state changes are one-off CSS transitions, never a looping animation, so they stay appropriate even under prefers-reduced-motion (the orb's own continuous motion is separately toned down there). */ #page-home.ambient-t2 .stage{transform:scale(.5);opacity:.55;} #page-home.ambient-t2 .today-card, #page-home.ambient-t2 .clock-card, #page-home.ambient-t2 .home-greet, #page-home.ambient-t2 .home-caption, #page-home.ambient-t2 .home-hint, #page-home.ambient-t2 .quick-dock{opacity:.2;transition:opacity 1s ease;} .ambient-panel{ position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px; pointer-events:none;opacity:0;transition:opacity 1.2s ease; } .ambient-panel.show{opacity:1;} .ambient-clock{font-size:clamp(48px,9vw,80px);font-weight:300;letter-spacing:.02em;color:var(--text-soft);font-variant-numeric:tabular-nums;} .ambient-next{font-size:13px;color:var(--muted);min-height:16px;} @media (prefers-reduced-motion:reduce){ .stage,.ambient-panel,#page-home.ambient-t2 .today-card,#page-home.ambient-t2 .clock-card, #page-home.ambient-t2 .home-greet,#page-home.ambient-t2 .home-caption,#page-home.ambient-t2 .home-hint{transition:opacity .01s,transform .01s;} } .home-caption{margin-top:2px;font-size:14.5px;color:var(--muted);letter-spacing:.01em;min-height:20px;transition:color .5s,opacity .25s,transform .25s;} .home-caption.swap{opacity:0;transform:translateY(4px);} .core-idle{color:var(--muted);} .core-listening{color:var(--core);} .core-thinking{color:var(--think);} .core-speaking{color:var(--speak);} /* working = halfway between --think and --speak (same mix js/home.js uses for the orb); hex is the fallback for old webviews */ .core-working{color:#ba98b4;color:color-mix(in srgb,var(--think) 50%,var(--speak));} .home-hint{margin-top:6px;font-size:11.5px;color:var(--muted);min-height:16px;max-width:60vw;text-align:center;opacity:0;animation:fadeIn 1.8s ease forwards 1.1s;} .home-hint.muted{visibility:hidden;} /* hidden while the live caption uses its spot */ @keyframes fadeIn{to{opacity:1;}} /* ---- Live caption: user's speech as it is recognised (js/home.js, ev:transcript_partial) ---- Zero-height anchor after #homeCaption -> the line floats where the hint sits and never shifts the orb. Real-time text: no typing animation, only a soft fade/slide for show/hide. */ .home-live-anchor{position:relative;width:0;height:0;flex:none;align-self:center;} .home-live{ position:absolute;top:6px;left:0;width:min(520px,84vw);height:20px; display:flex;justify-content:center;overflow:hidden;white-space:nowrap; font-size:14px;line-height:20px;letter-spacing:.01em;color:var(--text-soft); opacity:0;transform:translate(-50%,4px);pointer-events:none; /* never steal taps from the orb / buttons */ transition:opacity .18s ease,transform .22s ease; } .home-live.show{opacity:1;transform:translate(-50%,0);} .home-live-text{flex:none;} .home-live.long{justify-content:flex-end;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16%);mask-image:linear-gradient(90deg,transparent 0,#000 16%);} .home-live.still,.home-live.still.show{transform:translate(-50%,0);transition:opacity .01s;} @media (prefers-reduced-motion:reduce){ .home-live,.home-live.show{transform:translate(-50%,0);transition:opacity .01s;} } .home-actions{margin-top:10px;display:flex;gap:6px;} .link-btn[hidden]{display:none;} /* ---- shared glass top-highlight for the floating cards/pills below (today/next/plan/activity) ---- All four already establish their own positioning context (position:absolute), so this only needs the pseudo-element itself -- a thin light seam along the top inner edge, like light catching glass. */ .today-card::before,.next-card::before,.plan-card::before,.home-activity::before{ content:'';position:absolute;top:0;left:14%;right:14%;height:1px;border-radius:1px; background:linear-gradient(90deg,transparent,rgb(var(--shine-rgb) / .16),transparent); pointer-events:none; } /* ---- Today card (bottom-left of Home) ---- */ .today-card{ position:absolute;left:32px;bottom:84px;width:250px;padding:16px 18px;border-radius:20px; box-shadow:var(--shadow-rest);cursor:pointer; transition:border-color .2s,transform var(--dur-med,.2s) var(--ease-premium,ease),box-shadow var(--dur-med,.3s) var(--ease-premium,ease); animation:pageIn .6s ease .3s both; } .today-card:hover{--glow:rgb(var(--core-rgb) / .22);border-color:rgb(var(--core-rgb) / .45);transform:translateY(-3px);box-shadow:var(--shadow-hover);} .today-card:active{transform:translateY(-1px) scale(.985);} .tc-top{display:flex;align-items:center;gap:14px;} .tc-temp{font-size:34px;font-weight:500;line-height:1;font-variant-numeric:tabular-nums;} .tc-cond{font-size:13.5px;color:var(--text-soft);} .tc-sub{font-size:11.5px;color:var(--muted);margin-top:3px;} .tc-next{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:7px;} .tc-item{display:flex;gap:10px;font-size:12.5px;color:var(--text-soft);} .tc-item .tc-t{width:58px;flex:none;color:var(--muted);font-variant-numeric:tabular-nums;} .tc-item .tc-x{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .tc-empty{font-size:12px;color:var(--muted);} /* ---- Next card (bottom-right of Home; js/today.js renderNext) ---- */ .next-card{ position:absolute;right:32px;bottom:84px;width:250px;padding:16px 18px;border-radius:20px; box-shadow:var(--shadow-rest);cursor:pointer; transition:border-color .2s,transform var(--dur-med,.2s) var(--ease-premium,ease),box-shadow var(--dur-med,.3s) var(--ease-premium,ease); animation:pageIn .6s ease .3s both; } .next-card[hidden]{display:none;} .next-card:hover{--glow:rgb(var(--core-rgb) / .22);border-color:rgb(var(--core-rgb) / .45);transform:translateY(-3px);box-shadow:var(--shadow-hover);} .next-card:active{transform:translateY(-1px) scale(.985);} .nx-label{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;} .nx-title{font-size:14px;line-height:1.35;color:var(--text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;} .nx-rel{margin-top:6px;font-size:12px;color:var(--core);} #page-home.ambient-t2 .next-card{opacity:.2;transition:opacity 1s ease;} /* ---- Today sheet (expanded card) ---- */ .sheet{width:min(560px,100%);max-height:88vh;overflow-y:auto;background:var(--panel);border:1px solid var(--line);border-radius:24px;padding:24px 28px 26px;transform:translateY(8px) scale(.98);transition:transform .28s cubic-bezier(.22,1,.36,1);} .overlay.open .sheet{transform:translateY(0) scale(1);} .sheet-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;} .sheet-head .page-title{font-size:18px;} .weather-hero{display:flex;align-items:baseline;gap:14px;margin:6px 0 6px;} .weather-temp{font-size:40px;font-weight:500;} .weather-cond{font-size:15px;color:var(--text-soft);} .weather-meta{font-size:12.5px;color:var(--muted);margin-bottom:18px;} .qa-row{display:flex;gap:10px;margin:4px 0 6px;flex-wrap:wrap;} .qa-btn{display:flex;align-items:center;gap:8px;background:var(--panel-2);border:1px solid var(--line);border-radius:999px;padding:8px 14px;font-size:12.5px;color:var(--text-soft);cursor:pointer;transition:border-color .2s,color .2s,transform .12s,box-shadow .2s;} .qa-btn:hover{box-shadow:0 0 12px rgb(var(--core-rgb) / .10);} .qa-btn:active{transform:scale(.96);} .qa-btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.6;} .qa-btn.on{border-color:rgb(var(--core-rgb) / .45);color:var(--core);} .notice-row{display:flex;align-items:center;gap:12px;padding:11px 4px;border-bottom:1px solid var(--line);font-size:13.5px;} .notice-row .n-dot{width:7px;height:7px;border-radius:50%;flex:none;} .notice-row.warn .n-dot{background:var(--danger);box-shadow:0 0 6px rgb(var(--danger-rgb) / .6);} .notice-row.info .n-dot{background:var(--core);box-shadow:0 0 6px rgb(var(--core-rgb) / .5);} .notice-row.think .n-dot{background:var(--think);box-shadow:0 0 6px rgb(var(--think-rgb) / .5);} .notice-row .n-text{flex:1;color:var(--text-soft);} .notice-row .n-when{font-size:11px;color:var(--muted);flex:none;} .sheet .row{max-width:none;} /* ---- Live Activity pill (what Sara is doing right now; sits at the bottom of the orb stage) ---- Driven by js/home.js (ev:activity). data-state = start | done | error. */ .home-activity{ position:absolute;left:50%;bottom:4%;transform:translate(-50%,6px); max-width:92%;display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px; box-shadow:var(--shadow-rest); font-size:12.5px;color:var(--text-soft);white-space:nowrap; opacity:0;pointer-events:none; /* never steal the orb's tap-to-wake click */ transition:opacity .25s,transform .25s,border-color .3s,color .3s; } .home-activity[hidden]{display:none;} .home-activity.show{opacity:1;transform:translate(-50%,0);} .act-glyph{flex:none;font-size:11px;line-height:1;} .act-text{min-width:0;overflow:hidden;text-overflow:ellipsis;} .home-activity[data-state="start"] .act-glyph{color:var(--core);animation:actPulse 1.2s ease-in-out infinite;} .home-activity[data-state="done"]{border-color:rgb(var(--core-rgb) / .45);color:var(--core);} .home-activity[data-state="error"]{border-color:rgb(var(--danger-rgb) / .5);color:var(--danger);} @keyframes actPulse{50%{opacity:.3;}} @media (prefers-reduced-motion:reduce){ .home-activity{transition:opacity .01s;} .home-activity[data-state="start"] .act-glyph{animation:none;} } /* ---- Plan progress card: live step list for a running multi-step plan (js/home.js, ev:plan_progress) ---- */ .plan-card{ position:absolute;left:50%;bottom:12%;transform:translateX(-50%); max-width:92%;min-width:220px;padding:10px 16px;border-radius:14px; box-shadow:var(--shadow-rest); font-size:12.5px;color:var(--muted); } .plan-card[hidden]{display:none;} .plan-card-title{font-size:12.5px;color:var(--core);margin-bottom:6px;} .plan-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;} .plan-steps li{display:flex;align-items:center;gap:8px;color:var(--text-soft);} .plan-steps li .plan-step-icon{flex:none;width:14px;text-align:center;} .plan-steps li.done{color:var(--muted);} /* ---- unified card spotlight: same cursor-following soft light as the clock card (--spot-x/--spot-y set by js/fx.js, rAF-throttled, not attached under reduced-motion). Decorative only; never intercepts clicks. ---- */ .today-card::after,.next-card::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s ease; background:radial-gradient(150px 150px at var(--spot-x,50%) var(--spot-y,0%),rgb(var(--shine-rgb) / .06),transparent 70%);} .today-card:hover::after,.next-card:hover::after{opacity:1;} /* ###################################################################### Merged from home-plus.css (formerly a separate file layered on this one) ###################################################################### */ /* ========================================================================== home-plus.css -- styles for js/home-plus.js: orb presence, sky light, customize panel. Load LAST (after chat-plus.css). ========================================================================== */ /* ---------------------------------------------------------------- orb presence */ #stage[data-orb="listening"]{--orb-rgb:var(--core-rgb);} #stage[data-orb="thinking"],#stage[data-orb="working"]{--orb-rgb:var(--think-rgb);} #stage[data-orb="speaking"]{--orb-rgb:var(--speak-rgb);} .orb-fx{position:absolute;inset:-6%;pointer-events:none;z-index:0;--lvl:0;--orb-rgb:var(--core-rgb);} .orb-halo{position:absolute;inset:16%;border-radius:50%;opacity:0;scale:calc(.92 + var(--lvl) * .38); background:radial-gradient(circle,rgb(var(--orb-rgb) / .20),rgb(var(--orb-rgb) / 0) 66%);transition:opacity .7s ease;} #stage[data-orb="listening"] .orb-halo,#stage[data-orb="speaking"] .orb-halo{opacity:1;} #stage[data-orb="thinking"] .orb-halo,#stage[data-orb="working"] .orb-halo{opacity:.55;} .orb-rip{position:absolute;inset:20%;border-radius:50%;border:1px solid rgb(var(--orb-rgb) / .5);opacity:0;} .orb-sweep{position:absolute;inset:9%;border-radius:50%;opacity:0;transition:opacity .6s ease; background:conic-gradient(from 0deg,transparent 0 68%,rgb(var(--orb-rgb) / .34) 92%,transparent 100%); -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));} #stage[data-orb="thinking"] .orb-sweep,#stage[data-orb="working"] .orb-sweep{opacity:1;} @media (prefers-reduced-motion:no-preference){ #stage[data-orb="listening"] .orb-rip{animation:orbRip 2.7s cubic-bezier(.2,.6,.3,1) infinite;} #stage[data-orb="listening"] .orb-rip:nth-child(3){animation-delay:.9s;} #stage[data-orb="listening"] .orb-rip:nth-child(4){animation-delay:1.8s;} #stage[data-orb="thinking"] .orb-sweep,#stage[data-orb="working"] .orb-sweep{animation:orbSweep 2.6s linear infinite;} #stage[data-orb="working"] .orb-sweep{animation-duration:1.7s;} } @keyframes orbRip{0%{opacity:.5;transform:scale(.82);}100%{opacity:0;transform:scale(1.55);}} @keyframes orbSweep{to{transform:rotate(360deg);}} html[data-quality="low"] .orb-fx,#page-home.hw-hide-fx .orb-fx{display:none;} #page-home.hw-hide-ring #stage::before{display:none;} /* ---------------------------------------------------------------- sky light */ @property --sun-c{syntax:'';inherits:true;initial-value:rgba(0,0,0,0);} @property --hz-c{syntax:'';inherits:true;initial-value:rgba(0,0,0,0);} @property --top-c{syntax:'';inherits:true;initial-value:rgba(0,0,0,0);} @property --sx{syntax:'';inherits:true;initial-value:50%;} @property --sy{syntax:'';inherits:true;initial-value:40%;} .home-sky{position:absolute;inset:0;pointer-events:none;z-index:0; background: radial-gradient(34% 42% at var(--sx) var(--sy),var(--sun-c),transparent 70%), radial-gradient(95% 55% at 50% 118%,var(--hz-c),transparent 70%), linear-gradient(180deg,var(--top-c),transparent 55%); transition:--sun-c 8s ease,--hz-c 8s ease,--top-c 8s ease,--sx 3s ease,--sy 3s ease,opacity 1s ease;} .home-sky[data-tod="dawn"]{--sun-c:rgba(255,196,140,.16);--hz-c:rgba(255,160,120,.11);--top-c:rgba(170,150,220,.05);} .home-sky[data-tod="morning"]{--sun-c:rgba(255,228,170,.14);--hz-c:rgba(120,220,200,.05);--top-c:rgba(160,210,255,.05);} .home-sky[data-tod="afternoon"]{--sun-c:rgba(210,230,255,.12);--hz-c:rgba(0,0,0,0);--top-c:rgba(150,190,255,.06);} .home-sky[data-tod="evening"]{--sun-c:rgba(255,150,90,.18);--hz-c:rgba(255,120,90,.12);--top-c:rgba(140,90,200,.06);} .home-sky[data-tod="night"]{--sun-c:rgba(150,180,255,.12);--hz-c:rgba(40,70,160,.10);--top-c:rgba(60,90,200,.06);} :root[data-theme="oat"] .home-sky{opacity:.6;} :root:is([data-theme="ink"],[data-theme="lime"]) .home-sky{opacity:.75;} #page-home.ambient-t2 .home-sky{opacity:.5;} html[data-quality="low"] .home-sky,#page-home.hw-hide-sky .home-sky{display:none;} /* faint stars: night only, High quality only */ .home-sky::after{content:'';position:absolute;inset:0;opacity:0;transition:opacity 4s ease; background-image: radial-gradient(1px 1px at 8% 14%,rgba(255,255,255,.75),transparent),radial-gradient(1px 1px at 17% 38%,rgba(255,255,255,.5),transparent), radial-gradient(1.4px 1.4px at 26% 9%,rgba(255,255,255,.8),transparent),radial-gradient(1px 1px at 34% 27%,rgba(255,255,255,.45),transparent), radial-gradient(1px 1px at 47% 12%,rgba(255,255,255,.7),transparent),radial-gradient(1.4px 1.4px at 58% 33%,rgba(255,255,255,.55),transparent), radial-gradient(1px 1px at 66% 8%,rgba(255,255,255,.8),transparent),radial-gradient(1px 1px at 74% 24%,rgba(255,255,255,.5),transparent), radial-gradient(1.4px 1.4px at 83% 15%,rgba(255,255,255,.75),transparent),radial-gradient(1px 1px at 91% 36%,rgba(255,255,255,.55),transparent), radial-gradient(1px 1px at 12% 58%,rgba(255,255,255,.4),transparent),radial-gradient(1px 1px at 41% 52%,rgba(255,255,255,.35),transparent), radial-gradient(1px 1px at 78% 56%,rgba(255,255,255,.4),transparent),radial-gradient(1px 1px at 95% 12%,rgba(255,255,255,.6),transparent);} html[data-quality="high"] .home-sky[data-tod="night"]::after{opacity:1;} @media (prefers-reduced-motion:no-preference){html[data-quality="high"] .home-sky[data-tod="night"]::after{animation:skyTwinkle 7s ease-in-out infinite alternate;}} @keyframes skyTwinkle{from{opacity:.55;}to{opacity:1;}} :root[data-theme="oat"] .home-sky::after{display:none;} /* ---------------------------------------------------------------- widget visibility (js/home-plus.js) */ #page-home.hw-hide-clock .clock-card,#page-home.hw-hide-today .today-card,#page-home.hw-hide-next .next-card, #page-home.hw-hide-greet .home-greet,#page-home.hw-hide-hint .home-hint{display:none !important;} /* ---------------------------------------------------------------- customize panel */ .home-pop{position:absolute;left:50%;bottom:92px;translate:-50% 12px;width:min(360px,88vw);max-height:min(72vh,540px);overflow:auto;z-index:20; background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:14px 14px 8px;box-shadow:var(--shadow-hover,0 18px 40px -16px rgba(0,0,0,.7)); opacity:0;pointer-events:none;transition:opacity .25s ease,translate .38s var(--ease-premium,cubic-bezier(.16,1,.3,1));} .home-pop[hidden]{display:none;} .home-pop.open{opacity:1;translate:-50% 0;pointer-events:auto;} .hp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;} .hp-title{font-size:13px;font-weight:600;color:var(--text);letter-spacing:.01em;} .hp-x{border:none;background:none;color:var(--muted);font-size:20px;line-height:1;width:26px;height:26px;border-radius:8px;cursor:pointer;transition:color .15s ease,background .15s ease;} .hp-x:hover{color:var(--text);background:var(--panel-2);} .hp-presets{display:flex;gap:8px;margin-bottom:8px;} .hp-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 2px;border-top:1px solid var(--line);} .hp-row:first-child{border-top:none;} .hp-name{font-size:13px;color:var(--text);} .hp-sub{font-size:11.5px;color:var(--muted);margin-top:1px;} .hp-foot{display:flex;justify-content:flex-end;padding:6px 0 4px;border-top:1px solid var(--line);} @media (prefers-reduced-motion:reduce){.home-pop{transition:opacity .01s;translate:-50% 0;}} /* F3: soft cross-fade while js/home/hints.js swaps the hint line */ .home-hint{transition:opacity .32s ease;} .home-hint.hint-swap{opacity:0;} /* ---- F7: "Last 7 days" usage card (top right of Home; js/home/usage-card.js). Bars grow with transform only. ---- */ .usage-card{ position:absolute;right:32px;top:84px;width:190px;padding:12px 14px 10px;border-radius:16px; background:var(--glass-bg);border:1px solid var(--glass-border);box-shadow:var(--shadow-rest);cursor:pointer; transition:border-color .2s,translate .28s var(--ease-premium,ease),box-shadow .28s ease; } .usage-card[hidden]{display:none;} .usage-card:hover{border-color:rgb(var(--core-rgb) / .45);} .uc-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:8px;} .uc-label{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);} .uc-total{font-size:16px;font-weight:500;color:var(--text);font-variant-numeric:tabular-nums;} .uc-bars{display:flex;align-items:flex-end;gap:5px;height:38px;} .uc-bar{flex:1;height:100%;border-radius:3px;background:var(--core);opacity:.45;transform-origin:50% 100%;transform:scaleY(var(--v,.06));} .uc-bar.today{opacity:.95;} .usage-card:not(.ready) .uc-bar{transform:scaleY(.04);} @media (prefers-reduced-motion:no-preference){.uc-bar{transition:transform .55s var(--ease-premium,cubic-bezier(.22,1,.36,1));}} .uc-days{display:flex;gap:5px;margin-top:4px;} .uc-days span{flex:1;text-align:center;font-size:10px;color:var(--muted);} #page-home.ambient-t2 .usage-card{opacity:.2;transition:opacity 1s ease;} @media (max-width:900px){.usage-card{display:none;}} /* ###################################################################### Redesign phase 3 -- Home grid: header, three columns, quick dock (spec section 6). Nothing on Home is absolutely positioned any more, except the things js/home/home.js layers over the whole page (sky, ambient clock, customize panel) and the activity chip inside the orb stage. ###################################################################### */ .home-header{width:100%;max-width:var(--content-b);margin:0 auto;padding:0 var(--pad-x);} .page-title .home-greet{font:inherit;color:inherit;} #homeGreetComma[hidden]{display:none;} #page-home .home-grid{ flex:1;min-height:0;width:100%;max-width:var(--content-b);margin:0 auto;box-sizing:border-box;padding:var(--pad-top) var(--pad-x) var(--pad-bottom); display:grid;grid-template-columns:288px minmax(0,1fr) 288px;grid-template-rows:auto 1fr auto;gap:var(--gutter-section); grid-template-areas:"clock center usage" ". center ." "today center next"; } #page-home .home-grid > .clock-card{grid-area:clock;} #page-home .home-grid > .today-card{grid-area:today;} #page-home .home-grid > .usage-card{grid-area:usage;} #page-home .home-grid > .next-card{grid-area:next;} #page-home .home-grid > .home-center{grid-area:center;} #page-home .home-center{--orb:min(400px,36vw,calc(100vh - 360px));display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;} /* the four cards: same surface as every card (spec 4.2), pinned by the grid instead of left/right/bottom offsets */ #page-home .home-grid > :is(.clock-card,.today-card,.usage-card,.next-card){ position:relative;left:auto;right:auto;top:auto;bottom:auto;width:auto;box-sizing:border-box;border-radius:var(--r-card); background:var(--panel);border:1px solid rgb(var(--fg-rgb) / .09);box-shadow:var(--shadow-rest);align-self:start; } #page-home .home-grid > .today-card,#page-home .home-grid > .next-card{align-self:end;} #page-home .home-grid > :is(.clock-card,.today-card,.usage-card,.next-card)::before{ content:'';position:absolute;top:0;left:var(--r-card);right:var(--r-card);height:1px;border-radius:0;background:var(--card-hairline);opacity:.6;pointer-events:none; } #page-home .home-grid > :is(.clock-card,.today-card,.usage-card,.next-card):hover{border-color:rgb(var(--core-rgb) / .28);box-shadow:var(--shadow-hover);} /* clock card 288 x 168: big time, thin progress bar on the bottom edge */ #page-home .clock-card{height:168px;padding:var(--sp-5) var(--sp-6) var(--sp-4);display:flex;flex-direction:column;justify-content:center;} #page-home .clock-card .cc-greet{display:none;} /* the greeting is the page title now */ #page-home .clock-card .cc-time{font:var(--t-display);font-variant-numeric:tabular-nums;} #page-home .clock-card .cc-ampm,#page-home .clock-card .cc-sec{font-size:14px;} #page-home .clock-card .cc-sec{color:var(--muted);opacity:1;} #page-home .clock-card .cc-date{font-size:13px;} #page-home .clock-card .cc-bar{position:absolute;left:0;right:0;bottom:0;height:4px;margin:0;border-radius:0;} #page-home .today-card{min-height:176px;padding:var(--sp-5) var(--sp-6);} #page-home .today-card .tc-temp{font-size:32px;} #page-home .usage-card{min-height:156px;padding:var(--sp-4) var(--sp-5);} #page-home .usage-card .uc-total{font:var(--t-stat);} #page-home .usage-card .uc-bars{height:56px;} #page-home .usage-card .uc-bar{border-radius:var(--sp-1);} #page-home .usage-card .uc-days span{font-size:10px;} #page-home .next-card{min-height:112px;padding:var(--sp-4) var(--sp-5);} #page-home .next-card .nx-title{font:var(--t-section);font-weight:500;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} /* orb halo ring and the small stuff under it */ #page-home .stage{margin-bottom:var(--sp-5);} #page-home .stage::before{content:'';position:absolute;inset:-5%;border-radius:50%;border:1px solid rgb(var(--core-rgb) / .25);pointer-events:none;} #page-home .plan-card{position:relative;left:auto;bottom:auto;transform:none;width:360px;max-width:100%;margin-top:var(--sp-2);box-sizing:border-box;border-radius:var(--r-sm);} #page-home .home-caption{margin-top:var(--sp-3);font-size:15px;font-weight:500;} #page-home .home-hint{font-size:13px;max-width:100%;} #page-home .home-actions{margin-top:var(--sp-3);gap:var(--sp-2);} #page-home .home-actions .link-btn{height:32px;padding:0 var(--sp-3);border-radius:var(--r-ctl);background:var(--panel-2);border:1px solid var(--line);color:var(--text-soft);font-size:12px;letter-spacing:0;} #page-home .home-actions .link-btn:hover{border-color:var(--core);color:var(--text);} /* quick dock: the five switches that used to be the first Settings card. Same buttons, same data-proxy, same real toggles behind them. */ .quick-dock{display:flex;gap:var(--sp-2);padding:10px;margin-top:var(--sp-5);border-radius:var(--r-hero);background:var(--panel);border:1px solid rgb(var(--fg-rgb) / .09);box-shadow:var(--shadow-rest);} .quick-dock .qc-tile{position:relative;width:72px;height:52px;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:0; border:1px solid transparent;border-radius:var(--r-sm);background:none;color:var(--muted);cursor:pointer; transition:color var(--dur-fast),background var(--dur-fast),border-color var(--dur-fast),transform var(--dur-fast) var(--ease-spring);} .quick-dock .qc-tile:hover{color:var(--text);background:rgb(var(--fg-rgb) / .05);} .quick-dock .qc-tile:active{transform:scale(.97);} .quick-dock .qc-tile.on{color:var(--text);background:rgb(var(--core-rgb) / .14);border-color:rgb(var(--core-rgb) / .35);} .quick-dock .qc-name{font:var(--t-caption);letter-spacing:0;color:inherit;} .quick-dock .qc-sw{position:absolute;top:6px;right:6px;width:6px;height:6px;border-radius:50%;background:var(--core);opacity:0;transform:scale(.4);transition:opacity var(--dur-fast),transform var(--dur-med) var(--ease-spring);} .quick-dock .qc-tile.on .qc-sw{opacity:1;transform:none;} /* 1000-1179 px: narrower side columns, smaller orb, no second line on the Today card */ @media (max-width:1179.98px){ #page-home .home-grid{grid-template-columns:232px minmax(0,1fr) 232px;gap:var(--gutter);} #page-home .home-center{--orb:min(320px,36vw,calc(100vh - 360px));} #page-home .today-card .tc-sub{display:none;} #page-home .clock-card .cc-time{font-size:44px;} } /* under 1100 px: the Usage card goes, the Next card joins the Today card on the left */ @media (max-width:1099.98px){ #page-home .home-grid{grid-template-columns:232px minmax(0,1fr);grid-template-areas:"clock center" ". center" "today center" "next center";grid-template-rows:auto 1fr auto auto;} #page-home .home-grid > .usage-card{display:none;} #page-home .home-grid > .next-card{align-self:end;} } @media (prefers-reduced-motion:reduce){.quick-dock .qc-tile,.quick-dock .qc-sw{transition:none;}} /* ==== style/home/clock-card.css ==== */ /* ========================================================================== clock-card.css -- Clock Card: compact widget on Home (top-left, replaces the old plain #timeVal text) + the expanded clock/timer/stopwatch sheet it opens into. Themes are scoped to [data-clock-theme] on .clock-card / .clock-sheet only -- they never touch the rest of the SARA theme (see tokens.css). JS: js/clock-card.js. Markup: index.html #clockCard, #clockSheet. ========================================================================== */ .clock-card{ --clock-accent: var(--core); --clock-accent-soft: rgb(var(--core-rgb) / .4); --clock-glow: rgb(var(--core-rgb) / .16); --clock-track: var(--line); position:absolute;left:32px;top:28px;width:210px;padding:14px 18px 16px;border-radius:14px; cursor:pointer;overflow:hidden; transition:border-color .2s,transform .2s,box-shadow .3s,background-color .4s ease; animation:pageIn .6s ease .15s both; } .clock-card:hover{border-color:var(--clock-accent-soft);transform:translateY(-2px);box-shadow:0 0 22px var(--clock-glow);} .clock-card:active{transform:translateY(0) scale(.985);} .clock-card:focus-visible{outline:2px solid var(--clock-accent-soft);outline-offset:2px;} /* ---- hover spotlight: a soft light following the cursor, set via --spot-x/--spot-y (js/clock-card.js, pointermove, same rAF-throttle pattern as fx.js's ambient parallax). Purely decorative overlay, never intercepts clicks, and skipped entirely under reduced-motion (no listener attached there). ---- */ .clock-card::after{ content:'';position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s ease; background:radial-gradient(160px 160px at var(--spot-x,50%) var(--spot-y,0%), rgb(var(--shine-rgb) / .07), transparent 70%); } .clock-card:hover::after{opacity:1;} @media (prefers-reduced-motion:reduce){.clock-card::after{display:none;}} .cc-greet{font-size:11.5px;color:var(--text-soft);letter-spacing:.02em;} .cc-modelabel{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--clock-accent);} .cc-timewrap{display:flex;align-items:baseline;gap:4px;margin:4px 0 2px;} .cc-time{font-size:28px;font-weight:500;line-height:1;font-variant-numeric:tabular-nums;color:var(--text);} .cc-ampm{font-size:12px;color:var(--muted);} .cc-sec{margin-left:4px;font-size:12px;color:var(--clock-accent);font-variant-numeric:tabular-nums;opacity:.85;} .cc-date{font-size:12px;color:var(--muted);min-height:15px;} .cc-status{font-size:11.5px;color:var(--clock-accent);margin-top:2px;} .cc-bar{margin-top:10px;height:2px;border-radius:2px;background:var(--clock-track);overflow:hidden;} .cc-bar-fill{height:100%;width:100%;transform:scaleX(0);transform-origin:left center;background:var(--clock-accent);box-shadow:0 0 6px var(--clock-accent);transition:transform .8s linear;} /* js/home/clock-card.js sets scaleX(fraction) */ #page-home.ambient-t2 .clock-card{opacity:.2;transition:opacity 1s ease;} @media (max-width:900px){ .clock-card{width:auto;max-width:calc(50% - 32px);padding:9px 14px;border-radius:999px;} .clock-card .cc-date,.clock-card .cc-bar{display:none;} .cc-time{font-size:17px;} } /* ---- expanded sheet ---- */ .clock-sheet{text-align:center;} .cs-modes{display:flex;gap:8px;justify-content:center;margin:14px 0 22px;} .cs-ring-wrap{position:relative;width:220px;height:220px;margin:0 auto;} .cs-ring{width:100%;height:100%;transform:rotate(-90deg);} .cs-ring-bg{fill:none;stroke:var(--clock-track);stroke-width:6;} .cs-ring-fg{ fill:none;stroke:var(--clock-accent);stroke-width:6;stroke-linecap:round; stroke-dasharray:603;stroke-dashoffset:603;filter:drop-shadow(0 0 6px var(--clock-accent)); transition:stroke-dashoffset .3s linear; } .cs-ring-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:0 20px;} .cs-greet{font-size:13px;color:var(--text-soft);} .cs-modelabel{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--clock-accent);} .cs-time{font-size:42px;font-weight:500;font-variant-numeric:tabular-nums;color:var(--text);} .cs-sub{font-size:12.5px;color:var(--muted);} .cs-status{font-size:12.5px;color:var(--clock-accent);} .cs-panel{margin-top:18px;} .cs-row{display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap;} .cs-row input[type=number]{width:90px;text-align:center;} .cs-controls{margin-top:10px;} .cs-themes{justify-content:center;margin-top:10px;} .clock-sheet{animation:clockPop .28s cubic-bezier(.22,1,.36,1);} @keyframes clockPop{0%{opacity:0;transform:scale(.94);}100%{opacity:1;transform:scale(1);}} /* ---- timer-complete pulse (brief, not a looping animation) ---- */ .clock-sheet.cs-pulse .cs-ring-fg{animation:csCompletePulse .9s ease-out;} @keyframes csCompletePulse{0%{filter:drop-shadow(0 0 6px var(--clock-accent));}40%{filter:drop-shadow(0 0 20px var(--clock-accent));}100%{filter:drop-shadow(0 0 6px var(--clock-accent));}} /* ---- timer countdown urgency: js/clock-card.js adds data-urgent="1" to .clock-sheet (and .clock-card) once remaining time drops under 15%. Colour intentionally reuses --danger (never a new hue), and the pulse is gentle/slow -- this is an ambient cue, not an alarm. ---- */ .clock-sheet[data-urgent="1"] .cs-ring-fg{stroke:var(--danger);filter:drop-shadow(0 0 8px var(--danger));animation:csUrgentPulse 1.1s ease-in-out infinite;} .clock-sheet[data-urgent="1"] .cs-time{color:var(--danger);} @keyframes csUrgentPulse{0%,100%{filter:drop-shadow(0 0 6px var(--danger));}50%{filter:drop-shadow(0 0 16px var(--danger));}} /* ---- stopwatch active "breathing" ring: a slow, low-amplitude opacity/glow cycle while running only (paused = static, no animation -- matches the rest of the app's "state actually reflects reality" rule). ---- */ .clock-sheet[data-sw-running="1"] .cs-ring-bg{animation:csBreathe 3.2s ease-in-out infinite;} @keyframes csBreathe{0%,100%{opacity:1;}50%{opacity:.55;}} /* ---- date reveal: brief fade/slide whenever the sub-line's text changes (mode switch, day rollover). Toggled by js/clock-card.js adding/removing '.reveal' -- CSS only supplies the motion. ---- */ .cc-date.reveal,.cs-sub.reveal{animation:dateReveal .45s var(--ease-premium,ease) both;} @keyframes dateReveal{from{opacity:0;transform:translateY(3px);}to{opacity:1;transform:none;}} /* ---- theme chip: small confirm-pop the instant a theme is picked (js/clock-card.js toggles '.just-picked' off again after ~260ms) -- separate from the chip's normal hover/press motion in components.css. ---- */ #csThemes .chip.just-picked{animation:themePick .32s var(--ease-spring,cubic-bezier(.34,1.56,.64,1));} /* ========================================================================== Themes -- isolated to .clock-card / .clock-sheet via [data-clock-theme]. All stay inside SARA's existing palette (tokens.css: --core/--think/--speak/ --text-soft) -- no new hues, per the "don't clash with the app" requirement. ========================================================================== */ /* Theme 2 -- Aurora: cyan/violet dual glow */ [data-clock-theme="aurora"]{ --clock-accent-soft: rgb(var(--think-rgb) / .4); --clock-glow: rgb(var(--think-rgb) / .18); } [data-clock-theme="aurora"] .cs-ring-fg{filter:drop-shadow(0 0 8px var(--think));} [data-clock-theme="aurora"] .cc-time,[data-clock-theme="aurora"] .cs-time{ background:linear-gradient(90deg,var(--core),var(--think)); -webkit-background-clip:text;background-clip:text;color:transparent; } /* Theme 3 -- Midnight: minimal, low-glow, near-monochrome */ [data-clock-theme="midnight"]{ --clock-accent: var(--text-soft); --clock-accent-soft: rgb(var(--text-soft-rgb) / .35); --clock-glow: transparent; } [data-clock-theme="midnight"] .cs-ring-fg{filter:none;} [data-clock-theme="midnight"] .cc-sec{opacity:.6;} /* Theme 4 -- Glass: soft glassmorphism */ [data-clock-theme="glass"].clock-card, [data-clock-theme="glass"].clock-sheet{ background:rgb(var(--fg-rgb) / .05);backdrop-filter:blur(16px);border-color:rgb(var(--fg-rgb) / .14); } [data-clock-theme="glass"] .cs-ring-bg{stroke:rgb(var(--fg-rgb) / .12);} /* Theme 5 -- Pulse: same cyan accent, gentle animated glow */ [data-clock-theme="pulse"] .cs-ring-fg{animation:csPulseGlow 2.4s ease-in-out infinite;} @keyframes csPulseGlow{0%,100%{filter:drop-shadow(0 0 6px var(--clock-accent));}50%{filter:drop-shadow(0 0 15px var(--clock-accent));}} [data-clock-theme="pulse"] .cc-sec{animation:ccPulseText 2.4s ease-in-out infinite;} @keyframes ccPulseText{0%,100%{opacity:.85;}50%{opacity:1;}} /* ---- smooth theme transition: colour/shadow-bearing properties that change when [data-clock-theme] switches now ease instead of snapping (.clock-card's own background-color transition was added above; this adds the matching ones for the expanded sheet + the ring + the gradient clock-face text, without touching the ring's existing linear countdown transition). ---- */ .clock-sheet{transition:background-color .4s ease,border-color .3s ease;} .cc-time,.cs-time{transition:color .4s ease;} .cs-ring-fg{transition:stroke-dashoffset .3s linear,stroke .4s ease,filter .4s ease;} @media (prefers-reduced-motion:reduce){ .clock-card{animation:none;transition:none;} .clock-sheet{animation:none;} [data-clock-theme="pulse"] .cs-ring-fg,[data-clock-theme="pulse"] .cc-sec, .clock-sheet.cs-pulse .cs-ring-fg{animation:none;} .clock-sheet[data-urgent="1"] .cs-ring-fg,.clock-sheet[data-sw-running="1"] .cs-ring-bg, #csThemes .chip.just-picked{animation:none;} .cc-date.reveal,.cs-sub.reveal{animation:none;} } /* ==== style/chat/chat.css ==== */ /* ========================================================================== chat.css -- Chat page: message log + bottom dock (mic / input / send). Markup: index.html #page-chat. JS: js/chat.js. ========================================================================== */ /* The log is the scroll container (not .page-body) so the sticky-looking dock can live OUTSIDE the scroll edge-fade mask (js/motion.js edgeFade). It bleeds to the page edges (negative margin = --pad-x) so the scrollbar stays at the window edge, and re-centres its 640px column with padding. */ #page-chat .page-body{--pad-x:40px;display:flex;flex-direction:column;padding-bottom:96px;overflow:hidden;} .chat-log{display:flex;flex-direction:column;gap:16px;flex:1;min-height:0;overflow-y:auto;margin:0 calc(var(--pad-x) * -1);padding:0 max(var(--pad-x),calc((100% - 640px) / 2 + var(--pad-x))) 10px;} .chat-log:empty::before{content:'Say "Sara", or type below.';color:var(--muted);font-size:13.5px;text-align:center;margin-top:18vh;} .msg{max-width:80%;font-size:14.5px;line-height:1.55;overflow-wrap:anywhere;animation:msgIn .32s cubic-bezier(.2,.8,.2,1);} .msg.user{align-self:flex-end;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 15px;color:var(--text);} /* Sara's replies are read, so they use the normal text colour; the accent is only a thin bar at the left (the colour used to be the accent itself, which is tiring for long answers and made every reply look like a link or a warning). */ .msg.sara{align-self:flex-start;color:var(--text);padding:2px 2px 2px 13px;border-left:2px solid rgb(var(--core-rgb) / .55);} /* messages from the same sender in a row sit closer together; a time stamp is only shown when the minute changes */ .msg.grp{margin-top:-9px;} .msg .ts.dup{display:none;} .msg.preview{opacity:.6;font-style:italic;} /* ---- thinking dots (js/chat.js showThinking): 3 dots in --think (the orb's thinking colour) travelling as a sine wave ---- */ .msg.thinking{display:flex;align-items:center;gap:5px;padding:10px 4px 8px;color:var(--think);} .msg.thinking .dot{width:6px;height:6px;border-radius:50%;background:currentColor;animation:thinkWave 1.1s ease-in-out infinite;} .msg.thinking .dot:nth-child(2){animation-delay:.15s;} .msg.thinking .dot:nth-child(3){animation-delay:.3s;} @keyframes thinkWave{0%,100%{transform:translateY(0);opacity:.5;}50%{transform:translateY(-5px);opacity:1;}} @media (prefers-reduced-motion:reduce){.msg.thinking .dot{animation:none;opacity:.75;}} /* ---- send fly-up (js/chat.js flyUp): the real bubble waits invisibly while its ghost copy travels from the dock ---- */ .msg.flying{animation:none;} .msg.flying-wait{visibility:hidden;} .msg-ghost{position:fixed;margin:0;max-width:none;z-index:30;pointer-events:none;animation:none;will-change:transform,opacity;} /* ---- streaming blur-to-sharp (js/chat.js revealText): freshly revealed text fades in from a light blur ---- */ .msg-text .new{animation:chunkIn .25s ease-out both;} @media (prefers-reduced-motion:reduce){.msg-text .new{animation:none;}} .msg.sara.streaming::after,.msg.sara.typing::after{content:'â–Ť';margin-left:2px;animation:blink 1s steps(2) infinite;} @keyframes blink{50%{opacity:0;}} .msg .ts{display:block;font-size:10.5px;color:var(--muted);margin-top:5px;font-style:normal;} /* ---- thumbs on assistant replies (js/chat.js attachThumbs): hidden until hover/focus, always shown on touch ---- */ /* the thumbs sit beside the message (they used to reserve an empty line under every reply, which stretched the log and the accent bar) */ .msg-feedback{position:absolute;left:100%;bottom:1px;display:flex;gap:4px;margin:0 0 0 8px;opacity:0;transition:opacity .2s ease;} .msg:hover .msg-feedback,.msg:focus-within .msg-feedback,.msg-feedback:focus-within{opacity:1;} @media (hover:none){.msg-feedback{opacity:1;}} .msg-fb-btn{background:transparent;border:1px solid var(--line);border-radius:999px;padding:2px 9px;font:inherit;font-size:12px;line-height:1.4;color:var(--muted);cursor:pointer;} .msg-fb-btn:hover,.msg-fb-btn:focus-visible{color:var(--text);border-color:var(--core);} .msg-fb-btn:focus-visible{outline:2px solid var(--core);outline-offset:2px;} .msg-fb-btn.is-chosen{color:var(--core);border-color:var(--core);} .msg-fb-btn:disabled{cursor:default;} /* ========================================================================== State-aware command dock. `data-state` on .chat-dock (js/chat.js) drives the "real" states -- idle is the only one CSS reaches on its own, via :hover/ :focus-within, so an explicit state (listening/processing/...) never gets visually overridden by an incidental hover. States: idle -> hover (css) -> focus (css) -> listening | processing | sending | disabled | error (all js-driven, always reverted back to idle/listening). ========================================================================== */ .chat-dock{ flex:none;position:sticky;bottom:0;max-width:640px;width:100%;margin:14px auto 0; display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line); border-radius:14px;padding:8px 8px 8px 16px; box-shadow:0 0 0 0 rgb(var(--core-rgb) / 0); transition:border-color var(--dur-med,.2s) var(--ease-premium,ease),box-shadow var(--dur-med,.2s) var(--ease-premium,ease),opacity .2s ease; } .chat-dock[data-state="idle"]:hover{border-color:rgb(var(--core-rgb) / .22);} .chat-dock[data-state="idle"]:focus-within,.chat-dock[data-state="hover"]{border-color:rgb(var(--core-rgb) / .22);} .chat-dock:focus-within{border-color:rgb(var(--core-rgb) / .45);box-shadow:0 0 0 3px rgb(var(--core-rgb) / .08);} .chat-dock input{flex:1;background:none;border:none;outline:none;color:var(--text);font-size:14px;font-family:inherit;transition:opacity .2s;} .chat-dock input::placeholder{transition:opacity .25s ease;} .chat-dock[data-state="listening"] input::placeholder, .chat-dock[data-state="processing"] input::placeholder{opacity:.45;} /* LISTENING -- mic is live; a slow teal breathing glow around the whole dock (not just the mic button) */ .chat-dock[data-state="listening"]{border-color:rgb(var(--core-rgb) / .5);box-shadow:0 0 0 3px rgb(var(--core-rgb) / .1);animation:dockListen 2.2s ease-in-out infinite;} @keyframes dockListen{0%,100%{box-shadow:0 0 0 3px rgb(var(--core-rgb) / .08);}50%{box-shadow:0 0 0 5px rgb(var(--core-rgb) / .16);}} /* PROCESSING -- Sara is thinking about a reply: a very quiet shimmer sweep across the dock */ .chat-dock[data-state="processing"]{border-color:rgb(var(--think-rgb) / .4);position:relative;overflow:hidden;} .chat-dock[data-state="processing"]::before{ content:'';position:absolute;inset:0;pointer-events:none; background:linear-gradient(100deg,transparent 40%,rgb(var(--think-rgb) / .14) 50%,transparent 60%); background-size:220% 100%;animation:dockShimmer 1.6s ease-in-out infinite; } @keyframes dockShimmer{0%{background-position:120% 0;}100%{background-position:-120% 0;}} /* SENDING -- the instant the send button is pressed / API call in flight (brief, real -- no fake delay) */ .chat-dock[data-state="sending"]{border-color:rgb(var(--core-rgb) / .55);} .chat-dock[data-state="sending"] input{opacity:.7;} /* ERROR -- send failed; a short, low-amplitude shake + danger border, self-clears */ .chat-dock[data-state="error"]{border-color:var(--danger);animation:dockShake .35s ease;} @keyframes dockShake{0%,100%{transform:translateX(0);}25%{transform:translateX(-3px);}75%{transform:translateX(3px);}} /* DISABLED -- assistant paused; dock dims and the input stops accepting focus rings */ .chat-dock[data-state="disabled"]{opacity:.55;} .chat-dock[data-state="disabled"] input{cursor:not-allowed;} @media (prefers-reduced-motion:reduce){ .chat-dock[data-state="listening"],.chat-dock[data-state="processing"]::before,.chat-dock[data-state="error"]{animation:none;} } /* ---- live mic waveform (js/chat.js): 5 bars that slide open beside the mic only while the dock is 'listening' ---- */ .mic-group{display:flex;align-items:center;flex:none;} .mic-wave{display:flex;align-items:center;gap:3px;height:20px;width:0;margin-left:0;overflow:hidden;opacity:0;pointer-events:none;transition:width .28s var(--ease-premium,ease),margin-left .28s var(--ease-premium,ease),opacity .2s ease;} .chat-dock[data-state="listening"] .mic-wave{width:27px;margin-left:10px;opacity:1;} .mic-wave i{flex:none;width:3px;height:18px;border-radius:2px;background:var(--core);transform:scaleY(.16);transform-origin:center;will-change:transform;} @media (prefers-reduced-motion:reduce){.mic-wave{display:none;}} .dock-btn{width:36px;height:36px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex:none;transition:box-shadow .2s,transform var(--dur-fast,.12s) var(--ease-spring,cubic-bezier(.34,1.56,.64,1));} .dock-btn:hover{transform:scale(1.05);} :where(html[data-quality="high"]:not([data-motion="reduce"])) .dock-btn:hover{box-shadow:0 0 0 4px rgb(var(--core-rgb) / .12);} /* hover glow: High tier only */ .dock-btn:active{transform:scale(.9);} .dock-btn.mic{background:var(--panel-2);color:var(--core);} .dock-btn.mic.on{background:var(--core);color:var(--on-core);box-shadow:0 0 0 5px rgb(var(--core-rgb) / .15);} /* mic micro-animation while actually listening -- a slow pulse, reuses .on (already toggled by real status) */ .dock-btn.mic.on svg{animation:micPulse 1.6s ease-in-out infinite;} @keyframes micPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.12);}} .dock-btn.send{background:var(--core);color:var(--on-core);} /* .dock-btn.send already has a teal fill, so its success checkmark (components.css .is-success::after) needs a dark stroke instead of the default teal one, or it would vanish against its own background. */ .dock-btn.send.is-success::after{border-color:var(--on-core);} .dock-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;transition:transform .2s;} @media (prefers-reduced-motion:reduce){.dock-btn.mic.on svg{animation:none;}} .msg-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;} .msg-action{background:none;border:1px solid var(--line);color:var(--text-soft);font-size:11.5px;padding:3px 10px;border-radius:999px;cursor:pointer;transition:border-color .2s,color .2s,transform .12s;} .msg-action:hover{border-color:rgb(var(--core-rgb) / .45);color:var(--core);} .msg-action:active{transform:scale(.95);} .msg-action:disabled{opacity:.5;cursor:default;} /* ###################################################################### Merged from chat-plus.css (formerly a separate file layered on this one) ###################################################################### */ /* ========================================================================== chat-plus.css -- styles for js/chat-plus.js + polish of the typing indicator, caret and suggestion chips. Load LAST. ========================================================================== */ /* ---------- messages: positioning for the hover toolbar ---------- */ #chatLog .msg{position:relative;} .msg.user{border-bottom-right-radius:5px;} /* ---------- hover toolbar: Copy / Edit / Try again ---------- */ .msg-tools{position:absolute;top:-17px;right:6px;display:flex;gap:1px;padding:2px;background:var(--panel);border:1px solid var(--line);border-radius:9px; box-shadow:var(--shadow-rest);opacity:0;translate:0 3px;pointer-events:none;z-index:3;transition:opacity .18s ease,translate .24s var(--ease-premium,cubic-bezier(.16,1,.3,1));} .msg:hover .msg-tools,.msg:focus-within .msg-tools{opacity:1;translate:0 0;pointer-events:auto;} .msg-tool{width:26px;height:22px;display:grid;place-items:center;border:none;background:none;color:var(--text-soft);border-radius:6px;cursor:pointer;transition:color .15s ease,background .15s ease,scale .15s ease;} .msg-tool:hover{color:var(--core);background:rgb(var(--core-rgb) / .12);} .msg-tool:active{scale:.9;} .msg-tool:disabled{opacity:.45;cursor:default;} .msg-tool svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;} .msg-tool.done{color:var(--success,#3fd8c4);} /* "Try again" re-asks the last question, so it is offered only on the newest reply when that reply came from the language model (never after an action such as "close Notepad", which would run the action a second time) */ .msg-tool[data-act="regen"]{display:none;} .msg.sara.is-last-sara[data-route="llm"] .msg-tool[data-act="regen"]{display:grid;} /* the newest model answer keeps its toolbar visible (not only on hover) so "Try again" is not hidden; older replies stay hover-only */ .msg.sara.is-last-sara[data-route="llm"] .msg-tools{opacity:.9;translate:0 0;pointer-events:auto;} @media (hover:none){.msg-tools{opacity:1;translate:0 0;pointer-events:auto;}} /* ---------- markdown ---------- */ .msg-text.md{display:block;white-space:normal;} .md .md-p{margin:0 0 .65em;} .md>:last-child{margin-bottom:0;} .md .md-h{margin:.9em 0 .4em;font-weight:600;color:var(--text);line-height:1.3;} .md .md-h1{font-size:1.3em;}.md .md-h2{font-size:1.18em;}.md .md-h3{font-size:1.07em;}.md .md-h4{font-size:1em;color:var(--text-soft);} .md .md-list{margin:0 0 .65em;padding-left:1.35em;} .md .md-list li{margin:.2em 0;} .md .md-list li::marker{color:rgb(var(--core-rgb) / .7);} .md .md-quote{margin:0 0 .65em;padding:.15em 0 .15em .9em;border-left:2px solid rgb(var(--core-rgb) / .55);color:var(--text-soft);} .md .md-hr{border:none;height:1px;margin:.9em 0;background:linear-gradient(90deg,transparent,var(--line),transparent);} .md strong{color:var(--text);font-weight:600;} .md .md-inline{font:12.5px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;padding:.1em .42em;border-radius:6px;background:var(--panel-2);border:1px solid var(--line);color:var(--text);} .md .md-link{color:var(--core);text-decoration:underline;text-decoration-color:rgb(var(--core-rgb) / .4);text-underline-offset:3px;transition:text-decoration-color .2s ease;} .md .md-link:hover{text-decoration-color:var(--core);} /* ---------- code blocks ---------- */ .md-code{margin:.2em 0 .75em;border:1px solid var(--line);border-radius:12px;background:var(--panel-2);overflow:hidden;color:var(--text);} .md-code-head{display:flex;align-items:center;justify-content:space-between;padding:5px 6px 5px 12px;border-bottom:1px solid var(--line);background:rgb(var(--fg-rgb,255 255 255) / .03);} .md-lang{font:600 10.5px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);} .md-copy{display:inline-flex;align-items:center;gap:6px;border:none;background:none;color:var(--text-soft);font-size:11.5px;padding:4px 8px;border-radius:7px;cursor:pointer;transition:color .15s ease,background .15s ease,scale .15s ease;} .md-copy:hover{color:var(--core);background:rgb(var(--core-rgb) / .12);} .md-copy:active{scale:.95;} .md-copy.done{color:var(--success,#3fd8c4);} .md-copy svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;} .md-code pre{margin:0;padding:11px 14px 12px;overflow-x:auto;font:12.5px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;tab-size:2;} .md-code code{font:inherit;white-space:pre;} .tk-k{color:var(--think,#7aa7ff);}.tk-s{color:var(--success,#7fd18b);}.tk-n{color:var(--warning,#e5c07b);}.tk-f{color:var(--speak,#8be9fd);}.tk-c{color:var(--muted);font-style:italic;} /* ---------- follow mode: jump-to-latest ---------- */ #page-chat .page-body{position:relative;} .chat-jump{position:absolute;left:50%;bottom:92px;translate:-50% 8px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line); background:var(--panel);color:var(--core);cursor:pointer;opacity:0;pointer-events:none;z-index:6;box-shadow:var(--shadow-hover,0 8px 22px -10px rgba(0,0,0,.6)); transition:opacity .22s ease,translate .3s var(--ease-premium,cubic-bezier(.16,1,.3,1)),border-color .2s ease,scale .15s ease;} .chat-jump.show{opacity:1;translate:-50% 0;pointer-events:auto;} .chat-jump:hover{border-color:rgb(var(--core-rgb) / .55);} .chat-jump:active{scale:.92;} .chat-jump svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;} .chat-jump-n{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--core);color:var(--on-core);font-size:10.5px;font-weight:700; line-height:18px;text-align:center;scale:0;transition:scale .25s var(--ease-spring,cubic-bezier(.22,1.45,.36,1));} .chat-jump-n.on{scale:1;} /* ---------- search ---------- */ .chat-find-open{position:absolute;top:0;right:6px;width:30px;height:30px;display:grid;place-items:center;border:1px solid transparent;background:none;color:var(--muted);border-radius:9px;cursor:pointer;z-index:6; transition:color .15s ease,background .15s ease,border-color .15s ease;} .chat-find-open:hover{color:var(--core);background:var(--panel);border-color:var(--line);} .chat-find-open svg,.chat-find>svg,.chat-find-btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;} .chat-find{position:absolute;top:0;left:50%;translate:-50% 0;width:min(440px,calc(100% - 24px));display:flex;align-items:center;gap:6px;padding:5px 6px 5px 12px;z-index:7; background:var(--panel);border:1px solid rgb(var(--core-rgb) / .35);border-radius:12px;box-shadow:var(--shadow-hover,0 10px 26px -12px rgba(0,0,0,.6));color:var(--muted);animation:cfIn .28s var(--ease-premium,cubic-bezier(.16,1,.3,1));} .chat-find[hidden]{display:none;} @keyframes cfIn{from{opacity:0;translate:-50% -6px;}} .chat-find input{flex:1;min-width:0;background:none;border:none;outline:none;color:var(--text);font:inherit;font-size:13.5px;} .chat-find-n{font-size:11.5px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums;} .chat-find-btn{width:26px;height:26px;display:grid;place-items:center;border:none;background:none;color:var(--text-soft);border-radius:7px;cursor:pointer;transition:color .15s ease,background .15s ease;} .chat-find-btn:hover{color:var(--core);background:rgb(var(--core-rgb) / .12);} .msg{transition:opacity .25s ease;} .msg.find-miss{opacity:.28;} ::highlight(chat-find){background-color:rgb(var(--core-rgb) / .28);color:inherit;} ::highlight(chat-find-cur){background-color:rgb(var(--core-rgb) / .62);color:var(--on-core,#000);} /* ---------- suggestion chips (empty chat) ---------- */ .chat-empty{display:none;position:absolute;left:0;right:0;top:calc(18vh + 40px);flex-wrap:wrap;justify-content:center;gap:9px;padding:0 24px;max-width:640px;margin:0 auto;pointer-events:none;z-index:2;} #chatLog:empty ~ .chat-empty{display:flex;} .chat-starter{pointer-events:auto;border:1px solid var(--line);background:var(--panel);color:var(--text-soft);font:inherit;font-size:12.5px;padding:7px 14px;border-radius:999px;cursor:pointer; transition:border-color .2s ease,color .2s ease,translate .25s var(--ease-premium,cubic-bezier(.16,1,.3,1)),box-shadow .25s ease,background .2s ease; animation:csIn .5s var(--ease-premium,cubic-bezier(.16,1,.3,1)) backwards;animation-delay:calc(var(--i,0) * 55ms + 120ms);} .chat-starter:hover{border-color:rgb(var(--core-rgb) / .5);color:var(--core);translate:0 -2px;} :where(html[data-quality="high"]:not([data-motion="reduce"])) .chat-starter:hover{box-shadow:0 8px 20px -12px rgb(var(--core-rgb) / .5);} .chat-starter:active{translate:0 0;} @keyframes csIn{from{opacity:0;transform:translateY(8px) scale(.96);}} /* skill chips (js/skill_cards.js) get the same finish */ .chat-log .sk-chips{display:flex;flex-wrap:wrap;gap:8px;} .chat-log .sk-chips .sk-chip{border:1px solid var(--line);background:var(--panel);color:var(--text-soft);border-radius:999px;padding:6px 13px;font-size:12.5px;cursor:pointer; transition:border-color .2s ease,color .2s ease,translate .25s var(--ease-premium,cubic-bezier(.16,1,.3,1)),box-shadow .25s ease;} .chat-log .sk-chips .sk-chip:hover{border-color:rgb(var(--core-rgb) / .5);color:var(--core);translate:0 -2px;} :where(html[data-quality="high"]:not([data-motion="reduce"])) .chat-log .sk-chips .sk-chip:hover{box-shadow:0 8px 20px -12px rgb(var(--core-rgb) / .5);} .chat-log .sk-chips .sk-chip:active{translate:0 0;scale:.97;} /* ---------- typing indicator: a small glass pill with a springy 3-dot wave ---------- */ .msg.thinking{display:inline-flex;align-items:center;gap:5px;padding:9px 14px 9px 13px;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--think); position:relative;overflow:hidden;align-self:flex-start;} .msg.thinking::before{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,transparent 35%,rgb(var(--think-rgb) / .12) 50%,transparent 65%);background-size:240% 100%;animation:thinkSheen 2.2s ease-in-out infinite;} .msg.thinking::after{content:'thinking';margin-left:6px;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);} .msg.thinking .dot{width:6px;height:6px;animation:thinkBounce 1.2s cubic-bezier(.3,0,.3,1) infinite;} .msg.thinking .dot:nth-child(2){animation-delay:.12s;} .msg.thinking .dot:nth-child(3){animation-delay:.24s;} @keyframes thinkBounce{0%,60%,100%{transform:translateY(0) scale(.85);opacity:.45;}30%{transform:translateY(-4px) scale(1.1);opacity:1;}} @keyframes thinkSheen{0%{background-position:130% 0;}60%,100%{background-position:-130% 0;}} @media (prefers-reduced-motion:reduce){.msg.thinking::before,.msg.thinking .dot{animation:none;}.msg.thinking .dot{opacity:.8;}} /* streaming caret: a thin glowing bar instead of a block glyph */ .msg.sara.streaming::after,.msg.sara.typing::after{content:'';display:inline-block;width:2px;height:1.05em;margin-left:3px;vertical-align:-.17em;border-radius:1px;background:var(--core);box-shadow:0 0 8px rgb(var(--core-rgb) / .6);animation:blink 1s steps(2) infinite;} /* quality tiers: Low drops the sheen */ html[data-quality="low"] .msg.thinking::before{display:none;} /* ---- day chips ("Today" / "Yesterday" / date) ---- */ .day-sep{align-self:center;display:flex;align-items:center;gap:10px;width:100%;margin:2px 0;color:var(--muted);font-size:11px;letter-spacing:.06em;} .day-sep::before,.day-sep::after{content:'';flex:1;height:1px;background:var(--line);} .day-sep span{padding:0 2px;} /* ---- spoken messages carry a small microphone before the text ---- */ .msg.user.voice .msg-text::before{ content:'';display:inline-block;width:11px;height:11px;margin-right:7px;vertical-align:-1px;background:currentColor;opacity:.5; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='3' width='6' height='11' rx='3'/%3E%3Cpath d='M5 11a7 7 0 0 0 14 0M12 18v3'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='3' width='6' height='11' rx='3'/%3E%3Cpath d='M5 11a7 7 0 0 0 14 0M12 18v3'/%3E%3C/svg%3E") center/contain no-repeat; } /* ###################################################################### Redesign phase 5 -- Chat (spec section 7): a 720 px column and a composer that floats 24 px above the bottom edge. The log keeps scrolling behind the composer, so it needs room at the end (padding-bottom) for the last message to clear it. ###################################################################### */ #page-chat .page-body{padding-bottom:0;} #page-chat .chat-log{padding:0 max(var(--pad-x),calc((100% - var(--content-a)) / 2 + var(--pad-x))) 120px;} #page-chat .chat-log:empty::before{content:none;} /* messages */ #chatLog .msg.user{border-radius:18px 18px 6px 18px;padding:10px 15px;} /* the time of your own message is on demand: beside the bubble, on hover or keyboard focus */ #chatLog .msg.user .ts,#chatLog .msg.user .ts.dup{display:block;position:absolute;right:100%;bottom:4px;margin:0 var(--sp-2) 0 0;font-size:11px;color:var(--muted);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity var(--dur-fast);} #chatLog .msg.user:hover .ts,#chatLog .msg.user:focus-within .ts{opacity:1;} #chatLog .msg.user .msg-tools{right:6px;} /* a small Sara mark on the first message of a group; the rail stays the only thing beside the following ones */ #chatLog .msg.sara:not(.grp):not(.thinking):not(.preview)::before{content:'';position:absolute;left:-28px;top:3px;width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 32% 28%,var(--think),var(--core) 62%);} /* new messages pill */ #page-chat .chat-jump{bottom:96px;display:inline-flex;align-items:center;gap:6px;width:auto;height:32px;padding:0 var(--sp-3);border-radius:var(--r-pill);color:var(--text-soft);font-size:12px;white-space:nowrap;} #page-chat .chat-jump:hover{color:var(--text);} #page-chat .chat-jump-n{position:static;display:none;min-width:18px;background:var(--core);color:var(--on-core);} #page-chat .chat-jump-n.on{display:inline-block;} /* empty state */ #page-chat .chat-empty{top:44%;left:50%;right:auto;transform:translate(-50%,-50%);width:360px;max-width:100%;padding:0;flex-direction:row;} #page-chat .chat-empty-orb{flex:0 0 100%;display:block;width:56px;height:56px;max-width:56px;margin:0 auto var(--sp-3);border-radius:50%;background:radial-gradient(circle at 32% 28%,var(--think),var(--core) 62%);box-shadow:0 0 28px -6px var(--glow);} #page-chat .chat-empty-title{flex:0 0 100%;margin-bottom:var(--sp-4);text-align:center;font:600 18px/1.3 var(--font);color:var(--text);} #page-chat .chat-starter{height:34px;box-sizing:border-box;padding:0 15px;} /* composer: 720 x 64, floating */ #page-chat .chat-dock{position:absolute;left:var(--pad-x);right:var(--pad-x);bottom:var(--sp-6);width:auto;max-width:var(--content-a);height:64px;box-sizing:border-box;margin:0 auto;padding:10px;gap:var(--sp-3);border-radius:var(--r-hero);background:var(--panel);box-shadow:var(--shadow-hover);z-index:5;} #page-chat .chat-dock:focus-within{border-color:rgb(var(--core-rgb) / .5);box-shadow:0 0 0 3px rgb(var(--core-rgb) / .12),var(--shadow-hover);} #page-chat .chat-dock input{height:44px;font-size:15px;min-width:0;} #page-chat .dock-btn{width:44px;height:44px;} #page-chat .dock-btn svg{width:18px;height:18px;} #page-chat .dock-btn.mic{color:var(--text-soft);} #page-chat .dock-btn.mic.on{color:var(--on-core);} /* send looks switched off until there is something to send */ #page-chat .chat-dock:has(#chatInputField:placeholder-shown) .dock-btn.send{background:var(--panel-2);color:var(--muted);box-shadow:none;} /* ==== style/notes/notes-reminders.css ==== */ /* ========================================================================== notes-reminders.css -- the combined Notes + Reminders page (two tabs). Markup: index.html #page-notes. JS: js/notes-reminders.js. Tab/row/input styles come from components.css. ========================================================================== */ .notes-sub{font-size:12.5px;color:var(--muted);margin:0 0 16px;} .note-row2{padding:14px 4px;border-bottom:1px solid var(--line);max-width:640px;position:relative;} .note-row2::before{ content:'';position:absolute;left:0;top:18%;bottom:18%;width:2px;border-radius:2px;background:var(--core); box-shadow:0 0 8px var(--core);opacity:0;transform:scaleY(.4);transition:opacity .25s,transform .25s;pointer-events:none; } .note-row2:hover::before{opacity:.85;transform:scaleY(1);} .n-head{display:flex;justify-content:space-between;gap:12px;} .n-title{font-size:14.5px;overflow-wrap:anywhere;} .n-time{font-size:11px;color:var(--muted);flex:none;} .n-snip{font-size:12.5px;color:var(--muted);margin-top:4px;white-space:pre-wrap;overflow-wrap:anywhere;} .rem-add{max-width:640px;margin-top:18px;display:grid;grid-template-columns:1fr auto auto auto;gap:10px;} .rem-add input{min-width:0;} .group-label.overdue{color:var(--danger);} /* ---- reminder checkbox: ring -> filled, checkmark draws, text strikes through (class .completing set by JS) ---- */ .row .dot{width:17px;height:17px;border-radius:50%;flex:none;cursor:pointer;position:relative;border:1.5px solid rgb(var(--core-rgb) / .55);background:transparent;display:flex;align-items:center;justify-content:center;transition:background .25s,border-color .25s,transform .12s,box-shadow .2s;} .row .dot::before{content:'';position:absolute;inset:-8px;} .row .dot:hover{border-color:var(--core);box-shadow:0 0 8px rgb(var(--core-rgb) / .3);} .row .dot:active{transform:scale(.88);} .row .dot svg{width:11px;height:11px;fill:none;stroke:var(--on-core);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:14;stroke-dashoffset:14;} .row.done .dot{background:var(--muted);border-color:var(--muted);box-shadow:none;} .row.done .dot svg{stroke-dashoffset:0;} .row.completing .dot{background:var(--core);border-color:var(--core);animation:dotFill .35s cubic-bezier(.3,1.5,.5,1);} .row.completing .dot svg{animation:checkDraw .3s ease-out .12s forwards;} .row.completing .r-time,.row.completing .r-text{color:var(--muted);transition:color .3s .2s;} .row.completing .r-t{background:linear-gradient(currentColor,currentColor) no-repeat 0 58%/0% 1px;animation:strikeGrow .35s ease-out .2s forwards;} @keyframes checkDraw{to{stroke-dashoffset:0;}} @keyframes dotFill{0%{transform:scale(.85);}60%{transform:scale(1.18);}100%{transform:scale(1);}} @keyframes strikeGrow{to{background-size:100% 1px;}} /* ###################################################################### Merged from notes-plus.css (formerly a separate file layered on this one) ###################################################################### */ /* ========================================================================== notes-plus.css -- styles for js/notes-plus.js (smart reminders, undo bar, note tags / search / pin). Load LAST. ========================================================================== */ /* ---------------------------------------------------------------- smart reminder preview + quick chips */ .rm-quick{display:flex;flex-wrap:wrap;gap:8px;max-width:640px;margin-top:16px;} .rm-quick .chip{font-size:12px;padding:5px 12px;} .rm-smart{max-width:640px;margin-top:12px;display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;background:var(--panel); border:1px solid rgb(var(--core-rgb) / .38);opacity:0;translate:0 6px;transition:opacity .25s ease,translate .35s var(--ease-premium,cubic-bezier(.16,1,.3,1));} .rm-smart[hidden]{display:none;} .rm-smart.show{opacity:1;translate:0 0;} .rm-smart-ic{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:rgb(var(--core-rgb) / .14);color:var(--core);} .rm-smart-ic svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;} .rm-smart-main{min-width:0;flex:1;} .rm-smart-when{font-size:13px;font-weight:600;color:var(--core);font-variant-numeric:tabular-nums;} .rm-smart-txt{font-size:12px;color:var(--muted);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .rm-smart-btn{flex:none;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--panel-2);color:var(--text-soft);font:inherit;font-size:11.5px;padding:5px 9px;border-radius:8px;cursor:pointer; transition:color .15s ease,border-color .15s ease,background .15s ease,scale .15s ease;} .rm-smart-btn:hover{color:var(--core);border-color:rgb(var(--core-rgb) / .5);} .rm-smart-btn:active{scale:.95;} .rm-smart-btn[hidden]{display:none;} .rm-smart-btn svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;} .rm-smart-x{padding:5px 7px;} .rm-flash{animation:rmFlash .9s ease-out;} @keyframes rmFlash{0%{box-shadow:0 0 0 0 rgb(var(--core-rgb) / .5);border-color:var(--core);}100%{box-shadow:0 0 0 8px rgb(var(--core-rgb) / 0);}} /* ---------------------------------------------------------------- undo bar */ .undo-bar{position:fixed;left:50%;bottom:98px;z-index:90;display:flex;align-items:center;gap:14px;padding:10px 12px 12px 16px;border-radius:12px;overflow:hidden; background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow-hover,0 14px 34px -14px rgba(0,0,0,.7));font-size:13px;color:var(--text); opacity:0;translate:-50% 14px;pointer-events:none;transition:opacity .22s ease,translate .38s var(--ease-premium,cubic-bezier(.16,1,.3,1));} .undo-bar[hidden]{display:none;} .undo-bar.show{opacity:1;translate:-50% 0;pointer-events:auto;} .undo-btn{display:inline-flex;align-items:center;gap:6px;border:none;background:rgb(var(--core-rgb) / .14);color:var(--core);font:inherit;font-size:12.5px;font-weight:600;padding:5px 11px;border-radius:8px;cursor:pointer; transition:background .15s ease,scale .15s ease;} .undo-btn:hover{background:rgb(var(--core-rgb) / .24);} .undo-btn:active{scale:.95;} .undo-btn svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;} .undo-prog{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--core);transform-origin:left center;animation:undoProg 6s linear forwards;} @keyframes undoProg{from{transform:scaleX(1);}to{transform:scaleX(0);}} @media (prefers-reduced-motion:reduce){.undo-prog{animation:none;opacity:0;}} /* ---------------------------------------------------------------- notes: search, tags, pin */ .nt-tools{max-width:640px;margin:14px 0 4px;display:flex;flex-direction:column;gap:10px;} .nt-tools[hidden]{display:none;} .nt-search{display:flex;align-items:center;gap:8px;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--muted);transition:border-color .2s ease,box-shadow .25s ease;} .nt-search:focus-within{border-color:var(--core);box-shadow:0 0 0 3px rgb(var(--core-rgb) / .14);} .nt-search svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;flex:none;} .nt-search input{flex:1;min-width:0;background:none;border:none;outline:none;box-shadow:none;color:var(--text);font:inherit;font-size:13px;padding:9px 0;} .nt-tags{display:flex;flex-wrap:wrap;gap:6px;} .nt-tags[hidden]{display:none;} .nt-tags .chip{font-size:11.5px;padding:4px 10px;} .nt-count{font-size:11.5px;color:var(--muted);} .note-row2.n-hide{display:none;} .note-row2{transition:background .25s ease;} .note-row2.pinned{background:linear-gradient(90deg,rgb(var(--core-rgb) / .06),transparent 70%);} .n-acts{display:inline-flex;align-items:center;gap:1px;flex:none;margin-left:6px;opacity:0;transition:opacity .2s ease;} .note-row2:hover .n-acts,.note-row2:focus-within .n-acts,.note-row2.pinned .n-acts{opacity:1;} .n-act{width:24px;height:24px;display:grid;place-items:center;border:none;background:none;color:var(--muted);border-radius:7px;cursor:pointer;transition:color .15s ease,background .15s ease,scale .15s ease;} .n-act:hover{color:var(--core);background:rgb(var(--core-rgb) / .12);} .n-act:active{scale:.9;} .n-act svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;} .note-row2.pinned .n-pin{color:var(--core);} .note-row2.pinned .n-pin svg{fill:rgb(var(--core-rgb) / .25);} .n-grip{display:none;width:16px;height:24px;place-items:center;color:var(--muted);cursor:grab;border-radius:6px;} .n-grip:active{cursor:grabbing;} .n-grip svg{width:13px;height:13px;fill:currentColor;stroke:none;} .note-row2.pinned .n-grip{display:grid;} .n-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;} .n-tag{border:none;background:rgb(var(--core-rgb) / .10);color:var(--core);font:inherit;font-size:11px;padding:2px 9px;border-radius:999px;cursor:pointer;transition:background .15s ease,scale .15s ease;} .n-tag:hover{background:rgb(var(--core-rgb) / .2);} .n-tag:active{scale:.95;} .note-row2.dragging{opacity:.4;} .note-row2.drop-before{box-shadow:0 -2px 0 0 var(--core);} .note-row2.drop-after{box-shadow:0 2px 0 0 var(--core);} @media (hover:none){.n-acts{opacity:1;}} html[data-quality="low"] .rm-smart,html[data-quality="low"] .undo-bar{transition:opacity .01s;} /* ###################################################################### Redesign phase 5 -- Notes & Reminders (spec section 8.1): a 720 px column, note cards, reminder rows, a composer that stays in reach. ###################################################################### */ #page-notes .page-body{padding-bottom:var(--sp-4);} #page-notes :is(.notes-top,.pane){width:100%;max-width:var(--content-a);margin-inline:auto;} #page-notes :is(.row,.add-row,.rm-quick,.rm-smart,.rem-add,.nt-tools,.note-row2,.empty){max-width:none;} /* tabs + index status */ #page-notes .notes-top{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);margin-bottom:var(--sp-4);} #page-notes .tabs.seg{display:flex;width:280px;flex:none;margin:0;gap:2px;border:1px solid var(--line);} #page-notes .tabs.seg .tab::before,#page-notes .tabs.seg .tab::after{display:none;} #page-notes .notes-sub{display:flex;align-items:center;gap:var(--sp-2);margin:0;font:var(--t-helper);color:var(--muted);min-width:0;} #page-notes .notes-sub.ok::before{content:'';flex:none;width:8px;height:8px;border-radius:50%;background:var(--success);} #page-notes .notes-top:has(~ #pane-reminders.active) .notes-sub{display:none;} /* note composer: 720 x 56 */ #pane-notes .add-row{min-height:56px;box-sizing:border-box;margin:0;padding:7px var(--sp-2);flex-wrap:nowrap;gap:var(--sp-2);border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel);box-shadow:var(--shadow-rest);transition:border-color var(--dur-fast);} #pane-notes .add-row:focus-within{border-color:rgb(var(--core-rgb) / .5);} #pane-notes .add-row input[type=text]{min-width:0;height:40px;box-sizing:border-box;padding:0 var(--sp-2);border:none;background:none;font-size:15px;} #pane-notes .add-row .pill-btn{flex:none;height:40px;padding:0 var(--sp-4);border-radius:var(--r-ctl);} /* note cards: two to a row from 1100 px */ #page-notes #notesList{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3);margin-top:var(--sp-3) !important;} #page-notes #notesList > :not(.note-row2){grid-column:1/-1;} #page-notes .note-row2{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"title title" "snip snip" "tags tags" "time acts";align-content:start;padding:var(--sp-4) 18px var(--sp-2);border:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel);transition:border-color var(--dur-fast),background var(--dur-fast);} #page-notes .note-row2:hover{border-color:rgb(var(--core-rgb) / .28);} #page-notes .note-row2::before{display:none;} #page-notes .note-row2.n-hide{display:none;} #page-notes .note-row2.pinned{background:linear-gradient(135deg,rgb(var(--core-rgb) / .08),transparent 70%),var(--panel);border-color:rgb(var(--core-rgb) / .3);} #page-notes .n-head{display:contents;} #page-notes .n-title{grid-area:title;font:var(--t-label);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;} #page-notes .n-snip{grid-area:snip;margin-top:var(--sp-1);font-size:13px;line-height:1.45;color:var(--text-soft);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;white-space:pre-line;} #page-notes .n-tags{grid-area:tags;} #page-notes .n-time{grid-area:time;align-self:center;margin-top:var(--sp-2);font-size:11px;} #page-notes .n-acts{grid-area:acts;margin:var(--sp-2) -6px 0 0;} #page-notes .n-act,#page-notes .n-grip{width:28px;height:28px;} #page-notes .nt-tools{margin:var(--sp-3) 0 0;} #page-notes .nt-search{height:40px;box-sizing:border-box;border-radius:var(--r-ctl);} #page-notes .nt-tags .chip{height:28px;box-sizing:border-box;display:inline-flex;align-items:center;padding:0 var(--sp-3);} /* reminders: captions, 56 px rows, 22 px check circle */ #pane-reminders .group-label{font:var(--t-caption);letter-spacing:.06em;margin:var(--sp-4) 0 var(--sp-2);} #pane-reminders .group-label:first-child{margin-top:0;} #pane-reminders .group-label.today{color:var(--core);} #pane-reminders .row{min-height:56px;box-sizing:border-box;margin:0 0 var(--sp-2);padding:var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-4);border:1px solid var(--line);border-radius:14px;background:var(--panel);transition:border-color var(--dur-fast);} #pane-reminders .row:hover{border-color:rgb(var(--core-rgb) / .28);} #pane-reminders .row .dot{width:22px;height:22px;} #pane-reminders .row .dot svg{width:13px;height:13px;} #pane-reminders .r-time{width:68px;} #pane-reminders .r-del{width:28px;height:28px;padding:0;border-radius:var(--sp-2);} #pane-reminders .r-del:hover{background:rgb(var(--danger-rgb) / .12);} #reminderGroups{min-height:120px;} /* reminder composer: 720 x 64, stays above the bottom edge while the list scrolls */ #page-notes .rem-dock{position:sticky;bottom:0;z-index:4;display:flex;flex-direction:column;gap:var(--sp-2);margin-top:var(--sp-4);} #page-notes .rm-quick,#page-notes .rm-smart{margin:0;} /* quick times only while you are writing a reminder, so they do not lie over the list the rest of the time */ #page-notes .rm-quick{display:none;} #page-notes .rem-dock:focus-within .rm-quick{display:flex;} #page-notes .rm-quick .chip{height:34px;box-sizing:border-box;display:inline-flex;align-items:center;padding:0 var(--sp-3);background:var(--panel);} #page-notes .rem-add{grid-template-columns:minmax(0,1fr) 140px 126px auto;align-items:center;min-height:64px;box-sizing:border-box;margin:0;padding:11px var(--sp-3);gap:var(--sp-2);border:1px solid var(--line);border-radius:var(--r-card);background:var(--panel);box-shadow:var(--shadow-hover);transition:border-color var(--dur-fast);} #page-notes .rem-add:focus-within{border-color:rgb(var(--core-rgb) / .5);} #page-notes .rem-add input{height:40px;box-sizing:border-box;padding:0 var(--sp-3);border:1px solid var(--line);border-radius:var(--r-ctl);background:var(--panel-2);color:var(--text);font:inherit;font-size:13px;outline:none;text-overflow:ellipsis;} #page-notes .rem-add input:focus{border-color:var(--core);} #page-notes .rem-add .pill-btn{height:40px;padding:0 18px;border-radius:var(--r-ctl);} @media (max-width:1099.98px){#page-notes #notesList{grid-template-columns:minmax(0,1fr);}} /* the accent on its own 10 % tint was 2.9:1 in light themes: the tag text mixes the accent with the text colour (light: darker, dark: lighter) */ #page-notes .n-tag{color:color-mix(in srgb,var(--core) 45%,var(--text));} /* ==== style/apps/apps.css ==== */ /* ========================================================================== apps.css -- Apps page: web-search bar, app tiles, quick system chips. Markup: index.html #page-apps (#appsGrid, #toolsGrid, #sysChips). JS: js/apps.js. The Music card on this page is styled in music.css. ========================================================================== */ .apps-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:12px;max-width:720px;margin-top:2px;} .app-tile{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px 12px;display:flex;flex-direction:column;align-items:center;gap:10px;cursor:pointer;transition:border-color .2s,transform .15s;position:relative;overflow:hidden;} .app-tile:hover{border-color:var(--core);transform:translateY(-2px);} .app-tile svg{width:22px;height:22px;stroke:var(--core);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .22s cubic-bezier(.34,1.56,.64,1),filter .22s;} .app-tile:hover svg{transform:scale(1.16);filter:drop-shadow(0 0 6px var(--core));} .app-tile span{font-size:12.5px;color:var(--text-soft);text-align:center;} .app-tile:active{transform:scale(.97);} .apps-search{max-width:720px;margin:0 0 4px;} .sys-chips{max-width:720px;} #page-apps .page-body{padding-bottom:var(--pad-bottom);} /* F8: reorder hint + drag feedback (js/apps/apps-order.js) */ .apps-hint{font-size:11.5px;color:var(--muted);margin:-4px 0 8px;} .apps-hint .link-btn{margin-left:4px;} .app-tile.dragging{opacity:.4;} .app-tile[draggable=true]{cursor:grab;} .app-tile[draggable=true]:active{cursor:grabbing;} /* ###################################################################### Redesign phase 5 -- Apps (spec section 8.2): a 720 px column, search bar, tiles with an icon plate. ###################################################################### */ #page-apps .page-body > *{width:100%;max-width:var(--content-a);margin-inline:auto;box-sizing:border-box;} #page-apps .section-label{font:var(--t-caption);letter-spacing:.06em;margin-top:var(--sp-6);margin-bottom:var(--sp-3);} #page-apps .apps-search{min-height:52px;margin-top:var(--sp-6);margin-bottom:0;padding:5px;flex-wrap:nowrap;gap:var(--sp-2);border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel);box-shadow:var(--shadow-rest);transition:border-color var(--dur-fast);} #page-apps .apps-search:focus-within{border-color:rgb(var(--core-rgb) / .5);} #page-apps .apps-search input[type=text]{min-width:0;height:40px;box-sizing:border-box;padding:0 var(--sp-3);border:none;background:none;font-size:15px;} #page-apps .apps-search .pill-btn{flex:none;height:40px;padding:0 18px;border-radius:var(--r-ctl);} #page-apps .apps-grid{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:var(--sp-3);margin-top:0;} #page-apps .app-tile{min-height:104px;box-sizing:border-box;justify-content:center;gap:var(--sp-2);padding:var(--sp-3) var(--sp-2);border-radius:var(--r-sm);} #page-apps .app-tile:hover{border-color:rgb(var(--core-rgb) / .45);box-shadow:var(--shadow-hover);} #page-apps .app-tile svg{width:44px;height:44px;box-sizing:border-box;padding:var(--sp-2);border-radius:var(--r-ctl);background:rgb(var(--core-rgb) / .12);stroke-width:1.5;} #page-apps .app-tile:hover svg{transform:none;filter:none;background:rgb(var(--core-rgb) / .2);} #page-apps .app-tile span{font:var(--t-label);font-size:13px;color:var(--text);} #page-apps .sys-chips{gap:var(--sp-2);} #page-apps .sys-chips .chip{display:inline-flex;align-items:center;height:34px;box-sizing:border-box;padding:0 15px;} html[data-quality="low"] #page-apps .app-tile:hover{transform:none;box-shadow:none;} /* ==== style/apps/music.css ==== */ /* ========================================================================== music.css -- Music card (lives on the Apps page; click head to expand into full player) + the floating mini-player above the nav + the VU spectrum. Markup: index.html #musicCard, #miniPlayer, plus optional feature markup: #trackSource/#trackSourceName (source badge), #seekWrap/#seek/#seekTip (seek bar), .audio-panel with #mcVolume/#mcVolumeIcon/#mcVolumeBtn (per-app volume) and #mcSysVolume/#mcSysVolumeIcon/#mcSysVolumeBtn (system volume), #mcSessions (session switcher, each chip also holds a .chip-mute per-app mute button), #sleepBtn/#sleepState/#sleepBadge/#sleepCancel/#sleepMenu (sleep timer). JS: js/music.js. Card state classes (set by JS): .expanded, .has-track (a track/session is active), .playing, .paused (active but not playing), .reduce-motion (mirrors SARA.reduceMotion). Idle = none of has-track/playing/paused. ========================================================================== */ .music-card{ --music-accent-1:var(--core);--music-accent-2:var(--think); /* feature: album-art theming overrides these two inline via JS; default = old look */ /* accent tints at fixed strengths (fallback = --core for engines without color-mix) */ --mc-a08:rgb(var(--core-rgb) / .08);--mc-a14:rgb(var(--core-rgb) / .14);--mc-a22:rgb(var(--core-rgb) / .22); --mc-a35:rgb(var(--core-rgb) / .35);--mc-a50:rgb(var(--core-rgb) / .5);--mc-a65:rgb(var(--core-rgb) / .65); --mc-ease:cubic-bezier(.2,.8,.2,1); --seek-thumb:14px; /* keep in sync with SEEK_THUMB_PX in js/music.js */ position:relative;max-width:720px;background:var(--panel);border:1px solid var(--line);border-radius:14px;margin-bottom:6px;overflow:hidden; transition:border-color .25s var(--mc-ease),box-shadow .4s var(--mc-ease); } @supports (color:color-mix(in srgb, red, blue)){ .music-card{ --mc-a08:color-mix(in srgb, var(--music-accent-1) 8%, transparent);--mc-a14:color-mix(in srgb, var(--music-accent-1) 14%, transparent); --mc-a22:color-mix(in srgb, var(--music-accent-1) 22%, transparent);--mc-a35:color-mix(in srgb, var(--music-accent-1) 35%, transparent); --mc-a50:color-mix(in srgb, var(--music-accent-1) 50%, transparent);--mc-a65:color-mix(in srgb, var(--music-accent-1) 65%, transparent); } } .music-card.expanded,.music-card:hover{border-color:var(--mc-a50);} .music-card.playing{box-shadow:0 16px 40px -30px var(--mc-a65);} /* ambient accent wash behind the head: fades in while playing, half-strength paused, gone when idle */ .music-card::before{ content:'';position:absolute;inset:0;pointer-events:none;z-index:0;opacity:0; background:radial-gradient(110% 130px at 0% 0%, var(--mc-a14), transparent 70%); transition:opacity .5s ease; } .music-card.has-track::before{opacity:.5;} .music-card.playing::before{opacity:1;} /* keyboard focus: one consistent accent ring for every control inside the card */ .music-card :focus-visible{outline:2px solid var(--mc-a65);outline-offset:2px;} .music-card input:focus-visible{outline:none;} .mc-head{position:relative;z-index:1;display:flex;align-items:center;gap:16px;padding:14px 16px;cursor:pointer;} /* ---- interactive album art ---- idle = dim/inactive, playing = softly alive (breathing ring, no spin), paused = calm, hover = lifts a little */ .art-block{ width:56px;height:56px;border-radius:12px;background:linear-gradient(135deg,var(--music-accent-1),var(--music-accent-2)) center/cover; box-shadow:0 0 0 1px rgb(var(--fg-rgb) / .06),0 4px 14px -6px rgb(0 0 0 / .5); filter:saturate(.7) brightness(.92);opacity:.85; flex:none;display:flex;align-items:center;justify-content:center;position:relative;cursor:pointer;will-change:transform; transition:transform .24s var(--mc-ease),box-shadow .4s var(--mc-ease),filter .4s ease,opacity .4s ease,background-image .6s ease; } .art-block svg{width:24px;height:24px;stroke:var(--on-core);fill:none;stroke-width:1.8;} .art-block.has-art svg{display:none;} .music-card.has-track .art-block{filter:none;opacity:1;box-shadow:0 0 0 1px var(--mc-a22),0 6px 18px -8px var(--mc-a35);} .music-card.playing .art-block{box-shadow:0 0 0 1px var(--mc-a35),0 8px 26px -8px var(--mc-a50);} .art-block:hover{ transform:translateY(-1px) scale(1.035);filter:saturate(.9) brightness(1);opacity:1; box-shadow:0 0 0 1px var(--mc-a35),0 12px 28px -8px var(--mc-a50),0 4px 10px -4px rgb(0 0 0 / .5); } .art-block:active{transform:scale(.98);transition-duration:.1s;} /* soft ring: faint when a track is loaded, gently breathing (scale only) while playing; fades back out on pause */ .art-block::after{ content:'';position:absolute;inset:-4px;border-radius:16px;border:1px solid var(--music-accent-1); opacity:0;pointer-events:none;transition:opacity .4s ease,border-color .6s; } .music-card.has-track .art-block::after{opacity:.16;} .music-card.playing .art-block::after{opacity:.5;animation:artBreathe 3.6s ease-in-out infinite;} @keyframes artBreathe{0%,100%{transform:scale(1);}50%{transform:scale(1.045);}} .track-meta{flex:1;min-width:0;} .t-title{font-size:15.5px;font-weight:500;line-height:1.25;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .t-sub{display:flex;align-items:center;gap:8px;min-width:0;} .t-artist{flex:0 1 auto;min-width:0;font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .t-artist:empty{display:none;} /* ---- source badge (app/source reported by the media session; hidden when unknown or idle) ---- */ .src-badge{ flex:0 1 auto;min-width:0;max-width:48%;display:inline-flex;align-items:center;gap:5px;padding:2px 8px 2px 6px; border-radius:999px;font-size:10.5px;line-height:1.5;letter-spacing:.02em;color:var(--text-soft); background:var(--mc-a08);border:1px solid var(--mc-a22); transition:border-color .3s ease,background-color .3s ease,color .3s ease,opacity .3s ease; } .src-badge[hidden]{display:none;} .src-badge svg{width:11px;height:11px;flex:none;stroke:var(--music-accent-1);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:stroke .6s;} .src-name{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .music-card.playing .src-badge{border-color:var(--mc-a35);} .music-card.paused .src-badge{opacity:.8;} .mc-play{width:38px;height:38px;border-radius:50%;background:var(--music-accent-1);border:none;color:var(--on-core);cursor:pointer;display:flex;align-items:center;justify-content:center;flex:none;transition:transform .18s var(--mc-ease),box-shadow .25s ease,background-color .6s;} .mc-play:hover{transform:scale(1.04);} :where(html[data-quality="high"]:not([data-motion="reduce"])) .mc-play:hover{box-shadow:0 0 18px var(--mc-a50);} /* hover glow: High tier only */ .mc-play:active{transform:scale(.92);} .mc-play svg{width:14px;height:14px;fill:currentColor;stroke:none;} .mc-play:disabled{opacity:.35;cursor:default;} .mc-chev{ background:none;border:none;padding:6px;margin:-6px -6px -6px -10px;border-radius:8px;cursor:pointer;display:flex; color:var(--muted);transition:transform .25s var(--mc-ease),color .2s;flex:none; } .mc-chev:hover{color:var(--text);} .mc-chev svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8;} .music-card.expanded .mc-chev{transform:rotate(90deg);color:var(--music-accent-1);} /* collapsed body is also removed from the tab order (visibility flips after the collapse finishes) */ .mc-body{position:relative;z-index:1;max-height:0;overflow:hidden;visibility:hidden;transition:max-height .35s var(--mc-ease),visibility 0s linear .35s;} .music-card.expanded .mc-body{max-height:720px;visibility:visible;transition-delay:0s;} /* raised to fit the audio panel and the sleep-timer row */ .mc-body-inner{padding:14px 20px 20px;} /* ---- session switcher (Feature: pick which app's session to control; markup:
with JS-injected .session-chip elements, each holding a .chip-name (click = switch to this app) and a .chip-mute button (click = mute/unmute this app in place, without switching to it). Hidden by JS (no "show" class) whenever fewer than 2 sessions are live, so it never appears for the common one-app case. ---- */ .session-switcher{display:none;flex-wrap:wrap;gap:6px;margin-bottom:14px;} .session-switcher.show{display:flex;} .session-chip{ background:var(--bg2,rgb(var(--fg-rgb) / .04));border:1px solid var(--line);color:var(--text-soft); font-size:11.5px;padding:5px 8px 5px 10px;border-radius:999px;cursor:pointer;display:flex;align-items:center;gap:5px; max-width:180px;transition:border-color .2s,color .2s,background-color .2s; } .session-chip .chip-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .session-chip:hover{color:var(--text);border-color:var(--mc-a35);} .session-chip.playing .chip-name::before{content:'';display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--music-accent-1);margin-right:5px;} .session-chip.active{color:var(--text);border-color:var(--mc-a65);background:var(--mc-a14);} /* per-app mute toggle (silence one app's session without switching to it -- e.g. mute a background YouTube tab while Spotify keeps playing). Nested inside the chip; stopPropagation in JS keeps a click here from also triggering the chip's own "switch to this app" handler. */ .chip-mute{ background:none;border:none;padding:0;margin:0;flex:none;display:flex;align-items:center;justify-content:center; color:var(--text-soft);cursor:pointer;transition:color .2s,opacity .2s; } .chip-mute:hover{color:var(--text);} .chip-mute svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;} .chip-mute svg path:first-child{fill:currentColor;stroke:none;} .chip-mute .mute-x{display:none;} .chip-mute.muted{color:var(--music-accent-1);opacity:.85;} .chip-mute.muted .mute-x{display:block;} /* ---- premium seek bar ---- The native stays the real control (drag / click / keyboard / disabled state) but is visually transparent; .seek-rail draws the track, fill and thumb from --seek-p (0..1, set by JS from the exact interpolated position, so the bar glides between the 2s polls instead of stepping in 1s increments). Rail height and thumb size change via transforms/absolute centering only, so hover/focus never moves the layout. */ .seek-wrap{position:relative;margin:6px 0 14px;} .seek-box{position:relative;height:18px;} input.seek{ position:relative;z-index:1;-webkit-appearance:none;appearance:none;display:block;width:100%;height:18px;margin:0;padding:0; background:transparent;outline:none;cursor:pointer; } input.seek::-webkit-slider-runnable-track{height:18px;background:transparent;border:none;} input.seek::-webkit-slider-thumb{-webkit-appearance:none;width:var(--seek-thumb);height:var(--seek-thumb);margin-top:2px;background:transparent;border:none;box-shadow:none;} input.seek::-moz-range-track{height:18px;background:transparent;border:none;} input.seek::-moz-range-thumb{width:var(--seek-thumb);height:var(--seek-thumb);background:transparent;border:none;} input.seek:disabled{cursor:default;} .seek-rail{ position:absolute;left:0;right:0;top:50%;height:4px;margin-top:-2px;border-radius:999px;background:var(--line);pointer-events:none; transition:height .2s var(--mc-ease),margin-top .2s var(--mc-ease),opacity .25s ease; } .seek-fill{ position:absolute;left:0;top:50%;height:18px;margin-top:-9px;overflow:hidden; width:calc(var(--seek-thumb) / 2 + (100% - var(--seek-thumb)) * var(--seek-p,0)); filter:drop-shadow(0 0 4px var(--mc-a65)); transition:width .5s linear; } /* played portion = a gentle sine "snake": one 80px wave period tiled as a mask over the accent gradient. The layer is one period wider than the fill and slides exactly one period, so the loop is seamless. It drifts only while playing (and the card is open); paused = frozen calm wave. */ .seek-fill::before{ content:'';position:absolute;top:0;bottom:0;left:-80px;right:0; background:linear-gradient(90deg,var(--music-accent-2),var(--music-accent-1)); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='12' viewBox='0 0 80 12'%3E%3Cpath d='M0 6C14 2 26 2 40 6S66 10 80 6' fill='none' stroke='%23000' stroke-width='3'/%3E%3C/svg%3E") 0 50% / 80px 12px repeat-x; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='12' viewBox='0 0 80 12'%3E%3Cpath d='M0 6C14 2 26 2 40 6S66 10 80 6' fill='none' stroke='%23000' stroke-width='3'/%3E%3C/svg%3E") 0 50% / 80px 12px repeat-x; animation:seekWave 3.2s linear infinite;animation-play-state:paused; } .music-card.playing.expanded .seek-fill::before{animation-play-state:running;} @keyframes seekWave{to{transform:translateX(80px);}} .seek-thumb{ position:absolute;top:50%;width:var(--seek-thumb);height:var(--seek-thumb);border-radius:50%;background:var(--music-accent-1); left:calc(var(--seek-thumb) / 2 + (100% - var(--seek-thumb)) * var(--seek-p,0)); transform:translate(-50%,-50%) scale(.72); box-shadow:0 0 0 3px var(--mc-a22),0 0 10px var(--mc-a35); transition:left .5s linear,transform .2s var(--mc-ease),box-shadow .25s ease,background-color .3s,opacity .25s ease; } input.seek:not(:disabled):hover ~ .seek-rail,input.seek:focus-visible ~ .seek-rail,.seek-wrap.dragging .seek-rail{height:6px;margin-top:-3px;} input.seek:not(:disabled):hover ~ .seek-rail .seek-thumb,input.seek:focus-visible ~ .seek-rail .seek-thumb,.seek-wrap.dragging .seek-thumb{ transform:translate(-50%,-50%) scale(1);box-shadow:0 0 0 4px var(--mc-a22),0 0 14px var(--mc-a50); } input.seek:focus-visible ~ .seek-rail .seek-thumb{box-shadow:0 0 0 2px var(--panel),0 0 0 4px var(--mc-a65),0 0 14px var(--mc-a50);} .seek-wrap.dragging .seek-fill,.seek-wrap.dragging .seek-thumb{transition:transform .2s var(--mc-ease),box-shadow .25s ease;} /* follow the pointer 1:1 while dragging */ input.seek:disabled ~ .seek-rail{opacity:.4;} input.seek:disabled ~ .seek-rail .seek-thumb{opacity:0;} /* hover / drag / keyboard time preview (absolutely positioned, never affects layout) */ .seek-tip{ position:absolute;left:0;top:-20px;padding:2px 7px;border-radius:6px;font-size:11px;line-height:1.4;color:var(--text); font-variant-numeric:tabular-nums;white-space:nowrap;background:var(--panel);border:1px solid var(--mc-a35); box-shadow:0 4px 12px -4px rgb(0 0 0 / .55);opacity:0;transform:translate(-50%,3px);pointer-events:none;z-index:2; transition:opacity .15s ease,transform .15s ease; } .seek-tip.show{opacity:1;transform:translate(-50%,0);} .seek-times{display:flex;justify-content:space-between;font-size:11.5px;letter-spacing:.01em;color:var(--muted);margin-top:2px;font-variant-numeric:tabular-nums;} .seek-times #curTime{color:var(--text-soft);} .transport{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:16px;} .transport button{ width:36px;height:36px;border-radius:50%;background:none;border:none;color:var(--text-soft);cursor:pointer;display:flex;align-items:center;justify-content:center;position:relative; transition:color .18s,transform .12s,background-color .18s; } .transport button:hover:not(:disabled){color:var(--text);background:rgb(var(--fg-rgb) / .06);} .transport button:active:not(:disabled){transform:scale(.9);} .transport button:disabled{opacity:.3;cursor:default;} .transport button svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;} .transport .t-play{width:48px;height:48px;background:var(--music-accent-1);color:var(--on-core);box-shadow:0 6px 18px -8px var(--mc-a65);transition:color .2s,transform .12s,box-shadow .25s,background-color .6s;} .transport .t-play:hover:not(:disabled){background:var(--music-accent-1);color:var(--on-core);transform:scale(1.04);} :where(html[data-quality="high"]:not([data-motion="reduce"])) .transport .t-play:hover:not(:disabled){box-shadow:0 8px 22px -6px var(--mc-a65);} .transport .t-play:active:not(:disabled){transform:scale(.92);} .transport .t-play svg{width:16px;height:16px;stroke:none;fill:currentColor;} .transport button.active{color:var(--music-accent-1);background:var(--mc-a14);} .transport button.repeat-track::after{content:'1';position:absolute;top:3px;right:3px;font-size:9px;color:var(--music-accent-1);} /* ---- neon glow on prev / next / shuffle / repeat (play + stop keep their own look) ---- */ .transport #ppPrev,.transport #ppNext,.transport #ppShuffle,.transport #ppRepeat{ --neon-core:var(--music-accent-1); color:var(--neon-core);background-color:var(--mc-a08); box-shadow:0 0 16px 1px var(--mc-a22),inset 0 0 10px var(--mc-a08); transition:color .2s,transform .12s,background-color .3s ease,box-shadow .3s ease; } @supports (color:color-mix(in srgb, red, blue)){ .transport #ppPrev,.transport #ppNext,.transport #ppShuffle,.transport #ppRepeat{--neon-core:color-mix(in srgb, var(--music-accent-1) 72%, #fff);} } .transport #ppPrev svg,.transport #ppNext svg,.transport #ppShuffle svg,.transport #ppRepeat svg{ filter:drop-shadow(0 0 2px var(--neon-core)) drop-shadow(0 0 7px var(--music-accent-1)); transition:filter .3s ease; } .transport #ppPrev:hover:not(:disabled),.transport #ppNext:hover:not(:disabled),.transport #ppShuffle:hover:not(:disabled),.transport #ppRepeat:hover:not(:disabled){ color:var(--text);background-color:var(--mc-a14); box-shadow:0 0 24px 4px var(--mc-a35),inset 0 0 12px var(--mc-a14); } .transport #ppPrev:hover:not(:disabled) svg,.transport #ppNext:hover:not(:disabled) svg,.transport #ppShuffle:hover:not(:disabled) svg,.transport #ppRepeat:hover:not(:disabled) svg{ filter:drop-shadow(0 0 2px var(--neon-core)) drop-shadow(0 0 8px var(--music-accent-1)) drop-shadow(0 0 16px var(--mc-a65)); } .transport #ppShuffle.active,.transport #ppRepeat.active{ background-color:var(--mc-a14); box-shadow:0 0 22px 3px var(--mc-a35),inset 0 0 12px var(--mc-a14); } .transport #ppShuffle.active svg,.transport #ppRepeat.active svg{ filter:drop-shadow(0 0 2px var(--neon-core)) drop-shadow(0 0 8px var(--music-accent-1)) drop-shadow(0 0 14px var(--mc-a65)); } .transport #ppPrev:disabled,.transport #ppNext:disabled,.transport #ppShuffle:disabled,.transport #ppRepeat:disabled{background-color:transparent;box-shadow:none;} .transport #ppPrev:disabled svg,.transport #ppNext:disabled svg,.transport #ppShuffle:disabled svg,.transport #ppRepeat:disabled svg{filter:none;} /* ---- combined audio panel (per-app volume + system volume as one section) ---- markup: .audio-panel > .audio-head + two .volume-row (.app / .system), each: .vol-btn(svg icon, doubles as mute) + .vol-label + input.volume + .vol-val. The two sliders stay fully independent; the app slider carries the music accent, the system slider stays neutral so they are never confused. */ .audio-panel{ margin-bottom:14px;padding:10px 14px 8px;border:1px solid var(--line);border-radius:12px;background:rgb(var(--fg-rgb) / .025); transition:border-color .24s ease; } .audio-panel:hover,.audio-panel:focus-within{border-color:var(--mc-a22);} .audio-head{font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:4px;} .volume-row{display:grid;grid-template-columns:26px 54px minmax(0,1fr) 34px;align-items:center;gap:8px;height:30px;} .vol-btn{ width:26px;height:26px;padding:0;border:none;border-radius:8px;background:none;color:var(--text-soft);cursor:pointer; display:flex;align-items:center;justify-content:center;transition:color .2s,background-color .2s; } .vol-btn:hover{color:var(--text);background:rgb(var(--fg-rgb) / .06);} .vol-btn:disabled{opacity:.4;cursor:default;} .volume-row svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none;transition:stroke .2s,color .2s;} .volume-row .vol-wave{transition:opacity .2s;} .volume-row .vol-x{opacity:0;transition:opacity .2s;} .volume-row.muted .vol-btn,.volume-row svg.muted{color:var(--muted);} .volume-row.muted .vol-wave{opacity:0;} .volume-row.muted .vol-x{opacity:1;} .vol-label{font-size:10px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .vol-val{font-size:11px;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums;} .volume-row.muted .vol-val{opacity:.6;} input.volume{ --vol-color:var(--music-accent-1);--vol-thumb:12px;--vol-p:.6; -webkit-appearance:none;appearance:none;display:block;width:100%;min-width:0;height:18px;margin:0;padding:0;background:transparent;outline:none;cursor:pointer; } input.volume::-webkit-slider-runnable-track{ height:4px;border-radius:999px; background:linear-gradient(to right,var(--vol-color) 0,var(--vol-color) calc(var(--vol-thumb) / 2 + (100% - var(--vol-thumb)) * var(--vol-p)),var(--line) 0); } input.volume::-webkit-slider-thumb{ -webkit-appearance:none;width:var(--vol-thumb);height:var(--vol-thumb);margin-top:-4px;border-radius:50%;border:none;background:var(--vol-thumb-color,var(--vol-color)); box-shadow:0 0 0 3px var(--mc-a14);transform:scale(.75); transition:transform .18s var(--mc-ease),box-shadow .2s ease,background-color .3s; } input.volume::-moz-range-track{height:4px;border-radius:999px;background:var(--line);} input.volume::-moz-range-progress{height:4px;border-radius:999px;background:var(--vol-color);} input.volume::-moz-range-thumb{width:var(--vol-thumb);height:var(--vol-thumb);border:none;border-radius:50%;background:var(--vol-thumb-color,var(--vol-color));transition:transform .18s var(--mc-ease);} input.volume:not(:disabled):hover::-webkit-slider-thumb,input.volume:focus-visible::-webkit-slider-thumb{transform:scale(1);box-shadow:0 0 0 4px var(--mc-a22);} input.volume:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 2px var(--panel),0 0 0 4px var(--mc-a65);} input.volume:disabled{opacity:.4;cursor:default;} .volume-row.system input.volume{--vol-color:rgb(var(--fg-rgb) / .5);--vol-thumb-color:var(--text-soft);} .volume-row.muted input.volume{--vol-color:rgb(var(--fg-rgb) / .22);--vol-thumb-color:var(--muted);} /* ---- audio button (sits at the right of the sleep row) + audio modal (media + system volume) ---- */ .audio-btn{ margin-left:auto;display:flex;align-items:center;gap:7px;padding:4px 12px 4px 10px;background:none;border:1px solid var(--line);border-radius:999px; color:var(--text-soft);font-size:11.5px;cursor:pointer;transition:color .2s,border-color .24s ease,background-color .24s ease; } .audio-btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;} .audio-btn:hover,.audio-btn[aria-expanded="true"]{color:var(--text);border-color:var(--mc-a50);background:var(--mc-a08);} .audio-modal{ --music-accent-1:var(--core);--music-accent-2:var(--think); /* JS (applyAccentColors) overrides these inline, same as .music-card */ --mc-a08:rgb(var(--core-rgb) / .08);--mc-a14:rgb(var(--core-rgb) / .14);--mc-a22:rgb(var(--core-rgb) / .22); --mc-a35:rgb(var(--core-rgb) / .35);--mc-a50:rgb(var(--core-rgb) / .5);--mc-a65:rgb(var(--core-rgb) / .65); --mc-ease:cubic-bezier(.2,.8,.2,1); position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:20px; visibility:hidden;pointer-events:none;transition:visibility 0s linear .26s; } @supports (color:color-mix(in srgb, red, blue)){ .audio-modal{ --mc-a08:color-mix(in srgb, var(--music-accent-1) 8%, transparent);--mc-a14:color-mix(in srgb, var(--music-accent-1) 14%, transparent); --mc-a22:color-mix(in srgb, var(--music-accent-1) 22%, transparent);--mc-a35:color-mix(in srgb, var(--music-accent-1) 35%, transparent); --mc-a50:color-mix(in srgb, var(--music-accent-1) 50%, transparent);--mc-a65:color-mix(in srgb, var(--music-accent-1) 65%, transparent); } } .audio-modal.show{visibility:visible;pointer-events:auto;transition-delay:0s;} .audio-backdrop{position:absolute;inset:0;background:rgb(0 0 0 / .5);opacity:0;transition:opacity .24s ease;} .audio-modal.show .audio-backdrop{opacity:1;} .audio-card{ position:relative;width:min(340px,100%);padding:14px 18px 10px;border:1px solid var(--mc-a35);border-radius:16px;background:var(--panel); box-shadow:0 24px 60px -20px rgb(0 0 0 / .8),0 0 40px -22px var(--mc-a65);outline:none; opacity:0;transform:translateY(10px) scale(.97);transition:opacity .2s ease,transform .26s var(--mc-ease); } .audio-modal.show .audio-card{opacity:1;transform:none;} .audio-card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;} .audio-card-title{font-size:12px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--text-soft);} .audio-close{ width:24px;height:24px;padding:0;border:none;border-radius:50%;background:none;color:var(--muted);cursor:pointer; display:flex;align-items:center;justify-content:center;transition:color .2s,background-color .2s; } .audio-close:hover{color:var(--text);background:rgb(var(--fg-rgb) / .08);} .audio-close svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;} .audio-card .volume-row{height:38px;} .audio-modal :focus-visible{outline:2px solid var(--mc-a65);outline-offset:2px;} .audio-modal input:focus-visible,.audio-card:focus-visible{outline:none;} @media (prefers-reduced-motion:reduce){.audio-modal,.audio-modal *{transition-duration:.01ms !important;transition-delay:0s !important;}} .audio-modal.reduce-motion,.audio-modal.reduce-motion *{transition-duration:.01ms !important;transition-delay:0s !important;} /* ---- sleep timer (Feature; markup: #sleepBtn button with #sleepState "Off/On" pill, #sleepBadge live countdown, #sleepCancel quick-cancel, #sleepMenu popover with data-min duration buttons + #sleepOff). The popover is absolutely positioned INSIDE the card body (opens upward over the audio panel), so it can neither be clipped by .mc-body's overflow:hidden nor push the layout around. ---- */ .sleep-row{position:relative;display:flex;align-items:center;gap:10px;margin-bottom:16px;min-height:30px;} .sleep-btn{ background:none;border:1px solid var(--line);color:var(--text-soft);border-radius:999px; padding:4px 5px 4px 11px;font-size:11.5px;cursor:pointer;display:flex;align-items:center;gap:7px; transition:color .2s,border-color .24s ease,background-color .24s ease; } .sleep-btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;} .sleep-btn:hover{color:var(--text);border-color:var(--mc-a35);} .sleep-state{ font-size:9.5px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;padding:2px 7px;border-radius:999px; background:rgb(var(--fg-rgb) / .06);color:var(--muted);transition:background-color .24s ease,color .24s ease; } .sleep-btn.active{color:var(--text);border-color:var(--mc-a50);background:var(--mc-a08);} .sleep-btn.active .sleep-state{background:var(--music-accent-1);color:var(--on-core);} .sleep-badge{font-size:12px;color:var(--music-accent-1);font-variant-numeric:tabular-nums;letter-spacing:.02em;} .sleep-cancel{ width:22px;height:22px;padding:0;border:none;border-radius:50%;background:none;color:var(--muted);cursor:pointer; display:flex;align-items:center;justify-content:center;transition:color .2s,background-color .2s; } .sleep-cancel[hidden]{display:none;} .sleep-cancel:hover{color:var(--text);background:rgb(var(--fg-rgb) / .08);} .sleep-cancel svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;} /* thin remaining-time line under the row while the timer is armed (--sleep-p = remaining fraction, set by JS each tick) */ .sleep-row::after{ content:'';position:absolute;left:0;right:0;bottom:-8px;height:2px;border-radius:2px;pointer-events:none;opacity:0; background:linear-gradient(to right,var(--mc-a50) calc(var(--sleep-p,0) * 100%),transparent 0);transition:opacity .3s ease; } .sleep-row.active::after{opacity:1;} .sleep-row.fading .sleep-badge{opacity:.75;} .sleep-menu{ position:absolute;left:0;bottom:calc(100% + 8px);z-index:6;min-width:236px;padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--panel); box-shadow:0 14px 32px -12px rgb(0 0 0 / .7); opacity:0;visibility:hidden;pointer-events:none;transform:translateY(6px) scale(.97);transform-origin:left bottom; transition:opacity .2s ease,transform .24s var(--mc-ease),visibility 0s linear .24s; } .sleep-menu.show{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition-delay:0s;} .sleep-menu-head{display:flex;flex-direction:column;gap:1px;margin-bottom:8px;} .sleep-menu-title{font-size:12px;color:var(--text);} .sleep-menu-hint{font-size:10.5px;color:var(--muted);} .sleep-options{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;} .sleep-options button{ background:var(--bg2,rgb(var(--fg-rgb) / .04));border:1px solid var(--line);color:var(--text-soft); font-size:11.5px;padding:6px 0;border-radius:8px;cursor:pointer;font-variant-numeric:tabular-nums; transition:color .2s,border-color .2s,background-color .2s,transform .12s; } .sleep-options button:hover{color:var(--text);border-color:var(--mc-a50);} .sleep-options button:active{transform:scale(.95);} .sleep-options button.selected{color:var(--text);border-color:var(--mc-a65);background:var(--mc-a14);} .sleep-off{ display:block;width:100%;margin-top:8px;padding:6px 0;border:1px solid var(--line);border-radius:8px;background:none; color:var(--muted);font-size:11.5px;cursor:pointer;transition:color .2s,border-color .2s; } .sleep-off[hidden]{display:none;} .sleep-off:hover{color:var(--text);border-color:var(--mc-a50);} .spectrum{display:flex;align-items:flex-end;justify-content:center;gap:3px;height:32px;transition:opacity .4s ease;} .music-card:not(.has-track) .spectrum{opacity:.55;} .spectrum span{width:3px;height:3px;background:var(--music-accent-1);border-radius:2px;opacity:.3;will-change:height;transition:background-color .6s;} /* base opacity brightened from .25 */ /* ---- reduced motion: card follows both the OS setting and SARA.reduceMotion (JS adds .reduce-motion) ---- */ @media (prefers-reduced-motion:reduce){ .music-card *,.music-card *::before,.music-card *::after{transition-duration:.01ms !important;transition-delay:0s !important;animation:none !important;} .music-card::before{transition:none;} .music-card .art-block:hover{transform:none;} } .music-card.reduce-motion *,.music-card.reduce-motion *::before,.music-card.reduce-motion *::after{transition-duration:.01ms !important;transition-delay:0s !important;animation:none !important;} .music-card.reduce-motion::before{transition:none;} .music-card.reduce-motion .art-block:hover{transform:none;} /* ---- mini-player (fixed above nav; hidden on Apps where the full card is visible) ---- */ .mini-player{ --music-accent-1:var(--core);--music-accent-2:var(--think); /* same override point as .music-card; JS sets both */ --mp-a22:rgb(var(--core-rgb) / .22);--mp-a35:rgb(var(--core-rgb) / .35);--mp-a65:rgb(var(--core-rgb) / .65); --mp-spring:cubic-bezier(.34,1.42,.64,1); /* --mp-dx/--mp-dy = drag offset from the default spot, --mp-rise = entrance rise, --mp-tilt/--mp-scale = drag feel, --mp-p = playback progress (0..1). All written by js/music.js. */ --mp-dx:0px;--mp-dy:0px;--mp-rise:8px;--mp-tilt:0deg;--mp-scale:1;--mp-p:0; position:fixed;bottom:82px;left:50%; translate:calc(-50% + var(--mp-dx)) calc(var(--mp-dy) + var(--mp-rise));rotate:var(--mp-tilt);scale:var(--mp-scale); display:flex;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--line); border-radius:12px;padding:8px 10px 8px 8px;opacity:0;pointer-events:none;touch-action:none;-webkit-user-select:none;user-select:none; transition:opacity .25s,translate .5s var(--mp-spring),rotate .45s var(--mp-spring),scale .3s var(--mp-spring),border-color .25s,box-shadow .3s ease; z-index:9;max-width:300px;cursor:grab; } @supports (color:color-mix(in srgb, red, blue)){ .mini-player{ --mp-a22:color-mix(in srgb, var(--music-accent-1) 22%, transparent);--mp-a35:color-mix(in srgb, var(--music-accent-1) 35%, transparent); --mp-a65:color-mix(in srgb, var(--music-accent-1) 65%, transparent); } } .mini-player.show{opacity:1;pointer-events:auto;--mp-rise:0px;} .mini-player.show:hover{ border-color:rgb(var(--core-rgb) / .4); border-color:color-mix(in srgb, var(--music-accent-1) 40%, transparent); } body[data-page="apps"] .mini-player{opacity:0;pointer-events:none;} /* Keep the mini-player off the controls of the pages that sit at the bottom centre (audit 2026-10-30: it covered the chat input and Home's pause/customize buttons). */ body[data-page="chat"] .mini-player{bottom:150px;} body[data-page="home"] .mini-player{left:auto;right:24px;translate:var(--mp-dx) calc(var(--mp-dy) + var(--mp-rise));} .mini-player .mp-art{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,var(--music-accent-1),var(--music-accent-2)) center/cover;flex:none;transition:background-image .6s ease,filter .3s ease;} .mini-player .mp-meta{min-width:0;} .mini-player .mp-title{font-size:12.5px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px;} .mini-player .mp-artist{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px;} .mini-player .mp-btn{background:none;border:none;color:var(--music-accent-1);cursor:pointer;flex:none;margin-left:2px;transition:color .6s;} .mini-player .mp-btn svg{width:16px;height:16px;fill:currentColor;stroke:none;} .mini-player.paused{opacity:.7;} .mini-player.paused .mp-art{filter:saturate(.8);} .mini-player.reduce-motion,.mini-player.reduce-motion *{transition-duration:.01ms !important;} @media (prefers-reduced-motion:reduce){.mini-player,.mini-player *{transition-duration:.01ms !important;}} /* ---- draggable + animated mini-player (position / tilt / lift are driven by js/music.js through the --mp-* variables) ---- */ @property --mp-angle{syntax:'';inherits:false;initial-value:0deg;} /* while held or flung: the position follows 1:1 (no translate transition); tilt and lift stay smooth */ .mini-player.dragging,.mini-player.gliding{ transition:opacity .25s,translate 0s,rotate .15s ease-out,scale .25s var(--mp-spring),border-color .25s,box-shadow .3s ease; } .mini-player.show:hover:not(.dragging){--mp-scale:1.02;} .mini-player.show.dragging{ --mp-scale:1.05;cursor:grabbing;border-color:var(--mp-a65); box-shadow:0 18px 40px -14px rgb(0 0 0 / .75),0 0 0 1px var(--mp-a22),0 0 34px -6px var(--mp-a35); } .mini-player:focus-visible{outline:2px solid var(--mp-a65);outline-offset:2px;} /* one-shot shockwave when it lands after a drag / reset */ .mini-player.landed{animation:mpLand .7s ease-out;} @keyframes mpLand{ 0%{box-shadow:0 0 0 0 var(--mp-a35),0 0 28px -4px var(--mp-a35);} 100%{box-shadow:0 0 0 22px transparent,0 0 28px -4px transparent;} } /* grip dots: dim hint that it can be moved, brighter on hover / focus / drag */ .mini-player .mp-grip{ width:8px;height:18px;flex:none;margin-right:-4px;opacity:.3;transition:opacity .25s ease; background:radial-gradient(circle,var(--muted) 1px,transparent 1.4px) 0 0/4px 6px; } .mini-player:hover .mp-grip,.mini-player:focus-visible .mp-grip,.mini-player.dragging .mp-grip{opacity:.75;} /* sonar ripple around the artwork while playing */ .mini-player .mp-art{position:relative;} .mini-player .mp-art::after{ content:'';position:absolute;inset:0;border-radius:inherit;border:1px solid var(--music-accent-1);opacity:0;pointer-events:none; } .mini-player.show:not(.paused) .mp-art::after{animation:mpRipple 2.8s ease-out infinite;} @keyframes mpRipple{0%{opacity:.55;transform:scale(1);}100%{opacity:0;transform:scale(1.55);}} /* tiny equalizer (transform-only animation) */ .mini-player .mp-eq{display:flex;align-items:flex-end;gap:2px;height:14px;flex:none;opacity:.4;transition:opacity .3s ease;} .mini-player .mp-eq i{display:block;width:2.5px;height:100%;border-radius:2px;background:var(--music-accent-1);transform-origin:bottom;transform:scaleY(.3);transition:background-color .6s;} .mini-player.show:not(.paused) .mp-eq{opacity:1;} .mini-player.show:not(.paused) .mp-eq i{animation:mpEq 1.1s ease-in-out infinite;} .mini-player.show:not(.paused) .mp-eq i:nth-child(2){animation-delay:-.4s;} .mini-player.show:not(.paused) .mp-eq i:nth-child(3){animation-delay:-.75s;} @keyframes mpEq{0%,100%{transform:scaleY(.25);}50%{transform:scaleY(1);}} /* hairline playback progress along the bottom edge (--mp-p is set from the same interpolated position as the seek bar) */ .mini-player::after{ content:'';position:absolute;left:12px;bottom:3px;height:2px;border-radius:2px;pointer-events:none; width:calc((100% - 24px) * var(--mp-p)); background:linear-gradient(90deg,var(--music-accent-2),var(--music-accent-1)); box-shadow:0 0 6px var(--mp-a65);transition:width .5s linear; } /* slow aurora ring around the border while playing */ .mini-player::before{ content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;pointer-events:none;opacity:0; background:conic-gradient(from var(--mp-angle),transparent 0deg,var(--mp-a65) 50deg,transparent 120deg,transparent 200deg,var(--mp-a35) 250deg,transparent 320deg); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask-composite:exclude; transition:opacity .5s ease; } .mini-player.show:not(.paused)::before{opacity:1;animation:mpSpin 6s linear infinite;} @keyframes mpSpin{to{--mp-angle:360deg;}} /* nothing animates while the full card is on screen (the mini-player is hidden there) */ body[data-page="apps"] .mini-player::before, body[data-page="apps"] .mini-player *, body[data-page="apps"] .mini-player *::after{animation-play-state:paused !important;} .mini-player.reduce-motion,.mini-player.reduce-motion *,.mini-player.reduce-motion::before,.mini-player.reduce-motion *::after{animation:none !important;} @media (prefers-reduced-motion:reduce){.mini-player,.mini-player *,.mini-player::before,.mini-player *::after{animation:none !important;}} .mp-morph{position:fixed;z-index:58;pointer-events:none;overflow:hidden;background:var(--panel);box-shadow:inset 0 0 0 1px rgb(var(--core-rgb) / .35),0 18px 40px -14px rgb(0 0 0 / .6),0 0 34px -8px rgb(var(--core-rgb) / .3);contain:layout paint;} .mp-morph-fade{position:absolute;inset:0;will-change:opacity;} .mini-player.mp-morph-clone{position:absolute;left:0;top:0;bottom:auto;translate:none;rotate:none;scale:1;max-width:none;box-sizing:border-box;background:transparent;border-color:transparent;box-shadow:none;cursor:default;pointer-events:none;opacity:1 !important;transition:none !important;} .mini-player.mp-morph-clone::before{display:none;} body.mp-morphing #musicCard{pointer-events:none;} @media (prefers-reduced-motion:reduce){.mp-morph{display:none;}} /* ###################################################################### Merged from music-plus.css (formerly a separate file layered on this one) ###################################################################### */ /* ========================================================================== music-plus.css -- styles for js/music-plus.js (Lyrics + Recent inside the expanded music card). Load LAST. Uses the album-art accent already set by music.js (--music-accent-1 / --music-accent-2), falling back to the theme accent. ========================================================================== */ .music-card.expanded .mc-body{max-height:1200px;} /* room for the lyrics / recent panel */ .mx{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);--mx-a:var(--music-accent-1,var(--core));} .mx-tabs{display:inline-flex;gap:2px;padding:3px;border-radius:10px;background:var(--panel-2);border:1px solid var(--line);} .mx-tab{border:none;background:none;color:var(--text-soft);font:inherit;font-size:12.5px;padding:5px 14px;border-radius:8px;cursor:pointer;transition:color .2s ease,background .2s ease;} .mx-tab:hover{color:var(--text);} .mx-tab.on{background:var(--panel);color:var(--mx-a);box-shadow:var(--shadow-rest);} .mx-pane{margin-top:12px;} .mx-pane[hidden]{display:none;} .mx-empty{font-size:12.5px;color:var(--muted);line-height:1.55;padding:18px 4px;text-align:center;} .mx-foot{display:flex;justify-content:flex-end;padding-top:8px;} /* opt-in card */ .mx-optin{border:1px dashed var(--line);border-radius:12px;padding:16px;display:flex;flex-direction:column;align-items:flex-start;gap:10px;} .mx-optin-t{font-size:13.5px;font-weight:600;color:var(--text);} .mx-optin-d{font-size:12px;line-height:1.55;color:var(--muted);} /* lyrics */ .mx-ly-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;} .mx-ly-src{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);} .mx-ly-scroll{position:relative;height:248px;overflow-y:auto;padding:96px 6px;border-radius:12px;scroll-behavior:auto;overscroll-behavior:contain;} .mx-ly-scroll:not(.synced){padding:10px 6px 16px;} .ly-line{font-size:17px;line-height:1.45;font-weight:600;color:var(--text);padding:5px 4px;border-radius:8px;opacity:.5;transform-origin:left center; transition:opacity .45s var(--mc-ease,ease),color .45s ease,scale .5s var(--ease-premium,cubic-bezier(.16,1,.3,1)),background .2s ease;} .mx-ly-scroll:not(.synced) .ly-line{font-size:14px;font-weight:400;opacity:.85;color:var(--text-soft);padding:2px 4px;} .mx-ly-scroll.synced .ly-line{cursor:pointer;} .mx-ly-scroll.synced .ly-line:hover{opacity:.8;background:rgb(var(--fg-rgb,255 255 255) / .04);} .ly-line.past{opacity:.32;} .ly-line.active{opacity:1;color:var(--mx-a);scale:1.04;} .ly-line.gap{color:var(--muted);font-size:14px;} .ly-note{font-size:11.5px;color:var(--muted);padding:12px 4px 0;} .mx-ly-skel{display:flex;flex-direction:column;gap:14px;padding:30px 6px;} .mx-ly-skel .skel-line{height:14px;border-radius:7px;display:block;} /* recent */ .mx-rc-list{display:flex;flex-direction:column;max-height:300px;overflow-y:auto;overscroll-behavior:contain;} .mx-rc{display:flex;align-items:center;gap:12px;padding:9px 4px;border-top:1px solid var(--line);} .mx-rc:first-child{border-top:none;} .mx-rc-tx{min-width:0;flex:1;} .mx-rc-t{font-size:13px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .mx-rc.now .mx-rc-t{color:var(--mx-a);} .mx-rc-s{font-size:11.5px;color:var(--muted);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} html[data-quality="low"] .ly-line{transition:none;} @media (prefers-reduced-motion:reduce){.ly-line{transition:none;}.ly-line.active{scale:1;}} /* ###################################################################### Redesign phase 5 -- Music card (spec 8.2): 720 x 96 closed, about 720 x 360 open. The seek thumb keeps its size (js/apps/music.js measures it). ###################################################################### */ #page-apps .music-card{border-radius:var(--r-hero);box-shadow:var(--shadow-rest);margin:0 auto;} #page-apps .mc-head{min-height:94px;box-sizing:border-box;padding:var(--sp-4) var(--sp-5);} #page-apps .art-block{width:64px;height:64px;border-radius:14px;} #page-apps .t-title{font:600 16px/1.25 var(--font);} #page-apps .t-artist{font-size:13px;} #page-apps .mc-play{width:48px;height:48px;} #page-apps .mc-play svg{width:18px;height:18px;} #page-apps .mc-chev{width:36px;height:36px;box-sizing:border-box;margin:0;padding:0;align-items:center;justify-content:center;border-radius:var(--r-ctl);} #page-apps .mc-chev:hover{background:rgb(var(--fg-rgb) / .06);} #page-apps .mc-chev svg{width:16px;height:16px;} #page-apps .mc-body-inner{padding:0 var(--sp-6) var(--sp-5);} #page-apps .seek-rail{height:6px;margin-top:-3px;} #page-apps .transport{gap:var(--sp-2);} #page-apps .transport button{width:44px;height:44px;} #page-apps .transport .t-play{width:56px;height:56px;} #page-apps .transport .t-play svg{width:20px;height:20px;} #page-apps .spectrum{height:48px;} #page-apps .src-badge{color:var(--text);} /* was --text-soft on the tinted badge: 4.3:1 in Paper and Oat */ /* ==== style/automation/automation.css ==== */ /* ========================================================================== automation.css -- Automation page: mode chips, routine cards, routine-builder modal. Markup: index.html #page-automation, #routineModal. JS: js/automation.js, js/routine-builder.js. ========================================================================== */ .mode-note{max-width:640px;font-size:12.5px;color:var(--muted);margin:0 0 12px;} .auto-card{max-width:640px;border:1px solid var(--line);background:var(--panel);border-radius:12px;padding:16px 18px;margin-bottom:12px;display:flex;align-items:center;justify-content:space-between;gap:14px;transition:border-color .2s;position:relative;} .auto-card:hover{border-color:rgb(var(--core-rgb) / .3);} .auto-card.auto-off{opacity:.55;} /* turned off: its scheduled trigger_time is skipped (it can still be run manually) */ .auto-card.auto-off:hover{opacity:.8;} .auto-card::before{ content:'';position:absolute;left:0;top:16%;bottom:16%;width:2px;border-radius:2px;background:var(--core); box-shadow:0 0 8px var(--core);opacity:0;transform:scaleY(.4);transition:opacity .25s,transform .25s;pointer-events:none; } .auto-card:hover::before{opacity:.85;transform:scaleY(1);} .auto-info{min-width:0;} .auto-info .a-name{font-size:14.5px;font-weight:500;margin-bottom:4px;overflow-wrap:anywhere;} .auto-info .a-sub{font-size:12.5px;color:var(--muted);} .auto-actions{display:flex;gap:8px;align-items:center;flex:none;} .icon-x{background:none;border:none;color:var(--muted);cursor:pointer;font-size:16px;padding:4px 6px;line-height:1;} .icon-x:hover{color:var(--danger);} /* ---- routine builder modal ---- */ .rt-steps{display:flex;flex-direction:column;gap:8px;margin-top:4px;} .rt-step{background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:10px;display:flex;flex-direction:column;gap:8px;} .rt-line{display:flex;gap:8px;align-items:center;} .rt-line select.rt-mode{flex:0 0 108px;} .rt-line select.rt-adv-type{flex:0 0 84px;} .rt-line > select,.rt-line > input{width:auto;flex:1;min-width:0;padding:8px 10px;font-size:12.5px;} .rt-x{background:none;border:none;color:var(--muted);cursor:pointer;font-size:15px;flex:none;} .rt-x:hover{color:var(--danger);} .rt-empty{font-size:12.5px;color:var(--muted);} /* ###################################################################### Merged from automation-plus.css (formerly a separate file layered on this one) ###################################################################### */ /* ========================================================================== automation-plus.css -- styles for js/automation-plus.js (flow view, history, templates, builder upgrades). Load LAST. ========================================================================== */ /* ---------------------------------------------------------------- routine cards: expandable flow */ .auto-card{flex-wrap:wrap;} .auto-info{cursor:pointer;} .rt-detail{flex:0 0 100%;display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease-premium,cubic-bezier(.16,1,.3,1));} .auto-card.rt-open .rt-detail{grid-template-rows:1fr;} .rt-detail-in{overflow:hidden;min-height:0;} .rt-detail-pad{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);opacity:0;transform:translateY(-4px);transition:opacity .3s ease .06s,transform .45s var(--ease-premium,cubic-bezier(.16,1,.3,1)) .04s;} .auto-card.rt-open .rt-detail-pad{opacity:1;transform:none;} .auto-card.rt-ran{animation:rtRan .9s ease-out;} @keyframes rtRan{0%{box-shadow:0 0 0 0 rgb(var(--core-rgb) / .35);}100%{box-shadow:0 0 0 14px rgb(var(--core-rgb) / 0);}} /* flow strip (cards + builder mini-map) */ .rt-flow{display:flex;align-items:flex-start;overflow-x:auto;padding:6px 2px 10px;} .rt-node{flex:none;width:84px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;position:relative;} .rt-ico{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--panel-2);border:1px solid var(--line);color:var(--text-soft);flex:none; transition:border-color .25s ease,color .25s ease,background .25s ease,box-shadow .35s ease,scale .3s var(--ease-spring,cubic-bezier(.22,1.45,.36,1));} .rt-ico svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;} .rt-node.trigger .rt-ico{border-radius:50%;color:var(--core);border-color:rgb(var(--core-rgb) / .4);} .rt-node.danger .rt-ico{color:var(--danger);border-color:rgb(var(--danger-rgb,255 77 94) / .45);} .rt-lbl{font-size:11px;line-height:1.25;color:var(--text-soft);max-width:80px;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} .rt-num{position:absolute;top:-6px;right:14px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--panel);border:1px solid var(--line);font-size:9.5px;line-height:14px;text-align:center;color:var(--muted);} .rt-link{flex:none;width:26px;height:2px;margin-top:18px;border-radius:2px;background:var(--line);position:relative;overflow:hidden;} .rt-link::after{content:'';position:absolute;inset:0;background:var(--core);transform:translateX(-101%);transition:transform .5s var(--ease-premium,cubic-bezier(.16,1,.3,1));} .rt-link.on::after{transform:none;} .rt-node.lit .rt-ico{color:var(--on-core);background:var(--core);border-color:var(--core);box-shadow:0 0 18px -2px rgb(var(--core-rgb) / .6);scale:1.1;} .rt-node.done .rt-ico{color:var(--core);border-color:rgb(var(--core-rgb) / .55);} .rt-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;color:var(--muted);margin-top:2px;flex-wrap:wrap;} .rt-hist{display:inline-flex;align-items:center;gap:7px;} .rt-dot{width:7px;height:7px;border-radius:50%;background:var(--muted);flex:none;} .rt-dot.ok{background:var(--success,#3fd8c4);box-shadow:0 0 6px rgb(var(--core-rgb) / .5);} .rt-dot.bad{background:var(--danger);} .rt-pv{display:inline-flex;align-items:center;gap:10px;} .rt-pv-cap{font-size:11px;color:var(--core);} .rt-pv-cap[hidden]{display:none;} /* ---------------------------------------------------------------- templates */ .rt-tpl-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;max-width:640px;margin-top:8px;} .rt-tpl{border:1px solid var(--line);background:var(--panel);border-radius:12px;padding:12px 12px 10px;display:flex;flex-direction:column;gap:10px; transition:border-color .2s ease,translate .3s var(--ease-premium,cubic-bezier(.16,1,.3,1)),box-shadow .3s ease;} .rt-tpl:hover{border-color:rgb(var(--core-rgb) / .4);translate:0 -1px;box-shadow:var(--shadow-hover);} .rt-tpl-top{display:flex;gap:10px;align-items:flex-start;} .rt-tpl-tx{min-width:0;} .rt-tpl-name{font-size:13.5px;font-weight:500;color:var(--text);} .rt-tpl-desc{font-size:11.5px;color:var(--muted);margin-top:2px;line-height:1.35;} .rt-tpl-steps{display:flex;align-items:center;gap:6px;margin-top:auto;} .rt-tpl-steps .pill-btn{margin-left:auto;} .rt-mini{width:24px;height:24px;border-radius:8px;display:grid;place-items:center;background:var(--panel-2);border:1px solid var(--line);color:var(--text-soft);} .rt-mini svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;} #routinesList .empty{border:1px dashed var(--line);border-radius:12px;padding:18px;max-width:640px;text-align:center;} #modeChips .chip{padding:8px 16px;} /* ---------------------------------------------------------------- builder modal */ .rt-flow-mini{border:1px solid var(--line);border-radius:12px;background:var(--panel-2);padding:12px 10px 6px;margin:4px 0 10px;} .rt-flow-mini .rt-node[role="button"]{cursor:pointer;} .rt-flow-mini .rt-node[role="button"]:hover .rt-ico{border-color:rgb(var(--core-rgb) / .5);color:var(--core);} .rt-step{position:relative;transition:border-color .2s ease,box-shadow .25s ease,opacity .2s ease;} .rt-step.dragging{opacity:.45;} .rt-step.drop-before{box-shadow:0 -2px 0 0 var(--core);} .rt-step.drop-after{box-shadow:0 2px 0 0 var(--core);} .rt-step.rt-flash{animation:rtFlash 1s ease-out;} @keyframes rtFlash{0%{box-shadow:0 0 0 0 rgb(var(--core-rgb) / .5);border-color:var(--core);}100%{box-shadow:0 0 0 10px rgb(var(--core-rgb) / 0);}} .rt-grip{flex:none;display:grid;place-items:center;width:18px;height:26px;color:var(--muted);cursor:grab;border-radius:6px;transition:color .15s ease,background .15s ease;} .rt-grip:hover{color:var(--core);background:rgb(var(--core-rgb) / .1);} .rt-grip:active{cursor:grabbing;} .rt-grip svg{width:14px;height:14px;fill:currentColor;stroke:none;} .rt-badge{flex:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:10.5px;font-weight:600;background:rgb(var(--core-rgb) / .14);color:var(--core);} .rt-mv{flex:none;width:24px;height:24px;display:grid;place-items:center;background:none;border:none;color:var(--muted);border-radius:6px;cursor:pointer;transition:color .15s ease,background .15s ease;} .rt-mv:hover:not(:disabled){color:var(--core);background:rgb(var(--core-rgb) / .12);} .rt-mv:disabled{opacity:.3;cursor:default;} .rt-mv svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;} /* action picker */ .rt-picker{border:1px solid rgb(var(--core-rgb) / .35);border-radius:12px;background:var(--panel);margin-top:10px;overflow:hidden;opacity:0;translate:0 -6px;transition:opacity .22s ease,translate .3s var(--ease-premium,cubic-bezier(.16,1,.3,1));} .rt-picker[hidden]{display:none;} .rt-picker.open{opacity:1;translate:0 0;} .rt-pk-search{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--line);color:var(--muted);} .rt-pk-search svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;flex:none;} .rt-pk-search input{flex:1;min-width:0;background:none;border:none;outline:none;color:var(--text);font:inherit;font-size:13px;padding:2px 0;} .rt-pk-list{max-height:240px;overflow-y:auto;padding:4px 6px 8px;} .rt-pk-group[hidden],.rt-pk-item[hidden]{display:none;} .rt-pk-gl{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);padding:10px 8px 4px;} .rt-pk-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:none;background:none;color:var(--text-soft);font:inherit;font-size:13px;padding:7px 8px;border-radius:8px;cursor:pointer;transition:background .15s ease,color .15s ease,translate .2s var(--ease-premium,cubic-bezier(.16,1,.3,1));} .rt-pk-item:hover{background:rgb(var(--core-rgb) / .1);color:var(--text);translate:2px 0;} .rt-pk-item:active{scale:.985;} .rt-pk-item.danger .rt-pk-ic{color:var(--danger);} .rt-pk-ic{display:grid;place-items:center;width:22px;height:22px;color:var(--core);flex:none;} .rt-pk-ic svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;} .rt-pk-foot{display:flex;align-items:center;gap:12px;padding:8px 12px;border-top:1px solid var(--line);} .rt-pk-added{margin-right:auto;font-size:11.5px;color:var(--core);} /* quality tiers + reduced motion */ html[data-quality="low"] .rt-link::after,html[data-quality="low"] .rt-detail{transition:none;} @media (prefers-reduced-motion:reduce){.rt-detail,.rt-detail-pad,.rt-picker,.rt-link::after{transition:none;}.auto-card.rt-ran,.rt-step.rt-flash{animation:none;}} /* ###################################################################### Redesign phase 5 -- Automation (spec section 8.3): a 720 px column, mode tiles, routine rows with an actions menu. ###################################################################### */ #page-automation .page-body{padding-bottom:var(--pad-bottom);} #page-automation .page-body > *{width:100%;max-width:var(--content-a);margin-inline:auto;box-sizing:border-box;} #page-automation .section-label{font:var(--t-caption);letter-spacing:.06em;margin:var(--sp-6) auto var(--sp-2);} #page-automation .page-body > .section-label:first-child{margin-top:0;} #page-automation .mode-note{max-width:var(--content-a);font:var(--t-helper);margin-bottom:var(--sp-3);} /* mode tiles: three to a row, 96 px tall */ #page-automation #modeChips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-3);} #page-automation #modeChips .mode-tile{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;min-height:96px;box-sizing:border-box;min-width:0;padding:var(--sp-3) var(--sp-4);border-radius:18px;background:var(--panel);border:1px solid var(--line);color:var(--text-soft);text-align:left;white-space:normal;transition:border-color var(--dur-fast),background var(--dur-fast),transform var(--dur-fast) var(--ease-spring);} #page-automation #modeChips .mode-tile:hover{border-color:rgb(var(--core-rgb) / .4);transform:translateY(-1px);box-shadow:none;} #page-automation #modeChips .mode-tile:active{transform:scale(.985);} #page-automation .mode-tile > .ic:first-child{width:22px;height:22px;margin-bottom:var(--sp-1);color:var(--core);} #page-automation .mode-tile b{font:600 14px/1.25 var(--font);color:var(--text);} #page-automation .mode-tile small{max-width:100%;font:var(--t-helper);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} #page-automation #modeChips .mode-tile.on{border-color:rgb(var(--core-rgb) / .55);background:rgb(var(--core-rgb) / .10);} #page-automation #modeChips .mode-tile.on small{color:var(--text-soft);} /* muted on the tinted tile was 4.06 in light themes */ #page-automation .mode-check{position:absolute;top:var(--sp-2);right:var(--sp-2);width:20px;height:20px;padding:var(--sp-1);box-sizing:border-box;border-radius:50%;background:var(--core);color:var(--on-core);stroke-width:2.4;opacity:0;transform:scale(.6);transition:opacity var(--dur-fast),transform var(--dur-med) var(--ease-spring);} #page-automation .mode-tile.on .mode-check{opacity:1;transform:none;} /* routines */ #page-automation .auto-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);margin-top:var(--sp-6);margin-bottom:var(--sp-3);} #page-automation .auto-head .section-label{width:auto;margin:0;} #page-automation #newRoutineBtn{height:36px;box-sizing:border-box;padding:0 var(--sp-4);border-radius:var(--r-ctl);margin:0;flex:none;} #page-automation .auto-card{max-width:none;min-height:72px;box-sizing:border-box;margin-bottom:var(--sp-2);padding:var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4);justify-content:flex-start;gap:0 var(--sp-3);border-radius:var(--r-sm);} #page-automation .auto-card::before{display:none;} #page-automation .auto-plate{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:var(--r-ctl);background:rgb(var(--core-rgb) / .12);color:var(--core);} #page-automation .auto-info{flex:1 1 0;} #page-automation .auto-info .a-name{font:600 14px/1.3 var(--font);margin-bottom:2px;} #page-automation .auto-info .a-sub{font:var(--t-helper);} #page-automation .auto-actions{position:relative;} /* the card with the open menu lies above the cards after it, otherwise they cover the menu */ #page-automation .auto-card:has(.auto-menu:not([hidden])){z-index:20;} #page-automation .auto-more{display:grid;place-items:center;width:32px;height:32px;padding:0;border:none;border-radius:var(--r-ctl);background:none;color:var(--muted);cursor:pointer;transition:color var(--dur-fast),background var(--dur-fast);} #page-automation .auto-more:hover,#page-automation .auto-more[aria-expanded="true"]{color:var(--text);background:rgb(var(--fg-rgb) / .06);} #page-automation .auto-more svg{width:18px;height:18px;fill:currentColor;} #page-automation .auto-menu{position:absolute;top:calc(100% + var(--sp-1));right:0;z-index:12;display:flex;flex-direction:column;min-width:150px;padding:var(--sp-1);border:1px solid var(--line);border-radius:var(--r-ctl);background:var(--panel);box-shadow:var(--shadow-hover);} #page-automation .auto-menu button{height:36px;padding:0 var(--sp-3);border:none;border-radius:var(--sp-2);background:none;color:var(--text-soft);font:var(--t-label);font-size:13px;text-align:left;cursor:pointer;white-space:nowrap;} #page-automation .auto-menu button:hover,#page-automation .auto-menu button:focus-visible{color:var(--text);background:rgb(var(--fg-rgb) / .06);} #page-automation .auto-menu button.danger{color:var(--danger);} #page-automation .auto-menu button.danger:hover{background:rgb(var(--danger-rgb) / .12);color:var(--danger);} #page-automation .auto-card .rt-detail{order:9;} /* templates and the builder */ #page-automation .rt-tpl-row{max-width:var(--content-a);grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--sp-3);margin-top:0;} #page-automation .rt-tpl{border-radius:var(--r-sm);} #page-automation #routinesList .empty{max-width:none;} #routineModal .modal{width:min(560px,100%);border-radius:var(--r-hero);} @media (max-width:1099.98px){#page-automation #modeChips{grid-template-columns:repeat(2,minmax(0,1fr));}} html:is([data-quality="low"],[data-motion="reduce"]) #page-automation #modeChips .mode-tile:hover:not(:active){transform:none;} /* same weight as the hover rule above, so it really wins */ @media (prefers-reduced-motion:reduce){#page-automation .mode-check,#page-automation #modeChips .mode-tile{transition:none;}} /* ==== style/settings/settings.css ==== */ /* ========================================================================== settings.css -- Settings page: setting rows, language chips, accordions, info rows, skills, analytics bars, system stats. Markup: index.html #page-settings. JS: js/settings.js, settings-panels.js, settings-data.js, settings-skills.js. ========================================================================== */ .set-row{max-width:560px;display:flex;align-items:center;justify-content:space-between;padding:16px 0;border-bottom:1px solid var(--line);gap:20px;} .set-info .s-name{font-size:14.5px;margin-bottom:3px;} .set-info .s-sub{font-size:12px;color:var(--muted);} .set-row input[type=text]{width:170px;} .slider-wrap{display:flex;align-items:center;gap:10px;width:170px;} .slider-val{font-size:12px;color:var(--muted);width:32px;text-align:right;font-variant-numeric:tabular-nums;} .set-group-label{max-width:560px;} /* ---- accordions ---- */ .acc-section{max-width:560px;border-bottom:1px solid var(--line);} .acc-header{display:flex;justify-content:space-between;align-items:center;padding:16px 0;cursor:pointer;} .acc-header .a-title{font-size:14.5px;} .acc-header .a-sub2{font-size:12px;color:var(--muted);margin-top:2px;} .acc-header .chev{color:var(--muted);transition:transform .2s, color .2s;flex:none;} .acc-header .chev svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8;} .acc-section.open .chev{transform:rotate(90deg);color:var(--core);} .acc-body{max-height:0;overflow:hidden;transition:max-height .3s ease;} .acc-section.open .acc-body{max-height:640px;overflow-y:auto;} .acc-body-inner{padding:2px 0 18px;display:flex;flex-direction:column;gap:11px;} .info-row{display:flex;justify-content:space-between;gap:16px;font-size:13px;color:var(--text-soft);} .info-row b{color:var(--text);font-weight:500;text-align:right;overflow-wrap:anywhere;} .info-row b.ok{color:var(--core);} .info-row b.bad{color:var(--danger);} .acc-note{font-size:12px;color:var(--muted);line-height:1.5;} .btn-row{display:flex;gap:10px;flex-wrap:wrap;} /* ---- skills ---- */ .skill-row{display:flex;justify-content:space-between;align-items:center;gap:14px;font-size:13px;color:var(--text-soft);} .skill-row .s-main{min-width:0;} .skill-row .s-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--core);margin-right:8px;box-shadow:0 0 5px rgb(var(--core-rgb) / .5);} .skill-row.err .s-dot{background:var(--danger);box-shadow:none;} .skill-row.off .s-dot{background:var(--muted);box-shadow:none;} .skill-row .s-desc{display:block;font-size:11.5px;color:var(--muted);margin:2px 0 0 14px;overflow-wrap:anywhere;} /* ---- analytics ---- */ .bar-row{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--text-soft);} .bar-row .b-name{flex:0 0 46%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .bar-row .b-track{flex:1;height:3px;background:var(--line);border-radius:2px;} .bar-row .b-fill{height:100%;background:var(--core);border-radius:2px;box-shadow:0 0 6px rgb(var(--core-rgb) / .5);transition:width .6s cubic-bezier(.22,1,.36,1);} .bar-row .b-n{width:34px;text-align:right;color:var(--muted);font-variant-numeric:tabular-nums;} .trend{display:flex;align-items:flex-end;gap:4px;height:38px;} .trend span{flex:1;background:var(--core);opacity:.55;border-radius:2px;min-height:2px;} .trend.draw-in{animation:trendDraw .9s cubic-bezier(.22,1,.36,1) both;} /* first view only (js/settings-data.js playTrendDraw) */ @keyframes trendDraw{from{clip-path:inset(0 100% 0 0);}to{clip-path:inset(0 0 0 0);}} @media (prefers-reduced-motion:reduce){.trend.draw-in{animation:none;}} .trend-cap{display:flex;justify-content:space-between;font-size:10.5px;color:var(--muted);} .recent-line{font-size:12.5px;color:var(--text-soft);line-height:1.45;} .recent-line small{display:block;color:var(--muted);font-size:11px;} .info-row.tog{align-items:center;} /* ---- grouped cards (Assistant / Voice / Intelligence & Skills / Memory / System / Unsorted) ---- */ .set-cards{display:flex;flex-direction:column;gap:14px;max-width:560px;padding-bottom:24px;} .set-card{background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:16px 20px 6px;box-shadow:var(--shadow-rest);} .set-card-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-bottom:10px;border-bottom:1px solid var(--line);} .set-card-title{font-size:14.5px;font-weight:500;} .set-card-sub{font-size:12px;color:var(--muted);text-align:right;} .set-card .set-row{max-width:none;padding:12px 0;} .set-card .set-row:last-child{border-bottom:none;} .set-card-body{display:flex;flex-direction:column;gap:11px;padding:12px 0 14px;} .set-card .section-label{margin:8px 0 0;} .set-card .section-label.sub{margin:2px 0 0;opacity:.75;} .set-card .section-label:first-child{margin-top:0;} .set-card .acc-section{max-width:none;border-bottom:none;border-top:1px solid var(--line);} .skills-scroll{max-height:320px;overflow-y:auto;} .stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:8px;} .stat{display:flex;flex-direction:column;gap:3px;padding:10px 12px;background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-sm);min-width:0;transition:border-color .2s,transform .15s,box-shadow .2s;} .stat:hover{border-color:rgb(var(--core-rgb) / .4);transform:translateY(-2px);} :where(html[data-quality="high"]:not([data-motion="reduce"])) .stat:hover{box-shadow:0 0 16px rgb(var(--core-rgb) / .12);} /* hover glow: High tier only */ .stat b{font-size:15px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums;overflow-wrap:anywhere;} .stat span{font-size:11px;color:var(--muted);} /* ---- proactive toggles (compact 2-column grid inside Assistant card) ---- */ .tog-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 22px;} .pv-recent{max-height:140px;overflow-y:auto;} /* ========================================================================== Settings control-center layer -- everything below is scoped to #page-settings ========================================================================== */ @property --smx{syntax:'';inherits:false;initial-value:50px;} @property --smy{syntax:'';inherits:false;initial-value:0px;} /* ---- layout: group list + one group at a time (redesign spec 9.1) ---- */ #page-settings .set-layout{display:grid;grid-template-columns:248px minmax(0,1fr);gap:var(--sp-7);max-width:var(--content-b);align-items:start;} #page-settings .set-cards{display:block;min-width:0;max-width:none;padding-bottom:var(--sp-7);} #page-settings .set-group{display:none;} #page-settings .set-group.on{display:block;animation:setGroupIn var(--dur-med) var(--ease-premium) both;} @keyframes setGroupIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}} #page-settings .set-group-head{display:block;margin-bottom:var(--sp-4);} #page-settings .set-group-title{margin:0;font:600 22px/1.2 var(--font);color:var(--text);} #page-settings .set-group-desc{margin:var(--sp-1) 0 0;font:var(--t-helper);font-size:13px;color:var(--muted);} #page-settings .set-group-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gutter);align-items:stretch;} /* cards that need the full width of the pane (the others sit two to a row) */ #grp-quick,#grp-reminders,#grp-voice,#grp-sounds,#grp-appearance,#grp-skills,#grp-calendar,#grp-security,#grp-system,#grp-analytics,#grp-presets{grid-column:1/-1;} /* ---- group list (the old rail) ---- */ #page-settings #setRail{position:sticky;top:0;z-index:6;display:flex;flex-direction:column;gap:var(--sp-1);padding:0;border:none;border-radius:0;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;} #page-settings #setRail::before,#page-settings #setRail::after{display:none;} #page-settings .set-rail-ind{display:none;} #page-settings #setRail .set-search{height:40px;margin:0 0 var(--sp-3);padding:0 var(--sp-3);border-radius:var(--r-ctl);} #page-settings #setRail button{position:relative;display:flex;align-items:center;gap:var(--sp-3);width:100%;height:44px;padding:0 var(--sp-3);border:none;border-radius:var(--r-ctl);background:none; font:var(--t-label);color:var(--muted);text-align:left;white-space:nowrap;cursor:pointer;transition:color var(--dur-fast),background var(--dur-fast);} #page-settings #setRail button::before{content:none;} #page-settings #setRail button:hover{color:var(--text);background:rgb(var(--fg-rgb) / .04);} #page-settings #setRail button.on{color:var(--text);background:rgb(var(--core-rgb) / .12);box-shadow:inset 0 0 0 1px rgb(var(--core-rgb) / .30);} #page-settings #setRail button.on::after{content:'';position:absolute;left:0;top:13px;width:3px;height:18px;border-radius:0 3px 3px 0;background:var(--core);} #page-settings #setRail button:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;} /* ---- cards ---- */ #page-settings .set-card{position:relative;isolation:isolate;display:flex;flex-direction:column;scroll-margin-top:12px;padding:18px 22px 8px;border-radius:22px;border-color:rgb(var(--fg-rgb) / .09);background:linear-gradient(180deg,rgb(var(--fg-rgb) / .03),transparent 38%),var(--panel);transition:border-color .3s,box-shadow .35s;} #page-settings .set-card:hover{border-color:rgb(var(--core-rgb) / .28);box-shadow:var(--shadow-hover);} #page-settings .set-card-head{align-items:center;padding-bottom:12px;} #page-settings .set-card-title{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:600;letter-spacing:.01em;} #page-settings .set-card-title::before{content:'';width:3px;height:14px;border-radius:2px;background:linear-gradient(var(--core),var(--think));} #page-settings .set-glow{position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s,--smx .14s linear,--smy .14s linear;background:radial-gradient(300px circle at var(--smx) var(--smy),rgb(var(--core-rgb) / .10),transparent 65%);} #page-settings .set-card:hover>.set-glow{opacity:1;} #page-settings .set-card::after{content:'';position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;border:1px solid rgb(var(--core-rgb) / .75);opacity:0;} #page-settings .set-card.set-flash::after{animation:setFlash .9s var(--ease-premium);} #page-settings #grp-appearance.set-bloom::after{border:none;background:radial-gradient(circle at var(--bx,50%) var(--by,50%),rgb(var(--core-rgb) / .26),transparent 62%);animation:setBloom .9s var(--ease-premium);} @keyframes setFlash{0%{opacity:0;}25%{opacity:1;}100%{opacity:0;}} @keyframes setBloom{0%{opacity:0;clip-path:circle(0 at var(--bx,50%) var(--by,50%));}20%{opacity:1;}100%{opacity:0;clip-path:circle(140% at var(--bx,50%) var(--by,50%));}} #page-settings.set-enter .set-card{animation:setCardIn .55s var(--ease-premium) both;animation-delay:calc(var(--i,0) * 45ms);} /* ---- quick controls ---- */ #page-settings .qc-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;padding:14px 0 16px;} #page-settings .qc-tile{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0;text-align:left;padding:12px 13px 42px;background:var(--panel-2);border:1px solid var(--line);border-radius:16px;color:var(--text-soft);cursor:pointer;transition:border-color .25s,background .25s,color .2s,transform .16s var(--ease-spring);} #page-settings .qc-tile:hover{border-color:rgb(var(--core-rgb) / .4);color:var(--text);} #page-settings .qc-tile:active{transform:scale(.97);} #page-settings .qc-tile:focus-visible{outline:2px solid var(--core);outline-offset:2px;} #page-settings .qc-tile.on{border-color:rgb(var(--core-rgb) / .5);color:var(--text);background:linear-gradient(160deg,rgb(var(--core-rgb) / .14),var(--panel-2) 70%);} #page-settings .qc-name{font-size:13px;font-weight:500;} #page-settings .qc-sub{font-size:11px;color:var(--muted);} #page-settings .qc-sw{position:absolute;left:13px;bottom:12px;width:30px;height:18px;border-radius:9px;background:rgb(var(--fg-rgb) / .16);transition:background .25s;} #page-settings .qc-sw::after{content:'';position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .38s var(--ease-spring);} #page-settings .qc-tile.on .qc-sw{background:var(--core);} #page-settings .qc-tile.on .qc-sw::after{transform:translateX(12px);} /* ---- toggle halo (one-shot, set by settings.js) ---- */ #page-settings .toggle::before,#page-settings .qc-sw::before{content:'';position:absolute;inset:-3px;border-radius:999px;border:2px solid rgb(var(--core-rgb) / .55);opacity:0;pointer-events:none;} #page-settings .fx-halo::before{animation:setHalo .55s var(--ease-premium);} @keyframes setHalo{0%{opacity:.9;transform:scale(.92);}100%{opacity:0;transform:scale(1.28);}} /* ---- sliders ---- */ #page-settings .slider-wrap{width:200px;} #page-settings .slider-wrap input[type=range]{height:4px;background:linear-gradient(90deg,var(--core) calc(var(--fill,50) * 1%),var(--line) 0);} #page-settings .slider-wrap input[type=range]::-webkit-slider-thumb{width:16px;height:16px;border:2px solid var(--panel);box-shadow:0 0 0 1px rgb(var(--core-rgb) / .6),0 2px 6px rgba(0,0,0,.35);transition:transform .18s var(--ease-spring),box-shadow .2s;} #page-settings .slider-wrap input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.15);} #page-settings .slider-wrap input[type=range]:active::-webkit-slider-thumb{transform:scale(1.25);box-shadow:0 0 0 5px rgb(var(--core-rgb) / .2),0 2px 6px rgba(0,0,0,.35);} #page-settings #hueSlider:active::-webkit-slider-thumb{transform:scale(1.2);} /* ---- themes ---- */ #page-settings .theme-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;} #page-settings .theme-card{border-radius:16px;transition:border-color .28s,box-shadow .28s,transform .3s var(--ease-premium),color .2s;} #page-settings .theme-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover);} #page-settings .theme-card.on{transform:translateY(-1px);box-shadow:0 0 0 1px var(--core),0 10px 26px -12px var(--glow);} /* ---- memory ---- */ #grp-memory .set-card-body{display:flex;flex-direction:column;gap:var(--sp-3);} #page-settings #grp-memory .mem-ring{width:96px;height:96px;margin:0 auto;flex:none;} #grp-memory .stat-grid{grid-template-columns:repeat(2,minmax(0,1fr));} #grp-memory .stat-grid .stat:last-child{grid-column:1/-1;} #page-settings .mem-ring{position:relative;width:104px;height:104px;} #page-settings .mem-ring svg{width:100%;height:100%;transform:rotate(-90deg);} #page-settings .mem-ring circle{fill:none;stroke-width:3.2;stroke-linecap:round;} #page-settings .mr-bg{stroke:var(--line);} #page-settings .mr-fg{stroke:var(--core);stroke-dasharray:var(--p,0) 100;transition:stroke-dasharray .9s var(--ease-premium);filter:drop-shadow(0 0 3px rgb(var(--core-rgb) / .45));} #page-settings .mem-ring b{position:absolute;inset:0;display:grid;place-items:center;font-size:19px;font-weight:500;font-variant-numeric:tabular-nums;} #page-settings .stat{border-radius:var(--r-sm);background:linear-gradient(180deg,rgb(var(--fg-rgb) / .03),transparent),var(--panel-2);} #page-settings .stat b{font-size:17px;} /* ---- performance ---- */ #grp-system .set-card-body>.section-label:first-child,#grp-analytics .set-card-body>.section-label:first-child{display:none;} #page-settings .perf-nums{display:grid;grid-template-columns:1fr 1fr;gap:10px;} #page-settings .perf-num{display:flex;flex-direction:column;gap:3px;padding:12px 14px;background:var(--panel-2);border:1px solid var(--line);border-radius:14px;} #page-settings .perf-num b{font-size:22px;font-weight:500;font-variant-numeric:tabular-nums;} #page-settings .perf-num span{font-size:11px;color:var(--muted);} #page-settings .perf-bar>*{transition:flex-grow .6s var(--ease-premium),flex-basis .6s var(--ease-premium),width .6s var(--ease-premium);} #page-settings .sys-tile.meter{position:relative;overflow:hidden;} #page-settings .sys-tile.meter::before,#page-settings .sys-tile.meter::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:4px;border-radius:2px;transform-origin:left;transition:transform .7s var(--ease-premium);} #page-settings .sys-tile.meter::after{background:linear-gradient(90deg,var(--core),var(--think));transform:scaleX(calc(var(--m,0) / 100));} #page-settings .sys-tile.meter::before{bottom:4px;height:2px;background:var(--think);opacity:.55;transform:scaleX(calc(var(--m2,0) / 100));} /* ---- analytics ---- */ #page-settings .bar-row .b-track{height:5px;border-radius:3px;} #page-settings .bar-row .b-fill{background:linear-gradient(90deg,var(--core),var(--think));} #page-settings .trend{height:56px;gap:5px;} #page-settings .trend span{background:linear-gradient(180deg,var(--core),rgb(var(--think-rgb) / .55));opacity:.8;transition:opacity .2s;} #page-settings .trend span:hover{opacity:1;} .an-kpi[hidden],.an-empty[hidden],.an-body[hidden]{display:none;} .an-body{display:flex;flex-direction:column;gap:11px;} #page-settings .an-kpis{grid-template-columns:repeat(auto-fit,minmax(110px,1fr));} #page-settings .an-kpi b{font-size:24px;font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:-.01em;} #page-settings .an-kpi span{font-size:11.5px;color:var(--muted);} .an-peak{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 12px;padding:10px 14px;border-radius:14px;border:1px solid var(--line);background:var(--panel-2);font-size:13px;color:var(--text-soft);} .an-peak b{color:var(--text);font-weight:500;text-align:right;font-variant-numeric:tabular-nums;} .an-peak b::before{content:'';display:inline-block;width:6px;height:6px;margin-right:8px;border-radius:50%;background:var(--speak);vertical-align:middle;} .an-top{display:flex;flex-direction:column;gap:8px;} .bar-row .b-rank{flex:none;width:14px;text-align:right;color:var(--muted);font-size:11.5px;font-variant-numeric:tabular-nums;} #anTop .bar-row .b-name{flex:0 1 46%;min-width:0;} #anTop .bar-row:first-child .b-name{color:var(--text);} .an-chart{position:relative;padding-top:24px;} .an-tip{position:absolute;top:0;left:0;z-index:2;padding:3px 9px;border-radius:8px;font-size:11.5px;white-space:nowrap;color:var(--text);background:var(--panel-2);border:1px solid var(--line);box-shadow:var(--shadow-rest);opacity:0;pointer-events:none;transform:translateX(-50%) translateY(3px);transition:opacity .14s ease,transform .16s ease;} .an-tip.show{opacity:1;transform:translateX(-50%);} #page-settings .an-chart .trend{height:72px;} #page-settings .an-chart .trend span{position:relative;outline:none;transition:opacity .2s,height .5s var(--ease-premium);} #page-settings .an-chart .trend span.zero{opacity:.3;} #page-settings .an-chart .trend span:hover,#page-settings .an-chart .trend span:focus-visible{opacity:1;} #page-settings .an-chart .trend span:focus-visible{box-shadow:0 0 0 2px rgb(var(--core-rgb) / .6);} #page-settings .an-chart .trend span.peak{opacity:1;background:linear-gradient(180deg,var(--speak),var(--core));box-shadow:0 0 10px -2px rgb(var(--speak-rgb) / .5);} #page-settings .an-chart .trend span.peak::after{content:'';position:absolute;left:50%;top:-8px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--speak);} .an-empty{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;padding:26px 12px;border:1px dashed var(--line);border-radius:14px;} .an-empty-title{font-size:14px;color:var(--text);} .an-empty-sub{font-size:12px;color:var(--muted);} @media (prefers-reduced-motion:reduce){.an-tip,#page-settings .an-chart .trend span{transition:none;}} #page-settings [data-filter].active{border-color:rgb(var(--core-rgb) / .5);color:var(--core);background:rgb(var(--core-rgb) / .1);} #page-settings #actionTimeline,#page-settings #missedCommands{max-height:240px;overflow-y:auto;} #page-settings .recent-line{padding:6px 10px;border-left:2px solid var(--line);border-radius:0 8px 8px 0;transition:border-color .2s,background .2s;} #page-settings .recent-line:hover{border-left-color:var(--core);background:rgb(var(--core-rgb) / .05);} /* ---- responsive ---- */ @media (max-width:1179.98px){#page-settings .set-group-grid{grid-template-columns:minmax(0,1fr);}} @media (max-width:980px){ #page-settings .set-layout{grid-template-columns:minmax(0,1fr);gap:12px;} #page-settings #setRail{flex-direction:row;overflow-x:auto;scrollbar-width:none;} #page-settings #setRail::-webkit-scrollbar{display:none;} #page-settings #setRail .set-search{display:none;} #page-settings #setRail button{width:auto;flex:none;} #page-settings .set-card{scroll-margin-top:64px;} #page-settings .qc-grid{grid-template-columns:repeat(3,minmax(0,1fr));} } @media (max-width:760px){ #page-settings .qc-grid{grid-template-columns:repeat(2,minmax(0,1fr));} #grp-memory .set-card-body{grid-template-columns:minmax(0,1fr);justify-items:center;} #grp-memory .stat-grid{width:100%;} #page-settings .tog-grid{grid-template-columns:1fr;} #page-settings .set-row{flex-wrap:wrap;} #page-settings .slider-wrap{width:100%;} #page-settings .set-row input[type=text]{width:100%;} } @media (hover:none),(prefers-reduced-motion:reduce){ #page-settings .set-glow{display:none;} } @media (prefers-reduced-motion:reduce){ #page-settings .fx-halo::before,#page-settings .set-flash::after,#page-settings .set-bloom::after{animation:none;} #page-settings .mr-fg,#page-settings .sys-tile.meter::before,#page-settings .sys-tile.meter::after{transition:none;} } /* Phase 3: the five quick switches moved to the Home dock (#quickDock); the card stays in the DOM (settings-fx.js still looks it up) but is not shown */ #page-settings #grp-quick{display:none !important;} @media (prefers-reduced-motion:reduce){#page-settings .set-group.on{animation:none;}} html[data-quality="low"] #page-settings .set-group.on{animation:none;} /* ---- search (phase 4c): results from all groups in the pane, hit counts in the group list ---- */ #page-settings .set-search-wrap{position:relative;display:flex;align-items:center;margin-bottom:var(--sp-1);color:var(--muted);} #page-settings .set-search-wrap .ic{position:absolute;left:var(--sp-3);pointer-events:none;} #page-settings #setRail .set-search{width:100%;margin:0;padding:0 34px 0 36px;box-sizing:border-box;background:var(--panel-2);} #page-settings .set-search::-webkit-search-cancel-button{display:none;} #page-settings #setRail .set-search-x{position:absolute;right:var(--sp-1);width:32px;height:32px;padding:0;justify-content:center;font-size:17px;line-height:1;color:var(--muted);background:none;border-radius:var(--r-ctl);} #page-settings #setRail .set-search-x[hidden]{display:none;} #page-settings #setRail .set-search-x:hover{color:var(--text);background:rgb(var(--fg-rgb) / .06);} #page-settings .set-search-status{min-height:16px;margin:0 0 var(--sp-2);padding-left:var(--sp-1);font:var(--t-helper);color:var(--muted);} #page-settings #setRail .set-count{margin-left:auto;min-width:20px;height:20px;padding:0 6px;box-sizing:border-box;border-radius:var(--r-pill);background:rgb(var(--core-rgb) / .14);color:var(--text);font:var(--t-caption);line-height:20px;text-align:center;font-variant-numeric:tabular-nums;} #page-settings #setRail .set-count[hidden]{display:none;} #page-settings.set-searching #setRail button.on{background:none;box-shadow:none;color:var(--muted);} #page-settings.set-searching #setRail button.on::after{display:none;} #page-settings #setRail button.none{opacity:.5;} #page-settings #setRail button.none .set-count{background:rgb(var(--fg-rgb) / .08);color:var(--muted);} #page-settings.set-searching .set-group{display:none;} #page-settings.set-searching .set-group.s-match{display:block;margin-bottom:var(--sp-6);animation:none;} #page-settings.set-searching .set-card.dim{display:none;opacity:1;} #page-settings .s-hide{display:none !important;} #page-settings .set-search-empty{padding:var(--sp-8) var(--sp-4);text-align:center;color:var(--muted);font-size:14px;} #page-settings .set-search-empty[hidden]{display:none;} #page-settings .row-flash{animation:rowFlash 1.3s var(--ease-premium);border-radius:var(--sp-2);} @keyframes rowFlash{0%,35%{background:rgb(var(--core-rgb) / .22);box-shadow:0 0 0 6px rgb(var(--core-rgb) / .22);}100%{background:transparent;box-shadow:0 0 0 6px transparent;}} /* the whole row toggles its switch (spec 4.7: hit area at least 44 px tall) */ #page-settings .set-row:has(> .toggle),#page-settings .info-row.tog,#page-settings .skill-row:has(.toggle){cursor:pointer;min-height:44px;box-sizing:border-box;border-radius:var(--sp-2);transition:background var(--dur-fast);} #page-settings .set-row:has(> .toggle):hover,#page-settings .info-row.tog:hover,#page-settings .skill-row:has(.toggle):hover{background:rgb(var(--fg-rgb) / .03);} /* ========================================================================== Phase 4d -- card-level look (spec 4.7, 9.3 - 9.6). Every size below comes from the spec. ========================================================================== */ #page-settings .set-card{border-radius:var(--r-card);padding:var(--sp-5) var(--sp-6) var(--sp-3);} #page-settings .set-card-title{font:var(--t-section);} #page-settings .set-card-sub{font:var(--t-helper);} #page-settings .set-card .set-row{min-height:64px;box-sizing:border-box;padding:var(--sp-2) 0;} #page-settings .set-info{min-width:0;} #page-settings .set-info .s-name{font:var(--t-label);margin-bottom:2px;} #page-settings .set-info .s-sub{font:var(--t-helper);} #page-settings .section-label{font:var(--t-caption);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);} #page-settings .set-row input[type=text]{width:220px;height:40px;box-sizing:border-box;border-radius:var(--r-ctl);background:var(--panel-2);font-size:14px;} #page-settings .set-row input[type=text]:focus{border-color:var(--core);box-shadow:0 0 0 3px rgb(var(--core-rgb) / .18);} #page-settings .pill-btn{min-height:40px;border-radius:var(--r-ctl);} #page-settings .pill-btn.small{min-height:32px;padding:0 var(--sp-3);} #page-settings .set-row > .pill-btn{flex:none;} #page-settings .chip{display:inline-flex;align-items:center;height:34px;box-sizing:border-box;padding:0 15px;} #page-settings .theme-filters .chip{padding:0 15px;font-size:12.5px;} #page-settings .slider-wrap{width:266px;} #page-settings .slider-wrap input[type=range]{height:6px;border-radius:3px;} #page-settings .slider-wrap input[type=range]::-webkit-slider-thumb{width:20px;height:20px;} /* a master switch that is off dims what depends on it */ #page-settings .is-dim{opacity:.45;} #page-settings .dim-group{display:block;} #page-settings .dim-group .set-row:last-child{border-bottom:none;} #page-settings .set-row:has(> #setMute.on) .s-name::after{content:'';display:inline-block;width:7px;height:7px;margin-left:var(--sp-2);border-radius:50%;background:var(--warning);vertical-align:1px;} /* stat tiles, one look everywhere */ #page-settings :is(.stat,.rt-stat,.sec-num,.perf-num){min-height:84px;box-sizing:border-box;justify-content:center;padding:var(--sp-3) var(--sp-4);border-radius:var(--r-sm);background:var(--panel-2);border:1px solid var(--line);} #page-settings :is(.stat,.rt-stat,.sec-num,.perf-num) b{font:var(--t-stat);font-variant-numeric:tabular-nums;color:var(--text);overflow-wrap:anywhere;} #page-settings :is(.stat,.rt-stat,.sec-num,.perf-num) > span{font:var(--t-caption);color:var(--muted);} #page-settings .sys-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-3);} #page-settings .sys-tile b{font-size:15px;line-height:1.3;} #page-settings .sys-tile b.ok{color:var(--success);} #page-settings .sys-tile b.bad{color:var(--danger);} #page-settings .pv-stats{display:grid;grid-template-columns:140px minmax(0,1fr);gap:var(--sp-4);align-items:start;} #page-settings .pv-notes{display:flex;flex-direction:column;gap:var(--sp-1);min-width:0;} /* theme tiles: three to a row, live mini UI on top */ #page-settings .theme-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-3);} #page-settings .theme-card{padding:var(--sp-2);border-radius:var(--r-sm);} #page-settings .theme-card .tc-pv{height:76px;box-sizing:border-box;justify-content:space-between;border-radius:10px;} #page-settings .theme-card .tc-active{display:none;} #page-settings .theme-card .tc-meta b{font-size:13px;font-weight:600;} #page-settings .theme-card .tc-meta small{font-size:12px;letter-spacing:0;} #page-settings .theme-card.on{border-color:var(--core);box-shadow:0 0 0 1px var(--core);} #page-settings .theme-card .tc-check{top:var(--sp-3);right:var(--sp-3);bottom:auto;width:20px;height:20px;} #page-settings .theme-card .tc-check svg{width:12px;height:12px;} /* segmented controls and banners */ #page-settings .seg{display:flex;flex-wrap:nowrap;gap:2px;} #page-settings #secModes{min-height:44px;} #page-settings .seg>button.chip{height:auto;} #page-settings .seg>button.sec-off{color:var(--danger);} #page-settings .seg>button.sec-armed{color:var(--warning);box-shadow:inset 0 0 0 1px var(--warning);} #page-settings :is(#skillRestartNote,#rtGate,#rtNote,#rtEmpty,#secWarn){display:block;padding:var(--sp-2) var(--sp-3);border-radius:var(--r-ctl);font-size:12.5px;line-height:1.45;overflow-wrap:anywhere;} #page-settings :is(#skillRestartNote,#rtEmpty){color:var(--text-soft);background:rgb(var(--info-rgb) / .12);} #page-settings #rtGate{color:var(--text-soft);background:rgb(var(--warning-rgb) / .14);} #page-settings :is(#rtNote,#secWarn){color:var(--text-soft);background:rgb(var(--danger-rgb) / .10);} #page-settings :is(#skillRestartNote,#rtGate,#rtNote,#rtEmpty,#secWarn)[hidden]{display:none;} /* skills */ #page-settings .skills-filter{width:100%;height:36px;box-sizing:border-box;border-radius:var(--r-ctl);background:var(--panel-2);padding:0 var(--sp-3);} #page-settings .skills-scroll{max-height:360px;} #page-settings .skill-row{min-height:64px;padding:var(--sp-1) var(--sp-2);} #page-settings .skill-row.sk-hide{display:none;} /* Insights: numbers on top, then two columns */ #page-settings .an-layout{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4) var(--sp-6);min-width:0;} #page-settings .an-layout:has(#anBody[hidden]){grid-template-columns:minmax(0,1fr);} #page-settings #anBody{display:contents;} #page-settings #anBody[hidden]{display:none;} #page-settings .an-kpis{grid-column:1/-1;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));} #page-settings :is(.an-left,.an-right){display:flex;flex-direction:column;gap:var(--sp-3);min-width:0;} #page-settings .an-right #actionTimeline{max-height:240px;overflow-y:auto;} /* danger zone: its own card, never one click */ #page-settings #grp-danger{border-color:rgb(var(--danger-rgb) / .35);background:rgb(var(--danger-rgb) / .06);} #page-settings #grp-danger .set-card-title{color:var(--danger);} #page-settings #grp-danger .set-card-title::before{background:var(--danger);} #page-settings #grp-danger .set-row{border-bottom:none;} #page-settings #btnClose,#page-settings #btnCloseYes{border-color:rgb(var(--danger-rgb) / .5);color:var(--danger);} #page-settings #btnClose:hover:not(:disabled),#page-settings #btnCloseYes:hover:not(:disabled){background:var(--danger);border-color:var(--danger);color:var(--on-core);} #page-settings .close-confirm{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-2);padding:0 0 var(--sp-3);font-size:13px;color:var(--text);} #page-settings .close-confirm span{flex:1 1 100%;} #page-settings .close-confirm[hidden]{display:none;} @media (max-width:1179.98px){ #page-settings .an-layout{grid-template-columns:minmax(0,1fr);} #page-settings .sys-tiles{grid-template-columns:repeat(2,minmax(0,1fr));} #page-settings .theme-grid{grid-template-columns:repeat(2,minmax(0,1fr));} } /* ==== style/settings/perf.css ==== */ /* ========================================================================== perf.css -- Settings > System > "Response speed" block. Markup: index.html #perfBlock. JS: js/perf.js. Token colours only. ========================================================================== */ .perf-block{display:flex;flex-direction:column;gap:11px;min-width:0;} .perf-nums{display:grid;grid-template-columns:1fr 1fr;gap:8px;} .perf-num{display:flex;flex-direction:column;gap:3px;padding:10px 12px;background:var(--panel-2);border:1px solid var(--line);border-radius:10px;min-width:0;} .perf-num b{font-size:24px;font-weight:500;color:var(--text);font-variant-numeric:tabular-nums;overflow-wrap:anywhere;} .perf-num span{font-size:11px;color:var(--muted);} .perf-bar{display:flex;height:10px;border-radius:5px;overflow:hidden;background:var(--line);} .perf-seg{flex:1 1 0;min-width:2px;height:100%;} .perf-stt{background:var(--info);} .perf-route{background:var(--think);} .perf-llm{background:var(--core);} .perf-tool{background:var(--warning);} .perf-tts{background:var(--speak);} .perf-legend{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:11.5px;color:var(--text-soft);} .perf-leg{display:inline-flex;align-items:center;gap:6px;min-width:0;} .perf-dot{display:inline-block;flex:none;width:8px;height:8px;border-radius:50%;} .perf-recent{display:flex;flex-direction:column;gap:4px;min-width:0;} .perf-turn{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 12px;} .perf-route-name{flex:1 1 90px;min-width:0;overflow-wrap:anywhere;} .perf-ms{color:var(--muted);font-variant-numeric:tabular-nums;} .perf-out{flex:0 0 auto;color:var(--muted);} .perf-out.perf-good{color:var(--success);} .perf-out.perf-bad{color:var(--danger);} /* ==== style/settings/security.css ==== */ /* ========================================================================== security.css -- Settings > Security card. Markup: index.html #grp-security. JS: js/security.js. Token colours only. ========================================================================== */ .sec-block{display:flex;flex-direction:column;gap:11px;min-width:0;} .sec-seg{display:flex;flex-wrap:wrap;gap:6px;min-width:0;} .sec-mode{flex:1 1 90px;min-width:0;padding:8px 10px;background:var(--panel-2);border:1px solid var(--line);border-radius:10px;color:var(--text-soft);font:inherit;font-size:12.5px;cursor:pointer;} .sec-mode[aria-pressed="true"]{border-color:var(--core);color:var(--text);} .sec-mode.sec-off[aria-pressed="true"]{border-color:var(--danger);} .sec-mode.sec-armed{border-color:var(--warning);color:var(--warning);} .sec-mode:focus-visible{outline:2px solid var(--core);outline-offset:2px;} .sec-warn{color:var(--warning);overflow-wrap:anywhere;} .sec-nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;} .sec-num{display:flex;flex-direction:column;gap:3px;padding:10px 12px;background:var(--panel-2);border:1px solid var(--line);border-radius:10px;min-width:0;} .sec-num b{font-size:22px;font-weight:500;color:var(--text);font-variant-numeric:tabular-nums;overflow-wrap:anywhere;} .sec-num span{font-size:11px;color:var(--muted);overflow-wrap:anywhere;} .sec-recent{display:flex;flex-direction:column;gap:4px;min-width:0;} .sec-event{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;} .sec-empty{color:var(--muted);} .sec-chip{flex:none;padding:1px 8px;border:1px solid currentColor;border-radius:999px;font-size:11px;line-height:1.5;} .sec-danger{color:var(--danger);} .sec-warning{color:var(--warning);} .sec-success{color:var(--success);} .sec-neutral{color:var(--muted);} .sec-tool{flex:1 1 90px;min-width:0;overflow-wrap:anywhere;} .sec-meta{color:var(--muted);font-variant-numeric:tabular-nums;overflow-wrap:anywhere;min-width:0;} @media (max-width:420px){ .sec-nums{gap:6px;} .sec-num{padding:8px;} .sec-num b{font-size:18px;} } /* ==== style/core/overlays.css ==== */ /* ========================================================================== overlays.css -- boot overlay (backend loading) + first-run Setup Wizard + Quick-input modal bits. Markup: index.html #setupWizardOverlay, #quickInputModal; boot overlay is built by js/ui.js. JS: js/setup-wizard.js, js/apps.js. ========================================================================== */ .boot-overlay{ position:fixed;inset:0;z-index:99;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px; background:radial-gradient(ellipse 65% 50% at 50% 40%, var(--deep) 0%, var(--void) 70%);color:var(--text-soft); transition:opacity .4s ease;font-size:13.5px; } .boot-overlay .boot-orb{width:26px;height:26px;border-radius:50%;background:var(--core);box-shadow:0 0 28px var(--core);animation:orbPulse 2.2s ease-in-out infinite;} .boot-overlay .boot-track{width:220px;height:3px;border-radius:2px;background:var(--line);overflow:hidden;} .boot-overlay .boot-fill{height:100%;width:0;background:var(--core);box-shadow:0 0 8px var(--core);position:relative;overflow:hidden;} /* width is eased in JS (ui.js) */ .boot-overlay .boot-fill::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgb(var(--shine-rgb) / .5),transparent);transform:translateX(-100%);animation:fillShine 1.4s ease-in-out infinite;} .boot-overlay .boot-msg{animation:msgBreath 2.4s ease-in-out infinite;} @keyframes fillShine{to{transform:translateX(100%);}} @keyframes msgBreath{0%,100%{opacity:.6;}50%{opacity:1;}} .setup-modal{width:min(560px,100%);} .setup-check{display:flex;align-items:center;gap:14px;padding:13px 2px;border-bottom:1px solid var(--line);} .setup-check .sc-icon{width:22px;height:22px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-size:12px;border:1px solid var(--line);color:var(--muted);} .setup-check.ready .sc-icon{border-color:rgb(var(--core-rgb) / .5);color:var(--core);box-shadow:0 0 8px rgb(var(--core-rgb) / .25);} .setup-check.error .sc-icon{border-color:rgb(var(--danger-rgb) / .6);color:var(--danger);} .setup-check .sc-text{flex:1;min-width:0;} .setup-check .sc-text b{display:block;font-weight:500;font-size:14px;color:var(--text);} .setup-check .sc-text span{font-size:12px;color:var(--muted);} .setup-allgood{font-size:13.5px;color:var(--core);padding:4px 2px 12px;} .setup-bar{display:none;height:3px;border-radius:2px;background:var(--line);overflow:hidden;margin-top:14px;} .setup-bar.show{display:block;} .setup-bar-fill{height:100%;width:100%;background:var(--core);box-shadow:0 0 8px var(--core);} .setup-bar.indeterminate .setup-bar-fill{width:35%;animation:barSweep 1.3s ease-in-out infinite;} .setup-bar.determinate .setup-bar-fill{transition:width .4s ease;} @keyframes barSweep{0%{transform:translateX(-110%);}100%{transform:translateX(320%);}} .setup-log{display:none;margin-top:14px;font-size:12px;color:var(--text-soft);background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:10px 12px;max-height:90px;overflow-y:auto;white-space:pre-wrap;} .setup-log.show{display:block;} .sw-hero{display:flex;flex-direction:column;align-items:center;text-align:center;padding:6px 0 4px;} .sw-orb{position:relative;width:46px;height:46px;border-radius:50%;margin-bottom:14px;background:radial-gradient(circle at 36% 30%,rgb(var(--core-rgb) / .95),rgb(var(--core-rgb) / .5) 62%,rgb(var(--core-rgb) / .12) 100%);box-shadow:0 0 26px rgb(var(--core-rgb) / .4);transition:box-shadow .6s ease,opacity .4s ease,filter .4s ease;} .sw-orb::after{content:'';position:absolute;inset:0;border-radius:50%;border:1px solid rgb(var(--core-rgb) / .7);opacity:0;pointer-events:none;} .setup-modal .sw-hero h3{margin:0 0 4px;font-size:19px;letter-spacing:.01em;transition:opacity .14s ease,transform .14s ease;} .setup-modal .sw-hero .m-sub{margin-bottom:8px;transition:opacity .14s ease,transform .14s ease,color .4s ease;} .setup-modal .sw-hero .sw-swap{opacity:0;transform:translateY(3px);} .setup-modal[data-state="ready"] .sw-hero .m-sub{color:var(--core);} .setup-modal[data-state="attention"] .sw-orb{opacity:.75;filter:saturate(.7);box-shadow:0 0 14px rgb(var(--core-rgb) / .25);} .overlay.open .setup-modal[data-state="checking"] .sw-orb,.overlay.open .setup-modal[data-state="fixing"] .sw-orb{animation:orbPulse 2.2s ease-in-out infinite;} .overlay.open .setup-modal[data-state="ready"] .sw-orb{animation:swWake .9s cubic-bezier(.22,1,.36,1) both;box-shadow:0 0 34px rgb(var(--core-rgb) / .6);} .overlay.open .setup-modal[data-state="ready"] .sw-orb::after{animation:swRing .9s cubic-bezier(.16,.84,.3,1) both;} @keyframes swWake{0%{transform:scale(.8);opacity:.6;}55%{transform:scale(1.14);opacity:1;}100%{transform:scale(1);opacity:1;}} @keyframes swRing{0%{transform:scale(1);opacity:.9;}100%{transform:scale(2.2);opacity:0;}} .setup-modal.sw-intro .sw-hero{animation:swHeroIn .5s var(--ease-premium,cubic-bezier(.22,1,.36,1)) both;} @keyframes swHeroIn{from{opacity:0;transform:translateY(8px) scale(.97);}to{opacity:1;transform:none;}} #setupChecklist.sw-reveal .setup-check{animation:swRow .32s var(--ease-premium,cubic-bezier(.22,1,.36,1)) both;animation-delay:calc(var(--i,0) * 60ms + 60ms);} @keyframes swRow{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}} #setupChecklist.rechecking .setup-check{opacity:.65;} .setup-check{transition:opacity .2s ease;} .setup-check .sc-icon{position:relative;transition:border-color .3s,color .3s,box-shadow .3s;} .setup-check .sc-glyph{line-height:1;} .setup-check .sc-text span{overflow-wrap:anywhere;} .setup-check .sc-badge{flex:none;font-size:11.5px;color:var(--muted);padding:2px 9px;border-radius:999px;border:1px solid var(--line);white-space:nowrap;transition:color .3s,border-color .3s;} .setup-check.ready .sc-badge{color:var(--core);border-color:rgb(var(--core-rgb) / .35);} .setup-check.attention .sc-icon{border-color:rgb(var(--speak-rgb) / .6);color:var(--speak);} .setup-check.attention .sc-badge{color:var(--speak);border-color:rgb(var(--speak-rgb) / .4);} .setup-check.error .sc-badge{color:var(--danger);border-color:rgb(var(--danger-rgb) / .45);} .setup-check.fixing .sc-icon,.setup-check.checking .sc-icon{border-color:rgb(var(--core-rgb) / .35);} .overlay.open .setup-check.fixing .sc-icon::after,.overlay.open .setup-check.checking .sc-icon::after{content:'';position:absolute;inset:-1px;border-radius:50%;border:2px solid transparent;border-top-color:var(--core);animation:swSpin .8s linear infinite;} @keyframes swSpin{to{transform:rotate(360deg);}} .setup-check.sw-changed .sc-icon{animation:swPop .45s var(--ease-spring,cubic-bezier(.34,1.56,.64,1));} @keyframes swPop{0%{transform:scale(.6);}100%{transform:scale(1);}} .sw-summary{display:flex;justify-content:center;align-items:baseline;gap:10px;min-height:16px;margin-top:10px;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;} .sw-pct{color:var(--core);} @media (prefers-reduced-motion:reduce){ .sw-orb,.sw-orb::after,.setup-modal.sw-intro .sw-hero,#setupChecklist.sw-reveal .setup-check,.setup-check .sc-icon,.setup-check .sc-icon::after{animation:none !important;} } /* ==== style/settings/memory-view.css ==== */ /* ========================================================================== memory-view.css -- Settings > Memory > memory viewer overlay. Markup: index.html #memViewer. JS: js/memory-view.js. Token colours only. ========================================================================== */ .mv-overlay{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:16px;min-width:0;background:color-mix(in srgb,var(--panel) 70%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);} .mv-overlay[hidden]{display:none;} .mv-card{display:flex;flex-direction:column;gap:10px;width:min(720px,100%);max-height:100%;min-width:0;padding:16px;background:var(--panel);border:1px solid var(--line);border-radius:16px;color:var(--text);outline:none;overflow:hidden;} .mv-overlay:not([hidden]) .mv-card{animation:mvIn .18s ease-out;} @keyframes mvIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}} .mv-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;min-width:0;} .mv-titles{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto;} .mv-titles h3{margin:0;font-size:16px;font-weight:500;color:var(--text);} .mv-sub{font-size:12px;color:var(--muted);overflow-wrap:anywhere;} .mv-head .pill-btn{flex:none;} .mv-tabs{display:flex;gap:6px;min-width:0;} .mv-tab{flex:1 1 0;min-width:0;padding:8px 6px;background:var(--panel-2);border:1px solid var(--line);border-radius:10px;color:var(--text-soft);font:inherit;font-size:12.5px;cursor:pointer;overflow-wrap:anywhere;} .mv-tab[aria-selected="true"]{border-color:var(--core);color:var(--text);} .mv-tab:focus-visible,.mv-act:focus-visible,.mv-search:focus-visible,.mv-edit:focus-visible,.mv-card .pill-btn:focus-visible{outline:2px solid var(--core);outline-offset:2px;} .mv-search,.mv-edit{display:block;width:100%;box-sizing:border-box;min-width:0;padding:9px 12px;background:var(--panel-2);border:1px solid var(--line);border-radius:10px;color:var(--text);font:inherit;font-size:13px;} .mv-note{font-size:12.5px;color:var(--warning);overflow-wrap:anywhere;} .mv-note[hidden]{display:none;} .mv-list{display:flex;flex-direction:column;gap:8px;flex:1 1 auto;min-width:0;min-height:120px;overflow-x:hidden;overflow-y:auto;} .mv-row{display:flex;flex-direction:column;gap:6px;padding:10px 12px;background:var(--panel-2);border:1px solid var(--line);border-radius:12px;min-width:0;} .mv-row.mv-pinned{border-color:var(--core);} .mv-main{display:flex;flex-direction:column;gap:4px;min-width:0;} .mv-text{font-size:14px;color:var(--text);overflow-wrap:anywhere;} .mv-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-size:11.5px;color:var(--muted);min-width:0;} .mv-dot{flex:none;display:inline-block;width:9px;height:9px;border-radius:50%;} .mv-dot-high{background:var(--success);} .mv-dot-medium{background:var(--warning);} .mv-dot-low{background:var(--danger);} .mv-badge{flex:none;padding:1px 8px;border:1px solid currentColor;border-radius:999px;font-size:11px;line-height:1.5;} .mv-badge-inferred{color:var(--info);} .mv-badge-pin{color:var(--core);} .mv-actions{display:flex;flex-wrap:wrap;gap:6px;min-width:0;} .mv-act{padding:5px 10px;background:transparent;border:1px solid var(--line);border-radius:8px;color:var(--text-soft);font:inherit;font-size:12px;cursor:pointer;transition:color .15s ease,border-color .15s ease;} .mv-act:hover{color:var(--text);border-color:var(--text-soft);} .mv-act:disabled{opacity:.5;cursor:default;} .mv-act-danger{color:var(--danger);border-color:var(--danger);} .mv-act-danger:hover{color:var(--danger);border-color:var(--danger);} .mv-confirm{align-self:center;font-size:12.5px;color:var(--danger);} .mv-why{padding-top:6px;border-top:1px dashed var(--line);font-size:12px;color:var(--text-soft);overflow-wrap:anywhere;} .mv-why[hidden]{display:none;} .mv-status{padding:24px 8px;text-align:center;font-size:13px;color:var(--muted);overflow-wrap:anywhere;} .mv-more{align-self:center;flex:none;} .mv-more[hidden]{display:none;} .mv-off .mv-tabs,.mv-off .mv-search{display:none;} @media (max-width:480px){ .mv-overlay{padding:8px;} .mv-card{padding:12px;border-radius:12px;} .mv-tab{padding:7px 4px;font-size:12px;} } @media (prefers-reduced-motion:reduce){ .mv-overlay:not([hidden]) .mv-card{animation:none;} .mv-act{transition:none;} } /* ==== style/fx/motion.css ==== */ /* ========================================================================== motion.css -- styles for js/motion.js (cross-page motion polish). Compositor-friendly properties only (transform / opacity) wherever the effect allows it; every effect has a reduced-motion fallback. Loaded after the per-page files so it can refine them. ========================================================================== */ /* ---- 1) wake shockwave: thin ring expanding from the orb centre (js/motion.js, added inside #stage) ---- */ .wake-ring{ position:absolute;left:33%;top:33%;width:34%;height:34%;border-radius:50%;pointer-events:none; border:1px solid rgb(var(--core-rgb) / .85);box-shadow:0 0 10px rgb(var(--core-rgb) / .35); transform:scale(1);opacity:1;will-change:transform,opacity; animation:wakeRing .6s cubic-bezier(.16,.84,.3,1) forwards; } @keyframes wakeRing{from{transform:scale(1);opacity:1;}to{transform:scale(2.2);opacity:0;}} @media (prefers-reduced-motion:reduce){.wake-ring{display:none;}} /* ---- 8) scroll edge fade: content softly fades at a scroll container's top/bottom edge instead of being cut off. js/motion.js edgeFade() sets --fade-t / --fade-b (0..24px) from the real scroll position, so a list at rest is never dimmed -- the fade grows only on the side that actually has more content. The mask is applied only while a fade is non-zero (.edge-on). Never put this on an element that has a background/border or a sticky child (the mask would clip them) -- that's why the chat dock lives outside the scrolling .chat-log. ---- */ .edge-fade.edge-on{ -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 var(--fade-t,0px),#000 calc(100% - var(--fade-b,0px)),transparent 100%); mask-image:linear-gradient(to bottom,transparent 0,#000 var(--fade-t,0px),#000 calc(100% - var(--fade-b,0px)),transparent 100%); } /* ---- 11) border beam: a light travels once around a card's border (js/motion.js M.beam adds .beam-on / .beam-glow). The card's own ::after draws a 1.5px ring (border-box minus content-box via mask-composite) filled with a rotating conic-gradient; only --beam-angle animates. Cards already own ::before (glass highlight) but not ::after. ---- */ @property --beam-angle{syntax:'';inherits:false;initial-value:0deg;} .beam-on::after{ content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;pointer-events:none; background:conic-gradient(from var(--beam-angle),transparent 0deg,transparent 235deg,rgb(var(--core-rgb) / .18) 262deg,rgb(var(--core-rgb) / .95) 335deg,color-mix(in srgb,var(--core) 25%,white) 358deg,transparent 360deg); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude; animation:beamSpin 1.2s cubic-bezier(.45,.05,.35,1) forwards,beamFade 1.2s ease forwards; } @keyframes beamSpin{from{--beam-angle:0deg;}to{--beam-angle:360deg;}} @keyframes beamFade{0%{opacity:0;}12%{opacity:1;}82%{opacity:1;}100%{opacity:0;}} /* fallback where @property is unavailable (older WebKitGTK): one soft glow pulse instead of the travelling light */ .beam-glow{animation:beamGlow 1.2s ease-out 1;} @keyframes beamGlow{ 0%,100%{box-shadow:var(--shadow-rest);} 35%{box-shadow:var(--shadow-rest),0 0 0 1px rgb(var(--core-rgb) / .6),0 0 18px rgb(var(--core-rgb) / .35);} } @media (prefers-reduced-motion:reduce){.beam-on::after{display:none;}.beam-glow{animation:none;}} /* ---- 17) slider value bubble (js/motion.js): sits above the thumb while dragging ---- */ .slider-wrap{position:relative;} .slider-bubble{ position:absolute;bottom:calc(50% + 12px);left:0;min-width:28px;padding:3px 7px;border-radius:8px;text-align:center; background:var(--panel-2);border:1px solid rgb(var(--core-rgb) / .45);color:var(--core);font-size:11.5px;line-height:1.2; font-variant-numeric:tabular-nums;pointer-events:none;z-index:2; opacity:0;transform:translate(-50%,4px) scale(.9);transition:opacity .16s ease,transform .2s var(--ease-premium,ease); } .slider-bubble.show{opacity:1;transform:translate(-50%,0) scale(1);} @media (prefers-reduced-motion:reduce){.slider-bubble,.slider-bubble.show{transition:opacity .01s;transform:translate(-50%,0);}} /* ---- 18) sheets (Today / Clock): spring open + close. Backdrop blur is a FIXED value (components.css .overlay) on purpose: animating blur is the costliest GPU effect and would fight STT/TTS/LLM for VRAM. Only transform/opacity move. ---- */ .overlay .sheet{transform:translateY(26px) scale(.955);transition:transform .22s cubic-bezier(.4,0,1,1);will-change:transform;} .overlay.open .sheet{transform:translateY(0) scale(1);transition:transform .52s cubic-bezier(.34,1.42,.64,1);} .overlay.sheet-dragging{transition:none;} .overlay.sheet-dragging .sheet{transition:none;cursor:grabbing;user-select:none;} @media (prefers-reduced-motion:reduce){.overlay .sheet,.overlay.open .sheet{transform:none;transition:none;}} /* ---- 19) nav proximity scale (js/motion.js sets --prox per button). The :active press scale in layout.css still wins. ---- */ .nav button{transform:scale(calc(var(--prox,1) * var(--act,1)));transition:color .2s,transform .12s ease-out,text-shadow .3s ease;will-change:transform;} .nav button.active{--act:1.04;text-shadow:0 0 12px rgb(var(--core-rgb) / .45);} .nav-ind{box-shadow:inset 0 0 0 1px rgb(var(--core-rgb) / .30),0 0 14px -2px rgb(var(--core-rgb) / .28);} .nav::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(60% 100% at 50% 100%,rgb(var(--core-rgb) / .16),transparent 75%);opacity:0;transition:opacity .8s ease;} body.sara-speaking .nav::before{opacity:1;animation:navBreath 3.2s ease-in-out infinite;} @keyframes navBreath{0%,100%{opacity:.35;}50%{opacity:1;}} @media (prefers-reduced-motion:reduce){body.sara-speaking .nav::before{animation:none;opacity:.5;}} .nav-tip{position:fixed;left:0;top:0;z-index:65;pointer-events:none;padding:5px 10px;border-radius:8px;font-size:12px;line-height:1.3;white-space:nowrap;color:var(--text);background:var(--panel-2);border:1px solid var(--line);box-shadow:var(--shadow-rest);opacity:0;transform:translate(-50%,calc(-100% - 6px)) scale(.96);transition:opacity .16s ease,transform .2s var(--ease-premium,ease);} .nav-tip.show{opacity:1;transform:translate(-50%,calc(-100% - 12px)) scale(1);} .nav-tip kbd{font:inherit;font-size:11px;margin-left:8px;padding:1px 5px;border-radius:5px;border:1px solid var(--line);color:var(--muted);} @media (prefers-reduced-motion:reduce){.nav-tip,.nav-tip.show{transition:opacity .01s;transform:translate(-50%,calc(-100% - 12px));}} .shared-ghost{position:fixed;left:0;top:0;z-index:55;border-radius:50%;pointer-events:none;will-change:transform,opacity;background:radial-gradient(circle at 36% 30%,rgb(var(--core-rgb) / .95),rgb(var(--core-rgb) / .45) 62%,rgb(var(--core-rgb) / 0) 100%);box-shadow:0 0 28px rgb(var(--core-rgb) / .45);} @media (prefers-reduced-motion:reduce){.shared-ghost{display:none;}} @media (prefers-reduced-motion:reduce){.nav button{transform:none;}} /* ---- 20) command impact (js/fx.js section 6): one thin ring + one travelling streak, both created once and reused ---- */ .impact-ring{position:fixed;left:0;top:0;z-index:54;width:260px;height:260px;border-radius:50%;pointer-events:none;display:none;will-change:transform,opacity;background:radial-gradient(circle,transparent 58%,rgb(var(--core-rgb) / .10) 64%,rgb(var(--core-rgb) / .55) 69%,rgb(var(--core-rgb) / .10) 74%,transparent 78%);} .impact-bolt{position:fixed;left:0;top:0;z-index:54;width:96px;height:2px;border-radius:2px;pointer-events:none;display:none;transform-origin:100% 50%;will-change:transform,opacity;background:linear-gradient(90deg,transparent,rgb(var(--core-rgb) / .9));box-shadow:0 0 10px rgb(var(--core-rgb) / .6);} .nav button.impact-hit::after{content:'';position:absolute;inset:-2px;border-radius:999px;pointer-events:none;background:radial-gradient(circle,rgb(var(--core-rgb) / .55),rgb(var(--core-rgb) / 0) 70%);animation:impactHit 1s var(--ease-premium,cubic-bezier(.22,1,.36,1)) both;} @keyframes impactHit{0%{opacity:0;transform:scale(.6);}25%{opacity:1;}100%{opacity:0;transform:scale(1.5);}} .nav.impact-hit{animation:navImpact 1s ease-out both;} @keyframes navImpact{0%,100%{box-shadow:var(--shadow-rest);}30%{box-shadow:var(--shadow-rest),0 0 0 1px rgb(var(--core-rgb) / .5),0 0 22px rgb(var(--core-rgb) / .3);}} @media (prefers-reduced-motion:reduce){ .impact-ring,.impact-bolt{display:none !important;} .nav button.impact-hit::after{animation:none;opacity:.5;transform:none;} .nav.impact-hit{animation:none;box-shadow:var(--shadow-rest),0 0 0 1px rgb(var(--core-rgb) / .5);} } /* ---- 21) glass sheen (js/fx.js section 7): a child .gl-sheen is added on first hover; the host gets .gl-on while the cursor is over it. --gx/--gy = cursor position inside the card (px), --gdx/--gdy = -1..1 for the tiny depth shift. Settles back by itself on leave. ---- */ @property --gdx{syntax:'';inherits:false;initial-value:0;} /* written on the card at every pointer move: non-inherited so the card's children are not restyled */ @property --gdy{syntax:'';inherits:false;initial-value:0;} .gl-sheen{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s ease;background:radial-gradient(240px circle at var(--gx,50%) var(--gy,0%),rgb(var(--shine-rgb) / .075),transparent 65%);} .gl-sheen::before{content:'';position:absolute;top:0;left:12px;right:12px;height:1px;border-radius:1px;background:linear-gradient(90deg,transparent calc(var(--gx,50%) - 102px),rgb(var(--shine-rgb) / .6) calc(var(--gx,50%) - 12px),transparent calc(var(--gx,50%) + 78px));} .gl-sheen::after{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;background:radial-gradient(170px circle at var(--gx,50%) var(--gy,0%),rgb(var(--core-rgb) / .7),transparent 70%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;} .gl-on>.gl-sheen{opacity:1;} .gl-on.gl-on{translate:calc(var(--gdx,0) * 1.2px) calc(var(--gdy,0) * 1.2px);scale:1.006;box-shadow:var(--shadow-hover);} .setup-check.gl-on.gl-on,.qa-btn.gl-on.gl-on{box-shadow:none;} @media (prefers-reduced-motion:reduce){.gl-sheen{display:none;}} /* ==== style/fx/settings-fx.css ==== */ /* settings-fx.css -- advanced effects layer for Settings. Scoped to #page-settings. Load AFTER settings.css / motion.css. */ /* ---- rail: index numbers, scroll-progress line, search ---- */ #page-settings .set-rail{counter-reset:rl;} #page-settings .set-rail button{padding-right:18px;transition:color .2s,translate .3s var(--ease-premium);translate:var(--mx,0px) var(--my,0px);} #page-settings .set-rail button::before{counter-increment:rl;content:counter(rl,decimal-leading-zero);display:inline-block;width:22px;font-size:9.5px;letter-spacing:.08em;opacity:.45;font-variant-numeric:tabular-nums;transition:opacity .2s,color .2s;} #page-settings .set-rail button.on::before{opacity:1;color:var(--core);} #page-settings .set-rail::before,#page-settings .set-rail::after{content:'';position:absolute;right:5px;top:12px;bottom:12px;width:2px;border-radius:2px;pointer-events:none;} #page-settings .set-rail::before{background:var(--line);} #page-settings .set-rail::after{background:linear-gradient(var(--core),var(--think));transform-origin:top;transform:scaleY(var(--prog,0));transition:transform .2s linear;} #page-settings .set-search{width:100%;margin:2px 0 6px;padding:8px 10px;border-radius:12px;border:1px solid var(--line);background:var(--panel-2);color:var(--text);font-size:12.5px;outline:none;transition:border-color .2s,box-shadow .2s;} #page-settings .set-search:focus{border-color:var(--core);box-shadow:0 0 0 3px rgb(var(--core-rgb) / .18);} #page-settings.set-enter .set-rail button{animation:fxRailIn .5s var(--ease-premium) both;animation-delay:calc(var(--ri,0) * 35ms);} @keyframes fxRailIn{from{opacity:0;transform:translateX(-12px);}to{opacity:1;transform:none;}} /* ---- holographic edge (border lit by the pointer) + effect clip layer ---- */ #page-settings .set-edge{position:absolute;inset:-1px;padding:1px;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s; background:radial-gradient(240px circle at var(--ex,50%) var(--ey,50%),rgb(var(--core-rgb) / .95),rgb(var(--think-rgb) / .55) 45%,transparent 72%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);mask-composite:exclude;} #page-settings .set-card:hover>.set-edge{opacity:1;} #page-settings .set-fx{position:absolute;inset:0;z-index:-1;border-radius:inherit;overflow:hidden;pointer-events:none;} /* ---- toggle shockwave + particle burst ---- */ #page-settings .fx-wave{position:absolute;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%; background:radial-gradient(circle,transparent 56%,rgb(var(--core-rgb) / .55) 62%,rgb(var(--core-rgb) / .12) 70%,transparent 76%); animation:fxWave .8s cubic-bezier(.22,1,.36,1) forwards;} @keyframes fxWave{from{transform:scale(.4);opacity:1;}to{transform:scale(18);opacity:0;}} #page-settings .fx-p{position:absolute;width:5px;height:5px;border-radius:50%;background:var(--core);box-shadow:0 0 8px var(--core);} #page-settings .fx-p:nth-child(even){background:var(--think);box-shadow:0 0 8px var(--think);} /* ---- magnetic controls (JS sets --mx/--my; uses the independent `translate` property so no transform conflicts) ---- */ #page-settings .qc-tile{translate:var(--mx,0px) var(--my,0px);transition:border-color .25s,background .25s,color .2s,transform .16s var(--ease-spring),translate .3s var(--ease-premium);} #page-settings .pill-btn{translate:var(--mx,0px) var(--my,0px);transition:border-color .2s,color .2s,transform var(--dur-fast,.16s) var(--ease-spring),box-shadow .2s,translate .3s var(--ease-premium);} /* ---- theme cards: 3D tilt + glare (JS adds .tilt while the mouse is over a card) ---- */ #page-settings .theme-card::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .25s;background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgb(255 255 255 / .16),transparent 55%);} #page-settings .theme-grid .theme-card.tilt{transform:perspective(700px) rotateX(var(--ry,0deg)) rotateY(var(--rx,0deg)) translateY(-3px) scale(1.02);transition:transform .12s linear,border-color .28s,box-shadow .28s;} #page-settings .theme-grid .theme-card.tilt::before{opacity:1;} /* ---- sliders: energy glow while dragging ---- */ #page-settings input[type=range].drag{box-shadow:0 0 14px -2px rgb(var(--core-rgb) / .7);} /* ---- card headers: line draw-in, title light sweep on page open ---- */ #page-settings .set-card-head{position:relative;} #page-settings .set-card-head::after{content:'';position:absolute;left:0;bottom:-1px;width:100%;height:1px;transform-origin:left;opacity:.65;background:linear-gradient(90deg,var(--core),rgb(var(--think-rgb) / .35) 45%,transparent 80%);} #page-settings.set-enter .set-card-head::after{animation:fxLine .9s var(--ease-premium) both;animation-delay:calc(var(--i,0) * 45ms + 260ms);} @keyframes fxLine{from{transform:scaleX(0);}to{transform:scaleX(1);}} #page-settings.set-enter .page-title{background:linear-gradient(100deg,var(--text) 0 42%,var(--core) 50%,var(--text) 58% 100%);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:fxSweep 1s var(--ease-premium) both;} @keyframes fxSweep{from{background-position:100% 0;}to{background-position:0 0;}} /* ---- quick-controls counter ---- */ #page-settings .odo{display:inline-block;color:var(--core);font-weight:600;font-variant-numeric:tabular-nums;} /* ---- memory ring: tick marks + one-shot scan ---- */ #page-settings .mem-ring{margin:9px;} #page-settings .mem-ring::before,#page-settings .mem-ring::after{content:'';position:absolute;inset:-9px;border-radius:50%;pointer-events:none; -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 7px),#000 calc(100% - 6px));mask:radial-gradient(farthest-side,transparent calc(100% - 7px),#000 calc(100% - 6px));} #page-settings .mem-ring::before{background:repeating-conic-gradient(rgb(var(--fg-rgb) / .22) 0 1deg,transparent 1deg 6deg);} #page-settings .mem-ring::after{background:conic-gradient(from 0deg,transparent 0 78%,rgb(var(--core-rgb) / .9) 100%);opacity:0;} #page-settings .mem-ring.scan::after{animation:fxScan 1.3s cubic-bezier(.4,0,.2,1);} @keyframes fxScan{0%{opacity:1;transform:rotate(0);}85%{opacity:1;}100%{opacity:0;transform:rotate(360deg);}} /* ---- skills: rows stream in ---- */ #skillsList .skill-row{animation:fxRowIn .5s var(--ease-premium) both;} #skillsList .skill-row:nth-child(2){animation-delay:50ms;} #skillsList .skill-row:nth-child(3){animation-delay:100ms;} #skillsList .skill-row:nth-child(4){animation-delay:150ms;} #skillsList .skill-row:nth-child(5){animation-delay:200ms;} #skillsList .skill-row:nth-child(6){animation-delay:250ms;} #skillsList .skill-row:nth-child(7){animation-delay:300ms;} #skillsList .skill-row:nth-child(n+8){animation-delay:350ms;} @keyframes fxRowIn{from{opacity:0;transform:translateX(-10px);}to{opacity:1;transform:none;}} /* ---- danger zone: hazard stripes ---- */ #page-settings .danger-zone{background:repeating-linear-gradient(135deg,rgb(var(--danger-rgb) / .07) 0 10px,transparent 10px 20px),linear-gradient(135deg,rgb(var(--danger-rgb) / .09),transparent 70%);} /* ---- settings search ---- */ #page-settings .set-card{transition:border-color .3s,box-shadow .35s,opacity .3s;} #page-settings .set-card.dim{opacity:.3;} #page-settings .hit{background:rgb(var(--core-rgb) / .10);box-shadow:0 0 0 6px rgb(var(--core-rgb) / .10);border-radius:8px;} @media (max-width:980px){ #page-settings .set-rail::before,#page-settings .set-rail::after{left:16px;right:16px;top:auto;bottom:2px;width:auto;height:2px;} #page-settings .set-rail::after{transform-origin:left;transform:scaleX(var(--prog,0));} #page-settings .set-search{display:none;} } @media (hover:none),(prefers-reduced-motion:reduce){ #page-settings .set-edge{display:none;} } /* ==== style/fx/theme-custom.css ==== */ /* ========================================================================== theme-custom.css -- the "Custom" theme (data-theme="custom"). Every token is read from --cx-* variables that js/settings-plus.js computes from the two colours you pick (accent + background) and writes on . The fallbacks below are only used before the script has run. Load right after tokens.css (any point before the effects files is fine). ========================================================================== */ :root[data-theme="custom"], [data-theme-preview="custom"]{ --void:var(--cx-void,#030507); --deep:var(--cx-deep,#07090d); --panel:var(--cx-panel,#0b0e14); --panel-rgb:var(--cx-panel-rgb,11 14 20); --panel-2:var(--cx-panel-2,#10141b); --line:var(--cx-line,#1c2230); --core-rgb:var(--cx-core-rgb,0 183 255); --think-rgb:var(--cx-think-rgb,0 140 255); --speak-rgb:var(--cx-speak-rgb,0 231 255); --text:var(--cx-text,#eaf6ff); --text-soft:var(--cx-text-soft,#a9c4dc); --muted:var(--cx-muted,#7f98b0); --faint:var(--cx-faint,#44566b); --danger:var(--cx-danger,#ff5a6a); --danger-rgb:var(--cx-danger-rgb,255 90 106); --on-core:var(--cx-on-core,#0a0a0a); --fg-rgb:var(--cx-fg-rgb,255 255 255); --void-rgb:var(--cx-void-rgb,3 5 7); --mesh-k:.6; --vignette:rgba(0,0,0,.55); --glass-bg:rgb(var(--panel-rgb) / .78); --glass-border:rgb(var(--fg-rgb) / .10); --glow:rgb(var(--core-rgb) / .3); --shadow-rest:0 1px 2px rgba(0,0,0,.45),0 10px 24px -14px rgba(0,0,0,.7); --shadow-hover:0 2px 4px rgba(0,0,0,.45),0 16px 34px -14px rgba(0,0,0,.75),0 0 26px -8px rgb(var(--core-rgb) / .4); --shadow-hover-flat:0 2px 4px rgba(0,0,0,.45),0 16px 34px -14px rgba(0,0,0,.75); /* without the glow, outside the High tier */ --scrim:rgb(var(--void-rgb) / .8); color-scheme:dark; } :root[data-theme="custom"][data-cx-mode="light"], [data-theme-preview="custom"][data-cx-mode="light"]{ color-scheme:light; --vignette:rgba(90,80,50,.08); --shadow-rest:0 1px 2px rgb(var(--fg-rgb) / .06),0 10px 22px -14px rgb(var(--fg-rgb) / .22); --shadow-hover:0 2px 4px rgb(var(--fg-rgb) / .08),0 16px 30px -16px rgb(var(--fg-rgb) / .3); --shadow-hover-flat:0 2px 4px rgb(var(--fg-rgb) / .08),0 16px 30px -16px rgb(var(--fg-rgb) / .3); --success:#4a7c59; --success-rgb:74 124 89; --warning:#9a6b12; --warning-rgb:154 107 18; --info:#3f6f8f; --info-rgb:63 111 143; } /* ==== style/fx/theme-neon.css ==== */ /* ========================================================================== theme-neon.css -- effects for the "Neon Black" theme (data-theme="neon") ONLY. Colours live in style/tokens.css (the :root[data-theme="neon"] block); this file only adds gloss, edge light and glow. Every rule is scoped to :root[data-theme="neon"] (except the Settings preview card), so no other theme is affected. Motion = transform/opacity or tiny 2px strips only, and is wrapped in prefers-reduced-motion:no-preference. Load order: last stylesheet in index.html. ========================================================================== */ /* ---- background glow: blue only (no teal/purple/amber from the time-of-day tint) ---- */ :root[data-theme="neon"] body::before{ background: radial-gradient(38% 34% at 28% 32%, rgb(var(--core-rgb) / .10), transparent 70%), radial-gradient(34% 30% at 74% 66%, rgb(var(--think-rgb) / .08), transparent 70%), radial-gradient(26% 24% at 62% 22%, rgb(var(--speak-rgb) / .045), transparent 70%); } :root[data-theme="neon"] ::-webkit-scrollbar-thumb{background:rgb(var(--core-rgb) / .35);} /* ---- glass cards: glossy top edge + faint inner sheen ---- */ :root[data-theme="neon"] .set-card, :root[data-theme="neon"] .modal{ border-color:rgb(var(--core-rgb) / .20); background-image:linear-gradient(180deg,rgb(var(--core-rgb) / .06),transparent 42%); box-shadow:inset 0 1px 0 rgb(var(--shine-rgb) / .20),var(--shadow-rest); transition:border-color var(--dur-med,.28s),box-shadow var(--dur-med,.28s); } :root[data-theme="neon"] .set-card:hover{border-color:rgb(var(--core-rgb) / .42);box-shadow:inset 0 1px 0 rgb(var(--shine-rgb) / .34),var(--shadow-hover);} :root[data-theme="neon"] .modal{box-shadow:inset 0 1px 0 rgb(var(--shine-rgb) / .22),0 26px 60px -20px #000,0 0 44px -16px rgb(var(--core-rgb) / .45);} /* ---- light seam along the top of the floating home cards ---- */ :root[data-theme="neon"] .today-card::before, :root[data-theme="neon"] .next-card::before, :root[data-theme="neon"] .plan-card::before, :root[data-theme="neon"] .home-activity::before{ left:10%;right:10%;height:2px;border-radius:2px; background:linear-gradient(90deg,rgb(var(--core-rgb) / .35) 0%,rgb(var(--core-rgb) / .35) 38%,rgb(var(--shine-rgb) / .95) 50%,rgb(var(--core-rgb) / .35) 62%,rgb(var(--core-rgb) / .35) 100%); background-size:200% 100%; -webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent); mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent); } :root[data-theme="neon"] .today-card:hover, :root[data-theme="neon"] .next-card:hover{border-color:rgb(var(--speak-rgb) / .55);} /* ---- buttons: glossy ---- */ :root[data-theme="neon"] .pill-btn{ background:linear-gradient(180deg,rgb(var(--core-rgb) / .10),transparent 60%),var(--panel-2); border-color:rgb(var(--core-rgb) / .22); box-shadow:inset 0 1px 0 rgb(var(--shine-rgb) / .10); } :root[data-theme="neon"] .pill-btn:hover:not(:disabled){ border-color:rgb(var(--core-rgb) / .70);transform:translateY(-1px) scale(1.02); box-shadow:inset 0 1px 0 rgb(var(--shine-rgb) / .22),0 0 18px -3px rgb(var(--core-rgb) / .50); } :root[data-theme="neon"] .pill-btn:active:not(:disabled){transform:scale(.97);} :root[data-theme="neon"] .pill-btn.primary{ background:linear-gradient(180deg,color-mix(in srgb,var(--core) 62%,white) 0%,var(--core) 48%,color-mix(in srgb,var(--core) 80%,black) 100%); color:var(--on-core); box-shadow:inset 0 0 0 1px rgb(var(--shine-rgb) / .40),inset 0 1px 0 rgb(255 255 255 / .50),0 0 20px -4px rgb(var(--core-rgb) / .65); } :root[data-theme="neon"] .pill-btn.primary:hover:not(:disabled){ background:linear-gradient(180deg,color-mix(in srgb,var(--core) 45%,white) 0%,color-mix(in srgb,var(--core) 90%,white) 48%,var(--core) 100%); box-shadow:inset 0 0 0 1px rgb(var(--shine-rgb) / .55),inset 0 1px 0 rgb(255 255 255 / .60),0 0 28px -3px rgb(var(--core-rgb) / .85); } /* ---- navigation: active pill glows, text lights up ---- */ :root[data-theme="neon"] .nav{border-color:rgb(var(--core-rgb) / .28);box-shadow:inset 0 1px 0 rgb(var(--shine-rgb) / .14),var(--shadow-rest);} :root[data-theme="neon"] .nav-ind{ background:linear-gradient(180deg,rgb(var(--core-rgb) / .30),rgb(var(--core-rgb) / .12)); box-shadow:inset 0 0 0 1px rgb(var(--core-rgb) / .60),inset 0 1px 0 rgb(var(--shine-rgb) / .35),0 0 18px -2px rgb(var(--core-rgb) / .55); } :root[data-theme="neon"] .nav button.active{color:#fff;text-shadow:0 0 10px rgb(var(--core-rgb) / .80);} /* ---- inputs: luminous focus ring ---- */ :root[data-theme="neon"] .field:focus, :root[data-theme="neon"] .add-row input:focus, :root[data-theme="neon"] .modal input:focus, :root[data-theme="neon"] .modal select:focus, :root[data-theme="neon"] .set-row input[type=text]:focus{ border-color:var(--core);box-shadow:0 0 0 3px rgb(var(--core-rgb) / .18),0 0 18px -2px rgb(var(--core-rgb) / .50); } :root[data-theme="neon"] .chat-dock:focus-within{border-color:rgb(var(--core-rgb) / .70);box-shadow:0 0 0 3px rgb(var(--core-rgb) / .16),0 0 22px -4px rgb(var(--core-rgb) / .50);} /* ---- toggles / chips / status dots: small cyan bloom ---- */ :root[data-theme="neon"] .toggle.on{box-shadow:0 0 14px -2px rgb(var(--core-rgb) / .65);} :root[data-theme="neon"] .chip.on{background:rgb(var(--core-rgb) / .10);box-shadow:0 0 14px -4px rgb(var(--core-rgb) / .55);} :root[data-theme="neon"] .mini-orb{box-shadow:0 0 10px var(--core),0 0 22px rgb(var(--speak-rgb) / .55);} :root[data-theme="neon"] .toast .t-dot{box-shadow:0 0 8px currentColor,0 0 16px rgb(var(--speak-rgb) / .45);} /* ---- Settings > Appearance preview card (applies in every theme, so the card always shows the real neon look) ---- */ .tc-pv[data-theme-preview="neon"]{border-color:rgb(var(--core-rgb) / .40);box-shadow:inset 0 1px 0 rgb(var(--shine-rgb) / .50),inset 0 0 20px -10px rgb(var(--core-rgb) / .60);} .tc-pv[data-theme-preview="neon"] .tc-panel{box-shadow:inset 0 1px 0 rgb(var(--shine-rgb) / .25);border-color:rgb(var(--core-rgb) / .25);} .tc-pv[data-theme-preview="neon"] .tc-accent{background:linear-gradient(135deg,var(--speak),var(--core) 55%,var(--think));box-shadow:0 0 14px -2px rgb(var(--core-rgb) / .80);} /* ---- motion (only when the OS allows it) ---- */ @media (prefers-reduced-motion:no-preference){ :root[data-theme="neon"] .today-card::before, :root[data-theme="neon"] .next-card::before, :root[data-theme="neon"] .plan-card::before, :root[data-theme="neon"] .home-activity::before{animation:neonSweep 7s cubic-bezier(.4,0,.2,1) infinite;} :root[data-theme="neon"] .next-card::before{animation-delay:-2s;} :root[data-theme="neon"] .plan-card::before{animation-delay:-3.5s;} :root[data-theme="neon"] .home-activity::before{animation-delay:-5s;} :root[data-theme="neon"] .nav-ind{animation:neonBreath 3.4s ease-in-out infinite;} } @keyframes neonSweep{0%{background-position:0 0;}38%,100%{background-position:200% 0;}} @keyframes neonBreath{0%,100%{opacity:.82;}50%{opacity:1;}} /* ==== style/fx/theme-minimal.css ==== */ /* ========================================================================== theme-minimal.css -- flat, matte looks for the three minimal themes: ink = Mono Ink | oat = Oat & Sage | lime = Graphite Lime. Colours live in style/tokens.css; this file only strips glow/gloss and sets each theme's signature detail. Every rule is scoped to these three data-theme values, so no other theme is affected. Load order: after theme-neon.css (last stylesheet in index.html). ========================================================================== */ /* ---- shared: no ambient glow, no light seam on cards, no glow on dots/tabs ---- */ :root:is([data-theme="ink"],[data-theme="oat"],[data-theme="lime"]) body::before{background:none;animation:none;} :root:is([data-theme="ink"],[data-theme="oat"],[data-theme="lime"]) :is(.today-card,.next-card,.plan-card,.home-activity)::before{display:none;} :root:is([data-theme="ink"],[data-theme="oat"],[data-theme="lime"]) .mini-orb{box-shadow:none;} :root:is([data-theme="ink"],[data-theme="oat"],[data-theme="lime"]) .tab.active::after{box-shadow:none;} :root:is([data-theme="ink"],[data-theme="oat"],[data-theme="lime"]) .nav button.active{text-shadow:none;} :root:is([data-theme="ink"],[data-theme="oat"],[data-theme="lime"]) .pill-btn.primary{box-shadow:none;} :root:is([data-theme="ink"],[data-theme="oat"],[data-theme="lime"]) .pill-btn:hover:not(:disabled){box-shadow:none;} :root:is([data-theme="ink"],[data-theme="oat"],[data-theme="lime"]) .chip:hover{box-shadow:none;} :root:is([data-theme="ink"],[data-theme="oat"],[data-theme="lime"]) .chip.on{background:rgb(var(--core-rgb) / .10);} :root:is([data-theme="ink"],[data-theme="oat"],[data-theme="lime"]) .toggle.on{box-shadow:none;} /* ---- Mono Ink: hairlines, square-ish cards, nav indicator = a thin vermilion underline ---- */ :root[data-theme="ink"] :is(.set-card,.modal,.today-card,.next-card,.plan-card,.home-activity){border-radius:10px;} :root[data-theme="ink"] .nav-ind{top:auto;bottom:3px;height:2px;border-radius:2px;background:var(--core);box-shadow:none;} :root[data-theme="ink"] .nav button.active{color:var(--core);} /* ---- Graphite Lime: nav indicator = solid lime pill, dark text; lime primary buttons ---- */ :root[data-theme="lime"] :is(.set-card,.modal,.today-card,.next-card,.plan-card,.home-activity){border-radius:14px;} :root[data-theme="lime"] .nav-ind{background:var(--core);box-shadow:none;} :root[data-theme="lime"] .nav button.active{color:var(--on-core);font-weight:600;} /* ---- Oat & Sage: soft pebble nav indicator, rounder cards, paper-like inputs ---- */ :root[data-theme="oat"] :is(.set-card,.modal,.today-card,.next-card,.plan-card,.home-activity){border-radius:24px;} :root[data-theme="oat"] .nav-ind{background:rgb(var(--core-rgb) / .16);box-shadow:none;} :root[data-theme="oat"] .nav button.active{color:var(--core);font-weight:600;} :root[data-theme="oat"] :is(.field,.add-row input,.modal input,.modal select,.set-row input[type=text]){color-scheme:light;border-radius:12px;} /* ==== style/core/smooth.css ==== */ /* ========================================================================== smooth.css -- performance / smoothness layer. Loaded LAST in index.html. Theme-independent: works with every theme. Nothing here changes layout, colours or behaviour; it only trims GPU/CPU cost and removes input lag. ========================================================================== */ /* 1) frosted glass is the single most expensive effect (re-blurred under the animated ambient glow every frame). 24px -> 16px blur cuts that cost by roughly a third and still reads as frosted glass. */ :root{--glass-blur:16px;} /* 2) ambient nebula drift only runs on Home; on every other page it is frozen, so glass cards stop re-blurring each frame */ body:not([data-page="home"])::before{animation-play-state:paused;} /* 3) theme switch: the global colour-glide no longer animates box-shadow on every element (that forced a repaint of every shadow) and is shorter */ :root.theme-anim,:root.theme-anim *{transition-property:background-color,border-color,color,fill,stroke !important;transition-duration:.3s !important;} /* 4) music spectrum: 40 bars change height every frame -> keep that relayout inside the spectrum box */ .spectrum{contain:layout style;} /* 5) scrolling: no scroll-chaining / rubber-band into the page behind a list or sheet */ .page-body,.chat-log,.skills-scroll,.pv-recent,.sheet,.modal{overscroll-behavior:contain;} /* 6) touch / click responsiveness: no 300ms tap delay, no grey tap flash */ button,.chip,.pill-btn,.theme-card,.nav button,.app-tile,.row,[role="button"]{touch-action:manipulation;-webkit-tap-highlight-color:transparent;} /* Safety net: files without their own prefers-reduced-motion handling (apps, flow, palette, quality, perf, router-view, security, themes) stop looping and snap. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* ==== style/fx/motion-pack.css ==== */ /* ========================================================================== motion-pack.css -- the SARA motion / effects pack in ONE file (replaces animations.css, premium.css, luxe.css, aurum.css). Four groups, each switchable at runtime without touching the cascade: (managed by js/quality.js, Settings > Appearance > Fine-tune effects). Group rules are gated with :where(), so specificity is exactly what it was in the separate files. Note: @keyframes cannot be gated, so switching "pm" off stops the premium RULES but a few redefined keyframes (pageIn, msgIn, ...) keep their polished timing. Generated from the four source files by a script; regenerate rather than hand-edit. ax = Entrance & hover animations (59 rules) pm = Premium upgrades (33 rules) lx = Hover polish (Luxe) (104 rules) au = Detail effects (Aurum) (166 rules) ========================================================================== */ /* ============ GROUP "ax" -- Entrance & hover animations (source: animations.css, 59 rules; switch off with ) ============ */ :root:where(:not([data-fx-off~="ax"])){--ax-ease:var(--ease-premium,cubic-bezier(.22,1,.36,1));--ax-spring:var(--ease-spring,cubic-bezier(.34,1.56,.64,1));--ax-step:45ms} :where(html:not([data-fx-off~="ax"])) :is(.qc-tile,.an-kpi,.perf-num){transition:scale .28s var(--ax-ease)} :where(html:not([data-fx-off~="ax"])) :is(.qc-tile,.an-kpi,.perf-num):hover{scale:1.015} :where(html:not([data-fx-off~="ax"])) :is(.pill-btn,.chip,.qc-tile,.app-tile,.stat,.theme-card,.dock-btn,.qa-btn,.link-btn):active{scale:.97} :where(html:not([data-fx-off~="ax"])) :is(.pill-btn,.chip,.app-tile,.theme-card,.dock-btn,.qa-btn,.link-btn){transition-property:border-color,color,background-color,box-shadow,transform,scale} :where(html:not([data-fx-off~="ax"])) .link-btn{background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-position:50% calc(100% - 3px);background-size:0 1px;transition:color .2s,background-size .3s var(--ax-ease),scale .16s var(--ax-ease)} :where(html:not([data-fx-off~="ax"])) .link-btn:hover{background-size:calc(100% - 16px) 1px} :where(html:not([data-fx-off~="ax"])) .tab::before{content:"";position:absolute;left:0;right:0;bottom:4px;height:2px;border-radius:2px;background:currentColor;opacity:0;transform:scaleX(.4);transform-origin:center;transition:opacity .25s ease,transform .3s var(--ax-ease);pointer-events:none} :where(html:not([data-fx-off~="ax"])) .tab:hover::before{opacity:.35;transform:scaleX(1)} :where(html:not([data-fx-off~="ax"])) .tab.active::before{opacity:0} :where(html:not([data-fx-off~="ax"])) .chat-dock{transition-property:border-color,box-shadow,opacity,translate;translate:0 0} :where(html:not([data-fx-off~="ax"])) .chat-dock:focus-within{translate:0-2px} :where(html:not([data-fx-off~="ax"])) .nav{transition-property:opacity,translate,border-color,box-shadow;transition-duration:.3s;transition-timing-function:var(--ax-ease);translate:0 0} :where(html:not([data-fx-off~="ax"])) .tc-pv{transition:scale .35s var(--ax-ease)} :where(html:not([data-fx-off~="ax"])) .theme-card:hover .tc-pv{scale:1.03} :where(html:not([data-fx-off~="ax"])) .row{transition:translate .25s var(--ax-ease)} :where(html:not([data-fx-off~="ax"])) .row:hover{translate:3px 0} @media (prefers-reduced-motion:no-preference){:where(html:not([data-fx-off~="ax"])) .page-title{animation:ax-title-in .5s var(--ax-ease) backwards} :where(html:not([data-fx-off~="ax"])) .page-header .page-title{position:relative} :where(html:not([data-fx-off~="ax"])) .page-header .page-title::after{content:"";position:absolute;left:0;bottom:-6px;width:28px;height:2px;border-radius:2px;background:var(--core);transform-origin:left center;animation:ax-line .7s var(--ax-ease) .25s backwards;pointer-events:none} :where(html:not([data-fx-off~="ax"])) .page-status{animation:ax-status-in .5s var(--ax-ease) .12s backwards} :where(html:not([data-fx-off~="ax"])) .section-label{animation:ax-label-in .45s var(--ax-ease) backwards} :where(html:not([data-fx-off~="ax"])) :is(.qc-tile,.app-tile,.an-kpi,.perf-num,.stat){animation:ax-tile-in .5s var(--ax-ease) backwards} :where(html:not([data-fx-off~="ax"])) :is(.qc-tile,.app-tile,.an-kpi,.perf-num,.stat):nth-child(2){animation-delay:calc(var(--ax-step)*1)} :where(html:not([data-fx-off~="ax"])) :is(.qc-tile,.app-tile,.an-kpi,.perf-num,.stat):nth-child(3){animation-delay:calc(var(--ax-step)*2)} :where(html:not([data-fx-off~="ax"])) :is(.qc-tile,.app-tile,.an-kpi,.perf-num,.stat):nth-child(4){animation-delay:calc(var(--ax-step)*3)} :where(html:not([data-fx-off~="ax"])) :is(.qc-tile,.app-tile,.an-kpi,.perf-num,.stat):nth-child(5){animation-delay:calc(var(--ax-step)*4)} :where(html:not([data-fx-off~="ax"])) :is(.qc-tile,.app-tile,.an-kpi,.perf-num,.stat):nth-child(6){animation-delay:calc(var(--ax-step)*5)} :where(html:not([data-fx-off~="ax"])) :is(.qc-tile,.app-tile,.an-kpi,.perf-num,.stat):nth-child(n+7){animation-delay:calc(var(--ax-step)*6)} :where(html:not([data-fx-off~="ax"])) .chip-row .chip{animation:ax-chip-in .45s var(--ax-ease) backwards} :where(html:not([data-fx-off~="ax"])) .chip-row .chip:nth-child(2){animation-delay:40ms} :where(html:not([data-fx-off~="ax"])) .chip-row .chip:nth-child(3){animation-delay:80ms} :where(html:not([data-fx-off~="ax"])) .chip-row .chip:nth-child(4){animation-delay:120ms} :where(html:not([data-fx-off~="ax"])) .chip-row .chip:nth-child(n+5){animation-delay:160ms} :where(html:not([data-fx-off~="ax"])) .info-row{animation:ax-info-in .45s var(--ax-ease) backwards} :where(html:not([data-fx-off~="ax"])) .info-row:nth-child(2){animation-delay:40ms} :where(html:not([data-fx-off~="ax"])) .info-row:nth-child(3){animation-delay:80ms} :where(html:not([data-fx-off~="ax"])) .info-row:nth-child(4){animation-delay:120ms} :where(html:not([data-fx-off~="ax"])) .info-row:nth-child(n+5){animation-delay:160ms} :where(html:not([data-fx-off~="ax"])) .btn-row>*{animation:ax-btn-in .45s var(--ax-ease) backwards} :where(html:not([data-fx-off~="ax"])) .btn-row>*:nth-child(2){animation-delay:50ms} :where(html:not([data-fx-off~="ax"])) .btn-row>*:nth-child(n+3){animation-delay:100ms} :where(html:not([data-fx-off~="ax"])) .acc-note{animation:ax-note-in .6s ease .15s backwards} :where(html:not([data-fx-off~="ax"])) .set-row{animation:ax-setrow-in .45s var(--ax-ease) backwards} :where(html:not([data-fx-off~="ax"])) .overlay.open .modal>*{animation:ax-modal-child .45s var(--ax-ease) backwards} :where(html:not([data-fx-off~="ax"])) .overlay.open .modal>*:nth-child(2){animation-delay:60ms} :where(html:not([data-fx-off~="ax"])) .overlay.open .modal>*:nth-child(3){animation-delay:110ms} :where(html:not([data-fx-off~="ax"])) .overlay.open .modal>*:nth-child(n+4){animation-delay:160ms} :where(html:not([data-fx-off~="ax"])) .overlay.open .sheet>*{animation:ax-sheet-child .45s var(--ax-ease) backwards} :where(html:not([data-fx-off~="ax"])) .overlay.open .sheet>*:nth-child(2){animation-delay:60ms} :where(html:not([data-fx-off~="ax"])) .overlay.open .sheet>*:nth-child(3){animation-delay:110ms} :where(html:not([data-fx-off~="ax"])) .overlay.open .sheet>*:nth-child(n+4){animation-delay:160ms} :where(html:not([data-fx-off~="ax"])) .chip.on{animation:ax-chip-select .45s var(--ax-ease)} :where(html:not([data-fx-off~="ax"])) :is(.field,.add-row input,.modal input,.modal select,.set-row input[type=text]):focus{animation:ax-focus-bloom .5s var(--ax-ease)} :where(html:not([data-fx-off~="ax"])) :is(button,.chip,.pill-btn,.tab,.nav button):focus-visible{outline:2px solid rgb(var(--core-rgb)/.8);outline-offset:2px;animation:ax-focus-ring .3s var(--ax-ease)} :where(html:not([data-fx-off~="ax"])) input[type=range]::-webkit-slider-thumb{transition:scale .2s var(--ax-spring)} :where(html:not([data-fx-off~="ax"])) input[type=range]:active::-webkit-slider-thumb{scale:1.25} :where(html:not([data-fx-off~="ax"])) .mini-orb{position:relative} :where(html:not([data-fx-off~="ax"])) .mini-orb::after{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid var(--core);opacity:0;pointer-events:none;animation:ax-ping 3.2s ease-out infinite} } @keyframes ax-title-in{from{opacity:0;transform:translateX(-10px)} } @keyframes ax-line{from{transform:scaleX(0)} } @keyframes ax-status-in{from{opacity:0;transform:translateY(-6px)} } @keyframes ax-label-in{from{opacity:0;transform:translateX(-6px)} } @keyframes ax-tile-in{from{opacity:0;transform:translateY(8px) scale(.985)} } @keyframes ax-chip-in{from{opacity:0;transform:scale(.92)} } @keyframes ax-info-in{from{opacity:0;transform:translateX(-6px)} } @keyframes ax-btn-in{from{opacity:0;transform:translateY(6px)} } @keyframes ax-note-in{from{opacity:0} } @keyframes ax-setrow-in{from{opacity:0;transform:translateY(4px)} } @keyframes ax-modal-child{from{opacity:0;transform:translateY(8px)} } @keyframes ax-sheet-child{from{opacity:0;transform:translateY(8px)} } @keyframes ax-chip-select{0%{transform:scale(.965)} 60%{transform:scale(1.025)} 100%{transform:scale(1)} } @keyframes ax-focus-bloom{from{box-shadow:0 0 0 0 rgb(var(--core-rgb)/.4)} to{box-shadow:0 0 0 6px rgb(var(--core-rgb)/0)} } @keyframes ax-focus-ring{from{outline-offset:7px;outline-color:rgb(var(--core-rgb)/0)} } @keyframes ax-sheen{from{background-position:130%0} to{background-position:-30%0} } @keyframes ax-ping{0%{opacity:.4;transform:scale(1)} 70%,100%{opacity:0;transform:scale(2.2)} } /* ============ GROUP "pm" -- Premium upgrades (source: premium.css, 33 rules; switch off with ) ============ */ :root:where(:not([data-fx-off~="pm"])){--ease-premium:cubic-bezier(.16,1,.3,1);--ease-spring:cubic-bezier(.22,1.45,.36,1);--dur-fast:.14s;--dur-med:.3s} :where(html:not([data-fx-off~="pm"])) .page{animation-duration:.42s;animation-timing-function:var(--ease-premium)} @keyframes pageIn{from{opacity:0;transform:translateY(12px) scale(.992)} to{opacity:1;transform:translateY(0) scale(1)} } @keyframes pageInR{from{opacity:0;transform:translateX(24px) scale(.99)} to{opacity:1;transform:translateX(0) scale(1)} } @keyframes pageInL{from{opacity:0;transform:translateX(-24px) scale(.99)} to{opacity:1;transform:translateX(0) scale(1)} } @keyframes headerIn{from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:none} } @keyframes rowIn{from{opacity:0;transform:translateY(9px)} to{opacity:1;transform:none} } @keyframes setCardIn{0%{opacity:0;transform:translateY(22px) scale(.985)} 100%{opacity:1;transform:none} } @keyframes msgIn{0%{opacity:0;transform:translateY(14px) scale(.96)} 62%{opacity:1;transform:translateY(-2px) scale(1.006)} 100%{opacity:1;transform:none} } @keyframes toastIn{0%{opacity:0;transform:translateY(18px) scale(.94)} 60%{opacity:1;transform:translateY(-3px) scale(1.012)} 100%{opacity:1;transform:none} } @keyframes tcPop{0%{transform:scale(.96)} 55%{transform:scale(1.02)} 100%{transform:scale(1)} } @keyframes themePick{0%{transform:scale(1)} 40%{transform:scale(1.12)} 70%{transform:scale(.98)} 100%{transform:scale(1)} } @keyframes dotPop{0%{transform:scale(.3)} 55%{transform:scale(1.5)} 80%{transform:scale(.94)} 100%{transform:scale(1)} } @keyframes icoPop{0%{transform:scale(.5);opacity:0} 60%{transform:scale(1.12);opacity:1} 100%{transform:none;opacity:1} } @keyframes orbPulse{0%,100%{opacity:.62;transform:scale(.88)} 38%{opacity:1;transform:scale(1.08)} 68%{opacity:.8;transform:scale(.98)} } :where(html:not([data-fx-off~="pm"])) .ripple{background:radial-gradient(circle,rgb(var(--fg-rgb)/.26) 0%,rgb(var(--fg-rgb)/.10) 45%,rgb(var(--fg-rgb)/0) 72%);animation:rippleOut .8s var(--ease-premium) forwards} :where(html:not([data-fx-off~="pm"])) .skel{background:linear-gradient(105deg,var(--panel) 35%,rgb(var(--fg-rgb)/.09) 50%,var(--panel) 65%);background-size:240% 100%;animation-duration:1.5s;animation-timing-function:cubic-bezier(.4,0,.2,1)} :where(html:not([data-fx-off~="pm"])) .overlay.open .sheet,:where(html:not([data-fx-off~="pm"])) .overlay.open .modal{transition:transform .6s var(--ease-premium),opacity .3s ease} :where(html:not([data-fx-off~="pm"])) ::selection{background:rgb(var(--core-rgb)/.32);color:inherit} :root:where(:not([data-fx-off~="pm"])){caret-color:var(--core)} :where(html:not([data-fx-off~="pm"])) ::-webkit-scrollbar-thumb:hover{background:rgb(var(--core-rgb)/.5)} /* The pm overlays are created by js/fx/motion-pack.js whether or not the "pm" pack is switched on. Their positioning below is gated on the pack, so with "pm" off they became ordinary block children of and the canvas (the full window high) pushed the whole app down: a black screen until a page switch. Out of flow always; hidden when the pack is off. (audit 2026-10-30) */ .pm-aura,.pm-dust,.pm-progress,.pm-edge,.pm-spark{position:fixed;left:0;top:0;pointer-events:none} html[data-fx-off~="pm"] :is(.pm-aura,.pm-dust,.pm-progress,.pm-edge,.pm-spark){display:none} :where(html:not([data-fx-off~="pm"])) .pm-aura{position:fixed;left:0;top:0;width:520px;height:520px;border-radius:50%;pointer-events:none;z-index:0;opacity:0;background:radial-gradient(circle,rgb(var(--core-rgb)/.10) 0%,rgb(var(--core-rgb)/.045) 35%,transparent 68%);transition:opacity .5s ease;will-change:transform} :where(html:not([data-fx-off~="pm"])) .pm-aura.on{opacity:1} :where(html:not([data-fx-off~="pm"])) .pm-tilt{transition:transform .14s ease-out!important;will-change:transform} :where(html:not([data-fx-off~="pm"])) .pm-spark{position:fixed;width:4px;height:4px;border-radius:50%;pointer-events:none;z-index:60;will-change:transform,opacity} :where(html:not([data-fx-off~="pm"])) .pm-progress{position:fixed;left:0;right:0;top:0;height:2px;z-index:40;pointer-events:none;transform:scaleX(0);transform-origin:left center;opacity:0;background:linear-gradient(90deg,var(--core),var(--speak));transition:opacity .3s ease;will-change:transform} :where(html:not([data-fx-off~="pm"])) .pm-progress.on{opacity:.9} :where(html:not([data-fx-off~="pm"])) .pm-dust{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;pointer-events:none} :where(html:not([data-fx-off~="pm"])) .page{transition:scale .6s var(--ease-premium),opacity .45s ease} :where(html:not([data-fx-off~="pm"])) body.pm-overlay-open .page.active{scale:.985;opacity:.72} @property --pm-a{syntax:"";inherits:false;initial-value:0deg} :where(html:not([data-fx-off~="pm"])) .chat-dock::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;opacity:0;transition:opacity .4s ease;background:conic-gradient(from var(--pm-a),transparent 0 68%,rgb(var(--core-rgb)/.95) 84%,rgb(var(--speak-rgb)/.95) 92%,transparent 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);mask-composite:exclude;animation:pm-spin 3.4s linear infinite;animation-play-state:paused} :where(html:not([data-fx-off~="pm"])) .chat-dock:focus-within::before{opacity:1;animation-play-state:running} @keyframes pm-spin{to{--pm-a:360deg} } :where(html:not([data-fx-off~="pm"])) ::view-transition-old(root),:where(html:not([data-fx-off~="pm"])) ::view-transition-new(root){animation:none;mix-blend-mode:normal} :where(html:not([data-fx-off~="pm"])) ::view-transition-new(root){animation:pm-reveal .8s var(--ease-premium) both} @keyframes pm-reveal{from{clip-path:circle(0 at var(--vt-x,50%) var(--vt-y,50%))} to{clip-path:circle(var(--vt-r,150vmax) at var(--vt-x,50%) var(--vt-y,50%))} } :root:where(:not([data-fx-off~="pm"])).pm-vt,:root:where(:not([data-fx-off~="pm"])).pm-vt *{transition:none!important} :where(html:not([data-fx-off~="pm"])) .page-header{position:relative;z-index:3;transition:box-shadow .35s ease} :where(html:not([data-fx-off~="pm"])) .page-header .page-title{transform-origin:left center;transition:scale .35s var(--ease-premium)} :where(html:not([data-fx-off~="pm"])) .page.pm-scrolled>.page-header{box-shadow:0 1px 0 rgb(var(--core-rgb)/.16),0 14px 22px -20px rgba(0,0,0,.65)} :where(html:not([data-fx-off~="pm"])) .page.pm-scrolled>.page-header .page-title{scale:.94} :where(html:not([data-fx-off~="pm"])) .pm-edge{position:fixed;inset:0;pointer-events:none;z-index:9;opacity:0;box-shadow:inset 0 0 80px -24px var(--pm-edge,var(--core))} :root:where(:not([data-fx-off~="pm"])):is([data-theme="ink"],[data-theme="oat"],[data-theme="lime"]) .pm-dust{opacity:.45} :root:where(:not([data-fx-off~="pm"])):is([data-theme="ink"],[data-theme="oat"],[data-theme="lime"]) .pm-aura{opacity:0} :root:where(:not([data-fx-off~="pm"])):is([data-theme="ink"],[data-theme="oat"],[data-theme="lime"]) .pm-aura.on{opacity:.5} @media (prefers-reduced-motion:reduce){:where(html:not([data-fx-off~="pm"])) .pm-aura,:where(html:not([data-fx-off~="pm"])) .pm-spark,:where(html:not([data-fx-off~="pm"])) .pm-dust,:where(html:not([data-fx-off~="pm"])) .pm-edge,:where(html:not([data-fx-off~="pm"])) .pm-progress{display:none} :where(html:not([data-fx-off~="pm"])) .chat-dock::before{animation:none} :where(html:not([data-fx-off~="pm"])) body.pm-overlay-open .page.active{scale:1;opacity:1} } /* ============ GROUP "lx" -- Hover polish (Luxe) (source: luxe.css, 104 rules; switch off with ) ============ */ :root:where(:not([data-fx-off~="lx"])){--lx-ease:var(--ease-premium,cubic-bezier(.16,1,.3,1));--lx-spring:var(--ease-spring,cubic-bezier(.22,1.45,.36,1))} :where(html:not([data-fx-off~="lx"])) .home-greet{background:linear-gradient(100deg,var(--muted) 40%,var(--text) 50%,var(--muted) 60%)0 0/260% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} :where(html:not([data-fx-off~="lx"])) .cc-greet{background:linear-gradient(100deg,var(--text-soft) 40%,var(--text) 50%,var(--text-soft) 60%)0 0/260% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} :where(html:not([data-fx-off~="lx"])) .home-caption{transition:text-shadow .8s var(--lx-ease)} :where(html:not([data-fx-off~="lx"])) body.sara-active .home-caption{text-shadow:0 0 14px rgb(var(--core-rgb)/.35)} :where(html:not([data-fx-off~="lx"])) .qa-btn svg{transition:rotate .4s var(--lx-spring),scale .4s var(--lx-spring)} :where(html:not([data-fx-off~="lx"])) .qa-btn:hover svg{rotate:-12deg;scale:1.18} :where(html:not([data-fx-off~="lx"])) .cc-bar-fill{background-image:linear-gradient(100deg,transparent 30%,rgb(255 255 255/.55) 50%,transparent 70%);background-size:250% 100%;background-repeat:no-repeat;background-position:130%0} @property --lx-a{syntax:"";inherits:false;initial-value:0deg} :where(html:not([data-fx-off~="lx"])) .clock-card::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;opacity:0;transition:opacity .4s ease;background:conic-gradient(from var(--lx-a),transparent 0 72%,rgb(var(--core-rgb)/.9) 86%,rgb(var(--speak-rgb)/.9) 93%,transparent 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);mask-composite:exclude;animation:lx-spin 4s linear infinite;animation-play-state:paused} :where(html:not([data-fx-off~="lx"])) .clock-card:hover::before{opacity:1;animation-play-state:running} :where(html:not([data-fx-off~="lx"])) .tc-temp{display:inline-block;transform-origin:left center;transition:scale .4s var(--lx-spring)} :where(html:not([data-fx-off~="lx"])) .today-card:hover .tc-temp{scale:1.08} :where(html:not([data-fx-off~="lx"])) #stage::before{content:"";position:absolute;inset:-5%;border-radius:50%;pointer-events:none;border:1px dashed rgb(var(--core-rgb)/.15);background:radial-gradient(circle at 50%0,rgb(var(--speak-rgb)/.95)0 2.5px,rgb(var(--speak-rgb)/.25) 3px,transparent 6px)} :where(html:not([data-fx-off~="lx"])) .offline-strip{background-image:repeating-linear-gradient(135deg,rgb(var(--danger-rgb)/.10)0 10px,transparent 10px 20px);background-size:28px 28px} :where(html:not([data-fx-off~="lx"])) .dock-btn.send svg{transition:translate .3s var(--lx-spring)} :where(html:not([data-fx-off~="lx"])) .dock-btn.send:hover svg{translate:2px -1px} :where(html:not([data-fx-off~="lx"])) .dock-btn.mic{transition:box-shadow .35s ease,transform var(--dur-fast,.12s) var(--lx-spring),scale .25s var(--lx-spring),background .2s,color .2s} :where(html:not([data-fx-off~="lx"])[data-quality="high"]:not([data-motion="reduce"])) .dock-btn.mic:hover{box-shadow:0 0 0 6px rgb(var(--core-rgb)/.12),0 0 18px -2px rgb(var(--core-rgb)/.35)} :where(html:not([data-fx-off~="lx"])) #chatInputField::placeholder{transition:opacity .35s ease} :where(html:not([data-fx-off~="lx"])) #chatInputField:focus::placeholder{opacity:.35} :where(html:not([data-fx-off~="lx"])) .msg.user{transition:box-shadow .3s ease,border-color .3s ease} :where(html:not([data-fx-off~="lx"])) .msg.user:hover{border-color:rgb(var(--core-rgb)/.4);box-shadow:0 0 18px -8px rgb(var(--core-rgb)/.5)} :where(html:not([data-fx-off~="lx"])) .music-card.playing .mc-play{position:relative} :where(html:not([data-fx-off~="lx"])) .music-card.playing .mc-play::after{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid var(--core);pointer-events:none;opacity:0} :where(html:not([data-fx-off~="lx"])) .music-card .spectrum{transition:opacity .4s ease,filter .6s ease} :where(html:not([data-fx-off~="lx"])) .music-card.playing .spectrum{filter:drop-shadow(0 0 6px rgb(var(--core-rgb)/.45))} :where(html:not([data-fx-off~="lx"])) .art-block{transition:transform .24s var(--mc-ease,ease),box-shadow .4s var(--mc-ease,ease),filter .4s ease,opacity .4s ease,background-image .6s ease,scale .5s var(--lx-ease)} :where(html:not([data-fx-off~="lx"])) .art-block:hover{scale:1.035} :where(html:not([data-fx-off~="lx"])) .seek-thumb{transition:left .5s linear,transform .2s var(--mc-ease,ease),box-shadow .25s ease,background-color .3s,opacity .25s ease,scale .25s var(--lx-spring)} :where(html:not([data-fx-off~="lx"])) .seek-wrap:hover .seek-thumb{scale:1.3;box-shadow:0 0 14px rgb(var(--core-rgb)/.55)} :where(html:not([data-fx-off~="lx"])) .mini-player .mp-btn,:where(html:not([data-fx-off~="lx"])) .mp-btn{transition:color .6s,scale .22s var(--lx-spring)} :where(html:not([data-fx-off~="lx"])) .mp-btn:hover{scale:1.15} :where(html:not([data-fx-off~="lx"])) .mp-btn:active{scale:.9} :where(html:not([data-fx-off~="lx"])) .vol-btn svg{transition:rotate .35s var(--lx-spring)} :where(html:not([data-fx-off~="lx"])) .vol-btn:hover svg{rotate:-9deg} :where(html:not([data-fx-off~="lx"])) .mc-chev{transition:transform .25s var(--mc-ease,ease),color .2s,translate .3s var(--lx-ease)} :where(html:not([data-fx-off~="lx"])) .mc-head:hover .mc-chev{translate:0 2px} :where(html:not([data-fx-off~="lx"])) .music-card{transition:border-color .25s var(--mc-ease,ease),box-shadow .4s var(--mc-ease,ease),translate .45s var(--lx-ease)} :where(html:not([data-fx-off~="lx"])) .music-card:hover{box-shadow:var(--shadow-hover)} :where(html:not([data-fx-off~="lx"])) #page-settings .set-search{transition:border-color .2s,box-shadow .2s,scale .35s var(--lx-ease)} :where(html:not([data-fx-off~="lx"])) .set-search:focus{scale:1.015} :where(html:not([data-fx-off~="lx"])) input[type=range]::-webkit-slider-thumb{transition:scale .2s var(--ease-spring,cubic-bezier(.22,1.45,.36,1)),box-shadow .25s ease} :where(html:not([data-fx-off~="lx"])) input[type=range]:hover::-webkit-slider-thumb{box-shadow:0 0 0 5px rgb(var(--core-rgb)/.16),0 0 14px rgb(var(--core-rgb)/.5)} :where(html:not([data-fx-off~="lx"])) .theme-card::after{content:"";position:absolute;inset:-3px;border-radius:inherit;pointer-events:none;opacity:0;border:1px solid rgb(var(--core-rgb)/.55);box-shadow:0 0 16px rgb(var(--core-rgb)/.35)} :where(html:not([data-fx-off~="lx"])) .set-card-title{transition:translate .35s var(--lx-ease)} :where(html:not([data-fx-off~="lx"])) .set-card:hover .set-card-title{translate:3px 0} :where(html:not([data-fx-off~="lx"])) .cs-mode-btn,:where(html:not([data-fx-off~="lx"])) .sec-seg button{transition:translate .25s var(--lx-ease),border-color .2s,color .2s,background .2s} :where(html:not([data-fx-off~="lx"])) .cs-mode-btn:hover,:where(html:not([data-fx-off~="lx"])) .sec-seg button:hover{translate:0-1px} :where(html:not([data-fx-off~="lx"])) .stat{transition:border-color .2s,transform .15s,box-shadow .35s ease} :where(html:not([data-fx-off~="lx"])) .stat:hover{box-shadow:inset 0-2px 0 rgb(var(--core-rgb)/.7)} :where(html:not([data-fx-off~="lx"])[data-quality="high"]:not([data-motion="reduce"])) .stat:hover{box-shadow:inset 0-2px 0 rgb(var(--core-rgb)/.7),0 0 16px rgb(var(--core-rgb)/.12)} :where(html:not([data-fx-off~="lx"])) .chip{background-image:linear-gradient(rgb(var(--core-rgb)/.12),rgb(var(--core-rgb)/.12));background-repeat:no-repeat;background-size:0% 100%;transition:border-color .2s,color .2s,transform var(--dur-fast,.16s) var(--lx-spring),scale .16s var(--lx-ease),box-shadow .2s,background-size .4s var(--lx-ease)} :where(html:not([data-fx-off~="lx"])) .chip:hover{background-size:100% 100%} :where(html:not([data-fx-off~="lx"])) .toggle{transition:background .25s,scale .3s var(--lx-spring)} :where(html:not([data-fx-off~="lx"])) .toggle:hover{scale:1.07} :where(html:not([data-fx-off~="lx"])) .section-label::after{content:"";display:inline-block;width:48px;height:1px;margin-left:10px;vertical-align:middle;transform-origin:left center;background:linear-gradient(90deg,var(--line),transparent)} :where(html:not([data-fx-off~="lx"])) .info-row b.ok{transition:text-shadow .6s ease;text-shadow:0 0 10px rgb(var(--core-rgb)/.28)} :where(html:not([data-fx-off~="lx"])) .pill-btn{transition:border-color .2s,color .2s,background-color .2s,box-shadow .25s,transform var(--dur-fast,.16s) var(--lx-spring),scale .16s var(--lx-ease),outline-color .3s ease,outline-offset .4s var(--lx-ease);outline:1px solid transparent;outline-offset:0} :where(html:not([data-fx-off~="lx"])) .pill-btn:hover:not(:disabled){outline-color:rgb(var(--core-rgb)/.30);outline-offset:3px} :where(html:not([data-fx-off~="lx"])) .pill-btn.primary{background-image:linear-gradient(115deg,rgb(255 255 255/0) 30%,rgb(255 255 255/.22) 50%,rgb(255 255 255/0) 70%);background-size:250% 100%;background-position:120%0;background-repeat:no-repeat} :where(html:not([data-fx-off~="lx"])) .pill-btn.primary:hover:not(:disabled){background-image:linear-gradient(115deg,rgb(255 255 255/0) 30%,rgb(255 255 255/.22) 50%,rgb(255 255 255/0) 70%);background-position:-20%0;transition:background-position .9s var(--lx-ease),border-color .2s,color .2s,background-color .2s,box-shadow .25s,transform var(--dur-fast,.16s) var(--lx-spring),scale .16s var(--lx-ease),outline-color .3s ease,outline-offset .4s var(--lx-ease)} :where(html:not([data-fx-off~="lx"])) #page-settings .pill-btn{transition:border-color .2s,color .2s,transform var(--dur-fast,.16s) var(--lx-spring),box-shadow .25s,translate .3s var(--lx-ease),scale .16s var(--lx-ease),outline-color .3s ease,outline-offset .4s var(--lx-ease)} :where(html:not([data-fx-off~="lx"])) .pill-btn svg,:where(html:not([data-fx-off~="lx"])) .chip svg{transition:rotate .35s var(--lx-spring),scale .35s var(--lx-spring)} :where(html:not([data-fx-off~="lx"])) .pill-btn:hover svg,:where(html:not([data-fx-off~="lx"])) .chip:hover svg{rotate:8deg;scale:1.12} :where(html:not([data-fx-off~="lx"])) .pill-btn:active:not(:disabled){box-shadow:inset 0 2px 6px rgba(0,0,0,.35)} :where(html:not([data-fx-off~="lx"])) .nav button{transition:color .2s,transform .12s ease-out,text-shadow .3s ease,translate .3s var(--lx-ease)} :where(html:not([data-fx-off~="lx"])) .nav button:hover{translate:0-1px} :where(html:not([data-fx-off~="lx"])) .toast{transition:opacity .22s,transform .22s,box-shadow .2s,scale .3s var(--lx-ease)} :where(html:not([data-fx-off~="lx"])) .toast:hover{scale:1.025} :where(html:not([data-fx-off~="lx"])) .link-btn:hover{text-shadow:0 0 12px rgb(var(--core-rgb)/.5)} :where(html:not([data-fx-off~="lx"])) .dock-btn{transition:box-shadow .2s,transform var(--dur-fast,.12s) var(--lx-spring),scale .25s var(--lx-spring),background .2s,color .2s} :where(html:not([data-fx-off~="lx"])) .dock-btn:hover{scale:1.1} :where(html:not([data-fx-off~="lx"])) .dock-btn:active{scale:.92} :where(html:not([data-fx-off~="lx"])) .mini-orb{transition:background .5s,box-shadow .5s,scale .3s var(--lx-spring)} :where(html:not([data-fx-off~="lx"])) .mini-orb:hover{scale:1.35} @media (prefers-reduced-motion:no-preference){:where(html:not([data-fx-off~="lx"])) .home-greet,:where(html:not([data-fx-off~="lx"])) .cc-greet{animation:lx-aurora-text 11s cubic-bezier(.4,0,.2,1) infinite} :where(html:not([data-fx-off~="lx"])) .qa-btn{animation:lx-rise-in .6s var(--lx-ease) backwards} :where(html:not([data-fx-off~="lx"])) .qa-btn:nth-child(2){animation-delay:70ms} :where(html:not([data-fx-off~="lx"])) .qa-btn:nth-child(3){animation-delay:140ms} :where(html:not([data-fx-off~="lx"])) .qa-btn:nth-child(n+4){animation-delay:210ms} :where(html:not([data-fx-off~="lx"])) #stage::before{animation:lx-orbit 42s linear infinite} :where(html:not([data-fx-off~="lx"])) .cc-bar-fill{animation:lx-gloss 5s cubic-bezier(.4,0,.2,1) infinite} :where(html:not([data-fx-off~="lx"])) .nx-rel{animation:lx-soft-pulse 3.2s ease-in-out infinite} :where(html:not([data-fx-off~="lx"])) .plan-steps li{animation:lx-step-in .5s var(--lx-ease) backwards} :where(html:not([data-fx-off~="lx"])) .plan-steps li:nth-child(2){animation-delay:60ms} :where(html:not([data-fx-off~="lx"])) .plan-steps li:nth-child(3){animation-delay:120ms} :where(html:not([data-fx-off~="lx"])) .plan-steps li:nth-child(4){animation-delay:180ms} :where(html:not([data-fx-off~="lx"])) .plan-steps li:nth-child(n+5){animation-delay:240ms} :where(html:not([data-fx-off~="lx"])) .offline-strip{animation:lx-stripes 1.6s linear infinite} :where(html:not([data-fx-off~="lx"])) .sleep-badge{animation:lx-breathe 3.4s ease-in-out infinite} :where(html:not([data-fx-off~="lx"])) .msg.user{animation-name:lx-msg-user} :where(html:not([data-fx-off~="lx"])) .msg.sara{animation-name:lx-msg-sara} :where(html:not([data-fx-off~="lx"])) .music-card.playing .art-block{animation:lx-float 6s ease-in-out infinite} :where(html:not([data-fx-off~="lx"])) .music-card.playing .mc-play::after{animation:lx-ring-ping 2.6s ease-out infinite} :where(html:not([data-fx-off~="lx"])) .accent-pv{animation:lx-float 5s ease-in-out infinite} :where(html:not([data-fx-off~="lx"])) .theme-card.on::after{animation:lx-halo 3.2s ease-in-out infinite} :where(html:not([data-fx-off~="lx"])) .perf-bar>*{transform-origin:left center;animation:lx-seg-grow .8s var(--lx-ease) backwards} :where(html:not([data-fx-off~="lx"])) .perf-bar>*:nth-child(2){animation-delay:80ms} :where(html:not([data-fx-off~="lx"])) .perf-bar>*:nth-child(3){animation-delay:160ms} :where(html:not([data-fx-off~="lx"])) .perf-bar>*:nth-child(4){animation-delay:240ms} :where(html:not([data-fx-off~="lx"])) .perf-bar>*:nth-child(n+5){animation-delay:320ms} :where(html:not([data-fx-off~="lx"])) .section-label::after{animation:lx-hairline .9s var(--lx-ease) .2s backwards} :where(html:not([data-fx-off~="lx"])) .overlay.open .modal,:where(html:not([data-fx-off~="lx"])) .overlay.open .sheet{animation:lx-open-glow 1s ease-out} } @keyframes lx-spin{to{--lx-a:360deg} } @keyframes lx-aurora-text{0%{background-position:130%0} 34%,100%{background-position:-130%0} } @keyframes lx-rise-in{from{opacity:0;transform:translateY(14px) scale(.96)} } @keyframes lx-orbit{to{transform:rotate(360deg)} } @keyframes lx-gloss{0%{background-position:130%0} 45%,100%{background-position:-30%0} } @keyframes lx-soft-pulse{0%,100%{opacity:.7} 50%{opacity:1} } @keyframes lx-step-in{from{opacity:0;transform:translateX(-10px)} } @keyframes lx-stripes{to{background-position:28px 0} } @keyframes lx-breathe{0%,100%{opacity:.7;transform:scale(.98)} 50%{opacity:1;transform:scale(1.04)} } @keyframes lx-msg-user{0%{opacity:0;transform:translateX(22px) scale(.97)} 65%{opacity:1;transform:translateX(-2px) scale(1.004)} 100%{opacity:1;transform:none} } @keyframes lx-msg-sara{0%{opacity:0;transform:translateX(-16px)} 65%{opacity:1;transform:translateX(2px)} 100%{opacity:1;transform:none} } @keyframes lx-float{0%,100%{translate:0 0} 50%{translate:0-3px} } @keyframes lx-ring-ping{0%{opacity:.5;transform:scale(1)} 80%,100%{opacity:0;transform:scale(1.7)} } @keyframes lx-halo{0%,100%{opacity:.25} 50%{opacity:.9} } @keyframes lx-seg-grow{from{transform:scaleX(0)} } @keyframes lx-hairline{from{transform:scaleX(0);opacity:0} } @keyframes lx-open-glow{0%{box-shadow:0 0 0 0 rgb(var(--core-rgb)/.35)} 100%{box-shadow:0 0 0 18px rgb(var(--core-rgb)/0)} } @media (prefers-reduced-motion:reduce){:where(html:not([data-fx-off~="lx"])) .home-greet,:where(html:not([data-fx-off~="lx"])) .cc-greet{background:none;-webkit-text-fill-color:currentColor} :where(html:not([data-fx-off~="lx"])) #stage::before,:where(html:not([data-fx-off~="lx"])) .clock-card::before{display:none} } /* ============ GROUP "au" -- Detail effects (Aurum) (source: aurum.css, 166 rules; switch off with ) ============ */ :root:where(:not([data-fx-off~="au"])){--au-ease:var(--ease-premium,cubic-bezier(.16,1,.3,1));--au-spring:var(--ease-spring,cubic-bezier(.22,1.45,.36,1))} :where(html:not([data-fx-off~="au"])) .pal-input{transition:border-color .3s ease,box-shadow .3s ease} :where(html:not([data-fx-off~="au"])) .pal-input:focus{border-bottom-color:var(--core);box-shadow:0 1px 0 0 var(--core)} :where(html:not([data-fx-off~="au"])) .pal-item{transition:translate .22s var(--au-ease),background .2s,color .2s,box-shadow .25s} :where(html:not([data-fx-off~="au"])) .pal-item:hover{translate:3px 0} :where(html:not([data-fx-off~="au"])) .pal-item.sel{box-shadow:inset 2px 0 0 var(--core)} :where(html:not([data-fx-off~="au"])) .pal-item small{transition:color .25s} :where(html:not([data-fx-off~="au"])) .pal-item:hover small,:where(html:not([data-fx-off~="au"])) .pal-item.sel small{color:var(--text-soft)} :where(html:not([data-fx-off~="au"])) .pal-item{transition:translate .22s var(--au-ease),background .2s,color .2s,box-shadow .25s,scale .2s var(--au-ease)} :where(html:not([data-fx-off~="au"])) .pal-item:active{scale:.985} :where(html:not([data-fx-off~="au"])) .n-title{transition:translate .3s var(--au-ease)} :where(html:not([data-fx-off~="au"])) .note-row2:hover .n-title{translate:4px 0} :where(html:not([data-fx-off~="au"])) .n-snip{transition:color .3s ease} :where(html:not([data-fx-off~="au"])) .note-row2:hover .n-snip{color:var(--text-soft)} :where(html:not([data-fx-off~="au"])) .n-time{transition:color .3s ease} :where(html:not([data-fx-off~="au"])) .note-row2:hover .n-time{color:var(--text-soft)} :where(html:not([data-fx-off~="au"])) .group-label::after{content:"";display:inline-block;width:32px;height:1px;margin-left:10px;vertical-align:middle;background:linear-gradient(90deg,currentColor,transparent);opacity:.3;transition:width .45s var(--au-ease),opacity .3s} :where(html:not([data-fx-off~="au"])) .group-label:hover::after{width:64px;opacity:.55} :where(html:not([data-fx-off~="au"])) .r-time{transition:color .3s .2s,scale .25s var(--au-spring);transform-origin:right center} :where(html:not([data-fx-off~="au"])) .row:hover .r-time{scale:1.06} :where(html:not([data-fx-off~="au"])) .r-text{transition:color .3s .2s,opacity .4s ease} :where(html:not([data-fx-off~="au"])) .row.done .r-text{opacity:.55} :where(html:not([data-fx-off~="au"])) .row .dot::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:1.5px solid var(--core);opacity:0;pointer-events:none} :where(html:not([data-fx-off~="au"])) .auto-card{transition:border-color .2s,translate .35s var(--au-ease),box-shadow .35s ease} :where(html:not([data-fx-off~="au"])) .auto-card:hover{translate:0-1px;box-shadow:var(--shadow-hover)} :where(html:not([data-fx-off~="au"])) .auto-actions{opacity:.6;transition:opacity .3s ease} :where(html:not([data-fx-off~="au"])) .auto-card:hover .auto-actions,:where(html:not([data-fx-off~="au"])) .auto-card:focus-within .auto-actions{opacity:1} :where(html:not([data-fx-off~="au"])) .a-name{transition:color .25s} :where(html:not([data-fx-off~="au"])) .auto-card:hover .a-name{color:var(--core)} :where(html:not([data-fx-off~="au"])) .rt-step{transition:border-color .2s,translate .25s var(--au-ease)} :where(html:not([data-fx-off~="au"])) .rt-step:hover,:where(html:not([data-fx-off~="au"])) .rt-step:focus-within{border-color:rgb(var(--core-rgb)/.4);translate:2px 0} :where(html:not([data-fx-off~="au"])) .rt-x{transition:rotate .35s var(--au-spring),color .2s,scale .2s} :where(html:not([data-fx-off~="au"])) .rt-x:hover{rotate:90deg;scale:1.15} :where(html:not([data-fx-off~="au"])) .sec-num{transition:border-color .2s,translate .25s var(--au-ease),box-shadow .3s ease} :where(html:not([data-fx-off~="au"])) .sec-num:hover{translate:0-1px;border-color:rgb(var(--core-rgb)/.4);box-shadow:0 10px 22px -14px rgb(var(--core-rgb)/.45)} :where(html:not([data-fx-off~="au"])) .sec-event{transition:translate .25s var(--au-ease)} :where(html:not([data-fx-off~="au"])) .sec-event:hover{translate:3px 0} :where(html:not([data-fx-off~="au"])) .sec-chip{transition:box-shadow .3s ease} :where(html:not([data-fx-off~="au"])) .sec-chip:hover{box-shadow:0 0 12px -2px currentColor} :where(html:not([data-fx-off~="au"])) .sec-mode{transition:border-color .25s,color .25s,translate .25s var(--au-ease)} :where(html:not([data-fx-off~="au"])) .sec-mode:hover{translate:0-1px} :where(html:not([data-fx-off~="au"])) .sec-tool{transition:color .2s} :where(html:not([data-fx-off~="au"])) .sec-event:hover .sec-tool{color:var(--text)} :where(html:not([data-fx-off~="au"])) .sec-block{transition:border-color .3s ease} :where(html:not([data-fx-off~="au"])) .sec-block:hover{border-color:rgb(var(--core-rgb)/.28)} :where(html:not([data-fx-off~="au"])) .app-tile{background-image:linear-gradient(115deg,transparent 30%,rgb(var(--fg-rgb)/.07) 50%,transparent 70%);background-size:250% 100%;background-position:130%0;background-repeat:no-repeat;transition:border-color .2s,transform .15s,background-position .9s var(--au-ease),box-shadow .3s ease,opacity .35s ease,scale .3s var(--au-ease)} :where(html:not([data-fx-off~="au"])) .app-tile:hover{background-position:-30%0} :where(html:not([data-fx-off~="au"])) .apps-search{transition:scale .3s var(--au-ease),border-color .2s,box-shadow .25s} :where(html:not([data-fx-off~="au"])) .apps-search:focus{scale:1.012} :where(html:not([data-fx-off~="au"])) .app-tile:hover{box-shadow:0 10px 26px -14px rgb(var(--core-rgb)/.45)} :where(html:not([data-fx-off~="au"])) .apps-grid:has(.app-tile:hover) .app-tile:not(:hover){opacity:.8;scale:.99} :where(html:not([data-fx-off~="au"])) .tog{transition:opacity .3s ease,translate .25s var(--au-ease)} :where(html:not([data-fx-off~="au"])) .tog-grid:has(.tog:hover) .tog:not(:hover){opacity:.86} :where(html:not([data-fx-off~="au"])) .cs-ring-wrap{filter:drop-shadow(0 0 8px rgb(var(--core-rgb)/.35))} :where(html:not([data-fx-off~="au"])) .set-row{transition:box-shadow .3s ease} :where(html:not([data-fx-off~="au"])) .set-row:has(input:focus,select:focus){box-shadow:inset 2px 0 0 var(--core)} :where(html:not([data-fx-off~="au"])) .s-name{transition:translate .3s var(--au-ease)} :where(html:not([data-fx-off~="au"])) .set-row:hover .s-name{translate:2px 0} :where(html:not([data-fx-off~="au"])) .s-sub{transition:color .3s ease} :where(html:not([data-fx-off~="au"])) .set-row:hover .s-sub{color:var(--text-soft)} :where(html:not([data-fx-off~="au"])) .slider-val{transition:scale .3s var(--au-spring),color .2s;transform-origin:right center} :where(html:not([data-fx-off~="au"])) .slider-wrap:hover .slider-val{scale:1.12;color:var(--core)} :where(html:not([data-fx-off~="au"])) .danger-zone{transition:box-shadow .5s ease} :where(html:not([data-fx-off~="au"])) .danger-zone:hover{box-shadow:inset 0 0 22px -8px rgb(var(--danger-rgb,255 77 94)/.22)} :where(html:not([data-fx-off~="au"])) .tog:hover{translate:2px 0} :where(html:not([data-fx-off~="au"])) .stat{transition:border-color .2s,transform .15s,box-shadow .35s ease,opacity .3s ease} :where(html:not([data-fx-off~="au"])) .stat-grid:has(.stat:hover) .stat:not(:hover){opacity:.84} :where(html:not([data-fx-off~="au"])) .an-kpi{transition:scale .28s var(--ax-ease,cubic-bezier(.22,1,.36,1)),opacity .3s ease,border-color .2s} :where(html:not([data-fx-off~="au"])) .an-kpis:has(.an-kpi:hover) .an-kpi:not(:hover){opacity:.82} :where(html:not([data-fx-off~="au"])) .chip{transition:border-color .2s,color .2s,transform var(--dur-fast,.16s) var(--au-spring),scale .16s var(--au-ease),box-shadow .2s,background-size .4s var(--au-ease),opacity .3s ease} :where(html:not([data-fx-off~="au"])) .chip-row:has(.chip:hover) .chip:not(:hover):not(.on){opacity:.78} :where(html:not([data-fx-off~="au"])) .theme-card{transition:border-color var(--dur-med,.28s),box-shadow var(--dur-med,.28s),transform var(--dur-fast,.16s) var(--ease-premium,ease),color .2s,opacity .3s ease} :where(html:not([data-fx-off~="au"])) .theme-grid:has(.theme-card:hover) .theme-card:not(:hover):not(.on){opacity:.82} :where(html:not([data-fx-off~="au"])) .chat-dock:has(#chatInputField:not(:placeholder-shown)) .dock-btn.send{box-shadow:0 0 0 4px rgb(var(--core-rgb)/.18),0 0 20px -2px rgb(var(--core-rgb)/.5)} :where(html:not([data-fx-off~="au"])) .chat-dock:has(#chatInputField:not(:placeholder-shown)) .dock-btn.send{scale:1.08} :where(html:not([data-fx-off~="au"])) .dock-btn.mic{transition:box-shadow .35s ease,transform var(--dur-fast,.12s) var(--au-spring),scale .25s var(--au-spring),background .2s,color .2s,opacity .3s ease} :where(html:not([data-fx-off~="au"])) .chat-dock:has(#chatInputField:not(:placeholder-shown)) .dock-btn.mic{opacity:.5} :where(html:not([data-fx-off~="au"])) .chat-dock{transition:border-color .28s,box-shadow .28s,opacity .2s,translate .3s var(--au-ease),scale .4s var(--au-ease)} :where(html:not([data-fx-off~="au"])) .chat-dock:focus-within{scale:1.006} :where(html:not([data-fx-off~="au"])) .session-switcher{transition:translate .25s var(--au-ease),border-color .2s} :where(html:not([data-fx-off~="au"])) .session-switcher:hover{translate:0-1px} :where(html:not([data-fx-off~="au"])) .mic-wave{filter:drop-shadow(0 0 6px rgb(var(--core-rgb)/.4))} :where(html:not([data-fx-off~="au"])) .setup-bar-fill{box-shadow:0 0 12px rgb(var(--core-rgb)/.55)} :where(html:not([data-fx-off~="au"])) .audio-close{transition:color .2s,scale .25s var(--au-spring)} :where(html:not([data-fx-off~="au"])) .audio-close:hover{scale:1.12} :where(html:not([data-fx-off~="au"])) .nav-ind::after{content:"";position:absolute;inset:2px;border-radius:inherit;background:var(--core);filter:blur(9px);opacity:.3;z-index:-1;pointer-events:none} :where(html:not([data-fx-off~="au"])) .page-header .page-title::after{box-shadow:0 0 10px rgb(var(--core-rgb)/.5)} html:where(:not([data-fx-off~="au"]))::before{content:"";position:fixed;inset:0;z-index:100;pointer-events:none;opacity:.03;background-image:url(data:image/svg+xml,%3Csvg\ xmlns=%27http://www.w3.org/2000/svg%27\ width=%27160%27\ height=%27160%27%3E%3Cfilter\ id=%27n%27%3E%3CfeTurbulence\ type=%27fractalNoise%27\ baseFrequency=%27.9%27\ numOctaves=%272%27\ stitchTiles=%27stitch%27/%3E%3CfeColorMatrix\ values=%270\ 0\ 0\ 0\ 1\ 0\ 0\ 0\ 0\ 1\ 0\ 0\ 0\ 0\ 1\ 0\ 0\ 0\ .55\ 0%27/%3E%3C/filter%3E%3Crect\ width=%27100%25%27\ height=%27100%25%27\ filter=%27url%28%23n%29%27/%3E%3C/svg%3E);background-size:160px 160px} html:where(:not([data-fx-off~="au"]))::after{content:"";position:fixed;top:-20%;bottom:-20%;left:0;width:28vw;z-index:1;pointer-events:none;opacity:0;background:linear-gradient(100deg,transparent,rgb(var(--core-rgb)/.045),transparent);transform:translateX(-40vw) skewX(-12deg)} :where(html:not([data-fx-off~="au"])) body.sara-active .nav{box-shadow:inset 0 1px 0 rgb(var(--fg-rgb)/.06),0 0 22px -8px rgb(var(--core-rgb)/.4)} :where(html:not([data-fx-off~="au"])) body.sara-active .chat-dock{border-color:rgb(var(--core-rgb)/.35)} :where(html:not([data-fx-off~="au"])) body.sara-speaking .chat-dock{box-shadow:0 0 22px -6px rgb(var(--speak-rgb)/.4)} :where(html:not([data-fx-off~="au"])) body.sara-active .mini-orb{box-shadow:0 0 14px var(--core),0 0 30px rgb(var(--core-rgb)/.45)} :where(html:not([data-fx-off~="au"])) body.focus-mode .nav{opacity:.55} :where(html:not([data-fx-off~="au"])) .page-header{transition:box-shadow .35s ease,opacity 1.2s ease} :where(html:not([data-fx-off~="au"])) body.au-idle .nav{opacity:.45} :where(html:not([data-fx-off~="au"])) body.au-idle .page-header{opacity:.6} :where(html:not([data-fx-off~="au"])) .pm-dust{opacity:.6;transition:opacity 2s ease} :root:where(:not([data-fx-off~="au"])) body.au-idle .pm-dust{opacity:1} :where(html:not([data-fx-off~="au"])) #stage::before{transition:border-color 2s ease} :where(html:not([data-fx-off~="au"])) body.au-idle #stage::before{border-color:rgb(var(--core-rgb)/.32)} :where(html:not([data-fx-off~="au"])) ::-webkit-scrollbar-thumb:active{background:var(--core)} :where(html:not([data-fx-off~="au"])) input[type=range]::-webkit-slider-runnable-track{transition:box-shadow .3s ease} :where(html:not([data-fx-off~="au"])) input[type=range]:hover::-webkit-slider-runnable-track{box-shadow:0 0 12px rgb(var(--core-rgb)/.3)} :where(html:not([data-fx-off~="au"])) .toggle:focus-visible{box-shadow:0 0 0 3px rgb(var(--core-rgb)/.4)} :where(html:not([data-fx-off~="au"])) kbd{border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:0 5px;transition:translate .15s ease,border-bottom-width .15s ease} :where(html:not([data-fx-off~="au"])) kbd:active{translate:0 1px;border-bottom-width:1px} :where(html:not([data-fx-off~="au"])) .nx-title{transition:translate .3s var(--au-ease)} :where(html:not([data-fx-off~="au"])) .next-card:hover .nx-title{translate:3px 0} :where(html:not([data-fx-off~="au"])) .plan-card-title{transition:translate .3s var(--au-ease)} :where(html:not([data-fx-off~="au"])) .plan-card:hover .plan-card-title{translate:3px 0} :where(html:not([data-fx-off~="au"])) .qc-name,:where(html:not([data-fx-off~="au"])) .qc-sub{transition:color .25s} :where(html:not([data-fx-off~="au"])) .qc-tile:hover .qc-name{color:var(--text)} :where(html:not([data-fx-off~="au"])) .qc-tile:hover .qc-sub{color:var(--text-soft)} :where(html:not([data-fx-off~="au"])) .volume-row .vol-x{transition:opacity .2s,rotate .35s var(--au-spring)} :where(html:not([data-fx-off~="au"])) .volume-row .vol-x:hover{rotate:90deg} :where(html:not([data-fx-off~="au"])) .perf-legend>*{transition:opacity .3s ease} :where(html:not([data-fx-off~="au"])) .perf-legend:has(>*:hover)>*:not(:hover){opacity:.6} :where(html:not([data-fx-off~="au"])) .mr-fg{filter:drop-shadow(0 0 4px rgb(var(--core-rgb)/.5))} :where(html:not([data-fx-off~="au"])) .tab{transition:color .2s,scale .2s var(--au-spring)} :where(html:not([data-fx-off~="au"])) .tab:active{scale:.95} :where(html:not([data-fx-off~="au"])) .acc-note{transition:color .3s ease} :where(html:not([data-fx-off~="au"])) .acc-note:hover{color:var(--text-soft)} @media (prefers-reduced-motion:no-preference){:where(html:not([data-fx-off~="au"])) .pal-overlay.open .pal{animation:au-ring-out 1s ease-out} :where(html:not([data-fx-off~="au"])) .pal-overlay.open .pal-foot{animation:au-rise-sm .5s var(--au-ease) .18s backwards} :where(html:not([data-fx-off~="au"])) .pal-empty{animation:au-float-soft 4s ease-in-out infinite} :where(html:not([data-fx-off~="au"])) .group-label.overdue{animation:au-soft-pulse 2.8s ease-in-out infinite} :where(html:not([data-fx-off~="au"])) .row.completing .dot::after{animation:au-dot-ring .6s ease-out} :where(html:not([data-fx-off~="au"])) .mode-note{animation:au-rise-sm .6s var(--au-ease) backwards} :where(html:not([data-fx-off~="au"])) .rt-empty{animation:au-float-soft 4.5s ease-in-out infinite} :where(html:not([data-fx-off~="au"])) .page.stagger-in .page-body .auto-card{animation:au-rise-sm .5s var(--au-ease) backwards} :where(html:not([data-fx-off~="au"])) .page.stagger-in .page-body .auto-card:nth-of-type(2){animation-delay:60ms} :where(html:not([data-fx-off~="au"])) .page.stagger-in .page-body .auto-card:nth-of-type(3){animation-delay:120ms} :where(html:not([data-fx-off~="au"])) .page.stagger-in .page-body .auto-card:nth-of-type(n+4){animation-delay:180ms} :where(html:not([data-fx-off~="au"])) .sec-warn{animation:au-soft-pulse 3s ease-in-out infinite} :where(html:not([data-fx-off~="au"])) .sec-mode.sec-armed{animation:au-soft-pulse 2.6s ease-in-out infinite} :where(html:not([data-fx-off~="au"])) .app-tile:hover svg{animation:au-bob .9s ease} :where(html:not([data-fx-off~="au"])) .cs-themes button:hover{animation:au-pop .45s var(--au-spring)} :where(html:not([data-fx-off~="au"])) .just-picked{animation:au-ring-out .9s ease-out} :where(html:not([data-fx-off~="au"])) .overlay.open .cs-greet,:where(html:not([data-fx-off~="au"])) .overlay.open .cs-sub{animation:au-rise-sm .5s var(--au-ease) .1s backwards} :where(html:not([data-fx-off~="au"])) .overlay.open .cs-panel{animation:au-rise-sm .55s var(--au-ease) .05s backwards} :where(html:not([data-fx-off~="au"])) .overlay.open .cs-controls .pill-btn{animation:au-pop-in .45s var(--au-spring) .2s backwards} :where(html:not([data-fx-off~="au"])) .overlay.open .cs-controls .pill-btn:nth-child(2){animation-delay:.27s} :where(html:not([data-fx-off~="au"])) .overlay.open .cs-controls .pill-btn:nth-child(n+3){animation-delay:.34s} :where(html:not([data-fx-off~="au"])) .m-error{animation:au-shake .45s ease} :where(html:not([data-fx-off~="au"])) .overlay.open .m-actions .pill-btn{animation:au-pop-in .45s var(--au-spring) .15s backwards} :where(html:not([data-fx-off~="au"])) .overlay.open .m-actions .pill-btn:nth-child(2){animation-delay:.22s} :where(html:not([data-fx-off~="au"])) .overlay.open .m-sub{animation:au-rise-sm .5s var(--au-ease) .12s backwards} :where(html:not([data-fx-off~="au"])) .setup-log>*{animation:au-log-in .35s var(--au-ease) backwards} :where(html:not([data-fx-off~="au"])) .overlay.open .sheet-head{background:linear-gradient(90deg,rgb(var(--core-rgb)/.45),transparent)0 100%/100% 1px no-repeat;animation:ax-sheet-child .45s var(--ax-ease,cubic-bezier(.22,1,.36,1)) backwards,au-line-draw .9s var(--au-ease) .15s backwards} :where(html:not([data-fx-off~="au"])) body.sara-active .mini-orb{animation-duration:1.3s} :where(html:not([data-fx-off~="au"])) .today-card :is(.tc-top,.tc-cond,.tc-sub,.tc-next){animation:au-rise-sm .55s var(--au-ease) backwards} :where(html:not([data-fx-off~="au"])) .today-card .tc-cond{animation-delay:.06s} :where(html:not([data-fx-off~="au"])) .today-card .tc-sub{animation-delay:.12s} :where(html:not([data-fx-off~="au"])) .today-card .tc-next{animation-delay:.18s} :where(html:not([data-fx-off~="au"])) .transport .t-play:hover{animation:au-pulse-ring .9s ease-out} :where(html:not([data-fx-off~="au"])) .audio-btn:hover{animation:au-pop .4s var(--au-spring)} :where(html:not([data-fx-off~="au"])) .sleep-options button:hover{animation:au-pop .4s var(--au-spring)} :where(html:not([data-fx-off~="au"])) .ap-chip:hover,:where(html:not([data-fx-off~="au"])) .ap-btn:hover{animation:au-pop .4s var(--au-spring)} :where(html:not([data-fx-off~="au"])) .overlay.open .weather-hero>*{animation:au-rise-sm .5s var(--au-ease) backwards} :where(html:not([data-fx-off~="au"])) .overlay.open .weather-hero>*:nth-child(2){animation-delay:.07s} :where(html:not([data-fx-off~="au"])) .overlay.open .weather-hero>*:nth-child(3){animation-delay:.14s} :where(html:not([data-fx-off~="au"])) .overlay.open .weather-hero>*:nth-child(n+4){animation-delay:.21s} :where(html:not([data-fx-off~="au"])) .src-badge:hover{animation:au-pop .4s var(--au-spring)} } @keyframes au-ring-out{0%{box-shadow:0 0 0 0 rgb(var(--core-rgb)/.4)} 100%{box-shadow:0 0 0 20px rgb(var(--core-rgb)/0)} } @keyframes au-rise-sm{from{opacity:0;transform:translateY(8px)} } @keyframes au-float-soft{0%,100%{translate:0 0} 50%{translate:0-4px} } @keyframes au-soft-pulse{0%,100%{opacity:.78} 50%{opacity:1} } @keyframes au-dot-ring{0%{opacity:.8;transform:scale(1)} 100%{opacity:0;transform:scale(2.2)} } @keyframes au-shake{0%,100%{translate:0 0} 20%{translate:-5px 0} 40%{translate:5px 0} 60%{translate:-3px 0} 80%{translate:3px 0} } @keyframes au-bob{0%,100%{translate:0 0} 35%{translate:0-3px} 70%{translate:0 1px} } @keyframes au-pop{0%{scale:1} 45%{scale:1.07} 100%{scale:1} } @keyframes au-pop-in{from{opacity:0;transform:scale(.9)} } @keyframes au-log-in{from{opacity:0;transform:translateX(-8px)} } @keyframes au-line-draw{from{background-size:0 1px} } @keyframes au-pulse-ring{0%{box-shadow:0 0 0 0 rgb(var(--core-rgb)/.5)} 100%{box-shadow:0 0 0 14px rgb(var(--core-rgb)/0)} } /* ============ GROUP "p6" -- Motion polish (GUI audit, phase 6) (switch off with ; always off in the Low tier) ============ transform / opacity only, no new infinite loops. Already present before this group (so not added again): orb state fades (halo .7s, sweep .6s, canvas colour easing), live mic / voice level on the orb, toast check-mark draw, number roll, chat chunk fade, spring-curve buttons, page slides. */ @media (prefers-reduced-motion:no-preference){ /* P6-3: staggered entrance for list rows and the Apps grid, only inside the short .stagger-in window after a page switch (fx.js); first 8 items, 40 ms apart */ :where(html:not([data-fx-off~="p6"]):not([data-quality="low"]):not([data-motion="reduce"])) .page.stagger-in .page-body .app-tile{animation:rowIn .34s var(--ease-premium,cubic-bezier(.22,1,.36,1)) both} :where(html:not([data-fx-off~="p6"]):not([data-quality="low"]):not([data-motion="reduce"])) .page.stagger-in .page-body :is(.row,.app-tile):nth-child(2){animation-delay:40ms} :where(html:not([data-fx-off~="p6"]):not([data-quality="low"]):not([data-motion="reduce"])) .page.stagger-in .page-body :is(.row,.app-tile):nth-child(3){animation-delay:80ms} :where(html:not([data-fx-off~="p6"]):not([data-quality="low"]):not([data-motion="reduce"])) .page.stagger-in .page-body :is(.row,.app-tile):nth-child(4){animation-delay:120ms} :where(html:not([data-fx-off~="p6"]):not([data-quality="low"]):not([data-motion="reduce"])) .page.stagger-in .page-body :is(.row,.app-tile):nth-child(5){animation-delay:160ms} :where(html:not([data-fx-off~="p6"]):not([data-quality="low"]):not([data-motion="reduce"])) .page.stagger-in .page-body :is(.row,.app-tile):nth-child(6){animation-delay:200ms} :where(html:not([data-fx-off~="p6"]):not([data-quality="low"]):not([data-motion="reduce"])) .page.stagger-in .page-body :is(.row,.app-tile):nth-child(7){animation-delay:240ms} :where(html:not([data-fx-off~="p6"]):not([data-quality="low"]):not([data-motion="reduce"])) .page.stagger-in .page-body :is(.row,.app-tile):nth-child(n+8){animation-delay:280ms} /* P6-10: hover depth on the Home cards: 2 px lift + the existing hover shadow (no blur). `translate` is independent of the tilt's `transform`. */ :where(html:not([data-fx-off~="p6"]):not([data-quality="low"]):not([data-motion="reduce"])) :is(.today-card,.next-card,.plan-card,.home-activity){transition:translate .28s var(--ease-premium,cubic-bezier(.22,1,.36,1)),box-shadow .28s ease} :where(html:not([data-fx-off~="p6"]):not([data-quality="low"]):not([data-motion="reduce"])) :is(.today-card,.next-card,.plan-card,.home-activity):hover{translate:0 -2px;box-shadow:var(--shadow-hover)} /* P6-7: after start-up the orb eases in (scale .85 -> 1, fade) once; the class is added by ui.js finishBoot() and removed again */ :where(html:not([data-fx-off~="p6"]):not([data-quality="low"]):not([data-motion="reduce"])) #stage.orb-enter{animation:orbEnter .6s var(--ease-premium,cubic-bezier(.22,1,.36,1)) both} } @keyframes orbEnter{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:none}} /* ==== style/settings/router-view.css ==== */ /* ========================================================================== router-view.css -- Settings > Smart routing card. Markup: index.html #grp-router. JS: js/router-view.js. Token colours only. ========================================================================== */ .rt-block{display:flex;flex-direction:column;gap:11px;min-width:0;} .rt-seg{display:flex;flex-wrap:wrap;gap:6px;min-width:0;} .rt-mode{flex:1 1 80px;min-width:0;padding:8px 10px;background:var(--panel-2);border:1px solid var(--line);border-radius:10px;color:var(--text-soft);font:inherit;font-size:12.5px;cursor:pointer;} .rt-mode[aria-pressed="true"]{border-color:var(--core);color:var(--text);} .rt-mode:disabled{opacity:.45;cursor:not-allowed;} .rt-mode:focus-visible{outline:2px solid var(--core);outline-offset:2px;} .rt-gate,.rt-note{color:var(--warning);font-size:12px;overflow-wrap:anywhere;} .rt-note{color:var(--danger);} .rt-empty{color:var(--muted);font-size:12.5px;overflow-wrap:anywhere;} .rt-usage{display:flex;flex-direction:column;gap:6px;min-width:0;} .rt-bar-row{display:grid;grid-template-columns:minmax(0,96px) minmax(0,1fr) minmax(0,40px);align-items:center;gap:8px;min-width:0;} .rt-bar-name{font-size:12px;color:var(--text-soft);overflow-wrap:anywhere;min-width:0;} .rt-track{display:block;height:8px;background:var(--panel-2);border:1px solid var(--line);border-radius:999px;overflow:hidden;min-width:0;} .rt-fill{display:block;height:100%;width:var(--rt-w,0%);background:var(--core);border-radius:999px;} .rt-bar-count{font-size:12px;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums;} .rt-legend{display:flex;flex-wrap:wrap;gap:6px;min-width:0;} .rt-chip{padding:2px 9px;border:1px solid var(--line);border-radius:999px;font-size:11px;color:var(--muted);overflow-wrap:anywhere;max-width:100%;} .rt-nums{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;} .rt-stat{display:flex;flex-direction:column;gap:3px;padding:10px 12px;background:var(--panel-2);border:1px solid var(--line);border-radius:10px;min-width:0;} .rt-stat b{font-size:20px;font-weight:500;color:var(--text);font-variant-numeric:tabular-nums;overflow-wrap:anywhere;} .rt-stat span{font-size:11px;color:var(--muted);overflow-wrap:anywhere;} .rt-progress{font-size:12.5px;color:var(--muted);overflow-wrap:anywhere;} .rt-reset{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-width:0;} .rt-confirm{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-width:0;font-size:12.5px;color:var(--text-soft);overflow-wrap:anywhere;} .rt-btn{padding:6px 12px;background:var(--panel-2);border:1px solid var(--line);border-radius:10px;color:var(--text-soft);font:inherit;font-size:12.5px;cursor:pointer;} .rt-btn:hover,.rt-btn:focus-visible{color:var(--text);border-color:var(--core);} .rt-btn:focus-visible{outline:2px solid var(--core);outline-offset:2px;} .rt-danger{color:var(--danger);border-color:var(--danger);} @media (max-width:360px){ .rt-nums{grid-template-columns:minmax(0,1fr);} .rt-bar-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,32px);} } @media (max-width:480px){ .rt-stat{padding:8px;} .rt-stat b{font-size:17px;} } /* ==== style/core/flow.css ==== */ /* ========================================================================== flow.css -- smoothness pass. Loads after motion-pack.css (order in assets.json). Theme-independent. Everything here removes cost from scrolling / dragging / typing; nothing changes layout or behaviour. ========================================================================== */ /* 1) Permanent surfaces (dock, home cards) no longer use backdrop-filter at all: the slowly drifting glow behind them forced a re-blur every frame (measured: GPU 15% -> ~5% idle on Home). Only overlays / palette / toasts blur, while they are open. */ :root{--glass-blur:10px;} /* the sticky Settings rail sat on top of the scrolling page with a live blur -> use a solid-ish panel instead */ #page-settings .set-rail{backdrop-filter:none;-webkit-backdrop-filter:none;background:color-mix(in srgb,var(--panel) 94%,transparent);} /* 2) The scroll edge-fade is a CSS mask on the SCROLLER: it was active almost the whole time you scroll, which forces the whole page to be re-masked every frame. Dropped for the big scrollers (small lists keep it). */ .page-body.edge-fade.edge-on,.chat-log.edge-fade.edge-on{-webkit-mask-image:none;mask-image:none;} /* 3) Streaming text: a blur filter on every new chunk is very expensive -> plain fade */ @keyframes chunkIn{from{opacity:.35;}to{opacity:1;}} /* 4) Dragging a sheet: my open-transition (.6s) was winning over the "follow the pointer" rule -> sheets lagged behind the finger */ .overlay.sheet-dragging .sheet,.overlay.sheet-dragging .modal{transition:none !important;} /* 5) Depth recede: group-opacity on the whole page (with blurred children) forces an offscreen surface for as long as a sheet is open -> scale only */ body.pm-overlay-open .page.active{scale:.985;opacity:1;} /* 6) Beams: one single lap (on focus / hover) instead of an endless repaint loop while you type or hover */ .chat-dock::before{animation:none;} .chat-dock:focus-within::before{animation:pm-spin 2.6s cubic-bezier(.4,0,.2,1) 1 both;opacity:1;} .clock-card::before{animation:none;} .clock-card:hover::before{opacity:1;animation:lx-spin 3s cubic-bezier(.4,0,.2,1) 1 both;} /* 7) Fullscreen film grain + sweep layers removed (extra full-screen composited layers on top of everything) */ html::before,html::after{display:none !important;} /* 8) Hundreds of rows animating in at once on long pages (Settings!) made page switches stutter -> only tiles / chips / buttons animate in */ .set-row,.info-row,.acc-note{animation:none !important;} /* 9) While you scroll or drag, the ambient decoration rests (set by js/fx/motion-pack.js) */ html.is-scrolling body::before,html.is-dragging body::before, html.is-scrolling #stage::before,html.is-dragging #stage::before, html.is-scrolling .mini-orb::after,html.is-dragging .mini-orb::after{animation-play-state:paused;} html.is-dragging .pm-aura{opacity:0;} /* ==== style/fx/quality.css ==== */ /* ========================================================================== quality.css -- Visual quality tiers (set by js/quality.js on ) + FPS meter. Load LAST (after flow.css). ========================================================================== */ /* ---- HIGH: everything on (permanent surfaces stay blur-free in every tier, see flow.css) ---- */ html[data-quality="high"]{--glass-blur:14px;} /* ---- the 42 s orbit ring around the orb is a High-tier extra (P2-4); it is a permanent loop on the most-viewed page ---- */ html:not([data-quality="high"]) #stage::before{animation:none;} /* ---- BALANCED: no floating dust (3D tilt is switched off in JS) ---- */ html[data-quality="balanced"] .pm-dust{display:none;} /* ---- LOW: no live blur, no ambient layers, no decorative loops ---- */ html[data-quality="low"]{--glass-blur:0px;} html[data-quality="low"] :is(.glass,.nav,.overlay,.pal-overlay,.clock-card,#page-settings .set-rail){backdrop-filter:none !important;-webkit-backdrop-filter:none !important;} html[data-quality="low"] :is(.glass,.nav){background:var(--panel);} html[data-quality="low"] .overlay,html[data-quality="low"] .pal-overlay{background:rgb(var(--void-rgb,5 8 12) / .78);} html[data-quality="low"] body::before,html[data-quality="low"] #stage::before{display:none;} html[data-quality="low"] :is(.pm-aura,.pm-dust,.set-fx,.set-edge){display:none;} html[data-quality="low"] .gl-sheen::after{display:none;} html[data-quality="low"] :is(.home-greet,.cc-greet,.cc-bar-fill,.nx-rel,.sleep-badge,.offline-strip,.accent-pv,.pal-empty,.rt-empty,.mini-orb::after,.theme-card.on::after,.music-card.playing .art-block,.music-card.playing .mc-play::after,.today-card::before,.next-card::before,.plan-card::before,.home-activity::before){animation:none !important;} html[data-quality="low"] .page{animation-duration:.18s;} html[data-quality="low"] body.pm-overlay-open .page.active{scale:1;} /* ---- FPS meter (developer mode) ---- */ .fps-hud{position:fixed;left:10px;top:10px;z-index:300;font:600 11px/1.45 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;padding:6px 10px;border-radius:9px; background:rgba(0,0,0,.74);color:#9fe6b0;border:1px solid rgba(255,255,255,.14);cursor:pointer;user-select:none;white-space:pre;letter-spacing:.02em;} .fps-hud.warn{color:#ffd166;} .fps-hud.bad{color:#ff7a7a;} .fps-hud div:first-child{font-size:13px;} /* ---- Fine-tune effects panel ---- */ .fx-panel{max-width:520px;margin:10px 0;border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:2px 14px 10px;} .fx-panel>summary{cursor:pointer;padding:12px 0 10px;font-size:13px;font-weight:600;color:var(--text);list-style:none;} .fx-panel>summary::-webkit-details-marker{display:none;} .fx-panel>summary::after{content:'\25B8';float:right;color:var(--muted);transition:rotate .25s ease;} .fx-panel[open]>summary::after{rotate:90deg;} /* ---- motion tiers (redesign spec 4.5) ---- Low : no stagger, no hover lift, no glow Balanced : stagger + hover lift, no glow High : + glow on hover, spring on the page indicator, count-up numbers (js/fx/quality.js turns 'numberroll' off below High) Reduce motion (the OS setting or Settings > Accessibility; both set ): no hover lift and no glow either. The hover glows themselves are written as :where(html[data-quality="high"]:not([data-motion="reduce"])) rules next to their components. */ html:is(:not([data-quality="high"]),[data-motion="reduce"]) body{--shadow-hover:var(--shadow-hover-flat);} html:not([data-quality="high"]) .nav-ind{transition-timing-function:var(--ease-premium);} html:not([data-quality="high"]) body:not(.sara-active) .mini-orb,html:not([data-quality="high"]) body:not(.sara-active) .mini-orb::after{animation:none;} /* the header status dot is still while Sara sleeps (two endless loops on every page cost ~2-4 % CPU, Phase 7 measure); it pulses again when she is active */ html[data-quality="low"] :is(.page,.overlay) :not(.dot){animation-delay:0s !important;} /* everything enters together (the typing dots keep their rhythm) */ html:is([data-quality="low"],[data-motion="reduce"]) :is(button,[role="button"],a,.card,.gl-on,.chip,.row,.stat,.toast,.rt-tpl,.auto-card,.app-tile,.qc-tile,.mode-tile,.theme-card,.chat-starter,.sk-chip,.set-row,.today-card,.next-card,.plan-card,.usage-card,.clock-card,.home-activity):hover:not(:active){translate:none;scale:none;} html:is([data-quality="low"],[data-motion="reduce"]) :is(.pill-btn,.chip,.dock-btn,.mc-play,.t-play,.theme-card,.stat,.app-tile):hover:not(:active){transform:none;} /* ==== style/settings/settings-presets.css ==== */ /* ========================================================================== settings-plus.css -- styles for js/settings-plus.js (custom theme editor, presets, export/import dialogs). Load LAST. ========================================================================== */ /* ---------------------------------------------------------------- custom theme editor */ .cx-box{display:flex;flex-direction:column;gap:12px;max-width:520px;margin:6px 0 10px;} .cx-field{display:flex;align-items:center;gap:12px;} .cx-lbl{width:96px;font-size:13px;color:var(--text-soft);} .cx-field input[type=color]{width:44px;height:30px;padding:0;border:1px solid var(--line);border-radius:8px;background:var(--panel-2);cursor:pointer;} .cx-field input[type=color]::-webkit-color-swatch-wrapper{padding:3px;} .cx-field input[type=color]::-webkit-color-swatch{border:none;border-radius:5px;} .cx-hex{font:12px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--muted);} .cx-sw{display:flex;gap:0;height:30px;border-radius:9px;overflow:hidden;border:1px solid var(--line);} .cx-sw i{flex:1;display:block;} .cx-note{font-size:11.5px;color:var(--muted);line-height:1.45;} /* ---------------------------------------------------------------- presets */ .sx-presets{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px;max-width:640px;margin-top:8px;} .sx-preset{display:flex;flex-direction:column;gap:12px;justify-content:space-between;border:1px solid var(--line);background:var(--panel);border-radius:12px;padding:12px 12px 10px; transition:border-color .2s ease,box-shadow .3s ease,translate .3s var(--ease-premium,cubic-bezier(.16,1,.3,1));} .sx-preset:hover{border-color:rgb(var(--core-rgb) / .4);translate:0 -1px;} .sx-preset.on{border-color:rgb(var(--core-rgb) / .6);box-shadow:inset 0 0 0 1px rgb(var(--core-rgb) / .25),0 0 22px -10px rgb(var(--core-rgb) / .5);} .sx-pname{font-size:13.5px;font-weight:600;color:var(--text);} .sx-preset.on .sx-pname{color:var(--core);} .sx-pdesc{font-size:11.5px;line-height:1.45;color:var(--muted);margin-top:3px;} .sx-preset .pill-btn{align-self:flex-start;} .sx-note{font-size:12px;color:var(--muted);line-height:1.5;max-width:560px;margin-bottom:10px;} /* ---------------------------------------------------------------- dialogs */ .sx-back{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:20px;background:rgb(var(--void-rgb,5 8 12) / .7);opacity:0;transition:opacity .22s ease;} .sx-back.open{opacity:1;} .sx-dialog{width:min(560px,100%);max-height:min(86vh,720px);display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-hover,0 24px 60px -20px rgba(0,0,0,.7)); translate:0 14px;transition:translate .38s var(--ease-premium,cubic-bezier(.16,1,.3,1));} .sx-back.open .sx-dialog{translate:0 0;} .sx-dhead{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 6px;} .sx-dtitle{font-size:15px;font-weight:600;color:var(--text);} .sx-x{border:none;background:none;color:var(--muted);font-size:22px;line-height:1;width:28px;height:28px;border-radius:8px;cursor:pointer;transition:color .15s ease,background .15s ease;} .sx-x:hover{color:var(--text);background:var(--panel-2);} .sx-dbody{padding:4px 16px 8px;overflow-y:auto;} .sx-p{font-size:12.5px;line-height:1.55;color:var(--muted);margin:0 0 10px;} .sx-ta{width:100%;box-sizing:border-box;resize:vertical;font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:var(--panel-2);color:var(--text);border:1px solid var(--line);border-radius:10px;padding:10px 12px;outline:none;} .sx-ta:focus{border-color:var(--core);box-shadow:0 0 0 3px rgb(var(--core-rgb) / .14);} .sx-file{margin-top:10px;font-size:12px;color:var(--text-soft);} .sx-out{margin-top:12px;} .sx-msg{font-size:12.5px;color:var(--text-soft);margin:4px 0 6px;} .sx-msg.bad{color:var(--danger);} .sx-list{margin:0;padding:0 0 0 18px;font-size:12.5px;line-height:1.7;color:var(--text-soft);} .sx-list b{color:var(--text);font-weight:600;} .sx-skip{font-size:11.5px;color:var(--muted);margin-top:8px;} .sx-dfoot{display:flex;justify-content:flex-end;gap:10px;padding:10px 16px 14px;} html[data-quality="low"] .sx-dialog,html[data-quality="low"] .sx-back{transition:none;translate:0 0;} @media (prefers-reduced-motion:reduce){.sx-dialog,.sx-back{transition:none;translate:0 0;}} /* ==== style/shared/a11y.css ==== */ /* ========================================================================== a11y-plus.css -- styles for js/a11y-plus.js: live region, shortcuts dialog, Accessibility card, HIGH CONTRAST, reduce-motion override, strong focus ring. Load LAST. attributes set by the script: data-contrast="high", data-lum="dark|light" (from the active theme), data-motion="reduce", data-focus="strong", data-uiscale="85..150". ========================================================================== */ .sr-only{position:absolute !important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;} /* ---------------------------------------------------------------- shortcuts dialog */ .ax-back{position:fixed;inset:0;z-index:130;display:grid;place-items:center;padding:20px;background:rgb(var(--void-rgb,5 8 12) / .72);opacity:0;transition:opacity .22s ease;} .ax-back.open{opacity:1;} .ax-dialog{width:min(620px,100%);max-height:min(86vh,720px);display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-hover,0 24px 60px -20px rgba(0,0,0,.7)); translate:0 14px;transition:translate .38s var(--ease-premium,cubic-bezier(.16,1,.3,1));} .ax-back.open .ax-dialog{translate:0 0;} .ax-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 6px;} .ax-title{font-size:15px;font-weight:600;color:var(--text);} .ax-x{border:none;background:none;color:var(--muted);font-size:22px;line-height:1;width:30px;height:30px;border-radius:8px;cursor:pointer;transition:color .15s ease,background .15s ease;} .ax-x:hover{color:var(--text);background:var(--panel-2);} .ax-body{padding:4px 18px 16px;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:6px 28px;} .ax-h{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin:14px 0 6px;font-weight:600;} .ax-row{display:flex;align-items:baseline;gap:12px;padding:5px 0;border-top:1px solid var(--line);} .ax-row:first-of-type{border-top:none;} .ax-keys{flex:none;min-width:92px;} .ax-desc{font-size:12.5px;color:var(--text-soft);line-height:1.4;} kbd{font:600 11px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;padding:3px 6px;border:1px solid var(--line);border-bottom-width:2px;border-radius:6px;background:var(--panel-2);color:var(--text);} /* ---------------------------------------------------------------- Accessibility card */ .ax-size{display:flex;align-items:center;gap:14px;max-width:520px;margin:6px 0 8px;} .ax-size input[type=range]{flex:1;} .ax-sizeval{width:48px;text-align:right;font-variant-numeric:tabular-nums;font-size:13px;color:var(--text);} .ax-confirm{position:fixed;left:50%;top:18px;translate:-50% 0;z-index:140;display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:12px;background:var(--panel); border:1px solid rgb(var(--core-rgb) / .5);box-shadow:var(--shadow-hover,0 14px 34px -14px rgba(0,0,0,.7));font-size:13px;color:var(--text);animation:axConfirm .3s var(--ease-premium,cubic-bezier(.16,1,.3,1));} .ax-confirm[hidden]{display:none;} @keyframes axConfirm{from{opacity:0;translate:-50% -10px;}} /* ---------------------------------------------------------------- HIGHER CONTRAST (works on top of every theme) */ html[data-contrast="high"][data-lum="dark"]{--text:#ffffff;--text-soft:#f1f1f1;--muted:#d4d4d4;--faint:#a9a9a9;--line:#8c95a6;--glass-border:rgb(255 255 255 / .6);} html[data-contrast="high"][data-lum="light"]{--text:#000000;--text-soft:#0f0f0f;--muted:#2a2a2a;--faint:#4d4d4d;--line:#3b3b3b;--glass-border:rgb(0 0 0 / .65);} html[data-contrast="high"]{--glass-bg:var(--panel);} html[data-contrast="high"] *{backdrop-filter:none !important;-webkit-backdrop-filter:none !important;} html[data-contrast="high"] body::before,html[data-contrast="high"] #stage::before,html[data-contrast="high"] :is(.pm-aura,.pm-dust,.home-sky,.orb-fx){display:none !important;} html[data-contrast="high"] :is(.pill-btn,.chip,.set-card,.toggle,input,select,textarea,.auto-card,.rt-tpl,.sx-preset){border-color:var(--line);} html[data-contrast="high"] :is(a,.link-btn){text-decoration:underline;text-underline-offset:3px;} html[data-contrast="high"] :disabled{opacity:.75;} html[data-contrast="high"] .toggle:not(.on){background:var(--panel-2);border-color:var(--text-soft);} html[data-contrast="high"] ::selection{background:var(--text);color:var(--void);} /* ---------------------------------------------------------------- strong focus ring */ html[data-contrast="high"] :focus-visible,html[data-focus="strong"] :focus-visible{outline:3px solid var(--core) !important;outline-offset:3px !important;box-shadow:0 0 0 6px rgb(var(--void-rgb,0 0 0) / .9) !important;} /* ---------------------------------------------------------------- reduce motion override (the OS setting is honoured by every file already) */ html[data-motion="reduce"] *,html[data-motion="reduce"] *::before,html[data-motion="reduce"] *::after{ animation-duration:.001ms !important;animation-delay:0s !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;transition-delay:0s !important;scroll-behavior:auto !important;} html[data-motion="reduce"] :is(.pm-aura,.pm-dust,.pm-spark,.orb-fx,.pm-edge,.pm-progress){display:none !important;} @media (prefers-reduced-motion:reduce){.ax-dialog,.ax-back{transition:none;translate:0 0;}.ax-confirm{animation:none;}} /* F12: What's new sheet (js/shared/whats-new.js) */ .wn-dialog{width:min(460px,100%);} .wn-body{display:block;} .wn-row{flex-direction:column;gap:2px;padding:9px 0;} .wn-t{font-size:13.5px;font-weight:600;color:var(--text);} .wn-d{font-size:12.5px;line-height:1.45;color:var(--text-soft);} .wn-foot{display:flex;justify-content:flex-end;padding:4px 18px 16px;} /* ==== style/shared/empty-states.css ==== */ /* empty-plus.css -- styles for js/empty-plus.js (empty + error states). Load LAST. */ .es{max-width:640px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;padding:30px 12px 26px;color:var(--muted);} .es-svg{width:84px;height:84px;color:var(--muted);flex:none;} .es-svg *{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;} .es-svg .a{stroke:var(--core);} .es-tx{display:flex;flex-direction:column;align-items:center;gap:6px;} .es-title{font-size:14.5px;font-weight:600;color:var(--text);} .es-text{font-size:12.5px;line-height:1.55;max-width:360px;} .es .pill-btn{margin-top:8px;} .es.error .es-svg .a{stroke:var(--danger);} .es.compact{flex-direction:row;text-align:left;padding:10px 4px;gap:12px;} .es.compact .es-svg{width:34px;height:34px;} .es.compact .es-title{font-size:13px;font-weight:400;color:var(--muted);} .es-retry{margin-left:8px;} @media (prefers-reduced-motion:no-preference){.es:not(.compact) .es-svg{animation:esFloat 5s ease-in-out infinite;}} @keyframes esFloat{0%,100%{translate:0 0;}50%{translate:0 -4px;}} html[data-quality="low"] .es-svg{animation:none;} /* ---- skeleton placeholders (js/shared/skeleton.js) ---- */ .sk-slow{font-size:12px;color:var(--muted);padding:10px 2px;} .tc-temp .skel-temp{width:58px;height:26px;display:inline-block;vertical-align:middle;border-radius:8px;} /* ==== style/shared/guide.css ==== */ /* ========================================================================== guide.css -- the quick-action ring on the orb (js/home/radial.js, F6) and the spotlight tour (js/shared/tour.js, F5). transform / opacity only; no motion under reduced motion. Token colours only. ========================================================================== */ /* ---------------------------------------------------------------- F6 radial menu */ .rm{position:fixed;inset:0;z-index:70;background:transparent;} .rm-item{ position:absolute;left:var(--cx);top:var(--cy);width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%; display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text); background:var(--panel);border:1px solid var(--glass-border,var(--line));box-shadow:var(--shadow-hover); transform:translate(0,0) scale(.4);opacity:0; } .rm.open .rm-item{transform:translate(var(--x),var(--y)) scale(1);opacity:1;} .rm.closing .rm-item{transform:translate(0,0) scale(.4);opacity:0;} .rm-item svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;} .rm-item:hover,.rm-item:focus-visible{border-color:var(--core);color:var(--core);outline:none;box-shadow:var(--shadow-hover),0 0 0 2px rgb(var(--core-rgb) / .35);} .rm-label{ position:absolute;top:calc(100% + 6px);left:50%;translate:-50% 0;white-space:nowrap;font-size:11.5px;color:var(--text-soft); background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:2px 9px;opacity:0;pointer-events:none; } .rm-item:hover .rm-label,.rm-item:focus-visible .rm-label{opacity:1;} @media (prefers-reduced-motion:no-preference){ .rm-item{transition:transform .34s var(--ease-spring,cubic-bezier(.34,1.56,.64,1)) var(--d,0ms),opacity .2s ease var(--d,0ms),border-color .15s,color .15s,box-shadow .15s;} .rm.closing .rm-item{transition:transform .16s ease,opacity .16s ease;} .rm-label{transition:opacity .15s ease;} } html[data-motion="reduce"] .rm-item{transition:none;} /* ---------------------------------------------------------------- F5 tour */ .tr{position:fixed;inset:0;z-index:140;opacity:0;} .tr.open{opacity:1;} .tr-spot{ position:fixed;pointer-events:none;border-radius:18px;opacity:0; box-shadow:0 0 0 9999px rgb(var(--void-rgb,5 8 12) / .74),0 0 0 2px rgb(var(--core-rgb) / .7); } .tr-card{ position:fixed;width:min(320px,calc(100vw - 24px));padding:16px 18px 14px;border-radius:16px;background:var(--panel); border:1px solid var(--line);box-shadow:var(--shadow-hover);opacity:0; } .tr-card.show{opacity:1;} .tr-count{font-size:10.5px;letter-spacing:.08em;color:var(--muted);margin-bottom:6px;font-variant-numeric:tabular-nums;} .tr-title{font-size:15px;font-weight:600;color:var(--text);margin-bottom:6px;} .tr-text{font-size:13px;line-height:1.5;color:var(--text-soft);} .tr-row{display:flex;align-items:center;gap:8px;margin-top:14px;} .tr-skip{margin-right:auto;} .tr-row .pill-btn{padding:7px 14px;} @media (prefers-reduced-motion:no-preference){ .tr{transition:opacity .22s ease;} .tr-spot,.tr-card{transition:opacity .14s ease;} } /* ==== style/fx/motion-premium.css ==== */ /* ========================================================================== */ /* motion-premium.css -- restrained finishing motion for existing GUI flows. */ /* No navigation or layout geometry rules; all animation follows real state. */ /* ========================================================================== */ /* Branded boot overlay. Its progress width still comes only from backend events. */ .boot-overlay{ gap:15px; background:radial-gradient(ellipse 46% 38% at 50% 42%,rgb(var(--core-rgb)/.09),transparent 74%),radial-gradient(ellipse 70% 58% at 50% 44%,var(--deep) 0%,var(--void) 78%); transition:opacity .34s cubic-bezier(.22,1,.36,1); } .boot-brand{display:flex;align-items:center;gap:10px;margin-bottom:4px;animation:bootBrandIn .62s cubic-bezier(.22,1,.36,1) both;} .boot-mark{display:grid;place-items:center;width:32px;height:32px;border:1px solid rgb(var(--core-rgb)/.5);border-radius:11px;color:var(--core);background:linear-gradient(145deg,rgb(var(--core-rgb)/.17),rgb(var(--core-rgb)/.035));box-shadow:inset 0 1px 0 rgb(var(--fg-rgb)/.12),0 5px 22px rgb(var(--core-rgb)/.12);font-size:18px;font-weight:650;letter-spacing:-.06em;} .boot-wordmark{color:var(--text);font-size:16px;font-weight:560;letter-spacing:.19em;} .boot-wordmark span{color:var(--muted);font-size:10px;font-weight:500;letter-spacing:.16em;} .boot-overlay .boot-orb{width:22px;height:22px;box-shadow:0 0 24px rgb(var(--core-rgb)/.52);animation:bootOrbSettle .7s cubic-bezier(.22,1,.36,1) .08s both,bootOrbBreathe 3.2s ease-in-out .8s infinite;} .boot-overlay .boot-track{width:min(220px,56vw);height:3px;border:1px solid rgb(var(--fg-rgb)/.055);background:rgb(var(--fg-rgb)/.075);} .boot-overlay .boot-fill{background:linear-gradient(90deg,var(--core),color-mix(in srgb,var(--core) 65%,white));box-shadow:0 0 10px rgb(var(--core-rgb)/.32);} .boot-overlay .boot-fill::after{animation-duration:1.8s;} .boot-overlay .boot-msg{color:var(--text-soft);font-size:12.5px;letter-spacing:.025em;animation:none;} @keyframes bootBrandIn{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}} @keyframes bootOrbSettle{from{opacity:0;transform:scale(.72)}to{opacity:1;transform:scale(1)}} @keyframes bootOrbBreathe{0%,100%{opacity:.82;transform:scale(1)}50%{opacity:1;transform:scale(1.045)}} /* Cinematic startup scene: decorative layers are static markup, animated only with compositor-friendly transforms and opacity. */ .boot-overlay{ z-index:120;overflow:hidden;isolation:isolate;padding:28px 22px; background:radial-gradient(ellipse 42% 38% at 50% 46%,rgb(var(--core-rgb)/.13),transparent 78%),radial-gradient(ellipse 78% 70% at 50% 48%,#0a1720 0%,#070b12 52%,#05070c 100%); color:var(--text);font-size:initial;gap:0; } .boot-overlay::before,.boot-overlay::after{content:"";position:absolute;inset:0;pointer-events:none;} .boot-overlay::before{z-index:-1;background:radial-gradient(ellipse 34% 46% at 50% 43%,rgb(var(--core-rgb)/.075),transparent 76%),linear-gradient(180deg,transparent 55%,rgb(1 5 9/.52));} .boot-overlay::after{z-index:-1;inset:8% 12%;opacity:.14;background:repeating-linear-gradient(90deg,transparent 0 59px,rgb(var(--core-rgb)/.09) 60px,transparent 61px),repeating-linear-gradient(0deg,transparent 0 59px,rgb(var(--core-rgb)/.06) 60px,transparent 61px);mask-image:radial-gradient(ellipse at center,#000 5%,transparent 75%);} .boot-content{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;width:min(100%,390px);text-align:center;animation:bootContentIn .85s cubic-bezier(.2,.8,.2,1) both;} .boot-brand{gap:11px;margin:0 0 5px;animation:none;} .boot-mark{width:31px;height:31px;border-radius:10px;} .boot-mark svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round;} .boot-wordmark{font-size:14px;letter-spacing:.21em;} .boot-wordmark span{font-size:9px;} .boot-emblem{position:relative;display:grid;place-items:center;width:clamp(176px,22vw,222px);aspect-ratio:1;margin:7px 0 0;isolation:isolate;} .boot-emblem::before{content:"";position:absolute;inset:18%;border-radius:50%;background:radial-gradient(circle,rgb(var(--core-rgb)/.19),rgb(var(--core-rgb)/.06) 43%,transparent 74%);opacity:.9;animation:bootFieldPulse 3.8s ease-in-out infinite;} .boot-orbit{position:absolute;display:block;border:1px solid rgb(var(--core-rgb)/.17);border-radius:50%;pointer-events:none;will-change:transform;} .boot-orbit i{position:absolute;top:50%;left:-4px;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:#aafcff;box-shadow:0 0 10px 2px rgb(var(--core-rgb)/.8);} .boot-orbit--outer{inset:4%;border-color:rgb(var(--core-rgb)/.13);border-left-color:rgb(var(--core-rgb)/.48);border-right-color:rgb(var(--core-rgb)/.29);transform:rotate(-22deg) scaleY(.68);animation:bootOrbitCW 18s linear infinite;} .boot-orbit--tilt{inset:15%;border-color:rgb(var(--core-rgb)/.12);border-top-color:rgb(var(--core-rgb)/.58);border-bottom-color:rgb(var(--core-rgb)/.31);transform:rotate(58deg) scaleY(.74);animation:bootOrbitCCW 13s linear infinite;} .boot-orbit--inner{inset:24%;border-style:dashed;border-color:rgb(var(--core-rgb)/.2);animation:bootOrbitCW 27s linear infinite;} .boot-core{position:relative;display:grid;place-items:center;width:45%;aspect-ratio:1;border:1px solid rgb(var(--core-rgb)/.52);border-radius:50%;background:radial-gradient(circle at 36% 28%,rgb(var(--core-rgb)/.27),rgb(var(--core-rgb)/.1) 42%,rgb(4 15 22/.86) 76%);box-shadow:inset 0 0 24px rgb(var(--core-rgb)/.13),0 0 28px rgb(var(--core-rgb)/.16);animation:bootCoreAssemble .92s cubic-bezier(.16,1,.3,1) .08s both;} .boot-core::before,.boot-core::after{content:"";position:absolute;inset:-11%;border:1px solid rgb(var(--core-rgb)/.22);border-radius:50%;} .boot-core::after{inset:-23%;border-color:rgb(var(--core-rgb)/.11);} .boot-core-light{position:absolute;inset:8%;border-radius:50%;background:radial-gradient(circle at 40% 32%,rgb(230 255 255/.68),rgb(var(--core-rgb)/.33) 18%,rgb(var(--core-rgb)/.1) 52%,transparent 74%);box-shadow:inset 0 0 20px rgb(var(--core-rgb)/.24);animation:bootCoreBreath 3.4s ease-in-out .9s infinite;} .boot-sigil{position:relative;width:41%;height:41%;overflow:visible;color:#d6ffff;filter:drop-shadow(0 0 8px rgb(var(--core-rgb)/.86));} .boot-sigil path{fill:none;stroke:currentColor;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round;} .boot-sigil .boot-sigil-star{stroke-width:2;opacity:.8;} .boot-particle{position:absolute;width:3px;height:3px;border-radius:50%;background:#c8ffff;box-shadow:0 0 9px 2px rgb(var(--core-rgb)/.7);animation:bootParticle 3.8s ease-in-out infinite;} .boot-particle--a{top:17%;left:28%;animation-delay:-.4s}.boot-particle--b{top:27%;right:15%;animation-delay:-1.3s}.boot-particle--c{top:62%;right:11%;animation-delay:-2.1s}.boot-particle--d{bottom:14%;left:34%;animation-delay:-2.9s}.boot-particle--e{top:47%;left:9%;width:2px;height:2px;animation-delay:-1.8s}.boot-particle--f{top:11%;right:39%;width:2px;height:2px;animation-delay:-.9s} .boot-wave{position:absolute;left:50%;bottom:6%;width:62%;height:17px;overflow:hidden;transform:translateX(-50%);opacity:.45;background:repeating-linear-gradient(90deg,transparent 0 5px,rgb(var(--core-rgb)/.31) 5px 6px);mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);} .boot-wave::after{content:"";position:absolute;inset:0 auto 0 -35%;width:36%;background:linear-gradient(90deg,transparent,rgb(var(--core-rgb)/.7),#d9ffff,transparent);transform:skewX(-18deg);animation:bootWaveSweep 2.8s cubic-bezier(.4,0,.2,1) infinite;} .boot-copy{margin-top:4px;} .boot-eyebrow{color:rgb(var(--core-rgb)/.78);font-size:9px;font-weight:650;letter-spacing:.24em;} .boot-copy h1{margin:9px 0 5px;color:#f2fbff;font-size:22px;font-weight:520;letter-spacing:.005em;} .boot-overlay .boot-msg{min-height:18px;margin:0;color:rgb(var(--fg-rgb)/.67);font-size:12px;letter-spacing:.015em;animation:none;} .boot-progress{width:min(260px,76vw);margin-top:24px;} .boot-overlay .boot-track{width:100%;height:3px;border:0;border-radius:99px;background:rgb(var(--fg-rgb)/.1);box-shadow:0 0 0 1px rgb(var(--fg-rgb)/.035);} .boot-overlay .boot-fill{width:100%;height:100%;border-radius:inherit;background:linear-gradient(90deg,rgb(var(--core-rgb)/.42),var(--core),#d7ffff);box-shadow:0 0 12px rgb(var(--core-rgb)/.45);transform:scaleX(0);transform-origin:left center;transition:transform .64s cubic-bezier(.16,1,.3,1);} .boot-overlay .boot-fill::after{display:none;} .boot-footnote{display:flex;align-items:center;gap:8px;margin-top:17px;color:rgb(var(--fg-rgb)/.35);font-size:8px;letter-spacing:.2em;} .boot-footnote-dot{width:4px;height:4px;border-radius:50%;background:var(--core);box-shadow:0 0 8px rgb(var(--core-rgb)/.8);animation:bootSignal 2s ease-in-out infinite;} .boot-error{margin-top:14px;color:var(--danger);font-size:12px;line-height:1.55;} .boot-continue{margin-top:17px;padding:9px 15px;border:1px solid rgb(var(--core-rgb)/.38);border-radius:999px;background:rgb(var(--core-rgb)/.1);color:var(--text);font:inherit;font-size:12px;cursor:pointer;} .boot-continue:hover,.boot-continue:focus-visible{background:rgb(var(--core-rgb)/.2);outline:2px solid rgb(var(--core-rgb)/.42);outline-offset:3px;} .boot-overlay[data-state="error"] .boot-emblem{opacity:.42;} .boot-overlay[data-state="error"] .boot-orbit,.boot-overlay[data-state="error"] .boot-particle,.boot-overlay[data-state="error"] .boot-wave::after{animation:none;} .boot-overlay[data-state="error"] .boot-core{border-color:rgb(var(--danger-rgb)/.56);box-shadow:0 0 24px rgb(var(--danger-rgb)/.14);} .boot-overlay[data-state="error"] .boot-sigil{color:var(--danger);} .boot-overlay.boot-leaving{opacity:0;transform:scale(1.012);} .boot-overlay.boot-leaving .boot-content{opacity:0;transform:translateY(-5px) scale(.99);transition:opacity .3s ease,transform .4s cubic-bezier(.2,.8,.2,1);} @keyframes bootContentIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}} @keyframes bootOrbitCW{to{rotate:360deg}} @keyframes bootOrbitCCW{to{rotate:-360deg}} @keyframes bootCoreAssemble{0%{opacity:0;scale:.7}65%{opacity:1;scale:1.07}100%{scale:1}} @keyframes bootCoreBreath{0%,100%{opacity:.7;scale:.94}50%{opacity:1;scale:1.04}} @keyframes bootFieldPulse{0%,100%{opacity:.45;scale:.88}50%{opacity:.9;scale:1.04}} @keyframes bootParticle{0%,100%{opacity:.18;transform:translate3d(0,4px,0) scale(.7)}45%{opacity:.9;transform:translate3d(0,-5px,0) scale(1.2)}} @keyframes bootWaveSweep{0%{transform:translateX(0) skewX(-18deg);opacity:0}18%{opacity:.9}78%{opacity:.8}100%{transform:translateX(460%) skewX(-18deg);opacity:0}} @keyframes bootSignal{0%,100%{opacity:.35;scale:.82}50%{opacity:1;scale:1.15}} @media(max-width:680px){.boot-emblem{width:174px}.boot-copy h1{font-size:20px}.boot-progress{margin-top:19px}.boot-footnote{margin-top:14px}} @media(prefers-reduced-motion:reduce){ .boot-content,.boot-orbit,.boot-particle,.boot-wave::after,.boot-emblem::before,.boot-core,.boot-core-light,.boot-footnote-dot{animation:none!important;} .boot-overlay,.boot-overlay.boot-leaving,.boot-overlay.boot-leaving .boot-content,.boot-fill{transition:none!important;} .boot-overlay.boot-leaving{opacity:0;transform:none;} .boot-core{scale:1;opacity:1;} } @media(max-width:680px), (prefers-reduced-motion:reduce), (update:slow){ .boot-orbit{animation:none!important}.boot-particle{animation:none!important;opacity:.55;} .boot-emblem::before,.boot-core-light,.boot-footnote-dot{animation:none!important;} } html[data-quality="low"] .boot-orbit,html[data-quality="low"] .boot-particle,html[data-quality="low"] .boot-wave::after,html[data-quality="low"] .boot-emblem::before,html[data-quality="low"] .boot-core-light{animation:none!important;} html[data-quality="low"] .boot-content{animation:none;} /* Page entrances use a short, low-distance settle instead of a long glide. */ :where(html:not([data-motion="reduce"]):not([data-quality="low"])) .page{animation-duration:.3s;} @keyframes pageIn{from{opacity:0;transform:translateY(7px) scale(.997)}to{opacity:1;transform:translateY(0) scale(1)}} @keyframes pageInR{from{opacity:0;transform:translateX(10px) scale(.997)}to{opacity:1;transform:translateX(0) scale(1)}} @keyframes pageInL{from{opacity:0;transform:translateX(-10px) scale(.997)}to{opacity:1;transform:translateX(0) scale(1)}} @keyframes toastIn{from{opacity:0;transform:translateY(9px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}} /* Fine press/focus feedback stays on compositor-friendly properties. */ @media (hover:hover) and (prefers-reduced-motion:no-preference){ :where(html[data-quality="high"]) :is(.pill-btn,.chip,.dock-btn,.qa-btn,.mc-play,.app-tile,.mode-tile,.theme-card):hover:not(:disabled){translate:0 -1px;} } :where(button,[role="button"],a,.card,.app-tile,.mode-tile,.theme-card):active:not(:disabled){scale:.985;} :where(a,button,input,select,textarea,summary,[role="button"],[role="switch"],[role="radio"],[role="tab"],[tabindex]:not([tabindex="-1"])):focus-visible{transition:outline-offset .16s ease,box-shadow .16s ease;} :where(a,button,input,select,textarea,summary,[role="button"],[role="switch"],[role="radio"],[role="tab"],[tabindex]:not([tabindex="-1"])):focus-visible{outline-offset:3px;} /* The canvas orb keeps its existing renderer; its surrounding halo tracks the same real assistant mode. */ #stage::before{transition:border-color .42s ease,box-shadow .42s ease,opacity .42s ease;} #stage[data-state="idle"]::before{border-color:rgb(var(--core-rgb)/.2);box-shadow:0 0 20px rgb(var(--core-rgb)/.035);} #stage[data-state="waking"]::before,#stage[data-state="listening"]::before{border-color:rgb(var(--core-rgb)/.54);box-shadow:0 0 28px rgb(var(--core-rgb)/.12);} #stage[data-state="thinking"]::before{border-color:rgb(var(--think-rgb)/.48);box-shadow:0 0 28px rgb(var(--think-rgb)/.11);} #stage[data-state="speaking"]::before{border-color:rgb(var(--speak-rgb)/.5);box-shadow:0 0 28px rgb(var(--speak-rgb)/.12);} #stage[data-state="working"]::before{border-color:rgb(var(--core-rgb)/.45);box-shadow:0 0 28px rgb(var(--core-rgb)/.10);} /* Skeletons stay visible while loading but breathe through opacity, avoiding a moving full-width gradient. */ :where(html:not([data-quality="low"])) .skel{background:linear-gradient(100deg,var(--panel) 28%,rgb(var(--fg-rgb)/.075) 50%,var(--panel) 72%);background-size:100% 100%;animation:skelBreathe 1.8s ease-in-out infinite;} @keyframes skelBreathe{0%,100%{opacity:.72}50%{opacity:1}} /* Fallback for browsers without the color-mix() used on the startup progress fill. */ @supports not (color:color-mix(in srgb,white,black)){ .boot-overlay .boot-fill{background:var(--core);} } @media (prefers-reduced-motion:reduce), (max-width:680px){ .boot-overlay .boot-orb{animation:none;} } @media (prefers-reduced-motion:reduce){ .boot-brand,.boot-overlay .boot-orb{animation:none;} :where(button,[role="button"],a,.card,.app-tile,.mode-tile,.theme-card):active:not(:disabled){scale:1;} :where(html:not([data-quality="low"])) .skel{animation:none;opacity:1;} .page{animation:none !important;} } html[data-quality="low"] .boot-overlay .boot-orb{animation:none;} html[data-quality="low"] :where(button,[role="button"],a,.card,.app-tile,.mode-tile,.theme-card):active:not(:disabled){scale:1;} html[data-quality="low"] .skel{animation:none;opacity:1;}