/* ============================================================ JUWEL OS · the shell: LUXLIQ (v3, 2026-07-13) The vessel, not the stone. Canonical spec: docs/brand/LUXLIQ_BRAND_SYSTEM.md (v0.2, lava-lamp core), read with docs/brand/BRAND_SYSTEM.md (v2) for the parts LuxLiq does not restate (claims discipline, no-italics, focus a11y). Runtime token truth: juwel-landing/juwel-ds.css + luxliq.css. FACET's cut-stone doctrine (still wallpaper, near-opaque panes, one neutral chrome-glass) is RETIRED as the default feel. The OS is now the glass vessel of a luxury lava lamp: the desktop looks into a living column of candy fluid (the body-level .lx-lamp, mounted in os.html, shows through #room), windows are glass chambers with an inner lamp glow, menubar/dock are wet chrome glass with a condensation highlight, and the front door reads as the lamp's hero within two seconds. Ink still means "you act"; nectar (var(--topaz), the LuxLiq name for amber) still means "JUWEL acts / it's on the record." That law survives the move. The glint survives too, recast as a wet-glass highlight rather than a facet catching light. Token layering unchanged: paper/ink/surface/line/shadow resolve from juwel-ds.css (now itself LuxLiq-authored) → vext.css → juwel-os-bridge.css. luxliq.css layers the fluid-physics tokens (--visc-*, --ease-viscous/-flow/-buoyant, --lx-*) and the .lx-vessel/.lx-glass/.lx-blob/.lx-lamp primitives this file composes from. 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 rock/gem rig, driven by the component, not chrome. Her convection is owned by juwel-entity.js and os/juwel-os-liquid.css (a separate concern); this file only frames her: the room around her is now a living vessel too, so she is the heat source inside a lamp that is also alive, not a moving figure pinned to a still backdrop. */ @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;} /* LUXLIQ heat model (§3A) — thinking/acting speeds + brightens her already- canonical convection (additive only; th-rock/th-sheen/th-tw untouched above). theron-entity.js adds .je-hot on thinking/excited/wow only. */ @media (prefers-reduced-motion:no-preference){ .th-rock.je-hot{animation-duration:calc(5.4s * .5);filter:brightness(1.08) saturate(1.12);} .th-rock.je-hot .th-sheen{animation-duration:calc(5.2s * .55);} } 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: the desktop is a glass vessel (LUXLIQ §3A.5, §8.2) #room used to be an opaque, still faceted backdrop that painted over everything behind it, then (2026-07-13 v3) was thinned to let the body-level .lx-lamp bleed through at the edges. Verified by screenshot (R4, 2026-07-13): that bleed-through read as flat — #room sits inside #os-shell, a body-level sibling of .lx-lamp that luxliq.css's `.lx-lamp ~ *{z-index:1}` rule stacks ABOVE the lamp, so #room's own reading-well wash painted over the lamp before it ever reached the eye, and the lamp's low alpha (.22) had nothing left after that. FIX: #room is now itself a lamp host — os.html gives it `data-lx-lamp="lava"` so luxliq-lamp.js appends real .lx-blob children directly INSIDE #room. Children paint on top of a parent's own background, so the blobs are no longer behind anything; they sit correctly behind windows/dock/menubar (all of which keep their own explicit z-index) and above the reading well. --lx-fluid-alpha is turned up locally (inherits to those children only) so they read as the board's living lava, not a wash. Colors still resolve from the brand token layer; nothing here is a hard-coded FACET override. ============================================================ */ /* Room: an illuminated vessel, not a still backdrop; a soft base glow (the lamp's warmth pooling low, as if this is its base) plus peripheral gem refractions, thinning toward the center so the working area reads calmly while the room-hosted lava blobs (below) read clearly at the margins. */ #room{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none; --lx-fluid-alpha:.4; /* R4: board strength, not a barely-there wash */ background: /* illuminated base: her light pooling low in the vessel */ radial-gradient(72% 46% at 50% 118%, color-mix(in srgb,var(--topaz) 22%,transparent), transparent 74%), /* peripheral gem refractions: soft, low chroma, at the vessel walls */ radial-gradient(48vw 42vh at 86% 10%, color-mix(in srgb,var(--sapphire) 13%,transparent), transparent 62%), radial-gradient(42vw 36vh at 6% 16%, color-mix(in srgb,var(--garnet) 11%,transparent), transparent 58%), radial-gradient(30vw 26vh at 68% 68%, color-mix(in srgb,var(--jade) 8%,transparent), transparent 56%), /* the quiet reading well: calmer behind the work, sheer at the rim so the room-hosted lava blobs read clearly at the margins */ radial-gradient(64% 60% at 50% 42%, color-mix(in srgb,var(--surface) 78%,transparent) 0%, color-mix(in srgb,var(--surface) 42%,transparent) 60%, color-mix(in srgb,var(--surface) 10%,transparent) 100%);} html[data-theme="dark"] #room{ /* 2026-07-13 founder fix: the amber-heavy jewelry-case wash read as "gross brown", not lit glass. Stage now sits on the clean neutral charcoal token (--paper #0E0E11 / --surface #17171B) with only a whisper of gem color at the far margins; the .lx-blob children (appended by luxliq-lamp.js, see comment above) carry the candy lava life instead of the static background doing it. */ --lx-fluid-alpha:.46; background: /* faint floor warmth only — no longer a brown flood */ radial-gradient(72% 46% at 50% 118%, color-mix(in srgb,var(--topaz) 6%,transparent), transparent 70%), radial-gradient(48vw 42vh at 86% 10%, color-mix(in srgb,var(--sapphire) 5%,transparent), transparent 58%), radial-gradient(42vw 36vh at 6% 16%, color-mix(in srgb,var(--garnet) 4%,transparent), transparent 55%), radial-gradient(30vw 26vh at 68% 68%, color-mix(in srgb,var(--jade) 4%,transparent), transparent 55%), /* clean charcoal reading well — near-solid neutral, not velvet-brown */ radial-gradient(64% 60% at 50% 42%, color-mix(in srgb,var(--surface) 88%,transparent) 0%, color-mix(in srgb,var(--surface) 60%,transparent) 60%, color-mix(in srgb,var(--surface) 20%,transparent) 100%), var(--paper);} /* R4 2026-07-13: juwel-os-apps.css's wallpaper picker (body[data-wp="…"] #room) repaints #room as the retired FACET diagonal-cut planes, and wins on specificity because applyPersonal() defaults body[data-wp] to "slate" on every boot — so the flat diagonals were showing regardless of theme. Not our file to edit; instead the room's own living-lamp background (identical to the rule above) is kept authoritative for every wallpaper value so the vessel never reverts to flat cut stone. */ body[data-wp] #room{background: radial-gradient(72% 46% at 50% 118%, color-mix(in srgb,var(--topaz) 22%,transparent), transparent 74%), radial-gradient(48vw 42vh at 86% 10%, color-mix(in srgb,var(--sapphire) 13%,transparent), transparent 62%), radial-gradient(42vw 36vh at 6% 16%, color-mix(in srgb,var(--garnet) 11%,transparent), transparent 58%), radial-gradient(30vw 26vh at 68% 68%, color-mix(in srgb,var(--jade) 8%,transparent), transparent 56%), radial-gradient(64% 60% at 50% 42%, color-mix(in srgb,var(--surface) 78%,transparent) 0%, color-mix(in srgb,var(--surface) 42%,transparent) 60%, color-mix(in srgb,var(--surface) 10%,transparent) 100%) !important;} html[data-theme="dark"] body[data-wp] #room{background: radial-gradient(72% 46% at 50% 118%, color-mix(in srgb,var(--topaz) 6%,transparent), transparent 70%), radial-gradient(48vw 42vh at 86% 10%, color-mix(in srgb,var(--sapphire) 5%,transparent), transparent 58%), radial-gradient(42vw 36vh at 6% 16%, color-mix(in srgb,var(--garnet) 4%,transparent), transparent 55%), radial-gradient(30vw 26vh at 68% 68%, color-mix(in srgb,var(--jade) 4%,transparent), transparent 55%), radial-gradient(64% 60% at 50% 42%, color-mix(in srgb,var(--surface) 88%,transparent) 0%, color-mix(in srgb,var(--surface) 60%,transparent) 60%, color-mix(in srgb,var(--surface) 20%,transparent) 100%), var(--paper) !important;} /* CODE FREEZE base: still OS floor (lava lamp BG removed — quiet wash only). */ #room::before{content:'';position:absolute;inset:auto 0 -6% 0;height:38%;pointer-events:none; background:radial-gradient(60% 100% at 50% 100%, rgba(20,18,12,.04), transparent 72%);filter:none;} #room::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:2; 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 stay retired (display:none, not removed — the JS may still reference them). The living lava is now real .lx-blob children luxliq-lamp.js appends directly into #room (os.html: #room has data-lx-lamp="lava"), which paint on top of #room's own background and correctly behind every window/dock/ menubar (each keeps its own explicit z-index above). */ #room .grid,#room .blob{display:none;} #room .lx-blob{position:absolute;z-index:1;} /* ============================================================ 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 (LUXLIQ §5, §9.2; BRAND_SYSTEM §9 for layout): the OS is the front door, and the front door is the lamp's hero: she is the heat source over an illuminated base glow, with living wax blobs rising behind her, so this reads as a luxury lava lamp inside two seconds (LUXLIQ §16 rubric). ─── */ .fd-gem{display:inline-flex;line-height:0;position:relative;cursor:default;width:148px;height:148px;} /* CODE FREEZE: still front door (lava ambient retired with lamp BG removal). */ .fd-gem::before{content:none;display:none;} .fd-gem img{width:100%;height:100%;object-fit:contain;display:block; filter:drop-shadow(0 14px 28px rgba(20,18,12,.16)); 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(-8px);}} /* Ambient lava blobs on the front door stay retired (still desk). */ #frontdoor::before,#frontdoor::after{content:none;display:none;animation:none!important;} .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:-.028em; font-size:clamp(37px,5.4vw,58px);line-height:1.03;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: a glass vessel, per LUXLIQ §8.1 "glass vessel" (clear shell, edge light, wet highlight). Meniscus focus comes free from the .lx-meniscus class already on this element in os.html. The one molten-nectar 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 1.6px 0 color-mix(in srgb,var(--topaz) 44%,transparent),var(--inner-glow),var(--shadow-3); transition:border-color .15s var(--ease-out), box-shadow .18s var(--ease-viscous,var(--ease-out));} .fd-composer.focused{border-color:var(--topaz);box-shadow:inset 0 1.6px 0 color-mix(in srgb,var(--topaz) 62%,transparent),0 0 0 3px color-mix(in srgb,var(--topaz) 22%,transparent),var(--shadow-3);} /* one wet-glass glint sweep on first focus (the vessel catching light, not a cut facet; same keyframe, LuxLiq framing) */ .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);} /* the one molten-nectar act: hard-candy gel lit from within, not a flat fill (LUXLIQ §8.1 "hard candy gel"; §6.2 amber/nectar law) */ .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);color:#201200;font-family:var(--ff-ui);font-weight:600;font-size:14px;letter-spacing:-.01em; background:linear-gradient(160deg,var(--topaz-2),var(--topaz) 62%); box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 0 20px -8px rgba(255,255,255,.35),0 8px 22px -12px var(--amber-glow); transition:transform .12s var(--ease-out), box-shadow .18s var(--ease-viscous,var(--ease-out)), background-color .15s var(--ease-out);} @media (hover:hover) and (pointer:fine){.fd-enter:hover{background:linear-gradient(160deg,var(--topaz-2),var(--topaz-2) 62%); box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 0 22px -8px rgba(255,255,255,.4),0 10px 26px -12px var(--amber-glow);}} .fd-enter:active{transform:scale(.98);} /* gel compress, no bounce */ .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 wet-glass glint: one specular streak of light on the vessel, event-driven only (kept as "facet-glint" so every existing caller below keeps working; the light now reads as glass, not cut stone) */ @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 10px 22px rgba(20,18,12,.18));} @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: wet chrome glass (LUXLIQ §3A.5, §8.1). Same one translucent chrome-glass material as before (var(--glass-bg) / --glass-blur / --glass-shadow, still the only backdrop-filter chrome outside dock/palette/control-center), now with a thin condensation highlight so it reads as glass wet with lamp light, not dry frosted plastic. ============================================================ */ #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);} /* condensation highlight: a thin bead of light along the wet glass top */ #menubar::after{content:'';position:absolute;inset:0 0 auto 0;height:1px;pointer-events:none; background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--edge) 80%,transparent) 30%,color-mix(in srgb,var(--edge) 80%,transparent) 70%,transparent);} 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 3px 8px rgba(20,18,12,.18));} .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;} /* LUXLIQ (§9.2 "Notification: droplet rises or falls into view, flattens into chip") — a soft rise-and-settle entrance instead of an instant pop. */ @media (prefers-reduced-motion:no-preference){ .cc-note{animation:cc-droplet var(--visc-bead,.34s) var(--ease-buoyant,var(--ease-out)) both;} } @keyframes cc-droplet{from{opacity:0;transform:translateY(-8px) scale(.92);}70%{transform:translateY(1px) scale(1.01);}to{opacity:1;transform:none;}} .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: glass vessels (LUXLIQ §8.1 "glass vessel", §8.2 "floating glass volumes"). Work still needs contrast, so the window BODY stays a near-opaque pane (no backdrop-filter there); only the title bar wears wet chrome glass. What changes is the light: every window now carries an inner lamp glow (var(--inner-glow)), plumper gel radius, and a warmer glow (not just a darker border) when focused. A chamber you look into, not a flat rectangle. ============================================================ */ #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-lg);overflow:hidden; box-shadow:inset 0 1px 0 var(--edge),var(--inner-glow),var(--shadow-2); transition:box-shadow .2s var(--ease-viscous,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);}} /* focused = a warmer inner glow, not just a darker border (LUXLIQ §9.2) */ .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(--inner-glow),var(--shadow-1);} .win:not(.focused) .win-bar{opacity:.82;} .win.maximized{border-radius:0;border:0;} /* title bar = wet chrome glass (LUXLIQ §3A.5: chrome can be glass wet with condensation light); a translucent shade over the pane's own surface; the window BODY below stays a plain opaque pane. */ .win-bar{position:relative;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:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);} .win-bar::after{content:'';position:absolute;inset:0 0 auto 0;height:1px;pointer-events:none; background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--edge) 70%,transparent) 30%,color-mix(in srgb,var(--edge) 70%,transparent) 70%,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: wet chrome glass rail (LUXLIQ §3A.5, §9.2 "dock hover: bead morphs like a blob toward icon; neighbors part as if in fluid"). Icon identity color is exempt from the ≤2-nectar-at-rest budget (it marks WHAT an app is, not that JUWEL acted); hover/focus adds a small local warmth glow; the dock is glass over a lamp, not inert plastic. Neighbor-parting + buoyant lift live further below in the v2 rail rules; this base rule is the shared glass shell. ============================================================ */ #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);} /* condensation highlight: same wet-glass bead of light as the menubar */ #dock::after{content:'';position:absolute;inset:0 0 auto 0;height:1px;border-radius:var(--r-xl) var(--r-xl) 0 0;pointer-events:none; background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--edge) 80%,transparent) 30%,color-mix(in srgb,var(--edge) 80%,transparent) 70%,transparent);} 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) */ /* App identity tiles — flat low-chroma mineral wells (4 gem families + stone). Identity, not action: exempt from the amber-action budget (BRAND_SYSTEM 2b). NOT gradients. */ .ic-chat{background:color-mix(in srgb,var(--topaz) 17%,var(--surface));color:var(--topaz-deep);border:1px solid color-mix(in srgb,var(--topaz) 24%,var(--line));} .ic-files{background:color-mix(in srgb,var(--sapphire) 15%,var(--surface));color:var(--sapphire-deep);border:1px solid color-mix(in srgb,var(--sapphire) 22%,var(--line));} .ic-mail{background:color-mix(in srgb,var(--garnet) 14%,var(--surface));color:var(--garnet-deep);border:1px solid color-mix(in srgb,var(--garnet) 20%,var(--line));} .ic-calendar{background:color-mix(in srgb,var(--sapphire) 15%,var(--surface));color:var(--sapphire-deep);border:1px solid color-mix(in srgb,var(--sapphire) 22%,var(--line));} .ic-browser{background:color-mix(in srgb,var(--sapphire) 15%,var(--surface));color:var(--sapphire-deep);border:1px solid color-mix(in srgb,var(--sapphire) 22%,var(--line));} .ic-ide{background:color-mix(in srgb,var(--ink) 9%,var(--surface));color:var(--ink-1);border:1px solid color-mix(in srgb,var(--ink) 14%,var(--line));} .ic-terminal{background:color-mix(in srgb,var(--ink) 9%,var(--surface));color:var(--ink-1);border:1px solid color-mix(in srgb,var(--ink) 14%,var(--line));} .ic-studio{background:color-mix(in srgb,var(--garnet) 13%,var(--surface));color:var(--garnet-deep);border:1px solid color-mix(in srgb,var(--garnet) 19%,var(--line));} .ic-ledger{background:color-mix(in srgb,var(--jade) 15%,var(--surface));color:var(--jade-deep);border:1px solid color-mix(in srgb,var(--jade) 21%,var(--line));} .ic-settings{background:color-mix(in srgb,var(--ink) 7%,var(--surface));color:var(--ink-2);border:1px solid var(--line);} .ic-home,.ic-brain{background:color-mix(in srgb,var(--topaz) 14%,var(--surface));color:var(--topaz-deep);border:1px solid color-mix(in srgb,var(--topaz) 20%,var(--line));} .ic-workspace{background:color-mix(in srgb,var(--sapphire) 14%,var(--surface));color:var(--sapphire-deep);border:1px solid color-mix(in srgb,var(--sapphire) 20%,var(--line));} .ic-hive{background:color-mix(in srgb,var(--jade) 14%,var(--surface));color:var(--jade-deep);border:1px solid color-mix(in srgb,var(--jade) 20%,var(--line));} .ic-lens{background:color-mix(in srgb,var(--sapphire) 14%,var(--surface));color:var(--sapphire-deep);border:1px solid color-mix(in srgb,var(--sapphire) 20%,var(--line));} .ic-actions{background:color-mix(in srgb,var(--jade) 15%,var(--surface));color:var(--jade-deep);border:1px solid color-mix(in srgb,var(--jade) 21%,var(--line));} .ic-system{background:color-mix(in srgb,var(--ink) 9%,var(--surface));color:var(--ink-1);border:1px solid color-mix(in srgb,var(--ink) 14%,var(--line));} .ic-contacts{background:color-mix(in srgb,var(--jade) 14%,var(--surface));color:var(--jade-deep);border:1px solid color-mix(in srgb,var(--jade) 20%,var(--line));} .ic-rewind{background:color-mix(in srgb,var(--ink) 8%,var(--surface));color:var(--ink-2);border:1px solid color-mix(in srgb,var(--ink) 13%,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;} /* LUXLIQ (§9.2 "Command palette: dark well opens; options precipitate as beads from fluid") — rows settle in from the well instead of just being there; staggered on the first handful so it reads as fluid, not thrash. */ @media (prefers-reduced-motion:no-preference){ .cmd-row{animation:cmd-precip .22s var(--ease-buoyant,var(--ease-out)) both;} .cmd-row:nth-child(1){animation-delay:0ms;} .cmd-row:nth-child(2){animation-delay:16ms;} .cmd-row:nth-child(3){animation-delay:32ms;} .cmd-row:nth-child(4){animation-delay:48ms;} .cmd-row:nth-child(5){animation-delay:64ms;} .cmd-row:nth-child(n+6){animation-delay:80ms;} } @keyframes cmd-precip{from{opacity:0;transform:translateY(7px) scale(.97);}to{opacity:1;transform:none;}} .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, on the LuxLiq candy palette (raw purples/pinks stay 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:none; 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:none; 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, nectar/amber allowed). Idle is alive (LUXLIQ §3A.3): a slow buoyant drift below, quieted only while she is actively following the cursor (.following, set by juwel-os-desktop.js) so her own convection never fights the tracked position. ============================================================ */ #companion{position:fixed;right:22px;bottom:78px;z-index:88;line-height:0;cursor:pointer; filter:drop-shadow(0 8px 18px rgba(20,14,8,.22)); 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 6px 14px rgba(20,14,8,.2));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" = the user navigating (ink slab, matches .cbtn/.pbtn idiom below — this is YOU acting, not JUWEL acting, so it is not amber); "no" = quiet ghost */ .comp-say .csbtn.go{background:var(--ink);color:var(--paper);} @media (hover:hover) and (pointer:fine){.comp-say .csbtn.go:hover{background:color-mix(in srgb,var(--ink) 88%,var(--paper));}} .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 var(--visc-bead,.26s) var(--ease-buoyant,var(--ease-out)), transform var(--visc-bead,.26s) var(--ease-buoyant,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:color-mix(in srgb,var(--dock-a,var(--ink-3)) 13%,var(--surface));border:1px solid color-mix(in srgb,var(--dock-a,var(--ink-3)) 18%,var(--line));color:var(--dock-ink,var(--ink-1));box-shadow:inset 0 1px 0 var(--edge); 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;color:var(--dock-ink,var(--ink-1));transition:color .16s var(--ease-out);} html[data-theme="dark"] #dock .dock-app{background:color-mix(in srgb,var(--dock-a,var(--ink-3)) 20%,var(--surface));border-color:color-mix(in srgb,var(--dock-a,var(--ink-3)) 24%,var(--line));} /* 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:var(--garnet);--dock-ink:var(--garnet-deep);} #dock .dock-app.ic-calendar{--dock-a:var(--sapphire);--dock-ink:var(--sapphire-deep);} #dock .dock-app.ic-browser{--dock-a:var(--sapphire);--dock-ink:var(--sapphire-deep);} #dock .dock-app.ic-ide{--dock-a:var(--ink-2);--dock-ink:var(--ink-1);} #dock .dock-app.ic-terminal{--dock-a:var(--ink-2);--dock-ink:var(--ink-1);} #dock .dock-app.ic-studio{--dock-a:var(--garnet);--dock-ink:var(--garnet-deep);} #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:var(--jade);--dock-ink:var(--jade-deep);} #dock .dock-app.ic-actions{--dock-a:var(--jade);--dock-ink:var(--jade-deep);} #dock .dock-app.ic-system{--dock-a:var(--ink-2);--dock-ink:var(--ink-1);} #dock .dock-app.ic-lens{--dock-a:var(--sapphire);--dock-ink:var(--sapphire-deep);} #dock .dock-app.ic-rewind{--dock-a:var(--ink-3);--dock-ink:var(--ink-1);} @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)); /* local warmth (LUXLIQ §3A.3 heat model: hover = local warmth); a soft glow in the icon's own accent, not a generic ink shadow */ box-shadow:inset 0 1px 0 var(--edge),0 4px 16px -6px color-mix(in srgb,var(--dock-a,var(--topaz)) 45%,transparent); } #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;} /* LUXLIQ dock hover (§9.2 "Dock hover: bead morphs like a blob toward icon; neighbors part as if in fluid") — buoyant lift on the hovered icon, gentle parting on its immediate neighbors (via :has(), same-origin browsers only; degrades to the plain lift below where unsupported — never broken). */ .dock-app{transition:transform var(--visc-bead,.3s) var(--ease-buoyant,var(--ease-out)), color .16s var(--ease-out), background-color .16s var(--ease-out), border-color .16s var(--ease-out), box-shadow .16s var(--ease-out);} .dock-app:hover{transform:translateX(3px) scale(1.07);} .dock-app:hover + .dock-app{transform:translateX(5px) scale(.97);} @supports selector(:has(a)){ #dock:has(.dock-app:hover) .dock-app:not(:hover){transform:translateX(2px) scale(.985);} #dock:has(.dock-app:hover) .dock-app:hover{transform:translateX(4px) scale(1.08);} } .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:none;} .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 1.4px 0 color-mix(in srgb,var(--topaz) 30%,transparent),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 1.4px 0 color-mix(in srgb,var(--topaz) 50%,transparent),0 0 0 3px color-mix(in srgb,var(--topaz) 22%,transparent),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:none;} #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 = a glass vessel (LUXLIQ §8.1/§8.2). The window BODY stays a near-opaque pane (no backdrop-filter there); work needs contrast, but it now carries an inner lamp glow and a plumper gel radius, and the title bar wears wet chrome glass. */ .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-lg);overflow:hidden; box-shadow:inset 0 1px 0 var(--edge),var(--inner-glow),var(--shadow-2); transition:box-shadow .2s var(--ease-viscous,var(--ease-out)), border-color .18s var(--ease-out);} /* one wet-glass glint sweep on window open (the vessel catching light) */ .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);} /* focused = a warmer inner glow, not just a darker border (LUXLIQ §9.2) */ .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(--inner-glow),var(--shadow-1);} .fwin:not(.focused) .fwin-bar{opacity:.78;} /* LUXLIQ (§9.2 "new window: glass vessel expands, then fluid content pours inside") — a window opening builds like wax filling the pane (clip-path rise from the bottom) instead of a flat pop; close/minimize drain the same way in reverse. Durations come from the loaded luxliq.css tokens with sane literal fallbacks so nothing breaks if that sheet is missing. */ .fwin.opening{animation:fwin-open var(--visc-pour,.42s) var(--ease-flow,var(--ease-out)) both;} @keyframes fwin-open{from{opacity:0;clip-path:inset(28% 0 0 0);transform:translateY(10px) scale(.985);}60%{clip-path:inset(0 0 0 0);}to{opacity:1;clip-path:inset(0 0 0 0);transform:none;}} .fwin.closing{opacity:0;transform:translateY(8px) scale(.98);pointer-events:none;transition:opacity var(--visc-bead,.22s) var(--ease-flow,var(--ease-out)), transform var(--visc-bead,.22s) var(--ease-flow,var(--ease-out));} .fwin.minimized{opacity:0;transform:translateY(40vh) scale(.4);pointer-events:none;transition:opacity var(--visc-settle,.32s) var(--ease-buoyant,var(--ease-out)), transform var(--visc-settle,.32s) var(--ease-buoyant,var(--ease-out));transform-origin:bottom left;} .fwin.maximized{border-radius:0;border-color:transparent;} .fwin.dragging{transition:none;cursor:grabbing;} /* title bar = wet chrome glass (LUXLIQ §3A.5), a translucent shade over the vessel's own surface; a hairline condensation bead sits on top. */ .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:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);} .fwin-bar::after{content:'';position:absolute;inset:0 0 auto 0;height:1px;pointer-events:none; background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--edge) 70%,transparent) 30%,color-mix(in srgb,var(--edge) 70%,transparent) 70%,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;}}