@import url("e4c7c86fce8acb5eefbf2004a0649355a0cd17ebaa6becb6115d44c62050bcf7.pictures.css");
@import url("7666dca80d5fbe4461fe47d54fa6df54a3fa07d2bf961e7312a7e402146e92e7.icons.css");
:where(html) {
font-family: var(--font-ui);
font-size: var(--font-size);
line-height: var(--line-height);
color: var(--color-text);
-webkit-font-smoothing: var(--font-smoothing);
scrollbar-width: auto;
}
:where(body) {
margin: 0;
background: var(--color-surface);
}
:where(button, input, select, textarea, optgroup, legend, table) {
font: inherit;
}
::selection {
background: var(--color-highlight);
color: var(--color-highlight-text);
}
html[data-motion="low"] :not([role="tooltip"]),
html[data-motion="low"] ::before,
html[data-motion="low"] ::after {
transition-property: opacity, color, background-color, border-color !important;
transition-duration: 80ms !important;
transition-delay: 0s !important;
animation: none !important;
scroll-behavior: auto !important;
}
html[data-motion="none"] :not([role="tooltip"]),
html[data-motion="none"] ::before,
html[data-motion="none"] ::after {
transition-duration: 0s !important;
transition-delay: 0s !important;
animation-duration: 0s !important;
animation-delay: 0s !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
}
html[data-theme-switching] *,
html[data-theme-switching] ::before,
html[data-theme-switching] ::after {
transition: none !important;
}
:where(h1, h2, h3, h4) {
font-family: var(--font-heading);
font-weight: var(--heading-weight);
margin: 0 0 var(--space);
line-height: 1.2;
}
:where(h1) { font-size: 1.6em; }
:where(h2) { font-size: 1.3em; }
:where(h3) { font-size: 1.15em; }
:where(h4) { font-size: 1em; }
:where(a) {
color: var(--color-link);
}
:where(a:focus-visible) {
outline: var(--focus-ring);
}
nav.sys0-breadcrumb { min-width: 0; }
nav.sys0-breadcrumb > ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-grouped); list-style: none; margin: 0; padding: 0; }
nav.sys0-breadcrumb > ol > li { display: inline-flex; align-items: baseline; gap: var(--space-grouped); min-width: 0; max-width: 100%; }
nav.sys0-breadcrumb > ol > li + li::before { content: ""; flex: none; width: 1px; height: 1em; background: var(--color-text-disabled); transform: rotate(15deg); pointer-events: none; }
nav.sys0-breadcrumb a,
nav.sys0-breadcrumb [aria-current="page"] { min-width: 0; overflow-wrap: anywhere; padding-block: calc(var(--space-grouped) / 2); }
nav.sys0-breadcrumb a { touch-action: manipulation; text-underline-offset: 0.15em; }
nav.sys0-breadcrumb a:active { color: var(--color-text); }
nav.sys0-breadcrumb [aria-current="page"]:focus-visible { outline: var(--focus-ring); }
@media (hover: hover) and (pointer: fine) {
nav.sys0-breadcrumb a:hover { text-decoration-thickness: 0.12em; }
}
@media (pointer: coarse) {
nav.sys0-breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
}
:where(hr) {
border: 0;
border-top: var(--border-line);
border-bottom: var(--separator-highlight);
margin: var(--space) 0;
}
:where(code, kbd, samp, pre) {
font-family: var(--font-mono);
}
:where(pre) {
margin: 0;
padding: var(--field-padding);
overflow: auto;
color: var(--field-text);
background: var(--well-background);
border: var(--well-border);
box-shadow: var(--bevel-well);
}
:where(button, input[type="button"], input[type="submit"], input[type="reset"]) {
box-sizing: border-box;
min-width: var(--button-min-width);
min-height: var(--button-min-height);
margin: 0;
padding: max(var(--button-padding-y), var(--button-press-offset)) var(--button-padding-x);
color: var(--button-text);
background: var(--button-face);
border: var(--button-border);
border-radius: var(--button-radius);
box-shadow: var(--bevel-raised);
font-family: var(--button-font);
white-space: nowrap;
-webkit-user-select: none;
user-select: none;
cursor: default;
}
:where(button.default, input.default) {
color: var(--button-default-text);
background: var(--button-default-face);
border: var(--button-default-border);
box-shadow: var(--bevel-default);
}
:where(button, input[type="button"], input[type="submit"], input[type="reset"]):where(:not(:disabled):active:is(:hover, :not(:active > *)), [aria-pressed="true"]) {
padding: calc(max(var(--button-padding-y), var(--button-press-offset)) + var(--button-press-offset))
max(0px, calc(var(--button-padding-x) - var(--button-press-offset)))
calc(max(var(--button-padding-y), var(--button-press-offset)) - var(--button-press-offset))
calc(var(--button-padding-x) + var(--button-press-offset));
}
:where(button, input[type="button"], input[type="submit"], input[type="reset"]):where([aria-pressed="true"]) {
box-shadow: var(--bevel-toggled);
}
:where(button, input[type="button"], input[type="submit"], input[type="reset"]):where(:not(:disabled):active:is(:hover, :not(:active > *))) {
color: var(--button-active-text);
background: var(--button-active-face);
box-shadow: var(--bevel-pressed);
}
:where(button.default:not(:disabled):active:is(:hover, :not(:active > *)), input.default:not(:disabled):active:is(:hover, :not(:active > *))) {
color: var(--button-default-active-text);
background: var(--button-default-active-face);
box-shadow: var(--bevel-default-pressed);
}
:where(button[aria-pressed="true"]) {
color: var(--button-toggled-text);
background: var(--button-toggled-face);
}
:root[data-keys] :where(button, input[type="button"], input[type="submit"], input[type="reset"]):where(:focus-visible) {
outline: var(--focus-ring);
outline-offset: var(--button-focus-offset);
}
:where(:disabled, :disabled + label) {
color: var(--color-text-disabled);
text-shadow: var(--text-disabled-shadow);
}
:where(input:not([type]), input[type="text"], input[type="password"], input[type="email"], input[type="url"],
input[type="tel"], input[type="number"], input[type="search"], input[type="date"], input[type="time"],
input[type="datetime-local"], input[type="month"], input[type="week"], select, textarea, .rich-field) {
box-sizing: border-box;
margin: 0;
padding: var(--field-padding);
color: var(--field-text);
background-color: var(--field-background);
border: var(--field-border);
border-radius: var(--field-radius);
box-shadow: var(--bevel-field);
font-family: var(--field-font);
outline: none;
appearance: none;
}
:where(input:not([type]), input[type="text"], input[type="password"], input[type="email"], input[type="url"],
input[type="tel"], input[type="number"], input[type="search"], input[type="date"], input[type="time"],
input[type="datetime-local"], input[type="month"], input[type="week"]) {
min-height: var(--field-height);
}
@media (pointer: coarse) {
:where(input:not([type]), input[type="text"], input[type="password"], input[type="email"], input[type="url"],
input[type="tel"], input[type="number"], input[type="search"], input[type="date"], input[type="time"],
input[type="datetime-local"], input[type="month"], input[type="week"], select, textarea, .rich-field) {
font-size: max(16px, 1em);
}
}
:where(input:not([type]), input[type="text"], input[type="password"], input[type="email"], input[type="url"],
input[type="tel"], input[type="number"], input[type="search"], input[type="date"], input[type="time"],
input[type="datetime-local"], input[type="month"], input[type="week"], textarea, .rich-field):where(:focus) {
color: var(--field-focus-text);
background-color: var(--field-focus-background);
border: var(--field-focus-border);
box-shadow: var(--bevel-field-focus);
}
:where(input, textarea):where(:read-only):where(:not([type="checkbox"], [type="radio"], [type="range"], [type="button"], [type="submit"], [type="reset"])) {
color: var(--field-readonly-text);
background-color: var(--field-readonly-background);
}
:where(input, textarea):where(:disabled):where(:not([type="checkbox"], [type="radio"], [type="range"], [type="button"], [type="submit"], [type="reset"])) {
color: var(--color-text-disabled);
background-color: var(--field-disabled-background);
}
::placeholder {
color: var(--color-text-disabled);
opacity: 1;
}
:where(input[type="search"])::-webkit-search-cancel-button,
:where(input[type="search"])::-webkit-search-decoration {
display: none;
}
:where(textarea) {
resize: vertical;
}
.rich-field {
overflow-y: auto;
white-space: pre-wrap;
overflow-wrap: anywhere;
cursor: text;
}
.rich-field[data-empty]::before {
content: attr(data-placeholder);
float: left;
height: 0;
color: var(--color-text-disabled);
pointer-events: none;
}
:where(select) {
min-height: var(--select-height);
padding: var(--select-padding);
padding-right: var(--select-padding-right);
background-image: var(--icon-select);
background-position: var(--select-icon-position);
background-repeat: no-repeat;
}
:where(select:not([multiple]):not([size])),
:where(select:not([multiple])[size="1"]),
::picker(select) {
appearance: base-select;
}
select::picker-icon {
display: none;
}
::picker(select) {
box-sizing: border-box;
padding: var(--menu-padding);
color: var(--color-text);
background: var(--menu-background);
border: var(--menu-border);
border-radius: 0;
box-shadow: var(--menu-bevel);
font: var(--font-size) var(--menu-font);
max-height: min(24em, 80dvh);
overflow: auto;
}
:where(select:not([multiple]):not([size]), select:not([multiple])[size="1"]) :where(option) {
position: relative;
display: flex;
align-items: center;
gap: var(--space-grouped);
min-block-size: 1lh;
padding: var(--menu-item-padding);
padding-inline-start: calc(var(--menu-check-width) + var(--space-grouped));
color: var(--color-text);
background: var(--menu-background);
font: inherit;
white-space: normal;
overflow-wrap: anywhere;
}
:where(select:not([multiple]):not([size]), select:not([multiple])[size="1"]) option::checkmark {
position: absolute;
inset-inline-start: var(--space-grouped);
content: var(--menu-check);
width: var(--menu-check-width);
}
:where(select:not([multiple]):not([size]), select:not([multiple])[size="1"]) :where(option:enabled):is(:hover, :focus) {
color: var(--menu-hover-text);
background: var(--menu-hover-background);
outline: none;
}
:where(select:not([multiple]):not([size]), select:not([multiple])[size="1"]) :where(option:disabled) {
color: var(--color-text-disabled);
text-shadow: var(--text-disabled-shadow);
}
@media (pointer: coarse) {
:where(select:not([multiple]):not([size]), select:not([multiple])[size="1"]) :where(option) { min-height: 44px; }
}
:where(select:active) {
background-image: var(--icon-select-active);
}
:where(select:focus) {
outline: 0;
color: var(--select-focus-text);
background-color: var(--select-focus-background);
border: var(--field-focus-border);
box-shadow: var(--bevel-field-focus);
}
:where(select:disabled) {
opacity: 1;
color: var(--color-text-disabled);
background-color: var(--select-disabled-background);
background-image: var(--icon-select-disabled);
}
:where(output) {
display: block;
box-sizing: border-box;
min-height: var(--field-height);
padding: var(--field-padding);
color: var(--field-text);
background: var(--well-background);
border: var(--well-border);
box-shadow: var(--bevel-well);
font-family: var(--field-font);
}
:where(input[type="checkbox"], input[type="radio"]) {
appearance: none;
display: inline-block;
box-sizing: border-box;
flex-shrink: 0;
margin: 0;
padding: 0;
vertical-align: middle;
}
:where(input[type="checkbox"]) {
width: var(--checkbox-size);
height: var(--checkbox-size);
background: var(--checkbox-background);
background-origin: border-box;
background-clip: border-box;
border: var(--checkbox-border);
border-radius: var(--checkbox-radius);
box-shadow: var(--bevel-checkbox);
}
:where(input[type="checkbox"]:checked) {
background: var(--icon-checkmark) center / var(--checkmark-size) no-repeat, var(--checkbox-background);
background-origin: border-box;
background-clip: border-box;
}
:where(input[type="checkbox"]:active:is(:hover, :not(:active > *)):not(:disabled)),
:where(input[type="checkbox"]:disabled) {
--checkbox-background: var(--checkbox-disabled-background);
}
:where(input[type="checkbox"]:disabled:checked) {
--icon-checkmark: var(--icon-checkmark-disabled);
}
:where(input[type="radio"]) {
width: var(--radio-size);
height: var(--radio-size);
border: 0;
border-radius: 50%;
background: var(--icon-radio) center / contain no-repeat;
}
:where(input[type="radio"]:active:is(:hover, :not(:active > *)):not(:disabled)) {
--icon-radio: var(--icon-radio-active);
}
:where(input[type="radio"]:disabled) {
--icon-radio: var(--icon-radio-disabled);
}
:where(input[type="radio"]:checked) {
background: var(--icon-radio-dot) center / var(--radio-dot-size) no-repeat, var(--icon-radio) center / contain no-repeat;
}
:where(input[type="radio"]:disabled:checked) {
--icon-radio-dot: var(--icon-radio-dot-disabled);
}
:where(input[type="checkbox"], input[type="radio"]):focus-visible {
outline: var(--focus-ring);
outline-offset: 1px;
}
:where(input[type="checkbox"], input[type="radio"]) + label {
margin-inline-start: var(--toggle-gap);
}
:where(label) > :where(input[type="checkbox"], input[type="radio"]) {
margin-inline-end: var(--toggle-gap);
}
.field-row {
display: flex;
align-items: center;
}
.field-row > * + * {
margin-left: var(--space-grouped);
}
.field-row > :where(input[type="checkbox"], input[type="radio"]) + label {
margin-left: var(--toggle-gap);
}
.field-row-stacked {
display: flex;
flex-direction: column;
}
.field-row-stacked > * + * {
margin-top: var(--field-row-stacked-gap);
}
:is(.field-row, .field-row-stacked, .field-group) + :is(.field-row, .field-row-stacked, .field-group) {
margin-top: var(--space-grouped);
}
.field-group {
padding-left: calc(var(--radio-size) + var(--toggle-gap));
}
:where(label) {
-webkit-user-select: none;
user-select: none;
}
:where(fieldset) {
margin: 0;
padding: var(--groupbox-padding);
border: var(--groupbox-border);
border-image: var(--groupbox-border-image);
border-radius: var(--groupbox-radius);
}
:where(legend) {
margin: var(--legend-margin);
padding: var(--legend-padding);
background: var(--color-surface);
}
.sys0-input-recovery {
position: fixed;
z-index: 2000;
left: max(var(--space), env(safe-area-inset-left));
bottom: max(var(--space), env(safe-area-inset-bottom));
box-sizing: border-box;
width: max-content;
max-width: min(480px, calc(100vw - 2 * var(--space)));
max-height: min(60vh, calc(100dvh - 2 * var(--space)));
overflow: auto;
padding: var(--space-grouped) var(--space);
color: var(--color-text);
background: var(--color-surface);
border: var(--border-line);
border-radius: var(--groupbox-radius);
font-size: var(--font-size-small);
}
.sys0-input-recovery[hidden] {
display: none;
}
.sys0-input-recovery > summary {
cursor: default;
overflow-wrap: anywhere;
}
.sys0-input-recovery section {
margin-top: var(--space);
padding-top: var(--space-grouped);
border-top: var(--border-line);
}
.sys0-input-recovery p {
margin: 0 0 var(--space-grouped);
overflow-wrap: anywhere;
}
.sys0-input-recovery pre {
max-height: 12em;
margin: 0 0 var(--space-grouped);
overflow: auto;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.sys0-input-recovery section > div {
display: flex;
flex-wrap: wrap;
gap: var(--space-grouped);
}
@media (pointer: coarse) {
.sys0-input-recovery > summary { padding-block: 12px; }
.sys0-input-recovery section > div > button { min-height: 44px; }
}
:where(input[type="range"]) {
width: 100%;
height: var(--slider-height);
margin: 0;
background: transparent;
appearance: none;
}
:where(input[type="range"]:focus) {
outline: none;
}
:where(input[type="range"])::-webkit-slider-runnable-track {
box-sizing: border-box;
height: var(--slider-track-height);
background: var(--slider-track-background);
border: var(--slider-track-border);
box-shadow: var(--slider-track-bevel);
}
:where(input[type="range"])::-moz-range-track {
box-sizing: border-box;
height: var(--slider-track-height);
background: var(--slider-track-background);
border: var(--slider-track-border);
box-shadow: var(--slider-track-bevel);
}
:where(input[type="range"])::-webkit-slider-thumb {
width: var(--slider-thumb-width);
height: var(--slider-thumb-height);
margin-top: calc((var(--slider-track-height) - var(--slider-thumb-height)) / 2 + var(--slider-thumb-offset));
background: var(--icon-slider-thumb) center / contain no-repeat;
border: 0;
border-radius: 0;
box-shadow: none;
appearance: none;
}
:where(input[type="range"])::-moz-range-thumb {
width: var(--slider-thumb-width);
height: var(--slider-thumb-height);
transform: translateY(var(--slider-thumb-offset));
background: var(--icon-slider-thumb) center / contain no-repeat;
border: 0;
border-radius: 0;
}
:where(input[type="range"].has-box-indicator)::-webkit-slider-thumb {
margin-top: calc((var(--slider-track-height) - var(--slider-thumb-height)) / 2 + var(--slider-box-offset));
background-image: var(--icon-slider-box);
}
:where(input[type="range"].has-box-indicator)::-moz-range-thumb {
transform: translateY(var(--slider-box-offset));
background-image: var(--icon-slider-box);
}
:where(input[type="range"]:active)::-webkit-slider-thumb {
background-image: var(--icon-slider-thumb-active);
}
:where(input[type="range"]:active)::-moz-range-thumb {
background-image: var(--icon-slider-thumb-active);
}
:where(input[type="range"]:disabled)::-webkit-slider-thumb {
background-image: var(--icon-slider-thumb-disabled);
}
:where(input[type="range"]:disabled)::-moz-range-thumb {
background-image: var(--icon-slider-thumb-disabled);
}
:where(input[type="range"].has-box-indicator:active)::-webkit-slider-thumb {
background-image: var(--icon-slider-box-active);
}
:where(input[type="range"].has-box-indicator:active)::-moz-range-thumb {
background-image: var(--icon-slider-box-active);
}
:where(input[type="range"].has-box-indicator:disabled)::-webkit-slider-thumb {
background-image: var(--icon-slider-box-disabled);
}
:where(input[type="range"].has-box-indicator:disabled)::-moz-range-thumb {
background-image: var(--icon-slider-box-disabled);
}
.slider-stops {
display: inline-grid;
}
.slider-stops > input[type="range"] {
width: 100%;
margin-inline: 0;
}
.slider-ticks {
display: flex;
justify-content: space-between;
box-sizing: border-box;
height: var(--slider-tick-height);
margin-block-start: var(--slider-tick-gap);
padding-inline: calc(var(--slider-thumb-width) / 2 - var(--slider-tick-width) / 2);
}
.slider-ticks > * {
width: var(--slider-tick-width);
background: var(--slider-tick-color);
}
.is-vertical {
display: inline-block;
width: var(--slider-thumb-height);
height: 150px;
}
.is-vertical > input[type="range"] {
width: 150px;
height: var(--slider-thumb-height);
transform-origin: 75px 75px;
transform: rotate(270deg);
}
:where(progress) {
box-sizing: border-box;
display: block;
width: 100%;
height: var(--progress-height);
padding: var(--progress-padding);
background: var(--progress-background);
border: var(--progress-border);
border-radius: var(--progress-radius);
box-shadow: var(--bevel-progress);
appearance: none;
}
:where(progress)::-webkit-progress-bar {
background: transparent;
}
:where(progress)::-webkit-progress-value {
background: var(--progress-fill);
}
:where(progress)::-moz-progress-bar {
background: var(--progress-fill);
}
:where(progress.segmented)::-webkit-progress-value {
background: var(--progress-segments);
}
:where(progress.segmented)::-moz-progress-bar {
background: var(--progress-segments);
}
[role="listbox"] {
box-sizing: border-box;
margin: 0;
padding: var(--listbox-padding);
overflow: auto;
list-style: none;
color: var(--field-text);
background: var(--well-background);
border: var(--well-border);
box-shadow: var(--bevel-well);
}
[role="option"] {
padding: var(--option-padding);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
cursor: default;
}
[role="option"][aria-selected="true"] {
color: var(--color-highlight-text);
background: var(--color-highlight);
}
[role="option"]:focus-visible {
outline: var(--focus-ring);
outline-offset: -1px;
}
ul.tree-view {
display: block;
margin: 0;
padding: var(--listbox-padding);
color: var(--field-text);
background: var(--well-background);
border: var(--well-border);
box-shadow: var(--bevel-well);
}
ul.tree-view li {
list-style: none;
}
ul.tree-view a {
color: inherit;
text-decoration: none;
}
ul.tree-view a:focus {
color: var(--color-highlight-text);
background: var(--color-highlight);
outline: none;
}
ul.tree-view ul,
ul.tree-view li {
margin-top: var(--tree-item-gap);
}
ul.tree-view ul {
margin-left: var(--tree-indent);
padding-left: var(--tree-indent);
border-left: var(--tree-line);
}
ul.tree-view ul > li {
position: relative;
}
ul.tree-view ul > li::before {
content: "";
position: absolute;
top: 6px;
left: calc(-1 * var(--tree-indent));
width: calc(var(--tree-indent) - 4px);
border-bottom: var(--tree-line);
}
ul.tree-view ul > li:last-child::after {
content: "";
position: absolute;
top: 7px;
bottom: 0;
left: calc(-1 * var(--tree-indent) - 4px);
width: 8px;
background: var(--well-background);
}
.file-tree {
--trees-bg-override: var(--well-background);
--trees-fg-override: var(--field-text);
--trees-fg-muted-override: var(--color-text-disabled);
--trees-bg-muted-override: color-mix(in srgb, var(--color-highlight) 14%, var(--well-background));
--trees-accent-override: var(--color-highlight);
--trees-selected-bg-override: var(--color-highlight);
--trees-selected-fg-override: var(--color-highlight-text);
--trees-selected-focused-border-color-override: var(--color-highlight-text);
--trees-focus-ring-color-override: var(--color-text);
--trees-border-color-override: var(--color-shadow);
--trees-status-added-override: var(--color-link);
--trees-status-modified-override: var(--color-link);
--trees-status-deleted-override: var(--color-error);
--trees-status-renamed-override: var(--color-link);
--trees-status-ignored-override: var(--color-text-disabled);
--trees-indent-guide-bg-override: color-mix(in srgb, var(--color-shadow) 60%, transparent);
--trees-scrollbar-thumb-override: var(--color-shadow);
--trees-input-bg-override: var(--field-background);
--trees-search-bg-override: var(--field-background);
--trees-search-fg-override: var(--field-text);
--trees-font-family-override: var(--font-ui);
--trees-font-size-override: var(--font-size);
--trees-border-radius-override: var(--launcher-item-radius);
display: flex;
flex-direction: column;
overflow: hidden;
color: var(--field-text);
background: var(--well-background);
border: var(--well-border);
box-shadow: var(--bevel-well);
}
.file-tree > * {
flex: 1;
min-height: 0;
}
ul.tree-view details > summary {
list-style: none;
cursor: default;
}
ul.tree-view details > summary::-webkit-details-marker {
display: none;
}
ul.tree-view details > summary::before {
content: "+";
display: block;
float: left;
width: 8px;
height: 9px;
margin-right: 5px;
padding-left: 1px;
line-height: 8px;
text-align: center;
background: var(--tree-toggle-background);
border: var(--tree-toggle-border);
}
ul.tree-view details[open] > summary::before {
content: "-";
}
ul.tree-view ul details > summary::before {
position: relative;
z-index: 1;
margin-left: calc(-1 * var(--tree-indent) - 6px);
}
:where(summary:focus-visible) {
outline: var(--focus-ring);
}
:where(table) {
position: relative;
border-collapse: collapse;
text-align: left;
color: var(--field-text);
background: var(--color-canvas);
}
:where(th, td) {
padding: var(--cell-padding);
border: var(--table-cell-border);
vertical-align: top;
}
:where(thead th, thead td) {
position: sticky;
top: 0;
box-sizing: border-box;
padding: var(--table-header-padding);
font-weight: normal;
color: var(--color-text);
background: var(--table-header-background);
border: var(--table-header-border);
box-shadow: var(--bevel-raised);
}
:where(table.interactive > tbody > tr) {
cursor: default;
}
.window.shortcuts kbd {
font: inherit;
white-space: nowrap;
padding: 0 4px;
border: var(--border-line);
border-radius: var(--window-radius);
}
.window.shortcuts table {
width: 100%;
}
.window.shortcuts tbody th {
padding-top: var(--space);
text-align: start;
}
.window.shortcuts td small {
font-size: var(--font-size-small);
color: var(--color-text-disabled);
}
.window.settings {
display: flex;
flex-direction: column;
height: auto;
}
sys0-shell > .desktop > .system-window.window.settings[role="dialog"]:not(.placed) {
width: min(760px, calc(100vw - 24px));
}
.window.settings > .window-body {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
}
.settings-split {
display: flex;
flex: 1 1 auto;
gap: var(--space);
min-height: 0;
}
.settings-time-zone .time-zone-form {
display: grid;
grid-template-columns: max-content minmax(0, 1fr);
align-items: baseline;
gap: var(--space-grouped) var(--space);
}
.settings-time-zone .time-zone-form > :not(label, select) { grid-column: 2; margin: 0; }
.settings-time-zone select { width: 100%; min-width: 0; }
.settings-time-zone .time-zone-form > [role="status"]:empty { display: none; }
.settings-time-zone .time-zone-preview { margin-top: var(--space-grouped); }
.window.settings .settings-pane small { font-size: var(--font-size-small); color: var(--color-text-disabled); }
.window.settings .settings-pane fieldset > small { display: block; margin-top: var(--space-grouped); }
@media (max-width: 600px) {
.settings-time-zone .time-zone-form { grid-template-columns: minmax(0, 1fr); }
.settings-time-zone .time-zone-form > :not(label, select) { grid-column: 1; }
}
.settings-sections {
flex: 0 0 160px;
}
.settings-pane {
display: grid;
flex: 1 1 auto;
min-width: 0;
overflow: auto;
}
.settings-pane > * {
grid-area: 1 / 1;
align-self: start;
min-width: 0;
}
.settings-pane > [hidden] {
display: none !important;
}
sys0-shell > .desktop > .system-window.window.app-settings[role="dialog"]:not(.placed) {
top: 12%;
width: min(560px, calc(100vw - 24px));
max-width: calc(100vw - 24px);
height: auto;
max-height: 80%;
}
.window.app-settings > .window-body {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
}
.window.app-settings > .window-body > footer {
flex: none;
}
.app-settings-panel {
display: flex;
flex-direction: column;
flex: 0 1 auto;
min-height: 0;
overflow: hidden;
}
.app-settings-panel.app-settings-tabbed {
height: 420px;
}
.app-settings-panel > .app-settings-view {
display: block;
flex: 1 1 auto;
width: 100%;
min-width: 0;
min-height: 0;
overflow: auto;
border: 0;
}
.app-settings-panel > div.app-settings-view {
display: grid;
align-content: start;
justify-items: start;
gap: var(--space);
box-sizing: border-box;
}
.app-settings-view small { font-size: var(--font-size-small); color: var(--color-text-disabled); }
.app-settings-rendering {
display: grid;
justify-items: start;
gap: var(--space-grouped);
}
.app-settings-rendering:empty { display: none; }
.app-settings-rendering > p { margin: 0; font-size: var(--font-size-small); color: var(--color-text-disabled); }
.app-settings-rendering > p[role="status"] { color: inherit; }
.app-settings-panel > [hidden] {
display: none !important;
}
.settings-wallpaper-form {
display: grid;
grid-template-columns: max-content minmax(0, 1fr);
align-items: center;
gap: var(--space-grouped);
}
.settings-wallpaper-form > select {
min-width: 0;
width: 100%;
}
.settings-wallpaper-form > button {
grid-column: 2;
justify-self: start;
}
.settings-wallpaper-form > small {
grid-column: 2;
}
@media (max-width: 600px) {
.settings-wallpaper-form { grid-template-columns: minmax(0, 1fr); }
.settings-wallpaper-form > :is(button, small) { grid-column: 1; }
}
.settings-people [hidden] {
display: none;
}
.people-avatar-editor { display: grid; gap: var(--space-grouped); min-width: 0; align-self: start; }
.settings-people .people-form > .people-form-label { grid-column: 1; text-align: end; }
.settings-people .people-form > .people-avatar-label { align-self: start; padding-top: var(--space-grouped); }
.people-avatar-controls, .people-avatar-actions { display: flex; align-items: center; gap: var(--space-grouped); }
.people-avatar-controls { flex-wrap: wrap; }
.people-avatar-actions { flex: 1 1 min-content; flex-wrap: wrap; max-width: 100%; }
.people-avatar-preview {
display: grid;
place-items: center;
flex: none;
width: 56px;
height: 56px;
overflow: hidden;
background: var(--field-background);
border: var(--border-line);
border-radius: var(--button-radius);
}
.people-avatar-preview > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.people-avatar-editor > p { margin: 0; }
.people-avatar-editor > [role="status"]:empty { display: none; }
.people-avatar-error { color: var(--color-error); }
@media (pointer: coarse) {
.people-avatar-actions > button { min-height: 44px; }
}
@media (max-width: 600px) {
.settings-people .people-form:has(> .people-avatar-editor) { grid-template-columns: minmax(0, 1fr); }
.settings-people .people-form:has(> .people-avatar-editor) > * { grid-column: 1; text-align: start; }
.settings-people .people-form > .people-avatar-label { padding-top: 0; }
}
.settings-people fieldset {
min-width: 0;
}
.settings-people .people-form {
display: grid;
grid-template-columns: max-content minmax(0, 1fr);
align-items: baseline;
gap: var(--space-grouped);
}
.settings-people .people-form > * {
grid-column: 2;
margin: 0;
}
.settings-people .people-form > label {
grid-column: 1;
text-align: end;
}
.settings-people .people-form > .field-row > input,
.settings-people .people-link > input {
flex: 1;
min-width: 0;
}
.settings-people .field-row > button {
flex: none;
}
.settings-people .people-form > [role="status"]:empty {
display: none;
}
.settings-people .people-form > input,
.settings-people [id$="-people-person"],
.settings-people [id$="-people-invite-link"] {
width: 100%;
min-width: 0;
box-sizing: border-box;
}
.settings-people .people-note {
font-size: var(--font-size-small);
}
.settings-people > .people-save {
justify-content: flex-end;
}
.settings-people .people-apps-list {
max-height: 240px;
overflow: auto;
}
.settings-people .people-apps {
width: 100%;
border-collapse: collapse;
}
.settings-people .people-apps th {
text-align: start;
}
.settings-people .people-apps select {
width: 8.5em;
}
.settings-people .people-apps td + td,
.settings-people .people-apps th + th {
width: 1%;
white-space: nowrap;
}
.settings-people .people-band > * + * {
margin-top: var(--space-grouped);
}
.settings-people .people-models {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(14em, 1fr));
gap: 2px var(--space-grouped);
max-height: 160px;
overflow: auto;
}
.settings-people .people-models > .field-row {
margin: 0;
}
.settings-people .people-models-box {
display: grid;
gap: var(--space-grouped);
}
.settings-people .people-form > label[for$="-people-password"] {
margin-top: var(--space-grouped);
}
.settings-people .people-raw {
display: grid;
gap: var(--space-grouped);
}
.settings-people .people-raw > p {
margin: 0;
}
.settings-people .people-form > .field-row > input[type="number"] {
flex: 0 1 9em;
}
.settings-people .people-raw textarea {
width: 100%;
box-sizing: border-box;
font-family: var(--font-mono);
font-size: var(--font-size-small);
resize: vertical;
}
@media (pointer: coarse) {
.settings-people .people-raw textarea { font-size: max(16px, var(--font-size-small)); }
}
.settings-people .people-band-errors:empty {
display: none;
}
.settings-people .people-band-errors {
margin: var(--space-grouped) 0 0;
padding-inline-start: 1.2em;
color: var(--color-error);
font-size: var(--font-size-small);
}
.settings-people .people-band-errors > li[tabindex] {
cursor: pointer;
text-decoration: underline;
}
@media (max-width: 600px) {
.settings-split { flex-direction: column; }
.window.settings .settings-sections { flex: none; display: flex; flex-wrap: wrap; overflow: visible; }
.window.settings .settings-sections > [role="option"] { flex: 0 0 max(25%, 5.5em); min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.window.settings .settings-people .people-form { grid-template-columns: minmax(0, 1fr); }
.window.settings .settings-people .people-form > * { grid-column: 1; }
.window.settings .settings-people .people-form > label { text-align: start; }
}
@media (pointer: coarse) {
.window.settings .settings-sections > [role="option"],
.window:is(.settings, .shortcuts) > .window-body > footer button { min-height: 44px; box-sizing: border-box; }
}
@media (max-width: 600px) {
.window.shortcuts thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.window.shortcuts tbody tr { display: grid; padding: var(--space-grouped) 0; border-bottom: var(--border-line); }
.window.shortcuts tbody td { padding: 1px var(--space-grouped); border: 0; }
}
:where(tr[aria-selected="true"]) {
color: var(--color-highlight-text);
background: var(--color-highlight);
}
.choice-grid,
.choice-grid thead,
.choice-grid tbody,
.choice-grid tr {
background: none;
border: 0;
box-shadow: none;
}
.choice-grid {
border-collapse: separate;
border-spacing: var(--choice-grid-gap);
}
.choice-grid th,
.choice-grid thead td {
position: static;
padding: var(--choice-grid-header-padding);
font-weight: normal;
white-space: nowrap;
color: var(--color-text);
background: none;
border: 0;
box-shadow: none;
}
.choice-grid thead th {
padding: 0;
vertical-align: bottom;
}
.choice-grid thead th > span {
display: flex;
justify-content: center;
width: 0;
margin-inline: auto;
}
.choice-grid thead th:not([aria-selected="true"]) {
color: transparent;
}
.choice-grid tbody th {
text-align: start;
vertical-align: middle;
}
.choice-grid tbody th.has-tooltip {
position: relative;
}
.choice-grid td {
padding: 0;
text-align: center;
vertical-align: middle;
background: none;
border: 0;
}
.choice-grid input[type="radio"] {
display: block;
margin-inline: auto;
}
.choice-grid-spare {
visibility: hidden;
}
.popup-menu {
position: relative;
display: inline-flex;
}
.popup-menu:focus-within > [role="menu"],
.popup-menu > button[aria-expanded="true"] ~ [role="menu"] {
display: block;
}
.popup-menu:has(> button:disabled) > [role="menu"] {
display: none;
}
.popup-menu.above > [role="menu"] {
top: auto;
bottom: 100%;
}
.popup-menu:focus {
outline: none;
}
.popup-menu > [role="tooltip"] {
position: absolute;
top: 100%;
left: 0;
z-index: 99;
width: max-content;
max-width: var(--tooltip-width);
white-space: normal;
visibility: hidden;
pointer-events: none;
}
.popup-menu.above > [role="tooltip"] {
top: auto;
bottom: 100%;
}
.popup-menu:hover:not(:focus-within) > [role="tooltip"] {
visibility: visible;
transition: visibility 0s var(--tooltip-delay);
}
.popup-menu-value {
display: inline-grid;
}
.popup-menu-value > * {
grid-area: 1 / 1;
text-align: start;
white-space: nowrap;
}
.popup-menu-value > [aria-hidden="true"] {
visibility: hidden;
}
.popup-menu-arrows {
flex: none;
width: var(--popup-menu-arrows-size);
height: var(--popup-menu-arrows-size);
margin-inline-start: auto;
background: currentColor;
-webkit-mask: var(--icon-menu-arrows) center / contain no-repeat;
mask: var(--icon-menu-arrows) center / contain no-repeat;
}
.popup-group {
display: inline-flex;
align-items: stretch;
box-sizing: border-box;
max-width: 100%;
min-height: var(--button-min-height);
color: var(--button-text);
background: var(--button-face);
border: var(--button-border);
border-radius: var(--button-radius);
box-shadow: var(--bevel-raised);
font-family: var(--button-font);
}
.popup-group > .popup-menu {
display: flex;
}
.popup-group > .popup-menu > button {
flex: 1 1 auto;
}
.popup-group > .popup-menu > button:not(:has(> .popup-menu-value)) {
justify-content: center;
}
.popup-group > .popup-menu > button,
.popup-group > button {
display: inline-flex;
align-items: center;
gap: var(--space-grouped);
min-width: 0;
min-height: 0;
height: auto;
margin: 0;
padding: var(--popup-group-padding);
color: inherit;
background: none;
border: 0;
border-radius: 0;
box-shadow: none;
font: inherit;
}
.popup-group > .popup-menu > button::before,
.popup-group > .popup-menu > button::after,
.popup-group > button::before,
.popup-group > button::after {
display: none;
}
.popup-group > :first-child,
.popup-group > :first-child > button {
border-start-start-radius: inherit;
border-end-start-radius: inherit;
}
.popup-group > :last-child,
.popup-group > :last-child > button {
border-start-end-radius: inherit;
border-end-end-radius: inherit;
}
.popup-group > .popup-menu > button:hover,
.popup-group > button:hover {
background: var(--popup-group-hover);
}
.popup-group > .popup-menu:focus-within > button,
.popup-group > .popup-menu > button:active,
.popup-group > button:active {
color: var(--button-active-text);
background: var(--button-active-face);
}
:root[data-keys] .popup-group > .popup-menu > button:focus-visible,
:root[data-keys] .popup-group > button:focus-visible {
outline: var(--focus-ring);
outline-offset: -2px;
}
.popup-group > .popup-menu > button:disabled,
.popup-group > button:disabled {
color: var(--color-text-disabled);
background: none;
}
.popup-group .icon-image {
width: var(--popup-group-icon-size);
height: var(--popup-group-icon-size);
}
.popup-group:has(> .popup-menu > button[aria-expanded="true"]) > .popup-menu > [role="tooltip"] {
visibility: hidden;
}
.popup-group > :not(:first-child) {
border-inline-start: var(--popup-group-divider);
}
.popup-group > .popup-menu > button:has(> :is(.icon-image, .popup-menu-arrows):only-child) {
padding: var(--popup-group-icon-padding);
}
[role="tablist"] {
position: relative;
display: flex;
flex: none;
align-items: flex-end;
gap: var(--tab-gap);
margin: 0 0 var(--tablist-overlap);
padding: var(--tablist-padding);
list-style: none;
}
[role="tab"] {
position: relative;
z-index: 1;
box-sizing: border-box;
min-width: 0;
min-height: 0;
margin: 0;
padding: var(--tab-padding);
color: var(--color-text);
background: var(--tab-face);
border: var(--tab-border);
border-bottom: 0;
border-radius: var(--tab-radius);
box-shadow: var(--bevel-tab);
cursor: default;
}
[role="tab"]:not(:disabled):active {
padding: var(--tab-padding);
color: var(--color-text);
background: var(--tab-face);
box-shadow: var(--bevel-tab);
}
[role="tab"][aria-selected="true"] {
z-index: 8;
margin: var(--tab-selected-margin);
padding: var(--tab-selected-padding);
color: var(--tab-selected-text);
background: var(--tab-selected-face);
box-shadow: var(--bevel-tab-selected);
}
[role="tab"]:focus-visible {
outline: var(--focus-ring);
outline-offset: -4px;
}
.window-body > .back > [role="tablist"] {
flex-wrap: wrap;
row-gap: 0;
}
.window-body > .back > [role="tablist"] > [role="tab"] {
flex: none;
white-space: nowrap;
}
[role="tabpanel"] {
position: relative;
z-index: 2;
box-sizing: border-box;
padding: var(--tabpanel-padding);
background: var(--color-surface);
border: var(--tabpanel-border);
box-shadow: var(--bevel-window);
}
[role="menubar"] {
position: relative;
z-index: 1000;
display: flex;
flex: none;
margin: 0;
padding: var(--menubar-padding);
line-height: var(--menubar-line-height);
color: var(--color-text);
background: var(--menubar-background);
border-bottom: var(--menubar-border);
font-family: var(--menu-font);
-webkit-user-select: none;
user-select: none;
}
[role="menubar"] > [role="menuitem"] {
position: relative;
flex-shrink: 0;
padding: var(--menubar-item-padding);
outline: none;
cursor: default;
}
[role="menubar"] > [role="menuitem"][data-mark][data-mark]::before,
[role="menubar"] > [role="menuitem"][data-mark][data-mark]:focus-within::before {
content: none;
}
[role="menubar"] > [role="menuitem"][data-mark]::after {
content: "";
display: block;
width: var(--menubar-mark-width);
height: var(--menubar-line-height);
}
[role="menubar"] > [role="menuitem"] > .menubar-mark {
position: absolute;
display: block;
width: var(--menubar-mark-width);
height: var(--menubar-mark-height);
left: round((100% - var(--menubar-mark-width)) / 2, 1px);
top: round(down, (100% - var(--menubar-mark-height)) / 2, 1px);
object-fit: contain;
}
[role="menubar"] > [role="menuitem"] + [role="menuitem"] {
margin-left: var(--menubar-gap);
}
@media (hover: hover) and (pointer: fine) {
[role="menubar"] > [role="menuitem"]:hover {
color: var(--menubar-hover-text);
background: var(--menubar-hover-background);
box-shadow: var(--menubar-hover-bevel);
}
}
[role="menubar"] > [role="menuitem"]:focus-within {
color: var(--menubar-open-text);
background: var(--menubar-open-background);
box-shadow: var(--menubar-open-bevel);
}
[role="menu"] {
position: absolute;
top: 100%;
left: 0;
z-index: 99;
display: none;
box-sizing: border-box;
min-width: min(var(--menu-min-width), 100dvw);
max-width: 100dvw;
padding: var(--menu-padding);
color: var(--color-text);
background: var(--menu-background);
border: var(--menu-border);
box-shadow: var(--menu-bevel);
}
[role="menuitem"]:focus > [role="menu"],
[role="menuitem"]:focus-within > [role="menu"],
[role="menuitem"][aria-expanded="true"] > [role="menu"] {
display: block;
}
@media (hover: hover) and (pointer: fine) {
[role="menu"] [role="menuitem"]:hover > [role="menu"] {
display: block;
}
}
[role="menu"][popover]:not(:popover-open) {
display: none;
}
[role="menuitem"][aria-expanded="false"] > [role="menu"],
[role="menu"] [role="menuitem"][aria-expanded="false"] > [role="menu"] {
display: none;
}
[role="menu"] [role="menuitem"] > [role="menu"] {
top: 0;
left: 100%;
}
[role="menu"] > :is([role="menuitem"], [role="menuitemradio"]) {
position: relative;
display: flex;
align-items: center;
gap: 2em;
box-sizing: border-box;
width: 100%;
min-width: 0;
min-height: 0;
margin: 0;
padding: var(--menu-item-padding);
text-align: left;
white-space: nowrap;
color: inherit;
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
font: inherit;
cursor: default;
}
[role="menu"] > :is([role="menuitem"], [role="menuitemradio"]):focus-within {
color: var(--menu-hover-text);
background: var(--menu-hover-background);
outline: none;
}
@media (hover: hover) and (pointer: fine) {
[role="menu"] > :is([role="menuitem"], [role="menuitemradio"]):hover {
color: var(--menu-hover-text);
background: var(--menu-hover-background);
}
}
[role="menu"] > :is([role="menuitem"], [role="menuitemradio"]) > .menu-label {
min-width: 0;
white-space: normal;
overflow-wrap: anywhere;
}
@media (pointer: coarse) {
[role="menu"] > :is([role="menuitem"], [role="menuitemradio"]) {
min-height: 44px;
white-space: normal;
overflow-wrap: anywhere;
touch-action: manipulation;
}
}
.menu-keys, .menu-arrow {
flex-shrink: 0;
margin-inline-start: auto;
color: inherit;
}
.menu-keys {
max-width: 50%;
overflow: hidden;
text-overflow: ellipsis;
}
[role="menu"] > :is([role="menuitem"], [role="menuitemradio"]):is(:disabled, [aria-disabled="true"]) {
color: var(--color-text-disabled);
background: transparent;
text-shadow: var(--text-disabled-shadow);
}
[role="menu"] > [role="menuitemradio"] {
padding-inline-start: calc(var(--menu-check-width) + var(--space-grouped));
}
[role="menu"] > [role="menuitemradio"][aria-checked="true"]::before {
content: var(--menu-check);
position: absolute;
inset-inline-start: var(--space-grouped);
}
[role="menu"] > [role="separator"] {
margin: var(--menu-separator-margin);
border-top: var(--menu-separator);
border-bottom: var(--menu-separator-highlight);
}
.desktop {
background: var(--desktop-background);
}
.wm-strip-indicator { position: absolute; top: var(--space); left: 50%; display: flex; align-items: center; gap: var(--space-grouped); max-width: calc(100% - 2 * var(--space)); padding: var(--space-grouped); overflow: auto; transform: translateX(-50%); background: color-mix(in srgb, var(--color-surface) 88%, transparent); border: var(--border-line); border-radius: var(--window-radius); box-shadow: var(--bevel-window); backdrop-filter: blur(12px); z-index: 20000; }
.wm-strip-indicator button { flex: 0 0 auto; min-width: 2.2em; }
.wm-strip-indicator .wm-strip-item { display: inline-flex; align-items: center; gap: var(--space-grouped); }
.wm-strip-indicator .wm-strip-item[aria-pressed="true"] { color: var(--color-highlight-text); background: var(--color-highlight); }
.wm-strip-glyph { display: inline-grid; place-items: center; width: 1.35em; height: 1.35em; border-radius: var(--window-radius); background: var(--color-canvas); font-size: var(--font-size-small); font-weight: bold; }
.desktop[data-wm-mode="columns"] > .window.wm-managed { transition: left 240ms cubic-bezier(.22, 1, .36, 1); }
.desktop[data-wm-mode="columns"] { overscroll-behavior-x: contain; }
.wm-shelf { position: absolute; bottom: 0; left: 0; right: 0; display: flex; align-items: center; gap: var(--space-grouped); padding: var(--space-grouped); overflow: auto; background: var(--color-surface); border-top: var(--border-line); z-index: 20000; }
.wm-shelf button { flex-shrink: 0; }
.wm-shelf button[aria-pressed="true"] { font-weight: bold; }
.wm-snap-preview { position: absolute; pointer-events: none; border: 2px solid var(--color-highlight); background: color-mix(in srgb, var(--color-highlight) 20%, transparent); box-sizing: border-box; z-index: 20001; }
.wm-overview { position: absolute; inset: var(--space); z-index: 20002; width: auto; height: auto; }
.wm-overview > .window-body { display: flex; flex-direction: column; gap: var(--space); overflow: auto; }
.wm-map { position: relative; flex: 1; min-height: 12em; overflow: hidden; background: var(--color-canvas); border: var(--border-line); }
.wm-map button { overflow: hidden; text-overflow: ellipsis; background: var(--color-surface); opacity: 0.9; }
.wm-window-list { display: flex; gap: var(--space-grouped); flex-wrap: wrap; }
.wm-divider { position: absolute; bottom: 38px; width: 120px; z-index: 20000; }
.window.wm-shaded { height: auto !important; min-height: 0 !important; }
.window.wm-shaded > :not(.title-bar) { display: none !important; }
.window.wm-locked > .window-edges, .window.wm-locked > .grip { display: none !important; }
.wm-shelf[hidden], .wm-snap-preview[hidden], .wm-divider[hidden], .window[hidden] { display: none !important; }
.wm-strip-indicator[hidden] { display: none !important; }
[data-wm-mode="columns"] .wm-strip-indicator button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--color-highlight); }
@media (prefers-reduced-motion: reduce) { .desktop[data-wm-mode="columns"] > .window.wm-managed { transition: none; } }
.desktop[data-wm-no-peek="true"] > .window:not(.wm-active):not(.wm-pinned) { opacity: 0.12; transition: opacity 160ms ease-out; }
.desktop[data-wm-highlight="active"] > .window.wm-active { outline: 2px solid var(--color-highlight); outline-offset: 1px; }
.desktop[data-wm-highlight="all"] > .window { outline: var(--border-line); outline-offset: 1px; }
.desktop[data-wm-highlight="all"] > .window.wm-active { outline: 2px solid var(--color-highlight); }
.desktop[data-wm-highlight="glow"] > .window.wm-active { box-shadow: 0 0 0 2px var(--color-highlight), 0 0 24px 4px color-mix(in srgb, var(--color-highlight) 55%, transparent); }
.tutorial-coach {
position: fixed; right: calc(2 * var(--space)); bottom: calc(48px + var(--space)); z-index: 20004;
width: min(380px, calc(100vw - 4 * var(--space))); height: auto;
transform-origin: 100% 100%;
transition: translate var(--tutorial-move-duration) var(--tutorial-move-easing);
--tutorial-scripted: var(--tutorial-turn-duration) var(--tutorial-turn-easing) var(--tutorial-turn-distance) var(--tutorial-chapter-duration) var(--tutorial-chapter-easing) var(--tutorial-chapter-distance) var(--tutorial-chapter-stagger) var(--tutorial-done-beat);
}
.tutorial-coach:not([data-shown]) { visibility: hidden; }
.tutorial-coach[data-shown] { animation: tutorial-coach-in var(--tutorial-enter-duration) var(--tutorial-enter-easing) both; }
.tutorial-coach[data-leaving] { pointer-events: none; animation: tutorial-coach-out var(--tutorial-exit-duration) var(--tutorial-exit-easing) both; }
.tutorial-coach[data-dragging] { transition: none; }
.tutorial-coach > .title-bar { touch-action: none; }
@keyframes tutorial-coach-in { from { opacity: 0; } }
@keyframes tutorial-coach-out { to { opacity: 0; transform: translateY(calc(var(--tutorial-enter-distance) / 2)) scale(calc((1 + var(--tutorial-enter-scale)) / 2)); } }
.tutorial-coach > .window-body { display: flex; flex-direction: column; gap: var(--space-grouped); }
.tutorial-coach [hidden] { display: none !important; }
.tutorial-coach p { margin: 0; }
.tutorial-coach .tutorial-head { display: flex; align-items: baseline; gap: var(--space-grouped); font-size: var(--font-size-small); }
.tutorial-coach .tutorial-chapter { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.tutorial-coach .tutorial-progress { flex: none; margin-inline-start: auto; color: var(--color-text-disabled); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tutorial-coach .tutorial-turn { display: flex; flex-direction: column; gap: var(--space-grouped); padding-top: calc(var(--space-grouped) / 2); }
.tutorial-coach .tutorial-title { margin: 0; font: var(--tutorial-title-font); line-height: 1.25; text-wrap: balance; overflow-wrap: anywhere; }
.tutorial-coach .tutorial-page { display: flex; flex-direction: column; gap: var(--space-grouped); }
.tutorial-coach .tutorial-say { line-height: 1.45; text-wrap: pretty; overflow-wrap: break-word; }
.tutorial-coach kbd { white-space: nowrap; font-weight: bold; }
.tutorial-coach footer { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: var(--space-grouped); }
.tutorial-coach .tutorial-tools { display: flex; align-items: center; gap: var(--space-grouped); margin-inline-end: auto; }
.tutorial-coach .tutorial-moves { display: flex; align-items: center; gap: var(--space-grouped); margin-inline-start: auto; }
.tutorial-coach .window-body button { transition: scale var(--tutorial-press-duration) var(--tutorial-press-easing); }
.tutorial-coach .window-body button:not(:disabled):active { scale: var(--tutorial-press-scale); }
.tutorial-coach .tutorial-strip { display: flex; gap: var(--space-grouped); }
.tutorial-coach .tutorial-strip > * { all: unset; box-sizing: border-box; flex: 1 1 0; min-width: 0; display: flex; align-items: center; min-height: max(12px, var(--progress-height)); opacity: 0.5; }
.tutorial-coach .tutorial-strip > button { cursor: pointer; }
.tutorial-coach .tutorial-strip > [aria-current], .tutorial-coach .tutorial-strip > span:only-child { opacity: 1; }
:root[data-keys] .tutorial-coach .tutorial-strip > button:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
@media (hover: hover) { .tutorial-coach .tutorial-strip > button:hover { opacity: 0.8; } }
.tutorial-coach .tutorial-track {
box-sizing: border-box; display: block; flex: 1; overflow: hidden; height: var(--progress-height); padding: var(--progress-padding);
background: var(--progress-background); border: var(--progress-border); border-radius: var(--progress-radius); box-shadow: var(--bevel-progress);
}
.tutorial-coach .tutorial-level { display: block; height: 100%; overflow: hidden; border-radius: inherit; }
.tutorial-coach .tutorial-fill {
display: block; height: 100%; background: var(--progress-fill);
translate: calc((var(--fill, 0) - 1) * (100% + 1px)) 0;
transition: translate var(--tutorial-meter-duration) var(--tutorial-meter-easing);
}
.tutorial-coach .tutorial-strip[data-arriving] .tutorial-fill { translate: calc(-100% - 1px) 0; transition: none; }
.tutorial-coach .tutorial-status { display: flex; align-items: center; gap: var(--space-grouped); }
.tutorial-coach .tutorial-status[data-idle] { display: none; }
.tutorial-coach .tutorial-check { position: relative; flex: none; width: 1.25em; height: 1.25em; border-radius: 50%; box-shadow: inset 0 0 0 1px currentColor; opacity: 0.45; }
.tutorial-coach [data-done] > .tutorial-check { opacity: 1; box-shadow: none; }
.tutorial-coach .tutorial-check::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--tutorial-done-color); opacity: 0; }
.tutorial-coach .tutorial-check > i { position: absolute; height: 0.14em; border-radius: 0.07em; background: var(--color-surface); transform-origin: 0 50%; scale: 0 1; }
.tutorial-coach .tutorial-check > i:first-child { left: 0.29em; top: 0.55em; width: 0.32em; rotate: 45deg; }
.tutorial-coach .tutorial-check > i:last-child { left: 0.48em; top: 0.8em; width: 0.6em; rotate: -52deg; }
.tutorial-coach [data-done] > .tutorial-check::before { opacity: 1; animation: tutorial-check-ring var(--tutorial-done-duration) var(--tutorial-done-easing) both; }
.tutorial-coach [data-done] > .tutorial-check > i { scale: 1 1; animation: tutorial-check-stroke calc(var(--tutorial-done-beat) / 2) var(--tutorial-done-easing) var(--tutorial-done-beat) both; }
.tutorial-coach [data-done] > .tutorial-check > i:last-child { animation-duration: var(--tutorial-done-beat); animation-delay: calc(var(--tutorial-done-beat) * 1.5); }
.tutorial-coach[data-plain] > .window-body { gap: calc(1.5 * var(--space)); padding: calc(3 * var(--space)) calc(3 * var(--space)) calc(2 * var(--space)); align-items: center; text-align: center; }
.tutorial-coach .tutorial-mark { display: none; }
.tutorial-coach[data-plain] .tutorial-turn { gap: calc(var(--space-grouped) / 2); padding-top: 0; align-items: center; text-align: center; }
.tutorial-coach[data-plain] footer { flex-direction: column-reverse; justify-content: center; width: 100%; }
.tutorial-coach[data-plain] footer > .tutorial-moves, .tutorial-coach[data-plain] footer > .tutorial-tools { margin: 0 auto; justify-content: center; }
.tutorial-coach[data-plain] .tutorial-title { font: 300 calc(2.25 * var(--font-size)) / 1.1 var(--font-ui); letter-spacing: -0.01em; text-wrap: nowrap; }
.tutorial-coach[data-plain] .tutorial-say { font-size: calc(1.1 * var(--font-size)); line-height: 1.3; opacity: 0.62; }
@keyframes tutorial-check-ring { from { transform: scale(0.4); } }
@keyframes tutorial-check-stroke { from { scale: 0 1; } }
@keyframes tutorial-check-fade { from { opacity: 0; } }
sys0-shell > .desktop > .system-window.window.tour-words-window[role="dialog"]:not(.placed) { top: 48px; width: min(460px, calc(100% - 32px)); height: min(560px, calc(100% - 96px)); max-width: none; max-height: none; }
sys0-shell > .desktop > .system-window.window.tour-words-window { z-index: 20003 !important; }
.tour-words-window > .window-body { display: flex; flex-direction: column; overflow: hidden; min-height: 0; }
.tour-words-window > .window-body > footer:empty { display: none; }
.tour-words-window .tour-words { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--space-grouped); }
.tour-words-window .tour-words [hidden] { display: none !important; }
.tour-words-window .tour-words p { margin: 0; }
.tour-words-window .tour-words-stop { font-size: var(--font-size-small); color: var(--color-text-disabled); overflow-wrap: anywhere; }
.tour-words-window .tour-words-field { display: flex; flex-direction: column; gap: calc(var(--space-grouped) / 2); }
.tour-words-window .tour-words-field > input { font-size: max(15px, calc(1.15 * var(--font-size))); }
.tour-words-window .tour-words-text { flex: 1; min-height: 0; }
.tour-words-window .tour-words-text > textarea { flex: 1; min-height: 8em; resize: none; font-size: max(15px, calc(1.15 * var(--font-size))); line-height: 1.5; white-space: pre-wrap; overflow-y: auto; }
.tour-words-window .tour-words > footer { display: flex; flex-direction: column; gap: calc(var(--space-grouped) / 2); min-height: 1.4em; font-size: var(--font-size-small); }
.tour-words-window .tour-words-status { color: var(--color-text-disabled); }
.tour-words-window .tour-words-alert { color: var(--color-error); overflow-wrap: anywhere; white-space: pre-wrap; }
.affordances-point[data-leaving] { animation: tutorial-point-out var(--tutorial-point-leave-duration) var(--tutorial-point-leave-easing) both; }
.affordances-point .affordance[data-affordance] {
outline: calc(2 * var(--affordance-line)) solid rgb(from var(--point-tint, transparent) r g b / 1);
outline-offset: calc(2 * var(--affordance-line));
background: linear-gradient(var(--point-tint, transparent) 0 0), linear-gradient(var(--point-tint, transparent) 0 0), var(--point-tint, transparent);
box-shadow: inset 0 0 0 calc(2 * var(--affordance-line)) var(--point-tint, transparent);
animation:
tutorial-point-in var(--tutorial-point-duration) var(--tutorial-point-easing) calc(var(--tutorial-point-delay) + var(--point-order, 0) * var(--tutorial-point-stagger)) both,
tutorial-beckon var(--tutorial-point-beckon) ease-in-out calc(var(--tutorial-point-delay) + var(--point-order, 0) * var(--tutorial-point-stagger) + var(--tutorial-point-duration)) var(--tutorial-point-beckons);
}
.affordances-point .affordance[data-affordance="press"] { --point-tint: var(--affordance-press); }
.affordances-point .affordance[data-affordance="type"] { --point-tint: var(--affordance-type); }
.affordances-point .affordance[data-affordance="drag"] { --point-tint: var(--affordance-drag); }
.affordances-point .affordance[data-affordance="resize"] { --point-tint: var(--affordance-resize); }
@keyframes tutorial-point-in { from { opacity: 0; transform: scale(var(--tutorial-point-scale)); } }
@keyframes tutorial-point-out { to { opacity: 0; } }
@keyframes tutorial-beckon { 50% { opacity: var(--tutorial-point-dim); } }
@media (prefers-reduced-motion: reduce) {
.tutorial-coach {
--tutorial-enter-distance: 0px; --tutorial-enter-scale: 1; --tutorial-turn-distance: 0px; --tutorial-chapter-distance: 0px;
--tutorial-press-scale: 1; --tutorial-move-duration: 0ms; --tutorial-meter-duration: 0ms;
}
.tutorial-coach [data-done] > .tutorial-check::before, .tutorial-coach [data-done] > .tutorial-check > i { animation-name: tutorial-check-fade; }
.affordances-point .affordance[data-affordance] { animation: tutorial-point-fade var(--tutorial-point-duration) ease-out calc(var(--tutorial-point-delay) + var(--point-order, 0) * var(--tutorial-point-stagger)) both; }
}
@keyframes tutorial-point-fade { from { opacity: 0; } }
@media (max-width: 600px) {
.tutorial-coach {
left: calc(var(--space) + env(safe-area-inset-left)); right: calc(var(--space) + env(safe-area-inset-right));
bottom: calc(var(--space) + env(safe-area-inset-bottom)); width: auto; max-height: 60dvh;
display: flex; flex-direction: column; transform-origin: 50% 100%;
}
.tutorial-coach > .window-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.tutorial-coach > .title-bar { touch-action: auto; }
.tutorial-coach .tutorial-tools, .tutorial-coach .tutorial-moves { display: contents; }
.tutorial-coach .window-body footer button { flex: 1; min-height: 44px; touch-action: manipulation; }
.tutorial-coach .tutorial-strip > * { min-height: 44px; touch-action: manipulation; }
.tutorial-coach[data-plain] { width: auto; }
}
.wm-quick { position: absolute; z-index: 20003; display: flex; flex-direction: column; align-items: center; transform: translateX(-50%); }
.wm-quick-grip { width: 48px; min-width: 0; height: 6px; min-height: 0; padding: 0; border: 0; border-radius: 3px; background: var(--color-highlight); opacity: 0.7; }
.wm-quick-bar { display: none; gap: var(--space-grouped); padding: var(--space-grouped); background: var(--color-surface); border: var(--border-line); border-radius: var(--window-radius); box-shadow: var(--bevel-window); }
.wm-quick:hover .wm-quick-bar, .wm-quick:focus-within .wm-quick-bar { display: flex; }
.wm-quick[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { .desktop[data-wm-no-peek="true"] > .window { transition: none; } }
.window.wm-locked { min-width: 0; min-height: 0; }
.desktop > .window.wm-managed { min-width: 0; min-height: 0; }
.desktop > .window {
transform-origin: 0 0;
--arrange-travel: var(--window-arrange-travel);
--arrange-arrive: var(--window-arrange-arrive);
--arrange-leave: var(--window-arrange-leave);
--arrange-turn: var(--window-arrange-turn);
--arrange-stagger: var(--window-arrange-stagger);
--arrange-ease-move: var(--window-arrange-ease-move);
--arrange-ease-enter: var(--window-arrange-ease-enter);
--arrange-ease-exit: var(--window-arrange-ease-exit);
--arrange-scale: var(--window-arrange-scale);
}
.window {
box-sizing: border-box;
display: flex;
flex-direction: column;
padding: var(--window-padding);
color: var(--color-text);
background: var(--color-surface);
border: var(--window-border-width) solid var(--window-border-color);
border-radius: var(--window-radius);
box-shadow: var(--bevel-window);
}
.window-edges {
position: absolute;
inset: calc(-1 * var(--window-border-width));
z-index: 1;
pointer-events: none;
}
.window[role="dialog"] > .window-edges {
inset: calc(-1 * var(--dialog-border-width));
}
.window-edges > [data-edge] {
position: absolute;
pointer-events: auto;
}
.window-edges > [data-edge="n"],
.window-edges > [data-edge="s"] {
left: var(--resize-corner-x);
right: var(--resize-corner-x);
height: calc(var(--resize-outset) + var(--resize-inset));
cursor: ns-resize;
}
.window-edges > [data-edge="e"],
.window-edges > [data-edge="w"] {
top: var(--resize-corner-y);
bottom: var(--resize-corner-y);
width: calc(var(--resize-outset) + var(--resize-inset));
cursor: ew-resize;
}
.window-edges > [data-edge="n"] { top: calc(-1 * var(--resize-outset)); }
.window-edges > [data-edge="s"] { bottom: calc(-1 * var(--resize-outset)); }
.window-edges > [data-edge="w"] { left: calc(-1 * var(--resize-outset)); }
.window-edges > [data-edge="e"] { right: calc(-1 * var(--resize-outset)); }
.window-edges > [data-edge="nw"],
.window-edges > [data-edge="ne"],
.window-edges > [data-edge="sw"],
.window-edges > [data-edge="se"] {
width: calc(var(--resize-outset) + var(--resize-corner-x));
height: calc(var(--resize-outset) + var(--resize-corner-y));
}
.window-edges > [data-edge="nw"] {
top: calc(-1 * var(--resize-outset));
left: calc(-1 * var(--resize-outset));
clip-path: polygon(0 0, 100% 0, 100% calc(var(--resize-outset) + var(--resize-inset) - 0.01px), calc(var(--resize-outset) + var(--resize-inset) - 0.01px) calc(var(--resize-outset) + var(--resize-inset) - 0.01px), calc(var(--resize-outset) + var(--resize-inset) - 0.01px) 100%, 0 100%);
cursor: nwse-resize;
}
.window-edges > [data-edge="ne"] {
top: calc(-1 * var(--resize-outset));
right: calc(-1 * var(--resize-outset));
clip-path: polygon(0 0, 100% 0, 100% 100%, calc(100% - var(--resize-outset) - var(--resize-inset)) 100%, calc(100% - var(--resize-outset) - var(--resize-inset)) calc(var(--resize-outset) + var(--resize-inset) - 0.01px), 0 calc(var(--resize-outset) + var(--resize-inset) - 0.01px));
cursor: nesw-resize;
}
.window-edges > [data-edge="sw"] {
bottom: calc(-1 * var(--resize-outset));
left: calc(-1 * var(--resize-outset));
clip-path: polygon(0 0, calc(var(--resize-outset) + var(--resize-inset) - 0.01px) 0, calc(var(--resize-outset) + var(--resize-inset) - 0.01px) calc(100% - var(--resize-outset) - var(--resize-inset)), 100% calc(100% - var(--resize-outset) - var(--resize-inset)), 100% 100%, 0 100%);
cursor: nesw-resize;
}
.window-edges > [data-edge="se"] {
bottom: calc(-1 * var(--resize-outset));
right: calc(-1 * var(--resize-outset));
clip-path: polygon(calc(100% - var(--resize-outset) - var(--resize-inset)) 0, 100% 0, 100% 100%, 0 100%, 0 calc(100% - var(--resize-outset) - var(--resize-inset)), calc(100% - var(--resize-outset) - var(--resize-inset)) calc(100% - var(--resize-outset) - var(--resize-inset)));
cursor: nwse-resize;
}
.window:is([data-flush~="e"], [data-flush~="s"]) > .window-edges > [data-edge="se"],
.window:is([data-flush~="w"], [data-flush~="s"]) > .window-edges > [data-edge="sw"] {
clip-path: none;
}
.window > .grip {
position: absolute;
right: calc(var(--grip-offset) - var(--window-border-width));
bottom: calc(var(--grip-offset) - var(--window-border-width));
z-index: 2;
width: var(--grip-size);
height: var(--grip-size);
background-image: var(--icon-grip);
background-position: right bottom;
background-repeat: no-repeat;
cursor: nwse-resize;
}
.window[role="dialog"] > .grip {
right: calc(var(--grip-offset) - var(--dialog-border-width));
bottom: calc(var(--grip-offset) - var(--dialog-border-width));
}
.title-bar {
box-sizing: border-box;
display: flex;
flex: none;
align-items: center;
gap: var(--title-bar-gap);
height: var(--title-bar-height);
margin: var(--title-bar-margin);
padding: var(--title-bar-padding);
color: var(--title-bar-text);
background: var(--title-bar-background);
border-bottom: var(--title-bar-border);
font-family: var(--title-bar-font);
font-size: var(--title-bar-font-size);
font-weight: var(--title-bar-font-weight);
-webkit-user-select: none;
user-select: none;
}
.title-bar.inactive {
color: var(--title-bar-inactive-text);
background: var(--title-bar-inactive-background);
}
.title-bar > .title-bar-icon.icon-image {
display: var(--title-icon-display);
flex: none;
width: var(--title-icon-size);
height: var(--title-icon-size);
margin: var(--title-icon-margin);
font-size: var(--title-icon-size);
}
.title-bar-text {
position: relative;
flex: var(--title-text-flex);
min-width: 0;
margin: var(--title-text-margin);
padding: var(--title-text-padding);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
text-align: var(--title-text-align);
background: var(--title-text-background);
letter-spacing: 0;
cursor: default;
}
.title-bar-controls {
display: var(--title-controls-display);
flex: none;
gap: var(--title-controls-gap);
}
.title-bar-controls button {
position: relative;
z-index: 2;
box-sizing: border-box;
display: block;
width: var(--title-control-width);
min-width: 0;
height: var(--title-control-height);
min-height: 0;
padding: 0;
background-color: var(--title-control-face);
background-position: center;
background-repeat: no-repeat;
border: var(--title-control-border);
border-radius: var(--title-control-radius);
box-shadow: var(--title-control-bevel);
}
.title-bar-controls button:not(:disabled):active:where(:hover, :not(:active > *)) {
padding: 0;
background-color: var(--title-control-face);
background-position: var(--title-control-pressed-position);
box-shadow: var(--title-control-pressed-bevel);
}
.title-bar-controls button:focus-visible {
outline: none;
}
.title-bar.inactive .title-bar-controls button {
visibility: var(--title-controls-inactive-visibility);
}
.title-bar-controls button[data-control=minimize] { order: var(--title-minimize-order); background-image: var(--icon-minimize); }
.title-bar-controls button[data-control=maximize] { order: var(--title-maximize-order); background-image: var(--icon-maximize); }
.title-bar-controls button[data-control=maximize]:disabled { background-image: var(--icon-maximize-disabled); }
.title-bar-controls button[data-control=restore] { order: var(--title-maximize-order); background-image: var(--icon-restore); }
.title-bar-controls button[data-control=help] { order: var(--title-help-order); background-image: var(--icon-help); }
.title-bar-controls button[data-control=flip] { order: var(--title-flip-order); background-image: var(--icon-flip); }
.title-bar-controls button[data-control=close] {
order: var(--title-close-order);
margin-left: var(--title-close-gap);
background-image: var(--icon-close);
}
.title-bar-controls button[data-control=close]:not(:disabled):active:where(:hover, :not(:active > *)) {
background-image: var(--icon-close-active);
}
.window-body {
margin: var(--window-body-margin);
}
.window-body > footer {
display: flex;
justify-content: var(--dialog-footer-justify);
gap: var(--dialog-footer-button-gap);
margin-top: var(--dialog-footer-gap);
}
.window[role="dialog"] {
border: var(--dialog-border-width) solid var(--dialog-border-color);
outline: var(--dialog-outline);
outline-offset: var(--dialog-outline-offset);
box-shadow: var(--bevel-dialog);
}
.window[data-window-motion="opening"],
.window[data-window-motion="restoring"] { transform-origin: 50% 50%; }
.window[data-window-motion="opening"] { animation: window-open 160ms cubic-bezier(.32, .72, 0, 1); }
.window[role="dialog"][data-window-motion="opening"] { animation: dialog-open 180ms ease-out; }
.window[data-window-motion="restoring"] { animation: window-restore 140ms ease-out; }
[data-motion="high"] .window[data-window-motion="opening"] { animation: window-open-high 220ms cubic-bezier(.32, .72, 0, 1); }
[data-motion="high"] .window[role="dialog"][data-window-motion="opening"] { animation: dialog-open-high 220ms cubic-bezier(.32, .72, 0, 1); }
[data-motion="high"] .window[data-window-motion="restoring"] { animation: window-restore-high 180ms cubic-bezier(.32, .72, 0, 1); }
@keyframes window-open { from { opacity: 0; scale: 0.985; } }
@keyframes dialog-open { from { opacity: 0; scale: 0.97; } }
@keyframes window-restore { from { opacity: 0; } }
@keyframes window-open-high { from { opacity: 0; scale: 0.96; } 70% { opacity: 1; scale: 1.003; } to { scale: 1; } }
@keyframes dialog-open-high { from { opacity: 0; scale: 0.95; } 70% { opacity: 1; scale: 1.003; } to { scale: 1; } }
@keyframes window-restore-high { from { opacity: 0; scale: 0.96; } }
.window[data-window-motion="closing"] { transform-origin: 50% 50%; animation: window-close 100ms ease-in forwards; }
.window[data-window-motion="minimizing"] { animation: window-minimize 110ms ease-in forwards; }
[data-motion="high"] .window[data-window-motion="minimizing"] { transform-origin: 50% 50%; animation: window-minimize-high 140ms ease-in forwards; }
@keyframes window-close { to { opacity: 0; scale: 0.99; } }
@keyframes window-minimize { to { opacity: 0; } }
@keyframes window-minimize-high { to { opacity: 0; scale: 0.96; } }
.window.about-sys0 { width: var(--about-width); }
.about-summary { display: grid; justify-items: center; gap: var(--space-grouped); text-align: center; }
.about-summary > .icon-image { --icon-size: var(--about-icon-size); margin-block: var(--space-grouped); }
.about-summary h2 { margin: 0; font-family: var(--title-bar-font); font-size: var(--about-title-size); }
.about-version { display: block; margin-top: var(--space-grouped); font: normal var(--font-size) var(--font-ui); }
.about-build { font-size: var(--font-size-small); }
.window.about-sys0 > .window-body > footer { justify-content: center; }
.status-bar {
display: flex;
flex: none;
justify-content: var(--status-bar-justify);
gap: var(--status-bar-gap);
margin: 0;
padding: var(--status-bar-padding);
background: var(--color-surface);
border-top: var(--status-bar-border);
}
.status-bar > * {
flex: var(--status-field-flex);
margin: 0;
padding: var(--status-field-padding);
border: var(--status-field-border);
box-shadow: var(--bevel-status);
}
[role="toolbar"] {
display: flex;
flex: none;
align-items: center;
gap: var(--space-grouped);
padding: var(--toolbar-padding);
background: var(--color-surface);
border-bottom: var(--toolbar-border);
}
:where([role="group"]:has(> button[aria-pressed])) {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: var(--segment-gap);
}
:where([role="group"][aria-orientation="vertical"]:has(> button[aria-pressed])) {
flex-direction: column;
align-items: flex-start;
}
:where([role="toolbar"] > [role="group"]:not(:first-child), [role="toolbar"] > [role="group"] + *) {
margin-inline-start: calc(var(--space) - var(--space-grouped));
}
.vertical-bar {
flex: none;
width: var(--vertical-bar-width);
height: var(--vertical-bar-height);
margin: var(--vertical-bar-margin);
background: var(--color-surface);
border: var(--button-border);
box-shadow: var(--bevel-vertical-bar);
}
sys0-component-studio { display:flex; flex-direction:column; min-height:0; overflow:auto; gap:var(--space); padding:var(--space); }
sys0-component-studio [hidden] { display:none !important; }
sys0-component-studio p { max-inline-size:65ch; }
.sunken-panel {
box-sizing: border-box;
overflow: auto;
color: var(--field-text);
background: var(--color-canvas);
border: var(--sunken-panel-border);
border-image: var(--sunken-panel-border-image);
}
.field-border,
.field-border-disabled {
padding: 2px;
background: var(--well-background);
border: var(--well-border);
box-shadow: var(--bevel-well);
}
.field-border-disabled {
background: var(--field-disabled-background);
}
.status-field-border {
padding: 1px;
background: var(--color-surface);
border: var(--status-field-border);
box-shadow: var(--bevel-status);
}
.instrument-body {
box-sizing: border-box; padding: var(--space);
background: var(--instrument-case); color: var(--instrument-legend); border: var(--instrument-border);
border-radius: var(--instrument-radius); box-shadow: var(--instrument-case-shadow); font-family: var(--instrument-font);
}
.instrument-marking { color: var(--instrument-legend); font-family: var(--instrument-font); }
.instrument-lcd {
box-sizing: border-box; padding: var(--space); text-align: right;
background: var(--instrument-lcd); color: var(--instrument-ink); border: var(--instrument-lcd-border);
border-radius: var(--instrument-lcd-radius); box-shadow: var(--instrument-lcd-shadow);
}
button.instrument-key {
background: var(--instrument-key); color: var(--instrument-key-ink); border: var(--instrument-key-border);
border-radius: var(--instrument-key-radius); box-shadow: var(--instrument-key-shadow); font-family: var(--instrument-font);
font-weight: var(--instrument-key-weight); text-shadow: var(--instrument-key-text-shadow); line-height: 1;
text-align: center; letter-spacing: normal;
min-width: 0;
}
button.instrument-key[data-tone="operator"], button.instrument-key[data-tone="utility"] {
background: var(--instrument-function); color: var(--instrument-function-ink); text-shadow: var(--instrument-function-text-shadow);
}
button.instrument-key[data-tone="clear"] { background: var(--instrument-clear); color: var(--instrument-key-ink); }
button.instrument-key:hover { filter: var(--instrument-hover); }
button.instrument-key:is(:active:hover, [data-ui-pressed]) { box-shadow: var(--instrument-key-down); padding: 0; }
button.instrument-key:focus-visible { outline: var(--instrument-focus); outline-offset: 2px; }
.instrument-solar { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-grouped); padding: var(--space-grouped); box-sizing: border-box; background: var(--instrument-solar-well); border: var(--instrument-solar-border); border-radius: var(--instrument-lcd-radius); box-shadow: var(--instrument-solar-shadow); }
.instrument-cell { background: var(--instrument-cell); border: var(--instrument-cell-border); }
.audio-wood { background:var(--audio-wood); border:var(--audio-wood-edge); border-radius:0; box-shadow:var(--audio-wood-shadow); font-family:var(--audio-font); color:var(--audio-ink); }
.audio-enamel { background:var(--audio-enamel); color:var(--audio-ink); border:var(--audio-panel-edge); box-shadow:var(--audio-panel-shadow); font-family:var(--audio-font); }
.audio-metal { background:var(--audio-metal); color:var(--audio-ink); box-shadow:var(--audio-metal-shadow); font-family:var(--audio-font); }
.audio-paper { background:var(--audio-paper); color:var(--audio-ink); box-shadow:var(--audio-paper-shadow); }
.audio-charcoal { background:var(--audio-charcoal); box-shadow:var(--audio-charcoal-shadow); }
.audio-knob-face { background:var(--audio-knob-face); box-shadow:var(--audio-knob-face-shadow); }
.audio-needle { background:var(--audio-ink); }
.audio-pointer { background:var(--audio-pointer); border-radius:2px; box-shadow:var(--audio-pointer-shadow); }
.audio-dial:focus-within { outline:var(--instrument-focus); outline-offset:4px; }
.audio-glass { background:var(--audio-glass); color:var(--audio-display-ink); border-radius:var(--audio-radius); box-shadow:var(--audio-glass-shadow); font-family:var(--audio-font); }
.audio-indicator { background:var(--audio-lamp-off); box-shadow:var(--audio-lamp-shadow); }
.audio-indicator.on { background:var(--audio-lamp-on); }
button.audio-button { background:var(--audio-charcoal); color:var(--audio-pointer); box-shadow:var(--audio-charcoal-shadow); border:var(--audio-panel-edge); font-family:var(--audio-font); text-shadow:none; }
button.audio-button:hover { filter:var(--instrument-hover); }
button.audio-button:focus-visible { outline:var(--instrument-focus); outline-offset:3px; }
button.audio-button:active:hover { box-shadow:var(--audio-pointer-shadow); }
[role="alert"] {
padding: var(--space-grouped) var(--space);
color: var(--color-error);
background: var(--alert-background);
border: var(--alert-border);
box-shadow: var(--bevel-alert);
white-space: pre-wrap;
}
[role="tooltip"] {
position: absolute;
z-index: 3000;
padding: var(--tooltip-padding);
color: var(--tooltip-text);
background: var(--tooltip-background);
border: var(--tooltip-border);
box-shadow: var(--tooltip-shadow);
white-space: nowrap;
}
.has-tooltip {
position: relative;
}
.has-tooltip > [role="tooltip"] {
top: 100%;
left: 0;
width: max-content;
max-width: var(--tooltip-width);
white-space: normal;
visibility: hidden;
pointer-events: none;
}
.has-tooltip:hover:not(:active) > [role="tooltip"] {
visibility: visible;
transition: visibility 0s var(--tooltip-delay);
}
.sys0-pill {
display: inline-block;
margin: 0 1px;
padding: 0 6px;
font-size: 0.9em;
line-height: 1.25;
white-space: nowrap;
color: var(--pill-text);
background: var(--pill-background);
border: var(--pill-border);
border-radius: var(--pill-radius);
-webkit-user-select: all;
user-select: all;
}
.sys0-pill.missing {
opacity: 0.45;
}
.chat-chip {
display: inline-flex;
max-width: min(100%, 24em);
box-sizing: border-box;
vertical-align: bottom;
cursor: default;
}
.chat-chip > b { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: pre; }
.chat-chip > b { font-weight: 600; }
.chat-chip:hover { outline: 1px solid var(--color-highlight); }
.chat { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: var(--space-grouped); padding: var(--space-grouped); overflow: hidden; background: var(--color-surface); }
.chat-reading { flex: 1; min-height: 0; overflow: auto; }
.chat-reading > .chat-log { flex: none; overflow: visible; }
.chat-above { flex: none; min-width: 0; padding-block-start: var(--space-grouped); border-block-start: var(--border-line); }
.chat-above:not(:has(> :not([hidden]))) { display: none; }
.chat-draft { flex: none; min-width: 0; display: flex; flex-direction: column; gap: var(--space-grouped); margin: 0; padding: 0; border: 0; font-size: var(--font-size-small); }
.chat-draft[hidden] { display: none; }
.chat-draft-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-grouped); min-width: 0; }
.chat-draft-state { margin: 0; font-weight: bold; white-space: nowrap; }
.chat-draft-state > .chat-diffstat { margin-inline-start: 2px; font-weight: normal; font-variant-numeric: tabular-nums; }
.chat-draft-actions { display: flex; gap: var(--space-grouped); margin-inline-start: auto; }
.chat-draft button { min-width: 0; font-size: inherit; }
.chat-draft-discard { padding: 0 4px; border: none; border-radius: 0; background: none; box-shadow: none; color: var(--color-text-disabled); text-shadow: none; }
.chat-draft-discard:hover:not(:disabled), .chat-draft-discard:active:not(:disabled) { color: var(--color-error); background: none; box-shadow: none; }
.chat-draft-error { display: flex; align-items: baseline; gap: 4px; margin: 0; max-height: 3lh; overflow: auto; overflow-wrap: anywhere; color: var(--color-error); }
.chat-failed-icon { flex: none; font-weight: bold; color: var(--color-error); }
.chat-failed-icon::before { content: var(--ai-icon-failed); }
.chat-session { margin: 0; font-size: var(--font-size-small); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.chat-attachments { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--space-grouped); overflow-x: auto; list-style: none; margin: 0; padding: 0; }
.chat-attachments[hidden] { display: none; }
.chat-attachments li { flex: none; display: flex; align-items: center; gap: var(--space-grouped); }
.chat-attachments img { max-width: calc(6 * var(--space-grouped)); max-height: calc(6 * var(--space-grouped)); object-fit: contain; }
.chat-image img { max-width: 100%; max-height: calc(36 * var(--space-grouped)); object-fit: contain; }
.chat-summary { flex: none; display: flex; flex-direction: column; gap: 2px; padding-bottom: var(--space-grouped); border-bottom: var(--border-line); }
.chat-usage, .chat-budget { margin: 0; padding: 0; list-style: none; font-size: var(--font-size-small); font-variant-numeric: tabular-nums; }
.chat-session, .chat-usage, .chat-budget { color: var(--color-text-disabled); }
.chat-budget > li { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--space-grouped); }
.chat-budget-value { min-width: 0; }
.chat-development { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-grouped); padding-block: var(--space-grouped); border-bottom: var(--border-line); font-size: var(--font-size-small); }
.chat-development[hidden] { display: none; }
.chat-development > [role="status"] { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.chat-development[data-status="failed"] > [role="status"] { color: var(--color-error); }
.chat-development > button { flex: none; min-width: 0; font-size: inherit; }
.chat-budget [aria-invalid="true"] { color: var(--color-error); }
.chat-budget button { min-width: 0; padding: 0 4px; font-size: inherit; }
.chat-budget-form { border: var(--border-line); padding: var(--space-grouped); font-size: var(--font-size-small); }
.chat-budget-form[hidden] { display: none; }
.chat-budget-form p { margin: 0 0 var(--space-grouped); }
.chat-budget-form label { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.chat-budget-form input { width: 100%; box-sizing: border-box; }
.chat-budget-form .field-row { gap: var(--space-grouped); }
.chat-budget-form .field-row + .field-row { justify-content: flex-end; margin-top: var(--space-grouped); }
.chat-log { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: var(--space); overflow-x: hidden; overflow-y: auto; margin: 0; padding: var(--space-grouped) 0; list-style: none; }
.chat-log li { margin: 0; white-space: pre-wrap; word-break: break-word; }
.chat-log .said { width: fit-content; max-width: 92%; padding: var(--space-grouped) var(--space); border: var(--well-border); border-radius: var(--groupbox-radius); background: var(--color-surface); }
.chat-log .said.user { align-self: flex-end; font-weight: bold; color: var(--color-highlight-text); background: var(--color-highlight); border-color: transparent; }
.chat-log .said.assistant { align-self: stretch; max-width: none; padding: 0; border: 0; border-radius: 0; background: none; }
.chat-log .said.sys0 { align-self: center; padding: 0; border: 0; font-size: var(--font-size-small); font-style: italic; color: var(--color-text-disabled); background: none; }
.chat-log .chat-md { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.chat-log .chat-md > :first-child { margin-top: 0; }
.chat-log .chat-md > :last-child { margin-bottom: 0; }
.chat-log .chat-md :is(p, ul, ol, pre, blockquote, table, hr) { margin: 0 0 var(--space-grouped); }
.chat-log .chat-md :is(h1, h2, h3, h4) { margin: var(--space-grouped) 0 2px; font-size: inherit; font-weight: bold; }
.chat-log .chat-md :is(ul, ol) { padding-left: 1.5em; }
.chat-log .chat-md li { white-space: normal; }
.chat-log .chat-md li > :is(ul, ol) { margin: 0; }
.chat-log .chat-md code { font-family: var(--font-mono); font-size: var(--font-size-small); padding: 0 0.25em; background: var(--color-canvas); border: var(--border-line); }
.chat-log .chat-md pre { max-width: 100%; box-sizing: border-box; overflow-x: auto; padding: var(--space-grouped); border: var(--border-line); background: var(--color-canvas); white-space: pre; }
.chat-log .chat-md pre code { padding: 0; border: 0; background: none; font-size: inherit; overflow-wrap: normal; }
.chat-log .chat-md blockquote { padding-left: var(--space); border-left: var(--border-line); color: var(--color-text-disabled); }
.chat-log .chat-md .chat-md-table { max-width: 100%; overflow-x: auto; }
.chat-log .chat-md th, .chat-log .chat-md td { padding: 2px var(--space-grouped); text-align: left; }
.chat-log .agent { margin: var(--space-grouped) 0 calc(-1 * var(--space-grouped)); font-size: var(--font-size-small); font-weight: bold; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-disabled); }
.chat-log .said.task { align-self: stretch; padding: var(--space-grouped); font-size: var(--font-size-small); border-left: var(--border-line); border-top: 0; border-right: 0; border-bottom: 0; border-radius: 0; background: none; }
.chat-log .chat-tool + .chat-tool { margin-top: calc(var(--space-grouped) - var(--space)); }
.chat-tool-head { display: flex; align-items: center; gap: var(--space-grouped); width: 100%; min-width: 0; margin: 0; padding: 2px 0; border: none; border-radius: 0; background: none; box-shadow: none; color: var(--color-text-disabled); font: inherit; text-align: left; white-space: nowrap; }
button.chat-tool-head:hover, .chat-tool-head[aria-expanded="true"], .chat-log .chat-tool[aria-busy="true"] .chat-tool-head { color: var(--color-text); }
.chat-tool-icon { flex: none; width: 1em; height: 1em; background: currentColor; -webkit-mask: var(--icon-chat-tool) center / contain no-repeat; mask: var(--icon-chat-tool) center / contain no-repeat; }
[data-icon="shell"] > .chat-tool-head > .chat-tool-icon { -webkit-mask-image: var(--icon-chat-shell); mask-image: var(--icon-chat-shell); }
[data-icon="read"] > .chat-tool-head > .chat-tool-icon { -webkit-mask-image: var(--icon-chat-read); mask-image: var(--icon-chat-read); }
[data-icon="edit"] > .chat-tool-head > .chat-tool-icon { -webkit-mask-image: var(--icon-chat-edit); mask-image: var(--icon-chat-edit); }
[data-icon="search"] > .chat-tool-head > .chat-tool-icon { -webkit-mask-image: var(--icon-chat-search); mask-image: var(--icon-chat-search); }
[data-icon="task"] > .chat-tool-head > .chat-tool-icon { -webkit-mask-image: var(--icon-chat-task); mask-image: var(--icon-chat-task); }
[data-icon="thinking"] > .chat-tool-head > .chat-tool-icon { -webkit-mask-image: var(--icon-chat-thinking); mask-image: var(--icon-chat-thinking); }
button.chat-tool-head:hover > .chat-tool-icon, .chat-tool-head[aria-expanded="true"] > .chat-tool-icon { -webkit-mask-image: var(--icon-chat-open); mask-image: var(--icon-chat-open); }
.chat-tool-head[aria-expanded="true"] > .chat-tool-icon { transform: rotate(90deg); }
.chat-log .chat-tool[aria-invalid="true"] .chat-tool-icon { background: var(--color-error); }
.chat-tool-name { flex: none; }
.chat-tool-about { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.chat-log .chat-tool[aria-busy="true"] .chat-tool-head > span:not(.chat-tool-icon) { animation: chat-breathe 1.6s ease-in-out infinite; }
@keyframes chat-breathe { 50% { opacity: 0.45; } }
.chat-tool-detail pre { margin: var(--space-grouped) 0 0 calc(1em + var(--space-grouped)); padding: var(--space-grouped); border: var(--border-line); max-height: 200px; overflow: auto; font-family: var(--font-mono); font-size: var(--font-size-small); white-space: pre-wrap; word-break: break-all; background: var(--color-canvas); }
.chat-tool-detail pre.chat-thought { font-family: inherit; font-size: inherit; word-break: normal; color: var(--color-text-disabled); }
.chat-tool-detail[hidden] { display: none; }
.chat-turn-footer, .chat-activity { display: flex; align-items: center; gap: var(--space-grouped); font-size: var(--font-size-small); color: var(--color-text-disabled); }
.chat-turn-copy, .chat-turn-fork { flex: none; width: 1.6em; height: 1.6em; min-width: 0; margin: 0; padding: 0; border: none; border-radius: 0; background: currentColor; box-shadow: none; -webkit-mask: var(--icon-chat-copy) center / 1.1em no-repeat; mask: var(--icon-chat-copy) center / 1.1em no-repeat; }
.chat-turn-fork { -webkit-mask-image: var(--icon-chat-fork); mask-image: var(--icon-chat-fork); }
.chat-turn-copy:hover, .chat-turn-fork:hover { background: var(--color-text); }
.chat-turn-copy:disabled { opacity: 0.4; }
.chat-elapsed { font-variant-numeric: tabular-nums; }
.chat-spinner { flex: none; box-sizing: border-box; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--color-text); border-right-color: transparent; animation: chat-spin 1s linear infinite; }
@media (prefers-reduced-motion: reduce) {
.chat-spinner, .chat-log .chat-tool[aria-busy="true"] .chat-tool-head > span { animation: none; }
}
.chat-diff ins, .chat-diff del, .chat-diff span { display: block; text-decoration: none; }
.chat-diff del { color: var(--color-error); }
.chat-track { display: flex; flex-direction: column; gap: 2px; font-size: var(--font-size-small); }
.chat-track[hidden] { display: none; }
.chat-pills { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-grouped); }
.chat-pill { display: inline-flex; align-items: center; gap: 6px; min-width: 0; padding: 0 6px; font-size: inherit; }
.chat-pill-segment, .chat-pill-panel li { display: inline-flex; align-items: center; gap: 4px; }
.chat-pill-panel { display: flex; flex-direction: column; margin: 0; padding: 2px 6px; list-style: none; border: var(--border-line); }
.chat-outcome { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-grouped); }
.chat-outcome:not(:has(> :not([hidden]))) { display: none; }
.chat-activity { margin: 0; min-height: 1.6em; }
.chat-activity[hidden] { display: none; }
.chat-activity[data-failed] { color: var(--color-error); }
.chat-recover { margin: 0; min-width: 0; font-size: var(--font-size-small); }
.chat-queued { margin: 0; padding: 0; list-style: none; max-height: 30%; overflow-y: auto; font-size: var(--font-size-small); }
.chat-queued[hidden] { display: none; }
.chat-queued li { display: flex; align-items: center; gap: var(--space-grouped); margin: 0 0 var(--space-grouped); color: var(--color-text-disabled); }
.chat-queued li > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-queued button { min-width: 0; }
.chat-form { flex: none; display: flex; flex-direction: column; gap: var(--space-grouped); padding: var(--space-grouped); border: var(--well-border); border-radius: var(--groupbox-radius); background: var(--color-surface); }
.chat-dock .chat-form { max-height: 60%; overflow: auto; box-sizing: border-box; }
.chat-form .rich-field { width: 100%; min-height: 64px; max-height: 12em; box-sizing: border-box; }
.chat-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-grouped); }
.chat-toolbar-actions { display: flex; flex: 0 0 auto; gap: var(--space-grouped); margin-inline-start: auto; }
.chat-model { flex: 0 1 auto; min-width: 0; max-width: 100%; }
.chat-model .ai-model-bar { width: auto; }
.chat-form select[hidden] { display: none; }
.component-scope { flex: none; position: relative; display: flex; flex-direction: column; gap: var(--space-grouped); }
.component-scope-header { display: flex; align-items: center; gap: var(--space-grouped); }
.component-scope-header > .component-scope-toggle { flex: 1; display: flex; align-items: center; gap: var(--space-grouped); }
.component-scope-toggle::after { content: ""; flex: none; width: 1em; height: 1em; margin-inline-start: auto; background: currentColor; opacity: 0.6; -webkit-mask: var(--icon-chat-open) center / contain no-repeat; mask: var(--icon-chat-open) center / contain no-repeat; transform: rotate(90deg); }
.component-scope-toggle[aria-expanded="true"]::after { transform: rotate(-90deg); }
.component-scope-header > .field-row { flex: none; white-space: nowrap; margin: 0; }
.component-scope-toggle { min-width: 0; max-width: 100%; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.component-scope [role=tree] { max-height: none; overflow: auto; margin: 0; padding: var(--space-grouped); border: var(--well-border); }
.component-scope [role=tree], .component-scope [role=group] { list-style: none; }
.component-scope [role=group] { padding-left: calc(3 * var(--space-grouped)); }
.component-scope [role=treeitem] { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: var(--space-grouped); }
.component-scope [role=treeitem] > [role=group] { grid-column: 1 / -1; margin: 0; }
.component-scope [role=treeitem] > input { margin: 0; }
.component-scope label { display: flex; align-items: center; gap: var(--space-grouped); }
.component-scope [aria-selected=true] > label { color: var(--color-highlight-text); background: var(--color-highlight); }
.component-scope-help { margin: 0; font-size: var(--font-size-small); text-wrap: pretty; }
.component-scope-gestures { font-size: var(--font-size-small); }
.component-scope-gestures > summary { cursor: default; color: var(--color-text-disabled); }
.component-scope-keys { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px var(--space); margin: var(--space-grouped) 0 0; }
.component-scope-keys > dt, .component-scope-keys > dd { margin: 0; }
.component-scope-keys kbd { font: inherit; white-space: nowrap; color: var(--color-text-disabled); }
.component-scope-panel .component-scope-actions > * + * { margin-left: 0; }
.component-scope-panel .component-scope-actions > .component-scope-entire { margin-inline-end: auto; }
.component-scope-panel { position: absolute; top: calc(100% + var(--space-grouped)); left: 0; z-index: 20; width: 100%; max-width: calc(100vw - 4 * var(--space-grouped)); box-sizing: border-box; padding: var(--space-grouped); display: flex; flex-direction: column; gap: var(--space-grouped); background: var(--color-surface); color: var(--color-text); border: var(--border-line); box-shadow: var(--menu-bevel); }
.component-scope-panel .field-row { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-grouped); margin: 0; }
.chat-dock .chat { container-type: size; }
.chat-model .ai-model-bar, .chat-model .ai-model-bar > .ai-model-model { min-width: 0; }
.chat-model .ai-model-bar > .ai-model-model > button { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@container (min-width: 380px) {
.chat-dock .chat-toolbar { flex-wrap: nowrap; }
}
@container (max-height: 400px) {
.chat-form .rich-field { min-height: calc(4 * var(--space-grouped)); }
.chat-toolbar { row-gap: 0; }
}
.file-dock > .window-body { container-type: size; }
.component-scope-panel { max-height: min(560px, calc(100cqh - 48px)); overflow: auto; }
.component-scope-panel [role=tree] { flex: 1; min-height: 0; }
.component-scope-panel > :not([role=tree]) { flex: none; }
sys0-shell > .desktop > .window.voice-window[role="dialog"] { width: min(520px, 90vw); max-width: 94vw; top: 8%; max-height: 84vh; display: flex; flex-direction: column; }
.voice-window > .window-body { min-height: 0; overflow: auto; }
.voice-controls .chat-log { max-height: 35vh; overflow: auto; }
.voice-controls { min-width: 0; }
.voice-listening-mode { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; }
sys0-shell > .desktop > .window.voice-window[role="dialog"]:has(.voice-jev:not([hidden])) { width: min(1120px, 94vw); }
sys0-shell > .desktop > .window.voice-window[role="dialog"]:has(.voice-evals:not([hidden])) { width: min(1120px, 94vw); }
.voice-controls > .field-row { justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.voice-controls > .field-row > * + * { margin-left: 0; }
.voice-controls > .field-row > button, .voice-jev form > button { min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.voice-controls [hidden] { display: none !important; }
.voice-jev textarea { width: 100%; box-sizing: border-box; resize: vertical; }
.voice-jev form { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; }
.voice-jev form > label { flex: 1 1 16em; min-width: 0; }
.voice-evals { margin: 12px 0; border: 1px solid currentColor; padding: 10px; }
.voice-eval-toolbar { display: flex; align-items: center; gap: 8px; }
.voice-eval-toolbar input { flex: 1; min-width: 120px; }
.voice-eval-message { min-height: 1em; }
.voice-eval-layout { display: grid; grid-template-columns: minmax(220px, 30%) minmax(0, 1fr); gap: 12px; max-height: 64vh; }
.voice-eval-list, .voice-eval-content { min-width: 0; overflow: auto; }
.voice-eval-session h3 { position: sticky; top: 0; background: inherit; padding: 4px 0; overflow-wrap: anywhere; }
.voice-eval-row { display: block; width: 100%; height: auto; text-align: left; white-space: normal; margin: 4px 0; }
.voice-eval-row strong, .voice-eval-row small { display: block; overflow-wrap: anywhere; }
.voice-eval-row[aria-current="true"] { outline: 2px solid currentColor; }
.voice-eval-detail-header h2 { overflow-wrap: anywhere; }
.voice-eval-section, .voice-eval-annotation { border-top: 1px solid currentColor; margin-top: 10px; padding-top: 8px; }
.voice-eval-revision { border-left: 3px solid currentColor; padding-left: 8px; margin: 8px 0; }
.voice-eval-revision p { white-space: pre-wrap; overflow-wrap: anywhere; }
.voice-eval-annotation label { display: block; margin: 8px 0; }
.voice-eval-annotation textarea { display: block; width: 100%; box-sizing: border-box; resize: vertical; }
.voice-eval-content pre { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 32vh; overflow: auto; }
.voice-eval-content audio { width: min(100%, 520px); }
.voice-resolvers { display:flex; flex-wrap:wrap; align-items:center; gap:10px; min-width:0; max-width:100%; box-sizing:border-box; margin:0; padding:4px 8px; }
.voice-resolvers legend { font-weight:bold; }
.voice-resolvers label { display:inline-flex; align-items:center; gap:4px; min-width:0; max-width:100%; white-space:normal; overflow-wrap:anywhere; }
.voice-resolvers input { flex-shrink:0; margin:0; }
.voice-filo-text { white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.8; padding:8px; border:1px solid currentColor; }
.voice-filo-word { display:inline; min-width:0; padding:0 1px; margin:0; border:0; border-radius:2px; font:inherit; line-height:inherit; }
.voice-filo-word[title] { text-decoration:underline dotted; text-underline-offset:3px; cursor:pointer; }
.voice-filo-evidence { min-height:1.4em; border-left:3px solid currentColor; padding-left:8px; }
.voice-filo-evidence small { display:block; opacity:.75; }
@media (max-width: 760px) { .voice-eval-layout { grid-template-columns: minmax(0, 1fr); max-height: none; } .voice-eval-list { max-height: 28vh; } }
.voice-search { margin-top: 12px; min-width: 0; }
.voice-attempt-navigation { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.voice-attempt-navigation select { min-width: 0; flex: 1 1 220px; }
.voice-attempt-header { margin: 12px 0; padding: 12px; border: 1px solid currentColor; background: var(--color-surface); }
.voice-attempt-header h3 { margin: 0; }
.voice-attempt-header .field-row { justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.voice-attempt-words { margin: 8px 0 0; font-size: 1.15em; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; }
.voice-search-meta { opacity: .75; font-size: .9em; }
.voice-search details, .voice-conversation, .voice-jev > details { margin: 12px 0; }
.voice-search summary { cursor: pointer; overflow-wrap: anywhere; }
.voice-search pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.voice-decisions { container-type: inline-size; display: grid; gap: var(--space); margin-block: var(--space); min-width: 0; }
.voice-decision-verdict { display: grid; gap: var(--space-grouped); padding-bottom: var(--space); border-bottom: var(--border-line); }
.voice-decision-verdict > * { margin: 0; }
.voice-decision-act { background: none; color: inherit; text-decoration: underline 2px; text-underline-offset: .2em; }
.voice-decision-outcome { overflow-wrap: anywhere; }
.voice-decision-outcome[data-state="blocked"] > strong, .voice-decision-outcome[data-state="failed"] > strong { color: var(--color-error); }
.voice-decision-cascade { display: grid; gap: var(--space-grouped); min-width: 0; }
.voice-decision-scale { display: flex; justify-content: space-between; margin-inline: calc(17em + 2 * var(--space-grouped)) calc(4.5em + var(--space-grouped)); color: var(--color-text-disabled); font-size: .85em; font-variant-numeric: tabular-nums; }
.voice-decision-stages { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-grouped); }
.voice-decision-stage { display: grid; grid-template-columns: 7.5em 9.5em minmax(0, 1fr) 4.5em; grid-template-areas: "name verdict track time"; column-gap: var(--space-grouped); align-items: center; min-width: 0; }
.voice-decision-stage > :first-child { grid-area: name; font-weight: bold; }
.voice-decision-stage > .voice-decision-word { grid-area: verdict; font-weight: normal; overflow-wrap: anywhere; }
.voice-decision-stage > .voice-decision-track { grid-area: track; }
.voice-decision-stage > .voice-decision-time { grid-area: time; }
.voice-decision-stage:is([data-state="not-reached"], [data-state="not-run"]) { color: var(--color-text-disabled); }
.voice-decision-stage[data-state="settled"] > .voice-decision-word { font-weight: bold; }
.voice-decision-stage:is([data-state="blocked"], [data-state="failed"]) > .voice-decision-word { color: var(--color-error); }
.voice-decision-track { position: relative; height: calc(var(--lanes, 1) * 7px + 7px); border-inline: var(--border-line); }
.voice-decision-span { position: absolute; inset-block: 0; background: color-mix(in oklch, var(--color-text) 8%, transparent); }
.voice-decision-stage[data-state="settled"] .voice-decision-span { background: color-mix(in oklch, var(--color-highlight) 30%, transparent); }
.voice-decision-bar { position: absolute; top: calc(var(--lane, 0) * 7px + 4px); height: 4px; min-width: 2px; background: color-mix(in oklch, var(--color-text) 55%, var(--color-surface)); cursor: pointer; }
.voice-decision-bar[data-state="running"] { background: var(--color-highlight); }
.voice-decision-bar[data-state="failed"] { background: var(--color-error); }
.voice-decision-bar[data-state="cancelled"] { background: color-mix(in oklch, var(--color-text) 25%, var(--color-surface)); }
.voice-decision-ladder { display: grid; gap: var(--space); min-width: 0; }
.voice-decision-section > h4 { margin: 0 0 var(--space-grouped); }
.voice-decision-section > div > div > p { margin: 0 0 var(--space-grouped); }
.voice-decision-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-grouped); min-width: 0; }
.voice-decision-row > .voice-decision-rows { margin-top: var(--space-grouped); padding-inline-start: var(--space); border-inline-start: var(--border-line); }
.voice-decision-row { display: grid; gap: 4px; min-width: 0; }
.voice-search .voice-decision-row details { margin: 0; }
.voice-decision-row > details > summary { overflow-wrap: anywhere; }
.voice-decision-row > details > summary > * { margin-inline-end: var(--space-grouped); }
.voice-decision-label small, .voice-decision-time, .voice-decision-options small, .voice-decision-detail, .voice-decision-tail > summary { color: var(--color-text-disabled); }
.voice-decision-value, .voice-decision-time { font-variant-numeric: tabular-nums; }
.voice-decision-time { font-size: .85em; }
.voice-decision-word { font-weight: bold; }
.voice-decision-row:is([data-state="blocked"], [data-state="failed"]) > details > summary > .voice-decision-word, .voice-decision-margin[data-state="blocked"] > strong, .voice-decision-facts > li[data-state="blocked"], .voice-decision-why { color: var(--color-error); }
.voice-decision-row > .voice-decision-meter { max-width: 32em; }
.voice-decision-meter { position: relative; height: .75em; min-width: 4em; box-sizing: border-box; border: var(--border-line); background: var(--color-canvas); }
.voice-decision-fill { position: absolute; inset-block: 0; inset-inline-start: 0; background: color-mix(in oklch, var(--color-text) 45%, var(--color-canvas)); }
.voice-decision-row[data-state="blocked"] > .voice-decision-meter > .voice-decision-fill { background: var(--color-error); }
.voice-decision-need, .voice-decision-lead { position: absolute; top: -4px; bottom: -4px; width: 0; margin-inline-start: -1px; border-inline-start: 2px solid var(--color-text); }
.voice-decision-lead { border-inline-start-style: dotted; }
.voice-decision-options { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 16em) minmax(4em, 24em) 3.5em 3.5em; justify-content: start; gap: 3px var(--space-grouped); align-items: center; }
.voice-decision-options > li { display: contents; }
.voice-decision-option { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.voice-decision-options > li > .voice-decision-value { text-align: end; }
.voice-decision-options > li[data-kept="true"] > .voice-decision-option { font-weight: bold; }
.voice-decision-options > li[data-kept="true"] .voice-decision-fill { background: var(--color-highlight); }
.voice-decision-options > li[data-none] > .voice-decision-option { font-style: italic; }
.voice-decision-margin, .voice-decision-detail, .voice-decision-why, .voice-decision-omitted { margin: 0; overflow-wrap: anywhere; }
.voice-decision-tail input[type="search"] { width: 100%; box-sizing: border-box; margin-block: var(--space-grouped); }
.voice-decision-facts { margin: 0; padding-inline-start: 1.2em; overflow-wrap: anywhere; }
.voice-decision-branches { display: grid; grid-template-columns: repeat(auto-fit, minmax(17em, 1fr)); gap: var(--space); }
.voice-decision-branch { container-type: inline-size; display: grid; gap: var(--space-grouped); align-content: start; min-width: 0; padding: var(--space-grouped); border: var(--border-line); }
.voice-decision-branch[data-verdict="won"] { outline: 2px solid var(--color-highlight); outline-offset: -2px; }
.voice-decision-branch > header { display: flex; flex-wrap: wrap; gap: var(--space-grouped); align-items: baseline; }
.voice-decision-branch > header > strong:first-child { flex: 1 1 auto; overflow-wrap: anywhere; }
.voice-decision-branch[data-verdict="died"] > header > .voice-decision-word { color: var(--color-error); }
.voice-decision-evidence { display: grid; gap: var(--space-grouped); min-width: 0; margin-block: var(--space-grouped); padding-inline-start: var(--space); border-inline-start: var(--border-line); }
.voice-decision-evidence p, .voice-decision-evidence blockquote, .voice-decision-request h5 { margin: 0; }
.voice-decision-evidence pre { max-height: 24em; overflow: auto; }
.voice-decision-request { display: grid; gap: var(--space-grouped); min-width: 0; }
.voice-decision-distribution { width: 100%; table-layout: fixed; }
.voice-decision-distribution td { overflow-wrap: anywhere; vertical-align: top; }
.voice-decision-distribution th:last-child { width: 7em; }
.voice-decision-events { list-style: none; margin: 0; padding: 0; }
@container (max-width: 34em) {
.voice-decision-stage { grid-template-columns: 7.5em minmax(0, 1fr) auto; grid-template-areas: "name verdict time" "track track track"; row-gap: 2px; }
.voice-decision-scale { margin-inline: 0; }
.voice-decision-options { grid-template-columns: minmax(4em, 1fr) 3.5em 3.5em; }
.voice-decision-option { grid-column: 1 / -1; }
}
.voice-timeline { margin-block: 1em; min-width: 0; }
.voice-timeline-outcome, .voice-timeline-evidence { border: 1px solid var(--color-text); padding: .75em; margin-block: .5em; }
.voice-timeline-outcome button { display: block; white-space: normal; text-align: left; margin-block: .25em; }
.voice-timeline-chart { padding: .5em 1em; border: 1px solid var(--color-text); }
.voice-timeline-scale { display: flex; justify-content: space-between; margin-left: 11em; font-variant-numeric: tabular-nums; }
.voice-timeline-lane h4 { margin: .75em 0 .25em; }
.voice-timeline-row { display: grid; grid-template-columns: 10em minmax(0,1fr); gap: .25em 1em; margin-block: .5em; }
.voice-timeline-caption { white-space: normal; text-align: left; padding: .25em; }
.voice-timeline-caption span { display: block; overflow-wrap: anywhere; }
.voice-timeline-track { position: relative; min-height: 2em; margin-inline: .5em; align-self: center; }
.voice-timeline-track::before { content: ""; position: absolute; top: 50%; width: 100%; border-top: 1px solid var(--color-text); opacity: .3; }
.voice-timeline-bar { position: absolute; top: 30%; height: 40%; min-width: 2px; background: var(--color-highlight); opacity: .45; }
.voice-timeline-marker { position: absolute; top: 25%; transform: translateX(-50%); min-width: 6px; width: 6px; height: 50%; min-height: 0; padding: 0; border: 1px solid var(--color-text); border-radius: 0; background: var(--color-text); box-shadow: none; }
.voice-timeline-marker[data-kind="executed"] { top: 0; height: 100%; width: 12px; background: var(--color-highlight); }
.voice-timeline-marker[data-kind="aborted"] { top: 0; height: 100%; width: 10px; background: var(--color-surface); border-style: dashed; }
.voice-timeline-duration { grid-column: 2; font-size: .85em; overflow-wrap: anywhere; }
.voice-timeline-events { width: 100%; table-layout: fixed; font-variant-numeric: tabular-nums; }
.voice-timeline-events th:nth-child(1), .voice-timeline-events th:nth-child(2) { width: 7em; }
.voice-timeline-events th:nth-child(3) { width: 10em; }
.voice-timeline-events td { vertical-align: top; overflow-wrap: anywhere; }
.voice-timeline-events button { white-space: normal; text-align: left; width: 100%; }
.voice-timeline-events tr[data-kind="executed"] { font-weight: bold; }
.voice-timeline-evidence { overflow-wrap: anywhere; }
@media (max-width: 700px) {
.voice-timeline-row { grid-template-columns: 6em minmax(0,1fr); }
.voice-timeline-scale { margin-left: 7em; font-size: .75em; }
.voice-timeline-events { font-size: .8em; }
.voice-timeline-events th:nth-child(1), .voice-timeline-events th:nth-child(2) { width: 4.5em; }
.voice-timeline-events th:nth-child(3) { width: 6em; }
}
.chat-work-graph { border-block: var(--border-line); padding: var(--space-grouped); flex: none; }
.chat-work-graph > summary { cursor: pointer; }
.chat-work-canvas { display: block; width: 100%; height: 22em; min-height: 12em; overflow: auto; }
.chat-work-evidence { max-height: 16em; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
.talk-list { margin: 0; padding: 0; list-style: none; overflow-y: auto; border: 0; box-shadow: none; background: transparent; }
.talk-list > [role="option"] { display: flex; align-items: center; gap: var(--space); padding: var(--space-grouped) var(--space); cursor: default; }
.talk-avatar { display: grid; place-items: center; flex: none; width: 2.4em; height: 2.4em; overflow: hidden; border: var(--border-line); border-radius: 50%; background: var(--color-surface); color: var(--color-text-disabled); font-weight: bold; }
.talk-avatar > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.talk-list > [role="option"][aria-selected="true"] .talk-avatar { color: var(--color-text); }
.talk-copy { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.talk-name, .talk-snippet { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.talk-name { font-weight: bold; }
.talk-snippet { font-size: var(--font-size-small); opacity: 0.7; }
.talk-time { flex: none; font-size: var(--font-size-small); opacity: 0.7; white-space: nowrap; }
.talk-log { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow-x: hidden; overflow-y: auto; margin: 0; padding: var(--space-grouped) 0; list-style: none; }
.talk-day { display: flex; align-items: center; gap: var(--space); margin: var(--space-grouped) var(--space); font-size: var(--font-size-small); color: var(--color-text-disabled); }
.talk-day::before, .talk-day::after { content: ""; flex: 1; border-top: var(--border-line); }
.talk-message { position: relative; display: flex; align-items: flex-start; gap: var(--space); margin-top: var(--space-grouped); padding: 0 var(--space); }
.talk-message.joined { margin-top: 0; padding-left: calc(var(--space) * 2 + 2.4em); }
.talk-body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.talk-head { display: flex; align-items: baseline; gap: var(--space); }
.talk-author { font-weight: bold; }
.talk-message.mine .talk-author { color: var(--color-link); }
.talk-head > .talk-time, .talk-message.joined > .talk-time { opacity: 0.7; }
.talk-message.joined > .talk-time { position: absolute; left: var(--space); visibility: hidden; }
.talk-message.joined:hover > .talk-time { visibility: visible; }
.talk-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; user-select: text; }
.talk-note { font-size: var(--font-size-small); color: var(--color-text-disabled); font-style: italic; }
.talk-message[aria-invalid="true"] .talk-text { color: var(--color-error); }
.talk-message[aria-busy="true"] { opacity: 0.6; }
.talk-form { display: flex; align-items: flex-end; gap: var(--space); flex: none; margin: 0; padding: var(--space); border-top: var(--border-line); }
.talk-form > textarea { flex: 1; min-width: 0; min-height: 3em; max-height: 10em; resize: none; }
.talk-thread { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; color: var(--color-text); background: var(--color-canvas); }
.talk-workspace { min-width: 0; min-height: 0; }
.talk-sidebar { background: var(--talk-sidebar); }
.talk-header { flex: none; display: flex; align-items: center; flex-wrap: wrap; gap: var(--talk-gap); padding: var(--talk-inset); border-bottom: var(--border-line); background: var(--talk-chrome); }
.talk-header :is(h1,h2,h3,p) { margin: 0; }
.talk-thread .talk-avatar, .talk-sidebar .talk-avatar { width: var(--talk-avatar-size); height: var(--talk-avatar-size); border-radius: var(--talk-avatar-radius); box-shadow: var(--talk-shadow); background: var(--talk-gloss), var(--color-surface); color: var(--color-text); }
.talk-thread .talk-log { overflow-anchor: none; padding-block: var(--talk-inset); background: var(--color-canvas); }
.talk-thread .talk-message { gap: var(--talk-gap); padding: 0 var(--talk-inset); margin-top: var(--talk-inset); }
.talk-thread .talk-message.mine { flex-direction: row-reverse; }
.talk-thread .talk-message > .talk-body { flex: 0 1 auto; align-items: flex-start; max-width: min(65ch, calc(100% - var(--talk-avatar-size) - var(--talk-gap))); }
.talk-thread .talk-message.mine > .talk-body { align-items: flex-end; }
.talk-thread .talk-head { gap: var(--talk-gap); margin-bottom: var(--space-grouped); color: var(--color-text-disabled); font-size: var(--font-size-small); }
.talk-thread .talk-author, .talk-thread .talk-message.mine .talk-author { color: inherit; font-weight: normal; }
.talk-thread .talk-message.joined { margin-top: var(--talk-gap); padding-left: calc(var(--talk-inset) + var(--talk-avatar-size) + var(--talk-gap)); }
.talk-thread .talk-message.mine.joined { padding-left: var(--talk-inset); padding-right: calc(var(--talk-inset) + var(--talk-avatar-size) + var(--talk-gap)); }
.talk-thread .talk-message.joined > .talk-body { max-width: min(65ch, calc(100% - var(--talk-gap))); }
.talk-thread .talk-message.joined > .talk-time { display: none; }
.talk-bubble { position: relative; box-sizing: border-box; max-width: 100%; margin: 0; padding: var(--talk-gap) var(--talk-inset); border: var(--talk-border); border-radius: var(--talk-radius); box-shadow: var(--talk-shadow); background: var(--talk-gloss), var(--talk-incoming); color: var(--talk-ink); line-height: 1.45; overflow-wrap: anywhere; user-select: text; }
.talk-message.mine > .talk-body > .talk-bubble { background: var(--talk-gloss), var(--talk-outgoing); }
.talk-bubble + .talk-bubble { margin-top: var(--talk-gap); }
.talk-message:not(.joined) > .talk-body > .talk-bubble::before { content: ""; position: absolute; width: var(--talk-gap); height: var(--talk-gap); top: var(--talk-gap); left: calc(var(--talk-gap) / -2 - 1px); transform: rotate(45deg); border-left: var(--talk-border); border-bottom: var(--talk-border); background: var(--talk-incoming); }
.talk-message.mine:not(.joined) > .talk-body > .talk-bubble::before { left: auto; right: calc(var(--talk-gap) / -2 - 1px); transform: rotate(225deg); background: var(--talk-outgoing); }
.talk-bubble > :first-child { margin-top: 0; }
.talk-bubble > :last-child { margin-bottom: 0; }
.talk-bubble :is(img,video) { max-width: 100%; height: auto; }
.talk-bubble pre { max-width: 100%; overflow-x: auto; white-space: pre; }
.talk-evidence { max-width: 100%; margin-block: var(--talk-gap); color: var(--color-text-disabled); font-size: var(--font-size-small); }
.talk-evidence > summary { cursor: pointer; }
.talk-evidence > pre { max-width: 100%; overflow: auto; white-space: pre-wrap; }
.talk-evidence[data-error] > summary { color: var(--color-error); }
.talk-compose, .talk-thread > .talk-form { flex: none; background: var(--talk-chrome); border-top: var(--border-line); }
.talk-compose > .talk-form { border-top: 0; }
.talk-empty { margin: auto; padding: var(--talk-inset); max-width: 32em; text-align: center; color: var(--color-text-disabled); }
.talk-empty h2, .talk-empty h3 { color: var(--color-text); }
.chat.talk-thread { gap: 0; padding: 0; }
.chat.talk-thread .chat-reading { background: var(--color-canvas); }
.chat.talk-thread .chat-log > .said.talk-message { align-self: stretch; width: auto; max-width: none; padding: 0 var(--talk-inset); border: 0; border-radius: 0; background: none; color: var(--color-text); font-weight: normal; }
.chat.talk-thread .chat-log > .said.talk-message > .talk-body { max-width: min(65ch, calc(100% - var(--talk-avatar-size) - var(--talk-gap))); }
.chat.talk-thread .chat-form { margin: 0; border-inline: 0; border-bottom: 0; border-radius: 0; background: var(--talk-chrome); }
.chat-threads { display: flex; flex-direction: column; gap: var(--space-grouped); min-width: 0; min-height: 0; margin: 0; padding: var(--space); overflow: hidden; background: color-mix(in srgb, var(--color-canvas) 42%, var(--color-surface)); border-right: var(--border-line); font-size: var(--font-size-small); }
.chat-threads[hidden] { display: none; }
.chat-threads-head { display: flex; align-items: center; gap: var(--space-grouped); font-weight: bold; }
.chat-threads-head > span { flex: 1; min-width: 0; }
.chat-threads-head button, .chat-thread-archived { min-width: 0; font-size: inherit; }
.chat-thread-archived { align-self: flex-start; }
.chat-thread-archived[hidden] { display: none; }
.chat-thread-list { flex: 1; min-height: 0; margin: 0; padding: 0; list-style: none; overflow-y: auto; }
.chat-thread-list > li[role="option"] { position: relative; display: grid; grid-template-columns: 12px minmax(0, 1fr) auto auto; align-items: center; gap: 6px; padding: 6px 8px; border-radius: var(--button-radius); cursor: default; }
.chat-thread-list > li[aria-selected="true"] { color: var(--color-highlight-text); background: var(--color-highlight); }
.chat-thread-list > li[aria-disabled="true"] { color: var(--color-text-disabled); }
.chat-thread-none { padding: 6px 8px; font-style: italic; color: var(--color-text-disabled); }
.chat-thread-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
input.chat-thread-title { width: 100%; box-sizing: border-box; font-size: inherit; }
@media (pointer: coarse) {
input.chat-thread-title { font-size: max(16px, 1em); }
}
.chat-thread-meta { font-variant-numeric: tabular-nums; white-space: nowrap; opacity: 0.8; }
.chat-diffstat ins, .chat-diffstat del { text-decoration: none; }
.chat-diffstat ins { color: var(--ai-status-done); }
.chat-diffstat del { color: var(--color-error); }
[aria-selected="true"] > .chat-diffstat :is(ins, del) { color: inherit; }
.chat-thread-menu { min-width: 0; padding: 0 4px; font-size: inherit; line-height: 1; }
@media (pointer: coarse) {
.chat-thread-menu { min-width: 44px; min-height: 44px; touch-action: manipulation; }
}
.chat-thread-list [role="menu"] { position: static; display: block; grid-column: 1 / -1; min-width: 0; }
.chat-status { justify-self: center; box-sizing: border-box; width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: 0.3; }
[data-state="running"] > .chat-status { width: 10px; height: 10px; opacity: 1; background: none; border: 2px solid var(--color-highlight); border-right-color: transparent; animation: chat-spin 1s linear infinite; }
[aria-selected="true"][data-state="running"] > .chat-status { border-color: currentColor; border-right-color: transparent; }
[data-state="failed"] > .chat-status { opacity: 1; background: var(--color-error); }
[data-state="attention"] > .chat-status { opacity: 1; background: var(--color-link); }
@keyframes chat-spin { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce) {
[data-state="running"] > .chat-status { animation: none; }
}
.band { margin: 0; min-width: 0; container-type: inline-size; }
.band-language { margin: 0; padding: var(--space); background: var(--color-canvas); border: var(--border-line); }
.band-language > figcaption { margin: 0 0 12px; }
.band-language h2 { margin: 0; font-size: var(--font-size); line-height: var(--line-height); }
.band-about { margin: 2px 0 0; font-size: var(--font-size-small); color: var(--band-label-text); }
.band-groups { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px var(--space-grouped); margin: 0; }
.band-group { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: start; }
.band-group-label {
position: relative;
top: 1px;
margin: 0;
font: var(--font-size-small) / var(--band-token-height) var(--font-ui);
font-weight: normal;
color: var(--band-label-text);
text-align: end;
white-space: nowrap;
}
.band-tokens { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.band-rule { grid-column: 1 / -1; height: 0; margin: 2px 0; border: 0; border-top: var(--border-line); }
.band-limits > .band-group-label { top: 0; }
.band-limits-text { display: flex; flex-wrap: wrap; column-gap: 1.2em; margin: 0; padding: calc((var(--band-token-height) - 1lh) / 2) 0; overflow-x: clip; list-style: none; font-size: var(--font-size-small); line-height: var(--line-height); font-variant-numeric: tabular-nums; }
.band-limits-text > li { position: relative; white-space: nowrap; }
.band-limits-text > li::before { content: "·"; position: absolute; inset-inline-start: -0.6em; width: 0; display: flex; justify-content: center; }
.band-token {
display: inline-flex;
align-items: center;
gap: 5px;
box-sizing: border-box;
flex: none;
max-width: 100%;
min-width: 0;
min-height: 0;
height: var(--band-token-height);
margin: 0;
padding-block: 0;
padding-inline: calc((var(--band-token-height) - 16px) / 2 + 1px) 8px;
font: var(--font-size) / var(--line-height) var(--font-ui);
font-variant: normal;
letter-spacing: normal;
text-transform: none;
color: var(--band-token-text);
text-shadow: none;
white-space: nowrap;
cursor: default;
-webkit-user-select: none;
user-select: none;
vertical-align: middle;
background: var(--band-token-face);
background-origin: border-box;
border: var(--band-token-border);
border-radius: var(--band-token-radius);
box-shadow: var(--band-token-shadow);
}
.band-token > :is(.icon-image, .band-glyph) {
--icon-size: 16px;
flex: none;
width: 16px;
height: 16px;
margin-inline-start: -1px;
font-size: 10px;
box-shadow: none;
}
.band-token-name { min-width: 0; margin-inline: -1px; padding-inline: 1px; overflow: hidden; text-overflow: ellipsis; }
.band-token-note { font-size: var(--font-size-small); }
.band-token-arrow { flex: none; width: 7px; height: 4px; margin-inline: -2px -3px; margin-top: 1px; background: currentColor; clip-path: polygon(0 0, 100% 0, 50% 100%); opacity: 0.6; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
.band-token-arrow { transition: opacity 100ms ease-out; }
}
@media (hover: hover) and (pointer: fine) {
button.band-token > .band-token-arrow { opacity: 0; }
button.band-token:is(:hover, :focus-visible) > .band-token-arrow { opacity: 0.6; }
button.band-token:hover { background: var(--band-token-hover-face); background-origin: border-box; }
button.band-token[data-tone="beyond"]:hover { background: var(--alert-background); border-color: var(--color-error); }
}
button.band-token:active,
button.band-token[aria-expanded="true"] {
padding-block: 0;
padding-inline: calc((var(--band-token-height) - 16px) / 2 + 1px) 8px;
color: var(--band-token-open-text);
text-shadow: var(--band-token-open-text-shadow);
background: var(--band-token-open-face);
background-origin: border-box;
border: var(--band-token-open-border);
box-shadow: var(--band-token-open-shadow);
}
button.band-token:is(:active, [aria-expanded="true"]) > .band-token-arrow { opacity: 0.9; }
button.band-token:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
button.band-token { scroll-margin-block: 16px; }
.band-sheet { scroll-margin-block: 8px; }
.band-token[data-state="pending"] { color: var(--band-label-text); background: transparent; border: var(--band-token-pending-border); box-shadow: none; }
button.band-token[data-state="pending"]:is(:active, [aria-expanded="true"]) { color: var(--band-token-open-text); background: var(--band-token-open-face); border: var(--band-token-open-border); }
.band-token[data-tone="beyond"] { color: var(--color-error); font-weight: var(--band-emphasis-weight); background: var(--alert-background); border: var(--alert-border); box-shadow: none; }
button.band-token[data-tone="beyond"]:is(:active, [aria-expanded="true"]) { color: var(--color-canvas); text-shadow: none; background: var(--color-error); border-color: var(--color-error); }
.band-token.small, button.band-token.small:is(:active, [aria-expanded="true"]) { --band-token-height: 18px; gap: 4px; padding-inline: 3px 7px; font-size: var(--font-size-small); }
.band-token.small > :is(.icon-image, .band-glyph) { --icon-size: 14px; width: 14px; height: 14px; font-size: 8px; }
.band-token.small > .band-token-note::before { content: "·"; margin-inline-end: 4px; }
@media (pointer: coarse) {
.band-access { --band-token-height: 32px; }
.band-access .band-tokens { gap: 12px 8px; }
.band-access .band-token { border-radius: calc(var(--band-token-radius) * 16 / 11); }
button.band-token { position: relative; touch-action: manipulation; }
button.band-token::before { content: ""; position: absolute; inset: -6px -4px; }
.band-sheet > footer > button { position: relative; touch-action: manipulation; }
.band-sheet > footer > button::before { content: ""; position: absolute; inset: 50% 0 auto; height: 44px; transform: translateY(-50%); }
}
.band-glyph { flex: none; width: var(--band-glyph-size); height: var(--band-glyph-size); background: currentColor; -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; }
.band-glyph[data-cap="apps"] { -webkit-mask-image: var(--icon-band-apps); mask-image: var(--icon-band-apps); }
.band-glyph[data-cap="files"] { -webkit-mask-image: var(--icon-band-files); mask-image: var(--icon-band-files); }
.band-glyph[data-cap="desktop"] { -webkit-mask-image: var(--icon-band-desktop); mask-image: var(--icon-band-desktop); }
.band-glyph[data-cap="sound"] { -webkit-mask-image: var(--icon-band-sound); mask-image: var(--icon-band-sound); }
.band-glyph[data-cap="hearing"] { -webkit-mask-image: var(--icon-band-hearing); mask-image: var(--icon-band-hearing); }
.band-glyph[data-cap="chat"] { -webkit-mask-image: var(--icon-band-chat); mask-image: var(--icon-band-chat); }
.band-glyph[data-cap="network"] { -webkit-mask-image: var(--icon-band-network); mask-image: var(--icon-band-network); }
.band-glyph[data-cap="secrets"] { -webkit-mask-image: var(--icon-band-secrets); mask-image: var(--icon-band-secrets); }
.band-glyph[data-cap="clock"] { -webkit-mask-image: var(--icon-band-clock); mask-image: var(--icon-band-clock); }
.band-glyph[data-cap="looking"] { -webkit-mask-image: var(--icon-band-looking); mask-image: var(--icon-band-looking); }
.band-glyph[data-cap="pointer"] { -webkit-mask-image: var(--icon-band-pointer); mask-image: var(--icon-band-pointer); }
.band-glyph[data-cap="beyond"] { -webkit-mask-image: var(--icon-band-beyond); mask-image: var(--icon-band-beyond); }
.band-sheet {
position: relative;
flex: 0 0 100%;
box-sizing: border-box;
min-width: 0;
margin: 4px 0;
padding: 10px 12px;
color: var(--color-text);
background: var(--color-surface);
border: var(--border-line);
border-radius: var(--band-sheet-radius);
overflow-wrap: anywhere;
}
.band-sheet[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
.band-sheet.opening { transform-origin: var(--notch-x, 24px) 0; animation: band-sheet-open 120ms ease-out; }
}
@keyframes band-sheet-open { from { opacity: 0; transform: scale(0.96); } }
.band-sheet::before {
content: "";
position: absolute;
top: calc(var(--band-sheet-notch) / -2);
left: clamp(var(--band-sheet-notch) + 8px, var(--notch-x, 24px), calc(100% - var(--band-sheet-notch) - 8px));
box-sizing: border-box;
width: var(--band-sheet-notch);
height: var(--band-sheet-notch);
background: var(--color-surface);
border-top: var(--border-line);
border-left: var(--border-line);
transform: translateX(-50%) rotate(45deg);
clip-path: polygon(0 0, 100% 0, 0 100%);
pointer-events: none;
}
.band-sheet > p { max-width: 65ch; margin: 0 0 var(--space-grouped); text-wrap: pretty; }
.band-sheet > :last-child { margin-bottom: 0; }
.band-sheet small { font-size: var(--font-size-small); color: var(--band-label-text); }
.band-sheet code { font: inherit; }
.band-facts > dd > code, .band-sites code { font-size: 1em; }
.band-sheet code > span { white-space: nowrap; }
.band-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px var(--space-grouped); margin: 0; }
.band-facts > dt { position: relative; top: 1px; font-size: var(--font-size-small); line-height: var(--line-height); color: var(--band-label-text); text-align: end; }
.band-facts > dd { margin: 0; line-height: var(--line-height); font-variant-numeric: tabular-nums; }
.band-facts > dd > small { display: block; }
.band-asks { display: grid; grid-template-columns: minmax(0, max-content) max-content; align-items: baseline; gap: 0 12px; margin: 0; padding: 0; list-style: none; }
.band-asks > li { display: contents; }
.band-asks code { font-size: var(--font-size-small); color: var(--band-label-text); }
.band-sites { margin: 0; padding: 0; list-style: none; column-width: calc(var(--band-site-letters, 20) * 0.85ch); column-gap: 12px; line-height: var(--line-height); }
.band-sites > li { break-inside: avoid; }
.band-facts + .band-sites { margin-top: var(--space-grouped); padding-top: var(--space-grouped); border-top: var(--border-line); }
.band-sheet > .band-used { display: block; }
:is(.band-facts, .band-sites) + .band-used { margin-top: 6px; }
.band-sheet > footer { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding-top: 10px; border-top: var(--border-line); }
.band-sheet > footer:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.band-sheet > footer > small { flex: 1 1 12em; min-width: 0; }
.band-sheet > footer > button { flex: none; }
.band-none { line-height: var(--band-token-height); color: var(--band-label-text); }
button.band-add {
position: relative;
flex: none;
box-sizing: border-box;
width: var(--band-token-height);
height: var(--band-token-height);
min-width: 0;
min-height: 0;
margin: 0;
padding: 0;
border-radius: var(--band-token-radius);
}
button.band-add::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(currentColor, currentColor) center / 8px 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 8px no-repeat;
pointer-events: none;
}
.band-add-menu:popover-open { position: fixed; inset: auto; display: block; width: max-content; max-width: min(340px, calc(100dvw - 16px)); margin: 0; }
.band-add-menu > [role="menuitem"] { align-items: start; gap: 8px; padding-block: 3px; white-space: normal; }
.band-add-menu > [role="menuitem"] > :is(.icon-image, .band-glyph) { --icon-size: 16px; flex: none; width: 16px; height: 16px; margin: 1px 0 0; font-size: 9px; }
.band-add-menu .menu-label { display: grid; }
.band-add-menu .menu-label > b { font-weight: inherit; }
.band-add-menu .menu-label > small { font-size: var(--font-size-small); opacity: 0.72; }
.band-add-menu > [aria-disabled="true"] > .menu-label > small { opacity: 1; }
.band-add-menu > [aria-disabled="true"] > .icon-image { opacity: 0.5; }
.band-add-menu > [aria-disabled="true"] > .band-glyph { background-color: var(--color-text-disabled); }
.band-said { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.band-editor { position: relative; }
.band-beyond {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 2px 10px;
align-items: center;
margin: 0 0 12px;
padding: var(--space-grouped) 12px var(--space-grouped) var(--space-grouped);
color: var(--color-error);
background: var(--alert-background);
border: var(--alert-border);
border-radius: var(--band-sheet-radius);
}
.band-beyond > .band-glyph { grid-row: 1 / span 2; width: 32px; height: 32px; }
.band-beyond > strong { align-self: end; }
.band-beyond > span:not(.band-glyph) { align-self: start; font-size: var(--font-size-small); color: var(--color-text); }
.band-brief { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: var(--font-size-small); }
.band-brief-icons { display: flex; flex: none; gap: 3px; }
.band-brief-icons > :is(.icon-image, .band-glyph) { --icon-size: 14px; width: 14px; height: 14px; font-size: 8px; box-shadow: none; }
.band-brief-more { align-self: center; margin-inline-start: 1px; line-height: 1; font-variant-numeric: tabular-nums; opacity: 0.72; }
.band-brief-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: 0.72; }
.band-brief[data-tone="beyond"] > .band-brief-text { font-weight: var(--band-emphasis-weight); opacity: 1; }
.band-brief[data-tone="beyond"] { color: var(--color-error); }
[aria-selected="true"] .band-brief[data-tone="beyond"] { color: inherit; }
@container (max-width: 420px) {
.band-groups { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.band-group { grid-template-columns: minmax(0, 1fr); gap: 2px; }
.band-group-label { top: 0; text-align: start; line-height: var(--line-height); }
.band-limits-text { padding-block: 0; }
.band-asks { grid-template-columns: minmax(0, 1fr); }
.band-asks > li { display: block; }
.band-asks > li + li { margin-top: 2px; }
.band-facts { grid-template-columns: minmax(0, 1fr); gap: 0; }
.band-facts > dt { top: 0; text-align: start; }
.band-facts > dd { margin-bottom: 6px; }
.band-facts > dd:last-child { margin-bottom: 0; }
.band-sheet > footer { flex-wrap: wrap; }
}
.band-details { margin-top: var(--space); }
.band-details > summary { display: flex; align-items: center; gap: 5px; width: fit-content; min-height: var(--band-token-height); list-style: none; cursor: default; -webkit-user-select: none; user-select: none; }
.band-details > summary::-webkit-details-marker { display: none; }
.band-details > summary::before { content: ""; flex: none; width: 9px; height: 9px; background: var(--band-label-text); clip-path: polygon(1px 0, 9px 4.5px, 1px 9px); }
.band-details[open] > summary::before { clip-path: polygon(0 1px, 9px 1px, 4.5px 9px); }
.band-details > summary:active::before { background: var(--color-text); }
.band-details[open] > summary { margin-bottom: var(--space-grouped); }
.band-details thead th { position: static; }
@media (pointer: coarse) {
.band-details > summary { min-height: 44px; }
}
.band-denied { color: var(--color-error); font-weight: var(--band-emphasis-weight); }
.band-value { font-weight: var(--band-emphasis-weight); text-decoration: underline; text-underline-offset: var(--space-grouped); }
.band-source { max-height: var(--band-source-height); overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; padding: var(--space); background: var(--color-canvas); border: var(--border-line); font-family: var(--font-mono); }
.band-alert { display: grid; grid-template-columns: auto minmax(0, 1fr); }
.band-alert > .icon-image { float: none; grid-row: span 12; align-self: start; margin: 0 var(--space) 0 0; }
.band-alert > :not(.icon-image) { grid-column: 2; min-width: 0; margin: var(--space-grouped) 0 0; }
.band-alert > h2 { margin-top: 0; }
sys0-shell > .desktop > .system-window[role="dialog"] .band-alert > p { margin: var(--space-grouped) 0 0; white-space: normal; }
.band-alert > h2 { text-wrap: pretty; overflow-wrap: anywhere; }
.band-alert > .band-alert-subject { --band-token-height: 18px; display: flex; align-items: flex-start; gap: 6px; margin-block: calc(var(--space-grouped) + 4px) 4px; }
.band-alert-subject > .band-group-label { top: 0; }
.band-alert-subject > .band-tokens { flex: 1; }
.band-alert > .band-alert-reason { margin-block: calc(var(--space-grouped) + 2px) 2px; padding-inline-start: var(--space-grouped); border-inline-start: 2px solid var(--color-shadow); }
.band-alert-reason > figcaption { font-size: var(--font-size-small); color: var(--band-label-text); }
.band-alert-reason > blockquote { margin: 0; overflow-wrap: anywhere; }
.band-alert > .field-row-stacked > label::first-letter { text-transform: uppercase; }
.band-alert :is(input, select) { box-sizing: border-box; width: 100%; }
ul.band-tokens { margin: 0; padding: 0; list-style: none; }
ul.band-tokens > li { display: contents; }
.share-row .band-tokens { gap: 4px; }
.band-mention { display: inline; }
.band-bubble {
position: fixed;
inset: auto;
box-sizing: border-box;
width: max-content;
max-width: min(340px, calc(100vw - 16px));
margin: 0;
padding: 0;
overflow: visible;
font: var(--font-size) / var(--line-height) var(--font-ui);
color: var(--color-text);
text-align: start;
text-shadow: none;
white-space: normal;
background: var(--color-surface);
border: var(--border-line);
border-radius: var(--band-sheet-radius);
box-shadow: var(--menu-bevel);
}
.band-bubble:not(:popover-open) { display: none; }
.band-bubble::before {
content: "";
position: absolute;
top: -6px;
left: clamp(12px, var(--notch-x, 24px), calc(100% - 12px));
box-sizing: border-box;
width: 10px;
height: 10px;
background: var(--color-surface);
border-top: var(--border-line);
border-left: var(--border-line);
transform: translateX(-50%) rotate(45deg);
clip-path: polygon(0 0, 100% 0, 0 100%);
}
.band-bubble[data-side="over"]::before { top: auto; bottom: -6px; transform: translateX(-50%) rotate(225deg); }
.band-bubble-body { box-sizing: border-box; padding: 10px 12px; overflow: auto; overscroll-behavior: contain; border-radius: inherit; }
.band-bubble-body > header { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: var(--space-grouped); margin: 0 0 10px; }
.band-bubble-body > header > .icon-image { --icon-size: 32px; grid-row: 1 / span 2; width: 32px; height: 32px; box-shadow: none; }
.band-bubble-body > header > h3 { align-self: end; margin: 0; font-size: var(--font-size); line-height: var(--line-height); }
.band-bubble-body > header > .band-about { margin: 0; line-height: var(--line-height); }
:is(.band-bubble-body, .band-small) .band-groups { --band-token-height: 18px; gap: 6px var(--space-grouped); }
:is(.band-bubble-body, .band-small) .band-group-label { top: 0; }
:is(.band-bubble-body, .band-small) .band-tokens { gap: 4px; }
.band-small > h3 { margin: 0; font-size: var(--font-size); line-height: var(--line-height); }
.band-small > .band-about { margin: 2px 0 10px; }
.band-bubble-body > footer { display: flex; justify-content: flex-end; margin-top: 10px; padding-top: 10px; border-top: var(--border-line); }
.band-bubble-body > [role="alert"] { margin: 0; }
@media (prefers-reduced-motion: no-preference) {
.band-bubble { transform-origin: var(--notch-x, 24px) 0; transition: opacity 120ms ease-out, transform 120ms ease-out; }
.band-bubble[data-side="over"] { transform-origin: var(--notch-x, 24px) 100%; }
@starting-style { .band-bubble:popover-open { opacity: 0; transform: scale(0.96); } }
}
.sys0-notices { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
body > .sys0-notices { position: fixed; right: 8px; z-index: 2147483646; pointer-events: none; }
.sys0-referred {
box-sizing: border-box;
max-width: 360px;
padding: 6px 10px;
font: var(--font-size-small) / 20px var(--font-ui);
color: var(--color-text);
background: var(--color-surface);
border: var(--border-line);
border-radius: var(--band-sheet-radius);
box-shadow: var(--menu-bevel);
pointer-events: auto;
}
.band-app { display: inline-flex; align-items: center; gap: 6px; min-width: 0; vertical-align: middle; }
.band-app > .icon-image { --icon-size: 16px; flex: none; width: 16px; height: 16px; font-size: 9px; box-shadow: none; }
.band-app > .icon-image + * { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.icon-image.band-icon { --icon-size: 32px; }
.band-brief.row { flex-wrap: wrap; row-gap: 3px; }
.band-brief.row > .band-brief-icons > :is(.icon-image, .band-glyph) { --icon-size: 16px; width: 16px; height: 16px; font-size: 9px; }
.band-brief-icons:empty { display: none; }
.band-line { margin: 0; padding-block: calc((var(--band-token-height) - 1lh) / 2); line-height: var(--line-height); }
.band-fine { font-size: var(--font-size-small); line-height: var(--line-height); }
.band-checks { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.band-checks .field-row { min-height: var(--band-token-height); }
::-webkit-scrollbar {
width: var(--scrollbar-size);
height: var(--scrollbar-size);
background: var(--scrollbar-track);
}
::-webkit-scrollbar-track {
background: var(--scrollbar-track);
border: var(--scrollbar-track-border);
}
::-webkit-scrollbar-thumb {
background: var(--scrollbar-thumb);
border: var(--scrollbar-thumb-border);
box-shadow: var(--bevel-scrollbar-thumb);
}
::-webkit-scrollbar-corner {
background: var(--scrollbar-corner);
}
::-webkit-scrollbar-button:vertical:start:decrement,
::-webkit-scrollbar-button:vertical:end:increment,
::-webkit-scrollbar-button:horizontal:start:decrement,
::-webkit-scrollbar-button:horizontal:end:increment {
display: block;
width: var(--scrollbar-size);
height: var(--scrollbar-size);
background-size: 100% 100%;
}
::-webkit-scrollbar-button:vertical:start:increment,
::-webkit-scrollbar-button:vertical:end:decrement,
::-webkit-scrollbar-button:horizontal:start:increment,
::-webkit-scrollbar-button:horizontal:end:decrement {
display: none;
}
::-webkit-scrollbar-button:vertical:start { background-image: var(--icon-scroll-up); }
::-webkit-scrollbar-button:vertical:end { background-image: var(--icon-scroll-down); }
::-webkit-scrollbar-button:horizontal:start { background-image: var(--icon-scroll-left); }
::-webkit-scrollbar-button:horizontal:end { background-image: var(--icon-scroll-right); }
::-webkit-scrollbar-button:vertical:start:active { background-image: var(--icon-scroll-up-active); }
::-webkit-scrollbar-button:vertical:end:active { background-image: var(--icon-scroll-down-active); }
::-webkit-scrollbar-button:horizontal:start:active { background-image: var(--icon-scroll-left-active); }
::-webkit-scrollbar-button:horizontal:end:active { background-image: var(--icon-scroll-right-active); }
@supports not selector(::-webkit-scrollbar) {
:root {
scrollbar-color: var(--scrollbar-color-thumb) var(--scrollbar-color-track);
}
}
.icon-view {
display: grid;
grid-template-columns: repeat(auto-fill, var(--icon-cell-width));
grid-auto-rows: max-content;
align-content: start;
gap: var(--space-grouped);
margin: 0;
padding: var(--space);
overflow: auto;
}
.icon {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
box-sizing: border-box;
width: var(--icon-cell-width);
min-width: 0;
min-height: 0;
margin: 0;
padding: 4px 2px;
color: inherit;
background: none;
border: 0;
border-radius: 0;
box-shadow: none;
font: inherit;
text-align: center;
white-space: normal;
cursor: default;
-webkit-user-select: none;
user-select: none;
}
.icon[role="option"] {
overflow: visible;
white-space: normal;
}
.icon[aria-selected="true"] {
color: inherit;
background: none;
}
.icon:not(:disabled):active {
padding: 4px 2px;
color: inherit;
background: none;
box-shadow: none;
}
.icon:focus-visible {
outline: none;
}
.icon-image {
display: grid;
place-items: center;
flex: none;
box-sizing: border-box;
width: var(--icon-size);
height: var(--icon-size);
}
.icon-image.folder {
background: var(--icon-folder) center / contain no-repeat;
}
.icon-image.app {
position: relative;
overflow: hidden;
color: var(--app-tile-text);
background: var(--app-tile-background);
border: var(--app-tile-border);
border-radius: var(--app-tile-radius);
box-shadow: var(--app-tile-shadow);
font-family: var(--app-tile-font);
font-size: var(--app-tile-font-size);
line-height: 1;
}
.icon-label {
box-sizing: border-box;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: var(--icon-label-lines);
max-width: calc(100% + 2 * var(--icon-label-overhang));
margin-inline: calc(-1 * var(--icon-label-overhang));
flex-shrink: 0;
padding: 1px 3px;
overflow: hidden;
font-size: var(--icon-label-font-size);
line-height: 1.2;
text-overflow: ellipsis;
overflow-wrap: break-word;
color: var(--icon-label-text);
background: var(--icon-label-background);
}
.icon[aria-selected="true"] .icon-image {
filter: var(--icon-selected-filter);
}
.icon[aria-selected="true"] .icon-label {
color: var(--icon-selected-label-text);
background: var(--icon-selected-label-background);
}
.desktop-icons {
position: absolute;
inset: var(--desktop-icons-inset);
bottom: var(--space);
width: calc(100% - 2 * var(--space));
display: flex;
flex-flow: column wrap;
align-content: flex-start;
gap: var(--space);
overflow: auto;
pointer-events: none;
}
.desktop-icons > .icon {
flex: none;
min-height: calc(var(--icon-size) + var(--icon-label-font-size) * 1.2 * var(--icon-label-lines) + 14px);
direction: ltr;
pointer-events: auto;
}
.desktop-icons .icon-label {
font-weight: var(--desktop-icon-label-font-weight);
color: var(--desktop-icon-label-text);
background: var(--desktop-icon-label-background);
}
.desktop-icons .icon:not([aria-selected="true"]) .icon-label {
text-shadow: var(--desktop-icon-label-shadow);
}
.desktop-icons .icon[aria-selected="true"] .icon-label {
color: var(--icon-selected-label-text);
background: var(--icon-selected-label-background);
}
.menubar-end {
display: flex;
align-items: stretch;
margin-left: auto;
}
.menubar-end > time.menubar-clock {
display: var(--menubar-clock-display);
align-self: center;
flex: none;
white-space: nowrap;
font: var(--menubar-clock-font);
padding: var(--menubar-clock-padding);
color: var(--menubar-clock-text);
}
.menubar-end > button {
display: grid;
place-items: center;
box-sizing: border-box;
min-width: 0;
min-height: 0;
margin: 0;
padding: var(--menubar-item-padding);
color: inherit;
background: none;
border: 0;
border-radius: 0;
box-shadow: none;
}
.menubar-end > button:hover,
.menubar-end > button:not(:disabled):active:where(:hover, :not(:active > *)) {
padding: var(--menubar-item-padding);
color: var(--menubar-hover-text);
background: var(--menubar-hover-background);
box-shadow: var(--menubar-hover-bevel);
}
.menubar-end > :is(.menubar-status, .menubar-music) {
display: block;
max-width: 40ch;
overflow: hidden;
font: inherit;
white-space: nowrap;
text-overflow: ellipsis;
}
.menubar-end > :is(.menubar-status, .menubar-music)[hidden] {
display: none;
}
.menubar-end > :is(.menubar-chat, .menubar-bug, .menubar-share, .menubar-voice, .menubar-tasks) {
font-size: 0;
}
.menubar-end > :is(.menubar-chat, .menubar-bug, .menubar-share, .menubar-voice, .menubar-tasks)::before {
content: "";
width: 1rem;
height: 1rem;
background: currentColor;
}
.menubar-end > .menubar-chat::before { mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.5%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M2.5 3h11v7.5H7L4 13.5v-3H2.5z%22/%3E%3C/svg%3E") center / contain no-repeat; }
.menubar-end > .menubar-bug::before { mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.5%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5.5 5.5a2.5 2.5 0 0 1 5 0%22/%3E%3Crect x=%225%22 y=%225.5%22 width=%226%22 height=%228%22 rx=%223%22/%3E%3Cpath d=%22M8 8v5M2.5 7.5H5M11 7.5h2.5M2.5 11.5H5M11 11.5h2.5M5.5 3 4 1.5M10.5 3 12 1.5%22/%3E%3C/svg%3E") center / contain no-repeat; }
.menubar-end > .menubar-share::before { mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.5%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M8 10V2M5 5l3-3 3 3M3 8v5.5h10V8%22/%3E%3C/svg%3E") center / contain no-repeat; }
.menubar-end > .menubar-voice::before { mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.5%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%226%22 y=%221.5%22 width=%224%22 height=%228%22 rx=%222%22/%3E%3Cpath d=%22M3.5 7.5a4.5 4.5 0 0 0 9 0M8 12v2.5%22/%3E%3C/svg%3E") center / contain no-repeat; }
.menubar-end > .menubar-tasks::before { mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cellipse%20cx%3D%227%22%20cy%3D%223%22%20rx%3D%224%22%20ry%3D%221.5%22%2F%3E%3Cpath%20d%3D%22M4%204.2v6.6M10%204.2v6.6M4%206h6M4%208h6M4%2010h6%22%2F%3E%3Cellipse%20cx%3D%227%22%20cy%3D%2212%22%20rx%3D%224%22%20ry%3D%221.5%22%2F%3E%3Cpath%20d%3D%22M11%2012h1a2%202%200%200%200%202-2V8%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; }
sys0-shell[data-bug-logged] .menubar-end > .menubar-bug::before {
background: #e53935;
animation: bug-logged 300ms ease-in-out 2;
}
@keyframes bug-logged {
0%, 100% { opacity: 1; }
50% { opacity: 0.25; }
}
@media (prefers-reduced-motion: reduce) {
sys0-shell[data-bug-logged] .menubar-end > .menubar-bug::before { animation: none; }
}
.menubar-end > .menubar-affordances {
display: block;
font: inherit;
white-space: nowrap;
}
.menubar-end > :is(.menubar-chat, .menubar-share, .menubar-agent0)[aria-pressed="true"] {
color: var(--menubar-hover-text);
background: var(--menubar-hover-background);
box-shadow: var(--menubar-hover-bevel);
}
.menubar-end > .menubar-agent0 { display: flex; }
.menubar-end > .menubar-affordances > .affordance {
padding: 0 var(--space-grouped);
}
.menubar-end > button:not(.menubar-agent0):not(.menubar-status):not(.menubar-music):not(.menubar-chat):not(.menubar-bug):not(.menubar-share):not(.menubar-voice):not(.menubar-tasks):not(.menubar-affordances):not(.menubar-notifications)::before {
content: "";
width: 1em;
height: 1em;
background: currentColor;
mask: var(--icon-search) center / contain no-repeat;
}
.menubar-end > :is(.menubar-notifications, .menubar-tasks) {
display: flex;
align-items: center;
gap: calc(var(--space-grouped) / 2);
font-size: 0;
}
.menubar-notifications::before {
content: "";
width: 1rem;
height: 1rem;
flex: none;
background: currentColor;
mask: var(--icon-notifications) center / contain no-repeat;
}
.menubar-end > .menubar-notifications[aria-pressed="true"] {
color: var(--menubar-open-text);
background: var(--menubar-open-background);
box-shadow: var(--menubar-open-bevel);
}
.menubar-badge {
flex: none;
min-width: 1.2em;
padding: 0 calc(var(--space-grouped) / 2);
color: var(--notification-badge-text);
background: var(--notification-badge-background);
border-radius: var(--notification-badge-radius);
box-shadow: var(--notification-shadow);
font: bold var(--font-size-small) var(--font-ui);
line-height: 1.3;
}
.menubar-badge[hidden] { display: none; }
.notification-center {
box-sizing: border-box;
width: var(--notification-center-width);
overflow-y: auto;
overscroll-behavior: contain;
color: var(--notification-text);
background: var(--notification-center-background);
border-left: var(--notification-center-border);
box-shadow: var(--notification-shadow);
font: var(--font-size) var(--font-ui);
visibility: hidden;
transform: translateX(100%);
transition: transform 220ms cubic-bezier(.32,.72,0,1), visibility 0s 220ms;
}
.notification-center[data-open] {
visibility: visible;
transform: translateX(0);
transition-delay: 0s;
}
.notification-center > header,
.notification-group > header {
display: flex;
align-items: center;
gap: var(--space-grouped);
padding: var(--space-grouped);
border-bottom: var(--notification-center-border);
}
.notification-center > header > h2 {
flex: 1;
margin: 0;
font: var(--notification-title-font);
}
.notification-group > header {
color: var(--notification-group-text);
font-size: var(--font-size-small);
font-weight: bold;
text-transform: var(--notification-group-case);
}
.notification-group > header > .icon-image { --icon-size: var(--font-size); }
.notification-group > header > span:not(.icon-image) { flex: 1; }
.notification-group > ol {
margin: 0;
padding: var(--space-grouped);
list-style: none;
}
.notification {
position: relative;
padding: var(--space-grouped) calc(var(--space-grouped) * 2);
margin-bottom: var(--space-grouped);
color: var(--notification-text);
background: var(--notification-background);
border-radius: var(--notification-radius);
box-shadow: var(--notification-shadow);
cursor: pointer;
}
.notification[data-unread]::before {
content: "";
position: absolute;
top: var(--space-grouped);
left: var(--space-grouped);
width: var(--space-grouped);
height: var(--space-grouped);
border-radius: var(--notification-badge-radius);
background: var(--notification-unread);
}
.notification:focus-visible {
outline: var(--focus-ring);
color: var(--color-highlight-text);
background: var(--color-highlight);
}
.notification-title { font-weight: bold; overflow-wrap: anywhere; }
.notification-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.notification-time {
display: block;
margin-top: var(--space-grouped);
color: var(--notification-time-text);
font-size: var(--font-size-small);
}
.notification:focus-visible > .notification-time { color: inherit; }
.notification-empty { margin: calc(var(--space-grouped) * 2); color: var(--notification-time-text); }
@media (prefers-reduced-motion: reduce) {
.notification-center { transition: none; transform: none; }
}
.toaster {
display: grid;
gap: var(--space-grouped);
width: var(--toast-width);
margin: 0;
padding: 0;
list-style: none;
}
.desktop > .toaster {
position: absolute;
right: 12px;
bottom: calc(12px + var(--wm-shelf-height, 0px));
}
.toaster > .toast {
grid-area: 1 / 1;
align-self: end;
position: relative;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
column-gap: var(--space-grouped);
box-sizing: border-box;
padding: calc(var(--space-grouped) * 2);
color: var(--toast-text);
background: var(--toast-background);
border: var(--toast-border);
border-radius: var(--toast-radius);
box-shadow: var(--toast-shadow);
font: var(--font-size) var(--font-ui);
touch-action: pan-y;
opacity: 0;
transform: translateY(100%);
transform-origin: 50% 0;
transition: transform 400ms ease, translate 400ms ease, scale 400ms ease, height 400ms ease, opacity 400ms ease;
will-change: transform, translate, scale;
}
.toaster > .toast > * { transition: opacity 400ms ease; }
.toaster:not([data-expanded]) > .toast:not([data-front]) > * { opacity: 0; pointer-events: none; }
.toaster:not([data-expanded]) > .toast:not([data-front])::before,
.toaster:not([data-expanded]) > .toast:not([data-front])::after { visibility: hidden; }
.toaster > .toast[tabindex] { cursor: pointer; }
.toaster > .toast[data-shown] { opacity: 1; transform: none; }
.toaster > .toast[data-swiping] {
transform: translateX(var(--toast-swipe, 0px));
transition: translate 400ms ease, scale 400ms ease, height 400ms ease;
}
.toaster > .toast[data-settling] {
transition: transform 200ms cubic-bezier(.32, .72, 0, 1), translate 400ms ease, scale 400ms ease, height 400ms ease, opacity 400ms ease;
}
.toaster > .toast[data-leaving] {
opacity: 0;
transform: translateX(calc(var(--toast-swipe, 0px) + 16px));
pointer-events: none;
transition: transform 150ms cubic-bezier(.4, 0, 1, 1), translate 400ms ease, opacity 150ms cubic-bezier(.4, 0, 1, 1);
}
.toaster > .toast[data-leaving][data-flung] {
transform: translateX(calc(100% + 24px));
transition: transform var(--toast-fling-ms, 200ms) cubic-bezier(.32, .72, 0, 1), translate 400ms ease, opacity var(--toast-fling-ms, 200ms) cubic-bezier(.4, 0, 1, 1);
}
[data-motion="high"] .toaster > .toast:not([data-leaving], [data-swiping], [data-settling]) {
transition: transform 450ms cubic-bezier(.22, 1.16, .36, 1), translate 450ms cubic-bezier(.22, 1.16, .36, 1), scale 450ms ease, height 450ms ease, opacity 250ms ease-out;
}
.toaster > .toast > .icon-image { --icon-size: var(--toast-icon-size); grid-row: 1 / 3; }
.toaster > .toast > .toast-title { grid-column: 2; font-weight: bold; overflow-wrap: anywhere; }
.toaster > .toast > .toast-body { grid-column: 2; font-size: var(--font-size-small); white-space: pre-wrap; overflow-wrap: anywhere; }
.toaster > .toast > .toast-action { grid-column: 2; justify-self: start; margin-top: var(--space-grouped); }
.toaster > .toast > .toast-title:first-child,
.toaster > .toast > .toast-title:first-child ~ :is(.toast-body, .toast-action) { grid-column: 1 / 3; }
.toaster > .toast > .toast-close {
grid-column: 3;
grid-row: 1 / 3;
align-self: start;
min-width: 0;
min-height: 0;
margin: 0;
padding: 0 var(--space-grouped);
color: inherit;
background: none;
border: 0;
box-shadow: none;
font: inherit;
}
@media (prefers-reduced-motion: reduce) {
.toaster > .toast, .toaster > .toast > *, .toaster > .toast[data-leaving], .toaster > .toast[data-leaving][data-flung], .toaster > .toast[data-settling] { transition: none; }
.toaster > .toast:not([data-swiping]) { transform: none; }
}
.launcher-backdrop {
position: fixed;
inset: 0;
z-index: 3000;
background: var(--launcher-backdrop);
}
.launcher {
position: fixed;
top: var(--launcher-top);
left: 0;
right: 0;
margin: 0 auto;
z-index: 3001;
display: flex;
flex-direction: column;
box-sizing: border-box;
width: min(var(--launcher-width), calc(100vw - 32px));
max-height: calc(100dvh - var(--launcher-top) - 32px);
overflow: hidden;
color: var(--launcher-text);
background: var(--launcher-background);
border: var(--launcher-border);
border-radius: var(--launcher-radius);
box-shadow: var(--launcher-shadow);
}
.launcher > input[type="search"] {
flex: none;
width: 100%;
min-height: 0;
height: auto;
margin: 0;
padding: var(--launcher-search-padding);
color: var(--launcher-text);
background: transparent;
border: 0;
border-bottom: var(--launcher-divider);
border-radius: 0;
box-shadow: none;
font-family: var(--launcher-search-font);
font-size: var(--launcher-search-font-size);
}
@media (pointer: coarse) {
.launcher > input[type="search"] { min-height: 44px; font-size: max(16px, var(--launcher-search-font-size)); }
.launcher:not(.switcher) [role="option"] { min-height: 44px; box-sizing: border-box; touch-action: manipulation; }
}
.launcher > [role="listbox"] {
flex: 1;
min-height: 0;
max-height: var(--launcher-list-height);
margin: 0;
padding: var(--launcher-list-padding);
overflow: auto;
color: inherit;
background: transparent;
border: 0;
box-shadow: none;
}
.launcher-section {
padding: 8px 10px 4px;
font-size: var(--font-size-small);
color: var(--launcher-section-text);
}
.launcher [role="option"] {
display: flex;
align-items: center;
gap: 10px;
padding: var(--launcher-item-padding);
border-radius: var(--launcher-item-radius);
}
.launcher [role="option"][aria-selected="true"] {
color: var(--launcher-selected-text);
background: var(--launcher-selected-background);
}
.launcher [role="option"] .icon-image {
--icon-size: var(--launcher-icon-size);
font-size: calc(var(--launcher-icon-size) * 0.55);
}
.launcher-title {
flex: none;
}
.launcher-subtitle {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
color: var(--launcher-subtitle-text);
}
[aria-selected="true"] > .launcher-subtitle {
color: inherit;
opacity: 0.8;
}
.launcher-empty {
padding: 16px 10px;
color: var(--launcher-subtitle-text);
}
.launcher > footer {
display: flex;
flex: none;
justify-content: space-between;
align-items: center;
gap: var(--space);
padding: var(--launcher-footer-padding);
font-size: var(--font-size-small);
color: var(--launcher-footer-text);
background: var(--launcher-footer-background);
border-top: var(--launcher-divider);
}
.launcher-close {
flex: none;
touch-action: manipulation;
}
@media (pointer: coarse) {
.launcher-close { min-width: 44px; min-height: 44px; margin-left: auto; }
.launcher > footer > span { display: none; }
}
.launcher > footer kbd {
padding: 0 4px;
font-family: inherit;
border: var(--launcher-divider);
border-radius: var(--launcher-item-radius);
}
:is(sys0-graph, sys0-component-state-graph) {
display: flex;
position: relative;
overflow: auto;
outline: none;
user-select: none;
cursor: grab;
background-color: var(--color-canvas);
background-image: radial-gradient(var(--color-shadow) 1px, transparent 1.5px);
background-size: 18px 18px;
}
sys0-graph:focus-visible {
box-shadow: inset 0 0 0 2px var(--color-highlight);
}
:is(sys0-graph, sys0-component-state-graph) .graph-space {
position: relative;
flex: none;
margin: auto;
}
:is(sys0-graph, sys0-component-state-graph) .graph-plane {
position: absolute;
left: 0;
top: 0;
transform-origin: 0 0;
}
:is(sys0-graph, sys0-component-state-graph) .graph-wires {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: visible;
}
:is(sys0-graph, sys0-component-state-graph) .graph-wire {
fill: none;
stroke: var(--color-text);
stroke-width: 1.25px;
opacity: 0.32;
}
sys0-graph .graph-edge:is([data-port="fail"], [data-port="no"], [data-port="exhausted"]) .graph-wire {
stroke-dasharray: 4 3;
}
sys0-graph .graph-edge[data-status="taken"] .graph-wire {
opacity: 0.75;
}
sys0-graph .graph-edge:is([data-status="live"], [aria-selected="true"]) .graph-wire,
sys0-component-state-graph .graph-edge[aria-selected="true"] .graph-wire {
stroke: var(--color-highlight);
stroke-width: 2.5px;
opacity: 1;
}
sys0-graph .graph-edge[data-status="live"] .graph-wire {
stroke-dasharray: 9 6;
animation: graph-flow 0.5s linear infinite;
}
:is(sys0-graph, sys0-component-state-graph) .graph-hit {
fill: none;
stroke: transparent;
stroke-width: 14px;
pointer-events: stroke;
cursor: pointer;
}
:is(sys0-graph, sys0-component-state-graph) .graph-tag rect {
fill: var(--color-canvas);
}
:is(sys0-graph, sys0-component-state-graph) .graph-tag text {
font-family: var(--font-ui);
font-size: 9px;
fill: var(--color-text-disabled);
}
sys0-graph .graph-edge[data-status="live"] .graph-tag text {
fill: var(--color-highlight);
}
:is(sys0-graph, sys0-component-state-graph) .graph-arrow path {
fill: var(--color-text);
fill-opacity: 0.45;
}
:is(sys0-graph, sys0-component-state-graph) .graph-arrow.live path {
fill: var(--color-highlight);
fill-opacity: 1;
}
sys0-graph .graph-draft {
fill: none;
stroke: var(--color-highlight);
stroke-width: 2px;
stroke-dasharray: 6 4;
pointer-events: none;
}
sys0-graph [data-hidden="true"] {
display: none;
}
:is(sys0-graph, sys0-component-state-graph) .graph-node {
position: absolute;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
color: var(--color-text);
font-family: var(--font-ui);
cursor: pointer;
}
sys0-graph[data-flow="down"] .graph-node {
flex-direction: row;
align-items: flex-start;
gap: 8px;
}
sys0-graph[data-editable="true"] .graph-node {
cursor: move;
}
sys0-graph .graph-tile {
position: relative;
flex: none;
box-sizing: border-box;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: var(--color-surface);
border: var(--border-line);
border-radius: 10px;
box-shadow: 0 1px 3px var(--color-shadow);
}
sys0-graph .graph-glyph {
font-size: 17px;
line-height: 1;
}
sys0-graph .graph-node[aria-selected="true"] .graph-tile {
outline: 2px solid var(--color-highlight);
outline-offset: 2px;
}
:is(sys0-graph, sys0-component-state-graph) .graph-text {
display: flex;
flex-direction: column;
min-width: 0;
max-width: 100%;
text-align: center;
line-height: 1.2;
}
sys0-graph[data-flow="down"] .graph-text {
height: 40px;
justify-content: center;
text-align: left;
}
:is(sys0-graph, sys0-component-state-graph) .graph-label {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: var(--font-size-small);
font-weight: bold;
}
sys0-graph .graph-note,
sys0-graph .graph-time {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 10px;
color: var(--color-text-disabled);
}
sys0-graph .graph-time {
font-family: var(--font-mono);
color: var(--color-highlight);
}
sys0-graph .graph-time:empty {
display: none;
}
:is(sys0-graph, sys0-component-state-graph)[data-presentation="statechart"] { background-image: none; }
:is(sys0-graph, sys0-component-state-graph)[data-presentation="statechart"] .graph-node {
flex-direction: row; align-items: center; justify-content: center; gap: 0;
padding: 12px 16px; border: var(--border-line); border-radius: 8px;
background: var(--color-surface); box-shadow: 0 2px 5px color-mix(in srgb, var(--color-shadow) 18%, transparent);
}
sys0-component-state-graph[data-presentation="statechart"] .graph-node { padding: 4px 8px; }
sys0-graph[data-presentation="statechart"] .graph-node:is([data-kind="start"], [data-kind="done"]),
sys0-component-state-graph[data-presentation="statechart"] .graph-node[data-kind="start"] { border-radius: 38px; }
sys0-graph[data-presentation="statechart"] .graph-node .graph-tile { display: none; }
:is(sys0-graph, sys0-component-state-graph)[data-presentation="statechart"] .graph-text { height: auto; text-align: center; gap: 5px; }
:is(sys0-graph, sys0-component-state-graph)[data-presentation="statechart"] .graph-label { font-size: 14px; line-height: 1.25; white-space: normal; overflow-wrap: anywhere; }
sys0-graph[data-presentation="statechart"] .graph-note { font-size: 11px; }
:is(sys0-graph, sys0-component-state-graph)[data-presentation="statechart"] .graph-node[aria-selected="true"] { outline: 2px solid var(--color-highlight); outline-offset: 3px; }
sys0-graph[data-presentation="statechart"] .graph-node:is([data-status="active"], [data-status="working"], [data-status="waiting"]),
sys0-component-state-graph[data-presentation="statechart"] .graph-node[data-status="active"] {
background: var(--color-highlight); color: var(--color-highlight-text);
}
sys0-graph[data-presentation="statechart"] .graph-node:is([data-status="active"], [data-status="working"], [data-status="waiting"]) :is(.graph-note, .graph-time) { color: var(--color-highlight-text); }
sys0-graph[data-presentation="statechart"] .graph-node[data-status="waiting"] { border-style: dashed; }
sys0-graph[data-presentation="statechart"] .graph-node[data-status="failed"] { border-color: var(--color-error); }
:is(sys0-graph, sys0-component-state-graph)[data-presentation="statechart"] .graph-node:focus-visible { outline: 2px solid var(--color-highlight); outline-offset: 3px; }
:is(sys0-graph, sys0-component-state-graph)[data-presentation="statechart"] .graph-wire { opacity: 0.6; stroke-width: 1.5px; }
:is(sys0-graph, sys0-component-state-graph)[data-presentation="statechart"] .graph-tag text { font-size: 12px; fill: var(--color-text); }
sys0-component-state-graph .graph-edge[aria-selected="true"] .graph-tag rect { fill: var(--color-highlight); stroke: var(--color-highlight-text); }
sys0-component-state-graph .graph-edge[aria-selected="true"] .graph-tag text { fill: var(--color-highlight-text); }
sys0-graph .graph-badge {
position: absolute;
left: -8px;
top: -6px;
padding: 0 3px;
font-family: var(--font-mono);
font-size: 9px;
line-height: 13px;
color: var(--color-text-disabled);
background: var(--color-surface);
border: var(--border-line);
border-radius: 7px;
}
sys0-graph .graph-mark {
position: absolute;
top: -6px;
right: -6px;
width: 14px;
height: 14px;
border-radius: 50%;
font-size: 9px;
line-height: 14px;
text-align: center;
color: var(--color-surface);
display: none;
}
sys0-graph .graph-node:is([data-status="passed"], [data-status="done"]) .graph-mark {
display: block;
background: var(--color-highlight);
}
sys0-graph .graph-node:is([data-status="passed"], [data-status="done"]) .graph-mark::before {
content: "✓";
}
sys0-graph .graph-node[data-status="failed"] .graph-mark {
display: block;
background: var(--color-error);
}
sys0-graph .graph-node[data-status="failed"] .graph-mark::before {
content: "✕";
}
sys0-graph .graph-node[data-status="idle"] .graph-glyph {
opacity: 0.85;
}
sys0-graph .graph-in,
sys0-graph .graph-port {
position: absolute;
width: 8px;
height: 8px;
box-sizing: border-box;
margin: -4px 0 0 -4px;
border-radius: 50%;
border: 1.5px solid var(--color-text);
background: var(--color-surface);
opacity: 0;
}
sys0-graph[data-editable="true"] .graph-port {
opacity: 0.6;
cursor: crosshair;
}
sys0-graph[data-editable="true"] .graph-port:hover {
opacity: 1;
background: var(--color-highlight);
transform: scale(1.4);
}
sys0-graph .graph-tile::before {
content: "";
position: absolute;
inset: -5px;
border-radius: 14px;
border: 2px solid var(--color-highlight);
opacity: 0;
pointer-events: none;
}
sys0-graph .graph-node:is([data-status="active"], [data-status="working"], [data-status="waiting"]) .graph-tile::before {
opacity: 1;
animation: graph-pulse 1.4s ease-in-out infinite;
}
sys0-graph .graph-node[data-status="working"] .graph-tile::before {
animation-duration: 0.7s;
}
sys0-graph .graph-node[data-status="waiting"] .graph-tile::before {
border-style: dashed;
animation-duration: 2.4s;
}
sys0-graph .graph-node:is([data-status="active"], [data-status="working"], [data-status="waiting"]) .graph-tile {
box-shadow: 0 2px 10px var(--color-highlight);
}
sys0-graph .graph-node:is([data-status="passed"], [data-status="done"]) .graph-tile {
border-color: var(--color-highlight);
}
sys0-graph .graph-node[data-status="failed"] .graph-tile {
border-color: var(--color-error);
}
sys0-graph .graph-node[data-status="failed"] .graph-glyph {
color: var(--color-error);
}
sys0-graph .graph-pop {
position: absolute;
z-index: 1;
box-sizing: border-box;
width: 260px;
max-height: 320px;
overflow: auto;
padding: 10px 12px;
display: flex;
flex-direction: column;
gap: 8px;
color: var(--color-text);
font-family: var(--font-ui);
font-size: var(--font-size-small);
background: var(--color-surface);
border: var(--border-line);
border-radius: var(--groupbox-radius);
box-shadow: 0 6px 24px var(--color-shadow);
cursor: default;
user-select: text;
}
sys0-graph .graph-pop-head {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
sys0-graph .graph-pop .graph-tile {
width: 28px;
height: 28px;
border-radius: 7px;
box-shadow: none;
}
sys0-graph .graph-pop .graph-glyph {
font-size: 13px;
}
sys0-graph .graph-pop .graph-label {
flex: 1;
font-size: var(--font-size);
}
sys0-graph .graph-pill {
flex: none;
padding: 1px 6px;
border-radius: 4px;
font-size: 10px;
background: var(--color-canvas);
color: var(--color-text-disabled);
}
sys0-graph .graph-pop:is([data-status="active"], [data-status="working"], [data-status="waiting"], [data-status="passed"], [data-status="done"]) .graph-pill {
color: var(--color-highlight);
}
sys0-graph .graph-pop[data-status="failed"] .graph-pill {
color: var(--color-error);
}
sys0-graph .graph-pop-close {
flex: none;
width: 18px;
text-align: center;
font-size: 15px;
line-height: 18px;
color: var(--color-text-disabled);
cursor: pointer;
}
sys0-graph .graph-pop-close:hover {
color: var(--color-text);
}
sys0-graph .graph-pop-detail {
white-space: pre-wrap;
overflow-wrap: anywhere;
line-height: 1.35;
}
sys0-graph .graph-pop[data-hidden="true"] {
display: none;
}
sys0-graph .graph-pop-detail:empty {
display: none;
}
sys0-graph .graph-pop-facts {
padding-top: 6px;
border-top: var(--border-line);
font-family: var(--font-mono);
font-size: 10px;
color: var(--color-text-disabled);
}
sys0-graph .graph-hint {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-ui);
font-size: var(--font-size);
color: var(--color-text-disabled);
pointer-events: none;
}
@keyframes graph-flow {
to {
stroke-dashoffset: -15;
}
}
@keyframes graph-pulse {
50% {
opacity: 0.35;
}
}
@media (prefers-reduced-motion: reduce) {
sys0-graph *,
sys0-graph *::before {
animation: none !important;
}
}
.affordance {
box-sizing: border-box;
pointer-events: none;
}
.affordance[data-affordance="press"] {
background: var(--affordance-press);
box-shadow: inset 0 0 0 var(--affordance-line) var(--affordance-press);
}
.affordance[data-affordance="type"] {
background: var(--affordance-type);
box-shadow: inset 0 0 0 var(--affordance-line) var(--affordance-type);
}
.affordance[data-affordance="drag"] {
background: var(--affordance-drag);
box-shadow: inset 0 0 0 var(--affordance-line) var(--affordance-drag);
}
.affordance[data-affordance="resize"] {
background: var(--affordance-resize);
box-shadow: inset 0 0 0 var(--affordance-line) var(--affordance-resize);
}
.exploded {
color: var(--color-text);
font-family: var(--font-ui);
font-size: var(--font-size);
}
.exploded-stage {
--exploded-material-depth: var(--exploded-depth);
--exploded-material-edge: var(--exploded-edge);
--exploded-u: var(--exploded-axis-u);
--exploded-v: var(--exploded-axis-v);
--exploded-gap: var(--exploded-gap-min);
--exploded-eye: var(--exploded-perspective);
}
.exploded-stage.bench {
background: var(--color-surface);
}
.exploded-stage.bench.guides {
background: var(--exploded-bench);
}
.exploded-stage:not(.guides) :is(.exploded-wire,.exploded-layer,.exploded-sockets) {
visibility: hidden;
}
.exploded-solid-face {
background: var(--exploded-edge);
}
.exploded-plate.ghost {
opacity: var(--exploded-ghost-opacity);
}
.exploded-wire rect,
.exploded-socket,
.exploded-trace,
.exploded-leader {
fill: none;
stroke: var(--exploded-line);
stroke-width: var(--exploded-line-width);
}
.exploded-wire rect {
vector-effect: non-scaling-stroke;
}
.exploded-socket {
stroke-dasharray: var(--exploded-socket-dash);
}
.exploded-trace {
stroke-dasharray: var(--exploded-trace-dash);
}
.exploded-halo {
fill: none;
stroke: var(--color-surface);
stroke-width: calc(var(--exploded-line-width) + 0.5px);
}
.exploded-under {
fill: none;
stroke: var(--color-surface);
stroke-width: calc(var(--exploded-line-width) + 0.75px);
}
.exploded-leader.lit {
stroke: var(--color-highlight);
}
.exploded-dot {
fill: var(--exploded-line);
}
.exploded-outline {
fill: none;
stroke: var(--color-highlight);
stroke-width: 0.8px;
}
.exploded-outline.kept {
stroke-width: 1.2px;
}
.exploded-plate-name {
padding: 0 4px;
font-family: var(--font-mono);
font-size: var(--font-size-small);
background: var(--color-surface);
color: var(--color-text);
}
.exploded-plate-name.kept {
background: var(--color-highlight);
color: var(--color-highlight-text);
}
.exploded-balloon > .exploded-disc {
fill: var(--color-surface);
stroke: var(--exploded-line);
stroke-width: var(--exploded-line-width);
}
.exploded-balloon > text {
fill: var(--color-text);
font-family: var(--font-ui);
font-weight: bold;
font-size: calc(var(--exploded-balloon-size) * 0.55);
text-anchor: middle;
dominant-baseline: central;
}
.exploded-balloon.lit > .exploded-disc {
fill: var(--color-highlight);
stroke: var(--color-highlight);
}
.exploded-balloon.lit > text {
fill: var(--color-highlight-text);
}
.exploded-inspector {
padding: var(--space); background: var(--color-surface); color: var(--color-text);
border-left: var(--border-line); font-family: var(--font-ui);
}
.exploded-inspector pre { font-family: var(--font-mono); font-size: var(--font-size-small); line-height: 1.5; background: transparent; border: 0; padding: 0; margin: 0; }
.exploded-inspector .pt-name { color: var(--syntax-name); }
.exploded-inspector .pt-string { color: var(--syntax-string); }
.exploded-inspector .pt-number { color: var(--syntax-number); }
.exploded-inspector .pt-type,.exploded-inspector .pt-keyword { color: var(--syntax-type); }
.exploded-panel {
background: var(--color-surface);
border-left: var(--border-line);
}
.exploded-panel.under-figure {
border-left: 0;
border-top: var(--border-line);
}
.exploded-label-name {
font-weight: bold;
}
.exploded-label.lit > .exploded-label-name {
text-decoration-line: underline;
text-decoration-thickness: 2px;
text-decoration-color: var(--color-highlight);
}
.exploded-sublabel {
font-family: var(--font-mono);
font-size: var(--font-size-small);
opacity: 0.75;
}
.exploded-bom {
padding: var(--space-grouped);
}
.exploded-bom code {
font-family: var(--font-mono);
font-size: var(--font-size-small);
}
.exploded-bom-template {
opacity: 0.75;
}
.exploded-bar {
background: var(--color-surface);
border-top: var(--border-line);
}
.exploded-bar > [role="toolbar"] {
gap: var(--space-grouped);
padding: var(--space-grouped) var(--space);
}
.exploded-step-in,
.exploded-step-out {
min-width: 0;
}
.exploded-step-in::before,
.exploded-step-out::before {
content: "";
display: inline-block;
width: 0.45em;
height: 0.75em;
vertical-align: middle;
background: currentColor;
}
.exploded-step-in::before {
clip-path: polygon(100% 0, 0 50%, 100% 100%);
}
.exploded-step-out::before {
clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.exploded-step-in:disabled::before,
.exploded-step-out:disabled::before {
background: var(--color-text-disabled);
}
.exploded-bar.compact .exploded-extra {
gap: var(--space-grouped);
padding: var(--menu-padding);
color: var(--color-text);
background: var(--menu-background);
border: var(--menu-border);
box-shadow: var(--menu-bevel);
}
sys0-specimen {
position: relative;
display: block;
padding: 4px;
contain: layout;
}
sys0-specimen[data-fill] > * {
box-sizing: border-box;
width: 100%;
height: 100%;
}
sys0-specimen .audio-indicator {
display: block;
}
sys0-specimen .window {
display: flex;
flex-direction: column;
position: relative;
}
sys0-specimen .window > .window-body {
flex: 1;
min-height: 0;
}
sys0-specimen .desktop > .window,
sys0-specimen .desktop > .window.wm-managed {
position: relative;
inline-size: min(320px, 100%);
min-inline-size: min(200px, 100%);
min-block-size: 120px;
}
sys0-specimen .desktop:has(> .window) {
padding: var(--space);
gap: var(--space);
align-content: center;
}
sys0-specimen .window.tutorial-coach {
position: absolute;
}
sys0-specimen[data-fill] > sys0-shell > .window {
max-height: 100%;
}
sys0-specimen .desktop {
display: grid;
place-items: center;
}
sys0-specimen .desktop:has(> .toaster) {
position: relative;
overflow: hidden;
}
sys0-specimen[data-fill] > .file-dock {
display: flex;
flex-direction: column;
}
sys0-specimen[data-fill] > .file-dock > .window-body {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
gap: 4px;
overflow: hidden;
}
sys0-specimen :not(.popup-menu) > [role="menu"] {
display: block;
}
.circuit-board-face { fill: var(--circuit-board); stroke: var(--circuit-silk); stroke-width: var(--exploded-line-width); }
.circuit-board-edge { fill: var(--circuit-edge); }
.circuit-hole { fill: var(--circuit-edge); stroke: var(--circuit-pin); stroke-width: calc(var(--exploded-line-width) * .35); }
.circuit-silkscreen { fill: var(--circuit-silk); font-family: var(--font-mono); }
.circuit-chip { fill: var(--circuit-chip); stroke: var(--circuit-pin); stroke-width: var(--exploded-line-width); }
.circuit-package-edge { fill: var(--circuit-edge); stroke: var(--circuit-chip); stroke-width: var(--exploded-line-width); }
.circuit-pin { fill: var(--circuit-pin); stroke: var(--circuit-edge); stroke-width: calc(var(--exploded-line-width) * .4); }
.circuit-package-text, .circuit-pin-text { fill: var(--circuit-ink); font-family: var(--font-mono); }
.circuit-pin-text { pointer-events: none; }
.circuit-wire-label { fill: var(--circuit-silk); font-family: var(--font-mono); paint-order: stroke; stroke: var(--circuit-board); stroke-width: calc(var(--exploded-line-width) * 4); pointer-events: none; }
.circuit-wire-label[data-active=true] { fill: var(--circuit-active); }
.circuit-notch { fill: none; stroke: var(--circuit-pin); stroke-width: var(--exploded-line-width); }
.circuit-package { pointer-events: auto; cursor: pointer; }
.circuit-package[data-observed=true] .circuit-chip { stroke: var(--circuit-active); stroke-width: calc(var(--exploded-line-width) * 3); }
.circuit-package[aria-pressed=true] .circuit-chip, .circuit-package:focus .circuit-chip { stroke: var(--circuit-active); stroke-width: calc(var(--exploded-line-width) * 4); stroke-dasharray: var(--exploded-trace-dash); }
.circuit-jumper { fill: none; stroke: var(--circuit-wire); stroke-width: calc(var(--exploded-line-width) * 2.5); stroke-linecap: round; stroke-linejoin: round; }
.circuit-jumper[data-active=true] { stroke: var(--circuit-active); stroke-width: calc(var(--exploded-line-width) * 3.5); }
.circuit-jumper[data-kind=handoff] { stroke-dasharray: var(--exploded-trace-dash); }
.circuit-registers { display: grid; gap: var(--space-grouped); }
.circuit-registers button { text-align: left; white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--font-mono); }
.circuit-machine { display: block; width: 100%; font: var(--font-size-small) var(--font-mono); }
.circuit-machine rect { fill: var(--color-surface); stroke: var(--color-text); stroke-width: var(--exploded-line-width); }
.circuit-machine rect[data-current=true] { stroke: var(--color-highlight); stroke-width: calc(var(--exploded-line-width) * 3); }
.circuit-machine path { stroke: var(--color-text); stroke-width: var(--exploded-line-width); }
.circuit-machine text { fill: var(--color-text); font-size: var(--font-size-small); }
:where(sys0-ai-agent-tree, sys0-ai-trace-timeline, sys0-ai-actions, sys0-ai-evidence-row, sys0-ai-working, sys0-ai-task, sys0-ai-task-timeline, sys0-ai-workflow-box, sys0-ai-agent-inbox, sys0-ai-agent-lanes, sys0-ai-steering-input, sys0-ai-agent-worktree, sys0-ai-context-window, sys0-ai-decision-tree, sys0-ai-model-picker, sys0-ai-permission-panel, sys0-ai-chat-box, sys0-ai-task-detail, sys0-ai-workspace) { display: block; min-width: 0; }
.ai-panel { background: var(--ai-surface); color: var(--ai-text); border: var(--ai-border); border-radius: var(--ai-radius); padding: var(--ai-padding); box-shadow: var(--ai-shadow); }
.ai-heading, .ai-meta, .ai-actions { display: flex; align-items: center; gap: var(--ai-gap); flex-wrap: wrap; }
.ai-heading { justify-content: space-between; }
.ai-heading h3, .ai-panel p, .ai-panel h3, .ai-lane h4 { margin: 0; }
.ai-panel > * + *, .ai-task-detail > * + *, .ai-lane > * + *, .ai-composer > * + * { margin-block-start: var(--ai-gap); }
.ai-muted, .ai-meta, .ai-empty { color: var(--ai-muted); font-size: var(--ai-font-small); }
.ai-muted { display: block; }
.ai-meta { justify-content: space-between; }
.ai-actions { justify-content: flex-end; }
.ai-actions:empty { display: none; }
.ai-title { font: var(--ai-title-font); text-align: start; white-space: normal; overflow-wrap: anywhere; }
.ai-path, .ai-files code { overflow-wrap: anywhere; }
.ai-status { display: inline-flex; align-items: center; gap: var(--ai-gap-small); font-size: var(--ai-font-small); color: var(--ai-status-idle); }
.ai-status[data-status="idle"] .ai-status-mark::before { content: var(--ai-icon-idle); }
.ai-status[data-status="queued"] .ai-status-mark::before { content: var(--ai-icon-queued); }
.ai-status[data-status="running"] .ai-status-mark::before { content: var(--ai-icon-running); }
.ai-status[data-status="attention"] .ai-status-mark::before { content: var(--ai-icon-attention); }
.ai-status[data-status="paused"] .ai-status-mark::before { content: var(--ai-icon-paused); }
.ai-status[data-status="done"] .ai-status-mark::before { content: var(--ai-icon-done); }
.ai-status[data-status="failed"] .ai-status-mark::before { content: var(--ai-icon-failed); }
.ai-status[data-status="cancelled"] .ai-status-mark::before { content: var(--ai-icon-cancelled); }
.ai-status[data-status="queued"], .ai-time-span[data-status="queued"] { color: var(--ai-status-queued); }
.ai-status[data-status="running"], .ai-time-span[data-status="running"] { color: var(--ai-status-running); }
.ai-status[data-status="attention"], .ai-time-span[data-status="attention"] { color: var(--ai-status-attention); }
.ai-status[data-status="paused"], .ai-time-span[data-status="paused"] { color: var(--ai-status-paused); }
.ai-status[data-status="done"], .ai-time-span[data-status="done"] { color: var(--ai-status-done); }
.ai-status[data-status="failed"], .ai-time-span[data-status="failed"] { color: var(--ai-status-failed); }
.ai-status[data-status="cancelled"], .ai-time-span[data-status="cancelled"] { color: var(--ai-status-cancelled); }
.ai-evidence-chip { display: inline-flex; align-items: center; gap: var(--ai-gap); max-width: 100%; }
.ai-source { overflow: hidden; text-overflow: ellipsis; }
.ai-evidence-row { display: flex; gap: var(--ai-gap); overflow-x: auto; list-style: none; padding: 0; margin: 0; }
.ai-evidence-row > li { flex: 0 0 var(--ai-evidence-width); min-width: 0; }
.ai-evidence-card { display: grid; gap: var(--ai-gap); border: var(--ai-border); border-radius: var(--ai-radius); padding: var(--ai-padding); height: 100%; box-sizing: border-box; }
.ai-evidence-title { white-space: normal; text-align: start; overflow-wrap: anywhere; }
.ai-working { display: flex; align-items: center; gap: var(--ai-gap); padding: var(--ai-padding); min-block-size: var(--ai-activity-height); }
.ai-spinner { display: inline-block; width: var(--ai-spinner-size); height: var(--ai-spinner-size); border: var(--ai-border); border-radius: var(--ai-spinner-radius); flex-shrink: 0; }
.ai-spinner[data-status="running"] { border-top-color: var(--ai-status-running); animation: ai-spin var(--ai-spinner-duration) linear infinite; }
@keyframes ai-spin { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce) { .ai-spinner[data-status="running"] { animation: none; } }
.ai-task[data-variant="line"] { display: flex; align-items: center; gap: var(--ai-gap); padding: var(--ai-gap); }
.ai-task[data-variant="line"] .ai-heading { flex: 1; min-width: 0; margin: 0; flex-wrap: nowrap; }
.ai-task[data-variant="line"] .ai-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-task[data-variant="line"] .ai-task-summary { display: none; }
.ai-task[data-variant="line"] .ai-meta { margin: 0; flex-wrap: nowrap; }
.ai-task[data-variant="line"] sys0-ai-actions { display: none; }
.ai-task-timeline { list-style: none; padding: 0; margin: 0; }
.ai-task-timeline > li { display: grid; grid-template-columns: 1fr auto; gap: var(--ai-gap-small); padding-block: var(--ai-gap); border-block-end: var(--ai-border); }
.ai-task-timeline > li > p { grid-column: 1 / -1; margin-inline-start: var(--ai-padding); }
.ai-task-timeline > li:last-child { border: none; }
.ai-inbox-board { display: grid; grid-template-columns: repeat(3, minmax(var(--ai-lane-width), 1fr)); gap: var(--ai-gap); overflow-x: auto; }
.ai-lane { padding: var(--ai-gap); background: var(--ai-lane-surface); border-radius: var(--ai-radius); }
.ai-inbox-list { display: grid; gap: var(--ai-gap-small); }
.ai-time-lane { display: grid; grid-template-columns: var(--ai-agent-width) minmax(var(--ai-track-width),1fr); gap: var(--ai-gap); padding-block: var(--ai-gap); border-block-end: var(--ai-border); }
.ai-agent-lanes { overflow-x: auto; }
.ai-time-track { position: relative; min-block-size: var(--ai-span-height); background: var(--ai-lane-surface); }
.ai-time-span { position: absolute; inset-block: 0; overflow: hidden; text-overflow: ellipsis; text-align: start; }
.ai-steering-input { border: var(--ai-border); padding: var(--ai-padding); border-radius: var(--ai-radius); background: var(--ai-surface); }
.ai-field { display: grid; gap: var(--ai-gap-small); margin-block-end: var(--ai-gap); }
.ai-field textarea { width: 100%; min-block-size: var(--ai-input-height); resize: vertical; box-sizing: border-box; }
.ai-files, .ai-context-parts { list-style: none; margin: 0; padding: 0; }
.ai-files li { display: flex; justify-content: space-between; gap: var(--ai-gap); padding-block: var(--ai-gap-small); }
.ai-number { font-size: var(--ai-number-size); }
.ai-context-bar { display: flex; block-size: var(--ai-context-height); background: var(--ai-lane-surface); border-radius: var(--ai-radius); overflow: hidden; }
.ai-context-segment { flex-shrink: 0; }
.ai-context-key { width: var(--ai-key-size); height: var(--ai-key-size); border-radius: var(--ai-key-radius); }
.ai-context-segment[data-kind="system"], .ai-context-key[data-kind="system"] { background: var(--ai-context-system); }
.ai-context-segment[data-kind="tools"], .ai-context-key[data-kind="tools"] { background: var(--ai-context-tools); }
.ai-context-segment[data-kind="files"], .ai-context-key[data-kind="files"] { background: var(--ai-context-files); }
.ai-context-segment[data-kind="conversation"], .ai-context-key[data-kind="conversation"] { background: var(--ai-context-conversation); }
.ai-context-segment[data-kind="memory"], .ai-context-key[data-kind="memory"] { background: var(--ai-context-memory); }
.ai-context-parts li { display: flex; align-items: center; gap: var(--ai-gap); padding-block: var(--ai-gap-small); }
.ai-context-parts li > span:nth-child(2) { flex: 1; }
.ai-decision-branches { list-style: decimal; padding-inline-start: var(--ai-tree-indent); }
.ai-decision-branches li { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,var(--ai-decision-column-width)),1fr)); gap: var(--ai-gap); padding: var(--ai-gap); border-inline-start: var(--ai-border); }
.ai-decision-choice { text-align: start; white-space: normal; }
.ai-decision-choice small { display: block; color: var(--ai-status-running); }
.ai-model-picker[data-variant="compact"] { margin: 0; padding: 0; border: 0; box-shadow: none; background: none; }
.ai-model-picker[data-variant="full"] { background: var(--ai-surface); }
.ai-model-full { display: grid; gap: var(--ai-gap); }
.ai-model-full > .ai-model-environment-field { grid-column: 1 / -1; }
.ai-model-full > .ai-model-grid { justify-self: start; min-width: 0; max-width: 100%; overflow-x: auto; }
.ai-model-grid td > label { display: contents; }
.ai-model-effort-name { display: none; }
.ai-model-grid td input[type="radio"][hidden] { display: none; }
.ai-model-bar { min-height: var(--select-height); color: var(--field-text); background: var(--field-background); border: var(--field-border); border-radius: var(--field-radius); box-shadow: var(--bevel-field); font-family: var(--field-font); position: relative; box-sizing: border-box; width: var(--ai-model-bar-width); min-width: max-content; max-width: 100%; vertical-align: middle; }
.ai-model-bar > .ai-model-more { position: static; }
.ai-model-bar > :is(.ai-model-more, .ai-model-recent) > button:hover,
.ai-model-bar > :is(.ai-model-more, .ai-model-recent):has(> button[aria-expanded="true"]) > button { color: inherit; background: none; }
.ai-model-bar:focus-within { color: var(--select-focus-text); background-color: var(--select-focus-background); border: var(--field-focus-border); box-shadow: var(--bevel-field-focus); }
.ai-model-bar:has(> .ai-model-more > button[aria-expanded="true"]) > .popup-menu:not(.ai-model-more) > button:hover { background: none; }
.ai-model-bar:has(> .ai-model-more > button[aria-expanded="true"]) > .popup-menu:not(.ai-model-more) > [role="tooltip"] { visibility: hidden; }
.ai-model-more:focus { outline: none; }
.ai-model-bar { display: grid; grid-template-columns: max-content auto auto auto max-content max-content; }
.ai-model-bar:not(:has(> .ai-model-modes)) { grid-template-columns: max-content auto auto max-content max-content; }
.ai-model-bar:not(:has(> .ai-model-recent)) { grid-template-columns: max-content auto auto auto max-content; }
.ai-model-bar:not(:has(> .ai-model-modes)):not(:has(> .ai-model-recent)) { grid-template-columns: max-content auto auto max-content; }
.ai-model-bar:has(> .ai-model-environment) { grid-template-columns: max-content max-content auto auto auto max-content max-content; }
.ai-model-bar:has(> .ai-model-environment):not(:has(> .ai-model-modes)) { grid-template-columns: max-content max-content auto auto max-content max-content; }
.ai-model-bar:has(> .ai-model-environment):not(:has(> .ai-model-recent)) { grid-template-columns: max-content max-content auto auto auto max-content; }
.ai-model-bar:has(> .ai-model-environment):not(:has(> .ai-model-modes)):not(:has(> .ai-model-recent)) { grid-template-columns: max-content max-content auto auto max-content; }
.ai-model-bar > .ai-model-recent { position: static; }
.ai-model-bar > .ai-model-recent > [role="tooltip"] { left: auto; right: 0; }
.ai-model-recent > [role="menu"] { left: 0; right: 0; min-width: 0; padding-inline: 0; font: inherit; }
.ai-model-bar > .ai-model-recent:has(> button[aria-expanded="true"]) > [role="menu"] { display: grid; grid-template-columns: max-content auto auto auto max-content max-content; }
.ai-model-bar:not(:has(> .ai-model-modes)) > .ai-model-recent:has(> button[aria-expanded="true"]) > [role="menu"] { grid-template-columns: max-content auto auto max-content max-content; }
.ai-model-bar:has(> .ai-model-environment) > .ai-model-recent:has(> button[aria-expanded="true"]) > [role="menu"] { grid-template-columns: max-content max-content auto auto auto max-content max-content; }
.ai-model-bar:has(> .ai-model-environment):not(:has(> .ai-model-modes)) > .ai-model-recent:has(> button[aria-expanded="true"]) > [role="menu"] { grid-template-columns: max-content max-content auto auto max-content max-content; }
.ai-model-recent [role="menuitemradio"] { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; gap: 0; align-items: center; padding-inline: 0; }
.ai-model-recent > [role="menu"] > [role="menuitemradio"][aria-checked]::before { content: none; }
.ai-model-recent [role="menuitemradio"] > * { padding: var(--popup-group-padding); border-inline-start: var(--popup-group-divider); border-inline-start-color: transparent; }
.ai-model-recent [role="menuitemradio"] > .ai-model-recent-icon { display: grid; place-items: center; padding: var(--popup-group-icon-padding); border-inline-start: 0; }
.ai-model-recent-icon > .icon-image { width: var(--popup-group-icon-size); height: var(--popup-group-icon-size); }
.ai-model-recent [role="menuitemradio"] > .ai-model-recent-fast { display: grid; place-items: center; }
.ai-model-recent-fast { min-width: var(--ai-model-bar-fast-size); }
.ai-model-recent-fast > .ai-model-fast-icon::before { visibility: visible; }
.ai-model-recent [role="menuitemradio"] > .ai-model-recent-check { min-width: var(--popup-menu-arrows-size); padding: var(--popup-group-icon-padding); text-align: center; }
.ai-model-recent [role="menuitemradio"][aria-checked="true"] > .ai-model-recent-check::before { content: var(--menu-check); }
.ai-model-connector { display: flex; align-items: center; gap: var(--ai-gap); }
.ai-model-connector > .icon-image { font-size: var(--app-tile-font-size); width: var(--ai-model-icon-size); height: var(--ai-model-icon-size); object-fit: contain; }
.ai-model-connector > .has-tooltip { flex: 1; min-width: 0; }
.ai-model-connector select { width: 100%; min-width: 0; }
.ai-model-mode { display: flex; align-items: center; gap: var(--ai-gap); padding-block-start: var(--ai-gap); border-block-start: var(--ai-border); }
.ai-model-mode > .slider-stops { flex: 1; min-width: 0; }
.ai-model-mode-name { min-width: var(--ai-model-mode-width); text-align: end; white-space: nowrap; }
.ai-model-fast { display: inline-grid; place-items: center; flex: none; }
.ai-model-mode .ai-model-fast { min-width: 0; min-height: 0; padding: var(--ai-gap-small); color: inherit; background: none; border: 0; border-radius: 0; box-shadow: none; }
.ai-model-mode .ai-model-fast::before, .ai-model-mode .ai-model-fast::after { display: none; }
.ai-model-mode .ai-model-fast:is(:hover, :active) { background: none; box-shadow: none; }
.ai-model-fast-tip { display: inline-grid; flex: none; }
.ai-model-fast-section > .ai-model-fast > .ai-model-fast-icon, .ai-model-recent-fast > .ai-model-fast-icon { width: var(--ai-model-bar-fast-size); height: var(--ai-model-bar-fast-size); }
.ai-model-fast-icon { position: relative; display: block; width: var(--ai-model-fast-size); height: var(--ai-model-fast-size); filter: var(--ai-model-fast-shadow); }
.ai-model-fast-icon::before, .ai-model-fast-icon::after { content: ""; position: absolute; inset: 0; }
.ai-model-fast-icon::before { background: var(--ai-model-fast-fill); -webkit-mask: var(--icon-chat-fast-on) center / contain no-repeat; mask: var(--icon-chat-fast-on) center / contain no-repeat; visibility: hidden; }
.ai-model-fast-icon::after { background: var(--ai-model-fast-line); -webkit-mask: var(--icon-chat-fast) center / contain no-repeat; mask: var(--icon-chat-fast) center / contain no-repeat; }
.ai-model-fast[aria-checked="true"] > .ai-model-fast-icon::before { visibility: visible; }
.ai-model-fast[aria-checked="true"] > .ai-model-fast-icon::after, .ai-model-recent-fast > .ai-model-fast-icon::after { background: var(--ai-model-fast-rim); }
.popup-group > .ai-model-fast-section > .ai-model-fast:is(:hover, :active),
.popup-group > .ai-model-fast-section:focus-within > .ai-model-fast { color: inherit; background: none; box-shadow: none; }
.ai-model-fast:disabled { cursor: not-allowed; }
.ai-model-fast:disabled > .ai-model-fast-icon { filter: none; }
.ai-model-fast:disabled > .ai-model-fast-icon::before, .ai-model-fast:disabled > .ai-model-fast-icon::after { background: var(--ai-model-fast-disabled); }
.ai-model-more > .ai-model-popover { position: absolute; bottom: 100%; left: 0; z-index: 99; display: none; box-sizing: border-box; width: max-content; padding: var(--ai-padding); color: var(--color-text); background: var(--ai-surface); border: var(--menu-border); box-shadow: var(--ai-model-popover-shadow); border-radius: var(--ai-radius); }
.ai-model-more:has(> button[aria-expanded="true"]) > .ai-model-popover { display: block; }
.ai-model-more:has(> button:disabled) > .ai-model-popover { display: none; }
.ai-model-popover:focus { outline: none; }
.ai-model-picker .popup-menu > button[aria-expanded="false"] ~ :is([role="menu"], .ai-model-popover) { display: none; }
.ai-model-picker .popup-menu:not(.ai-model-recent) > button[aria-expanded="true"] ~ [role="menu"] { display: block; }
.ai-model-picker .popup-menu > [role="menu"] { overflow: auto; overscroll-behavior: contain; }
.ai-model-picker .popup-menu > .ai-model-popover { overflow: visible; }
.ai-model-picker [role="menu"] > [role="menuitemradio"] { white-space: normal; overflow-wrap: anywhere; }
.ai-model-bar > .popup-menu > button[aria-expanded="false"] { color: inherit; background: none; }
.ai-model-bar > .popup-menu > button[aria-expanded="true"] { color: var(--button-active-text); background: var(--button-active-face); }
.ai-model-bar > .popup-menu > button[data-ui-control-state="hovered"] { background: var(--popup-group-hover); }
.ai-model-bar > .popup-menu > button[data-ui-control-state="pressed"] { color: var(--button-active-text); background: var(--button-active-face); }
.ai-model-picker :is(button, input, select)[data-ui-control-state="focused"] { outline: var(--focus-ring); outline-offset: -2px; }
.ai-model-popover .ai-model-picker { margin: 0; padding: 0; border: 0; box-shadow: none; background: none; }
.ai-model-popover .ai-model-grid { overflow: visible; }
.ai-model-popover .choice-grid-spare { display: none; }
.ai-model-full:not(:has(.slider-stops)) { grid-template-columns: minmax(0, 1fr) auto; }
.ai-model-full:not(:has(.slider-stops)) > .ai-model-mode { padding: 0; border: 0; }
.ai-model-full:not(:has(.slider-stops)) > .ai-model-grid { grid-column: 1 / -1; }
@media (pointer: coarse) {
.ai-model-picker button, .ai-model-grid label, .ai-model-picker input { touch-action: manipulation; }
.ai-model-bar > .popup-menu > button,
.ai-model-connector select { min-width: 44px; min-height: 44px; }
.ai-model-picker[data-variant="compact"] { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
.ai-model-recent [role="menuitemradio"] > * { box-sizing: border-box; min-width: 44px; }
.ai-model-mode { flex-wrap: wrap; }
.ai-model-mode > .slider-stops { min-width: 44px; }
.ai-model-mode-name { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.ai-model-mode .ai-model-fast { min-width: 44px; min-height: 44px; }
.ai-model-mode input[type="range"] { min-height: 44px; }
.ai-model-grid { width: 100%; }
.ai-model-grid .choice-grid { display: block; width: 100%; border-spacing: 0; }
.ai-model-grid :is(thead, tbody) { display: block; }
.ai-model-grid tr { display: grid; }
.ai-model-grid thead td { display: none; }
.ai-model-grid thead th { min-width: 0; }
.ai-model-grid tbody th { grid-column: 1 / -1; padding: var(--ai-gap-small) 0 0; white-space: normal; overflow-wrap: anywhere; }
.ai-model-grid tbody td { grid-row: 2; }
.ai-model-grid td > label { display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; align-content: center; gap: var(--ai-gap-small); box-sizing: border-box; min-width: 44px; min-height: 44px; padding-block: var(--ai-gap-small); }
.ai-model-effort-name { display: block; min-width: 0; max-width: 100%; font-size: var(--ai-font-small); white-space: normal; overflow-wrap: anywhere; }
.ai-model-grid td > label:has(> input[hidden]) { visibility: hidden; }
.ai-model-grid .choice-grid-spare { display: none; }
}
.ai-messages { list-style: none; margin: 0; padding: 0; }
.ai-messages > li { padding: var(--ai-padding); border-block-end: var(--ai-border); }
.ai-messages > li[data-role="user"] { background: var(--ai-lane-surface); }
.ai-messages p { white-space: pre-wrap; overflow-wrap: anywhere; }
.ai-workspace { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,var(--ai-workspace-column-width)),1fr)); gap: var(--ai-gap); align-items: start; }
.ai-agent-tree { display: block; height: var(--ai-tree-height); }
.ai-agent-tree > sys0-graph { height: 100%; }
.ai-trace-metrics { display: flex; flex-wrap: wrap; gap: var(--ai-gap); }
.ai-trace-metrics > div { flex: 1; border-inline-end: var(--ai-border); padding-inline-end: var(--ai-gap); }
.ai-trace-metrics dd { margin: 0; font-size: var(--ai-number-size); }
.ai-status { white-space: nowrap; }
.ai-task[data-variant="line"] .ai-meta { min-width: 0; max-width: var(--ai-meta-width); white-space: nowrap; overflow: hidden; }
.ai-task[data-variant="line"] .ai-meta > span { overflow: hidden; text-overflow: ellipsis; }
.ai-workflow-box, .ai-agent-inbox, .ai-agent-worktree, .ai-context-window, .ai-decision-tree, .ai-model-picker, .ai-permission-panel, .ai-chat-box, .ai-trace-timeline { min-width: 0; }
.ai-task-expanded { display: grid; gap: var(--ai-gap); }
:where(sys0-ai-agent,sys0-ai-agent-roster,sys0-ai-notice,sys0-ai-toast-stack) { display: block; min-width: 0; }
.ai-text-button { appearance: none; min-width: 0; min-height: 0; height: auto; border: none; background: none; box-shadow: none; padding: 0; color: inherit; cursor: pointer; text-transform: none; letter-spacing: normal; }
.ai-text-button:hover { color: var(--ai-link); background: none; box-shadow: none; text-decoration: underline; }
.ai-text-button:active { transform: none; box-shadow: none; }
.ai-text-button::before,.ai-text-button::after { display: none; }
.ai-heading { align-items: start; }
.ai-heading .ai-title { flex: 1; }
.ai-title { line-height: var(--ai-title-line-height); }
.ai-panel { font-size: var(--ai-body-size); line-height: var(--ai-body-line-height); }
.ai-status { padding: var(--ai-status-padding); border-radius: var(--ai-status-radius); background: var(--ai-status-surface); }
.ai-task-body > * + *, .ai-agent > div > * + * { margin-block-start: var(--ai-gap); }
.ai-task-attention { padding: var(--ai-padding); border-inline-start: var(--ai-attention-rule); background: var(--ai-attention-surface); }
.ai-task-attention p { margin-block-start: var(--ai-gap-small); }
.ai-task-progress { display: flex; gap: var(--ai-gap); align-items: center; font-size: var(--ai-font-small); color: var(--ai-muted); }
.ai-task-progress progress { flex: 1; height: var(--ai-progress-height); min-width: 0; max-width: var(--ai-progress-width); }
.ai-task-current .ai-working { padding: 0; min-block-size: 0; }
.ai-task-current .ai-working .ai-muted { display: none; }
.ai-record-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--ai-gap); flex-wrap: wrap; padding-block-start: var(--ai-gap); border-block-start: var(--ai-border); }
.ai-record-footer sys0-ai-actions { flex: 1; }
.ai-record-footer .ai-actions { justify-content: start; }
.ai-open-full { font-size: var(--ai-font-small); }
.ai-record-metrics { display: flex; gap: var(--ai-gap); flex-wrap: wrap; margin: 0; }
.ai-record-metrics > div { min-width: var(--ai-metric-width); }
.ai-record-metrics dt { color: var(--ai-muted); font-size: var(--ai-font-small); }
.ai-record-metrics dd { font-variant-numeric: tabular-nums; margin: 0; }
.ai-section h4, .ai-task-outcome h4 { margin: 0 0 var(--ai-gap-small); font: var(--ai-title-font); }
.ai-section ul { margin: 0; padding-inline-start: var(--ai-tree-indent); }
.ai-tag { padding-inline: var(--ai-gap-small); border-radius: var(--ai-radius); background: var(--ai-lane-surface); }
.ai-task[data-variant=line] { display: block; padding: var(--ai-row-padding); box-shadow: none; }
.ai-task[data-variant=line] .ai-task-body { display: flex; align-items: center; gap: var(--ai-gap); }
.ai-task[data-variant=line] :is(.ai-task-summary,.ai-task-attention,.ai-task-current,.ai-task-progress,.ai-record-footer,.ai-meta) { display: none; }
.ai-task[data-variant=line] .ai-heading { align-items: center; }
.ai-task[data-variant=card] .ai-task-summary { display: -webkit-box; -webkit-line-clamp: var(--ai-summary-lines); -webkit-box-orient: vertical; overflow: hidden; }
.ai-inbox-filters { display: flex; align-items: center; flex-wrap: wrap; gap: var(--ai-gap-small); margin-block: var(--ai-gap); }
.ai-inbox-filters button { min-width: 0; font-size: var(--ai-font-small); }
.ai-inbox-list { gap: 0; }
.ai-inbox-list .ai-task { border-radius: 0; border: none; border-block-end: var(--ai-border); }
.ai-agent-roster { margin-block-start: var(--ai-padding); }
.ai-agent-roster h3 { font: var(--ai-title-font); }
.ai-roster-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,var(--ai-agent-card-width)),1fr)); gap: var(--ai-gap); }
.ai-agent-role { color: var(--ai-muted); font-size: var(--ai-font-small); }
.ai-agent-expanded > * + * { margin-block-start: var(--ai-padding); }
.ai-agent-tasks { display: flex; gap: var(--ai-gap-small); flex-wrap: wrap; }
.ai-agent[data-variant=line] { padding: var(--ai-row-padding); box-shadow: none; }
.ai-agent[data-variant=line] :is(.ai-agent-description,.ai-record-footer,sys0-ai-working) { display: none; }
.ai-notice { display: flex; align-items: start; gap: var(--ai-gap); flex-wrap: wrap; border: var(--ai-border); border-inline-start: var(--ai-notice-rule); border-radius: var(--ai-radius); padding: var(--ai-padding); color: var(--ai-text); background: var(--ai-surface); }
.ai-notice-content { flex: 1; min-width: min(100%,var(--ai-notice-content-width)); }
.ai-notice p { margin: var(--ai-gap-small) 0 0; }
.ai-notice[data-kind=warning] { border-inline-start-color: var(--ai-status-attention); }
.ai-notice[data-kind=error] { border-inline-start-color: var(--ai-status-failed); }
.ai-notice[data-kind=success] { border-inline-start-color: var(--ai-status-done); }
.ai-notice[data-read] { background: var(--ai-lane-surface); }
.ai-toast-stack { display: grid; gap: var(--ai-gap); max-width: var(--ai-toast-width); margin-inline-start: auto; }
.ai-toast-stack:empty { display: none; }
.ai-workspace { grid-template-columns: repeat(auto-fit,minmax(min(100%,var(--ai-workspace-column-width)),1fr)); }
.ai-workspace-index > * + * { margin-block-start: var(--ai-gap); }
.ai-workspace[data-level=expanded] { grid-template-columns: minmax(0,1fr); }
.ai-workspace[data-level=expanded] > .ai-workspace-index { display: none; }
.ai-workspace-selection { min-width: 0; }
.ai-selection-nav { display: flex; justify-content: space-between; align-items: center; gap: var(--ai-gap); margin-block-end: var(--ai-gap); color: var(--ai-muted); font-size: var(--ai-font-small); }
.ai-selection-empty { align-self: center; padding: var(--ai-padding); }
.chat-workspace { flex: none; padding: var(--ai-gap); border-block-end: var(--ai-border); }
.chat-workspace:empty { display: none; }
.chat-workspace .ai-workspace { display: block; }
.chat-workspace .ai-selection-empty { display: none; }
.chat-workspace .ai-inbox-filters { display: none; }
.chat-workspace .ai-agent-inbox > .ai-heading > .ai-actions { display: none; }
.chat-workspace .ai-agent-inbox h3 { font: var(--ai-title-font); }
.chat-workspace .ai-workspace-selection { margin-block-start: var(--ai-padding); }
.chat-workspace .ai-roster-grid { display: flex; overflow-x: auto; }
.chat-workspace .ai-roster-grid > * { flex: 0 0 var(--ai-chat-agent-width); }
.chat-workspace .ai-agent-roster h3 { font-size: var(--ai-font-small); }
.chat-workspace .ai-task[data-variant=line] { padding-inline: 0; }
.ai-agent[data-variant=line] :is(.ai-agent-role,.ai-meta) { display: none; }
.ai-agent[data-variant=line] .ai-heading { align-items: center; }
.desktop > .window > .chat-dock > .window-body { display: flex; flex-direction: column; }
.chat-dock .chat-threads { flex: 1; min-height: 0; box-sizing: border-box; padding: var(--space-grouped); border: 0; background: none; }
.chat-dock[data-inspection=expanded] .chat-form { display: none; }
.yodag-inspector { border: 1px solid var(--color-shadow); border-radius: 14px; overflow: hidden; background: var(--color-canvas); margin: 12px 0; }
.yodag-toolbar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:12px 16px; border-bottom:1px solid var(--color-shadow); }
.yodag-toolbar strong { letter-spacing:-.04em; font-size:20px; margin-right:6px; }
.yodag-count { opacity:.65; font-size:12px; flex:1; }
.yodag-toolbar input { max-width:190px; }
.yodag-body { display:grid; grid-template-columns:minmax(0,1fr) 290px; min-height:420px; }
.yodag-body > sys0-graph { height:460px; min-width:0; background-image:none; }
.yodag-evidence { border-left:1px solid var(--color-shadow); padding:16px; overflow:auto; max-height:460px; font-size:12px; }
.yodag-evidence h4 { margin:0 0 12px; font-size:15px; }
.yodag-evidence pre { white-space:pre-wrap; overflow-wrap:anywhere; font-size:11px; line-height:1.65; }
.yodag-metadata { opacity:.65; }
sys0-graph .graph-tile { box-shadow:0 3px 9px color-mix(in srgb,var(--color-text) 7%,transparent); transition:box-shadow .15s, border-color .15s; }
sys0-graph .graph-node[aria-selected="true"] .graph-tile { box-shadow:0 0 0 4px color-mix(in srgb,var(--color-highlight) 14%,transparent),0 5px 18px color-mix(in srgb,var(--color-text) 8%,transparent); }
sys0-graph .graph-node:focus-visible { outline:none; }
sys0-graph .graph-node:focus-visible .graph-tile { outline:2px solid var(--color-highlight); outline-offset:3px; }
:is(sys0-graph, sys0-component-state-graph) .graph-label { font-weight:600; }
@media(max-width:760px) { .yodag-body { grid-template-columns:1fr; } .yodag-evidence { border-left:0;border-top:1px solid var(--color-shadow);max-height:220px; } }
@media(prefers-reduced-motion:reduce) { sys0-graph .graph-wire,sys0-graph .graph-tile { animation:none!important;transition:none!important; } }
.command-catalog { margin:12px 0; }
.command-catalog-entries { max-height:360px;overflow:auto;padding:12px; }
.command-catalog-entries details { margin:8px 0; }
.command-catalog-entries pre { white-space:pre-wrap;overflow-wrap:anywhere; }
.voice-controls:has(.voice-evals:not([hidden])) > :is(.voice-jev,.voice-conversation,.command-catalog) { display:none; }
.voice-eval-layout { height:64vh; overflow:hidden; }
.voice-eval-list,.voice-eval-content { min-height:0; }
.voice-eval-toolbar { flex-wrap:wrap; }
.voice-eval-content .yodag-body { grid-template-columns:minmax(0,1fr); }
.voice-eval-content .yodag-evidence { border-left:0; border-top:1px solid var(--color-shadow); max-height:220px; }
.voice-timeline-disclosure { border-top:1px solid var(--color-shadow);padding-top:12px; }
@media(max-width:760px) { .voice-eval-layout { height:auto;max-height:none;overflow:visible; } .voice-eval-content { max-height:65vh; } }
.voice-attempt-header { border:0;border-bottom:1px solid var(--color-shadow);padding:8px 0 12px; }
.launcher.switcher:focus { outline: none; }
.system-message h2 { font-size: var(--font-size); margin: 0 0 var(--space-grouped); }
.system-message small { font-size: var(--font-size-small); color: var(--color-text-disabled); }
.system-message > .icon-image { float: inline-start; --icon-size: 48px; margin: 0 var(--space) var(--space-grouped) 0; }
.about-repository { display: inline-flex; align-items: center; gap: var(--space-grouped); }
.about-repository .icon-image { width: 16px; height: 16px; flex: none; font-size: 0; }
.selection-explanation { flex: 0 1 auto; min-height: 0; max-height: 55%; overflow: auto; padding: var(--space-grouped); border-bottom: var(--border-line); }
.selection-explanation .field-row { flex-wrap: wrap; }
.selection-explanation p { overflow-wrap: anywhere; }
.selection-explanation pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.dot-scope { position: fixed; left: 50%; width: 304px; height: 80px; margin-left: -152px; margin-top: -27px; pointer-events: none; z-index: 30000; }
.dot-scope[hidden] { display: none; }
sys0-shell > .desktop > .system-window.window.background-tasks-window[role="dialog"]:not(.placed) { top: 8%; width: min(1000px, calc(100% - 32px)); height: min(680px, calc(84% - 24px)); max-width: none; max-height: none; }
[data-thread-surface] { opacity: 1; transform: translateX(0) scale(1); transform-origin: left top; transition: transform 220ms cubic-bezier(.32,.72,0,1), opacity 220ms cubic-bezier(.32,.72,0,1); }
[data-thread-surface="closed"] { opacity: 0; transform: translateX(-8px) scale(.96); transition-duration: 160ms; pointer-events: none; }
.thread-edge-item[data-thread-surface] { transform-origin: left center; }
.thread-edge[data-inward] [data-thread-surface] { transform-origin: right top; }
.thread-edge[data-inward] [data-thread-surface="closed"] { transform: translateX(8px) scale(.96); }
.thread-edge-specimen { position: relative; width: 420px; height: 440px; }
.thread-edge { position: absolute; inset: 56px auto auto calc(100% - 6px); display: flex; flex-direction: column; align-items: flex-start; gap: 4px; z-index: 8; max-height: calc(100% - 68px); }
.thread-edge[hidden] { display: none; }
.thread-edge-item { position: relative; width: 44px; flex: 0 0 44px; color: var(--thread-flag-ink); }
.thread-edge-item:is([data-view="summary"],[data-view="card"]) { z-index: 2; }
button.thread-edge-tab { position: relative; display: block; width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; border: 0; border-radius: var(--thread-flag-radius); background: none; box-shadow: none; color: var(--thread-flag-ink); text-align: left; isolation: isolate; }
button.thread-edge-tab::before { content: ''; position: absolute; z-index: -1; left: 0; top: 5px; width: 300px; height: 34px; box-sizing: border-box; border: var(--thread-flag-border); border-radius: var(--thread-flag-folded-radius); background: var(--thread-flag-overlay),oklch(var(--thread-flag-lightness) var(--thread-flag-chroma) var(--thread-hue)); box-shadow: var(--thread-flag-shadow); transform-origin: left center; transform: scaleX(.146667); transition: transform; transition-duration: inherit; transition-timing-function: inherit; }
button.thread-edge-tab::after { content: ''; position: absolute; left: 0; top: 5px; width: 10px; height: 34px; background: var(--thread-flag-seam); pointer-events: none; }
.thread-edge-item:is([data-view="summary"],[data-view="card"]) .thread-edge-tab { width: 300px; }
.thread-edge-item:is([data-view="summary"],[data-view="card"]) .thread-edge-tab::before { border-radius: var(--thread-flag-radius); transform: scaleX(1);  }
.thread-edge-status { position: absolute; left: 17px; top: 14px; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: 16px; height: 16px; color: inherit; font-weight: bold; line-height: 1; }
.thread-edge-item:is([data-state="working"],[data-state="naming"]) .thread-edge-status { border: 2px solid currentColor; border-right-color: transparent; border-radius: var(--thread-status-radius); animation: thread-flag-work 1.2s linear infinite; }
.thread-edge-item[data-state="attention"] .thread-edge-status { animation: thread-flag-attention 2.4s ease-in-out infinite; }
@keyframes thread-flag-work { to { transform: rotate(360deg); } }
@keyframes thread-flag-attention { 0%,65%,100% { transform: translateY(0); } 75% { transform: translateY(-2px); } 85% { transform: translateY(1px); } }
.thread-edge-title { position: absolute; left: 48px; right: 30px; top: 0; height: 44px; line-height: 44px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; visibility: hidden; transform: translateX(-8px); transition: transform 150ms cubic-bezier(.32,.72,0,1),opacity 100ms ease,visibility 0s 150ms; }
.thread-edge-item:is([data-view="summary"],[data-view="card"]) .thread-edge-title { opacity: 1; visibility: visible; transform: none; transition-duration: 210ms,150ms,0s; transition-delay: 0s; }
.thread-edge-report { position: absolute; bottom: calc(100% + 3px); left: 12px; width: max-content; max-width: 270px; box-sizing: border-box; padding: 7px 10px; border: var(--thread-rider-border); border-radius: var(--thread-rider-radius); color: var(--thread-rider-ink); background: var(--thread-rider-face); box-shadow: var(--thread-rider-shadow); font-size: var(--font-size); line-height: 1.35; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(4px); transform-origin: bottom left; transition: transform 150ms cubic-bezier(.32,.72,0,1),opacity 150ms ease,visibility 0s 150ms; }
.thread-edge-item:is([data-view="summary"],[data-view="card"]) .thread-edge-report { opacity: 1; visibility: visible; transform: none; transition-duration: 210ms,150ms,0s; transition-delay: 0s; }
.thread-edge-card { position: absolute; top: calc(100% + 3px); left: 10px; width: min(320px,calc(100vw - 28px)); max-height: min(440px,calc(100dvh - 160px)); overflow: auto; box-sizing: border-box; padding: var(--space); border: var(--thread-card-border); border-radius: var(--thread-card-radius); background: var(--thread-card-face); color: var(--color-text); box-shadow: var(--thread-card-shadow); visibility: hidden; opacity: 0; transform: translateY(-6px) scale(.97); transform-origin: top left; transition: transform 150ms cubic-bezier(.32,.72,0,1),opacity 150ms ease,visibility 0s 150ms; }
.thread-edge-item[data-view="card"] .thread-edge-card { visibility: visible; opacity: 1; transform: none; transition-duration: 210ms,150ms,0s; transition-delay: 0s; }
.thread-edge-card header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-grouped); padding-bottom: var(--space-grouped); margin-bottom: var(--space-grouped); border-bottom: var(--border-line); }
.thread-edge-card header strong { line-height: 1.4; text-wrap: pretty; }
.thread-edge-card header button { min-width: 0; padding-inline: var(--space-grouped); }
button.thread-edge-dismiss { position: absolute; left: 272px; top: 10px; min-width: 24px; min-height: 24px; padding: 0; border: 0; border-radius: var(--thread-flag-radius); background: none; box-shadow: none; color: var(--thread-flag-ink); opacity: 0; visibility: hidden; pointer-events: none; }
.thread-edge-item:is([data-view="summary"],[data-view="card"]) .thread-edge-dismiss { opacity: 1; visibility: visible; pointer-events: auto; }
@media (hover: hover) and (pointer: fine) {
button.thread-edge-tab:hover::before { filter: brightness(var(--thread-flag-hover)); }
button.thread-edge-dismiss:hover { background: color-mix(in srgb,var(--thread-flag-ink) 12%,transparent); }
}
button.thread-edge-tab:active { transform: translateX(1px); }
button.thread-edge-tab:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.thread-edge[data-keyboard] :is(.thread-edge-title,.thread-edge-report,.thread-edge-card,.thread-edge-tab),.thread-edge[data-keyboard] .thread-edge-tab::before { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
[data-thread-surface],.thread-edge :is(.thread-edge-title,.thread-edge-report,.thread-edge-card,.thread-edge-tab),.thread-edge .thread-edge-tab::before { transition: none; }
.thread-edge-status { animation: none !important; }
}
.thread-edge-content > small { display: block; color: var(--color-text-disabled); margin-bottom: var(--space-grouped); }
.thread-edge-content > p { margin: 0 0 var(--space); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 240px; overflow: auto; line-height: 1.5; }
.thread-edge-card footer,.thread-edge-draft footer,.agent-question-actions { display: flex; flex-wrap: wrap; gap: var(--space-grouped); margin-top: var(--space-grouped); }
.thread-edge-content form { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-grouped); }
.thread-edge :is(textarea,input,select) { box-sizing: border-box; width: 100%; }
.thread-edge [role=alert]:empty,.agent-question [role=alert]:empty { display: none; }
.thread-edge-draft { position: absolute; left: 0; top: 0; width: min(320px,calc(100vw - 28px)); box-sizing: border-box; padding: var(--space); background: var(--thread-card-face); color: var(--color-text); border: var(--thread-card-border); border-radius: var(--thread-card-radius); box-shadow: var(--thread-card-shadow); }
.thread-edge-draft header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-grouped); margin-bottom: var(--space-grouped); }
.thread-edge-draft header button { min-width: 0; padding-inline: 8px; }
.thread-edge[data-inward] { right: 0; left: auto; align-items: flex-end; }
.thread-edge[data-inward] .thread-edge-tab { margin-left: auto; }
.thread-edge[data-inward] .thread-edge-item:is([data-view="summary"],[data-view="card"]) .thread-edge-tab { margin-left: -256px; }
.thread-edge[data-inward] .thread-edge-tab::before { left: auto; right: 0; transform-origin: right center; border-radius: var(--thread-flag-folded-inward-radius); }
.thread-edge[data-inward] .thread-edge-item:is([data-view="summary"],[data-view="card"]) .thread-edge-tab::before { border-radius: var(--thread-flag-inward-radius); }
.thread-edge[data-inward] .thread-edge-tab::after { left: auto; right: 0; transform: scaleX(-1); }
.thread-edge[data-inward] .thread-edge-status { left: auto; right: 17px; }
.thread-edge[data-inward] .thread-edge-title { left: 30px; right: 48px; }
.thread-edge[data-inward] .thread-edge-dismiss { left: auto; right: 272px; }
.thread-edge[data-inward] :is(.thread-edge-card,.thread-edge-report,.thread-edge-draft) { left: auto; right: 0; transform-origin: right top; }
.thread-edge[data-inward] .thread-edge-report { transform-origin: right bottom; }
.agent-question { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space); }
.agent-question > :is(.field-row-stacked,fieldset) { width: 100%; box-sizing: border-box; }
.agent-question :is(input,textarea,select) { max-width: 100%; }
@media (pointer: coarse) { .thread-edge { inset: 56px 0 auto auto; } .thread-edge :is(textarea,input,select) { font-size: 16px; } button.thread-edge-dismiss { min-width: 44px; min-height: 44px; left: 256px; top: 0; } .thread-edge[data-inward] .thread-edge-dismiss { left: auto; right: 256px; } .thread-edge-card header button { min-width: 44px; min-height: 44px; } .thread-edge-title { right: 44px; } .thread-edge[data-inward] .thread-edge-title { left: 44px; } }
.background-tasks-window > .window-body { display: flex; flex-direction: column; overflow: hidden; min-height: 0; }
.background-tasks-window > .window-body > footer:empty { display: none; }
.background-task-workspace { display: grid; grid-template-columns: minmax(240px, 0.65fr) minmax(0, 1.6fr); grid-template-rows: minmax(0, 1fr); min-height: 0; flex: 1; }
.background-task-workspace:has(.background-task-error:not(:empty)) { grid-template-rows: auto minmax(0, 1fr); }
.background-task-sidebar { display: flex; flex-direction: column; gap: var(--space-grouped); min-width: 0; min-height: 0; border-right: var(--border-line); padding: var(--space-grouped); background: color-mix(in srgb, var(--color-canvas) 42%, var(--color-surface)); }
.background-task-sidebar > header { display: flex; align-items: center; justify-content: space-between; gap: var(--space); }
.background-task-sidebar > header > strong { font-size: 1.1em; }
.background-task-sidebar > footer { border-top: var(--border-line); padding-top: var(--space-grouped); }
.background-task-sidebar > :is(input,select) { box-sizing: border-box; width: 100%; min-width: 0; }
.background-thread-filters { display: flex; flex-wrap: wrap; gap: 4px; }
.background-thread-filters > button { flex: 1 0 auto; min-width: 0; max-width: 100%; box-sizing: border-box; padding-inline: var(--space-grouped); font-size: var(--font-size-small); white-space: normal; }
.background-thread-filters > button[aria-pressed=true] { background: var(--color-highlight); color: var(--color-highlight-text); }
.background-thread-list { flex: 1; min-height: 0; }
.background-thread-group { margin-block: var(--space-grouped); }
.background-thread-group > h4 { margin: 0; padding: var(--space-grouped); font-size: var(--font-size-small); color: var(--color-text-disabled); overflow-wrap: anywhere; }
.background-thread-group > h4 > span { display: block; color: var(--color-text); }
.background-thread-group > h4 > small { display: block; margin-top: 2px; font-size: inherit; font-weight: normal; }
.background-thread { display: flex; align-items: flex-start; gap: var(--space-grouped); padding: var(--space-grouped); border-radius: var(--button-radius); cursor: default; }
.background-thread[aria-selected=true] { background: var(--color-highlight); color: var(--color-highlight-text); }
.background-thread[data-child] { margin-left: var(--space); border-left: var(--border-line); border-top-left-radius: 0; border-bottom-left-radius: 0; }
.background-thread .talk-avatar { width: 2em; height: 2em; font-size: var(--font-size-small); }
.background-thread-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px var(--space-grouped); margin-top: 4px; }
.background-thread-origin { font-size: var(--font-size-small); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.background-thread-edge { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.background-thread-status { font-size: var(--font-size-small); opacity: 0.8; }
.background-thread-unread { flex: none; font-size: var(--font-size-small); }
.background-task-detail { display: flex; flex-direction: column; min-height: 0; min-width: 0; overflow: hidden; }
.background-thread-header { flex: none; display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-grouped) var(--space); padding: var(--space); border-bottom: var(--border-line); }
.background-thread-header h3 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; max-height: 2.6em; line-height: 1.3; overflow: hidden; margin: 0; width: 100%; overflow-wrap: anywhere; }
.background-thread-header p { margin: 0; }
.background-thread-header .background-thread-reason { width: 100%; overflow-wrap: anywhere; }
.background-thread-header > a { margin-left: auto; }
.background-thread-context { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-grouped); width: 100%; font-size: var(--font-size-small); }
.background-thread-context > span { padding: 2px var(--space-grouped); border: var(--border-line); border-radius: var(--button-radius); overflow-wrap: anywhere; }
.background-task-workspace[data-attached] { display: flex; flex-direction: column; min-width: 0; }
.background-task-workspace[data-attached] > .background-task-detail,
.background-task-workspace[data-attached] > .background-task-sidebar,
.background-task-workspace[data-attached] > .execution-connections { flex: 1; min-height: 0; }
.background-task-workspace[data-attached] > .background-task-sidebar { border-right: 0; }
.background-task-workspace[data-attached] > .background-task-detail[hidden],
.background-task-workspace[data-attached] > .background-task-sidebar[hidden] { display: none; }
.background-thread-navigation { display: flex; flex-wrap: wrap; gap: var(--space-grouped); padding: var(--space-grouped); border-bottom: var(--border-line); }
.background-task-workspace[data-attached] .background-thread-header > details { width: 100%; }
.background-task-workspace[data-attached] .background-thread-header > details > :not(summary) { margin-top: var(--space-grouped); }
.background-room-people { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-grouped); width: 100%; min-width: 0; font-size: var(--font-size-small); }
.background-room-people > small { color: var(--color-text-disabled); }
.background-room-members { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-grouped) var(--space); list-style: none; padding: 0; margin: 0; min-width: 0; }
.background-room-members > li { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-grouped); min-width: 0; }
.background-room-members > li > span { overflow-wrap: anywhere; }
.background-room-members small { color: var(--color-text-disabled); }
.background-thread-relations { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-grouped); padding: var(--space-grouped) var(--space); border-bottom: var(--border-line); font-size: var(--font-size-small); }
.background-thread-relations button { font-size: inherit; }
.background-task-log > .talk-message { padding-block: var(--space-grouped); }
.background-task-log .talk-body { max-width: 68ch; }
.background-task-log .talk-head { margin-bottom: 4px; }
.background-task-turn details { margin-block: 4px; font-size: var(--font-size-small); }
.background-task-turn summary { cursor: pointer; color: var(--color-text-disabled); }
.background-task-turn details[data-error] > summary { color: var(--color-error); }
.background-task-turn details > img { display: block; max-width: 100%; max-height: 360px; object-fit: contain; margin-top: var(--space-grouped); }
.background-thread-text { overflow-wrap: anywhere; user-select: text; }
.background-thread-text > :first-child { margin-top: 0; }
.background-thread-text > :last-child { margin-bottom: var(--space-grouped); }
.background-thread-empty { margin: auto; padding: calc(var(--space) * 2); max-width: 32em; }
.background-thread-empty h3 { margin-top: 0; }
.background-thread-empty p { line-height: 1.5; text-wrap: pretty; }
.background-thread-activity { padding-inline: var(--space); }
.background-thread-compose { flex: none; border-top: var(--border-line); }
.background-thread-compose > .talk-form { border-top: 0; }
.background-thread-compose button:is([aria-label="Add agent"],[aria-label^="Remove agent "]) { min-width: 0; padding-inline: var(--space-grouped); }
.background-task-compose:has(.background-group-submit) { flex-wrap: wrap; }
.background-task-compose:has(.background-group-submit) > textarea { flex-basis: 100%; }
.background-group-submit { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-grouped); width: 100%; }
.background-thread-compose > small { display: block; padding: 0 var(--space) var(--space-grouped); }
.background-thread-readonly { margin: 0; padding: var(--space); font-size: var(--font-size-small); overflow-wrap: anywhere; }
.execution-connections { grid-column: 2; grid-row: 1; overflow: auto; min-height: 0; padding: var(--space); }
.background-task-workspace:has(.background-task-error:not(:empty)) > .execution-connections { grid-row: 2; }
.execution-connections[hidden], .execution-connections > [role=alert]:empty { display: none; }
.background-task-workspace:has(.execution-connections:not([hidden])) > .background-task-detail { display: none; }
.execution-connections > header { display: flex; align-items: center; justify-content: space-between; gap: var(--space); }
.execution-connections :is(h3,h4,p) { margin: 0; }
.execution-connections > :is(p,div) { margin-top: var(--space-grouped); }
.execution-connection-list p { max-width: 60ch; }
.execution-default { display: grid; gap: var(--space-grouped); }
.execution-default select { min-width: 0; width: 100%; }
.execution-connection-list { display: grid; gap: var(--space); }
.execution-connection-form { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-grouped); }
.execution-connection-form label { display: grid; gap: 4px; }
.execution-connection-form input { min-width: 0; width: 100%; box-sizing: border-box; }
.execution-connection-form :is(section,[role=alert],.background-task-actions) { grid-column: 1 / -1; }
.execution-connection-form [hidden] { display: none; }
.execution-connection-form [role=alert]:empty { display: none; }
.execution-github-connect { display: grid; gap: var(--space-grouped); }
.background-task-error { grid-column: 1 / -1; margin: 0; }
.background-task-error:empty { display: none; }
.background-task-turn pre, .background-task-proposals pre { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 360px; overflow: auto; }
.background-task-proposals { margin: var(--space); padding: var(--space-grouped); border: var(--border-line); border-radius: var(--groupbox-radius); }
.background-task-proposals h4 { margin-top: 0; }
.background-task-actions { display: flex; flex-wrap: wrap; gap: var(--space-grouped); margin-block: var(--space-grouped); }
.background-task-compose textarea { box-sizing: border-box; }
.menubar-tasks { position: relative; font-variant-numeric: tabular-nums; }
@media (max-width: 600px) {
.background-task-workspace { grid-template-columns: minmax(140px, 0.65fr) minmax(0, 1.6fr); }
.background-task-sidebar { padding: var(--space-grouped); }
.background-task-sidebar > header { flex-direction: column; align-items: stretch; }
.background-thread-filters { flex-direction: column; }
.background-thread-filters > button, .background-task-sidebar > header > button, .background-task-sidebar > footer > button, .background-thread-relations button { min-height: 44px; }
.background-thread { min-height: 44px; }
.background-thread .talk-avatar { display: none; }
.background-thread-edge .talk-time { display: none; }
.background-thread-header { padding: var(--space-grouped); }
.background-task-actions button, .background-task-compose button { min-height: 44px; }
.background-task-compose textarea, .background-task-sidebar :is(input,select), .execution-connections :is(input,select) { font-size: 16px; }
.execution-connection-form { grid-template-columns: 1fr; }
.background-task-detail .talk-message { padding-inline: var(--space-grouped); gap: var(--space-grouped); }
.background-task-detail .talk-avatar { display: none; }
.background-task-detail .talk-message.joined { padding-left: var(--space-grouped); }
}
.execution-connections { padding: var(--space); }
.execution-connections > header { align-items: flex-start; margin-bottom: var(--space); }
.execution-connections > header p { margin-top: 4px; }
.execution-connections > [role=tablist] { display: flex; gap: var(--space-grouped); margin-bottom: var(--space); }
.execution-connections > [role=tablist] > button { flex: 1; }
.execution-connections > [role=tablist] > [aria-selected=true] { font-weight: bold; }
.agent-settings-pane { display: grid; gap: var(--space); min-width: 0; }
.agent-settings-pane h4 { margin: 0; }
.agent-section-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-grouped); }
.agent-settings-note { max-width: 60ch; font-size: var(--font-size-small); }
.agent-host-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: start; column-gap: var(--space-grouped); padding: var(--space-grouped); border: var(--border-line); border-radius: var(--groupbox-radius); }
.agent-host-row > .icon-image { width: 32px; height: 32px; }
.agent-host-copy { display: grid; gap: 4px; overflow-wrap: anywhere; }
.agent-host-row > .background-task-actions, .agent-host-row > p { grid-column: 2 / -1; }
.agent-default-badge { font-size: var(--font-size-small); padding: 2px 6px; border: var(--border-line); border-radius: var(--button-radius); }
.agent-host-field, .execution-default { display: grid; gap: var(--space-grouped); }
.agent-host-field select { width: 100%; min-width: 0; }
.agent-provider-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-grouped); }
.agent-provider-card { display: flex; flex-direction: column; gap: var(--space-grouped); padding: var(--space); border: var(--border-line); border-radius: var(--groupbox-radius); min-width: 0; }
.agent-provider-card > header { display: flex; gap: var(--space-grouped); align-items: center; }
.agent-provider-card > header .icon-image { width: 32px; height: 32px; flex: none; }
.agent-provider-card h4 { overflow-wrap: anywhere; }
.agent-provider-card small, .agent-provider-account { font-size: var(--font-size-small); overflow-wrap: anywhere; }
.agent-provider-card > button { align-self: flex-start; margin-top: auto; }
.agent-provider-status { display: flex; align-items: center; gap: 6px; }
.agent-status-dot { width: 6px; height: 6px; border: var(--border-line); border-radius: 50%; background: var(--color-surface); }
.agent-provider-card[data-connected=true] .agent-status-dot { background: var(--color-text); }
.agent-request-controls { display: grid; gap: var(--space-grouped); padding: var(--space-grouped) var(--space); border-top: var(--border-line); min-width: 0; }
.agent-run-on { display: flex; align-items: center; gap: var(--space-grouped); }
.agent-run-on select { min-width: 0; max-width: 100%; flex: 1; }
.agent-credentials-note { font-size: var(--font-size-small); overflow-wrap: anywhere; }
.agent-model-picker { min-width: 0; }
.agent-settings-pane .agent-model-picker { min-height: 0; }
@media (max-width: 600px) {
.agent-provider-grid { grid-template-columns: 1fr; }
.agent-settings-pane button { min-height: 44px; }
.agent-request-controls :is(input,select) { font-size: 16px; }
.agent-host-row { grid-template-columns: 24px minmax(0, 1fr); }
.agent-host-row > .icon-image { width: 24px; height: 24px; }
.agent-default-badge { grid-column: 2; justify-self: start; }
}
.agent-settings-notice { font-size: var(--font-size-small); }
.agent-settings-notice:empty { display: none; }
.agent-settings-pane .agent-model-picker { padding: var(--space-grouped); border: var(--border-line); border-radius: var(--groupbox-radius); background: var(--ai-surface); }
.agent-settings-pane .agent-model-picker .ai-model-bar { width: 100%; }
.thread-workflow { flex: none; max-height: 60%; overflow: auto; padding: var(--space-grouped) var(--space); border-bottom: var(--border-line); }
.thread-workflow-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-grouped); }
.thread-workflow-progress { display: flex; flex-wrap: wrap; gap: var(--space-grouped); list-style: none; padding: 0; margin: var(--space-grouped) 0; }
.thread-workflow-progress li { color: var(--color-text-disabled); }
.thread-workflow-progress li + li::before { content: "→"; margin-right: var(--space-grouped); color: var(--color-text-disabled); }
.thread-workflow-progress [aria-current="step"] { color: var(--color-text); font-weight: bold; border-bottom: 2px solid var(--color-highlight); }
.thread-workflow > small { display: block; color: var(--color-text-disabled); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.thread-workflow-panel { margin-top: var(--space); }
.thread-workflow-panel sys0-graph { height: 19em; min-height: 220px; border: var(--border-line); }
.thread-workflow-evidence { max-height: 8em; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--font-mono); font-size: 0.9em; }
.thread-workflow[data-stale] strong { color: var(--color-error); }
:root {
--icon-band-apps: var(--sys0-asset-band-apps);
--icon-band-files: var(--sys0-asset-band-files);
--icon-band-desktop: var(--sys0-asset-band-desktop);
--icon-band-sound: var(--sys0-asset-band-sound);
--icon-band-hearing: var(--sys0-asset-band-hearing);
--icon-band-chat: var(--sys0-asset-band-chat);
--icon-band-network: var(--sys0-asset-band-network);
--icon-band-secrets: var(--sys0-asset-band-secrets);
--icon-band-clock: var(--sys0-asset-band-clock);
--icon-band-looking: var(--sys0-asset-band-looking);
--icon-band-pointer: var(--sys0-asset-band-pointer);
--icon-band-beyond: var(--sys0-asset-band-beyond);
--icon-chat-shell: var(--sys0-asset-chat-shell);
--icon-chat-read: var(--sys0-asset-chat-read);
--icon-chat-edit: var(--sys0-asset-chat-edit);
--icon-chat-search: var(--sys0-asset-chat-search);
--icon-chat-task: var(--sys0-asset-chat-task);
--icon-chat-thinking: var(--sys0-asset-chat-thinking);
--icon-chat-tool: var(--sys0-asset-chat-tool);
--icon-chat-open: var(--sys0-asset-chat-open);
--icon-chat-copy: var(--sys0-asset-chat-copy);
--icon-chat-fork: var(--sys0-asset-chat-fork);
--icon-chat-fast: var(--sys0-asset-chat-fast);
--icon-chat-fast-on: var(--sys0-asset-chat-fast-on);
--icon-menu-arrows: var(--sys0-asset-menu-arrows);
--icon-search: var(--sys0-asset-search);
}
@font-face {
font-family: Tahoma;
src: local("Tahoma");
font-weight: normal;
ascent-override: 100%;
descent-override: 18.1818%;
line-gap-override: 0%;
}
@font-face {
font-family: Tahoma;
src: local("Tahoma Bold"), local("Tahoma-Bold");
font-weight: bold;
ascent-override: 100%;
descent-override: 18.1818%;
line-gap-override: 0%;
}
:root {
--w-light: var(--w-face);
--w-frame: #000000;
--w-text: #000000;
--w-title: linear-gradient(90deg, var(--w-title-left) 50%, var(--w-title-right) 0);
--w-title-inactive: linear-gradient(90deg, var(--w-title-inactive-left) 50%, var(--w-title-inactive-right) 0);
--w-title-run: linear-gradient(90deg, var(--w-title-left) 0.5px, var(--w-title-right) calc(100% + 0.5px)) 0 0 / 100% 1px repeat-y;
--w-title-inactive-run: linear-gradient(90deg, var(--w-title-inactive-left) 0.5px, var(--w-title-inactive-right) calc(100% + 0.5px)) 0 0 / 100% 1px repeat-y;
--w-size-grip: linear-gradient(to top left, transparent 1.0607px, var(--w-shadow) 0 2.4749px, var(--w-hilite) 0 3.182px, transparent 0 3.8891px, var(--w-shadow) 0 5.3033px, var(--w-hilite) 0 6.0104px, transparent 0 6.7175px, var(--w-shadow) 0 8.1317px, var(--w-hilite) 0 8.8388px, transparent 0);
--w-raised: inset -1px -1px var(--w-dark), inset 1px 1px var(--w-hilite), inset -2px -2px var(--w-shadow), inset 2px 2px var(--w-light);
--w-sunken: inset -1px -1px var(--w-hilite), inset 1px 1px var(--w-dark), inset -2px -2px var(--w-light), inset 2px 2px var(--w-shadow);
--w-thin-raised: inset -1px -1px var(--w-shadow), inset 1px 1px var(--w-hilite);
--w-thin-sunken: inset -1px -1px var(--w-hilite), inset 1px 1px var(--w-shadow);
--color-text: var(--w-text);
--color-text-disabled: var(--w-shadow);
--color-surface: var(--w-face);
--color-canvas: var(--w-window);
--color-shadow: var(--w-shadow);
--color-highlight: var(--w-highlight);
--color-highlight-text: var(--w-highlight-text);
--color-link: #0000ff;
--color-error: #800000;
--border-line: 1px solid var(--w-shadow);
--font-ui: Tahoma, Arial, sans-serif;
--font-mono: "Courier New", Courier, monospace;
--font-size: 11px;
--line-height: normal;
--font-size-small: var(--font-size);
--space: 8px;
--space-grouped: 6px;
--font-smoothing: none;
--font-heading: var(--font-ui);
--heading-weight: bold;
--focus-ring: 1px dotted var(--w-text);
--separator-highlight: 1px solid var(--w-hilite);
--text-disabled-shadow: 1px 1px 0 var(--w-hilite);
--bevel-raised: var(--w-raised);
--bevel-pressed: var(--w-sunken);
--bevel-toggled: var(--w-sunken);
--bevel-default: inset 0 0 0 1px var(--w-frame), inset -2px -2px var(--w-dark), inset 2px 2px var(--w-hilite), inset -3px -3px var(--w-shadow), inset 3px 3px var(--w-light);
--bevel-default-pressed: inset 0 0 0 1px var(--w-frame), inset 0 0 0 2px var(--w-shadow);
--bevel-window: inset -1px -1px var(--w-dark), inset 1px 1px var(--w-light), inset -2px -2px var(--w-shadow), inset 2px 2px var(--w-hilite);
--bevel-dialog: var(--bevel-window);
--bevel-field: inset -1px -1px var(--w-hilite), inset 1px 1px var(--w-shadow), inset -2px -2px var(--w-light), inset 2px 2px var(--w-dark);
--bevel-status: var(--w-thin-sunken);
--bevel-tab: none;
--bevel-progress: var(--w-thin-sunken);
--bevel-scrollbar-thumb: var(--w-edge-raised);
--bevel-alert: none;
--button-font: var(--font-ui);
--button-min-width: 75px;
--button-min-height: 23px;
--button-padding-x: 4px;
--button-padding-y: 0px;
--w-button-lift: 2px;
--w-focus-inset: 4px;
--w-focus-dots: repeating-conic-gradient(var(--w-frame) 0 25%, transparent 0 50%);
--button-text: var(--w-text);
--button-face: var(--w-face);
--button-border: none;
--button-radius: 0;
--button-press-offset: 1px;
--button-active-text: var(--w-text);
--button-active-face: var(--w-face);
--button-toggled-text: var(--w-text);
--button-toggled-face: repeating-conic-gradient(var(--w-hilite) 0 25%, var(--w-face) 0 50%) 0 0 / 2px 2px;
--button-focus-offset: -4px;
--field-font: var(--font-ui);
--field-text: var(--w-text);
--field-background: var(--w-window);
--field-border: none;
--field-radius: 0;
--field-padding: 3px 6px 5px;
--w-label-lift: 2px;
--field-row-stacked-gap: 3px;
--field-height: 21px;
--field-focus-text: var(--w-text);
--field-focus-background: var(--w-window);
--field-disabled-background: var(--w-face);
--field-readonly-text: var(--w-text);
--field-readonly-background: var(--w-face);
--select-padding-right: 22px;
--select-padding: 4px;
--select-height: var(--field-height);
--select-icon-position: top 2px right 2px;
--select-focus-background: var(--w-highlight);
--icon-select: var(--sys0-asset-w-combo-button);
--icon-select-active: var(--sys0-asset-button-down-active);
--select-disabled-background: var(--field-disabled-background);
--icon-select-disabled: var(--sys0-asset-w-combo-button-disabled);
--w-icon-updown: var(--sys0-asset-w-updown);
--w-icon-updown-disabled: var(--sys0-asset-w-updown-disabled);
--toggle-gap: 6px;
--w-toggle-text: 18px;
--w-radio-inset: 1px;
--checkbox-size: 13px;
--checkbox-background: var(--w-window);
--checkbox-border: none;
--checkbox-radius: 0;
--bevel-checkbox: var(--bevel-field);
--checkbox-disabled-background: var(--w-face);
--checkmark-size: 7px;
--icon-checkmark: var(--sys0-asset-checkmark);
--icon-checkmark-disabled: var(--sys0-asset-checkmark-disabled);
--radio-size: 12px;
--radio-dot-size: 4px;
--icon-radio: var(--sys0-asset-w-radio);
--icon-radio-active: var(--sys0-asset-w-radio-inactive);
--icon-radio-disabled: var(--sys0-asset-w-radio-inactive);
--icon-radio-dot: var(--sys0-asset-radio-dot);
--icon-radio-dot-disabled: var(--sys0-asset-radio-dot-disabled);
--groupbox-padding: 6px 8px 9px;
--groupbox-border: 2px solid transparent;
--groupbox-border-image: var(--sys0-asset-w-groupbox) 2;
--groupbox-radius: 0;
--legend-padding: 0 1px;
--legend-margin: 0 0 0 -3px;
--band-source-height: 24em;
--band-emphasis-weight: bold;
--band-glyph-size: 16px;
--band-token-height: 20px;
--band-token-radius: 0;
--band-token-text: var(--button-text);
--band-token-face: var(--button-face);
--band-token-border: 0 none;
--band-token-shadow: var(--bevel-raised);
--band-token-hover-face: var(--button-face);
--band-token-open-text: var(--color-highlight-text);
--band-token-open-face: var(--color-highlight);
--band-token-open-border: 0 none;
--band-token-open-shadow: var(--bevel-toggled);
--band-token-open-text-shadow: none;
--band-token-pending-border: 1px dotted var(--color-shadow);
--band-label-text: var(--color-text);
--band-sheet-radius: 0;
--band-sheet-notch: 10px;
--menu-check: "✓";
--menu-check-width: 1em;
--popup-menu-arrows-size: 1em;
--choice-grid-gap: 5px;
--popup-group-padding: 0 calc(var(--button-padding-x) / 2);
--popup-group-hover: color-mix(in srgb, var(--color-text) 7%, transparent);
--choice-grid-header-padding: 0 var(--space-grouped);
--popup-group-icon-size: calc(1.05 * var(--font-size));
--popup-group-icon-padding: 0 var(--button-padding-x);
--popup-group-divider: 1px solid color-mix(in srgb, var(--color-text) 14%, transparent);
--sound-press: url("3a6bc3d486675a511c1e7424e069d8db018b0900df4fed1ec1347c08f2e75aad.wav");
--sound-release: url("ba4d42dc8c136b64d1df9072cac2855e896145ad0304e13e118002c05a3961ec.wav");
--sound-check: url("a48914a1b71435c8cdd582c091108dc2daabd5dc38c63285cc064af1467f4826.wav");
--sound-uncheck: url("c8bcefc5cd26c65e644def40cb5966ad7967aea1baeccc05cdfa2b2ef802ce4f.wav");
--sound-power-up: url("6f6fbee1ce1409e4912ac936d8dc971d0704bc594ee3e3aa3f2ddf3d0c47e113.wav");
--sound-power-down: url("29272222c709db1e419db3e2f66856f469986f816c3cabf20a0f089853cd1041.wav");
--sound-select: url("46f0677e6a8fd2ada4da5e68e372cde3347398632f36d1c52b14228530bf5e59.wav");
--sound-menu: url("7c8c7ce6613844cc7603c81c6d315e2a83d19506758f5a3546a79bf4afaed478.wav");
--sound-choose: url("f0cb37315c026570c207c3620dceb11afa49640f5afce692e237b15cc3aef6bc.wav");
--sound-hover: url("341c50f38ad4ed76762197a2c30bf71d8ad68b5641cfc7a6a64a20f06f3720ed.wav");
--sound-slide-up: url("fe46e98024fa19e6b088fc24b424db39cfeed961bf9a6b337eecf20326fee66d.wav");
--sound-slide-down: url("10bb660afa351038c31b4a9dc095cae4b330a9a1ed38c9fb6fdd729609fd50ea.wav");
--sound-grab: url("2f11bfed7ba0e6c794242107174fb41a20d692f48777cc7609a3fd09289cb262.wav");
--sound-drop: url("50f0359ffe266c2e6afbe79ef3ae022c8437d630d3ec6e3e36f030ce8da88254.wav");
--sound-over: url("bf6a7f560d4456b7694f983c2fef354697b2a05a296dd9d53b0ff4f2d12a6772.wav");
--sound-scroll: url("ff4407cc8cf92a30a3556adac87f66257e688d049bbb0a2a702d16f3e7ecdf16.wav");
--sound-stretch: url("ff96dd6fc4bf789444f36385cc83046ee3bfd705447ba40be3f40d32d45e1685.wav");
--sound-resize: url("5834d52526ba4c7ffc13c43087ea2bd26a91a7043e01f5faaff54344016e353e.wav");
--sound-key: url("72f6c816dce7a2ffebeb8fda63d5d280a3f743b2df1374d59ec2b5f5f089abf8.wav");
--sound-open: url("119ae367889199415978b289a3088dfca646fe52a56dd8582100be6ec9077997.wav");
--sound-close: url("54ffa35b9f6588cbf1ff443ac1d05fc21a778824d50a7ba4210fc31fe25d786b.wav");
--sound-front: url("bf2c83cbe09d22014d63afaeb699c9833ee47cfcd69bc1ed7db3d7253f5a9e29.wav");
--sound-flip: url("c1fdea7c1108df0db3b817088845be465684955417cd2b62c75ffb08fd5728f1.wav");
--sound-dialog: url("9f6b15ae0bba8063efa57e5cf046d203fe2a0060043666520bb5675e0ead4875.wav");
--sound-alert: url("a704280c1e7f6bd467babf86ccabde80dc0a54189ebbb0582ea3b913cac4595b.wav");
--sound-done: url("fbbfbde2301e7e655739b00cd6a4bcf25007d5da585e52600a6d6b9963c20ddb.wav");
--sound-finish: url("632ffb039835b83af8cb1f6ada9b4e9c788b39566771b9535b4a1bbc56c9583f.wav");
--slider-track-height: 4px;
--slider-height: 24px;
--slider-track-background: var(--w-face);
--slider-track-border: none;
--slider-track-bevel: var(--bevel-field);
--slider-thumb-width: 11px;
--slider-tick-width: 1px;
--slider-tick-height: 5px;
--slider-tick-gap: 2px;
--slider-tick-color: var(--color-text);
--slider-thumb-height: 21px;
--slider-thumb-offset: 1.5px;
--slider-box-offset: 0.5px;
--icon-slider-thumb: var(--sys0-asset-w-thumb);
--icon-slider-box: var(--sys0-asset-w-thumb-box);
--icon-slider-thumb-active: var(--sys0-asset-w-thumb-dithered);
--icon-slider-thumb-disabled: var(--sys0-asset-w-thumb-dithered);
--icon-slider-box-active: var(--sys0-asset-w-thumb-box-dithered);
--icon-slider-box-disabled: var(--sys0-asset-w-thumb-box-dithered);
--w-slider-moz-offset: 1px;
--w-slider-moz-vertical-offset: 2px;
--w-slider-moz-vertical-box-offset: 1px;
--progress-height: 18px;
--progress-padding: 2px;
--progress-background: var(--w-face);
--progress-border: none;
--progress-radius: 0;
--progress-fill: var(--w-highlight);
--progress-segments: repeating-linear-gradient(90deg, var(--w-highlight) 0 9px, transparent 9px 11px);
--listbox-padding: 0px;
--option-padding: 0 2px;
--tree-toggle-background: var(--w-window);
--tree-toggle-border: 1px solid var(--w-shadow);
--tree-indent: 19px;
--tree-item-gap: 0px;
--tree-line: none;
--w-tree-dots-v: repeating-linear-gradient(180deg, var(--w-shadow) 0 1px, transparent 1px 2px);
--w-tree-dots-h: repeating-linear-gradient(90deg, var(--w-shadow) 0 1px, transparent 1px 2px);
--w-tree-minus: linear-gradient(var(--w-text) 0 0) 1px 3px / 5px 1px no-repeat;
--w-tree-plus: linear-gradient(var(--w-text) 0 0) 3px 1px / 1px 5px no-repeat, var(--w-tree-minus);
--cell-padding: 3px 6px 0;
--w-cell-line-height: 11px;
--w-first-cell-padding-left: 4px;
--table-cell-border: none;
--table-header-background: var(--w-face);
--table-header-border: none;
--table-header-padding: 2px 6px;
--w-tab-face:
linear-gradient(var(--w-hilite) 0 0) 0 2px / 1px 100% no-repeat,
linear-gradient(var(--w-hilite) 0 0) 1px 1px / 1px 1px no-repeat,
linear-gradient(var(--w-hilite) 0 0) 2px 0 / calc(100% - 4px) 1px no-repeat,
linear-gradient(var(--w-dark) 0 0) right 1px top 1px / 1px 1px no-repeat,
linear-gradient(var(--w-shadow) 0 0) right 1px top 2px / 1px 100% no-repeat,
linear-gradient(var(--w-dark) 0 0) right 0 top 2px / 1px 100% no-repeat,
var(--w-face);
--w-tab-min-width: 42px;
--w-tabpanel-bevel: inset -1px -1px var(--w-dark), inset 1px 1px var(--w-hilite), inset -2px -2px var(--w-shadow), inset 2px 2px var(--w-light);
--tab-gap: 0;
--segment-gap: var(--space-grouped);
--tablist-overlap: 0px;
--tablist-padding: 0 0 0 2px;
--tab-padding: 3px 6px 2px;
--tab-face: var(--w-tab-face);
--tab-border: none;
--tab-radius: 0;
--tab-selected-margin: -2px -2px -1px;
--tab-selected-padding: 3px 8px 5px;
--tab-selected-text: var(--w-text);
--tab-selected-face: var(--w-tab-face);
--tabpanel-padding: 13px 15px 15px;
--tabpanel-border: none;
--menu-font: var(--font-ui);
--menubar-padding: 0 0 1px;
--menubar-line-height: 13px;
--menubar-mark-width: 16px;
--menubar-mark-height: 16px;
--menubar-background: var(--w-face);
--menubar-border: 0 none;
--menubar-item-padding: 2px 6px 3px;
--menubar-gap: 0px;
--w-menubar-open-padding: 3px 5px 2px 7px;
--menubar-hover-text: var(--w-text);
--menubar-hover-background: transparent;
--menubar-hover-bevel: var(--w-thin-raised);
--menubar-open-text: var(--w-text);
--menubar-open-background: transparent;
--menubar-open-bevel: var(--w-thin-sunken);
--menu-min-width: 0px;
--menu-padding: 3px;
--menu-background: var(--w-face);
--menu-border: none;
--menu-bevel: var(--bevel-window);
--menu-item-padding: 1px 21px 3px 17px;
--menu-hover-text: var(--w-highlight-text);
--menu-hover-background: var(--w-highlight);
--menu-separator-margin: 3px 1px 4px;
--menu-separator: 1px solid var(--w-shadow);
--menu-separator-highlight: 1px solid var(--w-hilite);
--desktop-background: var(--w-desktop);
--window-padding: 4px;
--w-fixed-frame: 3px;
--window-border-width: 0px;
--window-border-color: transparent;
--window-radius: 0;
--resize-outset: 0px;
--resize-inset: 4px;
--resize-corner-x: 22px;
--resize-corner-y: 22px;
--grip-size: 0px;
--grip-offset: 4px;
--icon-grip: none;
--window-body-margin: 11px;
--dialog-footer-gap: 11px;
--dialog-footer-button-gap: 6px;
--dialog-footer-justify: flex-end;
--w-message-footer-gap: 17px;
--dialog-border-width: 0px;
--dialog-border-color: transparent;
--dialog-outline: none;
--dialog-outline-offset: 0;
--title-bar-font: var(--font-ui);
--title-bar-font-size: 11px;
--title-bar-font-weight: bold;
--title-bar-height: 19px;
--title-bar-margin: 0;
--title-bar-padding: 0;
--title-bar-gap: 0;
--title-bar-border: 1px solid var(--w-face);
--title-bar-text: var(--w-title-text);
--title-bar-background: var(--w-title);
--title-bar-inactive-text: var(--w-title-inactive-text);
--title-bar-inactive-background: var(--w-title-inactive);
--title-icon-display: block;
--title-icon-size: 16px;
--title-icon-margin: 0 0 0 2px;
--w-title-icon-cell: -1px 0 -1px -2px;
--title-text-flex: 1 1 auto;
--title-text-margin: 0;
--title-text-padding: 2px 0 0 2px;
--title-text-align: left;
--title-text-background: var(--w-title-run);
--title-controls-display: flex;
--title-controls-gap: 0;
--title-controls-inactive-visibility: visible;
--title-control-width: 18px;
--title-control-height: 18px;
--title-control-face: var(--w-face);
--title-control-border: 2px solid transparent;
--title-control-bevel: var(--w-raised);
--title-control-pressed-bevel: var(--w-sunken);
--w-glyph: 4px 3px;
--w-glyph-pressed: 5px 4px;
--w-glyph-minimize: 4px 9px;
--w-glyph-minimize-pressed: 5px 10px;
--w-glyph-maximize: 3px 2px;
--w-glyph-maximize-pressed: 4px 3px;
--w-glyph-help: 5px 2px;
--w-glyph-help-pressed: 6px 3px;
--title-control-pressed-position: var(--w-glyph-pressed);
--title-help-order: 2;
--title-flip-order: 2;
--title-minimize-order: 1;
--title-maximize-order: 2;
--title-close-order: 3;
--title-close-gap: 0px;
--icon-minimize: var(--sys0-asset-minimize);
--icon-maximize: var(--sys0-asset-maximize);
--icon-maximize-disabled: var(--sys0-asset-maximize-disabled);
--icon-restore: var(--sys0-asset-restore);
--icon-help: var(--sys0-asset-help);
--icon-flip: var(--sys0-asset-flip);
--icon-close: var(--sys0-asset-close);
--icon-close-active: var(--sys0-asset-close);
--status-bar-justify: flex-start;
--status-bar-gap: 2px;
--status-bar-padding: 2px 0 0;
--status-bar-border: none;
--status-field-flex: 1 1 auto;
--status-field-padding: 2px 2px 3px;
--status-field-border: none;
--toolbar-padding: 2px;
--toolbar-border: 1px solid var(--w-hilite);
--w-toolbar-etch: inset 0 -1px var(--w-shadow);
--vertical-bar-width: 3px;
--vertical-bar-height: auto;
--vertical-bar-margin: 2px 0;
--bevel-vertical-bar: var(--w-thin-raised);
--sunken-panel-border: 2px solid transparent;
--sunken-panel-border-image: var(--sys0-asset-w-sunken) 2;
--alert-background: var(--w-info);
--alert-border: 1px solid var(--w-frame);
--tooltip-text: var(--w-text);
--tooltip-background: var(--w-info);
--tooltip-border: 1px solid var(--w-frame);
--tooltip-shadow: none;
--tooltip-width: 20em;
--tooltip-delay: 600ms;
--window-arrange-travel: 240ms;
--window-arrange-ease-move: cubic-bezier(0.4, 0, 0.2, 1);
--window-arrange-arrive: 200ms;
--window-arrange-turn: 220ms;
--window-arrange-ease-enter: cubic-bezier(0, 0, 0.2, 1);
--window-arrange-leave: 150ms;
--window-arrange-ease-exit: cubic-bezier(0.4, 0, 1, 1);
--window-arrange-stagger: 35ms;
--window-arrange-scale: 0.96;
--tooltip-padding: 1px 2px;
--pill-text: var(--w-text);
--pill-background: var(--w-info);
--pill-border: 1px solid var(--w-shadow);
--pill-radius: 0;
--affordance-press: rgba(0, 0, 255, 0.25);
--affordance-type: rgba(0, 128, 0, 0.28);
--affordance-drag: rgba(255, 128, 0, 0.32);
--affordance-resize: rgba(255, 0, 255, 0.28);
--affordance-line: 1px;
--tutorial-enter-duration: 180ms;
--tutorial-enter-easing: cubic-bezier(0.25, 0.1, 0.25, 1);
--tutorial-enter-distance: 10px;
--tutorial-enter-scale: 1;
--tutorial-exit-duration: 150ms;
--tutorial-exit-easing: linear;
--tutorial-turn-duration: 120ms;
--tutorial-turn-easing: linear;
--tutorial-turn-distance: 0px;
--tutorial-chapter-duration: 200ms;
--tutorial-chapter-easing: cubic-bezier(0.25, 0.1, 0.25, 1);
--tutorial-chapter-distance: 8px;
--tutorial-chapter-stagger: 40ms;
--tutorial-meter-duration: 240ms;
--tutorial-meter-easing: steps(6, end);
--tutorial-done-duration: 200ms;
--tutorial-done-easing: cubic-bezier(0.25, 0.1, 0.25, 1);
--tutorial-done-beat: 70ms;
--tutorial-title-font: bold var(--font-size) var(--font-ui);
--tutorial-done-color: #008000;
--tutorial-move-duration: 160ms;
--tutorial-move-easing: cubic-bezier(0.25, 0.1, 0.25, 1);
--tutorial-press-scale: 1;
--tutorial-press-duration: 0ms;
--tutorial-press-easing: linear;
--tutorial-point-duration: 150ms;
--tutorial-point-easing: steps(1, end);
--tutorial-point-beckon: 1060ms;
--tutorial-point-dim: 0.2;
--tutorial-point-delay: 120ms;
--tutorial-point-stagger: 160ms;
--tutorial-point-scale: 1;
--tutorial-point-beckons: 2;
--tutorial-point-leave-duration: 150ms;
--tutorial-point-leave-easing: linear;
--exploded-axis-u: 1 0.5;
--exploded-axis-v: -1 0.5;
--exploded-gap-min: 24px;
--exploded-perspective: 3;
--circuit-board: #235e43;
--circuit-edge: #103b29;
--circuit-silk: #e1e8cc;
--circuit-chip: #23292a;
--circuit-ink: #f3f1df;
--circuit-pin: #bdb9a5;
--circuit-wire: #dba34c;
--circuit-active: #fff09b;
--exploded-depth: 10px;
--exploded-edge: var(--color-text);
--exploded-line: var(--w-text);
--exploded-line-width: 0.65px;
--exploded-trace-dash: 1 1;
--exploded-socket-dash: 2 1;
--exploded-ghost-opacity: 0.35;
--exploded-bench: var(--w-shadow);
--exploded-balloon-size: 18px;
--w-scrollbar-track: repeating-conic-gradient(var(--w-hilite) 0 25%, var(--w-face) 0 50%) 0 0 / 2px 2px;
--w-edge-raised: inset -1px -1px var(--w-dark), inset 1px 1px var(--w-light), inset -2px -2px var(--w-shadow), inset 2px 2px var(--w-hilite);
--scrollbar-size: 16px;
--scrollbar-track: var(--w-scrollbar-track);
--scrollbar-track-border: none;
--scrollbar-thumb: var(--w-face);
--scrollbar-thumb-border: none;
--scrollbar-corner: var(--w-face);
--icon-scroll-up: var(--sys0-asset-w-scroll-up);
--icon-scroll-down: var(--sys0-asset-w-scroll-down);
--icon-scroll-left: var(--sys0-asset-w-scroll-left);
--icon-scroll-right: var(--sys0-asset-w-scroll-right);
--icon-scroll-up-active: var(--sys0-asset-w-scroll-up-pressed);
--icon-scroll-down-active: var(--sys0-asset-w-scroll-down-pressed);
--icon-scroll-left-active: var(--sys0-asset-w-scroll-left-pressed);
--icon-scroll-right-active: var(--sys0-asset-w-scroll-right-pressed);
--scrollbar-color-thumb: var(--w-face);
--scrollbar-color-track: color-mix(in srgb, var(--w-face), var(--w-hilite));
--button-default-text: var(--w-text);
--button-default-active-text: var(--w-text);
--button-default-face: var(--w-face);
--button-default-border: none;
--button-default-active-face: var(--w-face);
--field-focus-border: none;
--bevel-field-focus: var(--bevel-field);
--select-focus-text: var(--w-highlight-text);
--well-background: var(--w-window);
--well-border: none;
--bevel-well: var(--bevel-field);
--bevel-tab-selected: var(--bevel-tab);
--title-control-radius: 0;
--icon-size: 32px;
--icon-cell-width: 75px;
--w-icon-cell-padding: 2px 0 0;
--w-icon-label-gap: 4px;
--w-icon-label-padding: 0 2px 2px;
--w-icon-label-line-height: 13px;
--w-icon-centre-fix: 1px;
--w-icon-dither: var(--w-highlight);
--w-dither-mask: repeating-conic-gradient(transparent 0 25%, #000 0 50%) 0 0 / 2px 2px;
--icon-label-overhang: 6px;
--icon-label-lines: 2;
--icon-label-font-size: 11px;
--icon-label-text: var(--w-text);
--icon-label-background: transparent;
--icon-selected-label-text: var(--w-highlight-text);
--icon-selected-label-background: var(--w-highlight);
--icon-selected-filter: none;
--desktop-icon-label-font-weight: normal;
--desktop-icon-label-text: #ffffff;
--desktop-icon-label-background: transparent;
--desktop-icon-label-shadow: 1px 1px 0 #000000;
--about-width: 310px;
--about-icon-size: 64px;
--about-title-size: 26px;
--desktop-icons-inset: 0 auto auto 0;
--icon-folder: var(--sys0-asset-folder);
--w-icon-folder-small: var(--sys0-asset-folder-small);
--app-tile-background: linear-gradient(135deg, var(--w-desktop), var(--w-highlight));
--app-tile-text: #ffffff;
--app-tile-border: 1px solid var(--w-frame);
--app-tile-radius: 0;
--app-tile-shadow: 1px 1px 0 var(--w-dark);
--app-tile-font: var(--font-ui);
--app-tile-font-size: 16px;
--launcher-width: 560px;
--launcher-top: 18vh;
--launcher-background: var(--w-window);
--launcher-text: var(--w-text);
--launcher-border: none;
--launcher-radius: 0;
--launcher-shadow: var(--bevel-window);
--launcher-backdrop: transparent;
--launcher-search-font: var(--font-ui);
--launcher-search-font-size: 22px;
--launcher-search-padding: 10px 12px;
--launcher-divider: 1px solid var(--w-shadow);
--launcher-list-padding: 4px;
--launcher-list-height: 340px;
--launcher-item-padding: 3px 8px;
--launcher-item-radius: 0;
--launcher-icon-size: 20px;
--launcher-selected-background: var(--w-highlight);
--launcher-selected-text: var(--w-highlight-text);
--launcher-section-text: var(--w-shadow);
--launcher-subtitle-text: var(--w-shadow);
--launcher-footer-background: var(--w-face);
--launcher-footer-text: var(--w-text);
--launcher-footer-padding: 4px 8px;
}
.window {
--w-frame-border: var(--w-active-border);
box-shadow: var(--bevel-window), inset 0 0 0 3px var(--w-frame-border);
}
.window[role="dialog"] {
box-shadow: var(--bevel-dialog), inset 0 0 0 3px var(--w-frame-border);
}
.window:has(> .title-bar.inactive) {
--w-frame-border: var(--w-inactive-border);
}
.title-bar-text {
align-self: stretch;
}
.title-bar.inactive {
--title-text-background: var(--w-title-inactive-run);
}
.title-bar > .title-bar-icon.icon-image.folder {
background-image: var(--w-icon-folder-small);
}
.title-bar > .title-bar-icon.icon-image {
position: relative;
}
.title-bar > .title-bar-icon.icon-image::before {
content: "";
position: absolute;
inset: var(--w-title-icon-cell);
}
.title-bar-controls button {
border-left-width: 0;
background-clip: padding-box;
}
.title-bar-controls > button[data-control=close]:only-child {
margin-left: 2px;
}
.title-bar-controls button[data-control=minimize] {
border-width: 2px 0 2px 2px;
}
.title-bar-controls {
position: relative;
z-index: 2;
}
.title-bar-controls button {
--w-glyph-at: var(--w-glyph);
--title-control-pressed-position: var(--w-glyph-pressed);
background-position: var(--w-glyph-at);
}
.title-bar-controls button[data-control=minimize] {
--w-glyph-at: var(--w-glyph-minimize);
--title-control-pressed-position: var(--w-glyph-minimize-pressed);
}
.title-bar-controls button:is([data-control=maximize], [data-control=restore]) {
--w-glyph-at: var(--w-glyph-maximize);
--title-control-pressed-position: var(--w-glyph-maximize-pressed);
}
.title-bar-controls button[data-control=help] {
--w-glyph-at: var(--w-glyph-help);
--title-control-pressed-position: var(--w-glyph-help-pressed);
}
.window[role="dialog"] {
--grip-size: 16px;
--icon-grip: var(--w-size-grip);
}
.window[role="dialog"]:is(.message, :not(:has(> .window-edges))) {
--window-padding: var(--w-fixed-frame);
--w-frame-border: var(--w-face);
--grip-size: 0px;
}
.window[role="dialog"] > .window-body > footer {
position: relative;
z-index: 3;
}
.chat-dock > .window-body,
.file-dock > .window-body {
padding: var(--window-body-margin);
}
.icon-image.app {
font-weight: bold;
}
:where(html) {
font-kerning: none;
font-variant-ligatures: none;
}
:where(button:not([role], .icon, .title-bar-controls > button, .menubar-end > button), input:is([type="button"], [type="submit"], [type="reset"])) {
padding-block: var(--button-padding-y) calc(var(--button-padding-y) + var(--w-button-lift));
}
:where(button:not([role], .icon, .title-bar-controls > button, .menubar-end > button), input:is([type="button"], [type="submit"], [type="reset"])):where(:not(:disabled):active:is(:hover, :not(:active > *)), [aria-pressed="true"]) {
padding-block: calc(var(--button-padding-y) + var(--button-press-offset)) calc(var(--button-padding-y) + var(--w-button-lift) - var(--button-press-offset));
}
:where(button:not([role], [aria-pressed], .icon, .title-bar-controls > button, .menubar-end > button), input:is([type="button"], [type="submit"], [type="reset"])):where(:focus-visible, :not([role="toolbar"] *):is(:focus, :not(:disabled):active)) {
box-shadow: var(--bevel-default);
}
:where(button:not([role], .icon, .title-bar-controls > button, .menubar-end > button)):where(:focus-visible) {
position: relative;
outline: none;
}
:where(button:not([role], .icon, .title-bar-controls > button, .menubar-end > button)):where(:focus-visible)::after {
content: "";
position: absolute;
inset: var(--w-focus-inset);
padding: 1px;
background: var(--w-focus-dots) calc(-1 * var(--w-focus-inset)) calc(-1 * var(--w-focus-inset)) / 2px 2px;
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite: exclude;
pointer-events: none;
}
:where(.window-body, [data-window]):where(:has(:is(button:not([role], [aria-pressed], .icon, .default), input:is([type="button"], [type="submit"], [type="reset"]):not(.default)):is(:focus-visible, :not([role="toolbar"] *):is(:focus, :not(:disabled):active)))) :where(button.default, input.default):where(:not(:focus, :active)) {
box-shadow: var(--bevel-raised);
}
:where(button:not([role], [aria-pressed], .icon, .title-bar-controls > button, .menubar-end > button), input:is([type="button"], [type="submit"], [type="reset"])):where(:not([role="toolbar"] *):not(:disabled):active:is(:hover, :not(:active > *))) {
box-shadow: var(--bevel-default-pressed);
}
:where(select:focus) {
background-image: var(--icon-select), linear-gradient(var(--select-focus-background) 0 0), linear-gradient(var(--w-window) 0 0);
background-position: var(--select-icon-position), 3px 3px, 2px 2px;
background-size: auto, calc(100% - 22px) calc(100% - 6px), calc(100% - 4px) calc(100% - 4px);
}
:where(select:focus:active) {
background-image: var(--icon-select-active), linear-gradient(var(--select-focus-background) 0 0), linear-gradient(var(--w-window) 0 0);
}
:where(input, select, textarea):where(:disabled) {
text-shadow: none;
}
textarea::-webkit-resizer {
background:
var(--w-size-grip) 0 0 / calc(100% - 2px) calc(100% - 2px) no-repeat,
linear-gradient(var(--w-face) 0 0) 0 0 / calc(100% - 2px) calc(100% - 2px) no-repeat;
}
:where(.is-vertical > input[type="range"])::-webkit-slider-thumb {
transform: scaleX(-1);
}
:where(input[type="range"])::-moz-range-thumb {
transform: translateY(var(--w-slider-moz-offset));
}
:where(input[type="range"].has-box-indicator)::-moz-range-thumb {
transform: none;
}
:where(.is-vertical > input[type="range"])::-moz-range-thumb {
transform: translateY(var(--w-slider-moz-vertical-offset)) scaleX(-1);
}
:where(.is-vertical > input[type="range"].has-box-indicator)::-moz-range-thumb {
transform: translateY(var(--w-slider-moz-vertical-box-offset)) scaleX(-1);
}
:where(input[type="range"]:focus-visible) {
outline: var(--focus-ring);
outline-offset: -1px;
}
:where([role="toolbar"]) {
box-shadow: var(--w-toolbar-etch);
}
.vertical-bar {
align-self: stretch;
}
:where(.field-row > label) {
padding-bottom: var(--w-label-lift);
}
:where(.window[role="dialog"] > .window-body > :first-child) {
margin-top: 0;
}
.window[role="dialog"] > .window-body:not(:has(> :not(p, .system-message, footer))) > footer {
--dialog-footer-justify: center;
--dialog-footer-gap: var(--w-message-footer-gap);
padding-right: mod(100% + 1px, 2px);
}
.window[role="dialog"] > .window-body:not(:has(> :not(p, .system-message, footer))) > footer:has(> :nth-child(even):last-child) {
padding-right: mod(100%, 2px);
}
:where(input[type="number"])::-webkit-inner-spin-button,
:where(input:is([type="date"], [type="time"], [type="datetime-local"], [type="month"], [type="week"]))::-webkit-calendar-picker-indicator {
appearance: none;
display: block;
width: 15px;
height: 17px;
margin: -1px -4px -3px 0;
padding: 0;
background: var(--w-icon-updown) no-repeat;
opacity: 1;
cursor: default;
}
:where(input:is([type="date"], [type="datetime-local"], [type="month"], [type="week"]))::-webkit-calendar-picker-indicator {
width: 16px;
background-image: var(--icon-select);
}
:where(input:is([type="date"], [type="datetime-local"], [type="month"], [type="week"]))::-webkit-calendar-picker-indicator:active {
background-image: var(--icon-select-active);
}
:where(input:is([type="date"], [type="time"], [type="datetime-local"], [type="month"], [type="week"]))::-webkit-datetime-edit,
:where(input:is([type="date"], [type="time"], [type="datetime-local"], [type="month"], [type="week"]))::-webkit-datetime-edit-fields-wrapper,
:where(input:is([type="date"], [type="datetime-local"], [type="month"], [type="week"]))::-webkit-datetime-edit-year-field,
:where(input:is([type="date"], [type="datetime-local"], [type="month"]))::-webkit-datetime-edit-month-field,
:where(input:is([type="date"], [type="datetime-local"]))::-webkit-datetime-edit-day-field,
:where(input[type="week"])::-webkit-datetime-edit-week-field,
:where(input:is([type="time"], [type="datetime-local"]))::-webkit-datetime-edit-hour-field,
:where(input:is([type="time"], [type="datetime-local"]))::-webkit-datetime-edit-minute-field,
:where(input:is([type="time"], [type="datetime-local"]))::-webkit-datetime-edit-second-field,
:where(input:is([type="time"], [type="datetime-local"]))::-webkit-datetime-edit-millisecond-field,
:where(input:is([type="time"], [type="datetime-local"]))::-webkit-datetime-edit-meridiem-field {
padding-top: 0;
padding-bottom: 0;
}
:where(input[type="number"]:disabled)::-webkit-inner-spin-button,
:where(input[type="time"]:disabled)::-webkit-calendar-picker-indicator {
visibility: visible;
background-image: var(--w-icon-updown-disabled);
}
:where(input:is([type="date"], [type="datetime-local"], [type="month"], [type="week"]):disabled)::-webkit-calendar-picker-indicator {
visibility: visible;
background-image: var(--icon-select-disabled);
}
input:is([type="checkbox"], [type="radio"]) + label {
margin-top: 1px;
margin-bottom: 2px;
padding: 0 1px;
}
[role="menubar"] > [role="menuitem"]:focus-within {
padding: var(--w-menubar-open-padding);
}
[role="menu"] > :is([role="menuitem"], [role="menuitemradio"]):is(:disabled, [aria-disabled="true"]):is(:hover, :focus) {
background: var(--menu-hover-background);
text-shadow: none;
}
[role="tab"] {
min-width: var(--w-tab-min-width);
}
[role="tab"][aria-selected="true"]:not(:disabled):active {
padding: var(--tab-selected-padding);
background: var(--tab-selected-face);
box-shadow: var(--bevel-tab-selected);
}
[role="tabpanel"] {
box-shadow: var(--w-tabpanel-bevel);
}
[role="listbox"],
ul.tree-view {
border: var(--sunken-panel-border);
border-image: var(--sunken-panel-border-image);
box-shadow: none;
}
tbody > tr > td {
line-height: var(--w-cell-line-height);
}
tbody > tr > td:first-child {
padding-left: var(--w-first-cell-padding-left);
}
.icon,
.icon:not(:disabled):active {
gap: var(--w-icon-label-gap);
padding: var(--w-icon-cell-padding);
}
.icon-label {
padding: var(--w-icon-label-padding);
line-height: var(--w-icon-label-line-height);
}
.desktop-icons {
gap: 0;
}
.icon-view {
gap: 0;
padding: 0;
grid-auto-rows: var(--icon-cell-width);
}
.desktop-icons .icon {
height: var(--icon-cell-width);
}
.icon > .icon-image {
margin-right: var(--w-icon-centre-fix);
}
.icon[aria-selected="true"] .icon-image {
position: relative;
overflow: hidden;
}
.icon[aria-selected="true"] .icon-image::after {
content: "";
position: absolute;
top: 0;
left: -1000px;
width: calc(100% + 1000px);
height: 100%;
background: inherit;
background-position: 0 0;
background-size: var(--icon-size) var(--icon-size);
filter: drop-shadow(1000px 0 0 var(--w-icon-dither));
mask: var(--w-dither-mask);
}
.icon:focus-visible .icon-label {
outline: 1px dotted rgb(from var(--w-desktop) calc(255 - r) calc(255 - g) calc(255 - b));
outline-offset: -1px;
}
.icon-view .icon:focus-visible .icon-label {
outline-color: rgb(from var(--w-window) calc(255 - r) calc(255 - g) calc(255 - b));
}
.icon[aria-selected="true"]:focus-visible .icon-label {
outline-color: rgb(from var(--w-highlight) calc(255 - r) calc(255 - g) calc(255 - b));
}
ul.tree-view ul {
margin-left: calc(var(--tree-indent) - 21px);
padding-left: 0;
}
ul.tree-view li {
position: relative;
padding: 1px 0 2px 21px;
line-height: 13px;
background:
var(--w-tree-dots-v) 8px 0 / 1px 100% no-repeat,
var(--w-tree-dots-h) 8px 8px / 11px 1px no-repeat;
}
ul.tree-view li:last-child {
background:
var(--w-tree-dots-v) 8px 0 / 1px 9px no-repeat,
var(--w-tree-dots-h) 8px 8px / 11px 1px no-repeat;
}
ul.tree-view > li:first-child {
background:
var(--w-tree-dots-v) 8px 8px / 1px calc(100% - 8px) no-repeat,
var(--w-tree-dots-h) 8px 8px / 11px 1px no-repeat;
}
ul.tree-view > li:only-child {
background: var(--w-tree-dots-h) 8px 8px / 11px 1px no-repeat;
}
ul.tree-view li:has(> details) {
padding-top: 0;
padding-bottom: 0;
}
ul.tree-view details > summary {
padding: 1px 0 2px;
}
ul.tree-view ul > li:last-child::after {
content: none;
}
ul.tree-view details > summary::before,
ul.tree-view ul details > summary::before {
content: "";
position: absolute;
top: 4px;
left: 4px;
z-index: 1;
float: none;
width: 7px;
height: 7px;
margin: 0;
padding: 0;
background: var(--w-tree-plus), var(--tree-toggle-background);
}
ul.tree-view details[open] > summary::before {
content: "";
background: var(--w-tree-minus), var(--tree-toggle-background);
}
ul.tree-view a {
display: inline-block;
margin: -1px -2px -2px;
padding: 1px 2px 2px;
}
ul.tree-view a:focus {
outline: 1px dotted rgb(from var(--w-highlight) calc(255 - r) calc(255 - g) calc(255 - b));
outline-offset: -1px;
}
[role="tab"]:focus-visible {
outline-color: rgb(from var(--w-face) calc(255 - r) calc(255 - g) calc(255 - b));
}
[role="option"]:focus-visible {
outline-color: rgb(from var(--w-window) calc(255 - r) calc(255 - g) calc(255 - b));
}
[role="option"][aria-selected="true"]:focus-visible {
outline-color: rgb(from var(--w-highlight) calc(255 - r) calc(255 - g) calc(255 - b));
}
:is(.exploded-socket, .exploded-trace, .exploded-halo, .exploded-leader, .exploded-under, .exploded-outline, .exploded-wire rect) {
shape-rendering: crispEdges;
}
:root {
--instrument-font: Arial, Helvetica, sans-serif;
--instrument-case: linear-gradient(115deg, #393b3e 0%, #25272a 48%, #303235 100%) #25272a;
--instrument-legend: #c8cacc;
--instrument-border: 1px solid #101113;
--instrument-radius: 14px 14px 22px 22px;
--instrument-case-shadow: inset 0 1px 1px #777a7d, inset 2px 0 2px #46484a, inset 0 -5px 1px #17181a, inset 0 -6px 1px #525456;
--instrument-lcd: linear-gradient(165deg, #a9aca9, #bfc2be 70%, #c5c8c4) #bfc2be;
--instrument-ink: #171b1c;
--instrument-lcd-border: 6px solid #b5b9ba;
--instrument-lcd-radius: 3px;
--instrument-lcd-shadow: 0 0 0 2px #111315, 0 2px 1px #66696a, inset 0 2px 4px #0004;
--instrument-key: linear-gradient(#37393c, #252729) #252729;
--instrument-key-ink: #e9e9e6;
--instrument-key-border: 1px solid #141517;
--instrument-key-radius: 7px 7px 11px 11px;
--instrument-key-shadow: inset 0 1px 1px #ffffff52, inset 0 -2px 1px #ffffff0d, 0 3px 0 #111214, 0 4px 1px #0009;
--instrument-key-weight: 600;
--instrument-key-text-shadow: 0 1px 1px #000;
--instrument-function: linear-gradient(#d9dad5, #b7bab5) #b7bab5;
--instrument-function-ink: #404642;
--instrument-function-text-shadow: 0 1px 0 #fff8;
--instrument-clear: linear-gradient(#b74c43, #91352f) #91352f;
--instrument-key-down: inset 0 2px 4px #0006, 0 1px 0 #111214;
--instrument-hover: brightness(1.08);
--instrument-focus: 2px solid #8cd8f1;
--instrument-solar-well: #101112;
--instrument-solar-border: 1px solid #090a0b;
--instrument-solar-shadow: 0 1px 0 #6b6a66, inset 0 1px 3px #000;
--instrument-cell: repeating-linear-gradient(0deg, transparent 0 5px, #bba07826 5px 6px), linear-gradient(110deg, #48392e, #2c2521 60%, #4c3c30) #2c2521;
--instrument-cell-border: 1px solid #80654b;
}
:root { --syntax-name: #235689; --syntax-string: #246540; --syntax-number: #92501a; --syntax-type: #755096; }
:root {
--audio-font: Arial, Helvetica, sans-serif;
--audio-wood: repeating-linear-gradient(2deg, #1f0e0400 0 3px, #2b130c40 4px, #b9844c24 5px, #2b130c00 7px), repeating-linear-gradient(178deg, #ba824525 0 1px, #351c0e18 2px 10px), linear-gradient(100deg, #61412a, #8d613c 24%, #65432c 55%, #7e5637 88%, #4c301f) #6f492d;
--audio-wood-edge: 1px solid #432a1a;
--audio-wood-shadow: 0 8px 16px -6px #21150c70;
--audio-enamel: linear-gradient(115deg, #e1debc, #d3d1b4 55%, #c6c4a5) #d3d1b4;
--audio-ink: #3f4038;
--audio-panel-edge: 1px solid #5d5846;
--audio-panel-shadow: 0 0 0 2px #211a15, 0 1px 1px 3px #bd976b80, inset 1px 3px 7px #302d246b, inset 0 -1px 2px #fff8;
--audio-metal: conic-gradient(from 20deg, #cacdca, #f7f8f3 13%, #b2b6b3 29%, #e5e8e4 42%, #a7aaa7 59%, #e5e7e2 76%, #fcfcf7 88%, #cacdca) #bec2bf;
--audio-metal-shadow: inset 0 1px 1px #ffffffe6, inset 0 -2px 2px #45494380, 0 0 0 1px #787d7280, 2px 5px 8px #35362755;
--audio-paper: radial-gradient(ellipse at 35% 23%, #f2f4eb, #dde1d8 65%, #bbc1b7) #e1e5dc;
--audio-paper-shadow: inset 1px 2px 4px #40483c80, 0 0 0 1px #7b8378, 0 0 0 3px #ffffff66;
--audio-charcoal: linear-gradient(140deg, #454541, #282a27) #333531;
--audio-charcoal-shadow: inset 0 2px 2px #6d6e65, inset 0 -2px 2px #141610, 0 0 0 2px #151914, 0 3px 5px #171d1899;
--audio-knob-face: radial-gradient(ellipse at 35% 20%, #484a44, #33352f) #373a32;
--audio-knob-face-shadow: inset 0 1px 2px #6b6e6155, 0 0 0 1px #20231e;
--audio-pointer: #d6d9b9;
--audio-pointer-shadow: 0 0 0 1px #15180e, inset 0 1px 2px #0008;
--audio-glass: linear-gradient(165deg, #293029, #3b4334) #30382b;
--audio-display-ink: #e0e6bf;
--audio-glass-shadow: inset 0 2px 5px #0009, 0 1px 0 #f6f0d599, 0 0 0 1px #605f48;
--audio-lamp-off: radial-gradient(circle at 35% 30%, #9aab69, #4b582d 65%) #536034;
--audio-lamp-on: radial-gradient(circle at 35% 30%, #e8ffc1, #92bf4d 45%, #4c792c) #84ae45;
--audio-lamp-shadow: inset 0 1px 2px #17231399, 0 0 0 1px #4c5334, 0 1px 1px #fff8;
--audio-radius: 5px;
}
:root {
--ai-surface: var(--color-canvas);
--ai-text: var(--color-text);
--ai-border: var(--border-line);
--ai-radius: var(--groupbox-radius);
--ai-padding: var(--space);
--ai-gap: var(--space);
--ai-gap-small: var(--space-grouped);
--ai-shadow: none;
--ai-font-small: var(--font-size-small);
--ai-title-font: bold var(--font-size) var(--font-ui);
--ai-lane-surface: var(--color-surface);
--ai-evidence-width: 18em;
--ai-lane-width: 15em;
--ai-agent-width: 10em;
--ai-track-width: 24em;
--ai-span-height: 3em;
--ai-activity-height: 2em;
--ai-spinner-size: 1em;
--ai-spinner-radius: 50%;
--ai-spinner-duration: 1s;
--ai-input-height: 5em;
--ai-number-size: 2em;
--ai-context-height: 1em;
--ai-key-size: 0.75em;
--ai-key-radius: 0.15em;
--ai-tree-indent: var(--tree-indent);
--ai-model-mode-width: 4em;
--ai-model-fast-size: calc(1.1em + 4px);
--ai-model-bar-fast-size: calc(1.1em + 2px);
--ai-model-fast-fill: var(--color-highlight);
--ai-model-fast-rim: currentColor;
--ai-model-fast-line: currentColor;
--ai-model-fast-shadow: none;
--ai-model-fast-disabled: color-mix(in srgb, var(--color-text-disabled) 45%, transparent);
--ai-model-icon-size: 1.5em;
--ai-model-bar-width: 26em;
--ai-model-popover-shadow: var(--menu-bevel);
--ai-icon-idle: "○";
--ai-status-idle: var(--color-text);
--ai-icon-queued: "◌";
--ai-status-queued: var(--color-text);
--ai-icon-running: "◉";
--ai-status-running: var(--color-link);
--ai-icon-attention: "△";
--ai-status-attention: #885000;
--ai-icon-paused: "Ⅱ";
--ai-status-paused: var(--color-text);
--ai-icon-done: "✓";
--ai-status-done: #257037;
--ai-icon-failed: "!";
--ai-status-failed: var(--color-error);
--ai-icon-cancelled: "×";
--ai-status-cancelled: var(--color-text);
--ai-context-system: #000080;
--ai-context-tools: #008080;
--ai-context-files: #808000;
--ai-context-conversation: #800080;
--ai-context-memory: #008000;
}
:root { --ai-tree-height: 34em; }
:root { --ai-meta-width: 14em; }
:root { --ai-workspace-column-width: 28em; --ai-decision-column-width: 18em; }
:root {
--ai-muted: #505050;
--ai-link: var(--color-link);
--ai-body-size: var(--font-size);
--ai-body-line-height: 1.5;
--ai-title-line-height: 1.3;
--ai-row-padding: var(--space) var(--space-grouped);
--ai-status-padding: 0.15em 0.5em;
--ai-status-radius: var(--button-radius);
--ai-status-surface: var(--color-surface);
--ai-attention-rule: 3px solid var(--ai-status-attention);
--ai-attention-surface: var(--color-surface);
--ai-progress-height: 0.45em;
--ai-progress-width: 8em;
--ai-metric-width: 5em;
--ai-summary-lines: 3;
--ai-agent-card-width: 15em;
--ai-notice-rule: 3px solid var(--ai-status-running);
--ai-notice-content-width: 12em;
--ai-toast-width: 34em;
--ai-chat-agent-width: 13em;
}
:root { --ai-chat-thread-height: 10em; }
:root { --gallery-sidebar-width: 15em; --gallery-column-width: 28.5em; --gallery-mobile-nav-height: 12em; }
:root {
}
.toaster > .toast {
grid-template-columns: 16px minmax(0, 1fr) 16px;
column-gap: 8px;
row-gap: 4px;
padding: 7px 11px 9px;
margin-bottom: 19px;
font: 11px/13px Tahoma, Arial, sans-serif;
}
.toaster > .toast > .icon-image { grid-row: 1; align-self: center; }
.toaster > .toast > .toast-title { grid-row: 1; align-self: center; }
.toaster > .toast > .toast-body { grid-column: 1 / -1; font: inherit; }
.toaster > .toast > .toast-close {
grid-row: 1;
width: 16px; height: 16px;
padding: 0;
color: #aca899;
background: var(--toast-background);
border: 1px solid #aca899;
border-radius: 3px;
font: bold 14px/12px Tahoma, Arial, sans-serif;
}
@media (hover: hover) and (pointer: fine) { .toaster > .toast > .toast-close:hover { color: #000; border-color: #000; } }
.toaster > .toast::before,
.toaster > .toast::after {
content: "";
position: absolute;
right: 14px; bottom: -20px;
width: 20px; height: 20px;
background: #000;
clip-path: polygon(0 0, 100% 0, 100% 100%);
pointer-events: none;
}
.toaster > .toast::after {
bottom: -18px; right: 15px;
width: 18px; height: 19px;
background: var(--toast-background);
}
.notification-center { padding: 3px; font: 11px/13px Tahoma, Arial, sans-serif; }
.notification-center > header { min-height: 23px; padding: 2px 5px; }
.notification-center > header > h2 { line-height: 16px; }
.notification-group > ol { padding: 8px; }
.notification { padding: 7px 12px; margin-bottom: 1px; }
.notification-time { margin-top: 4px; font-size: 11px; }
.notification[data-unread]::before { top: 11px; left: 3px; width: 4px; height: 4px; }
.menubar-notifications::before { width: 16px; height: 16px; }
.menubar-badge { min-width: 14px; padding: 0 3px; font: bold 11px/14px Tahoma, Arial, sans-serif; }
.notification-center { border: 1px solid var(--w-frame); box-shadow: var(--w-raised); }
.notification-center > header { color: var(--w-title-text); background: var(--w-title-run); border: 0; min-height: 19px; box-sizing: border-box; }
.notification-center > header button { min-height: 16px; padding: 0 4px; font: 11px/14px Tahoma, Arial, sans-serif; }
.notification-group { margin-top: 6px; border: 2px solid transparent; box-shadow: var(--w-sunken); background: var(--color-canvas); }
.notification-group > header { min-height: 22px; padding: 3px 6px; background: var(--w-face); }
.notification-group > header > .icon-image { --icon-size: 16px; }
.notification-group > header button { min-height: 20px; padding: 0 6px; }
.notification-center, .toaster { max-width: 100%; }
.menubar-notifications::before { mask: none; background: var(--icon-notifications) center / 16px 16px no-repeat; }
:root {
--talk-incoming: var(--color-surface);
--talk-outgoing: color-mix(in oklch, var(--color-highlight) 18%, var(--color-canvas));
--talk-ink: var(--color-text);
--talk-gloss: linear-gradient(transparent, transparent);
--talk-border: var(--border-line);
--talk-shadow: none;
--talk-radius: var(--groupbox-radius);
--talk-avatar-radius: var(--groupbox-radius);
--talk-avatar-size: 2.5em;
--talk-gap: var(--space-grouped);
--talk-inset: var(--space);
--talk-chrome: var(--color-surface);
--talk-sidebar: var(--color-canvas);
}
:root { --thread-hue: 190; }
:root {
--thread-flag-lightness: .86;
--thread-flag-chroma: .11;
--thread-flag-overlay: linear-gradient(180deg,#fff8,transparent 45%,#0001);
--thread-flag-ink: #161616;
--thread-flag-border: 1px solid #0006;
--thread-flag-radius: 0;
--thread-flag-inward-radius: 0;
--thread-flag-shadow: inset 0 1px #fff9,1px 2px 0 #0004;
--thread-flag-seam: linear-gradient(90deg,#0004,transparent);
--thread-flag-folded-radius: 0 0.00px 0.00px 0 / 0 0px 0px 0;
--thread-flag-folded-inward-radius: 0.00px 0 0 0.00px / 0px 0 0 0px;
--thread-flag-hover: .97;
--thread-status-radius: 0;
--thread-card-face: var(--color-canvas);
--thread-card-border: var(--border-line);
--thread-card-radius: 0;
--thread-card-shadow: 2px 2px 0 #0005;
--thread-rider-face: var(--color-canvas);
--thread-rider-ink: var(--color-text);
--thread-rider-border: var(--border-line);
--thread-rider-radius: 0;
--thread-rider-shadow: inset 0 1px #fff9,1px 2px 0 #0004;
}
:root {
--w-face: #88c0b8;
--w-hilite: #c8e0d8;
--w-shadow: #489088;
--w-dark: #000000;
--w-window: #c8e0d8;
--w-highlight: #000080;
--w-highlight-text: #ffffff;
--w-info: #c8e0d8;
--w-desktop: #2c4e47;
--w-title-left: #000080;
--w-title-right: #18b4c0;
--w-title-text: #ffffff;
--w-title-inactive-left: #489088;
--w-title-inactive-right: #78ccd8;
--w-title-inactive-text: #c0c0c0;
--w-active-border: #88c0b8;
--w-inactive-border: #88c0b8;
--menubar-clock-display: block;
--menubar-clock-font: 400 11px/var(--menubar-line-height) var(--font-ui);
--menubar-clock-padding: 0 6px;
--menubar-clock-text: var(--color-text);
}
:root {
--notification-center-background: var(--w-face);
--notification-center-border: 1px solid var(--w-frame);
--notification-center-width: 320px;
--notification-title-font: bold 11px Tahoma, Arial, sans-serif;
--notification-group-text: var(--color-text);
--notification-group-case: none;
--notification-background: var(--color-canvas);
--notification-text: var(--color-text);
--notification-radius: 0px;
--notification-shadow: none;
--notification-unread: var(--color-link);
--notification-time-text: var(--color-text-disabled);
--toast-width: 325px;
--toast-icon-size: 16px;
--toast-background: #ffffe1;
--toast-text: var(--color-text);
--toast-border: 1px solid #000000;
--toast-radius: 8px;
--toast-shadow: 2px 2px 2px #0004;
--notification-badge-background: var(--w-title-left);
--notification-badge-text: var(--w-title-text);
--notification-badge-radius: 7px;
--icon-notifications: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22M1%202h14v10H8l-4%203v-3H1z%22%20fill%3D%22%23ffffe1%22%20stroke%3D%22%23000%22%2F%3E%3Cpath%20d%3D%22M6%204h3v1H6zm1%202h2v4H6V9h1z%22%20fill%3D%22%23000080%22%2F%3E%3C%2Fsvg%3E");
}
.icon-image.app:is([data-app="animal-band"], [data-app="anthropic"], [data-app="anylist"], [data-app="anylist-recipes"], [data-app="app-store"], [data-app="asteroids"], [data-app="audio-player"], [data-app="backside"], [data-app="blackjack"], [data-app="bookmarks"], [data-app="breakout"], [data-app="cadcraft"], [data-app="calculator"], [data-app="calendar"], [data-app="captions"], [data-app="chat"], [data-app="checkers"], [data-app="codex"], [data-app="color-lab"], [data-app="compute-costs"], [data-app="connect-four"], [data-app="connectors"], [data-app="conniptions"], [data-app="contacts"], [data-app="core"], [data-app="countdown"], [data-app="countdown-pair"], [data-app="currency-converter"], [data-app="decider"], [data-app="deckcraft"], [data-app="designcraft"], [data-app="desktop-manager"], [data-app="dice"], [data-app="dictionary"], [data-app="director"], [data-app="dots-and-boxes"], [data-app="drank"], [data-app="dtree"], [data-app="effectcraft"], [data-app="expenses"], [data-app="exploder"], [data-app="figcraft"], [data-app="files"], [data-app="filmcraft"], [data-app="fireflies"], [data-app="flashcards"], [data-app="focus-timer"], [data-app="font-zero"], [data-app="forge"], [data-app="game-2048"], [data-app="gemini"], [data-app="github"], [data-app="golf-solitaire"], [data-app="google"], [data-app="gridcraft"], [data-app="guppycube"], [data-app="habits"], [data-app="hangman"], [data-app="health"], [data-app="helium"], [data-app="higher-lower"], [data-app="home"], [data-app="inventory"], [data-app="inventory-scanner"], [data-app="journal"], [data-app="json-tool"], [data-app="kanban"], [data-app="km-mi-converter"], [data-app="lightcraft"], [data-app="loan-calculator"], [data-app="local-ai"], [data-app="loops"], [data-app="lounge"], [data-app="mac-companion"], [data-app="macro-tracker"], [data-app="mailcraft"], [data-app="mancala"], [data-app="manus"], [data-app="markdown"], [data-app="memory"], [data-app="messages"], [data-app="metering"], [data-app="minesweeper"], [data-app="morse"], [data-app="musicbrainz"], [data-app="nes"], [data-app="notes"], [data-app="openai"], [data-app="openrouter"], [data-app="pangram-index"], [data-app="pangram-worker"], [data-app="pangrams"], [data-app="paseo"], [data-app="paseo-app"], [data-app="password-generator"], [data-app="pc"], [data-app="pdfcraft"], [data-app="periodic-table"], [data-app="photocraft"], [data-app="pixel-art"], [data-app="places"], [data-app="pomodoro"], [data-app="pong"], [data-app="pricing-sources"], [data-app="quiz"], [data-app="recipe-index"], [data-app="recipe-web"], [data-app="recipes"], [data-app="regex-tester"], [data-app="reversi"], [data-app="salvation-army-value-guide"], [data-app="schemas"], [data-app="schemer"], [data-app="serpapi"], [data-app="sketch"], [data-app="snake"], [data-app="solitaire"], [data-app="soundcraft"], [data-app="soundtrack"], [data-app="spreadsheet"], [data-app="sticky"], [data-app="stopwatch"], [data-app="sudoku"], [data-app="sys0"], [data-app="t3"], [data-app="tasks"], [data-app="terminal"], [data-app="tetris"], [data-app="text-tools"], [data-app="themer"], [data-app="themes"], [data-app="tic-tac-toe"], [data-app="tip-calculator"], [data-app="todo"], [data-app="todoist"], [data-app="tour"], [data-app="toyminal"], [data-app="translator"], [data-app="typesafe"], [data-app="typing-test"], [data-app="unit-converter"], [data-app="unredacter"], [data-app="untitled"], [data-app="untitled-10"], [data-app="untitled-11"], [data-app="untitled-12"], [data-app="untitled-13"], [data-app="untitled-14"], [data-app="untitled-15"], [data-app="untitled-16"], [data-app="untitled-17"], [data-app="untitled-18"], [data-app="untitled-19"], [data-app="untitled-2"], [data-app="untitled-3"], [data-app="untitled-4"], [data-app="untitled-5"], [data-app="untitled-6"], [data-app="untitled-7"], [data-app="untitled-8"], [data-app="untitled-9"], [data-app="utils-base64"], [data-app="utils-cat"], [data-app="utils-echo"], [data-app="utils-grep"], [data-app="utils-head"], [data-app="utils-seq"], [data-app="utils-sort"], [data-app="utils-tail"], [data-app="utils-tr"], [data-app="utils-uniq"], [data-app="utils-wc"], [data-app="vectorcraft"], [data-app="weather"], [data-app="word-tiles"], [data-app="wordcraft"], [data-app="wordle"], [data-app="wordmark"], [data-app="wordnet"], [data-app="workspace-mail"], [data-app="world-clock"], [data-app="writer"]) { background-color: transparent; background-position: center; background-size: contain; background-repeat: no-repeat; border: none; border-radius: 0; box-shadow: none; color: transparent; text-shadow: none; image-rendering: pixelated; }
.icon-image.app[data-app="animal-band"] { background-image: var(--sys0-icon-animal-band); }
.icon-image.app[data-app="anthropic"] { background-image: var(--sys0-icon-anthropic); image-rendering: auto; }
.icon-image.app[data-app="anylist"] { background-image: var(--sys0-icon-anylist); image-rendering: auto; }
.icon-image.app[data-app="anylist-recipes"] { background-image: var(--sys0-icon-anylist-recipes); image-rendering: auto; }
.icon-image.app[data-app="app-store"] { background-image: var(--sys0-icon-app-store); }
.icon-image.app[data-app="asteroids"] { background-image: var(--sys0-icon-asteroids); image-rendering: auto; }
.icon-image.app[data-app="audio-player"] { background-image: var(--sys0-icon-audio-player); }
.icon-image.app[data-app="backside"] { background-image: var(--sys0-icon-backside); }
.icon-image.app[data-app="blackjack"] { background-image: var(--sys0-icon-blackjack); image-rendering: auto; }
.icon-image.app[data-app="bookmarks"] { background-image: var(--sys0-icon-bookmarks); }
.icon-image.app[data-app="breakout"] { background-image: var(--sys0-icon-breakout); image-rendering: auto; }
.icon-image.app[data-app="cadcraft"] { background-image: var(--sys0-icon-cadcraft); }
.icon-image.app[data-app="calculator"] { background-image: var(--sys0-icon-calculator); }
.icon-image.app[data-app="calendar"] { background-image: var(--sys0-icon-calendar); }
.icon-image.app[data-app="captions"] { background-image: var(--sys0-icon-captions); }
.icon-image.app[data-app="chat"] { background-image: var(--sys0-icon-chat); }
.icon-image.app[data-app="checkers"] { background-image: var(--sys0-icon-checkers); image-rendering: auto; }
.icon-image.app[data-app="codex"] { background-image: var(--sys0-icon-codex); image-rendering: auto; }
.icon-image.app[data-app="color-lab"] { background-image: var(--sys0-icon-color-lab); }
.icon-image.app[data-app="compute-costs"] { background-image: var(--sys0-icon-compute-costs); }
.icon-image.app[data-app="connect-four"] { background-image: var(--sys0-icon-connect-four); }
.icon-image.app[data-app="connectors"] { background-image: var(--sys0-icon-connectors); }
.icon-image.app[data-app="conniptions"] { background-image: var(--sys0-icon-conniptions); }
.icon-image.app[data-app="contacts"] { background-image: var(--sys0-icon-contacts); }
.icon-image.app[data-app="core"] { background-image: var(--sys0-icon-core); }
.icon-image.app[data-app="countdown"] { background-image: var(--sys0-icon-countdown); image-rendering: auto; }
.icon-image.app[data-app="countdown-pair"] { background-image: var(--sys0-icon-countdown-pair); image-rendering: auto; }
.icon-image.app[data-app="currency-converter"] { background-image: var(--sys0-icon-currency-converter); }
.icon-image.app[data-app="decider"] { background-image: var(--sys0-icon-decider); }
.icon-image.app[data-app="deckcraft"] { background-image: var(--sys0-icon-deckcraft); }
.icon-image.app[data-app="designcraft"] { background-image: var(--sys0-icon-designcraft); }
.icon-image.app[data-app="desktop-manager"] { background-image: var(--sys0-icon-desktop-manager); }
.icon-image.app[data-app="dice"] { background-image: var(--sys0-icon-dice); }
.icon-image.app[data-app="dictionary"] { background-image: var(--sys0-icon-dictionary); }
.icon-image.app[data-app="director"] { background-image: var(--sys0-icon-director); }
.icon-image.app[data-app="dots-and-boxes"] { background-image: var(--sys0-icon-dots-and-boxes); image-rendering: auto; }
.icon-image.app[data-app="drank"] { background-image: var(--sys0-icon-drank); }
.icon-image.app[data-app="dtree"] { background-image: var(--sys0-icon-dtree); }
.icon-image.app[data-app="effectcraft"] { background-image: var(--sys0-icon-effectcraft); }
.icon-image.app[data-app="expenses"] { background-image: var(--sys0-icon-expenses); }
.icon-image.app[data-app="exploder"] { background-image: var(--sys0-icon-exploder); }
.icon-image.app[data-app="figcraft"] { background-image: var(--sys0-icon-figcraft); }
.icon-image.app[data-app="files"] { background-image: var(--sys0-icon-files); }
.icon-image.app[data-app="filmcraft"] { background-image: var(--sys0-icon-filmcraft); }
.icon-image.app[data-app="fireflies"] { background-image: var(--sys0-icon-fireflies); }
.icon-image.app[data-app="flashcards"] { background-image: var(--sys0-icon-flashcards); }
.icon-image.app[data-app="focus-timer"] { background-image: var(--sys0-icon-focus-timer); image-rendering: auto; }
.icon-image.app[data-app="font-zero"] { background-image: var(--sys0-icon-font-zero); }
.icon-image.app[data-app="forge"] { background-image: var(--sys0-icon-forge); }
.icon-image.app[data-app="game-2048"] { background-image: var(--sys0-icon-game-2048); }
.icon-image.app[data-app="gemini"] { background-image: var(--sys0-icon-gemini); image-rendering: auto; }
.icon-image.app[data-app="github"] { background-image: var(--sys0-icon-github); }
.icon-image.app[data-app="golf-solitaire"] { background-image: var(--sys0-icon-golf-solitaire); image-rendering: auto; }
.icon-image.app[data-app="google"] { background-image: var(--sys0-icon-google); }
.icon-image.app[data-app="gridcraft"] { background-image: var(--sys0-icon-gridcraft); }
.icon-image.app[data-app="guppycube"] { background-image: var(--sys0-icon-guppycube); }
.icon-image.app[data-app="habits"] { background-image: var(--sys0-icon-habits); }
.icon-image.app[data-app="hangman"] { background-image: var(--sys0-icon-hangman); }
.icon-image.app[data-app="health"] { background-image: var(--sys0-icon-health); }
.icon-image.app[data-app="helium"] { background-image: var(--sys0-icon-helium); image-rendering: auto; }
.icon-image.app[data-app="higher-lower"] { background-image: var(--sys0-icon-higher-lower); image-rendering: auto; }
.icon-image.app[data-app="home"] { background-image: var(--sys0-icon-home); }
.icon-image.app[data-app="inventory"] { background-image: var(--sys0-icon-inventory); }
.icon-image.app[data-app="inventory-scanner"] { background-image: var(--sys0-icon-inventory-scanner); }
.icon-image.app[data-app="journal"] { background-image: var(--sys0-icon-journal); }
.icon-image.app[data-app="json-tool"] { background-image: var(--sys0-icon-json-tool); }
.icon-image.app[data-app="kanban"] { background-image: var(--sys0-icon-kanban); }
.icon-image.app[data-app="km-mi-converter"] { background-image: var(--sys0-icon-km-mi-converter); }
.icon-image.app[data-app="lightcraft"] { background-image: var(--sys0-icon-lightcraft); }
.icon-image.app[data-app="loan-calculator"] { background-image: var(--sys0-icon-loan-calculator); }
.icon-image.app[data-app="local-ai"] { background-image: var(--sys0-icon-local-ai); image-rendering: auto; }
.icon-image.app[data-app="loops"] { background-image: var(--sys0-icon-loops); }
.icon-image.app[data-app="lounge"] { background-image: var(--sys0-icon-lounge); }
.icon-image.app[data-app="mac-companion"] { background-image: var(--sys0-icon-mac-companion); image-rendering: auto; }
.icon-image.app[data-app="macro-tracker"] { background-image: var(--sys0-icon-macro-tracker); }
.icon-image.app[data-app="mailcraft"] { background-image: var(--sys0-icon-mailcraft); }
.icon-image.app[data-app="mancala"] { background-image: var(--sys0-icon-mancala); image-rendering: auto; }
.icon-image.app[data-app="manus"] { background-image: var(--sys0-icon-manus); }
.icon-image.app[data-app="markdown"] { background-image: var(--sys0-icon-markdown); }
.icon-image.app[data-app="memory"] { background-image: var(--sys0-icon-memory); }
.icon-image.app[data-app="messages"] { background-image: var(--sys0-icon-messages); }
.icon-image.app[data-app="metering"] { background-image: var(--sys0-icon-metering); }
.icon-image.app[data-app="minesweeper"] { background-image: var(--sys0-icon-minesweeper); }
.icon-image.app[data-app="morse"] { background-image: var(--sys0-icon-morse); }
.icon-image.app[data-app="musicbrainz"] { background-image: var(--sys0-icon-musicbrainz); }
.icon-image.app[data-app="nes"] { background-image: var(--sys0-icon-nes); }
.icon-image.app[data-app="notes"] { background-image: var(--sys0-icon-notes); }
.icon-image.app[data-app="openai"] { background-image: var(--sys0-icon-openai); image-rendering: auto; }
.icon-image.app[data-app="openrouter"] { background-image: var(--sys0-icon-openrouter); image-rendering: auto; }
.icon-image.app[data-app="pangram-index"] { background-image: var(--sys0-icon-pangram-index); image-rendering: auto; }
.icon-image.app[data-app="pangram-worker"] { background-image: var(--sys0-icon-pangram-worker); image-rendering: auto; }
.icon-image.app[data-app="pangrams"] { background-image: var(--sys0-icon-pangrams); image-rendering: auto; }
.icon-image.app[data-app="paseo"] { background-image: var(--sys0-icon-paseo); }
.icon-image.app[data-app="paseo-app"] { background-image: var(--sys0-icon-paseo-app); }
.icon-image.app[data-app="password-generator"] { background-image: var(--sys0-icon-password-generator); }
.icon-image.app[data-app="pc"] { background-image: var(--sys0-icon-pc); }
.icon-image.app[data-app="pdfcraft"] { background-image: var(--sys0-icon-pdfcraft); }
.icon-image.app[data-app="periodic-table"] { background-image: var(--sys0-icon-periodic-table); }
.icon-image.app[data-app="photocraft"] { background-image: var(--sys0-icon-photocraft); }
.icon-image.app[data-app="pixel-art"] { background-image: var(--sys0-icon-pixel-art); }
.icon-image.app[data-app="places"] { background-image: var(--sys0-icon-places); }
.icon-image.app[data-app="pomodoro"] { background-image: var(--sys0-icon-pomodoro); }
.icon-image.app[data-app="pong"] { background-image: var(--sys0-icon-pong); image-rendering: auto; }
.icon-image.app[data-app="pricing-sources"] { background-image: var(--sys0-icon-pricing-sources); }
.icon-image.app[data-app="quiz"] { background-image: var(--sys0-icon-quiz); }
.icon-image.app[data-app="recipe-index"] { background-image: var(--sys0-icon-recipe-index); }
.icon-image.app[data-app="recipe-web"] { background-image: var(--sys0-icon-recipe-web); image-rendering: auto; }
.icon-image.app[data-app="recipes"] { background-image: var(--sys0-icon-recipes); }
.icon-image.app[data-app="regex-tester"] { background-image: var(--sys0-icon-regex-tester); }
.icon-image.app[data-app="reversi"] { background-image: var(--sys0-icon-reversi); image-rendering: auto; }
.icon-image.app[data-app="salvation-army-value-guide"] { background-image: var(--sys0-icon-salvation-army-value-guide); }
.icon-image.app[data-app="schemas"] { background-image: var(--sys0-icon-schemas); }
.icon-image.app[data-app="schemer"] { background-image: var(--sys0-icon-schemer); }
.icon-image.app[data-app="serpapi"] { background-image: var(--sys0-icon-serpapi); }
.icon-image.app[data-app="sketch"] { background-image: var(--sys0-icon-sketch); }
.icon-image.app[data-app="snake"] { background-image: var(--sys0-icon-snake); }
.icon-image.app[data-app="solitaire"] { background-image: var(--sys0-icon-solitaire); image-rendering: auto; }
.icon-image.app[data-app="soundcraft"] { background-image: var(--sys0-icon-soundcraft); }
.icon-image.app[data-app="soundtrack"] { background-image: var(--sys0-icon-soundtrack); }
.icon-image.app[data-app="spreadsheet"] { background-image: var(--sys0-icon-spreadsheet); }
.icon-image.app[data-app="sticky"] { background-image: var(--sys0-icon-sticky); }
.icon-image.app[data-app="stopwatch"] { background-image: var(--sys0-icon-stopwatch); }
.icon-image.app[data-app="sudoku"] { background-image: var(--sys0-icon-sudoku); }
.icon-image.app[data-app="sys0"] { background-image: var(--desktop-mark, var(--sys0-icon-sys0)); }
.icon-image.app[data-app="t3"] { background-image: var(--sys0-icon-t3); }
.icon-image.app[data-app="tasks"] { background-image: var(--sys0-icon-tasks); }
.icon-image.app[data-app="terminal"] { background-image: var(--sys0-icon-terminal); }
.icon-image.app[data-app="tetris"] { background-image: var(--sys0-icon-tetris); image-rendering: auto; }
.icon-image.app[data-app="text-tools"] { background-image: var(--sys0-icon-text-tools); }
.icon-image.app[data-app="themer"] { background-image: var(--sys0-icon-themer); }
.icon-image.app[data-app="themes"] { background-image: var(--sys0-icon-themes); }
.icon-image.app[data-app="tic-tac-toe"] { background-image: var(--sys0-icon-tic-tac-toe); }
.icon-image.app[data-app="tip-calculator"] { background-image: var(--sys0-icon-tip-calculator); }
.icon-image.app[data-app="todo"] { background-image: var(--sys0-icon-todo); }
.icon-image.app[data-app="todoist"] { background-image: var(--sys0-icon-todoist); }
.icon-image.app[data-app="tour"] { background-image: var(--sys0-icon-tour); }
.icon-image.app[data-app="toyminal"] { background-image: var(--sys0-icon-toyminal); }
.icon-image.app[data-app="translator"] { background-image: var(--sys0-icon-translator); }
.icon-image.app[data-app="typesafe"] { background-image: var(--sys0-icon-typesafe); }
.icon-image.app[data-app="typing-test"] { background-image: var(--sys0-icon-typing-test); }
.icon-image.app[data-app="unit-converter"] { background-image: var(--sys0-icon-unit-converter); }
.icon-image.app[data-app="unredacter"] { background-image: var(--sys0-icon-unredacter); }
.icon-image.app[data-app="untitled"] { background-image: var(--sys0-icon-untitled); }
.icon-image.app[data-app="untitled-10"] { background-image: var(--sys0-icon-untitled-10); }
.icon-image.app[data-app="untitled-11"] { background-image: var(--sys0-icon-untitled-11); }
.icon-image.app[data-app="untitled-12"] { background-image: var(--sys0-icon-untitled-12); }
.icon-image.app[data-app="untitled-13"] { background-image: var(--sys0-icon-untitled-13); }
.icon-image.app[data-app="untitled-14"] { background-image: var(--sys0-icon-untitled-14); }
.icon-image.app[data-app="untitled-15"] { background-image: var(--sys0-icon-untitled-15); }
.icon-image.app[data-app="untitled-16"] { background-image: var(--sys0-icon-untitled-16); }
.icon-image.app[data-app="untitled-17"] { background-image: var(--sys0-icon-untitled-17); }
.icon-image.app[data-app="untitled-18"] { background-image: var(--sys0-icon-untitled-18); }
.icon-image.app[data-app="untitled-19"] { background-image: var(--sys0-icon-untitled-19); }
.icon-image.app[data-app="untitled-2"] { background-image: var(--sys0-icon-untitled-2); }
.icon-image.app[data-app="untitled-3"] { background-image: var(--sys0-icon-untitled-3); }
.icon-image.app[data-app="untitled-4"] { background-image: var(--sys0-icon-untitled-4); }
.icon-image.app[data-app="untitled-5"] { background-image: var(--sys0-icon-untitled-5); }
.icon-image.app[data-app="untitled-6"] { background-image: var(--sys0-icon-untitled-6); }
.icon-image.app[data-app="untitled-7"] { background-image: var(--sys0-icon-untitled-7); }
.icon-image.app[data-app="untitled-8"] { background-image: var(--sys0-icon-untitled-8); }
.icon-image.app[data-app="untitled-9"] { background-image: var(--sys0-icon-untitled-9); }
.icon-image.app[data-app="utils-base64"] { background-image: var(--sys0-icon-utils-base64); }
.icon-image.app[data-app="utils-cat"] { background-image: var(--sys0-icon-utils-cat); }
.icon-image.app[data-app="utils-echo"] { background-image: var(--sys0-icon-utils-echo); }
.icon-image.app[data-app="utils-grep"] { background-image: var(--sys0-icon-utils-grep); }
.icon-image.app[data-app="utils-head"] { background-image: var(--sys0-icon-utils-head); }
.icon-image.app[data-app="utils-seq"] { background-image: var(--sys0-icon-utils-seq); }
.icon-image.app[data-app="utils-sort"] { background-image: var(--sys0-icon-utils-sort); }
.icon-image.app[data-app="utils-tail"] { background-image: var(--sys0-icon-utils-tail); }
.icon-image.app[data-app="utils-tr"] { background-image: var(--sys0-icon-utils-tr); }
.icon-image.app[data-app="utils-uniq"] { background-image: var(--sys0-icon-utils-uniq); }
.icon-image.app[data-app="utils-wc"] { background-image: var(--sys0-icon-utils-wc); }
.icon-image.app[data-app="vectorcraft"] { background-image: var(--sys0-icon-vectorcraft); }
.icon-image.app[data-app="weather"] { background-image: var(--sys0-icon-weather); }
.icon-image.app[data-app="word-tiles"] { background-image: var(--sys0-icon-word-tiles); image-rendering: auto; }
.icon-image.app[data-app="wordcraft"] { background-image: var(--sys0-icon-wordcraft); }
.icon-image.app[data-app="wordle"] { background-image: var(--sys0-icon-wordle); }
.icon-image.app[data-app="wordmark"] { background-image: var(--desktop-mark, var(--sys0-icon-wordmark)); }
.icon-image.app[data-app="wordnet"] { background-image: var(--sys0-icon-wordnet); }
.icon-image.app[data-app="workspace-mail"] { background-image: var(--sys0-icon-workspace-mail); }
.icon-image.app[data-app="world-clock"] { background-image: var(--sys0-icon-world-clock); }
.icon-image.app[data-app="writer"] { background-image: var(--sys0-icon-writer); }