/* Generated by www/styles/build.mjs. Do not edit this file — edit the source
 * under www/styles/ and rebuild. The two namespaces and the rule order are the
 * baseline power structure, recorded by derive.mjs in tree.json. */
@import 'node_modules/%40webtui/css/dist/base.css';
@import 'node_modules/%40webtui/css/dist/utils/box.css';
@import 'node_modules/%40webtui/css/dist/components/button.css';
@import 'node_modules/%40webtui/css/dist/components/badge.css';
@import 'node_modules/%40webtui/css/dist/components/checkbox.css';
@import 'node_modules/%40webtui/css/dist/components/input.css';
@import 'node_modules/%40webtui/css/dist/components/table.css';
@import 'node_modules/%40webtui/css/dist/components/typography.css';
@import 'node_modules/%40webtui/theme-catppuccin/dist/index.css';
@layer base, utils, components;

@layer base {
:root { --font-family: 'JetBrains Mono', 'Fira Code', 'SFMono-Regular', 'Cascadia Code', 'DejaVu Sans Mono', 'Menlo', monospace; --font-glyph: 'JetBrains Mono', 'Cascadia Mono', 'Segoe UI Symbol', 'Noto Sans Symbols 2', 'DejaVu Sans Mono', monospace; --font-size: 15px; --line-height: 1.55; /* convenience aliases pulled from the catppuccin theme */ --c-bg: var(--base); --c-bg-0: var(--crust); --c-bg-1: var(--mantle); --c-line: var(--surface1); --c-line-soft: var(--surface0); --c-text: var(--text); --c-dim: var(--subtext0); --c-dimmer: var(--overlay1); --c-user: var(--green); --c-path: var(--blue); --c-accent: var(--mauve); --c-warn: var(--yellow); --c-red: var(--red); --radius: 4px; --space: 0.6rem; /* One stacking scale for the frame, stated once: the screen's output, the chat overlay that covers it, the rows that must stay usable while the chat is open, the CRT overlays, then anything opened over the page. The numbers used to be scattered per rule and two of them were equal, so DOM order decided the winner — that is why the model menu drew underneath the chat. */ --z-content: 1; --z-drawer: 10; --z-control: 20; --z-crt: 40; --z-popup: 60; /* The smallest a control's box may be. A 4px line or a line of text is not something a mouse can aim at; the box around it is what gets clicked. */ --hit: 1.5rem; /* The reading area's floor. A share is only honest when it is resolved against the room that is actually left, so the resolver has to subtract this before a share is applied — and it has to be readable as a number, which is why it is px and not rem. */ --doc-min: 64px; /* The reading area's width floor, the same rule on the other axis: when the shell is a side column, the document keeps this width and the dock trades against what is left. 14rem is the narrowest column that reads as text. */ --doc-min-w: 14rem; --screen-plate: color-mix(in srgb, var(--surface0) 30%, var(--mantle)); --pane-plate: color-mix(in srgb, var(--screen-plate) 68%, black); color-scheme: dark; }
* { box-sizing: border-box; }
html, body { height: 100%; /* X11 default "X" cursor (XC_X_cursor): black saltire with white outline, hotspot centered. */ cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 1.5 L14.5 14.5 M14.5 1.5 L1.5 14.5' stroke='white' stroke-width='3' stroke-linecap='round' fill='none'/%3E%3Cpath d='M1.5 1.5 L14.5 14.5 M14.5 1.5 L1.5 14.5' stroke='black' stroke-width='1' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") 8 8, default; }
body { margin: 0; /* The frame is the viewport, not a card sized to its content. A frame that stops at 820px on a 1080p display leaves 90px of dead space above it, and none of that room can reach the part below — which is the room the dock needs. So the frame fills the visible height at every size, and the regions inside it are divided by the shares in the dock section. --vvh/--vtop are set by app.js from window.visualViewport: the on-screen keyboard shrinks the visible area without changing 100dvh, so a frame sized to dvh hangs above what is actually on screen and the browser scrolls the page to reveal the focused input, pushing the topbar out of the frame. Size the page to the visible area, and offset it back into view if the browser scrolled anyway. The page has ONE border, the terminal's own, and the body adds one hairline gap so that border is not flush against the window edge — flush is what made the corners read squished. It is a gap, not a frame: the old body padding was up to 1.4rem and sat OUTSIDE a capped frame, which sat outside a bezel, three tiers of margin between the window and the reading area. */ height: 100vh; height: 100svh; height: var(--vvh, 100dvh); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 0.5rem; overflow: hidden; background: radial-gradient(120% 90% at 50% 0%, var(--mantle), var(--crust) 70%); color: var(--c-text); font-feature-settings: 'calt' 1, 'liga' 1; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overscroll-behavior: none; }
.crt-frame { width: 100%; flex: 1 1 auto; min-height: 0; transform: translateY(var(--vtop, 0px)); display: flex; flex-direction: column; gap: 0.55rem; position: relative; }
.topbar { flex: none; display: flex; align-items: center; gap: 0.5rem; padding: 0.1rem 0.15rem; line-height: 1.3; border-bottom: 1px dashed var(--c-line); font-size: 0.82rem; color: var(--c-dim); white-space: nowrap; position: relative; z-index: var(--z-control); }
.tb-clock { flex: none; font-variant-numeric: tabular-nums; }
.tb-clock.pulse { color: var(--green); }
.tb-field { display: inline-flex; align-items: center; gap: 0.25rem; flex: 0 1 auto; min-width: 0; user-select: none; }
.tb-field .k { color: var(--c-dimmer); flex: none; }
.tb-field .v { color: var(--c-dim); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-bundle { display: inline-flex; align-items: center; gap: 0.25rem; min-width: 0; }
.tb-value { flex: none; white-space: nowrap; }
.tb-value.model { display: inline-flex; align-items: center; gap: 0.18rem; }
.tb-value-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.caret { flex: none; width: 0.4rem; height: 0.4rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform 120ms ease; }
.is-open .caret { transform: rotate(225deg); }
.page-menu { display: none; position: absolute; top: calc(100% + 5px); right: 0; min-width: 13rem; max-width: min(20rem, calc(100vw - 2rem)); max-height: min(22rem, calc(var(--vvh, 100dvh) - 7rem)); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--surface2) transparent; flex-direction: column; gap: 1px; padding: 0.18rem; z-index: var(--z-popup); }
.page-menu::-webkit-scrollbar { width: 8px; }
.page-menu::-webkit-scrollbar-thumb { background: var(--surface2); border-radius: 0; }
.page-menu::-webkit-scrollbar-track { background: transparent; }
.is-open .page-menu { display: flex; animation: menu-in var(--dur-fast) var(--ease); }
@keyframes menu-in { from { opacity: 0; transform: translateY(-2px); } to { opacity: 1; transform: none; } }
.page-menu-item { display: flex; align-items: center; gap: 0.35rem; min-height: var(--hit); width: 100%; text-align: left; padding: 0.3rem 0.5rem; cursor: pointer; }
.page-menu-item[aria-checked="true"] { color: var(--c-accent); background: color-mix(in srgb, var(--c-accent) 12%, transparent); }
.terminal { position: relative; flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); /* The document row is the only flexible one. Everything else is its own height: the shell (window plus input row), the task bar. The sidebar's rail is the first column — a column takes width, not height, so it costs the resolver nothing — and it is 0 in the strip tier and the maximised state. The window's share is resolved against the pane in app.js, so the document gets what is left rather than being traded against the window — which is the whole point of the split: reading stays possible while the model is working. A flexible row with no floor can be traded to zero, and a document at zero is not a strip, it is nothing; the floor is the same number the resolver subtracts before it applies a share, so the range the edge reports is the range it can reach with the document still standing. */ grid-template-rows: auto auto minmax(var(--doc-min), 1fr) auto auto; /* five rows, the first the top bar: the bar used to sit outside the terminal, inside a second frame of its own. It is a row of the terminal now, so the page has one box and one border. */ background: radial-gradient(140% 120% at 50% -10%, color-mix(in srgb, var(--surface0) 45%, var(--screen-plate)) 0%, var(--screen-plate) 55%, var(--mantle) 130%); border: 1px solid var(--c-line); overflow: hidden; /* Resting state: no transition. Without this the terminal's transition-property falls back to `all` when is-animating is cleared, which covers the @property-registered --dock-w and freezes a freshly-opened side column at 0px wide. The is-animating rule names --dock-w explicitly, so the slot-change beat still plays. */ transition: none; }
.terminal::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: var(--z-crt); background: repeating-linear-gradient( to bottom, #0000 0px, #0000 2px, color-mix(in srgb, #000 38%, transparent) 3px, #0000 4px); opacity: 0.35; mix-blend-mode: multiply; animation: flicker 5.5s steps(2, end) infinite; }
.terminal::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: calc(var(--z-crt) + 1); background: radial-gradient(120% 100% at 50% 50%, transparent 58%, color-mix(in srgb, #000 45%, transparent) 100%); }
.sidebar { /* The strip shape's height is declared in tokens as the sum of its own parts, so the resolver reads a number that the CSS guarantees rather than a rect that the content happens to produce. The rail has no height of its own: it is a column. */ display: flex; flex-direction: column; min-height: 0; box-sizing: border-box; border-right: 1px solid var(--c-line-soft); background: color-mix(in srgb, var(--crust) 55%, transparent); position: relative; }
.side-scroll { display: flex; flex-direction: column; gap: 0.15rem; flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; padding: 0.4rem 0.5rem; box-sizing: border-box; }
.side-scroll::-webkit-scrollbar { display: none; }
.side-scroll.can-left { -webkit-mask-image: linear-gradient(to right, transparent, #000 1.2rem); mask-image: linear-gradient(to right, transparent, #000 1.2rem); }
.side-scroll.can-right { -webkit-mask-image: linear-gradient(to left, transparent, #000 1.2rem); mask-image: linear-gradient(to left, transparent, #000 1.2rem); }
.side-scroll.can-left.can-right { -webkit-mask-image: linear-gradient(to right, transparent, #000 1.2rem, #000 calc(100% - 1.2rem), transparent); mask-image: linear-gradient(to right, transparent, #000 1.2rem, #000 calc(100% - 1.2rem), transparent); }
.side-exits { flex: none; display: flex; flex-direction: column; gap: 0.15rem; margin-top: auto; padding: 0.3rem 0.5rem 0.4rem; border-top: 1px solid color-mix(in srgb, var(--c-line-soft) 60%, transparent); box-sizing: border-box; }
.exits-links { display: flex; gap: 0.2rem; }
.exits-drop { display: none; position: relative; }
.sidebar.is-tight .exits-drop { display: block; }
.sidebar.is-tight .exits-links { display: none; }
.exits-btn { display: inline-flex; align-items: center; gap: 0.18rem; appearance: none; background: transparent; border: 0; color: var(--peach); font: inherit; font-size: 0.74rem; padding: 0.08rem 0; cursor: pointer; letter-spacing: 0.02em; text-decoration-line: underline; text-decoration-style: dashed; text-decoration-color: color-mix(in srgb, var(--peach) 45%, transparent); text-underline-offset: 3px; }
.exits-btn .t { color: var(--peach); }
.exits-btn:focus-visible { outline: 1px solid var(--c-accent); outline-offset: 1px; }
.exits-drop { --menu-color: var(--peach); }
.exits-drop .page-menu { min-width: 7rem; }
.tab { flex: 0 0 auto; white-space: nowrap; }
.tab { appearance: none; background: transparent; border: 1px solid transparent; color: var(--c-dim); font: inherit; font-size: 0.74rem; padding: 0.08rem 0.5rem; line-height: 1.5; cursor: pointer; letter-spacing: 0.02em; transition: color 120ms ease, background 120ms ease, border-color 120ms ease; }
.tab .t { color: var(--mauve); margin-right: 0.18rem; font-weight: 700; opacity: 1; }
.tab.active .t { color: var(--green); }
.tab:hover { color: var(--c-text); background: color-mix(in srgb, var(--surface0) 50%, transparent); }
.tab:focus-visible { outline: 1px solid var(--c-accent); outline-offset: 1px; }
.tab.active { color: var(--c-text); border-color: var(--c-line); background: color-mix(in srgb, var(--surface0) 70%, transparent); box-shadow: inset 0 -2px 0 var(--c-accent); }
.tab.ext { color: var(--peach); text-decoration-line: underline; text-decoration-style: dashed; text-decoration-color: color-mix(in srgb, var(--peach) 45%, transparent); text-underline-offset: 3px; }
.tab.ext .t { color: var(--peach); }
.tab.ext:hover { color: var(--peach); }
.screen { position: relative; z-index: var(--z-content); overflow-y: auto; scroll-behavior: smooth; padding: min(0.85rem, calc(var(--doc-min) / 2)) 1rem min(0.5rem, calc(var(--doc-min) / 2)); box-sizing: border-box; min-width: 0; min-height: 0; scrollbar-width: thin; scrollbar-color: var(--surface2) transparent; }
.screen::-webkit-scrollbar { width: 8px; }
.screen::-webkit-scrollbar-thumb { background: var(--surface2); border-radius: 0; }
.screen::-webkit-scrollbar-track { background: transparent; }
.out { font-size: 0.86rem; line-height: 1.6; animation: line-in var(--dur-msg-in) var(--ease-out) both; }
.out + .out { margin-top: 0.35rem; }
.out-block { margin: 0.1rem 0 0.5rem; }
.out-block:last-child { margin-bottom: 0; }
.out-block[box-] { padding: 0.7rem 0.85rem; }
.out-info { color: var(--c-text); }
.out-dim { color: var(--c-dim); }
.out-ok { color: var(--green); }
.out-warn { color: var(--c-warn); }
.out-err { color: var(--red); }
.out-accent { color: var(--c-accent); }
.out-key { color: var(--sky); }
.section-doc { font-size: 0.86rem; line-height: 1.62; }
.section-doc h2 { font-size: 1rem; margin: 0 0 0.5rem; color: var(--peach); letter-spacing: 0.02em; display: flex; align-items: center; gap: 0.5rem; }
.section-doc h2::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--c-line) 0%, transparent 100%); }
.section-doc h3 { font-size: 0.92rem; color: var(--yellow); margin: 0.7rem 0 0.3rem; }
.section-doc p { margin: 0.35rem 0; }
.section-doc ul { margin: 0.3rem 0 0.5rem; padding-left: 1.2rem; }
.section-doc li { margin: 0.18rem 0; }
.section-doc strong { color: var(--c-text); font-weight: 700; }
.section-doc a { color: var(--sky); text-decoration: none; border-bottom: 1px dotted var(--surface2); }
.section-doc a:hover { color: var(--blue); border-bottom-color: var(--blue); }
.section-doc { min-width: 0; }
.section-doc .subsection + .subsection { margin-top: 0.7rem; padding-top: 0.55rem; border-top: 1px dashed var(--c-line-soft); }
.cols-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0.35rem 1rem; align-items: start; }
.cols-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0.3rem 1rem; }
.cols-2 ul, .cols-3 ul { margin-top: 0.2rem; }
.likes { column-count: 3; column-gap: 1rem; }
.likes li { break-inside: avoid; }
.lang-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.35rem 1rem; align-items: start; margin: 0.25rem 0 0.5rem; }
.lang-col { min-width: 0; }
.lang-col .tags { flex-direction: column; align-items: flex-start; }
.pair { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0.6rem; }
.tags { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.25rem 0; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0.5rem; margin-top: 0.3rem; }
.card { border: 1px dashed var(--c-line); padding: 0.55rem 0.65rem; }
.card p { margin: 0.2rem 0; }
.card .meta { color: var(--c-dim); font-size: 0.78rem; }
.card a { margin-right: 0.3rem; }
.fastfetch { margin: 0.3rem 0; border: 1px dashed var(--c-line); padding: 0.45rem 0.6rem; white-space: pre; overflow-x: auto; font-size: 0.74rem; line-height: 1.25; color: var(--c-text); }
.fastfetch .k { color: var(--c-user); }
.fastfetch .v { color: var(--c-path); }
.fastfetch .d { color: var(--c-dim); }
.inv-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0.4rem 1rem; }
.inv-grid h4 { margin: 0.2rem 0; font-size: 0.8rem; color: var(--peach); }
.inv-grid ul { margin: 0.1rem 0; padding-left: 1.1rem; }
.sk-ic { width: 0.92rem; height: 0.92rem; vertical-align: -0.15em; margin-right: 0.3rem; object-fit: contain; }
.ios-badge { height: 0.95rem; vertical-align: text-bottom; margin-left: 0.3rem; }
.table-wrap { overflow-x: auto; margin: 0.35rem 0; }
.stat { color: var(--green); }
details > summary { cursor: pointer; color: var(--c-warn); list-style: none; padding: 0.2rem 0; }
details > summary::-webkit-details-marker { display: none; }
details > summary::before { content: '▸ '; color: var(--c-accent); }
details[open] > summary::before { content: '▾ '; }
.hw-board { margin: 0.4rem 0; display: flex; flex-direction: column; gap: 0.5rem; }
.hw-node { border: 1px solid var(--c-line); background: color-mix(in srgb, var(--surface0) 35%, transparent); padding: 0.5rem 0.65rem; }
.hw-node-head { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.35rem; flex-wrap: wrap; }
.hw-node-name { color: var(--peach); font-weight: 700; letter-spacing: 0.02em; }
.hw-node-role { color: var(--c-dim); font-size: 0.76rem; }
.hw-node-note { color: var(--c-dimmer); font-size: 0.74rem; margin-bottom: 0.35rem; }
.hw-svcs { display: flex; flex-direction: column; }
.hw-harness { margin-top: 0.35rem; border-top: 1px dashed var(--c-line-soft); }
.hw-harness-intro { color: var(--c-dim); font-size: 0.74rem; margin: 0.15rem 0 0.25rem; }
.hw-harness-list { list-style: none; margin: 0; padding: 0; }
.hw-harness-list li { font-size: 0.74rem; color: var(--c-dim); padding: 0.14rem 0; line-height: 1.45; }
.hw-harness-list strong { color: var(--c-text); }
.hw-svc { display: flex; align-items: center; gap: 0.5rem; padding: 0.22rem 0; border-top: 1px dashed var(--c-line-soft); }
.hw-svcs .hw-svc:first-child { border-top: none; }
.hw-dot { width: 0.55rem; height: 0.55rem; border-radius: 999px; background: var(--c-dimmer); flex: none; transition: background 160ms ease, box-shadow 160ms ease; }
.hw-dot.up { background: var(--green); box-shadow: 0 0 7px var(--green); }
.hw-dot.down { background: var(--red); box-shadow: 0 0 7px var(--red); }
.hw-svc-name { color: var(--c-text); min-width: 4.5rem; }
.hw-svc-desc { color: var(--c-dim); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hw-svc-lat { color: var(--green); font-variant-numeric: tabular-nums; min-width: 3.2rem; text-align: right; }
.hw-svc-when { color: var(--c-dimmer); font-variant-numeric: tabular-nums; min-width: 4.6rem; text-align: right; }
.ask-queue { flex: none; min-width: 0; max-width: 100%; border-bottom: 1px solid var(--c-line-soft); background: color-mix(in srgb, var(--surface1) 40%, transparent); padding: 0.35rem 0.7rem; }
.ask-queue-head { display: flex; align-items: center; gap: 0.4rem; font-size: 0.7rem; color: var(--c-dim); margin-bottom: 0.3rem; }
.ask-queue-title { color: var(--c-accent); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.64rem; }
.ask-queue-count { color: var(--c-dimmer); font-variant-numeric: tabular-nums; }
.ask-queue-clear { appearance: none; margin-left: auto; }
.ask-queue-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.2rem; max-height: 9rem; min-width: 0; max-width: 100%; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: var(--surface2) transparent; }
.ask-queue-item { display: flex; align-items: center; gap: 0.4rem; padding: 0.2rem 0.4rem; border-radius: 3px; background: color-mix(in srgb, var(--surface0) 60%, transparent); border: 1px solid var(--c-line-soft); font-size: 0.76rem; animation: queue-drop var(--dur-fast) var(--ease-out) both; }
.ask-queue-item-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--c-text); }
.raylm { flex: 1; min-height: 0; min-width: 0; max-width: 100%; overflow-y: auto; overflow-x: hidden; padding: 0.7rem 0.7rem 0; display: flex; flex-direction: column; gap: 0.55rem; scrollbar-width: thin; scrollbar-color: var(--surface2) transparent; }
.raylm::-webkit-scrollbar { width: 8px; }
.raylm::-webkit-scrollbar-thumb { background: var(--surface2); }
.raylm-bottom { position: absolute; right: var(--pane-pad-x); bottom: calc(var(--row-h) + 0.45rem); z-index: var(--z-control); }
.msg { display: flex; flex-direction: column; gap: 0.14rem; min-width: 0; max-width: 100%; }
.msg-user { align-items: flex-end; }
.msg-tool { padding: 0.05rem 0.5rem 0.05rem 0.6rem; margin-left: 0.15rem; border-left: 2px solid color-mix(in srgb, var(--c-line) 90%, transparent); min-width: 0; max-width: 100%; white-space: pre-wrap; word-break: break-word; color: var(--c-text); font-size: clamp(0.76rem, 0.5vw + 0.6rem, 0.85rem); line-height: 1.35; }
.msg-content { padding: 0.25rem 0.5rem; min-width: 0; max-width: 100%; border-radius: 3px; white-space: pre-wrap; word-break: break-word; color: var(--c-text); font-size: clamp(0.8rem, 0.55vw + 0.62rem, 0.92rem); line-height: 1.45; }
.msg-user .msg-content { background: color-mix(in srgb, var(--sky) 22%, var(--surface0)); border: 1px solid color-mix(in srgb, var(--sky) 42%, transparent); }
.msg-bot .msg-content { background: color-mix(in srgb, var(--surface1) 55%, transparent); border: 1px solid var(--c-line-soft); }
.msg-think { width: 100%; }
.msg-think summary { cursor: pointer; color: var(--c-dim); font-size: clamp(0.66rem, 0.4vw + 0.54rem, 0.76rem); list-style: none; padding: 0.04rem 0; user-select: none; /* The collapsed line is the duration and the first line of the thought, and it is one line: the text ellipsises at the edge of the window. A summary that wraps is a second block of text where the reader expected the control that opens the rest. */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-think summary::-webkit-details-marker { display: none; }
.msg-think summary::before { content: '▸ '; color: var(--c-dimmer); }
.msg-think[open] summary::before { content: '▾ '; }
.msg-think-body { color: var(--c-dim); font-size: clamp(0.76rem, 0.5vw + 0.6rem, 0.85rem); line-height: 1.28; white-space: pre-wrap; word-break: break-word; min-width: 0; max-width: 100%; --think-fill: color-mix(in srgb, var(--crust) 82%, transparent); background-image: linear-gradient(to right, transparent, color-mix(in srgb, var(--think-fill) 55%, transparent) 0.5rem, transparent 1.4rem), linear-gradient(to bottom, transparent, var(--think-fill) 0.5rem, var(--think-fill) calc(100% - 0.5rem), transparent); padding: 0.5rem 0.55rem; margin: 0.04rem 0 0.08rem; max-height: 10rem; overflow-y: auto; overflow-x: hidden; }
.msg-stat { color: var(--c-dimmer); font-size: 0.68rem; font-variant-numeric: tabular-nums; }
.ask-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; padding: 0.28rem 0.5rem; margin: 0.1rem 0; border-left: 2px solid var(--c-warn); background: color-mix(in srgb, var(--crust) 55%, transparent); font-size: clamp(0.76rem, 0.5vw + 0.6rem, 0.85rem); line-height: 1.35; }
.ask-confirm .confirm-q { flex: 1 1 auto; min-width: 0; color: var(--c-warn); }
.ask-confirm .confirm-note { flex: 1 0 100%; color: var(--c-dim); font-size: 0.7rem; }
.ask-confirm button { font: inherit; padding: 0.04rem 0.6rem; border: 1px solid var(--c-line); border-radius: 3px; background: color-mix(in srgb, var(--surface1) 60%, transparent); color: var(--c-text); cursor: pointer; }
.ask-confirm .confirm-yes { border-color: color-mix(in srgb, var(--c-accent) 60%, var(--c-line)); }
.ask-confirm .confirm-no { border-color: color-mix(in srgb, var(--c-warn) 55%, var(--c-line)); }
.ask-confirm.confirm-answered { opacity: 0.62; }
.ask-confirm.confirm-answered button { cursor: default; opacity: 0.5; }
.ask-confirm .confirm-mark { color: var(--c-dimmer); font-size: 0.72rem; }
.ask-status { display: flex; align-items: center; gap: 0.4rem; font-size: 0.72rem; color: var(--c-dim); padding: 0.05rem 0.1rem; }
.st-dot { width: 0.5rem; height: 0.5rem; border-radius: 999px; flex: none; background: var(--c-dimmer); }
.st-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-time { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--c-dimmer); flex: none; }
.st-connect .st-dot, .st-loading .st-dot { background: var(--yellow); animation: pulse-dot var(--dur-pulse) var(--ease) infinite; }
.st-thinking .st-dot { background: var(--mauve); animation: pulse-dot var(--dur-pulse-active) var(--ease) infinite; }
.st-writing .st-dot { background: var(--green); animation: pulse-dot var(--dur-pulse-active) var(--ease) infinite; }
.st-done .st-dot { background: var(--green); box-shadow: 0 0 6px var(--green); }
.st-done { color: var(--c-dimmer); }
.st-error .st-dot { background: var(--red); box-shadow: 0 0 6px var(--red); }
.st-error .st-txt { color: var(--red); }
.msg-content.streaming::after { content: '▍'; color: var(--c-accent); margin-left: 1px; animation: blink var(--dur-caret) steps(2, end) infinite; }
.msg-bot .msg-content:empty { display: none; }
.msg-think.thinking summary { color: var(--mauve); }
.msg-think.thinking .msg-think-body { --think-fill: color-mix(in srgb, var(--crust) 92%, transparent); animation: think-breathe var(--dur-think) var(--ease) infinite; max-height: min(45vh, 22rem); }
@keyframes think-breathe { 0%, 100% { --think-fill: color-mix(in srgb, var(--crust) 92%, transparent); } 50% { --think-fill: color-mix(in srgb, var(--crust) 72%, transparent); } }
@media (prefers-reduced-motion: reduce) { .msg-think.thinking .msg-think-body { animation: none; } }
@keyframes pulse-dot { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
@keyframes nudge { 0%,100% { transform: translateY(0); } 50% { transform: translateY(2px); } }
.pl-input-wrap { position: relative; flex: 1; min-width: 0; max-width: 100%; overflow: hidden; box-sizing: border-box; border: 1px solid var(--c-line-soft); border-radius: 3px; background: color-mix(in srgb, var(--surface1) 30%, transparent); padding-right: calc(var(--icon-btn) + 0.4rem); }
#ask-input { width: 100%; display: block; background: transparent; border: none; outline: none; color: var(--c-text); font: inherit; font-size: 0.86rem; caret-color: var(--c-accent); padding: 0.1rem 0.2rem; resize: none; overflow: hidden; line-height: 1.5; }
.pl-ph { position: absolute; top: 0; left: 0; padding: 0.1rem 0.2rem; color: var(--c-dimmer); font-size: 0.86rem; line-height: 1.5; pointer-events: none; white-space: nowrap; transition: opacity 120ms ease; }
.pl-ph-dot { display: inline-block; animation: ph-dot-blink var(--dur-ph) var(--ease) infinite; }
.pl-ph-dot:nth-child(2) { animation-delay: 0.2s; }
.pl-ph-dot:nth-child(3) { animation-delay: 0.4s; }
.pl-input-wrap.ph-hidden .pl-ph { opacity: 0; }
.pl-input-wrap.expanded { background: color-mix(in srgb, var(--pane-plate) 88%, transparent); backdrop-filter: blur(3px); border-radius: 3px; }
.pl-input-wrap.clipped { overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--surface2) transparent; background: linear-gradient(to bottom, color-mix(in srgb, var(--pane-plate) 96%, transparent), transparent 1.6rem), color-mix(in srgb, var(--pane-plate) 88%, transparent); }
.pl-input-wrap.clipped::-webkit-scrollbar { width: 6px; }
.pl-input-wrap.clipped::-webkit-scrollbar-thumb { background: var(--surface2); }
.promptline { /* The row's height is declared, like every other chrome row: it is a fixed row of the shell, and the resolver subtracts it before a share is applied. box-sizing so the padding is inside the declared number. */ display: flex; align-items: flex-end; gap: 0.4rem; height: var(--row-h); box-sizing: border-box; padding: var(--row-pad) 0.7rem; border-top: 1px solid var(--c-line-soft); background: color-mix(in srgb, var(--pane-plate) 70%, transparent); position: relative; z-index: var(--z-control); }
#audio { display: none; }
.promptline { flex: none; }
.promptline .pl-label { color: var(--c-accent); font-size: 0.9rem; line-height: 1.5; flex: none; user-select: none; }
.promptline .pl-queue { color: var(--c-dim); font-size: 0.68rem; line-height: 1.5; flex: none; user-select: none; white-space: nowrap; padding: 0 0.35rem; border: 1px solid var(--c-line-soft); border-radius: 999px; background: color-mix(in srgb, var(--surface1) 50%, transparent); }
.screen.is-focused, .pane.is-focused { box-shadow: inset 0 1px 0 var(--c-accent); }
#pane-music { justify-content: flex-end; }
#pane-raylm { --pane-share: 0.34; --pane-share-max: 0.95; --pane-min: 150px; --pane-max: 420px; --pane-wmin: 128px; --pane-wmax: 620px; }
.tray { /* The shell. Its height is the window it is showing plus its own rows. With no window active it is only the input row — that is a state the shell is allowed to be in, and a divider with nothing to size does not print. The fallback is for the page before app.js has measured anything: 100dvh is the pane to within the chrome, and a share of it is close enough to start from. --split-frac is the share the model owns as a number, written by app.js, and --split-row is the width of the edge between the two columns: the input row's box is the product of the two, so the chat column's width is computed in CSS from the model's number rather than measured from the DOM. A number and not a percentage, because calc cannot multiply a percentage by a container unit. */ --pane-take: 0px; --split-w: 62%; --split-frac: 1; --split-row: 8px; --divider-h: 8px; --pane-room: var(--pane-take); /* inline-size, not size: the window's height is its own content, and a size container must be independent of what it holds — with container-type:size an auto height collapses to zero. Only the width queries are left, and inline-size is what they need. */ container-type: inline-size; container-name: tray; position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto var(--pane-take) auto; /* The divider is the top edge, so the shell does not draw a second line above it. The glass is read by its edge, not by blur: a brighter top line and a plate that is lighter where the light falls on it. backdrop-filter is the expensive version of the same idea, and there is nothing behind this part to refract. The plate sits below the reading area, not above it: the case is the dark surface and the page is the light one, and that order is what makes them read as two surfaces rather than one. The brightness belongs to the edge, not to the plate. */ background: linear-gradient(180deg, color-mix(in srgb, var(--surface1) 15%, var(--pane-plate)), var(--pane-plate)); font-size: 0.8rem; /* resting: no transition — see comment */ transition: none; }
.tray-body { grid-row: 3; grid-column: 1; min-height: 0; display: flex; overflow: hidden; position: relative; }
.tray[data-row="in-room"] .raylm { padding-bottom: var(--row-h); /* The row draws over the bottom of the room, so the last line stops above it. */ }
.tray:has(.tray-split[hidden]) { --split-row: 0px; /* With one window on the shell there is no edge between columns, so the row takes the whole shell. Subtracting a width that is not there would leave an 8px gap at the right edge. */ }
.tray > .promptline { grid-row: 4; grid-column: 1; }
@media (hover: none) and (pointer: coarse) { .tray { --split-row: 22px; --divider-h: 22px; /* The edge is 22px wide and the divider 22px tall at the tap size, so the room the columns share is 22px narrower and the room the rows leave is 22px smaller. Both are declared on the shell, because both are the shell's own rows, and the input row's box is computed against the same numbers the edges are drawn with. */ } }
@media (max-height: 420px) { .tray { --divider-h: 8px; --split-row: 8px; } }
.tray > .tray-divider { grid-row: 1; grid-column: 1; }
.tray > .pane-switch { grid-row: 2; grid-column: 1; }
.tray[data-row="in-room"] { grid-template-rows: auto auto var(--pane-take); }
.pane { --pane-pad-y: 0.75rem; --pane-pad-x: 0.95rem; position: relative; flex: 1 1 auto; min-height: 0; min-width: 0; max-width: 100%; display: flex; flex-direction: column; gap: 0.5rem; padding: var(--pane-pad-y) var(--pane-pad-x); /* The part is its own container. A row inside it is sized by the column the edge gives it, so a clause about what a row can print has to read the column, not the shell. inline-size, not size: the part's height is the window's room, and a size container must be independent of what it holds. */ container-type: inline-size; container-name: pane; }
.pane[hidden] { display: none; }
.pane[data-scroll="y"] { overflow: hidden; }
.tray-divider { /* The height is declared on the shell, not here: the shell is the thing whose room is traded, so the number it subtracts is its own row's number, stated once. */ position: relative; flex: none; height: var(--divider-h); margin: 0; padding: 0; appearance: none; background: none; border: none; display: flex; align-items: center; cursor: ns-resize; }
.tray-divider::before { content: ''; width: 100%; height: 1px; background: color-mix(in srgb, var(--c-line) 55%, var(--c-accent) 25%); }
.tray-divider:hover::before, .tray-divider:focus-visible::before, .tray-divider.grabbing::before { background: var(--c-accent); }
@media (hover: none) and (pointer: coarse) { .tray-divider { height: var(--divider-h); touch-action: none; /* The number is raised on the shell, so this rule only restates the box with the new number and adds the gesture guard. */ } }
@media (hover: none) and (pointer: coarse) { .tray-divider::before { background: linear-gradient(90deg, color-mix(in srgb, var(--c-line) 55%, var(--c-accent) 25%) 0 40%, var(--c-accent) 40% 60%, color-mix(in srgb, var(--c-line) 55%, var(--c-accent) 25%) 60% 100%); } }
.pane-switch { /* The same declared row as the tab row above: it is the shell's row, and the resolver subtracts it as chrome. */ flex: none; display: flex; align-items: center; gap: 0.2rem; height: var(--tabs-h); box-sizing: border-box; padding: var(--tabs-pad) 0.6rem; }
.pane-switch[hidden] { display: none; }
.terminal.is-maximised .pane-switch { display: none; }
.pane-tab { appearance: none; font: inherit; cursor: pointer; }
.pane-in { overflow: hidden; animation: pane-in var(--dur-pane-in) cubic-bezier(.2,.7,.2,1) both; }
.pane-out { overflow: hidden; animation: pane-out var(--dur-pane-out) ease-in both; }
@keyframes pane-in { from { --pane-open: 0; opacity: 0; transform: translate(var(--pane-from, 0, 10px)); } to { --pane-open: 1; opacity: 1; transform: none; } }
@keyframes pane-out { from { --pane-open: 1; opacity: 1; transform: none; } to { --pane-open: 0; opacity: 0; transform: translate(var(--pane-from, 0, 10px)); } }
.mp-field { --field-inset: 0px; position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: 0; pointer-events: none; background: linear-gradient(180deg, color-mix(in srgb, var(--surface1) 12%, transparent), color-mix(in srgb, var(--pane-plate) 58%, transparent)); border-top: 1px solid color-mix(in srgb, var(--surface2) 72%, transparent); }
.mp-glass { position: absolute; inset: var(--field-inset); width: calc(100% - 2 * var(--field-inset)); height: calc(100% - 2 * var(--field-inset)); display: block; pointer-events: none; }
.mp-field::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 42%, color-mix(in srgb, var(--crust) 38%, transparent)); }
.mp-row { display: flex; align-items: center; gap: 0.45rem; min-width: 0; }
.mp-controls { display: flex; align-items: center; gap: 0.15rem; flex: none; }
#seekRange { flex: 1 1 0; min-width: min(80px, calc(100% - 4rem)); }
.fx-gname { flex: none; color: var(--c-dim); font-size: 0.68rem; }
.mp-val, .fx-val { flex: none; min-width: min(var(--fx-val-w), 100%); text-align: right; font-size: 0.68rem; color: var(--c-dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mp-val.on, .fx-val.on { color: var(--fx-accent, var(--c-accent)); }
.fx-bar { display: grid; grid-template-columns: repeat(var(--bar-per-line), minmax(var(--chip-min), 1fr)); gap: var(--chip-gap); align-items: center; height: calc(var(--fx-bar-h) * var(--ui-scale, 1)); box-sizing: border-box; }
.fx-bar .fx-btn { width: 100%; min-width: 0; }
.fx-line { display: flex; align-items: center; gap: var(--mod-gap); flex-wrap: wrap; height: calc(var(--fx-mod-h) * var(--ui-scale, 1)); box-sizing: border-box; }
.fx-mod { display: inline-flex; align-items: center; gap: 0.35rem; min-width: 0; padding: 0.1rem 0.4rem; background: color-mix(in srgb, var(--surface1) 45%, transparent); border: 1px solid var(--c-line-soft); border-radius: var(--radius); }
.fx-line.fx-speed .fx-mod { flex: 1 1 100%; min-width: min(200px, 100%); }
.fx-mod .fx-name { flex: none; color: var(--c-dim); font-size: 0.68rem; }
.fx-mod .fx-range { flex: 1 1 0; min-width: min(44px, 100%); }
.fx-gname { appearance: none; background: none; border: none; padding: 0; font: inherit; cursor: pointer; }
.fx-gname:hover { color: var(--c-text); }
.eq-curve { position: relative; flex: 1 1 200px; height: calc(var(--mp-eq-h) * var(--ui-scale, 1) - 2px); min-width: min(150px, calc(100% - 2rem)); background: color-mix(in srgb, var(--surface0) 40%, transparent); border: 1px solid var(--c-line-soft); border-radius: var(--radius); }
.eq-curve canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.eq-node { position: absolute; left: var(--x, 50%); bottom: 1px; transform: translateX(-50%); }
@container tray (max-width: 460px) { .fx-mod { min-width: 0; } }
@container tray (max-width: 460px) { .fx-range { min-width: 40px; } }
@container tray (max-width: 460px) { .fx-val, .mp-val { min-width: 0; } }
@container tray (max-width: 460px) { .eq-curve { min-width: min(120px, calc(100% - 2px)); flex-basis: 120px; } }
@container tray (max-width: 460px) { .eq-node { font-size: 0.55rem; min-width: 0; padding: 0.1rem 0.12rem; } }
.fx-mod[data-fx="speed"] { --fx-accent: var(--c-accent); --fx-neutral: 42.857%; }
.fx-mod[data-fx="reverb"] { --fx-accent: var(--sky); }
.fx-mod[data-fx="echo"] { --fx-accent: var(--teal); }
.fx-mod[data-fx="underwater"] { --fx-accent: var(--blue); }
.fx-mod[data-fx="crunch"] { --fx-accent: var(--peach); }
.eq-node[data-fx="sub"] { --fx-accent: var(--red); }
.eq-node[data-fx="bass"] { --fx-accent: var(--peach); }
.eq-node[data-fx="lowmid"] { --fx-accent: var(--yellow); }
.eq-node[data-fx="mid"] { --fx-accent: var(--green); }
.eq-node[data-fx="highmid"] { --fx-accent: var(--teal); }
.eq-node[data-fx="presence"] { --fx-accent: var(--sky); }
.eq-node[data-fx="treble"] { --fx-accent: var(--lavender); }
.fx-range, .mp-range { -webkit-appearance: none; appearance: none; box-sizing: border-box; width: 100%; height: 18px; cursor: pointer; border: none; background: transparent; --fx-fill: 0%; }
.mp-range { --fx-accent: var(--c-accent); }
.fx-range::-webkit-slider-runnable-track, .mp-range::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--fx-accent, var(--green)) var(--fx-fill), var(--surface1) var(--fx-fill)); }
.fx-range::-webkit-slider-thumb, .mp-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 10px; height: 14px; margin-top: -5px; border-radius: 2px; background: var(--fx-accent, var(--green)); box-shadow: 0 0 6px color-mix(in srgb, var(--fx-accent, var(--green)) 60%, transparent); }
.fx-range::-moz-range-track, .mp-range::-moz-range-track { height: 4px; border-radius: 2px; background: var(--surface1); }
.fx-range::-moz-range-progress, .mp-range::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--fx-accent, var(--green)); }
.fx-range::-moz-range-thumb, .mp-range::-moz-range-thumb { width: 10px; height: 14px; border: none; border-radius: 2px; background: var(--fx-accent, var(--green)); }
}

[is-~=badge][variant-=teal] { --badge-color: var(--teal);--badge-text: var(--base) }
[is-~=badge][variant-=mauve] { --badge-color: var(--mauve);--badge-text: var(--base) }
[is-~=badge][variant-=green] { --badge-color: var(--green);--badge-text: var(--base) }
[is-~=badge][variant-=blue] { --badge-color: var(--blue);--badge-text: var(--base) }
[is-~=badge][variant-=peach] { --badge-color: var(--peach);--badge-text: var(--base) }
[is-~=badge][variant-=yellow] { --badge-color: var(--yellow);--badge-text: var(--base) }
[is-~=badge][variant-=red] { --badge-color: var(--red);--badge-text: var(--base) }
[is-~=badge][variant-=lavender] { --badge-color: var(--lavender);--badge-text: var(--base) }
@property --think-fill { syntax: '<color>'; inherits: true; initial-value: transparent; }
html[data-screen="off"] .terminal::before, html[data-screen="off"] .terminal::after { display: none; }
html[data-screen="glass"] .terminal::before { display: none; }
html[data-mode="light"] .terminal::before { mix-blend-mode: soft-light; opacity: 0.16; }
.fx-mod[data-fx="speed"] .fx-range::-webkit-slider-runnable-track { background-image: linear-gradient(var(--c-dim), var(--c-dim)), linear-gradient(to right, var(--fx-accent, var(--green)) var(--fx-fill), var(--surface1) var(--fx-fill)); background-size: 2px 100%, auto; background-position: var(--fx-neutral) center, 0 0; background-repeat: no-repeat; }
.fx-range.bipolar::-webkit-slider-runnable-track { background: linear-gradient(to right, transparent calc(50% - 1px), var(--c-line) calc(50% - 1px), var(--c-line) calc(50% + 1px), transparent calc(50% + 1px)), linear-gradient(to right, var(--surface1) 0, var(--fx-accent, var(--green)) min(50%, var(--fx-fill)), var(--fx-accent, var(--green)) max(50%, var(--fx-fill)), var(--surface1) max(50%, var(--fx-fill))); }
.fx-range.bipolar::-moz-range-track { background: linear-gradient(to right, var(--surface1) 0, var(--fx-accent, var(--green)) min(50%, var(--fx-fill)), var(--fx-accent, var(--green)) max(50%, var(--fx-fill)), var(--surface1) max(50%, var(--fx-fill))); }
.fx-range.bipolar::-moz-range-progress { background: transparent; }
.mp-btn { appearance: none; }
.mp-btn:hover { color: var(--c-text); border-color: var(--c-line); background: color-mix(in srgb, var(--surface0) 50%, transparent); }
.mp-btn:active { transform: translateY(1px); }
.mp-btn.play { color: var(--green); }
.mp-btn.play:hover { color: var(--green); }
.mp-btn.on { color: var(--green); }
.mp-btn.on:hover { color: var(--green); }
.mp-title { min-width: min(40px, 100%); font-size: 0.78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--c-text); padding: 0 0.3rem; user-select: none; -webkit-user-select: none; }
.mp-vol { --vol: 1; --vol-fill: 100%; min-width: 64px; min-height: var(--hit); display: flex; align-items: center; gap: 0.2rem; font-size: 0.68rem; color: var(--c-dim); font-variant-numeric: tabular-nums; background: linear-gradient(to right, color-mix(in srgb, var(--c-accent) 18%, transparent) var(--vol-fill), transparent var(--vol-fill)), color-mix(in srgb, var(--surface0) calc(var(--vol) * 100%), var(--crust)); border-radius: var(--radius); padding: 0.1rem 0.35rem; cursor: ew-resize; touch-action: none; user-select: none; -webkit-user-select: none; }
.mp-title .artist { color: var(--c-dim); }
.mp-title .nm { color: var(--c-text); flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-title .idle { color: var(--c-dimmer); }
.mp-title .vol-ic, .mp-title .vol-pct { display: none; }
.mp-title .vol-ic { flex: none; width: 12px; height: 12px; color: var(--c-text); }
.mp-title .vol-pct { flex: none; font-size: 0.68rem; color: var(--c-dim); font-variant-numeric: tabular-nums; }
.taskbar { padding: var(--bar-pad) 0.7rem; border-top: 1px solid var(--c-line-soft); background: var(--crust); font-size: 0.72rem; color: var(--c-dim); }
.taskbar .page-menu { top: auto; bottom: calc(100% + 5px); }
.tb-segment[data-segment="left"] .tb-field .page-menu { left: 0; right: auto; }
.tb-segment[data-segment="middle"] .tb-field .page-menu { left: 50%; right: auto; translate: -50% 0; }
.tb-segment[data-segment="right"] .tb-field .page-menu { left: auto; right: 0; }
.taskbar .mode { letter-spacing: 0.1em; color: var(--mantle); background: var(--green); padding: 0.05rem 0.4rem; font-weight: 700; flex: none; box-sizing: border-box; width: 100%; display: inline-grid; place-items: center; white-space: nowrap; }
.footnote { flex: none; text-align: center; font-size: 0.74rem; color: var(--c-dimmer); margin: 0.5rem 0 0; }
.credit { flex: none; align-self: center; text-align: center; font-size: 0.68rem; color: var(--c-dimmer); margin: 0.2rem 0 0.4rem; appearance: none; background: transparent; border: 1px solid transparent; border-radius: var(--radius); font: inherit; font-size: 0.68rem; line-height: 1.3; height: auto; min-height: 0; width: fit-content; padding: 0.05rem 0.5rem; cursor: default; transition: border-color 120ms ease, color 120ms ease, background-color 120ms ease; }
@media (hover: none) and (pointer: coarse) { .footnote .fn-keys { display: none; } }
.footnote .fn-gestures { display: none; }
.footnote code { color: var(--c-warn); }
.footnote kbd { font: inherit; color: var(--c-text); border: 1px solid var(--c-line); background: var(--surface0); padding: 0 0.3rem; border-radius: 2px; font-size: 0.7rem; }
.terminal.is-booting { animation: power-on 620ms cubic-bezier(.2,.7,.2,1) both; }
.terminal.is-booting .screen, .terminal.is-booting .promptline, .terminal.is-booting .tray, .terminal.is-booting .taskbar, .terminal.is-booting .sidebar { opacity: 0; }
.terminal.is-booting::after { animation: power-flash 620ms ease-out; }
.boot-overlay { position: absolute; inset: 0; z-index: var(--z-popup); pointer-events: none; background: #fff; opacity: 0; }
.boot-overlay.flash { animation: boot-flash 480ms ease-out; }
.skip-anim .terminal, .skip-anim .terminal *, .skip-anim .terminal *::before, .skip-anim .terminal *::after { animation: none !important; }
.skip-anim .terminal.is-booting .screen, .skip-anim .terminal.is-booting .promptline, .skip-anim .terminal.is-booting .tray, .skip-anim .terminal.is-booting .taskbar, .skip-anim .terminal.is-booting .sidebar { opacity: 1; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
@media (prefers-reduced-motion: reduce) { .terminal::before { opacity: 0.18; } }
@keyframes blink { 0%,49%{opacity:1} 50%,100%{opacity:0} }
@keyframes ph-dot-blink { 0%,100%{opacity:1} 50%{opacity:0.15} }
@keyframes flicker { 0%,47% { filter: brightness(1); } 48% { filter: brightness(0.86); } 49% { filter: brightness(1.03); } 82% { filter: brightness(0.94); } 83% { filter: brightness(1.06); } 100% { filter: brightness(1); } }
@keyframes line-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.scanline { position: relative; overflow: hidden; clip-path: inset(0 100% 0 0); -webkit-clip-path: inset(0 100% 0 0); animation: scan-reveal 240ms linear forwards; animation-delay: var(--d, 0ms); }
.scanline::after { content: ''; position: absolute; top: 0; bottom: 0; left: -1ch; width: 1ch; pointer-events: none; background: var(--c-text); box-shadow: 0 0 6px color-mix(in srgb, var(--c-accent) 70%, transparent); animation: scan-sweep 240ms steps(20, end) forwards; animation-delay: var(--d, 0ms); }
@keyframes scan-reveal { from { clip-path: inset(0 100% 0 0); -webkit-clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); -webkit-clip-path: inset(0 0 0 0); } }
@keyframes scan-sweep { 0% { left: -1ch; opacity: 1; } 85% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
.doc-content { border: none; padding: 0.2rem 0; }
.stat { color: var(--green); }
@media (min-width: 1500px) { :root { --font-size: 16px; } }
@keyframes power-on { 0% { transform: scaleY(0.004) scaleX(0.96); filter: brightness(4) saturate(0); opacity: 0; } 18% { opacity: 1; } 40% { transform: scaleY(0.02) scaleX(0.98); filter: brightness(2.4) saturate(.4); } 100% { transform: none; filter: none; } }
@keyframes power-flash { 0%{opacity:.0} 25%{opacity:.5} 60%{opacity:.12} 100%{opacity:0} }
@keyframes boot-flash { 0%{opacity:.85} 30%{opacity:.2} 100%{opacity:0} }
@media (max-width: 860px) { body { padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px)); } }
@media (max-width: 860px) { .crt-frame { gap: 0.3rem; } }
@media (max-width: 860px) { .footnote { margin: 0; font-size: 0.6rem; } }
@media (max-width: 860px) { .screen { padding: min(0.6rem, calc(var(--doc-min) / 2)) 0.7rem min(0.6rem, calc(var(--doc-min) / 2)); } }
@media (max-width: 860px) { .sidebar { flex-direction: row; align-items: center; gap: 0.2rem; height: var(--tabs-h); padding: var(--tabs-pad) 0.5rem; border-right: 0; border-bottom: 1px solid var(--c-line-soft); } }
@media (max-width: 860px) { .tab { flex: 0 0 auto; white-space: nowrap; } }
@media (max-width: 860px) { .mp-row { flex-wrap: wrap; } }
@media (max-width: 860px) { .cols-3, .inv-grid { grid-template-columns: 1fr; } }
@media (max-width: 860px) { .likes { column-count: 1; } }
@media (max-width: 860px) { .lang-cols { grid-template-columns: 1fr; gap: 0.5rem; } }
@media (max-width: 860px) { .pair { grid-template-columns: 1fr; } }
@media (max-width: 860px) { .taskbar { font-size: 0.66rem; gap: 0.4rem; } }
@media (max-width: 860px) { .hw-svc-when { display: none; } }
@media (max-width: 860px) { .hw-svc-name { min-width: 0; } }
@media (max-width: 860px) { .msg-think-body { max-height: min(45vh, 24rem); padding: 0.5rem 0.4rem; } }
@media (max-width: 860px) { .msg { gap: 0.1rem; } }
@media (max-width: 860px) { html[data-kb] .footnote, html[data-kb] .credit { display: none; } }
@media (max-width: 860px) { html[data-kb] .tb-segment[data-segment="left"] { display: none; } }
@media (max-width: 860px) { #ask-input { font-size: 16px; } }
@media (max-width: 860px) { .pl-ph { font-size: 16px; } }
@media (max-width: 860px) { .promptline { gap: 0.3rem; } }
@media (max-width: 860px) { .tab { font-size: 0.8rem; padding: 0.25rem 0.55rem; } }
html[data-theme="phosphor"] { --mauve: #a8b56a; --green: #8fbf6f; --blue: #a8b56a; --yellow: #a8b56a; --red: #e07a6a; --peach: #a8b56a; --teal: #8fbf6f; --sky: #a8b56a; --lavender: #a8b56a; --text: #e9e7db; --subtext1: #9a9c8a; --subtext0: #9a9c8a; --overlay2: #40432f; --overlay1: #40432f; --overlay0: #2c2e22; --surface2: #22241a; --surface1: #2c2e22; --surface0: #22241a; --base: #14150f; --mantle: #1b1c14; --crust: #14150f; }
html[data-theme="combine"] { --blue: #5b8fbf; --sky: #5b8fbf; --lavender: #7fa3cc; --teal: #4f8fa0; --green: #6f9a86; --yellow: #b08a4f; --red: #c4574f; --peach: #b0764f; --text: #d5dde6; --subtext1: #8a94a0; --subtext0: #8a94a0; --overlay2: #3a444e; --overlay1: #3a444e; --overlay0: #2f3841; --surface2: #2b343d; --surface1: #232b33; --surface0: #1c2229; --base: #111519; --mantle: #161b21; --crust: #0e1216; --c-accent: var(--blue); /* idle monitor */ }
html[data-theme="hecu"] { --green: #6f8f5a; --teal: #5f7f6a; --sky: #6f8f5a; --blue: #6f8f5a; --mauve: #7a8a5f; --lavender: #7a8a5f; --yellow: #b08a4f; --peach: #a06f45; --red: #b05a4a; --text: #c9c4a8; --subtext1: #8a8570; --subtext0: #8a8570; --overlay2: #3a3a2c; --overlay1: #3a3a2c; --overlay0: #262619; --surface2: #1f1f15; --surface1: #262619; --surface0: #1f1f15; --base: #12120c; --mantle: #17170f; --crust: #0e0e09; --c-accent: var(--green); /* night sight */ }
html[data-theme="hev"] { --green: #7fa06a; --teal: #6f8f7a; --sky: #8a7f5f; --blue: #6f7f8f; --mauve: #d96f1c; --lavender: #d96f1c; --yellow: #e0a83c; --peach: #d96f1c; --red: #c4574f; --text: #e6d9b8; --subtext1: #9a8a6a; --subtext0: #9a8a6a; --overlay2: #4a3a22; --overlay1: #4a3a22; --overlay0: #322a18; --surface2: #282114; --surface1: #322a18; --surface0: #282114; --base: #16100a; --mantle: #1a130b; --crust: #120c07; --c-accent: var(--peach); /* the suit */ }
html[data-theme="hecu"][data-mode="light"] { --green: #4f6a3f; --teal: #44604f; --sky: #4f6a3f; --blue: #4f6a3f; --mauve: #5a6a44; --lavender: #5a6a44; --yellow: #8a6a3a; --peach: #7a5434; --red: #94443a; }
html[data-theme="hev"][data-mode="light"] { --green: #5a7a4f; --teal: #4f6a5f; --sky: #6a5f44; --blue: #4f5a6a; --mauve: #c05a14; --lavender: #c05a14; --yellow: #b07a24; --peach: #c05a14; --red: #a8443c; }
html[data-theme="portal"][data-mode="light"] { --blue: #1f7fb8; --sky: #2f8fc4; --lavender: #4a7fb8; --peach: #d96f1c; --yellow: #b8863a; --red: #b04a42; --green: #4a7a72; --teal: #3f7f90; --mauve: #d96f1c; }
html[data-theme="mesa"][data-mode="light"] { --blue: #2f6a99; --sky: #3f7fb0; --lavender: #4a7ba8; --teal: #2f6a80; --green: #4a7a66; --yellow: #8a6a3a; --peach: #8a5a3a; --red: #a8443c; --mauve: #8a6a3a; }
html[data-theme="xen"][data-mode="light"] { --green: #4a7a55; --teal: #3f7f78; --sky: #4a86a0; --blue: #5a7a9a; --lavender: #7a6a9a; --mauve: #9a5a8a; --peach: #7a5a44; --yellow: #8a7a4a; --red: #a8443c; }
html[data-theme="race-x"][data-mode="light"] { --blue: #4a5a7a; --sky: #5a7088; --lavender: #6a6688; --teal: #5a7072; --green: #6a7660; --yellow: #8a7a4a; --peach: #7a5a44; --red: #a8443c; --mauve: #6a6680; }
html[data-theme="portal"] { --blue: #3fa9d8; --sky: #58b8e0; --lavender: #6a9bd8; --peach: #e08a3c; --yellow: #d8a84f; --red: #c4574f; --green: #5f8f8a; --teal: #4f8fa0; --mauve: #e08a3c; --text: #e8ebee; --subtext1: #8b949c; --subtext0: #8b949c; --overlay2: #4a5259; --overlay1: #3a4148; --overlay0: #3a4148; --surface2: #2b3137; --surface1: #23282d; --surface0: #1b1f23; --base: #101214; --mantle: #15181b; --crust: #0c0e10; --c-accent: var(--peach); /* the orange Aperture paints on a door */ }
html[data-theme="xen"] { --green: #6f9f7a; --teal: #4f9f9a; --sky: #58a0b8; --blue: #6a8fc0; --lavender: #9a7fb8; --mauve: #b06fa0; --peach: #c48a5f; --yellow: #b8a85f; --red: #c4574f; --text: #d8e6d8; --subtext1: #8a9c8c; --subtext0: #8a9c8c; --overlay2: #364a3d; --overlay1: #364a3d; --overlay0: #2c3d32; --surface2: #26362b; --surface1: #1d2b22; --surface0: #16211a; --base: #0d1410; --mantle: #121a15; --crust: #090f0b; --c-accent: var(--mauve); /* the flora, and the vortigaunt's energy */ }
html[data-theme="mesa"] { --blue: #4a7fb5; --sky: #58a0cc; --lavender: #6a8fc0; --teal: #4f8899; --green: #6a8f7a; --yellow: #c9a24a; --peach: #b07a3f; --red: #c4574f; --mauve: #c9a24a; --text: #dfe4ea; --subtext1: #8b95a2; --subtext0: #8b95a2; --overlay2: #3a4450; --overlay1: #3a4450; --overlay0: #2f3844; --surface2: #262e39; --surface1: #1d242e; --surface0: #161c24; --base: #0c1014; --mantle: #11161c; --crust: #080b0f; --c-accent: var(--yellow); /* the badge brass */ }
html[data-theme="race-x"] { --blue: #6a7f9f; --sky: #7f96b0; --lavender: #8a86b0; --teal: #6a8688; --green: #7a8a72; --yellow: #b0a06a; --peach: #a08060; --red: #b05a4a; --mauve: #8a86a0; --text: #e2e2e6; --subtext1: #8c8c94; --subtext0: #8c8c94; --overlay2: #3d3d44; --overlay1: #3d3d44; --overlay0: #33333a; --surface2: #2a2a2f; --surface1: #1f1f23; --surface0: #17171a; --base: #0d0d0f; --mantle: #121214; --crust: #0a0a0c; --c-accent: var(--blue); /* the cold institutional blue */ }
html[data-mode="light"] { --base: #eef0f2; --mantle: #e6e9ec; --crust: #e0e3e6; --surface0: #d7dade; --surface1: #c6cbd0; --surface2: #b3b9c0; --overlay0: #9aa1a8; --overlay1: #878e96; --overlay2: #878e96; --text: #1b2024; --subtext0: #5c646c; --subtext1: #5c646c; color-scheme: light; }
html[data-mode="light"] { --panel-plate: color-mix(in srgb, var(--screen-plate) 90%, black); }
html[data-theme="phosphor"][data-mode="light"] { --mauve: #6e7a3a; --green: #4f7a3a; --blue: #6e7a3a; --yellow: #6e7a3a; --red: #b04a42; --peach: #6e7a3a; --teal: #4f7a3a; --sky: #6e7a3a; --lavender: #6e7a3a; }
html[data-theme="combine"][data-mode="light"] { --blue: #2f6a99; --sky: #2f6a99; --lavender: #4a7ba8; --teal: #2f6a80; --green: #4a7a66; --yellow: #8a6a3a; --red: #a8443c; --peach: #8a5a3a; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.section-doc table { border-spacing: 0; border-collapse: collapse; width: 100%; font-size: 0.8rem; border: 1px solid var(--surface1); background: transparent; }
.section-doc table::before, .section-doc table tr th::before, .section-doc table tr td::before, .section-doc table tr th::after, .section-doc table tr td::after { content: none; }
.section-doc table tr th, .section-doc table tr td { position: static; padding: 0.42rem 0.6rem; border: 1px solid var(--surface1); text-align: left; vertical-align: top; line-height: 1.45; }
.section-doc table tr th { color: var(--peach); background: color-mix(in srgb, var(--surface0) 55%, transparent); font-weight: 600; white-space: nowrap; }
.section-doc table tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--surface0) 14%, transparent); }
.section-doc table tbody tr:hover td { background: color-mix(in srgb, var(--mauve) 10%, transparent); }
.section-doc table td a { border-bottom: none; }
.msg-content p, .msg-content li, .msg-content blockquote, .msg-content strong, .msg-content em, .msg-content a, .msg-think-body p, .msg-think-body li, .msg-think-body blockquote, .msg-think-body strong, .msg-think-body em, .msg-think-body a { font-size: inherit; line-height: inherit; color: inherit; }
.msg-content p, .msg-content ul, .msg-content ol, .msg-content blockquote { margin: 0.15rem 0; }
.msg-think-body p, .msg-think-body ul, .msg-think-body ol, .msg-think-body blockquote { margin: 0.06rem 0; }
.msg-content li, .msg-think-body li { margin: 0.05rem 0; }
.msg-content ul, .msg-content ol, .msg-think-body ul, .msg-think-body ol { padding-left: 1rem; }
.msg-content > :first-child, .msg-think-body > :first-child { margin-top: 0; }
.msg-content > :last-child, .msg-think-body > :last-child { margin-bottom: 0; }
.msg-content h1, .msg-content h2, .msg-think-body h1, .msg-think-body h2 { font-size: 1.15em; font-weight: 700; line-height: inherit; color: inherit; margin: 0.35rem 0 0.15rem; }
.msg-content h3, .msg-content h4, .msg-content h5, .msg-content h6, .msg-think-body h3, .msg-think-body h4, .msg-think-body h5, .msg-think-body h6 { font-size: inherit; font-weight: 700; line-height: inherit; color: inherit; margin: 0.3rem 0 0.1rem; }
.msg-content code, .msg-think-body code { font-size: inherit; padding: 0.05rem 0.25rem; }
.msg-content pre, .msg-think-body pre { font-size: inherit; line-height: inherit; margin: 0.3rem 0; min-width: 0; max-width: 100%; overflow-x: auto; }
.msg-content pre code, .msg-think-body pre code { padding: 0; }
@media (max-width: 860px) { .section-doc .table-wrap { overflow-x: visible; margin: 0.45rem 0; } }
@media (max-width: 860px) { .section-doc table, .section-doc tbody, .section-doc tr, .section-doc th, .section-doc td { display: block; width: 100% !important; box-sizing: border-box; } }
@media (max-width: 860px) { .section-doc thead { display: none; } }
@media (max-width: 860px) { .section-doc table { border: none; background: transparent; } }
@media (max-width: 860px) { .section-doc tbody tr { border: 1px solid var(--surface1); background: color-mix(in srgb, var(--surface0) 18%, transparent); margin: 0 0 0.5rem; padding: 0.35rem 0.55rem; } }
@media (max-width: 860px) { .section-doc tbody tr:nth-child(even) td, .section-doc tbody tr:hover td { background: transparent; } }
@media (max-width: 860px) { .section-doc tbody tr:last-child { margin-bottom: 0; } }
@media (max-width: 860px) { .section-doc tr th, .section-doc tr td { border: none; padding: 0.3rem 0; } }
@media (max-width: 860px) { .section-doc td { border-bottom: 1px dashed var(--surface0); line-height: 1.5; } }
@media (max-width: 860px) { .section-doc td:last-child { border-bottom: none; } }
@media (max-width: 860px) { .section-doc td::before { content: attr(data-label); display: block; font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--peach); font-weight: 600; margin-bottom: 0.12rem; } }
@media (max-width: 860px) { .section-doc td:not([data-label])::before, .section-doc td[data-label=""]::before { content: none; } }
@media (max-width: 860px) { #ask-input { font-size: 16px; } }
.tab, .mp-btn, .icon-btn, .fx-btn, .fx-name, .tb-value { background-color: transparent; background-image: none; border: 1px solid transparent; color: var(--c-dim); font-family: var(--font-family); outline: none; }
.fx-gname, .eq-node { appearance: none; background-color: transparent; background-image: none; border: none; color: var(--c-dim); font-family: var(--font-family); font-size: 0.68rem; line-height: 1.4; height: auto; min-width: var(--hit); min-height: var(--hit); /* webtui gives a plain button 3lh; for a label that is the row's height, not the word's. The box is the site's declared minimum, because a word you are meant to press is a control and not a label. */ padding: 0.2rem 0.3rem; outline: none; cursor: pointer; }
.pane-tab { height: auto; min-height: var(--hit); line-height: 1.5; background-color: transparent; background-image: none; color: var(--c-dim); font-size: 0.74rem; letter-spacing: 0.02em; padding: 0.08rem 0.5rem; border: 1px solid transparent; outline: none; text-decoration: none; }
.ind-toggle[aria-pressed="false"] { color: var(--c-dimmer); }
.eq-node { color: var(--c-text); }
.eq-node.on { color: var(--fx-accent, var(--c-accent)); }
.tab { display: inline-flex; align-items: center; height: auto; min-height: var(--hit); font-size: 0.74rem; line-height: 1.5; padding: 0.08rem 0.5rem; letter-spacing: 0.02em; cursor: pointer; }
.tab .t { color: var(--mauve); margin-right: 0.18rem; font-weight: 700; }
.tab.active .t { color: var(--green); }
.tab:hover { color: var(--c-text); background-color: color-mix(in srgb, var(--surface0) 50%, transparent); }
.tab.active { color: var(--c-text); border-color: var(--c-line); background-color: color-mix(in srgb, var(--surface0) 70%, transparent); box-shadow: inset 0 -2px 0 var(--c-accent); }
.tab:focus-visible, .pane-tab:focus-visible, .mp-btn:focus-visible, .icon-btn:focus-visible, .fx-btn:focus-visible, .fx-name:focus-visible, .fx-gname:focus-visible, .eq-node:focus-visible, .ind-toggle:focus-visible, .fx-range:focus-visible, .mp-range:focus-visible, .tb-value:focus-visible { outline: 1px solid var(--c-accent); outline-offset: 1px; font-weight: 400; text-decoration: none; }
.tab:focus, .pane-tab:focus, .mp-btn:focus, .icon-btn:focus, .fx-btn:focus, .fx-name:focus, .fx-gname:focus, .eq-node:focus, .ind-toggle:focus, .tb-value:focus, .exits-btn:focus { font-weight: 400; text-decoration: none; }
.exits-btn { background-color: transparent; background-image: none; border: 0; color: var(--peach); font-family: var(--font-family); font-size: 0.74rem; letter-spacing: 0.02em; cursor: pointer; outline: none; height: auto; min-height: var(--hit); }
.exits-btn .t { color: var(--peach); font-weight: 700; }
.exits-btn:focus-visible { outline: 1px solid var(--c-accent); outline-offset: 1px; font-weight: 400; text-decoration: none; }
:root { --dur-fast: 120ms; --dur-slow: 1500ms; --dur-pane-in: 280ms; --dur-pane-out: 200ms; --ease: ease; --dur-msg-in: 220ms; --dur-pulse: 900ms; --dur-pulse-active: 700ms; --dur-caret: 900ms; --dur-think: 4000ms; --dur-ph: 1400ms; --dur-nudge: 900ms; --dur-settle: 480ms; --ease-out: cubic-bezier(.22,.61,.36,1); --ease-spring: cubic-bezier(.34,1.56,.64,1); }
:root { --icon-btn: var(--hit); --icon-glyph: 1rem; }
@media (hover: none) and (pointer: coarse) { :root { --hit: 1.75rem; } }
@media (max-width: 860px) { :root { --tabs-pad: 0.3rem; } }
.icon-btn, .mp-btn { box-sizing: border-box; padding: 0; width: var(--icon-btn); height: var(--icon-btn); display: grid; place-items: center; flex: none; border-color: var(--c-line); border-radius: 3px; cursor: pointer; transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease; }
.raylm-bottom.pulse { border-color: var(--c-accent); color: var(--c-accent); animation: nudge var(--dur-nudge) var(--ease) infinite; }
.icon-btn svg, .icon-btn img { width: var(--icon-glyph); height: var(--icon-glyph); }
.icon-btn:active { transform: translateY(1px); }
.icon-btn[hidden], .ask-queue[hidden], .pl-queue[hidden], .tray-divider[hidden], .tray[hidden] { display: none; }
.tb-icon, .tb-value { background-color: color-mix(in srgb, var(--surface0) 40%, transparent); }
.tb-icon:hover, .tb-value:hover { background-color: color-mix(in srgb, var(--surface0) 70%, transparent); }
.tb-icon[aria-pressed="true"], .tb-value[aria-pressed="true"] { color: var(--c-accent); border-color: color-mix(in srgb, var(--c-accent) 45%, var(--c-line)); }
.tb-value { box-sizing: border-box; display: inline-grid; place-items: center; height: var(--icon-btn); padding: 0 0.4rem; border-color: var(--c-line); border-radius: 3px; font-size: inherit; cursor: pointer; }
.tb-value[aria-pressed="true"] { background-color: color-mix(in srgb, var(--c-accent) 14%, transparent); }
.tb-value.glyph { width: var(--icon-btn); padding: 0; }
.tb-value.glyph svg { width: var(--icon-glyph); height: var(--icon-glyph); }
.page-menu { transition: opacity var(--dur-fast) var(--ease), max-height var(--dur-fast) var(--ease); }
.page-menu-item { display: flex; align-items: center; justify-content: flex-start; width: 100%; height: auto; padding: 0.3rem 0.5rem; border-radius: 2px; background-color: transparent; background-image: none; border: 0; color: var(--menu-color, var(--c-dim)); font-family: var(--font-family); font-size: 0.74rem; line-height: 1.45; letter-spacing: 0.02em; white-space: nowrap; cursor: pointer; outline: none; transition: background-color 120ms ease, color 120ms ease; }
.page-menu-item:hover { background-color: color-mix(in srgb, var(--surface1) 55%, transparent); color: var(--menu-color, var(--c-text)); }
.page-menu-item .t { color: inherit; margin-right: 0.18rem; font-weight: 700; }
.page-menu-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page-menu-src { flex: none; color: var(--c-dimmer); font-size: 0.68rem; letter-spacing: 0.04em; }
.page-menu-item:disabled { color: var(--c-dimmer); cursor: default; text-decoration: line-through; }
.page-menu-item:disabled:hover { background-color: transparent; color: var(--c-dimmer); }
.page-menu-empty { padding: 0.3rem 0.5rem; color: var(--c-dimmer); font-size: 0.74rem; }
.page-menu-item[aria-checked="true"] { color: var(--c-accent); background-color: color-mix(in srgb, var(--c-accent) 12%, transparent); box-shadow: inset 2px 0 0 var(--c-accent); }
.page-menu-item:focus-visible { outline: 1px solid var(--c-accent); outline-offset: -1px; font-weight: 400; text-decoration: none; }
.mp-btn { font-size: 0.72rem; font-family: var(--font-glyph); display: inline-grid; place-items: center; }
.fx-btn, .fx-name { box-sizing: border-box; display: inline-grid; place-items: center; height: 1.5rem; padding: 0 0.4rem; border-color: var(--c-line); border-radius: 3px; font-size: 0.68rem; cursor: pointer; transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease; }
.fx-name { color: var(--fx-accent, var(--c-dim)); }
.fx-btn:hover, .fx-name:hover { color: var(--c-text); border-color: var(--c-line); background-color: color-mix(in srgb, var(--surface0) 50%, transparent); }
.fx-btn[aria-pressed="true"], .fx-name[aria-pressed="true"] { color: var(--fx-accent, var(--green)); border-color: color-mix(in srgb, var(--fx-accent, var(--green)) 45%, var(--c-line)); background-color: color-mix(in srgb, var(--fx-accent, var(--green)) 14%, transparent); }
.fx-mod .fx-name { height: auto; min-height: var(--hit); padding: 0.1rem 0.5rem; border: 1px solid var(--c-line-soft); background-color: var(--crust); border-radius: 999px; }
.fx-mod:has(.fx-name[aria-pressed="true"]) { border-color: color-mix(in srgb, var(--fx-accent, var(--green)) 45%, var(--c-line)); }
@media (hover: none) and (pointer: coarse) { .fx-btn, .fx-name { height: var(--hit); font-size: 0.7rem; } }
@media (hover: none) and (pointer: coarse) { .fx-range, .mp-range { height: 26px; } }
@media (hover: none) and (pointer: coarse) { .fx-range::-webkit-slider-thumb, .mp-range::-webkit-slider-thumb { width: 12px; height: 20px; margin-top: -8px; } }
.ask-send { background-color: color-mix(in srgb, var(--c-accent) 20%, transparent); color: var(--c-accent); }
.ask-send:hover { background-color: color-mix(in srgb, var(--c-accent) 32%, transparent); border-color: var(--c-accent); }
.ask-stop { background-color: color-mix(in srgb, var(--red) 20%, transparent); color: var(--red); }
.ask-stop:hover { background-color: color-mix(in srgb, var(--red) 34%, transparent); border-color: var(--red); }
.ask-clear:hover { background-color: color-mix(in srgb, var(--yellow) 18%, transparent); border-color: var(--yellow); color: var(--yellow); }
.ask-queue-item-del:hover { background-color: color-mix(in srgb, var(--red) 20%, transparent); border-color: var(--red); color: var(--red); }
.btn-label { display: none; }
@media (min-width: 861px) { .ask-send { display: inline-flex; align-items: center; gap: 0.35rem; width: auto; padding: 0 0.55rem; } }
@media (min-width: 861px) { .ask-send .btn-label { display: inline; font-size: 0.72rem; } }
.ask-queue-clear { box-sizing: border-box; display: inline-grid; place-items: center; height: var(--icon-btn); padding: 0 0.4rem; border-color: var(--c-line); border-radius: 3px; font-size: 0.66rem; cursor: pointer; }
#ask-input { background-color: transparent; background-image: none; border: none; box-shadow: none; color: var(--c-text); font-family: var(--font-family); outline: none; resize: none; overflow: hidden; }
@media (max-width: 860px) { .tab { font-size: 0.8rem; padding: 0.25rem 0.55rem; } }
.tb-field.model, .tb-field.theme { position: relative; z-index: var(--z-control); flex: 0 1 auto; min-width: 0; }
.tb-value.model, .tb-value.theme { display: inline-flex; align-items: center; gap: 0.18rem; flex: 0 1 auto; min-width: 0; max-width: 100%; }
.tb-field.model.is-open .tb-value.model, .tb-field.theme.is-open .tb-value.theme { color: var(--c-accent); border-color: color-mix(in srgb, var(--c-accent) 45%, var(--c-line)); }
.tb-nav { display: inline-flex; align-items: center; gap: 0.4rem; min-width: 0; flex: none; }
.tb-reset { flex: none; }
.tb-stats { margin-left: auto; display: inline-flex; align-items: center; gap: 0.5rem; min-width: 0; }
.tb-sep { color: var(--c-dimmer); flex: none; }
.taskbar { /* The declared height, and box-sizing so the padding is inside it: the row is the number the resolver subtracts, so the box has to be that number. */ display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: auto; grid-auto-flow: column; align-items: center; gap: 0.5rem; height: var(--bar-h); box-sizing: border-box; }
.tb-segment { display: inline-flex; align-items: center; gap: 0.3rem; min-width: 0; }
.tb-segment[data-segment="right"] { justify-self: end; min-width: 0; }
.tb-slot { display: inline-flex; align-items: center; flex: none; min-width: 0; }
.tb-slot[data-slot="mode"] { width: 14ch; }
.tb-slot[data-slot="theme"] { flex: 0 1 16ch; min-width: 8ch; }
.tb-slot[data-slot="think"] { width: var(--hit); }
.tb-slot[data-slot="palette"] { width: var(--hit); }
.tb-slot[data-slot="screen"] { width: var(--hit); }
@media (max-width: 860px) { .taskbar { gap: 0.35rem; } }
@media (max-width: 860px) { .tb-segment { gap: 0.25rem; } }
@media (max-width: 860px) { .topbar .tb-field .k { display: none; } }
@media (max-width: 860px) { .tb-slot[data-slot="theme"] { flex-basis: calc(8ch + 1.38rem); min-width: 6ch; } }
.tray-body.is-split > #pane-raylm { flex: 1 1 var(--split-w); min-width: 8rem; }
.tray-body.is-split > #pane-music { flex: 1 1 calc(100% - var(--split-w)); min-width: 9rem; }
.tray-split { --split-row: 8px; position: relative; flex: none; width: var(--split-row); margin: 0; padding: 0; appearance: none; background: none; border: none; display: flex; align-items: center; justify-content: center; cursor: ew-resize; }
.tray-split[hidden] { display: none; }
.tray-split::before { content: ''; width: 1px; height: 100%; background: color-mix(in srgb, var(--c-line) 55%, var(--c-accent) 25%); }
@media (max-width: 480px) { .tb-segment[data-segment="right"] { min-width: 0; } }
@media (max-width: 480px) { .taskbar { gap: 0.5rem; } }
.tray-split:hover::before, .tray-split:focus-visible::before, .tray-split.grabbing::before { background: var(--c-accent); }
@media (max-width: 420px) { .tb-slot[data-slot="mode"] { display: none; } }
@media (max-width: 480px) { .tb-segment { gap: 0.4rem; } }
@media (hover: none) and (pointer: coarse) { .tray-split { --split-row: 22px; width: var(--split-row); touch-action: none; } }
@media (max-width: 480px) { .taskbar .tb-field .k { display: none; } }
@media (hover: none) and (pointer: coarse) { .tray-split::before { background: linear-gradient(180deg, color-mix(in srgb, var(--c-line) 55%, var(--c-accent) 25%) 0 40%, var(--c-accent) 40% 60%, color-mix(in srgb, var(--c-line) 55%, var(--c-accent) 25%) 60% 100%); } }
@media (max-width: 480px) { .tb-slot[data-slot="mode"] { width: calc(5ch + 0.8rem); } }
.pane-tab:hover { color: var(--c-text); background-color: color-mix(in srgb, var(--surface0) 50%, transparent); }
@media (max-width: 480px) { .tb-segment[data-segment="middle"] .page-menu { min-width: 6rem; } }
.pane-tab:focus-visible { outline: 1px solid var(--c-accent); outline-offset: 1px; }
.pane-tab[aria-pressed="true"] { color: var(--c-text); border-color: var(--c-line); background-color: color-mix(in srgb, var(--surface0) 70%, transparent); box-shadow: inset 0 -2px 0 var(--c-accent); }
@media (hover: none) and (pointer: coarse) { .footnote .fn-gestures { display: inline; } }
.terminal > .sidebar { grid-column: 1; grid-row: 2 / 6; }
.terminal > .screen { grid-row: 3; grid-column: 2; }
.terminal > .tray { grid-row: 4; grid-column: 2; }
.terminal > .taskbar { grid-row: 5; grid-column: 2; }
.terminal.is-maximised .screen { display: none; /* The document row is the counterpart of any claim, and a 0-height row is not the same as a hidden one. The screen's box is its padding — 20.25px of top and bottom — and it carries z-index var(--z-content), which is above the shell, so a row collapsed to 0 draws the top of the section text over the maximised window. Not printing removes the box, the stacking layer and the row. The room the model computes is the pane minus the rows that are standing, and the document's floor is declared 0 in this state, so the room grows by exactly what went away. This is the display-claim shared by every maximise: a bottom claim hides the document on the height axis, a side claim hides it on the width axis. */ }
.tb-segment[data-segment="left"] { justify-self: start; min-width: 0; }
.tb-segment[data-segment="middle"] { justify-self: center; min-width: 0; }
.st-model { flex: none; max-width: 46%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--c-dim); }
.st-prefill .st-dot { background: var(--blue); animation: pulse-dot var(--dur-pulse-active) var(--ease) infinite; }
.player { position: relative; z-index: 1; flex: 0 0 auto; min-height: 0; display: grid; grid-template-rows: auto auto; gap: calc(var(--face-gap) * var(--ui-scale, 1)); padding: calc(var(--player-pad) * var(--ui-scale, 1)); }
.mp-core { display: grid; gap: calc(var(--face-gap) * var(--ui-scale, 1)); }
.pane[data-scroll="y"] .mp-scroll::-webkit-scrollbar-thumb { background: var(--surface2); }
.mp-library { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(var(--lib-gap) * var(--ui-scale, 1)); }
.mp-lib-row { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr) minmax(0, 34%); align-items: center; gap: 0.4rem; height: calc(var(--lib-row-h) * var(--ui-scale, 1)); box-sizing: border-box; padding: 0 0.3rem; border-radius: var(--radius); cursor: pointer; }
.mp-lib-row .n { grid-area: 1 / 1; font-size: 0.68rem; color: var(--c-dimmer); font-variant-numeric: tabular-nums; text-align: right; }
.mp-lib-row .nm { grid-area: 1 / 2; font-size: 0.72rem; color: var(--c-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-lib-row .ar { grid-area: 1 / 3; font-size: 0.68rem; color: var(--c-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; }
.mp-lib-row:hover { background: color-mix(in srgb, var(--surface0) 50%, transparent); }
.mp-lib-row:focus-visible { outline: 1px solid var(--c-accent); outline-offset: 1px; }
.mp-lib-row[aria-current="true"] { background: color-mix(in srgb, var(--c-accent) 14%, transparent); }
.mp-lib-row[aria-current="true"] .n, .mp-lib-row[aria-current="true"] .nm { color: var(--c-accent); }
.mp-sec { appearance: none; font: inherit; cursor: pointer; height: auto; min-height: var(--hit); line-height: 1.5; background-color: transparent; background-image: none; color: var(--c-dim); font-family: var(--font-family); font-size: 0.74rem; letter-spacing: 0.02em; padding: 0.08rem 0.5rem; border: 1px solid transparent; outline: none; text-decoration: none; }
.mp-sec:hover { color: var(--c-text); background-color: color-mix(in srgb, var(--surface0) 50%, transparent); }
.mp-sec:focus-visible { outline: 1px solid var(--c-accent); outline-offset: 1px; }
.mp-sec[aria-pressed="true"] { color: var(--c-text); border-color: var(--c-line); background-color: color-mix(in srgb, var(--surface0) 70%, transparent); box-shadow: inset 0 -2px 0 var(--c-accent); }
.mp-sec[data-sec="library"] { display: none; }
.pane[data-mode="library"] .mp-sec[data-sec="library"] { display: inline-grid; }
.fx-line[data-val="off"] .fx-val { display: none; }
.mp-sec-block { display: grid; gap: calc(var(--fx-gap) * var(--ui-scale, 1)); scroll-margin-top: 0; }
.mp-sec-block[data-sec="library"] { display: none; }
.pane[data-mode="library"] .mp-sec-block[data-sec="library"] { display: grid; }
.mp-scroll { order: -1; min-height: 0; display: grid; gap: calc(var(--fx-gap) * var(--ui-scale, 1)); align-content: start; overflow: hidden; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--surface2) transparent; height: var(--mp-scroll-h); contain: paint; }
.pane[data-scroll="y"] .mp-scroll { overflow-y: auto; }
.pane[data-scroll="y"] .mp-scroll::-webkit-scrollbar { width: 8px; }
.mp-head { order: 3; display: grid; align-items: center; grid-template-columns: minmax(0, 1fr) auto minmax(var(--head-cluster-min), 1fr); height: calc(var(--mp-head-h) * var(--ui-scale, 1)); box-sizing: border-box; }
.mp-seek { order: 4; height: calc(var(--mp-seek-h) * var(--ui-scale, 1)); box-sizing: border-box; }
.mp-head > .mp-title { text-align: center; min-width: 0; }
.fx-line:not(.fx-speed):not(.mp-eq) { display: grid; grid-template-columns: repeat(var(--mod-per-line), minmax(var(--mod-min), 1fr)); gap: var(--mod-gap); align-items: center; height: calc((var(--mod-lines) * var(--fx-mod-h) + (var(--mod-lines) - 1) * var(--mod-gap)) * var(--ui-scale, 1)); box-sizing: border-box; }
.mp-eq { height: calc(var(--mp-eq-h) * var(--ui-scale, 1)); box-sizing: border-box; }
@container tray (max-width: 460px) { #pane-music { --face-gap: 0.22rem; --fx-gap: 0.22rem; --mod-gap: 0.3rem; --mod-min: 135px; --mod-val-min: 172px; --mp-eq-h: 84px; } }
@container pane (max-width: 400px) { .mp-controls .fx-btn { display: none } }
@container pane (max-width: 260px) { .fx-val, .mp-val { min-width: 0; } }
@media (hover: none) and (pointer: coarse) { .mp-controls .mp-btn { min-width: 2.75rem; min-height: 2.75rem; font-size: 0.85rem; } }
@media (hover: none) and (pointer: coarse) { .eq-node { min-height: var(--hit); padding: 0.3rem 0.15rem; } }
.tray-divider::after { content: ''; position: absolute; left: 0; right: 0; top: calc((var(--divider-h) - var(--hit)) / 2); bottom: calc((var(--divider-h) - var(--hit)) / 2); z-index: var(--z-control); pointer-events: auto; cursor: inherit; }
.tray-split::after { content: ''; position: absolute; top: calc((var(--split-row) - var(--hit)) / 2); bottom: calc((var(--split-row) - var(--hit)) / 2); left: calc((var(--split-row) - var(--hit)) / 2); right: calc((var(--split-row) - var(--hit)) / 2); z-index: var(--z-control); pointer-events: auto; cursor: inherit; }
.tray-node { position: absolute; top: 50%; left: calc(var(--split-frac) * (100cqw - var(--split-row)) + var(--split-row) / 2); width: var(--hit); height: var(--hit); transform: translate(-50%, -50%); z-index: calc(var(--z-control) + 1); cursor: grab; touch-action: none; pointer-events: auto; border: 1px solid color-mix(in srgb, var(--c-line) 55%, var(--c-accent) 25%); border-radius: 2px; background: var(--pane-plate); }
.tray-node[hidden] { display: none; }
.tray-node:hover, .tray-node.grabbing { border-color: var(--c-accent); background: color-mix(in srgb, var(--c-accent) 24%, var(--pane-plate)); }
.tray-node:focus-visible { outline: 1px solid var(--c-accent); outline-offset: 1px; border-color: var(--c-accent); }
.mp-upload { position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: var(--z-control); background: color-mix(in srgb, var(--surface0) 55%, transparent); }
.mp-upload[hidden] { display: none; }
.mp-upload-fill { height: 100%; width: 0; background: var(--c-accent); box-shadow: 0 0 8px color-mix(in srgb, var(--c-accent) 50%, transparent); transition: width 180ms linear; }
.mp-upload.m-done .mp-upload-fill { background: var(--green); box-shadow: 0 0 8px color-mix(in srgb, var(--green) 45%, transparent); }
.mp-upload.m-fail .mp-upload-fill { background: var(--red); box-shadow: none; }
.mp-btn.busy { color: var(--c-accent); border-color: color-mix(in srgb, var(--c-accent) 45%, var(--c-line)); }
.up-bar { height: 3px; margin: 0.18rem 0 0.12rem; background: color-mix(in srgb, var(--surface0) 65%, transparent); border-radius: 2px; overflow: hidden; }
.up-fill { height: 100%; width: 0; background: var(--c-accent); transition: width 180ms linear; }
.up-meta { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; font-size: 0.74rem; font-variant-numeric: tabular-nums; }
.up-pct { color: var(--c-accent); min-width: 3.2ch; }
.up-cancel { appearance: none; box-sizing: border-box; width: var(--hit); height: var(--hit); display: grid; place-items: center; border: 1px solid var(--c-line); border-radius: 3px; background-color: transparent; color: var(--c-dim); font-size: 0.7rem; cursor: pointer; }
.up-cancel:hover { color: var(--red); border-color: var(--red); }
:root { --tabs-pad: 0.22rem; --bar-pad: 0.32rem; --row-pad: 0.4rem; --tabs-h: calc(var(--icon-btn) + 2 * var(--tabs-pad) + 1px); --bar-h: calc(var(--icon-btn) + 2 * var(--bar-pad) + 1px); --row-h: calc(var(--icon-btn) + 2 * var(--row-pad) + 1px); }
@media (max-width: 860px) { .terminal { --sidebar-w: 0px; --sidebar-strip: 1; } }
.side-scroll .tab { width: 100%; justify-content: flex-start; text-align: left; }
.side-scroll .tab.active { box-shadow: inset 2px 0 0 var(--c-accent); }
.side-exits .exits-links { flex-direction: column; gap: 0.15rem; }
.side-exits .tab.ext { width: 100%; justify-content: flex-start; }
@media (max-width: 860px) { .side-scroll { flex-direction: row; gap: 0.2rem; min-width: 0; padding: 0; overflow-x: auto; overflow-y: hidden; } }
@media (max-width: 860px) { .side-scroll .tab { width: auto; min-width: calc(8ch + 2rem); } }
@media (max-width: 860px) { .side-exits { flex-direction: row; align-items: center; justify-content: flex-end; min-width: 5.5rem; gap: 0.2rem; margin-top: 0; margin-left: auto; padding: 0 0.5rem; border-top: 0; border-left: 1px solid color-mix(in srgb, var(--c-line-soft) 60%, transparent); } }
@media (max-width: 860px) { .side-exits .exits-links { flex-direction: row; gap: 0.2rem; } }
@media (max-width: 860px) { .side-exits .tab.ext { width: auto; } }
@media (max-width: 860px) { .terminal > .sidebar { grid-column: 1 / -1; grid-row: 2; } }
@property --pane-take { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --tray-w { syntax: '<length>'; inherits: true; initial-value: 0px; }
.pane-ghost { position: fixed; z-index: 90; display: flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.6rem; background: var(--card, #1c1c1c); color: var(--foreground, #e0e0e0); border: 1px solid var(--accent, #4ec9b0); border-radius: 4px; box-shadow: 0 8px 24px rgba(0,0,0,0.5); font-size: 0.8rem; pointer-events: none; opacity: 0.95; transform: translate(-50%, -120%); }
.pane-ghost svg { width: 14px; height: 14px; }
.pane-drop { position: fixed; z-index: 89; pointer-events: none; }
.pane-preview { position: fixed; z-index: 89; border: 1px dashed var(--accent, #4ec9b0); background: color-mix(in srgb, var(--accent, #4ec9b0) 14%, transparent); border-radius: 4px; pointer-events: none; transition: left 120ms ease, top 120ms ease, width 120ms ease, height 120ms ease; }
.pane.is-dragging { opacity: 0.25; }
.tb-field.vis { position: relative; z-index: var(--z-control); flex: 0 1 auto; min-width: 0; }
.tb-value.vis { display: inline-flex; align-items: center; gap: 0.18rem; flex: 0 1 auto; min-width: 0; max-width: 100%; }
.tb-value.vis svg { width: var(--icon-glyph); height: var(--icon-glyph); flex: none; }
.tb-value.vis .tb-value-label { display: none; }
.tb-field.vis .page-menu { left: 0; right: auto; min-width: 16rem; }
.vis-fav { flex: none; width: 1.1rem; text-align: center; color: var(--c-dimmer); }
.vis-fav.on { color: var(--c-accent); }
.is-admin .vis-fav { cursor: pointer; }
.is-admin .page-menu-item:hover .vis-fav { color: var(--c-text); }
.a-fade-out { opacity: 0; }
.a-collapse-out { opacity: 0; max-height: 0; }
.a-pop-out { opacity: 0; transform: scale(.5); }
.a-slide-out { opacity: 0; transform: translateX(12px); }
.a-sink-out { opacity: 0; transform: translateY(0.5rem); }
@media (min-width: 900px) { .page-menu { max-height: min(40rem, calc(var(--vvh, 100dvh) - 5rem)); } }
@media (max-width: 600px) { .page-menu { max-height: min(45dvh, 15rem); min-width: 11rem; } }
.tb-field.model.is-loading .tb-value.model { color: var(--c-accent); border-color: color-mix(in srgb, var(--c-accent) 45%, var(--c-line)); }
.tb-field.model.is-loading::after { content: ''; width: 0.5rem; height: 0.5rem; border-radius: 999px; background: var(--c-accent); flex: none; animation: pulse-dot var(--dur-pulse) var(--ease) infinite; }
@property --pane-open { syntax: '<number>'; inherits: false; initial-value: 1; }
.credit:hover, .credit:focus-visible { border-color: var(--c-line); color: var(--c-dim); cursor: pointer; }
.credit:focus-visible { outline: 1px solid var(--c-accent); outline-offset: 1px; }
.credit-hint { position: absolute; left: 50%; transform: translateX(-50%); z-index: var(--z-popup); max-width: min(20rem, calc(100% - 1.5rem)); background: var(--surface0); border: 1px solid var(--c-line); border-radius: var(--radius); padding: 0.6rem 0.85rem 0.6rem 0.7rem; font-size: 0.72rem; line-height: 1.5; color: var(--c-dim); text-align: left; box-shadow: 0 14px 40px -16px #000; animation: hint-in 220ms ease-out; pointer-events: none; }
.credit-hint .credit-hint-close { pointer-events: auto; }
.credit-hint::after { content: ''; position: absolute; left: 50%; bottom: -6px; width: 10px; height: 10px; transform: translateX(-50%) rotate(45deg); background: var(--surface0); border-right: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }
.credit-hint p { margin: 0 0 0.35rem; }
.credit-hint p:last-child { margin: 0; }
.credit-hint .k { color: var(--c-accent); font-weight: 600; }
.credit-hint-close { position: absolute; top: 0.3rem; right: 0.4rem; width: 1.2rem; height: 1.2rem; display: grid; place-items: center; padding: 0; border: 0; background: transparent; color: var(--c-dimmer); font-size: 0.9rem; line-height: 1; cursor: pointer; border-radius: 3px; }
.credit-hint-close:hover { color: var(--c-text); background: var(--surface1); }
@keyframes hint-in { from { opacity: 0; transform: translateX(-50%) translateY(4px); } to { opacity: 1; transform: translateX(-50%); } }
@keyframes settle-in { 0% { opacity: 0; transform: translateY(4px) scale(.98); } 60% { opacity: 1; transform: translateY(0) scale(1.012); } 100% { transform: scale(1); } }
@keyframes queue-drop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.page-menu { border-radius: 3px; border-color: var(--c-line); background-color: var(--mantle); box-shadow: 0 14px 26px -16px #000, 0 0 0 1px #0005; }
:root { --sidebar-w: 8.5rem; --sidebar-strip: 0; }
body.dropping .crt-frame { outline: 2px solid color-mix(in srgb, var(--c-accent) 55%, transparent); outline-offset: -2px; }
.terminal > .topbar { grid-row: 1; grid-column: 1 / -1; }
.terminal.is-side { grid-template-columns: var(--sidebar-w) minmax(var(--doc-min-w), 1fr) var(--tray-w); }
.terminal.is-side > #traySide { grid-column: 3; grid-row: 2 / 5; }
.terminal.is-side > .tray { grid-column: 2; }
.terminal.is-side > .taskbar { grid-column: 2 / -1; }
.terminal.is-max-side { --doc-min-w: 0px; --sidebar-w: 0px; /* The width floor is given up with the side claim: the claim is the whole display on the width axis the side slot trades. The height floor is given up by the renderer, which writes --doc-min on the root from the same set, so the side claim gives up the width floor and keeps the height floor. */ }
.terminal.is-max-side .sidebar { display: none; /* The rail is given up with the side claim: it is the index of the document being asked about, and the column it stood in is 0, so the window takes the width it was not given. It is not overlaid: an overlay leaves a column in the grid that the resolver has to know about twice. Not printing is one fact the resolver can read — a column with no item in it is 0, and the room grows by exactly the column that went away. */ }
html[data-visbg] .crt-frame { z-index: 1; }
html[data-visbg] .terminal { background: color-mix(in srgb, var(--screen-plate) 26%, transparent); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); }
html[data-visbg] .screen { background: color-mix(in srgb, var(--screen-plate) 32%, transparent); }
html[data-visbg] .topbar { background: color-mix(in srgb, var(--screen-plate) 18%, transparent); backdrop-filter: blur(6px) saturate(1.1); -webkit-backdrop-filter: blur(6px) saturate(1.1); }
html[data-visbg] .tray, html[data-visbg] .tray-side { background: color-mix(in srgb, var(--pane-plate) 55%, transparent); }
html[data-visbg] .taskbar { background: color-mix(in srgb, var(--crust) 55%, transparent); }
.tb-rule { flex: none; width: 1px; height: 1.05rem; background: var(--c-line); }
.tb-nodes { display: inline-flex; align-items: center; gap: 0.45rem; flex: none; }
.tb-nodes[hidden] { display: none; }
.tb-node { flex: none; font-size: 0.7rem; letter-spacing: 0.04em; color: var(--c-dimmer); transition: color 160ms ease, text-shadow 160ms ease; }
.tb-node.checking { color: var(--yellow); }
.tb-node.up { color: var(--green); text-shadow: 0 0 6px color-mix(in srgb, var(--green) 55%, transparent); }
.tb-node.down { color: var(--red); text-shadow: 0 0 6px color-mix(in srgb, var(--red) 55%, transparent); }
.tb-field.clock { cursor: pointer; }
.side-console { flex: none; display: flex; flex-direction: column; min-height: 0; max-height: 40%; margin: 0.35rem 0.4rem 0; border: 1px solid var(--c-line-soft); border-radius: var(--radius); background: color-mix(in srgb, var(--mantle) 55%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 6%, transparent); overflow: hidden; transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), max-height var(--dur-fast) var(--ease); }
.side-console.a-sink-out { max-height: 0; }
.side-console[hidden] { display: none; }
.side-console-head { flex: none; font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-dim); padding: 0.2rem 0.45rem; border-bottom: 1px solid color-mix(in srgb, var(--c-line-soft) 50%, transparent); }
.side-console-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 0.3rem 0.45rem; scrollbar-width: none; }
.side-console-scroll::-webkit-scrollbar { display: none; }
.console-line { font-size: 0.72rem; line-height: 1.5; color: var(--c-text); white-space: pre-wrap; word-break: break-word; padding: 0.1rem 0.45rem; margin: 0 -0.45rem; opacity: 1; transition: opacity var(--dur-slow) var(--ease); cursor: pointer; }
.console-line:nth-child(even) { background: color-mix(in srgb, var(--text) 5%, transparent); }
.console-line.console-pinned { opacity: 1; box-shadow: inset 2px 0 0 var(--c-accent); }
.console-line.console-warn { color: var(--c-warn); text-shadow: 0 0 8px color-mix(in srgb, var(--c-warn) 55%, transparent); }
@media (max-width: 860px) { .side-console { display: none; } }
.tb-segment[data-segment="left"] .tb-slot[data-slot="raylm"] { width: var(--hit); flex: 0 0 auto; }
.tb-segment[data-segment="right"] .tb-slot[data-slot="raylm"] { flex: 0 1 18ch; min-width: 9ch; }
@media (max-width: 360px) { .tb-slot[data-slot="theme"], .tb-segment[data-segment="right"] .tb-slot[data-slot="raylm"] { flex-basis: calc(4ch + 0.8rem); min-width: 4ch; } }
@media (max-width: 480px) { .tb-slot[data-slot="theme"], .tb-segment[data-segment="right"] .tb-slot[data-slot="raylm"] { margin-left: auto; } }
@media (max-width: 860px) { .tb-segment[data-segment="right"] .tb-slot[data-slot="raylm"] { flex-basis: calc(10ch + 0.8rem); min-width: 7ch; } }
.section-doc .log-list { list-style: none; margin: 0.2rem 0 0.4rem; padding-left: 0; max-width: 30rem; }
.section-doc .log-list li { display: flex; align-items: baseline; gap: 0.4rem; padding: 0.14rem 0; border-top: 1px dashed var(--c-line-soft); }
.section-doc .log-list li:first-child { border-top: none; }
.log-name { flex: 1; min-width: 0; }
.log-rating { color: var(--c-dim); font-variant-numeric: tabular-nums; }
.hw-harness-sub { list-style: none; margin: 0.1rem 0 0 1rem; padding: 0; }
.hw-harness-sub li { font-size: 0.74rem; color: var(--c-dim); padding: 0.08rem 0; line-height: 1.45; }
.hw-diagram { margin: 0 0 0.4rem; }
.hw-flow { max-width: 38rem; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.hw-flow-node { border: 1px solid var(--c-line); background: color-mix(in srgb, var(--surface0) 35%, transparent); color: var(--c-text); font-size: 0.76rem; padding: 0.25rem 0.9rem; }
.hw-flow-link { width: 1px; height: 20px; background: var(--c-dim); position: relative; }
.hw-flow-link::after { content: ''; position: absolute; bottom: -4px; left: -3.5px; border: 4px solid transparent; border-top-color: var(--c-dim); }
.hw-flow-tag { position: absolute; left: 9px; top: -0.4rem; color: var(--c-text); font-size: 0.68rem; white-space: nowrap; }
.hw-flow-machine { border: 1px solid var(--c-line); background: color-mix(in srgb, var(--surface0) 35%, transparent); padding: 0.55rem 0.7rem; cursor: pointer; width: 100%; }
.hw-flow-machine:hover { border-color: var(--c-accent); }
.hw-flow-head { color: var(--peach); font-weight: 700; font-size: 0.84rem; margin-bottom: 0.35rem; }
.hw-flow-chips { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.hw-chip { border: 1px solid var(--c-line); color: var(--c-text); font-size: 0.74rem; padding: 0.2rem 0.55rem; display: inline-flex; align-items: center; gap: 0.35rem; }
.hw-chip-dot { width: 0.42rem; height: 0.42rem; border-radius: 999px; background: var(--c-dim); flex: none; transition: background 160ms ease, box-shadow 160ms ease; }
.hw-chip-dot.up { background: var(--green); box-shadow: 0 0 5px var(--green); }
.hw-chip-dot.down { background: var(--red); box-shadow: 0 0 5px var(--red); }
.hw-flow-row { display: flex; width: 100%; align-items: stretch; }
.hw-flow-row .hw-flow-machine { flex: 1; }
.hw-flow-xlink { align-self: center; width: 1.8rem; height: 1px; background: var(--c-dim); position: relative; flex: none; }
.hw-flow-xlink::after { content: ''; position: absolute; right: -4px; top: -3.5px; border: 4px solid transparent; border-left-color: var(--c-dim); }
.raylm.at-bottom { scrollbar-color: transparent transparent; }
.raylm.at-bottom::-webkit-scrollbar-thumb { background: transparent; }
.msg-toolblock summary.failed { color: var(--c-warn); }
.pl-input-wrap .ask-send { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); }
.pl-input-wrap.expanded .ask-send { top: auto; bottom: 2px; transform: none; }
@media (min-width: 861px) { .pl-input-wrap { padding-right: 3.6rem; } }
.promptline .pl-queue.is-loading { color: var(--c-accent); border-color: color-mix(in srgb, var(--c-accent) 40%, var(--c-line)); }
.mp-field::before { content: ''; position: absolute; inset: 0; background: linear-gradient(168deg, color-mix(in srgb, var(--surface2) 24%, transparent) 0%, color-mix(in srgb, var(--surface1) 9%, transparent) 24%, transparent 56%); }
.pane > .mp-wrap { margin: 0; min-height: 0; }
.player { border: 1px solid var(--c-line-soft); border-radius: var(--radius); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35); }
html[data-visblur] .player { backdrop-filter: blur(10px) saturate(1.25); -webkit-backdrop-filter: blur(10px) saturate(1.25); background: color-mix(in srgb, var(--pane-plate) 38%, transparent); }
.vis-backdrop { display: none; }
html[data-visbg] .vis-backdrop { display: block; position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
html[data-visbg] .vis-backdrop > .mp-glass { position: absolute; inset: 0; width: 100%; height: 100%; }
html[data-visbg] .mp-field { background: none; border-top-color: transparent; }
html[data-visbg] .mp-field::before, html[data-visbg] .mp-field::after { display: none; }
@media (hover: hover) { .player > :not(.mp-scroll) { opacity: 0.4; transition: opacity var(--dur-slow) var(--ease); } }
@media (hover: hover) { #pane-music:hover .player > :not(.mp-scroll), #pane-music.is-focused .player > :not(.mp-scroll), .player:focus-within > :not(.mp-scroll) { opacity: 1; transition-duration: var(--dur-fast); } }
.mp-library .mp-lib-row::before { content: none; }
@media (max-width: 520px) { .mp-lib-row .ar { display: none; } .mp-lib-row { grid-template-columns: 2.2rem minmax(0, 1fr); } }
@container tray (max-width: 450px) { .mp-lib-row .ar { display: none; } .mp-lib-row { grid-template-columns: 2.2rem minmax(0, 1fr); } }
.mp-lib-row .n, .mp-lib-row .np, .mp-lib-row .ne { grid-area: 1 / 1; }
.mp-lib-row .np { display: none; place-items: center; color: var(--c-accent); }
.mp-lib-row .np svg { width: 10px; height: 10px; fill: currentColor; }
.mp-lib-row .ne { display: none; align-items: center; justify-content: center; gap: 2px; color: var(--c-accent); }
.mp-lib-row .ne i { width: 2px; height: 8px; background: currentColor; transform-origin: center; animation: lib-bar 1.1s var(--ease) infinite; }
.mp-lib-row .ne i:nth-child(2) { height: 6px; animation-delay: -0.37s; }
.mp-lib-row .ne i:nth-child(3) { height: 7px; animation-delay: -0.74s; }
.mp-lib-row:not([aria-current="true"]):hover .n, .mp-lib-row:not([aria-current="true"]):hover .ne { opacity: 0; }
.mp-lib-row:not([aria-current="true"]):hover .np { display: grid; }
.mp-lib-row[aria-current="true"] .n { opacity: 0; }
.mp-lib-row[aria-current="true"] .ne { display: flex; }
.mp-lib-row[aria-current="true"] .ar { color: color-mix(in srgb, var(--c-accent) 55%, var(--c-dim)); }
@keyframes lib-bar { 0%, 100% { transform: scaleY(0.35); } 50% { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .mp-lib-row .ne i { animation: none; } }
.mp-lib-row + .mp-lib-row { border-top: 1px solid color-mix(in srgb, var(--c-line-soft) 55%, transparent); }
.mp-head > .mp-transport-x { justify-self: center; }
.mp-head > .mp-utilities { justify-self: stretch; flex-wrap: wrap; }
.mp-beat { flex: none; display: inline-flex; align-items: center; gap: 0.28rem; color: var(--c-dim); font-size: 0.68rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mp-beat.on { color: var(--c-accent); }
.mp-beat .bpm-short { display: none; }
.mp-beat .leds { display: inline-flex; align-items: center; gap: 3px; }
.mp-beat .leds i { width: 6px; height: 6px; background-color: currentColor; opacity: 0.18; }
.mp-beat .leds i.on { opacity: 1; }
.mp-utilities .mp-vol { flex: 1 1 auto; min-width: var(--vol-min); }
.mp-utilities .mp-vol .pct { display: none; }
.mp-head #btnPlay { width: var(--play-h); height: var(--play-h); background-color: color-mix(in srgb, var(--c-accent) 22%, transparent); border-color: var(--c-accent); color: var(--c-accent); }
.mp-head #btnPlay:hover { background-color: color-mix(in srgb, var(--c-accent) 32%, transparent); }
.mp-tabs { order: 2; display: flex; align-items: center; justify-content: center; gap: 0.2rem; height: calc(var(--mp-tabs-h) * var(--ui-scale, 1)); box-sizing: border-box; }
.mp-tabs .k { color: var(--c-dimmer); flex: none; }
.mp-tabparts { order: 1; display: grid; }
.mp-tabpart { display: none; gap: calc(var(--fx-gap) * var(--ui-scale, 1)); }
#pane-music[data-tab="tempo"] .mp-tabpart[data-tab="tempo"] { display: grid; }
#pane-music[data-tab="eq"] .mp-tabpart[data-tab="eq"] { display: grid; }
#pane-music[data-tab="fx"] .mp-tabpart[data-tab="fx"] { display: grid; }
#pane-music[data-fit="all"] .mp-tabpart { display: grid; }
#pane-music[data-fit="bare"] .mp-tabparts { display: none; }
@container pane (max-width: 400px) { .mp-tabs .k { display: none; } }
@container pane (max-width: 400px) { .mp-head > .mp-utilities { flex-basis: 100%; } }
@container pane (max-width: 460px) { .mp-beat .leds { display: none; } }
@container pane (max-width: 450px) { .mp-beat .bpm { display: none; } }
@container pane (max-width: 450px) { .mp-beat .bpm-short { display: inline; } }
@container pane (max-width: 320px) { .mp-beat { display: none; } }
@container pane (max-width: 450px) { .mp-head { display: flex; flex-wrap: wrap; } }
@container pane (max-width: 450px) { .mp-seek { flex-wrap: wrap; } }
@container pane (max-width: 450px) { .mp-head { height: auto; min-height: calc(var(--hit) + var(--face-gap) + var(--play-h)); } }
@container pane (max-width: 450px) { .mp-seek { height: auto; min-height: calc(2 * var(--hit) + var(--face-gap)); } }
@container pane (max-width: 450px) { .mp-head > .mp-title, .mp-seek > .mp-range { min-height: var(--hit); } }
@container pane (max-width: 450px) { .mp-head > .mp-title { flex: 1 1 100%; justify-content: flex-start; text-align: left; } }
@container pane (max-width: 450px) { .mp-head > .mp-transport-x, .mp-head > .mp-utilities { flex: 1 1 0; justify-content: center; } }
@container pane (max-width: 450px) { .mp-head > .mp-title .nm { flex: 1 1 auto; } }
@container pane (max-width: 450px) { .mp-utilities .mp-vol { display: none; } }
@container pane (max-width: 450px) { .mp-title { --vol: 1; --vol-fill: 100%; background: linear-gradient(to right, color-mix(in srgb, var(--c-accent) 18%, transparent) var(--vol-fill), transparent var(--vol-fill)), color-mix(in srgb, var(--surface0) calc(var(--vol) * 100%), var(--crust)); border-radius: var(--radius); cursor: ew-resize; touch-action: none; display: flex; align-items: center; gap: 0.3rem; } }
.fx-mod[data-fx="speed"] .fx-range { background-image: linear-gradient(var(--c-dim), var(--c-dim)); background-size: 2px 100%; background-position: var(--fx-neutral) center; background-repeat: no-repeat; }
.fx-mod[data-fx="speed"] .fx-range::-moz-range-track, .fx-mod[data-fx="speed"] .fx-range::-moz-range-progress { background-image: linear-gradient(var(--c-dim), var(--c-dim)); background-size: 2px 100%; background-position: var(--fx-neutral) center; background-repeat: no-repeat; }
.fx-mod[data-fx="speed"] .fx-range:disabled { opacity: 0.4; cursor: not-allowed; }
.fx-mod select.fx-name:disabled { opacity: 0.45; cursor: not-allowed; }
.fx-mod select.fx-name { appearance: none; -webkit-appearance: none; text-align: center; text-align-last: center; cursor: pointer; }
.mp-btn[aria-pressed="true"] { color: var(--c-accent); border-color: color-mix(in srgb, var(--c-accent) 45%, var(--c-line)); background-color: color-mix(in srgb, var(--c-accent) 14%, transparent); }
.vol-ic { flex: none; color: var(--c-text); }
.vol-ic .cone { fill: currentColor; }
.vol-ic .wave { fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; }
.vol-ic .slash { stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; opacity: 0; }
[data-vol="muted"] .vol-ic { color: var(--c-red); }
[data-vol="muted"] .vol-ic .wave { opacity: 0; }
[data-vol="muted"] .vol-ic .slash { opacity: 1; }
.mp-title.mq, .mp-title .nm.mq, .mp-lib-row .nm.mq { text-overflow: clip; }
@container pane (max-width: 450px) { .mp-title .vol-ic, .mp-title .vol-pct { display: block; } }
.mp-btn svg { width: 12px; height: 12px; fill: currentColor; }
.mp-btn .ic-pause { display: none; }
.mp-btn.playing .ic-play { display: none; }
.mp-btn.playing .ic-pause { display: block; }
.fx-btn[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; }
.fx-mod .fx-name[aria-pressed="true"] { color: var(--fx-accent); border-color: var(--fx-accent); background-color: color-mix(in srgb, var(--fx-accent) 18%, transparent); box-shadow: 0 0 6px color-mix(in srgb, var(--fx-accent) 45%, transparent); }
@media (hover: none) and (pointer: coarse) { .fx-range::-moz-range-thumb, .mp-range::-moz-range-thumb { width: 12px; height: 20px; } }
#pane-music { --pane-share: 0.40; --pane-min: 95px; --pane-max: 500px; --pane-wmin: 176px; --pane-wmax: 520px; --ui-scale: 1; gap: var(--face-gap); --mp-head-h: 40px; --mp-seek-h: 32px; --mp-tabs-h: var(--hit); --play-h: 2.25rem; --vol-min: 60px; --head-cluster-min: 210px; --wrap-at: 450px; --player-pad: 0.3rem; --fx-chip-h: 30px; --fx-bar-h: 30px; --fx-mod-h: 32px; --mp-eq-h: 96px; --lib-row-h: var(--hit); --lib-gap: 0.15rem; --lib-max: 6; --face-gap: 0.34rem; --fx-gap: 0.34rem; --mod-min: 137px; --mod-val-min: 173px; --fx-val-w: 2.1rem; --mod-gap: 0.5rem; --chip-min: 64px; --chip-gap: 0.2rem; --mod-lines: 1; --mod-per-line: 4; --bar-lines: 1; --bar-per-line: 6; --mp-scroll-min: 120px; }
@media (hover: none) and (pointer: coarse) { #pane-music { --play-h: 2.75rem; --mp-head-h: 2.75rem; --mp-seek-h: 44px; --fx-mod-h: 30px; --mp-eq-h: 84px; --chip-min: 68px; --mod-min: 135px; --mod-val-min: 172px; --fx-val-w: 2.1rem; --lib-max: 4; } }
@media (max-width: 860px) { #pane-music { /* The rack's line count is the room the phone tier has. At 375 the four modules need two lines at the module's own floor, and the share is the number that reaches the modules' row and the rows of the listing below them. The ceiling is 480px: the row's room with the document still able to print a paragraph, so the edge travels before maximise takes the whole display. */ --pane-share: 0.72; --pane-min: 94px; --pane-max: 480px; --lib-max: 4; } }
@media (max-width: 860px) { #pane-raylm { --pane-share: 0.72; --pane-min: 200px; --pane-max: 560px; } }
@media (max-height: 420px) { #pane-raylm { --pane-min: 60px; --pane-max: 200px; } }
.tray[data-row="in-room"] .tray-body > .promptline { /* Placement only. The row's box is declared once, below, and this rule is the more specific of the two: restate the width here — `right: 0; width: auto` did — and it wins the cascade, the row takes the body's box, and the body is the whole shell row: the chat column, the edge and the music column. `right: auto` for the same reason: with left, right and the width all resolved the equation is over-constrained and in LTR the right edge is dropped, so a right inset here would be silently ignored rather than honoured. */ position: absolute; bottom: 0; left: 0; right: auto; }
.tray[data-row="in-room"] .tray-body:has(#raylm:empty) > .promptline { top: 50%; bottom: auto; transform: translateY(-50%); }
.tray .promptline { width: calc(var(--split-frac) * (100cqw - var(--split-row))); }
.tray-node.grabbing { cursor: grabbing; }
.tray > .tray-divider > .tray-corner { left: calc(100% + var(--corner-lead, 4px)); }
.pane[data-edge="bottom"] { --pane-from: 0, 10px; }
.pane[data-edge="left"] { --pane-from: -10px, 0; }
.pane[data-edge="right"] { --pane-from: 10px, 0; }
.pane[data-edge="bottom"].pane-in, .pane[data-edge="bottom"].pane-out { block-size: calc(var(--pane-open) * var(--pane-room)); align-self: flex-end; }
.pane[data-edge="left"].pane-in, .pane[data-edge="left"].pane-out, .pane[data-edge="right"].pane-in, .pane[data-edge="right"].pane-out { inline-size: calc(var(--pane-open) * var(--pane-room)); }
.tray.is-animating { transition: --pane-take var(--dur-pane-out) var(--ease); }
.terminal.is-animating { transition: --tray-w var(--dur-pane-out) var(--ease); }
.tray-side { --divider-w: 8px; --split-row: 8px; --node-top: 50%; --pane-room: var(--tray-w); grid-template-columns: var(--divider-w) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); position: relative; display: grid; background: linear-gradient(180deg, color-mix(in srgb, var(--surface1) 15%, var(--pane-plate)), var(--pane-plate)); font-size: 0.8rem; }
.tray-side > .tray-divider { grid-row: 1; grid-column: 1; width: var(--divider-w); height: auto; cursor: ew-resize; }
.tray-side > .tray-body { grid-row: 1; grid-column: 2; display: grid; grid-template-rows: minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr); overflow: hidden; position: relative; }
.tray-side .tray-body.is-split { grid-template-rows: var(--split-w) var(--split-row) minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr); }
.tray-side .tray-body.is-split > #pane-raylm { grid-row: 1; min-height: var(--pane-floor-h, 0px); }
.tray-side .tray-body.is-split > .tray-split { grid-row: 2; }
.tray-side .tray-body.is-split > #pane-music { grid-row: 3; min-height: var(--pane-floor-h, 0px); }
.tray-side .tray-body > .pane { grid-row: 1; }
.tray-side .tray-body > .promptline { grid-row: -1; grid-column: 1; width: auto; }
.tray-side .tray-divider::before { width: 1px; height: 100%; }
.tray-side .tray-divider::after { top: 0; bottom: 0; left: calc((var(--divider-w) - var(--hit)) / 2); right: calc((var(--divider-w) - var(--hit)) / 2); }
.tray-side .tray-split { width: 100%; height: var(--split-row); cursor: ns-resize; }
.tray-side .tray-split::before { width: 100%; height: 1px; }
.tray-side .tray-split::after { left: 0; right: 0; top: calc((var(--split-row) - var(--hit)) / 2); bottom: calc((var(--split-row) - var(--hit)) / 2); }
.tray-side .tray-node { top: var(--node-top); left: 50%; }
@media (hover: none) and (pointer: coarse) { .tray-side { --divider-w: 22px; --split-row: 22px; } }
.pane-move { position: absolute; top: 0.45rem; right: 0.45rem; z-index: var(--z-control); touch-action: none; }