/* ============================================================ JUWEL OS · the shell — FACET (v2, 2026-07-09) Cut stone, not candy. Canonical spec: docs/brand/BRAND_SYSTEM.md. Runtime token truth: juwel-landing/juwel-ds.css. The OS chrome, recut to FACET: near-opaque PANE windows with a machined 1px top light, ONE neutral chrome-glass material for the menubar / dock / command palette / control center, a STILL faceted wallpaper, and the ONE law of color — ink = you act; amber = JUWEL acts / it's on the record. The glint is the only boldness. NOTE: the de-candy :root override that used to live here is DELETED. Paper/ink/surface/line/shadow now resolve from the brand token layer (juwel-ds → vext → juwel-os-bridge). New FACET tokens used below (--edge, --glass-bg/-blur/-shadow, --topaz*) come from juwel-ds.css. Theme: . ============================================================ */ /* Brand hard rule: NO italics — emphasis via weight/color only */ em,i{font-style:normal;} /* ─── entity rig (juwel-entity.js applies these to its SVG) ─── Left intact: this is JUWEL's own facet/rock rig, driven by the component, not chrome. She may move; the wallpaper never does. */ @media (prefers-reduced-motion:no-preference){ .th-rock{animation:th-rock 5.4s cubic-bezier(.22,1,.36,1) infinite;transform-box:fill-box;transform-origin:center;} .th-fc{animation:th-tw 3.8s cubic-bezier(.22,1,.36,1) infinite;} .th-sheen{animation:th-sheen 5.2s cubic-bezier(.22,1,.36,1) infinite;transform-box:fill-box;} .th-eye{animation:th-blink 5.2s ease-in-out infinite;transform-box:fill-box;transform-origin:center;} } @keyframes th-rock{0%,100%{transform:translateY(0) rotate(-2.4deg)}50%{transform:translateY(-2.2px) rotate(2.4deg)}} @keyframes th-tw{0%,100%{opacity:.7}50%{opacity:1}} @keyframes th-sheen{0%{transform:translateX(-36px) skewX(-18deg);opacity:0}14%{opacity:.85}42%{opacity:0}100%{transform:translateX(150px) skewX(-18deg);opacity:0}} @keyframes th-blink{0%,93%,100%{transform:scaleY(1)}95.5%{transform:scaleY(.08)}98%{transform:scaleY(1)}} .th-glow{display:none!important;} html,body{height:100%;} body{overflow:hidden;margin:0;background:var(--bg);color:var(--ink-1); font-family:var(--ff-ui);font-size:14px;letter-spacing:-.01em; font-feature-settings:"ss01","tnum","cv11"; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; transition:background .35s var(--ease-out), color .35s var(--ease-out);} svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;} ::selection{background:color-mix(in srgb,var(--topaz) 26%,transparent);} .no-select{user-select:none;-webkit-user-select:none;} /* ============================================================ THE ROOM — STILL faceted wallpaper (BRAND_SYSTEM §4) 3 angular planes of the bedrock neutral at ±2% lightness + one faint amber refraction low in the frame. Zero animation. Neutrals are hard-coded so the canvas is FACET regardless of the brand token cascade state. Candy blobs / dot grid deleted. ============================================================ */ /* Room — still, warm humanist canvas with soft gem light (not gray void) */ #room{position:fixed;inset:0;z-index:0;overflow:hidden; background: radial-gradient(42vw 36vh at 78% 18%, color-mix(in srgb,var(--sapphire) 9%,transparent), transparent 70%), radial-gradient(38vw 32vh at 12% 22%, color-mix(in srgb,var(--jade) 7%,transparent), transparent 68%), radial-gradient(52vw 40vh at 50% 108%, color-mix(in srgb,var(--topaz) 14%,transparent), transparent 68%), linear-gradient(122deg, #F8F6F1 0 30%, transparent 34%), linear-gradient(-118deg, #EDEAE4 0 38%, transparent 42%), linear-gradient(198deg, #F1EEE8 0 56%, transparent 60%), #F3F0EA;} html[data-theme="dark"] #room{ background: radial-gradient(42vw 36vh at 78% 18%, color-mix(in srgb,var(--sapphire) 12%,transparent), transparent 70%), radial-gradient(38vw 32vh at 12% 22%, color-mix(in srgb,var(--jade) 9%,transparent), transparent 68%), radial-gradient(52vw 40vh at 50% 108%, color-mix(in srgb,var(--topaz) 16%,transparent), transparent 68%), linear-gradient(122deg, #181614 0 30%, transparent 34%), linear-gradient(-118deg, #0E0D0B 0 38%, transparent 42%), linear-gradient(198deg, #151310 0 56%, transparent 60%), #121110;} #room::after{content:'';position:absolute;inset:0;pointer-events:none; background:radial-gradient(120% 110% at 50% 34%, transparent 55%, rgba(26,25,21,.04) 100%);} html[data-theme="dark"] #room::after{background:radial-gradient(120% 110% at 50% 30%, transparent 50%, rgba(0,0,0,.36) 100%);} /* legacy decorative children of #room are retired */ #room .grid,#room .blob{display:none;} /* ============================================================ STAGE FLOW — frontdoor / boot / desktop ============================================================ */ #frontdoor,#desktop{position:fixed;inset:0;} #frontdoor{z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:center; padding:0 24px 16vh;text-align:center; transition:opacity .45s var(--ease-out), transform .45s var(--ease-out), filter .45s var(--ease-out);} body[data-stage="desktop"] #frontdoor{opacity:0;transform:translateY(-20px) scale(.98);filter:blur(5px);pointer-events:none;} #desktop{z-index:10;opacity:0;pointer-events:none;transition:opacity .45s var(--ease-out);} body[data-stage="desktop"] #desktop{opacity:1;pointer-events:auto;} /* ─── FRONT DOOR (BRAND_SYSTEM §9) — the OS is the front door ─── */ .fd-gem{display:inline-flex;line-height:0;position:relative;cursor:default;width:148px;height:148px;} .fd-gem img{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 18px 40px rgba(255,106,0,.28));pointer-events:none;-webkit-user-select:none;user-select:none;} @media (prefers-reduced-motion:no-preference){.fd-gem{animation:fd-hover 6.5s var(--ease-inout) infinite;}} @keyframes fd-hover{0%,100%{transform:translateY(0);}50%{transform:translateY(-13px);}} .fd-phrase{position:relative;min-height:132px;width:min(880px,92vw);margin:26px 0 6px;display:flex;align-items:center;justify-content:center;} /* display type per §3: clamp 34–54 / 700 / -0.025em / lh 1.05 */ .fd-line{font-family:var(--ff-display);font-weight:700;letter-spacing:-.025em; font-size:clamp(34px,5vw,54px);line-height:1.05;color:var(--ink-1);} .fd-line .acc{font-family:var(--ff-display);font-weight:700;color:var(--ink-1);letter-spacing:-.025em;} /* JUWEL's caret — her presence (amber allowed), steady thin bar */ .fd-caret{display:inline-block;width:2px;height:.86em;background:var(--topaz);border-radius:1px;margin-left:5px;vertical-align:-.06em;} @media (prefers-reduced-motion:no-preference){.fd-caret{animation:caretblink 1.05s steps(1) infinite;}} @keyframes caretblink{0%,52%{opacity:1;}52.01%,100%{opacity:0;}} .fd-sub{font-size:14.5px;color:var(--ink-2);max-width:56ch;margin:8px 0 0;line-height:1.5;} .fd-sub .k{font-family:var(--ff-mono);font-size:12px;color:var(--ink-1);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:2px 7px;} /* front-door composer — the hero PANE (§9). amber Enter is the one act. */ .fd-composer{position:relative;overflow:hidden;margin-top:40px;width:min(660px,92vw);display:flex;align-items:center;gap:8px; background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl); padding:9px 9px 9px 18px;box-shadow:inset 0 1px 0 var(--edge),var(--shadow-3); transition:border-color .15s var(--ease-out), box-shadow .18s var(--ease-out);} .fd-composer.focused{border-color:var(--topaz);box-shadow:inset 0 1px 0 var(--edge),0 0 0 3px var(--amber-glow),var(--shadow-3);} /* one glint sweep on first focus */ .fd-composer::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:34%;pointer-events:none;z-index:2; background:linear-gradient(100deg,transparent 8%,color-mix(in srgb,var(--topaz) 30%,transparent) 50%,transparent 92%); transform:translateX(-140%) skewX(-18deg);opacity:0;} .fd-composer.focused::after{animation:facet-glint .55s var(--ease-out);} .fd-composer input{flex:1;min-width:0;border:0;outline:0;background:transparent; font-family:var(--ff-ui);font-size:16px;color:var(--ink-1);height:42px;line-height:42px;} .fd-composer input::placeholder{color:var(--ink-3);} .fd-enter{flex-shrink:0;position:relative;display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 18px;border:1px solid transparent;cursor:pointer; border-radius:var(--r-md);background:var(--topaz);color:#201200;font-family:var(--ff-ui);font-weight:600;font-size:14px;letter-spacing:-.01em; transition:transform .12s var(--ease-out), background-color .15s var(--ease-out);} @media (hover:hover) and (pointer:fine){.fd-enter:hover{background:var(--topaz-2);}} .fd-enter:active{transform:scale(.98);} .fd-enter svg{width:16px;height:16px;} /* quiet ghost suggestion chips */ .fd-quick{margin-top:22px;display:flex;flex-wrap:wrap;gap:9px;justify-content:center;max-width:700px;} .fd-chip{font-family:var(--ff-ui);font-size:13.5px;font-weight:500;color:var(--ink-2);white-space:nowrap; background:transparent;border:1px solid var(--line);border-radius:var(--r-full);padding:8px 15px;cursor:pointer; transition:border-color .15s var(--ease-out), color .15s var(--ease-out), background-color .15s var(--ease-out);} @media (hover:hover) and (pointer:fine){.fd-chip:hover{background:var(--surface-2);color:var(--ink-1);}} .fd-chip:active{transform:scale(.98);} .fd-corner{position:fixed;top:22px;right:24px;z-index:40;display:flex;align-items:center;gap:10px;} .fd-brand{position:fixed;top:24px;left:28px;z-index:40;display:inline-flex;align-items:center;} .fd-wordmark{height:22px;width:auto;display:block;} .logo-light{display:block;} .logo-dark{display:none;} html[data-theme="dark"] .logo-light{display:none;} html[data-theme="dark"] .logo-dark{display:block;} body[data-stage="desktop"] .fd-corner{opacity:0;pointer-events:none;} body[data-stage="desktop"] .fd-brand{display:none;} /* the FACET signature — one specular streak, event-driven only */ @keyframes facet-glint{ 0%{opacity:0;transform:translateX(-140%) skewX(-18deg);} 14%{opacity:1;} 100%{opacity:0;transform:translateX(460%) skewX(-18deg);} } /* ─── BOOT veil — a momentary, event-driven transition into the OS ─── */ #boot{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;flex-direction:column;gap:22px; background:color-mix(in srgb,var(--bg) 84%,transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);} #boot.on{display:flex;animation:bootfade .3s var(--ease-out) both;} #boot.off{animation:bootout .24s var(--ease-out) both;} @keyframes bootfade{from{opacity:0;}to{opacity:1;}} @keyframes bootout{from{opacity:1;}to{opacity:0;visibility:hidden;}} #boot .bgem{line-height:0;width:104px;height:104px;} #boot .bgem img{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 12px 28px rgba(255,106,0,.28));} @media (prefers-reduced-motion:no-preference){#boot .bgem{animation:bootrise 1.1s var(--ease) both;}} @keyframes bootrise{0%{transform:translateY(14px) scale(.86);opacity:0;}100%{transform:translateY(0) scale(1);opacity:1;}} #boot .bsteps{font-family:var(--ff-mono);font-size:12px;letter-spacing:.06em;color:var(--ink-2);height:20px;text-align:center;} #boot .bsteps b{color:var(--topaz-ink);font-weight:500;} #boot .bbar{width:188px;height:3px;border-radius:var(--r-full);background:var(--surface-2);overflow:hidden;} #boot .bbar i{display:block;height:100%;width:0;background:var(--topaz);border-radius:var(--r-full);transition:width .4s var(--ease-out);} /* ============================================================ MENUBAR — top OS chrome-glass (BRAND_SYSTEM §4) ============================================================ */ #menubar{position:fixed;top:0;left:0;right:0;z-index:90;height:40px;display:flex;align-items:center;gap:2px;padding:0 12px; background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur); border-bottom:1px solid var(--line);box-shadow:var(--glass-shadow);} body:not([data-stage="desktop"]) #menubar{opacity:0;transform:translateY(-100%);pointer-events:none;transition:opacity .3s var(--ease-out), transform .3s var(--ease-out);} .mb-logo{display:inline-flex;align-items:center;justify-content:center;height:30px;padding:0 9px;border:0;background:transparent;border-radius:var(--r-sm);cursor:pointer; transition:background-color .15s var(--ease-out);} @media (hover:hover) and (pointer:fine){.mb-logo:hover{background:var(--surface-2);}} .mb-logo img{height:14px;width:auto;} .mb-item{font-family:var(--ff-ui);font-size:13px;font-weight:500;color:var(--ink-1);padding:6px 11px;border-radius:var(--r-sm);cursor:pointer; transition:background-color .14s var(--ease-out);white-space:nowrap;} @media (hover:hover) and (pointer:fine){.mb-item:hover{background:var(--surface-2);}} .mb-space{display:inline-flex;align-items:center;gap:6px;font-family:var(--ff-ui);font-size:12.5px;font-weight:600;color:var(--ink-1); background:transparent;border:1px solid var(--line);padding:4px 9px 4px 7px;border-radius:var(--r-sm);cursor:pointer;white-space:nowrap; transition:background-color .14s var(--ease-out), border-color .14s var(--ease-out), transform .12s var(--ease-out);} @media (hover:hover) and (pointer:fine){.mb-space:hover{background:var(--surface-2);}} .mb-space:active{transform:scale(.98);} .mb-space svg{width:13px;height:13px;} .mb-space svg:last-child{width:11px;height:11px;opacity:.5;margin-left:-2px;} body[data-device="phone"] #mb-space{display:none;} .mb-item.strong{font-weight:600;} .mb-item.muted{color:var(--ink-2);font-weight:500;} .mb-sep{width:1px;height:18px;background:var(--line);margin:0 6px;} .mb-spacer{flex:1;} .mb-right{display:flex;align-items:center;gap:4px;} /* "On the record" — stated quietly (§8): jade live-dot, mono, surface pill */ .mb-pill{display:inline-flex;align-items:center;gap:7px;font-family:var(--ff-mono);font-size:11px;font-weight:500; letter-spacing:.04em;color:var(--ink-2);background:var(--surface);border:1px solid var(--line); border-radius:var(--r-full);padding:4px 11px;cursor:pointer;box-shadow:inset 0 1px 0 var(--edge); transition:transform .12s var(--ease-out);white-space:nowrap;} .mb-pill:active{transform:scale(.98);} .mb-pill .dot{width:6px;height:6px;border-radius:50%;background:var(--jade);position:relative;} .mb-pill .dot::after{content:'';position:absolute;inset:-3px;border-radius:50%;background:var(--jade);opacity:.2;} @media (prefers-reduced-motion:no-preference){.mb-pill .dot::after{animation:ping 2.6s var(--ease-out) infinite;}} @keyframes ping{0%,100%{transform:scale(.7);opacity:.24;}50%{transform:scale(1.6);opacity:0;}} .mb-kbtn{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;font-family:var(--ff-ui);font-size:12.5px;color:var(--ink-2); background:transparent;border:1px solid var(--line);border-radius:var(--r-full);padding:5px 9px 5px 12px;cursor:pointer; transition:border-color .15s var(--ease-out), color .15s var(--ease-out), background-color .15s var(--ease-out);} @media (hover:hover) and (pointer:fine){.mb-kbtn:hover{background:var(--surface-2);color:var(--ink-1);}} .mb-kbtn svg{width:14px;height:14px;} .mb-kbtn .kbd{font-family:var(--ff-mono);font-size:10.5px;color:var(--ink-3);border:1px solid var(--line);border-radius:var(--r-xs);padding:1px 5px;} .mb-icon{width:32px;height:32px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;color:var(--ink-2);cursor:pointer; transition:background-color .14s var(--ease-out), color .14s var(--ease-out);background:transparent;border:0;} @media (hover:hover) and (pointer:fine){.mb-icon:hover{background:var(--surface-2);color:var(--ink-1);}} .mb-icon svg{width:16px;height:16px;} .mb-icon .sun{display:none;}html[data-theme="dark"] .mb-icon .sun{display:block;}html[data-theme="dark"] .mb-icon .moon{display:none;} .mb-clock{font-family:var(--ff-mono);font-size:12px;color:var(--ink-1);padding:0 8px;letter-spacing:.02em;white-space:nowrap;} .mb-status{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 9px;border:0;background:transparent;border-radius:var(--r-sm);cursor:pointer;color:var(--ink-1);transition:background-color .14s var(--ease-out);} @media (hover:hover) and (pointer:fine){.mb-status:hover{background:var(--surface-2);}} .mb-status.on{background:var(--surface-2);} .mb-status svg{width:16px;height:16px;} /* ══════ Control Center — chrome glass (§4) ══════ */ #control-center{position:fixed;top:46px;right:10px;z-index:200;width:320px;padding:14px;border-radius:var(--r-xl); background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur); border:1px solid var(--glass-border);box-shadow:var(--glass-shadow); opacity:0;transform:translateY(-8px) scale(.98);transform-origin:top right;pointer-events:none; transition:opacity .16s var(--ease-out), transform .18s var(--ease-out);} #control-center.on{opacity:1;transform:none;pointer-events:auto;} .cc-head{display:flex;align-items:baseline;justify-content:space-between;padding:2px 4px 12px;} .cc-title{font-family:var(--ff-display);font-weight:600;font-size:15px;letter-spacing:-.018em;} .cc-date{font-family:var(--ff-mono);font-size:11px;color:var(--ink-3);} .cc-tiles{display:grid;grid-template-columns:1fr 1fr;gap:9px;} /* tiles are ordinary controls → ink, not amber (§6 amber rule) */ .cc-tile{position:relative;display:flex;flex-direction:column;gap:3px;align-items:flex-start;text-align:left; border:1px solid var(--line);border-radius:var(--r-md);padding:12px 13px;background:var(--surface);cursor:pointer; box-shadow:inset 0 1px 0 var(--edge); transition:transform .12s var(--ease-out), box-shadow .15s var(--ease-out), border-color .15s var(--ease-out), background-color .15s var(--ease-out), color .15s var(--ease-out);overflow:hidden;} @media (hover:hover) and (pointer:fine){.cc-tile:hover{border-color:color-mix(in srgb,var(--ink) 18%,var(--line));}} .cc-tile:active{transform:scale(.98);} .cc-tile b{font-size:13px;font-weight:600;letter-spacing:-.01em;color:var(--ink-1);} .cc-tile i, .cc-tile span.cc-state, .cc-tile .cc-tl span.cc-shortcut{font-style:normal;font-family:var(--ff-mono);font-size:10.5px;color:var(--ink-3);} .cc-tile .cc-d{width:24px;height:24px;border-radius:var(--r-sm);margin-bottom:5px;background:var(--surface-2);border:1px solid var(--line);} /* ON = quiet ink slab (paper text). No candy gradients. */ .cc-tile.active{background:var(--ink);border-color:transparent;color:var(--paper);} .cc-tile.active b{color:var(--paper);} .cc-tile.active i, .cc-tile.active span.cc-state, .cc-tile.active .cc-tl span.cc-shortcut{color:color-mix(in srgb,var(--paper) 72%,transparent);} .cc-tile.active .cc-d{background:color-mix(in srgb,var(--paper) 26%,transparent);border-color:transparent;} .cc-tile.big{grid-column:span 2;flex-direction:row;align-items:center;gap:11px;} .cc-tile.big .cc-ic{width:38px;height:38px;flex-shrink:0;} .cc-tile.big .cc-ic img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 4px 8px rgba(255,106,0,.3));} .cc-tile.big .cc-tl{display:flex;flex-direction:column;gap:2px;} .cc-sub{font-family:var(--ff-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);padding:16px 4px 9px;} .cc-notes{display:flex;flex-direction:column;gap:7px;max-height:230px;overflow:auto;} .cc-note{display:flex;gap:10px;align-items:flex-start;padding:11px 12px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--line);box-shadow:inset 0 1px 0 var(--edge);} .cc-note .cn-ic{width:28px;height:28px;border-radius:var(--r-sm);flex-shrink:0;display:grid;place-items:center;color:var(--ink-2);background:var(--surface-2);border:1px solid var(--line);} .cc-note .cn-ic svg{width:15px;height:15px;} .cc-note .cn-m{flex:1;min-width:0;} .cc-note .cn-t{font-size:12.5px;font-weight:600;color:var(--ink-1);line-height:1.35;} .cc-note .cn-s{font-family:var(--ff-mono);font-size:10.5px;color:var(--ink-3);margin-top:2px;} .cc-note .cn-time{font-family:var(--ff-mono);font-size:10px;color:var(--ink-3);white-space:nowrap;} .cc-empty{text-align:center;color:var(--ink-3);font-size:12.5px;padding:20px;} @media(max-width:640px){#control-center{right:6px;left:6px;width:auto;}} /* menubar dropdown — a menu opened from chrome = a PANE (§4) */ .mb-menu{position:fixed;top:42px;z-index:200;min-width:240px;background:var(--surface);border:1px solid var(--line); border-radius:var(--r-lg);box-shadow:inset 0 1px 0 var(--edge),var(--shadow-3);padding:6px;display:none; transform-origin:top left;animation:menupop .16s var(--ease-out) both;} .mb-menu.on{display:block;} @keyframes menupop{from{opacity:0;transform:translateY(-6px) scale(.98);}to{opacity:1;transform:none;}} .mb-menu .mrow{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:var(--r-sm);cursor:pointer;white-space:nowrap; font-family:var(--ff-ui);font-size:13.5px;color:var(--ink-1);transition:background-color .12s var(--ease-out);} @media (hover:hover) and (pointer:fine){.mb-menu .mrow:hover{background:var(--surface-2);}} .mb-menu .mrow svg{width:16px;height:16px;color:var(--ink-2);flex-shrink:0;} .mb-menu .mrow .mk{margin-left:auto;font-family:var(--ff-mono);font-size:11px;color:var(--ink-3);} .mb-menu .mrow .msub{font-size:12px;color:var(--ink-3);} .mb-menu .mdiv{height:1px;background:var(--line-2);margin:5px 4px;} .mb-menu .mhead{font-family:var(--ff-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);padding:8px 11px 5px;} /* ============================================================ WINDOWS — near-opaque PANE (§4). Work needs contrast: NO backdrop-filter on windows. ============================================================ */ #winlayer{position:fixed;inset:0;z-index:40;pointer-events:none;} .win{position:absolute;pointer-events:auto;display:flex;flex-direction:column; background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden; box-shadow:inset 0 1px 0 var(--edge),var(--shadow-2); transition:box-shadow .2s var(--ease-out), border-color .18s var(--ease-out); animation:winopen .22s var(--ease-out) both;will-change:transform;} @keyframes winopen{from{opacity:0;transform:translateY(8px) scale(.98);}to{opacity:1;transform:none;}} .win.closing{animation:winclose .15s var(--ease-out) both;pointer-events:none;} @keyframes winclose{to{opacity:0;transform:translateY(6px) scale(.98);}} .win.minimizing{animation:winmin .22s var(--ease-out) both;pointer-events:none;} @keyframes winmin{to{opacity:0;transform:translateY(40vh) scale(.4);}} .win.focused{box-shadow:inset 0 1px 0 var(--edge),var(--shadow-3);border-color:color-mix(in srgb,var(--ink) 16%,var(--line));} .win:not(.focused){box-shadow:inset 0 1px 0 var(--edge),var(--shadow-1);} .win:not(.focused) .win-bar{opacity:.82;} .win.maximized{border-radius:0;border:0;} .win-bar{display:flex;align-items:center;gap:10px;height:44px;padding:0 12px 0 14px;cursor:grab;user-select:none; border-bottom:1px solid var(--line);flex-shrink:0;background:transparent;} .win-bar:active{cursor:grabbing;} .win-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;box-shadow:0 0 0 3px color-mix(in srgb,currentColor 18%,transparent);} .win-title{font-family:var(--ff-display);font-size:14px;font-weight:600;letter-spacing:-.012em;color:var(--ink-1);white-space:nowrap;flex-shrink:0;} .win-sub{font-family:var(--ff-mono);font-size:11px;color:var(--ink-3);letter-spacing:.04em;white-space:nowrap;flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;} .win-bar .sp{flex:1;} .win-ctl{display:flex;align-items:center;gap:2px;} .win-cbtn{width:28px;height:28px;border-radius:var(--r-sm);border:0;background:transparent;color:var(--ink-3);cursor:pointer; display:flex;align-items:center;justify-content:center;transition:background-color .14s var(--ease-out), color .14s var(--ease-out);} @media (hover:hover) and (pointer:fine){.win-cbtn:hover{background:var(--surface-2);color:var(--ink-1);}} .win-cbtn.close:hover{background:var(--garnet-soft);color:var(--garnet);} .win-cbtn svg{width:15px;height:15px;} .win-body{flex:1;min-height:0;overflow:auto;position:relative;} .win-body::-webkit-scrollbar{width:9px;height:9px;} .win-body::-webkit-scrollbar-thumb{background:var(--line);border-radius:5px;border:2px solid var(--surface);} .win-body::-webkit-scrollbar-thumb:hover{background:var(--ink-3);} .win-resize{position:absolute;right:0;bottom:0;width:18px;height:18px;cursor:nwse-resize;z-index:5;} .win-resize::after{content:'';position:absolute;right:4px;bottom:4px;width:7px;height:7px; border-right:1.5px solid var(--ink-3);border-bottom:1.5px solid var(--ink-3);border-radius:0 0 2px 0;opacity:.55;} /* ============================================================ DOCK — chrome glass rail (§4). Icons are QUIET (ink), no candy, no glow. Amber never enters the dock: selection is a tab = ink. ============================================================ */ #dock{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:95; display:flex;align-items:flex-end;gap:7px;padding:8px; background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur); border:1px solid var(--glass-border);border-radius:var(--r-xl);box-shadow:var(--glass-shadow);} body:not([data-stage="desktop"]) #dock{opacity:0;transform:translateX(-50%) translateY(20px);pointer-events:none;} .dock-app{position:relative;width:46px;height:46px;border-radius:var(--r-md);cursor:pointer;flex-shrink:0; display:flex;align-items:center;justify-content:center;color:var(--ink-2); transition:transform .18s var(--ease-out), color .16s var(--ease-out), background-color .16s var(--ease-out);transform-origin:bottom center;} .dock-app svg{width:23px;height:23px;stroke-width:1.7;} .dock-app .run{position:absolute;bottom:-5px;left:50%;transform:translateX(-50%);width:4px;height:4px;border-radius:50%; background:var(--ink-3);opacity:0;transition:opacity .18s var(--ease-out);} .dock-app.running .run{opacity:1;} .dock-app .tip{position:absolute;bottom:calc(100% + 12px);left:50%;transform:translateX(-50%) translateY(4px); font-family:var(--ff-ui);font-size:12.5px;font-weight:500;color:var(--ink-1);white-space:nowrap; background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:5px 10px;box-shadow:inset 0 1px 0 var(--edge),var(--shadow-2); opacity:0;pointer-events:none;transition:opacity .15s var(--ease-out), transform .15s var(--ease-out);} .dock-app:hover .tip{opacity:1;transform:translateX(-50%) translateY(0);} .dock-app .tip .ts{color:var(--ink-3);font-family:var(--ff-mono);font-size:10.5px;margin-left:6px;} .dock-div{width:1px;align-self:center;height:30px;background:var(--line);margin:0 3px;} /* App identity tiles — soft mineral wells (humanist color, not candy gradients) */ .ic-chat{background:color-mix(in srgb,var(--topaz) 18%,var(--surface));color:var(--topaz-deep);border:1px solid color-mix(in srgb,var(--topaz) 22%,var(--line));} .ic-files{background:color-mix(in srgb,var(--sapphire) 14%,var(--surface));color:var(--sapphire-deep);border:1px solid color-mix(in srgb,var(--sapphire) 18%,var(--line));} .ic-mail{background:color-mix(in srgb,#F0683C 16%,var(--surface));color:#B8431F;border:1px solid color-mix(in srgb,#F0683C 20%,var(--line));} .ic-calendar{background:color-mix(in srgb,var(--sapphire) 16%,var(--surface));color:var(--sapphire-deep);border:1px solid color-mix(in srgb,var(--sapphire) 20%,var(--line));} .ic-browser{background:color-mix(in srgb,#5B7CFF 14%,var(--surface));color:#2F4FBF;border:1px solid color-mix(in srgb,#5B7CFF 18%,var(--line));} .ic-ide{background:color-mix(in srgb,#6B5B95 14%,var(--surface));color:#4A3D72;border:1px solid color-mix(in srgb,#6B5B95 18%,var(--line));} .ic-terminal{background:color-mix(in srgb,var(--ink) 8%,var(--surface));color:var(--ink-1);border:1px solid var(--line);} .ic-studio{background:color-mix(in srgb,#E85D8C 12%,var(--surface));color:#B02D5C;border:1px solid color-mix(in srgb,#E85D8C 18%,var(--line));} .ic-ledger{background:color-mix(in srgb,var(--jade) 14%,var(--surface));color:var(--jade-deep);border:1px solid color-mix(in srgb,var(--jade) 18%,var(--line));} .ic-settings{background:var(--surface-2);color:var(--ink-2);border:1px solid var(--line);} .ic-home,.ic-brain{background:color-mix(in srgb,var(--topaz) 12%,var(--surface));color:var(--topaz-deep);border:1px solid color-mix(in srgb,var(--topaz) 16%,var(--line));} .ic-workspace{background:color-mix(in srgb,var(--sapphire) 12%,var(--surface));color:var(--sapphire-deep);border:1px solid color-mix(in srgb,var(--sapphire) 16%,var(--line));} .ic-hive{background:color-mix(in srgb,#48A98A 14%,var(--surface));color:#1F6B54;border:1px solid color-mix(in srgb,#48A98A 18%,var(--line));} .ic-lens{background:color-mix(in srgb,var(--sapphire) 12%,var(--surface));color:var(--sapphire-deep);border:1px solid color-mix(in srgb,var(--sapphire) 16%,var(--line));} .ic-actions{background:color-mix(in srgb,#21B481 14%,var(--surface));color:#0A5C3E;border:1px solid color-mix(in srgb,#21B481 18%,var(--line));} .ic-system{background:color-mix(in srgb,#6B7A99 14%,var(--surface));color:#3D4A66;border:1px solid color-mix(in srgb,#6B7A99 18%,var(--line));} .ic-contacts{background:color-mix(in srgb,#48A98A 14%,var(--surface));color:#1F6B54;border:1px solid color-mix(in srgb,#48A98A 18%,var(--line));} .ic-rewind{background:color-mix(in srgb,#8B7A9E 12%,var(--surface));color:#5A4A6E;border:1px solid color-mix(in srgb,#8B7A9E 16%,var(--line));} html[data-theme="dark"] .ic-chat{background:color-mix(in srgb,var(--topaz) 22%,var(--surface));color:var(--topaz-2);} html[data-theme="dark"] .ic-files,html[data-theme="dark"] .ic-calendar,html[data-theme="dark"] .ic-browser,html[data-theme="dark"] .ic-workspace,html[data-theme="dark"] .ic-lens{color:var(--sapphire-2);} html[data-theme="dark"] .ic-ledger,html[data-theme="dark"] .ic-hive,html[data-theme="dark"] .ic-contacts,html[data-theme="dark"] .ic-actions{color:var(--jade-2);} /* ============================================================ COMMAND BAR — ⌘K. Keyboard-initiated → opens/closes INSTANTLY, no animation (§7). Box is the one translucent; scrim is a plain dim (never stack two translucents, §4). ============================================================ */ #cmd{position:fixed;inset:0;z-index:210;display:none;align-items:flex-start;justify-content:center; padding-top:16vh;background:color-mix(in srgb,var(--bg) 42%,transparent);} #cmd.on{display:flex;} .cmd-box{width:min(620px,92vw);background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur); border:1px solid var(--glass-border);border-radius:var(--r-xl);box-shadow:var(--glass-shadow);overflow:hidden;} .cmd-top{display:flex;align-items:center;gap:13px;padding:15px 18px;border-bottom:1px solid var(--line);} .cmd-top .cg{line-height:0;flex-shrink:0;} .cmd-top input{flex:1;border:0;outline:0;background:transparent;font-family:var(--ff-ui);font-size:17px;color:var(--ink-1);} .cmd-top input::placeholder{color:var(--ink-3);} .cmd-top .esc{font-family:var(--ff-mono);font-size:10.5px;color:var(--ink-3);border:1px solid var(--line);border-radius:var(--r-xs);padding:3px 7px;} .cmd-list{max-height:46vh;overflow:auto;padding:7px;} .cmd-head{font-family:var(--ff-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);padding:9px 11px 5px;} .cmd-row{display:flex;align-items:center;gap:13px;padding:10px 12px;border-radius:var(--r-md);cursor:pointer;transition:background-color .12s var(--ease-out);} .cmd-row.sel,.cmd-row:hover{background:var(--surface-2);} .cmd-ic{width:34px;height:34px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;flex-shrink:0; color:var(--ink-2);background:var(--surface-2);border:1px solid var(--line);} .cmd-ic svg{width:17px;height:17px;} /* "Ask JUWEL" row — handing her the job = the one amber act */ .cmd-ic.ask{background:var(--topaz);color:#201200;border-color:transparent;} .cmd-meta{flex:1;min-width:0;} .cmd-meta .ct{font-family:var(--ff-ui);font-size:14.5px;font-weight:500;color:var(--ink-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .cmd-meta .cs{font-size:12.5px;color:var(--ink-2);margin-top:1px;} .cmd-row .cgo{font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);} .cmd-foot{display:flex;align-items:center;gap:16px;padding:10px 16px;border-top:1px solid var(--line); font-family:var(--ff-mono);font-size:11px;color:var(--ink-3);} .cmd-foot .kk{border:1px solid var(--line);border-radius:var(--r-xs);padding:1px 5px;color:var(--ink-2);margin-right:5px;} /* ============================================================ FILES-IN-FOCUS RAIL — floating PANE (not chrome; §4 keeps chrome-glass to the four surfaces only) ============================================================ */ #focusrail{position:fixed;right:16px;top:54px;z-index:60;width:188px;display:flex;flex-direction:column;gap:5px; padding:9px;border-radius:var(--r-lg);opacity:0;transform:translateX(12px);pointer-events:none; background:var(--surface);border:1px solid var(--line);box-shadow:inset 0 1px 0 var(--edge),var(--shadow-2); transition:opacity .18s var(--ease-out), transform .18s var(--ease-out);} #focusrail.show{opacity:1;transform:none;pointer-events:auto;} body:not([data-stage="desktop"]) #focusrail{display:none;} .fr-h{display:flex;align-items:center;gap:6px;padding:3px 6px 6px;font-family:var(--ff-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);border-bottom:1px solid var(--line-2);margin-bottom:2px;} .fr-h svg{width:12px;height:12px;color:var(--ink-3);} .fr-h em{margin-left:auto;font-style:normal;color:var(--ink-2);font-weight:600;} .fr-item{display:flex;align-items:center;gap:8px;width:100%;border:0;background:transparent;cursor:pointer;border-radius:var(--r-sm);padding:6px 7px;text-align:left;transition:background-color .14s var(--ease-out);} @media (hover:hover) and (pointer:fine){.fr-item:hover{background:var(--surface-2);}} .fr-ic{width:22px;height:22px;border-radius:var(--r-xs);display:grid;place-items:center;color:var(--ink-2);background:var(--surface-2);border:1px solid var(--line);flex-shrink:0;} .fr-ic svg{width:12px;height:12px;} .fr-n{flex:1;min-width:0;font-family:var(--ff-ui);font-size:12px;color:var(--ink-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .fr-x{width:16px;height:16px;flex-shrink:0;display:grid;place-items:center;color:var(--ink-3);border-radius:var(--r-xs);opacity:0;transition:opacity .14s var(--ease-out), color .14s var(--ease-out), background-color .14s var(--ease-out);} .fr-x svg{width:11px;height:11px;} .fr-item:hover .fr-x{opacity:1;} .fr-x:hover{background:var(--garnet-soft);color:var(--garnet);} @media (max-width:900px){ #focusrail{display:none!important;} } /* ============================================================ TOUR VIDEO — cinematic chrome around the live walkthrough, recut to FACET neutrals (candy purples/pinks retired) ============================================================ */ body.tour-video #chatbar, body.tour-video #focusrail, body.tour-video .help-menu, body.tour-video #compsay, body.tour-video #ccpanel{ display:none !important; } #tourvid{ position:fixed; inset:0; z-index:140; pointer-events:none; } #tourvid .tv-bars{ position:fixed; inset:0; pointer-events:none; box-shadow: inset 0 0 220px 40px rgba(12,10,6,.34); } #tourvid .tv-prog{ position:fixed; left:0; right:0; bottom:0; height:3px; background:var(--line); opacity:0; transition:opacity .3s var(--ease-out); } #tourvid .tv-prog.show{ opacity:1; } #tourvid .tv-prog i{ display:block; height:100%; width:0; background:var(--topaz); } /* caption card — a dark PANE (the record voice reads calmly here) */ #tourvid .tv-lower{ position:fixed; left:50%; bottom:46px; transform:translateX(-50%) translateY(14px); display:flex; align-items:center; gap:13px; max-width:min(760px,86vw); font-family:var(--ff-ui); font-size:20px; line-height:1.4; font-weight:600; color:var(--receipt-ink); letter-spacing:-.012em; background:var(--receipt-bg); border:1px solid rgba(255,255,255,.08); padding:16px 24px 16px 18px; border-radius:var(--r-lg); box-shadow:inset 0 1px 0 rgba(255,255,255,.06), var(--shadow-3); opacity:0; visibility:hidden; transition:opacity .3s var(--ease-out), transform .3s var(--ease-out); } #tourvid .tv-lower.show{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); } #tourvid .tvc-av{ flex-shrink:0; line-height:0; filter:drop-shadow(0 4px 10px var(--amber-glow)); animation:tvFloat 3.4s ease-in-out infinite; } #tourvid .tvc-who{ flex-shrink:0; align-self:flex-start; margin-top:3px; font-family:var(--ff-mono); font-size:11px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--topaz-2); } #tourvid .tvc-txt{ text-wrap:pretty; } #tourvid .tvc-txt b{ color:var(--topaz-2); font-weight:700; } @media (max-width:640px){ #tourvid .tv-lower{ font-size:16.5px; bottom:24px; padding:13px 18px; } } /* poster */ #tourvid .tv-poster{ position:fixed; inset:0; pointer-events:auto; display:grid; place-items:center; background:color-mix(in srgb,var(--bg) 88%,transparent); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); transition:opacity .3s var(--ease-out), visibility .3s; } #tourvid .tv-poster.gone{ opacity:0; visibility:hidden; } #tourvid .tv-card{ text-align:center; max-width:440px; padding:0 28px; animation:tvPop .3s var(--ease-out) both; } @keyframes tvPop{ from{ opacity:0; transform:translateY(8px) scale(.98); } to{ opacity:1; transform:none; } } #tourvid .tv-gem{ display:inline-block; filter:drop-shadow(0 14px 30px var(--amber-glow)); margin-bottom:18px; line-height:0; animation:tvFloat 4s ease-in-out infinite; } @keyframes tvFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-7px); } } #tourvid .tv-kicker{ font-family:var(--ff-mono); font-size:12px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--topaz-ink); } #tourvid .tv-title{ font-family:var(--ff-display); font-size:clamp(30px,4vw,40px); font-weight:700; letter-spacing:-.025em; color:var(--ink-1); margin:6px 0 10px; line-height:1.05; } #tourvid .tv-sub{ font-family:var(--ff-ui); font-size:15px; line-height:1.5; color:var(--ink-2); margin-bottom:24px; text-wrap:pretty; } /* the "Play" CTA = JUWEL starting to act → the one amber act */ #tourvid .tv-play{ display:inline-flex; align-items:center; gap:10px; font-family:var(--ff-ui); font-size:14px; font-weight:600; color:#201200; background:var(--topaz); border:1px solid transparent; border-radius:var(--r-md); padding:12px 22px; cursor:pointer; transition:transform .12s var(--ease-out), background-color .15s var(--ease-out); } @media (hover:hover) and (pointer:fine){ #tourvid .tv-play:hover{ background:var(--topaz-2); } } #tourvid .tv-play:active{ transform:scale(.98); } #tourvid .tv-play svg{ fill:#201200; } /* ============================================================ COMPANION — floating JUWEL (she is JUWEL → amber allowed). Still at idle (§7): no ambient float; motion is following/events. ============================================================ */ #companion{position:fixed;right:22px;bottom:78px;z-index:88;line-height:0;cursor:pointer; filter:drop-shadow(0 10px 22px var(--amber-glow)); transition:opacity .5s var(--ease) .3s, transform .3s var(--ease);} body:not([data-stage="desktop"]) #companion{opacity:0;transform:translateY(16px) scale(.8);pointer-events:none;} #companion:hover{transform:translateY(-3px);} @media (prefers-reduced-motion:no-preference){#companion{animation:comp-float 6s var(--ease-inout) infinite;}} @keyframes comp-float{0%,100%{transform:translateY(0);}50%{transform:translateY(-7px);}} #compgem{display:inline-block;transform-origin:50% 82%;width:60px;height:60px;} #compgem img{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 8px 16px rgba(255,106,0,.28));pointer-events:none;-webkit-user-select:none;user-select:none;} #compgem.pop{animation:gem-pop .55s var(--ease);} @keyframes gem-pop{0%{transform:scale(1) rotate(0);}34%{transform:scale(.84) rotate(-6deg);}68%{transform:scale(1.07) rotate(5deg);}100%{transform:scale(1) rotate(0);}} .comp-say{position:absolute;right:calc(100% + 14px);bottom:14px;width:max-content;max-width:300px; background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);border-bottom-right-radius:var(--r-sm); box-shadow:inset 0 1px 0 var(--edge),var(--shadow-3);padding:13px 16px;opacity:0;transform:translateX(6px) scale(.98);transform-origin:right bottom; pointer-events:none;transition:opacity .18s var(--ease-out), transform .18s var(--ease-out);} .comp-say.show{opacity:1;transform:none;pointer-events:auto;} .comp-say .cst{font-family:var(--ff-ui);font-style:normal;font-size:15px;line-height:1.45;color:var(--ink-1);} .comp-say .csa{display:flex;gap:9px;margin-top:12px;} .comp-say .csbtn{font-family:var(--ff-ui);font-size:12.5px;font-weight:600;border-radius:var(--r-md);padding:8px 14px;cursor:pointer;border:1px solid transparent;background:transparent;white-space:nowrap;transition:transform .12s var(--ease-out), border-color .14s var(--ease-out), background-color .14s var(--ease-out), color .14s var(--ease-out);} /* "go / have her do it" = the one amber act; "no" = quiet ghost */ .comp-say .csbtn.go{background:var(--topaz);color:#201200;} @media (hover:hover) and (pointer:fine){.comp-say .csbtn.go:hover{background:var(--topaz-2);}} .comp-say .csbtn.go:active{transform:scale(.98);} .comp-say .csbtn.no{color:var(--ink-2);border-color:var(--line);background:transparent;} @media (hover:hover) and (pointer:fine){.comp-say .csbtn.no:hover{color:var(--ink-1);background:var(--surface-2);}} .comp-say .csx{position:absolute;top:8px;right:9px;color:var(--ink-3);cursor:pointer;display:inline-flex;} .comp-say .csx svg{width:13px;height:13px;} /* ─── toast — PANE material, bottom-center, translateY entry 180ms ─── */ #toast{position:fixed;left:50%;bottom:84px;transform:translateX(-50%) translateY(10px);z-index:230; background:var(--surface);color:var(--ink-1);border:1px solid var(--line); box-shadow:inset 0 1px 0 var(--edge),var(--shadow-2); font-family:var(--ff-ui);font-size:13.5px;font-weight:500; padding:11px 18px;border-radius:var(--r-md);opacity:0;pointer-events:none; display:inline-flex;align-items:center;gap:9px;transition:opacity .18s var(--ease-out), transform .18s var(--ease-out);max-width:80vw;} #toast.show{opacity:1;transform:translateX(-50%) translateY(0);} #toast svg{width:16px;height:16px;color:var(--jade);} /* generic small mono chip for in-window use */ .chip-mono{display:inline-flex;align-items:center;gap:8px;font-family:var(--ff-mono);font-size:12px;color:var(--ink-1); background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:7px 11px;} .chip-mono .pr{color:var(--ink-3);} .chip-mono .cp{margin-left:2px;color:var(--ink-3);cursor:pointer;display:inline-flex;} .chip-mono .cp:hover{color:var(--ink-1);} .chip-mono .cp svg{width:13px;height:13px;} /* ============================================================ v2 — chat-first OS: left rail · chat bar · following companion ============================================================ */ /* dock → refined vertical left rail (chrome glass) + soft color identity */ #dock{left:16px;top:50%;right:auto;bottom:auto;transform:translateY(-50%);flex-direction:column;align-items:center;gap:5px; padding:8px 7px;border-radius:var(--r-xl); background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur); border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);} body:not([data-stage="desktop"]) #dock{opacity:0;transform:translateY(-50%) translateX(-18px);pointer-events:none;transition:opacity .25s var(--ease-out), transform .25s var(--ease-out);} .dock-app{width:42px;height:42px;border-radius:var(--r-md);transform-origin:left center;} /* Soft colored wells on the rail — clean, readable, human */ #dock .dock-app{background:transparent;border:1px solid transparent;color:var(--ink-2); transition:transform .18s var(--ease-out), background-color .16s var(--ease-out), color .16s var(--ease-out), border-color .16s var(--ease-out), box-shadow .16s var(--ease-out);} #dock .dock-app svg{width:21px;height:21px;stroke-width:1.75;transition:color .16s var(--ease-out);} /* per-app accent (splash, not rainbow noise) */ #dock .dock-app.ic-chat{--dock-a:var(--topaz);--dock-ink:var(--topaz-deep);} #dock .dock-app.ic-files{--dock-a:var(--sapphire);--dock-ink:var(--sapphire-deep);} #dock .dock-app.ic-mail{--dock-a:#F0683C;--dock-ink:#B8431F;} #dock .dock-app.ic-calendar{--dock-a:#3D7BE0;--dock-ink:#1F4F9E;} #dock .dock-app.ic-browser{--dock-a:#5B7CFF;--dock-ink:#2F4FBF;} #dock .dock-app.ic-ide{--dock-a:#7B6BA8;--dock-ink:#4A3D72;} #dock .dock-app.ic-terminal{--dock-a:var(--ink-2);--dock-ink:var(--ink-1);} #dock .dock-app.ic-studio{--dock-a:#E85D8C;--dock-ink:#B02D5C;} #dock .dock-app.ic-ledger{--dock-a:var(--jade);--dock-ink:var(--jade-deep);} #dock .dock-app.ic-settings{--dock-a:var(--ink-3);--dock-ink:var(--ink-1);} #dock .dock-app.ic-home,#dock .dock-app.ic-brain{--dock-a:var(--topaz);--dock-ink:var(--topaz-deep);} #dock .dock-app.ic-workspace{--dock-a:var(--sapphire);--dock-ink:var(--sapphire-deep);} #dock .dock-app.ic-hive,#dock .dock-app.ic-contacts{--dock-a:#48A98A;--dock-ink:#1F6B54;} #dock .dock-app.ic-actions{--dock-a:#21B481;--dock-ink:#0A5C3E;} #dock .dock-app.ic-system{--dock-a:#6B7A99;--dock-ink:#3D4A66;} #dock .dock-app.ic-lens{--dock-a:var(--sapphire);--dock-ink:var(--sapphire-deep);} #dock .dock-app.ic-rewind{--dock-a:#8B7A9E;--dock-ink:#5A4A6E;} @media (hover:hover) and (pointer:fine){ #dock .dock-app:hover{ background:color-mix(in srgb,var(--dock-a,var(--topaz)) 14%,var(--surface)); color:var(--dock-ink,var(--ink-1)); border-color:color-mix(in srgb,var(--dock-a,var(--topaz)) 22%,var(--line)); } #dock .dock-app:hover svg{color:var(--dock-ink,var(--ink-1));} } #dock .dock-app.running{color:var(--dock-ink,var(--ink-1));} #dock .dock-app.running svg{color:var(--dock-ink,var(--ink-1));} #dock .dock-app.focused-app{ color:var(--dock-ink,var(--ink-1)); background:color-mix(in srgb,var(--dock-a,var(--topaz)) 18%,var(--surface)); border-color:color-mix(in srgb,var(--dock-a,var(--topaz)) 28%,var(--line)); box-shadow:inset 0 1px 0 var(--edge),0 0 0 1px color-mix(in srgb,var(--dock-a,var(--topaz)) 12%,transparent); } #dock .dock-app.focused-app svg{color:var(--dock-ink,var(--ink-1));} html[data-theme="dark"] #dock .dock-app.focused-app{ background:color-mix(in srgb,var(--dock-a,var(--topaz)) 22%,var(--surface)); } .dock-app svg{width:20px;height:20px;} .dock-app:hover{transform:translateX(3px) scale(1.05);} .dock-app:hover + .dock-app{transform:none;} .dock-app:active{transform:scale(.94);transition:transform .12s var(--ease-out);} .dock-app .run{position:absolute;left:-7px;top:50%;bottom:auto;transform:translateY(-50%) scaleY(.4);width:3px;height:18px;border-radius:3px; background:var(--dock-a,var(--ink-3));opacity:0;transition:opacity .18s var(--ease-out), transform .18s var(--ease-out);} .dock-app.running .run{opacity:.75;transform:translateY(-50%) scaleY(1);} .dock-app.focused-app .run{opacity:1;background:var(--dock-a,var(--topaz));} .dock-app .tip{bottom:auto;left:calc(100% + 14px);top:50%;transform:translateX(-4px) translateY(-50%); display:flex;flex-direction:column;gap:1px;align-items:flex-start;} .dock-app:hover .tip{transform:translateX(0) translateY(-50%);} .dock-app .tip .ts{margin-left:0;} .dock-div{width:22px;height:1px;align-self:center;margin:4px 0;background:var(--line);} #dock [data-dock] svg{color:inherit;} /* JUWEL summon gem — the entity, subtle */ .dock-gem{width:48px;height:48px;border:0;background:transparent;cursor:pointer;line-height:0;display:grid;place-items:center;flex-shrink:0; border-radius:13px;transition:transform .18s var(--ease), background .18s;filter:drop-shadow(0 2px 7px var(--amber-glow));} .dock-gem:hover{transform:scale(1.12) translateX(2px);background:var(--surface-2);} .dock-gem:active{transform:scale(.95);} /* ============================================================ CHATBAR — THE hero control (§9). PANE material, generous. Focus = topaz border + soft amber ring + one glint sweep. Send = the one amber act (handing her the job). Mic/attach = ghosts. ============================================================ */ #chatbar{position:fixed;left:calc(50% + 32px);bottom:46px;transform:translateX(-50%);z-index:96;overflow:hidden; width:min(660px,calc(100vw - 150px));display:flex;align-items:flex-end;gap:8px;padding:7px 7px 7px 18px; background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl); box-shadow:inset 0 1px 0 var(--edge),var(--shadow-3); transition:opacity .35s var(--ease-out) .2s, transform .3s var(--ease-out), border-color .15s var(--ease-out), box-shadow .18s var(--ease-out);} body:not([data-stage="desktop"]) #chatbar{opacity:0;transform:translateX(-50%) translateY(18px);pointer-events:none;} #chatbar.focused{border-color:var(--topaz);box-shadow:inset 0 1px 0 var(--edge),0 0 0 3px var(--amber-glow),var(--shadow-3);} /* one glint sweep on focus / first-run attention */ #chatbar::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:34%;pointer-events:none;z-index:2; background:linear-gradient(100deg,transparent 8%,color-mix(in srgb,var(--topaz) 28%,transparent) 50%,transparent 92%); transform:translateX(-140%) skewX(-18deg);opacity:0;} #chatbar.focused::after,#chatbar.cb-attn::after{animation:facet-glint .55s var(--ease-out);} #chatbar .cb-gem{flex-shrink:0;line-height:0;align-self:center;filter:drop-shadow(0 2px 6px var(--amber-glow));} #chatbar-input{flex:1;min-width:0;border:0;outline:0;background:transparent;resize:none; font-family:var(--ff-ui);font-size:15px;line-height:1.5;color:var(--ink-1);max-height:120px;padding:9px 2px;position:relative;z-index:1;} #chatbar-input::placeholder{color:var(--ink-3);} #chatbar .cb-actions{display:flex;align-items:center;gap:3px;align-self:flex-end;position:relative;z-index:1;} .cb-btn{width:40px;height:40px;border:0;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center; background:transparent;color:var(--ink-3);transition:background-color .15s var(--ease-out), color .15s var(--ease-out), transform .12s var(--ease-out);} @media (hover:hover) and (pointer:fine){.cb-btn:hover{background:var(--surface-2);color:var(--ink-1);}} .cb-btn:active{transform:scale(.94);} .cb-btn svg{width:17px;height:17px;} .cb-send{background:var(--topaz);color:#201200;} @media (hover:hover) and (pointer:fine){.cb-send:hover{background:var(--topaz-2);color:#201200;}} .cb-send svg{width:16px;height:16px;} /* following companion (overrides) */ #companion{right:auto;bottom:auto;left:0;top:0;will-change:transform;} #companion.following{animation:none!important;} body.no-follow #companion{opacity:0;pointer-events:none;} .comp-say{right:calc(100% + 6px);bottom:6px;} /* JUWEL's right-click help menu reuses .mb-menu; ensure it floats above */ #help-menu{z-index:240;min-width:248px;} /* ══════ floating window desktop ══════ */ #stage{position:fixed;inset:40px 0 0 84px;z-index:40;overflow:hidden;} body:not([data-stage="desktop"]) #stage{pointer-events:none;opacity:0;} @media (max-width:860px){ #stage{left:0;} } /* floating window = near-opaque PANE (§4). NO backdrop-filter. */ .fwin{position:absolute;display:flex;flex-direction:column;min-width:300px;min-height:200px; background:var(--surface); border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden; box-shadow:inset 0 1px 0 var(--edge),var(--shadow-2); transition:box-shadow .2s var(--ease-out), border-color .18s var(--ease-out);} /* one glint sweep on window open (window activation, §4) */ .fwin::after{content:'';position:absolute;top:0;bottom:0;left:-40%;width:30%;pointer-events:none;z-index:5; background:linear-gradient(100deg,transparent 8%,color-mix(in srgb,var(--topaz) 22%,transparent) 50%,transparent 92%); transform:translateX(-140%) skewX(-18deg);opacity:0;} .fwin.opening::after{animation:facet-glint .5s var(--ease-out);} .fwin.focused{box-shadow:inset 0 1px 0 var(--edge),var(--shadow-3);border-color:color-mix(in srgb,var(--ink) 16%,var(--line));} .fwin:not(.focused){box-shadow:inset 0 1px 0 var(--edge),var(--shadow-1);} .fwin:not(.focused) .fwin-bar{opacity:.78;} .fwin.opening{animation:fwin-open .2s var(--ease-out);} @keyframes fwin-open{from{opacity:0;transform:translateY(8px) scale(.985);}to{opacity:1;transform:none;}} .fwin.closing{opacity:0;transform:translateY(6px) scale(.985);pointer-events:none;transition:opacity .15s var(--ease-out), transform .15s var(--ease-out);} .fwin.minimized{opacity:0;transform:translateY(40vh) scale(.4);pointer-events:none;transition:opacity .2s var(--ease-out), transform .2s var(--ease-out);transform-origin:bottom left;} .fwin.maximized{border-radius:0;border-color:transparent;} .fwin.dragging{transition:none;cursor:grabbing;} .fwin-bar{display:flex;align-items:center;gap:9px;height:48px;padding:0 10px 0 15px;flex-shrink:0;cursor:grab;user-select:none;position:relative;z-index:4; border-bottom:1px solid var(--line);background:transparent;} .fwin-bar:active{cursor:grabbing;} .fwin-ic{width:25px;height:25px;border-radius:var(--r-sm);display:grid;place-items:center;flex-shrink:0; /* inherits soft gem tile from .ic-* classes on the same element */} .fwin-ic svg{width:14px;height:14px;stroke-width:1.85;} .fwin-tt{font-family:var(--ff-display);font-size:14px;font-weight:600;letter-spacing:-.012em;color:var(--ink-1);white-space:nowrap;flex-shrink:0;} .fwin-sub{font-family:var(--ff-mono);font-size:10px;letter-spacing:.06em;text-transform:lowercase;color:var(--ink-3);white-space:nowrap;flex-shrink:0; padding-left:9px;margin-left:3px;border-left:1px solid var(--line-2);} .fwin-sp{flex:1;} .fwin-ctl{display:flex;align-items:center;gap:4px;flex-shrink:0;} .fwc{width:28px;height:28px;border:0;background:transparent;color:var(--ink-3);border-radius:var(--r-sm);cursor:pointer;display:grid;place-items:center; transition:background-color .14s var(--ease-out), color .14s var(--ease-out);} @media (hover:hover) and (pointer:fine){.fwc:hover{background:var(--surface-2);color:var(--ink-1);}} .fwc.close:hover{background:var(--garnet-soft);color:var(--garnet);} .fwc svg{width:15px;height:15px;} .fwin-body{flex:1;min-height:0;overflow:auto;position:relative;} .fwin-body::-webkit-scrollbar{width:10px;} .fwin-body::-webkit-scrollbar-thumb{background:var(--line);border-radius:5px;border:2px solid var(--surface);} .fwin-body::-webkit-scrollbar-thumb:hover{background:var(--ink-3);} .fwin.resizing{transition:none;user-select:none;} /* Resize grips — both bottom corners */ .fwin-grip{position:absolute;bottom:0;width:22px;height:22px;z-index:8;touch-action:none;} .fwin-grip-br{right:0;cursor:nwse-resize;} .fwin-grip-bl{left:0;cursor:nesw-resize;} .fwin-grip-br::after{content:'';position:absolute;right:5px;bottom:5px;width:8px;height:8px; border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);border-radius:0 0 3px 0;opacity:.55;} .fwin-grip-bl::after{content:'';position:absolute;left:5px;bottom:5px;width:8px;height:8px; border-left:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);border-radius:0 0 0 3px;opacity:.55;} .fwin:hover .fwin-grip::after,.fwin.focused .fwin-grip::after{opacity:.85;} body[data-device="phone"] .fwin-grip{display:none;} /* full-height apps fill their window */ .fwin[data-app="ledger"] .app,.fwin[data-app="settings"] .app,.fwin[data-app="chat"] .app{height:100%;} .fwin[data-app="chat"] .chatapp{height:100%;} /* ══════ adaptive: phone — one full-screen app + bottom dock ══════ */ body[data-device="phone"] #stage{inset:40px 0 64px 0;} body[data-device="phone"] .fwin{inset:0!important;width:auto!important;height:auto!important; border-radius:0;border:0;box-shadow:none;opacity:1;} @media (prefers-reduced-motion:no-preference){ body[data-device="phone"] .fwin.focused{animation:phone-app .2s var(--ease-out) both;} } @keyframes phone-app{from{transform:translateY(8px);}to{transform:none;}} body[data-device="phone"] .fwin:not(.focused){display:none;} body[data-device="phone"] .fwin.focused{box-shadow:none;} body[data-device="phone"] .fwin::after{display:none;} body[data-device="phone"] .fwin-grip{display:none;} body[data-device="phone"] .fwin-bar{cursor:default;height:42px;} body[data-device="phone"] .fwin .max{display:none;} body[data-device="phone"] #dock{left:50%;top:auto;bottom:0;transform:translateX(-50%);flex-direction:row;align-items:center;gap:4px; width:100%;max-width:none;border-radius:0;border-left:0;border-right:0;border-bottom:0;justify-content:space-around;padding:8px 6px calc(8px + env(safe-area-inset-bottom));} body[data-device="phone"] .dock-app{width:40px;height:40px;transform-origin:center;} body[data-device="phone"] .dock-app:hover{transform:none;} body[data-device="phone"] .dock-app:active{transform:scale(.9);} body[data-device="phone"] .dock-app .tip{display:none;} body[data-device="phone"] .dock-app .run{left:50%;top:auto;bottom:-4px;transform:translateX(-50%);} body[data-device="phone"] .dock-div{display:none;} body[data-device="phone"] #chatbar{display:none;} body[data-device="phone"] #companion{bottom:74px;right:14px;} body[data-device="phone"] #juwel-cursor{display:none;} body[data-device="phone"] .mb-kbtn .kbd,body[data-device="phone"] #mb-clock,body[data-device="phone"] #mb-active{display:none;} body[data-device="phone"] .mb-kbtn span:not(.kbd){display:none;} /* chat bar without leading face — give the text a touch more breathing room */ #chatbar{padding-left:18px;} #chatbar-disclaimer{position:fixed;left:calc(50% + 32px);bottom:18px;transform:translateX(-50%);z-index:95; width:min(720px,calc(100vw - 150px));text-align:center;font-family:var(--ff-ui);font-size:11px;line-height:1.3; color:var(--ink-3);pointer-events:none;padding:0 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; transition:opacity .35s var(--ease-out) .2s;} body:not([data-stage="desktop"]) #chatbar-disclaimer{opacity:0;} body.chat-active #chatbar-disclaimer{opacity:0;} body[data-device="phone"] #chatbar-disclaimer{display:none;} /* JUWEL's synthetic cursor — her hands on the OS (she is JUWEL → amber) */ #juwel-cursor{position:fixed;left:0;top:0;z-index:236;width:26px;height:26px;pointer-events:none; opacity:0;transform:translate(-100px,-100px);transition:opacity .3s var(--ease-out); filter:drop-shadow(0 3px 7px rgba(20,12,0,.3));will-change:transform;} #juwel-cursor.on{opacity:1;} #juwel-cursor svg{width:100%;height:100%;transition:transform .12s var(--ease-out);} #juwel-cursor.press svg{transform:scale(.78);} .tcur-ripple{position:fixed;z-index:235;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%; border:2px solid var(--topaz);pointer-events:none;animation:tcur-rip .6s var(--ease-out) forwards;} @keyframes tcur-rip{from{transform:scale(.4);opacity:.85;}to{transform:scale(3.2);opacity:0;}} /* ============================================================ Reduced motion — crossfades only (§7); glint → gentle opacity pulse ============================================================ */ @media (prefers-reduced-motion:reduce){ *{animation-duration:.001ms!important;animation-iteration-count:1!important;} .fd-composer.focused::after,#chatbar.focused::after,#chatbar.cb-attn::after,.fwin.opening::after{ animation:facet-glint-rm .15s ease both;} } @keyframes facet-glint-rm{0%{opacity:0;}50%{opacity:.5;transform:none;left:0;width:100%;}100%{opacity:0;}}