/* Compact libadwaita color roles, native DOM controls over a full-window canvas. */
:root { font: var(--ui-text-size, 1rem) var(--ui-font, "Adwaita Sans", system-ui, "Noto Sans CJK JP", "Noto Sans CJK SC", "Noto Sans CJK TC", "Noto Sans CJK KR", sans-serif); color-scheme: dark; --bg: #333333; --panel: #414141; --tabbar: #2e2e2e; --input: #333333; --text: #fafafb; --accent: #3584e4; --button: #ffffff0d; --thumb: #d3d3d3; --settings: #333333; --sidebar: #2e2e32; --card-shade: rgb(0 0 6 / 36%); --card-shadow: 0 0 0 1px rgb(0 0 6 / 3%), 0 1px 3px 1px rgb(0 0 6 / 7%), 0 2px 6px 2px rgb(0 0 6 / 3%); }
:root:lang(ja) { --ui-font: "Noto Sans CJK JP", "Hiragino Sans", "Yu Gothic UI", system-ui, sans-serif; }
:root:lang(zh-Hans) { --ui-font: "Noto Sans CJK SC", "PingFang SC", "Microsoft YaHei UI", system-ui, sans-serif; }
:root:lang(zh-Hant) { --ui-font: "Noto Sans CJK TC", "PingFang TC", "Microsoft JhengHei UI", system-ui, sans-serif; }
:root:lang(ko) { --ui-font: "Noto Sans CJK KR", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif; }
body { --secondary:color-mix(in srgb,var(--text) 55%,transparent); --popover: var(--panel); --glass-panel: var(--panel); --glass-strip: var(--tabbar); --glass-chip: var(--bg); --glass-switcher: var(--tabbar); --glass-selection: var(--selection); --glass-header-selection: var(--header-selection); --glass-switcher-selection: var(--header-selection); --glass-document-tab: var(--panel); --chrome-surface: var(--glass-chip); }
:root { --corner-fit: .54; --squircle-scale: calc(var(--corner-fit) / .54); --surface-radius: calc(18px * var(--corner-fit)); --control-radius: calc(var(--panel-control-radius, 12px) * var(--corner-fit)); --tile-radius: 18px; }
#header, .header-editor, .header-drag-preview { --header-radius: calc(var(--header-tile) / 2 * var(--corner-fit)); }
@supports (corner-shape: squircle) {
  :root { --corner-fit: 1; }
  *, ::before, ::after { corner-shape: squircle; }
  :is(.size-dot, .option-radio, .gradient-stops button, .battery-shell, .swatch-circles .swatch, .number-dial-face), .color-wheel-control *, .number-dial-face::after { corner-shape: round; }
}
/* Match Adwaita's native tooltip: readable text, quiet dark surface, no arrow. */
.hover-tooltip { position:fixed; inset:auto; width:max-content; margin:0; padding:6px 10px; border:1px solid rgb(255 255 255 / 10%); border-radius:calc(9px * var(--squircle-scale)); background:rgb(0 0 6 / 80%); color:white; box-shadow:none; font:inherit; font-weight:400; line-height:normal; white-space:pre-wrap; overflow-wrap:anywhere; pointer-events:none; user-select:none; }
/* GTK's compact manager: 46px header, 18px body margins, 56px rows. */
.workspace-manager { width:460px; height:500px; background:var(--bg); --workspace-shade:#fff; --workspace-list-bg:color-mix(in srgb,white 8%,var(--bg)); --workspace-button-bg:color-mix(in srgb,white 10%,transparent); --workspace-button-hover:color-mix(in srgb,white 15%,transparent); }
body[data-theme="light"] .workspace-manager { --workspace-shade:#000; --workspace-list-bg:var(--card); --workspace-button-bg:color-mix(in srgb,black 7%,transparent); --workspace-button-hover:color-mix(in srgb,black 11%,transparent); }
.workspace-manager[open] { display:flex; flex-direction:column; }
body .workspace-manager::backdrop { background:rgb(0 0 0 / 12%); }
.workspace-form::backdrop { background:#0003; }
.workspace-manager .workspace-intro { flex:none; margin:18px 18px 22px; line-height:normal; }
.workspace-manager .workspace-add, .workspace-manager .dialog-close { position:absolute; top:6px; width:34px; height:34px; min-height:34px; padding:0; border-radius:var(--control-radius); background:transparent; }
.workspace-manager .workspace-add { right:46px; }
.workspace-manager .workspace-add::before, .workspace-manager .workspace-add::after { content:""; position:absolute; width:14px; height:2px; left:10px; top:16px; background:currentColor; }
.workspace-manager .workspace-add::after { transform:rotate(90deg); }
.workspace-manager .dialog-close { right:6px; border-radius:50%; }
.workspace-manager .dialog-close::before { content:""; position:absolute; inset:5px; border-radius:50%; background:color-mix(in srgb,var(--workspace-shade) 10%,transparent); }
.workspace-manager .dialog-close > span { display:block; position:relative; width:10px; height:10px; margin:auto; }
.workspace-manager .dialog-close > span::before, .workspace-manager .dialog-close > span::after { content:""; position:absolute; width:10px; height:2px; top:4px; left:0; background:currentColor; transform:rotate(45deg); }
.workspace-manager .dialog-close > span::after { transform:rotate(-45deg); }
.workspace-list { flex:1; min-height:0; margin:0 18px; overflow:auto; border-radius:calc(12px * var(--squircle-scale)); background:var(--workspace-list-bg); }
.workspace-manager .workspace-intro[hidden] + .workspace-list { margin-top:18px; }
.workspace-row { display:flex; position:relative; padding-right:14px; border-bottom:1px solid rgb(0 0 0 / 15%); touch-action:pan-y; }
.workspace-row:last-child { border-bottom:0; }
.workspace-choice { display:flex; flex:1; flex-direction:column; justify-content:center; align-items:start; gap:3px; min-width:0; min-height:55px; text-align:left; border-radius:0; background:transparent; padding:8px 6px 8px 14px; font-weight:400; line-height:normal; }
.workspace-row[data-selected="true"] { background:var(--selection); }
.workspace-manager .workspace-choice { background:transparent; }
.workspace-row-subtitle { font-size:inherit; opacity:.55; }
.workspace-row-title, .workspace-row-subtitle { max-width:100%; overflow-wrap:anywhere; }
.workspace-options { display:grid; place-items:center; align-self:center; flex:none; width:34px; height:34px; padding:0; margin-left:6px; transform:translateY(-.5px); font-weight:400; }
.workspace-options svg { width:16px; height:16px; }
.workspace-grip { flex:none; display:flex; align-items:center; justify-content:center; width:16px; padding:0; margin-left:8px; opacity:.55; cursor:grab; touch-action:none; }
.workspace-grip svg { width:16px; height:16px; }
.workspace-grip + .workspace-choice { padding-left:6px; }
.workspace-row-mark { display:flex; align-items:center; flex:none; margin-left:6px; transform:translateY(-.5px); }
.workspace-row-mark svg { width:16px; height:16px; }
.workspace-pin { opacity:.55; }
/* Row bodies, grips, and status icons share one hover surface. */
:where(:root:not([data-touch])) .workspace-row:has(.workspace-choice:not(:disabled)):hover { background:color-mix(in srgb,var(--workspace-shade) 3%,transparent); }
:where(:root:not([data-touch])) .workspace-row[data-selected="true"]:has(.workspace-choice:not(:disabled)):hover { background:color-mix(in srgb,var(--text) 8%,var(--selection)); }
:where(:root:not([data-touch])) .workspace-manager :is(.workspace-add,.workspace-options):hover:not(:disabled) { background:color-mix(in srgb,var(--workspace-shade) 7%,transparent); }
:where(:root:not([data-touch])) .workspace-manager .dialog-close:hover::before { background:color-mix(in srgb,var(--workspace-shade) 15%,transparent); }
.workspace-manager :is(.workspace-add,.workspace-options):active:not(:disabled) { background:color-mix(in srgb,var(--workspace-shade) 16%,transparent); }
.workspace-manager .dialog-close:active::before { background:color-mix(in srgb,var(--workspace-shade) 20%,transparent); }
.workspace-row:has(.workspace-choice:active:not(:disabled)) { background:color-mix(in srgb,var(--workspace-shade) 8%,transparent); }
.workspace-row[data-selected="true"]:has(.workspace-choice:active:not(:disabled)) { background:color-mix(in srgb,var(--text) 16%,var(--selection)); }
.workspace-row-menu { position:fixed; inset:auto; margin:0; display:none; flex-direction:column; min-width:180px; padding:6px; border:0; color:var(--text); background:var(--popover); box-shadow:0 4px 16px #0005; border-radius:var(--surface-radius); }
.workspace-row-menu:popover-open { display:flex; }
.workspace-row-menu button { display:flex; align-items:center; gap:8px; text-align:left; font-weight:400; padding:4px 8px; }
.workspace-menu-check { display:inline-flex; width:16px; flex:none; }
.workspace-menu-check svg { width:16px; height:16px; }
:where(:root:not([data-touch])) .workspace-row-menu button:hover:not(:disabled), .workspace-row-menu button:active:not(:disabled) { background:color-mix(in srgb,var(--text) 8%,transparent); }
.workspace-row-menu hr { width:100%; border:0; height:1px; background:color-mix(in srgb,var(--text) 15%,transparent); margin:5px 0; }
.workspace-row-dragging { opacity:.45; }
.workspace-drop-before { box-shadow:inset 0 2px var(--accent); }
.workspace-drop-after { box-shadow:inset 0 -2px var(--accent); }
.workspace-drag-preview { position:fixed; inset:auto; margin:0; border:0; padding:0; border-radius:calc(8px * var(--squircle-scale)); background:var(--panel); box-shadow:0 4px 12px #0006; pointer-events:none; opacity:.9; }
.workspace-manager :focus-visible, .workspace-row:has(.workspace-choice:focus-visible) { outline:2px solid var(--accent); outline-offset:-2px; }
.workspace-manager .workspace-choice:focus-visible { outline:none; }
.workspace-error { color:#e66; margin:10px 20px; white-space:pre-wrap; }
.workspace-manager footer { flex:none; gap:8px; margin:12px 18px 18px; }
.workspace-manager footer button { flex:1; background:var(--workspace-button-bg); }
.workspace-manager footer .suggested-action { background:var(--accent); color:var(--accent-foreground); }
.workspace-manager button:disabled { opacity:.5; }
:where(:root:not([data-touch])) .workspace-manager footer button:hover:not(:disabled) { background:var(--workspace-button-hover); }
:where(:root:not([data-touch])) :is(.workspace-manager,.workspace-form) .suggested-action:hover:not(:disabled) { background:color-mix(in srgb,white 10%,var(--accent)); }
.workspace-manager footer button:active:not(:disabled) { background:color-mix(in srgb,var(--workspace-shade) 20%,transparent); }
:is(.workspace-manager,.workspace-form) .suggested-action:active:not(:disabled) { background:color-mix(in srgb,black 10%,var(--accent)); }
:where(:root:not([data-touch])) .workspace-form .destructive-action:hover:not(:disabled) { background:#c44; }
.workspace-form .destructive-action:active:not(:disabled) { background:#a22; }
:where(:root:not([data-touch])) .workspace-form footer button:not(.suggested-action):hover:not(:disabled) { background:color-mix(in srgb,var(--text) 12%,transparent); }
.workspace-form footer button:not(.suggested-action):active:not(:disabled) { background:color-mix(in srgb,var(--text) 16%,transparent); }
.workspace-form { width:420px; padding:22px; box-sizing:border-box; }
.workspace-form label { display:flex; flex-direction:column; gap:7px; margin:16px 0; }
.workspace-form footer { margin:18px 0 0; flex-wrap:wrap; }
.workspace-form .destructive-action { background:#b33; }
.workspace-switcher, .header-menu-labels { display:flex; align-items:center; gap:2px; height:36px; padding:5px; border:0; border-radius:999px; background:var(--tabbar); text-shadow:none; }
.workspace-switcher { flex:0 1 auto; min-width:0; max-width:min(420px,40vw); overflow:hidden; }
.workspace-switcher-choices { flex:1 1 auto; display:flex; align-items:center; gap:2px; min-width:0; overflow-x:auto; scrollbar-width:none; }
/* Override the general 36px header button height inside the shared 36px track. */
#header .workspace-switcher button { flex:none; max-width:130px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#header .workspace-switcher .workspace-switcher-options { width:20px; height:26px; min-height:26px; padding:0 2px; color:color-mix(in srgb,var(--text) 70%,transparent); }
#header .workspace-switcher-options svg { width:16px; height:16px; }
#header .workspace-switcher button > span { min-width:0; overflow:hidden; text-overflow:ellipsis; }
body[data-theme="light"] { color-scheme: light; --bg: #b8b8b8; --panel: #ededed; --tabbar: #d2d2d2; --input: #fafafa; --text: #2e2e32; --button: #0000000d; --thumb: #fafafa; --settings: #fafafb; --sidebar: #ebebed; --card-shade: rgb(0 0 6 / 7%); }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
.panel-context-menu { font-size: var(--ui-text-size); }
body { margin: 0; overflow: hidden; background: var(--bg); color: var(--text); }
button, input, select, summary { font: inherit; accent-color: var(--accent); }
button, select, input[type="color"], summary { min-height: 34px; border: 0; border-radius: var(--control-radius); background: transparent; color: var(--text); padding: 5px 17px; }
button, summary { cursor: default; font-weight: 700; line-height: 24px; }
:where(:root:not([data-touch])) button:hover:not(:disabled):not(.panel-grip):not(.dock-tab):not(:where(.workspace-manager *, .workspace-form *, .color-readout, .color-shape, .shortcut-choose, .texture-tile)), :where(:root:not([data-touch])) summary:hover, :where(:root:not([data-touch])) select:hover { background: color-mix(in srgb, var(--text) 8%, transparent); }
button:active:not(:disabled):not(.panel-grip):not(.dock-tab):not(:where(.workspace-manager *, .workspace-form *, .color-readout, .color-shape, .shortcut-choose, .texture-tile)), summary:active { background: color-mix(in srgb, var(--text) 16%, transparent); }
button:disabled { opacity: .36; cursor: default; }
button[aria-pressed="true"], button[aria-selected="true"] { background: var(--selection); }
:focus-visible { outline: none; }
/* Chrome is a control surface, not a text document. Preserve text editing and
   copyable labels. Pen-first chrome intentionally has no focus/tap halo. */
.chrome, .dock-group, .dock-tab, .tile-popover, dialog, #canvas { user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
/* Safari can select SVG artwork independently of pointer hit testing. */
#canvas { -webkit-touch-callout: none; -webkit-user-drag: none; }
#document-title, #status, input:not([type="range"]):not([type="checkbox"]):not([type="color"]), textarea { user-select: text; -webkit-user-select: text; }
.brush-preview, svg { -webkit-user-drag: none; pointer-events: none; }
#canvas:focus { outline: none; }
#workspace { overflow: clip; position: relative; width: 100vw; height: 100dvh; min-height: 320px; }
#workspace[data-workspace-cursor], #workspace[data-workspace-cursor] * { cursor: var(--workspace-cursor) !important; }
#center { position: absolute; inset: 0; }
body:not([data-gpu="ready"]) #canvas { visibility: hidden; }
#gpu-notice { position: absolute; inset: 54px 6px 30px; display: flex; flex-direction: column; padding: 6px; overflow: auto; background: var(--bg); cursor: default; container-type: inline-size; }
#gpu-notice[hidden] { display: none; }
.gpu-report { user-select: text; margin-top: 12px; }
.gpu-report pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.startup-progress { position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%); padding: 6px 12px; border-radius: 6px; background: var(--bg); color: var(--fg); pointer-events: none; }
.startup-progress[hidden] { display: none; }
.gpu-help { width: 100%; max-width: 640px; flex: none; margin: auto; padding: 16px 20px; font-size: var(--ui-text-size); line-height: 1.4; user-select: text; overflow-wrap: anywhere; }
.gpu-help h1 { font-size: var(--ui-text-size); line-height: 1.25; margin: 0 0 8px; }
.gpu-help h2 { font-size: var(--ui-text-size); margin: 16px 0 8px; }
.gpu-help p { margin: 8px 0; }
.diagnostic-detail { white-space: pre-wrap; overflow-wrap: anywhere; user-select: text; max-height: min(30vh, 180px); overflow: auto; }
.gpu-help .gpu-cause { margin: 0 0 20px; font-size: var(--ui-text-size); }
.gpu-steps { padding-left: 24px; margin: 8px 0 20px; }
.gpu-steps li { padding-left: 4px; margin: 6px 0; }
.gpu-steps li::marker { font-weight: 700; }
.gpu-browsers { padding-left: 24px; margin: 12px 0 0; }
.gpu-browsers li { padding-left: 4px; margin: 8px 0; }
.gpu-address { display: flex; align-items: center; gap: 6px; margin: 4px 0; }
/* Match the ordered list's 24px marker inset plus 4px item padding. */
.gpu-help > .gpu-address, .gpu-launch { margin-left: 28px; }
.gpu-launch { display: block; margin-top: 8px; line-height: 28px; }
.gpu-help code { padding: 4px 8px; border-radius: 6px; background: var(--input); font-size: var(--ui-text-size); user-select: text; }
.gpu-address code { min-width: 0; flex: 0 1 auto; }
.gpu-launch code { white-space: nowrap; }
.gpu-address button { flex: none; min-height: 28px; padding: 2px 10px; font-size: var(--ui-text-size); background: var(--button); user-select: none; }
/* Keep readable 11pt text when the side panels leave a narrow help column. */
@container (max-width: 460px) {
  .gpu-help { padding: 12px 16px; line-height: 1.3; }
  .gpu-help p { margin-block: 6px; }
  .gpu-help .gpu-cause { margin-bottom: 16px; }
  .gpu-steps { margin-bottom: 16px; }
  .gpu-launch code { white-space: normal; }
}
#canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: none; }
#header { --header-item-gap:6px; --header-text-padding:6px; position: absolute; inset: 0 0 auto; height: 48px; padding: 0; display: block; background: transparent; z-index: 1000; }
#header nav > button, .header-menu > summary, #document-title { background: var(--bg); border-radius: var(--header-radius); }
:where(:root:not([data-touch])) #header nav > button:hover, :where(:root:not([data-touch])) .header-menu > summary:hover { background: color-mix(in srgb, var(--bg), var(--text) 8%); }
#header nav > button:active, .header-menu > summary:active { background: color-mix(in srgb, var(--bg), var(--text) 16%); }
#header-start > button[aria-pressed="true"] { background: var(--selection); }
#zen-capy { touch-action: manipulation; position: absolute; z-index: 1001; padding: 0; border-radius: calc(var(--header-tile) / 2 * var(--corner-fit)); background: var(--chrome-surface); }
#zen-capy > svg { width: var(--header-capy-icon); height: var(--header-capy-icon); }
:where(:root:not([data-touch])) :is(#canvas-status button.proof-status, #view-info):hover { background: color-mix(in srgb, var(--text) 8%, var(--chrome-surface)); }
#header nav { display: flex; align-items: center; gap:var(--header-item-gap); z-index: 1; }
.header-menu-labels { flex:none; width:max-content; }
.header-menu-labels[inert] { position:absolute; visibility:hidden; pointer-events:none; }
#header .header-menu-overflow > summary { width:36px; padding:0; }
#document-title { position: absolute; left: 50%; transform: translateX(-50%); font-weight: 600; white-space: nowrap; padding:0 var(--header-text-padding); height:36px; line-height:36px; }
.header-menu { position: relative; }
.header-menu > summary { padding:0 var(--header-text-padding); }
summary { list-style: none; display: flex; align-items: center; }
summary::-webkit-details-marker { display: none; }
.popover { position: absolute; top: 40px; left: 0; background: var(--popover); padding: 6px; min-width: 168px; border-radius: var(--surface-radius); box-shadow: 0 6px 20px #0005; }
#header-end .popover { left: auto; right: 0; }
.popover button { display: flex; gap: 24px; width: 100%; text-align: left; white-space: nowrap; }
.popover hr { border: 0; height: 1px; margin: 6px 0; background: color-mix(in srgb, var(--text) 15%, transparent); }
.command-label { flex: 1; }
.shortcut-hint { opacity: .55; font-weight: 400; white-space: nowrap; }
#canvas-status { position: absolute; padding: 0 4px; display: flex; gap: 12px; align-items: flex-end; background: transparent; color: var(--text); font-size: var(--ui-text-size); }
#canvas-status .proof-status, #view-info { padding: 3px 10px; line-height: 1.25; border-radius: 999px; background: var(--chrome-surface); font-weight: 400; min-height: 0; white-space: nowrap; }
#canvas-status .proof-status { max-width: 32em; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#view-info { margin-left: auto; flex: none; }
#screen-status { display: inline-flex; align-items: center; gap: 4px; }
#screen-status svg { width: 16px; height: 16px; flex: none; }
.screen-details { position: fixed; inset: auto; margin: 0; padding: 12px 14px; width: min(340px, calc(100vw - 12px)); box-sizing: border-box; border: 0; border-radius: var(--surface-radius); background: var(--popover); color: var(--text); box-shadow: 0 4px 16px #0005; font-size: var(--ui-text-size); user-select: none; -webkit-user-select: none; }
.screen-details:popover-open { display: flex; flex-direction: column; gap: 6px; }
.screen-details-title { opacity: .7; font-size: .9em; }
.screen-details-headline { font-weight: 600; }
.screen-details-body { margin: 2px 0 0; line-height: 1.35; }
.screen-details-mark { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
:is(#screen-status svg, .screen-details-headline).warning { color: #e5a50a; }
body[data-theme="light"] :is(#screen-status svg, .screen-details-headline).warning { color: #9c5700; }

svg { width: 16px; height: 16px; flex: none; display: block; }
#header button, #header summary { height: 36px; display: flex; align-items: center; justify-content: center; }
.tile-button, .panel-grip { display: grid; place-items: center; padding: 0; min-height: 0; min-width: 0; }
.tile-button { width: 36px; height: 36px; }
.panel-grip { cursor: grab; opacity: .65; }
.panel-footer { flex: none; width: 100%; cursor: grab; touch-action: none; }
.panel-footer > .panel-grip { width: 100%; height: 100%; }
.panel-footer .panel-grip svg, .collapsed-column > .panel-grip svg { transform: translateY(-2px) rotate(90deg); }
.panel-grip svg { transform: translateX(-2px); }
.dock-tabs > .panel-grip { flex: none; margin-left: auto; width: 20px; height: 24px; }
.tile-popover { position: fixed; inset: auto; margin: 0; border: 0; border-radius: var(--surface-radius); padding: 16px; background: var(--popover); color: var(--text); box-shadow: 0 6px 20px #0005; font-size: var(--ui-text-size); }
.tile-popover:popover-open { display: flex; flex-direction: column; gap: 12px; }
.tile-popover input { width: 180px; }
.dock-group, .divider { position: absolute; }
.dock-group, .gpu-help { color: var(--text); border-radius: var(--surface-radius); box-shadow: 0 2px 8px rgb(0 0 0 / 16%); }
.gpu-help { background: var(--panel); }
:is(.dock-group, .collapsed-column, .content-drawer, .canvas-action-bar):not(.expanded-panel) { --selection: var(--glass-selection); }
.expanded-panel { --glass-panel: var(--panel); --glass-strip: var(--tabbar); }
.dock-group { overflow: hidden; display: flex; flex-direction: column; }
.dock-group.tool-strip { --surface-radius: calc(var(--tile-radius) * var(--corner-fit)); }
.panel-columns { position: absolute; inset: 0; overflow: hidden; border-radius: var(--surface-radius); pointer-events: none; }
.panel-preview { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--glass-panel); border-radius: var(--surface-radius); overflow: hidden; pointer-events: auto; }
.panel-preview:has(> .dock-tabs) { background: transparent; }
.panel-preview:has(> .dock-tabs) > .panel-frame { background: var(--glass-panel); }
/* Shadow the combined silhouette (tabs, preview and drawer), never each column. */
.dock-group.expanded-panel { background: transparent; overflow: visible; box-shadow: none; pointer-events: none; filter: drop-shadow(0 8px 12px rgb(0 0 0 / 40%)); }
.panel-configuration { position: absolute; flex: none; background: var(--panel); border-radius: var(--surface-radius); pointer-events: auto; }
.expanded-panel.configuration-right .panel-preview { border-bottom-right-radius: 0; }
.expanded-panel.configuration-right .panel-configuration { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.expanded-panel.configuration-left .panel-preview { border-bottom-left-radius: 0; }
.expanded-panel.configuration-left .panel-configuration { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.expanded-panel.configuration-flush.configuration-right .panel-preview { border-top-right-radius: 0; }
.expanded-panel.configuration-flush.configuration-left .panel-preview { border-top-left-radius: 0; }
.panel-column-join { position: absolute; pointer-events: none; background: radial-gradient(circle at top left, transparent 8px, var(--panel) 8px); }
@supports (corner-shape: squircle) { .panel-column-join { background: var(--panel); border-top-left-radius: 8px; corner-shape: superellipse(-2); } }
.panel.panel-configuration-body { display: flex; flex-direction: column; gap: 12px; padding: 12px; height: 100%; }
.panel-configuration-body > * { flex: none; }
.panel-configuration-body h3, .panel-configuration-body p { margin: 0; font-size: inherit; }
.panel-configuration-body p { opacity: .55; line-height: 1.4; }
.configuration-row, .panel-field { display: flex; flex-direction: column; gap: 6px; }
.configuration-row > label { display: flex; align-items: center; gap: 4px; min-height: 24px; }
.panel-field > label { margin-top: 12px; }
.panel .panel-field .number-control { width: 100%; }
.panel-field > input[type="color"] { background: var(--button); padding: 4px 12px; width: 100%; height: 34px; }
.panel-field > input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.panel-field > input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 4px; }
.panel-field > input[type="color"]::-moz-color-swatch { border: 0; border-radius: 4px; }
.panel-field select { width: 100%; }
.configuration-presets { display: flex; flex-direction: row; flex-wrap: wrap; gap: 6px; padding: 3px; }
.configuration-presets button { min-width: 52px; background: var(--button); }
.panel-check { appearance: none; flex: none; width: 16px; height: 16px; margin: 0; border: 2px solid color-mix(in srgb, var(--text) 25%, transparent); border-radius: 4px; }
.panel-check:checked { border: 0; background: var(--accent); }
.panel-check:checked::after { content: ""; display: block; width: 16px; height: 16px; background: var(--accent-foreground); mask: url("icons/layer-check-symbolic.ee42a3e6be05b2a036e0.svg") center / contain no-repeat; }
.panel-context-menu { position: fixed; inset: auto; margin: 0; padding: 6px; min-width: 180px; max-height: calc(100dvh - 24px); overflow-y: auto; border: 0; border-radius: var(--surface-radius); background: var(--popover); color: var(--text); box-shadow: 0 4px 16px #0005; user-select: none; -webkit-user-select: none; }
.panel-context-menu button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 4px 8px; text-align: left; font-weight: 400; }
.panel-context-menu hr { height: 1px; border: 0; margin: 6px; background: color-mix(in srgb, var(--text) 15%, transparent); }
.zoom-menu { position: fixed; inset: auto; margin: 0; padding: 6px; min-width: 240px; width: max-content; max-height: calc(100dvh - 12px); overflow-y: auto; border: 0; border-radius: var(--surface-radius); background: var(--popover); color: var(--text); box-shadow: 0 4px 16px #0005; font-size: var(--ui-text-size); user-select: none; -webkit-user-select: none; }
.zoom-menu hr { height: 1px; border: 0; margin: 6px; background: color-mix(in srgb, var(--text) 15%, transparent); }
.zoom-menu > .number-control { padding: 2px 8px; }
.zoom-menu-items { display: flex; flex-direction: column; }
.zoom-menu-items button { width: 100%; text-align: left; }
.workspace-menu-items button { display: flex; align-items: center; gap: 8px; padding: 4px 8px; font-weight: 400; white-space: nowrap; }
.menu-check { flex: none; width: 16px; height: 16px; }
.menu-label { flex: 1; min-width: 0; }
.submenu-arrow { transform: rotate(-90deg); margin-left: auto; }
.submenu-back > svg { transform: rotate(90deg); }
.toolbar-options { display: flex; flex-direction: column; gap: 12px; }
.toolbar-option-group { background: var(--button); border-radius: var(--control-radius); overflow: hidden; }
.panel .toolbar-option-group button { display: flex; align-items: center; width: 100%; gap: 12px; padding: 9px; font-weight: 400; text-align: left; border-radius: 0; }
.toolbar-option-group button + button { border-top: 1px solid var(--card-shade); }
.preference-context-menu .command-label { flex: 1; }
.preference-context-menu button { gap: 24px; }
.option-radio { flex: none; width: 16px; height: 16px; border: 2px solid color-mix(in srgb, var(--text) 30%, transparent); border-radius: 50%; }
[aria-checked="true"] > .option-radio { border: 5px solid var(--accent); background: white; }
.tool-picker { width: 480px; height: 560px; }
.tool-picker[open] { display: flex; flex-direction: column; }
.tool-picker > .dialog-header { display: flex; justify-content: space-between; padding: 6px; height: 48px; }
.tool-picker > .dialog-header h2 { position: absolute; left: 50%; transform: translateX(-50%); pointer-events: none; }
.tool-picker-body { display: flex; flex-direction: column; gap: 12px; flex: 1; min-height: 0; padding: 16px 18px 18px; }
.tool-picker-body > :not(.panel-frame) { flex: none; }
.toolbar-name { display: flex; flex-direction: column; gap: 4px; border-radius: var(--control-radius); padding: 10px 14px; background: var(--button); }
.toolbar-name > span { font-size: .85em; opacity: .6; }
.toolbar-name input { background: transparent; color: var(--text); border: 0; padding: 0; width: 100%; }
.tool-search { position: relative; height: 34px; }
.tool-search > svg { position: absolute; left: 10px; top: 9px; opacity: .6; }
.tool-search > .preferences-search { width: 100%; margin: 0; padding-left: 32px; }
.tool-choices { border-radius: var(--control-radius); overflow: auto; scrollbar-width: none; background: var(--button); height: 100%; }
.tool-choice { display: flex; align-items: center; gap: 12px; padding: 12px; min-height: 58px; border-bottom: 1px solid var(--card-shade); }
.tool-choice:last-child { border-bottom: 0; }
.tool-choice > span { flex: 1; min-width: 0; }
.tool-choice small { display: block; opacity: .55; margin-top: 4px; }
.tool-count { opacity: .6; }
.dock-tabs { display: flex; gap: 0; padding: 0; height: var(--tab-bar-height); flex-shrink: 0; align-items: center; background: var(--glass-strip); font-size: var(--ui-text-size); cursor: default; touch-action: none; }
.dock-tabs:has(> .tab-list) { background: linear-gradient(var(--glass-strip) 0 0) right / 20px 100% no-repeat; }
.tab-list { display: flex; align-items: center; flex: 1; min-width: 0; height: var(--tab-bar-height); overflow: auto hidden; scrollbar-width: none; isolation: isolate; }
.tab-list > .dock-tab { flex: none; }
.dock-tab { position: relative; white-space: nowrap; cursor: default; height: 36px; min-height: 36px; padding: 4px 8px; border-radius: var(--surface-radius) var(--surface-radius) 0 0; display: flex; align-items: center; gap: 6px; touch-action: none; }
.dock-tab:not(.column-tab)[aria-selected="false"] { border-bottom-left-radius: var(--hover-left-radius, 0px); border-bottom-right-radius: var(--hover-right-radius, 0px); }
:where(:root:not([data-touch])) .dock-tab:not(.column-tab)[aria-selected="false"]:hover { background: color-mix(in srgb, var(--text) 8%, transparent); }
:where(:root:not([data-touch])) .dock-tab[aria-selected="false"]:hover[data-hover-left="-6"]::before,
:where(:root:not([data-touch])) .dock-tab[aria-selected="false"]:hover[data-hover-right="-6"]::after { content:""; position:absolute; bottom:0; width:6px; height:6px; background:color-mix(in srgb,var(--text) 8%,transparent); pointer-events:none; }
.dock-tab[aria-selected="false"]::before { right:100%; clip-path:var(--hover-left-foot); }
.dock-tab[aria-selected="false"]::after { left:100%; clip-path:var(--hover-right-foot); }
[data-drag-pickup="hold"] { cursor: default; }
.panel-grip { touch-action: none; }
.dock-tab.icon-only-tab { width: 36px; justify-content: center; }
.drag-source { opacity: .5; }
.tab-list > .dock-tab[aria-selected="true"], .tab-slide-overlay > .docked-tab-preview { box-shadow: 0 calc(-1 * var(--surface-radius)) var(--glass-strip); }
.tab-list > .dock-tab[aria-selected="true"] { z-index: -1; background: var(--glass-panel); }
.tab-list > .dock-tab[aria-selected="true"]::before, .tab-list > .dock-tab[aria-selected="true"]::after { content: ""; position: absolute; inset-block: 0; width: 6px; translate: var(--slide, 0); background: var(--glass-strip); box-shadow: 0 6px var(--glass-panel); pointer-events: none; }
.tab-list > .dock-tab[aria-selected="true"]::before { right: 100%; border-bottom-right-radius: 6px; border-image: linear-gradient(var(--glass-strip) 0 0) 1 / 0 0 0 100vw / 0 0 0 100vw; }
.tab-list > .dock-tab[aria-selected="true"]::after { left: 100%; border-bottom-left-radius: 6px; border-image: linear-gradient(var(--glass-strip) 0 0) 1 / 0 100vw 0 0 / 0 100vw 0 0; }
.dragged-tab-source { visibility: hidden; }
.tab-list > .dragged-tab-source[aria-selected="true"] { visibility: visible; background: transparent; box-shadow: none; }
.tab-list > .dragged-tab-source[aria-selected="true"] > * { visibility: hidden; }
.tab-slide-overlay { position: fixed; z-index: 2000; overflow: hidden; pointer-events: none; }
.tab-slide-overlay > .dock-tab { position: absolute; pointer-events: none; margin: 0; background: transparent; }
.tab-slide-overlay > .dock-tab[aria-selected="true"] { background: var(--glass-panel); }
.tab-slide-overlay > .dragged-tab-preview { z-index: 2; }
.neighbor-tab-preview { transition: transform 120ms ease-out; }
.neighbor-tab-source::before, .neighbor-tab-source::after { transition: translate 120ms ease-out; }
@media (prefers-reduced-motion: reduce) { .neighbor-tab-preview, .neighbor-tab-source::before, .neighbor-tab-source::after { transition: none; } }
.panel-frame { position: relative; flex: 1; min-height: 0; min-width: 0; overflow: hidden; }
.panel { overflow: hidden auto; width: 100%; height: 100%; padding: var(--panel-inset); scrollbar-width: none; font-size: var(--ui-text-size); }
.panel button { min-height: var(--panel-control-height); padding: 0 var(--panel-field-padding); line-height: 20px; }
.scroll-thumb { position: absolute; right: 0; width: 8px; min-height: 28px; padding: 2px; cursor: default; touch-action: none; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 180ms; }
:root[data-mouse] .scroll-thumb { visibility: visible; pointer-events: auto; }
.scroll-thumb::after { content: ""; display: block; height: 100%; border-radius: 8px; background: color-mix(in srgb, var(--text) 35%, transparent); }
:root[data-mouse] :is(.panel-frame, .layer-list, .texture-dialog .dialog-content):is(:hover, :focus-within) > .scroll-thumb { opacity: 1; }
:root[data-mouse] .scroll-thumb:is(:hover, :active) { padding: 1px; }
.panel.tile-panel { padding: 0; position: relative; overflow: clip; touch-action: none; }
.toolbar-controls { position: relative; width: 100%; height: 100%; }
.toolbar-controls > button, .toolbar-controls > .tool-tile { position: absolute; min-height: 0; padding: 0; }
.panel .tool-tile > button { display: grid; place-items: center; padding: 0; min-height: 0; width: 100%; height: 100%; }
.tool-tile > button, .toolbar-action > button, .toolbar-segments, .column-tab { border-radius: calc(var(--tile-radius) * var(--corner-fit)); }
.tool-tile > button:disabled { pointer-events: none; }
.tool-variations { position:absolute; right:0; bottom:0; width:14px; height:14px; pointer-events:none; }
.tool-variations > svg { position:absolute; right:0; bottom:0; width:16px; height:16px; }
.tile-label { width: 72px; min-width: 0; padding-right: 4px; line-height: 18px; font-weight: var(--tile-label-weight); overflow: hidden; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: var(--tile-label-lines); -webkit-box-orient: vertical; }
.panel-measure { position: fixed; left: -10000px; top: 0; visibility: hidden; pointer-events: none; contain: layout style; }
.toolbar-controls[data-axis="vertical"] > .panel-grip svg { transform: translateY(-2px) rotate(90deg); }
.brush-preview { width: 100%; height: 40px; object-fit: fill; border-radius: 3px; }
.size-controls { display: flex; align-items: center; gap: var(--panel-control-spacing); margin-bottom: var(--panel-group-spacing); }
.number-control { width: 100%; min-width: 0; font-size: var(--ui-text-size); }
.number-header { display: flex; align-items: center; gap: var(--panel-control-spacing, 6px); }
.number-labels { flex: 1; min-width: 0; align-self: center; }
.panel .number-labels { padding-left: 0; }
.number-title { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.number-description { margin: 0; opacity: .55; line-height: 1.25; }
.dim { color:var(--secondary); }
.number-value-box { display: flex; align-items: center; flex: none; }
.number-control .number-value, .number-control .number-entry { min-height: 24px; height: 24px; line-height: 20px; padding: 2px 6px; font-weight: 400; font-variant-numeric: tabular-nums; text-align: right; }
.number-control .number-entry { width: auto; min-width: 0; border: 0; border-radius: var(--control-radius); outline: 0; background: var(--input); color: var(--text); }
.number-control.error .number-entry { box-shadow: inset 0 0 0 1px #e55; }
.number-track { display: flex; align-items: center; gap: 6px; }
.number-control .number-step { display: grid; place-items: center; flex: none; min-width: 32px; min-height: 32px; width: 32px; height: 32px; padding: 0; }
.number-step svg { width: 16px; height: 16px; }
.number-control .number-slider { --thumb-size: 16px; appearance: none; flex: 1; width: 0; min-width: 0; height: 32px; padding: 0; margin: 0; border: 0; background: transparent; touch-action: pan-y; }
.number-slider::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--number-fill, var(--accent)) var(--fill), var(--number-track, var(--input)) var(--fill)); }
.number-slider::-moz-range-track { height: 4px; border-radius: 2px; background: var(--number-track, var(--input)); }
.number-slider::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--number-fill, var(--accent)); }
.panel .number-control { --number-fill: color-mix(in srgb, var(--panel), var(--text)); }
.number-slider::-webkit-slider-thumb { appearance: none; width: var(--thumb-size, 16px); height: var(--thumb-size, 16px); margin-top: -6px; border: 0; border-radius: 50%; background: var(--thumb); box-shadow: 0 1px 3px #0005; }
.number-slider::-moz-range-thumb { width: var(--thumb-size, 16px); height: var(--thumb-size, 16px); border: 0; border-radius: 50%; background: var(--thumb); box-shadow: 0 1px 3px #0005; }
.panel .number-track { gap: var(--panel-control-spacing); }
.panel .number-control .number-step { min-width: 24px; min-height: 24px; width: 24px; height: 24px; }
.panel .number-control .number-slider { --thumb-size: 0px; height: 24px; }
.panel .number-slider::-webkit-slider-thumb { margin-top: 2px; box-shadow: none; }
.panel .number-slider::-moz-range-thumb { box-shadow: none; }
.number-value-box.number-spin { background: var(--input); border-radius: var(--control-radius); overflow: hidden; }
.number-spin .number-entry { width: 60px; height: 32px; }
.panel .number-spin .number-entry { width: auto; height: var(--panel-control-height); }
.number-spin-field { display:contents; }
.number-spin-field > .number-measure { display:none; }
.panel .number-spin-field { display:grid; }
.panel .number-spin-field > * { grid-area:1/1; min-width:0; font-variant-numeric:tabular-nums; }
.panel .number-spin-field > .number-entry { width:0; min-width:100%; }
.panel .number-spin-field > .number-measure { display:block; visibility:hidden; min-width:calc(24px + 2 * var(--panel-field-padding)); padding:2px var(--panel-field-padding); }
.number-panel { position:relative; height:36px; --number-fill:color-mix(in srgb, var(--panel), var(--text)); }
.number-panel .number-header { position:absolute; inset:0; align-items:flex-start; }
.number-panel .number-labels { padding:0 76px 0 0; line-height:20px; align-self:flex-start; }
.number-panel .number-value-box { position:absolute; inset:0 0 0 auto; align-items:flex-end; }
.number-panel .number-value { touch-action:none; cursor:ns-resize; }
.number-panel .number-entry { width:68px; max-width:68px; height:var(--panel-control-height); min-height:var(--panel-control-height); box-sizing:border-box; }
.number-panel .number-track { position:absolute; left:36px; right:76px; bottom:0; height:16px; }
.number-panel .number-slider, .panel .number-panel .number-slider { --thumb-size:0px; height:16px; }
.number-panel .number-slider::-webkit-slider-thumb { margin-top:2px; box-shadow:none; }
.number-panel .number-slider::-moz-range-thumb { box-shadow:none; }
.number-panel.number-dial { --dial-size:calc(var(--panel-slider-height, 36px) - 2 * var(--panel-control-spacing, 4px)); }
.number-panel.number-dial .number-labels { padding-right:calc(76px + var(--dial-size) + var(--panel-control-spacing, 4px)); }
.number-dial-face { position:absolute; top:calc(50% - var(--dial-size) / 2); right:76px; width:var(--dial-size); height:var(--dial-size); border-radius:50%; background:var(--number-track, var(--input)); touch-action:none; }
.number-dial-face::after { content:""; position:absolute; left:50%; top:50%; width:22%; height:22%; border-radius:50%; background:var(--number-fill); transform:translate(-50%, -50%) rotate(var(--angle, 0deg)) translateX(125%); }
.number-dial-face:focus-visible { box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--text) 60%, transparent); }
.panel select { background: var(--input); }
.size-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--size-tile)), var(--size-tile))); gap: var(--size-gap); width: 100%; }
.panel .size-button { position: relative; width: 100%; height: var(--size-height); min-height: 0; padding: 0; font-size: inherit; font-weight: 400; line-height: 1; border-radius: calc(var(--tile-radius) * var(--corner-fit)); overflow: hidden; }
.size-preview { position: absolute; inset: 0; display: grid; grid-template-rows: var(--size-tile); place-items: center; mask-image: linear-gradient(to bottom, #000 40%, #0003 65%, transparent); pointer-events: none; }
.size-dot { display: block; border-radius: 50%; background: var(--text); }
.size-label { position: absolute; bottom: 2px; left: 0; right: 0; text-align: center; pointer-events: none; }
.layers-panel { padding: 0; display: flex; flex-direction: column; }
.layer-header,.layer-footer { padding: 4px var(--panel-inset); flex: none; }
.layer-header { display: flex; flex-direction: column; gap: var(--panel-control-spacing); }
.layer-options { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--panel-control-spacing); align-items: center; }
.panel .layer-options .layer-blend { display: flex; align-items: center; gap: 4px; width: 100%; min-width: 0; height: 24px; min-height: 24px; padding: 0 6px; background: var(--input); font-weight: 700; }
.layer-blend-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: start; }
.layer-blend svg { flex: none; width: 12px; height: 12px; }
.layer-flags,.layer-footer { display: flex; gap: var(--panel-control-spacing); }
:is(.panel,.layer-drag-preview) .layer-icon { width: 24px; height: 24px; min-height: 24px; padding: 0; flex: none; display: grid; place-items: center; border-radius: var(--control-radius); background: transparent; }
.layer-icon svg { width: 16px; height: 16px; }
:is(.panel,.layer-drag-preview) .layer-icon[aria-pressed="true"] { background: var(--selection); }
.panel .layer-reference[aria-pressed="true"] { background: color-mix(in srgb,var(--text) 12%,transparent); }
.layer-footer { margin-top: auto; }
.layer-more { margin-left: auto; }
.layer-list { position: relative; display: flex; flex-direction: column; overflow: hidden; min-height: 0; flex: 1; }
.layer-rows { scrollbar-width: none; display: flex; flex-direction: column; overflow-y: auto; min-height: 0; flex: 1; }
.layer-connections { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; }
.layer-connections > g > path { fill: none; stroke: currentColor; stroke-linecap: round; }
.layer-connections svg { width: 12px; height: 12px; }
.layer-connections [data-kind="clip"] { color: var(--relationship); stroke-width: 2px; }
.layer-connections [data-kind="effect"] { stroke-width: 1px; }
.layer-row, .panel button.layer-row { display: flex; align-items: center; gap: 2px; min-height: 40px; padding: 2px 6px; flex: none; border-radius: 0; line-height: normal; }
button.layer-row { justify-content: center; gap: var(--panel-group-spacing); font-weight: 400; }
.layer-row.selected { background: var(--selection); }
.layer-row > .layer-icon { height: auto; align-self: stretch; }
.layer-thumbnails { display: flex; align-items: center; gap: 2px; flex: none; }
.layer-connection-gutter { width: 3px; flex: none; }
:is(.panel,.layer-drag-preview) .layer-thumbnail { width: 30px; height: 30px; border: 1px solid color-mix(in srgb, var(--text) 10%, transparent); border-radius: calc(15px * var(--corner-fit)); background: transparent; box-shadow: none; position: relative; outline: 0 solid transparent; outline-offset: 4px; transition: outline-color 200ms cubic-bezier(.25,.46,.45,.94), outline-width 200ms cubic-bezier(.25,.46,.45,.94), outline-offset 200ms cubic-bezier(.25,.46,.45,.94); }
@media (prefers-reduced-motion: reduce) { :is(.panel,.layer-drag-preview) .layer-thumbnail { transition: none; } }
.layer-thumbnail canvas { width: 28px; height: 28px; border-radius: calc(14px * var(--corner-fit)); pointer-events: none; }
.layer-thumbnail .layer-type-symbol { position: absolute; right: 3px; bottom: 3px; width: 14px; height: 14px; padding: 1px; border-radius: 2px; background: var(--input); color: var(--text); pointer-events: none; }
.layer-folder svg { width: 28px; height: 28px; }
.layer-folder .layer-group-pass-through { position: absolute; right: 3px; bottom: 3px; width: 14px; height: 14px; border-radius: 2px; background: var(--input); pointer-events: none; }
:is(.panel,.layer-drag-preview) .layer-link { width: 10px; }
.layer-link svg { width: 10px; height: 10px; }
.layer-lock svg { width: 12px; height: 12px; }
.layer-grip svg { width: 16px; height: 16px; }
.layer-text { display: flex; flex-direction: column; min-width: 0; flex: 1; margin-left: 6px; }
.layer-name,.layer-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.layer-meta { color: var(--secondary); }
.layer-lock,.layer-grip { display: grid; place-items: center; flex: none; }
.layer-lock { width: 12px; }
.layer-grip { width: 16px; touch-action: none; opacity: .6; }
.layer-grip[aria-disabled=true] { pointer-events: none; }
.layer-name-entry { width: 100%; min-width: 0; height: 24px; padding: 0 2px; border-radius: var(--control-radius); }
:is(.panel,.layer-drag-preview) .layer-thumbnail.editing-target { border-color: var(--accent); outline: 3px solid var(--accent); outline-offset: -2px; }
.layer-drop-before { box-shadow: inset 0 2px var(--accent); }
.layer-drop-after { box-shadow: inset 0 -2px var(--accent); }
.layer-drop-into { box-shadow: inset 0 0 0 2px var(--accent); }
.layer-drop-attach { outline: 2px solid var(--accent); outline-offset: -2px; }
.layer-drag-preview { position: fixed; z-index: 100; pointer-events: none; opacity: .7; background: var(--panel); }
.layer-row > button.layer-expand { align-self: center; height: 24px; }
.layer-expand.collapsed svg { transform: rotate(-90deg); }
.panel.palettes-panel { display: flex; flex-direction: column; gap: 6px; padding: 8px; overflow: hidden; }
.drawer-column > .panel.palettes-panel { padding: 8px; }
.palettes-panel [hidden] { display: none !important; }
.palettes-panel svg { width: 16px; height: 16px; }
.palette-body { container-type: inline-size; --palette-tile: min(40px, calc((100cqw - 20px) / 6)); position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.palette-normal { display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.palette-divider { flex: none; height: 1px; margin: 0; border: 0; background: color-mix(in srgb, var(--text) 15%, transparent); }
.palette-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(40px, calc((100% - 20px) / 6)), 1fr)); grid-auto-rows: var(--palette-tile); gap: 4px; }
.drawer-column:has(> .palettes-panel) { scrollbar-width: none; }
.palette-history { flex: none; height: var(--palette-tile); overflow: hidden; }
.palette-normal > .panel-frame { flex: none; }
.palette-scroll { min-height: calc(2 * var(--palette-tile) + 4px); max-height: calc(4 * var(--palette-tile) + 12px); overflow: hidden auto; overscroll-behavior: contain; scrollbar-width: none; }
.palette-chevron-up { transform: rotate(180deg); }
.palette-cover { position: absolute; inset: 0; z-index: 2; }
.palette-normal[inert] { visibility: hidden; }
.palette-expanded { align-content: start; overflow: hidden; }
.palettes-panel button { touch-action: manipulation; }
.panel .palette-tile { position: relative; min-height: 0; height: var(--palette-tile); padding: 3px; border-radius: var(--control-radius); background: transparent; touch-action: none; cursor: grab; }
.panel .palette-tile.palette-recent { cursor: default; touch-action: manipulation; }
.palette-paint { display: block; width: 100%; height: 100%; border-radius: var(--control-radius); pointer-events: none; }
.palette-tile.selected, .palette-drag-ghost.selected { outline: 2px solid var(--accent); outline-offset: -2px; }
.panel button.palette-add { display: grid; place-items: center; background: var(--input); background-clip: content-box; border-radius: calc(var(--control-radius) + 3px); cursor: default; touch-action: manipulation; }
.palette-empty { margin: 3px; border-radius: var(--control-radius); background: color-mix(in srgb, var(--text) 5%, transparent); }
.panel button.palette-toggle { display: grid; place-items: center; min-height: 0; height: var(--palette-tile); padding: 0; }
.palette-reordering > .palette-tile { transition: transform 140ms cubic-bezier(.33, 1, .68, 1); }
@media (prefers-reduced-motion: reduce) { .palette-reordering > .palette-tile { transition: none; } }
.palette-drag-source { visibility: hidden; }
.palette-drag-ghost { position: fixed; z-index: 5000; box-sizing: border-box; padding: 3px; border-radius: var(--control-radius); pointer-events: none; box-shadow: 0 3px 8px rgb(0 0 0 / 35%); }
.palette-dragging, .palette-dragging * { cursor: grabbing !important; }
.palette-footer { flex: none; display: flex; align-items: center; gap: 4px; min-width: 0; }
.panel button.palette-selector { display: flex; align-items: center; gap: 4px; min-width: 0; max-width: 55%; min-height: 24px; padding: 0 6px; font-weight: 400; line-height: 24px; }
.palette-selector-label, .palette-name > span, .palette-choice-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette-selector > svg { flex: none; width: 12px; height: 12px; }
.palette-info { display: flex; flex-direction: column; align-items: flex-end; flex: 1; min-width: 0; }
.panel button.palette-name { display: flex; max-width: 100%; min-height: 24px; padding: 0 6px; font-weight: 400; line-height: 24px; }
.palette-detail { margin-right: 6px; font-size: .9em; opacity: .55; white-space: normal; }
.palette-entry { min-width: 0; height: 24px; padding: 2px 6px; border: 0; border-radius: var(--control-radius); background: var(--input); color: var(--text); box-shadow: none; font: inherit; }
.palette-editor { width: 100%; text-align: right; }
.palette-entry.error { box-shadow: inset 0 0 0 1px #e55; }
.palette-message { flex: none; margin: 0; color: #e55; overflow-wrap: anywhere; }
.palette-message.notice { color: color-mix(in srgb, var(--text) 70%, transparent); }
.palette-chooser { display: flex; flex-direction: column; gap: 6px; }
.palette-search-row { flex: none; display: flex; align-items: center; gap: 4px; }
.palette-search { flex: 1; }
.panel button.palette-icon { display: grid; place-items: center; flex: none; width: 24px; min-width: 24px; height: 24px; min-height: 24px; padding: 0; border-radius: var(--control-radius); }
.palette-list { display: flex; flex-direction: column; height: 100%; overflow: hidden auto; overscroll-behavior: contain; scrollbar-width: none; }
.panel button.palette-choice { display: flex; flex: none; align-items: center; gap: 6px; width: 100%; min-height: 0; padding: 4px; border-radius: var(--control-radius); font-weight: 400; line-height: 1.42; text-align: left; }
.palette-choice-name { flex: 1; min-width: 0; }
.palette-strip { display: flex; flex: none; border-radius: 3px; overflow: hidden; }
.palette-strip > span { width: 12px; height: 18px; }
.palette-no-results { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; opacity: .55; pointer-events: none; }
.number-inline { display: flex; flex-direction: row; gap: 4px; align-items: center; min-width: 0; }
.number-inline .number-track { flex: 1; min-width: 0; padding: 0; }
.number-inline .number-slider { margin: 0; width: 100%; min-width: 0; }
.number-inline .number-value-box { display: grid; flex: none; }
.number-inline .number-value-box > * { grid-area: 1/1; min-width: 0; width: 100%; font-variant-numeric: tabular-nums; }
.number-inline .number-value-box > .number-entry { width: 0; min-width: 100%; }
.number-inline .number-measure { visibility: hidden; padding: 2px 6px; }
.divider { touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; background: transparent; z-index: 3; }
.divider.horizontal { cursor: col-resize; }
.divider.vertical { cursor: row-resize; }
.drop-indicator { position: absolute; z-index: 3000; background: var(--accent); border-radius: 2px; box-shadow: 0 0 0 1px #0003; pointer-events: none; }
.drop-indicator.drop-body { background: color-mix(in srgb, var(--accent) 25%, transparent); border: 2px solid var(--accent); border-radius: 0; box-shadow: none; }
.chrome:not(:where(#header)), .dock-group, :where(#header) > :not([data-kind="capy"]) { transition: opacity 180ms ease-out; }
.floating-resize { position: absolute; touch-action: none; user-select: none; -webkit-user-select: none; }
.floating-resize[data-edge="left"], .floating-resize[data-edge="right"] { cursor: ew-resize; }
.floating-resize[data-edge="top"], .floating-resize[data-edge="bottom"] { cursor: ns-resize; }
.floating-resize[data-edge="top_left"], .floating-resize[data-edge="bottom_right"] { cursor: nwse-resize; }
.floating-resize[data-edge="top_right"], .floating-resize[data-edge="bottom_left"] { cursor: nesw-resize; }
.zen-hidden > .chrome:not(:where(#header)), .zen-hidden #header > *, .zen-hidden > .dock-group:not(.floating-panel), .zen-hidden > .divider { opacity: 0; pointer-events: none; }
.zen-hidden > #header { pointer-events: none; }
.zen-hidden .dock-group:not(.floating-panel) .panel-preview, .zen-hidden .dock-group:not(.floating-panel) .panel-configuration { pointer-events: none; }
.zen-hidden #canvas { outline: none; }
#status { position: fixed; bottom: 36px; left: 50%; transform: translateX(-50%); padding: 8px 14px; border-radius: var(--surface-radius); background: var(--popover); box-shadow: 0 2px 8px #0004; z-index: 10; max-width: 80vw; }
#status:empty { display: none; }
.canvas-notice { position: absolute; left: 0; top: 0; z-index: 900; display: flex; align-items: center; gap: 12px; box-sizing: border-box; width: max-content; padding: 8px 14px; border-radius: var(--surface-radius); background: var(--popover); color: var(--text); box-shadow: 0 2px 8px #0004; pointer-events: none; user-select: none; -webkit-user-select: none; }
.canvas-notice[hidden], .canvas-notice [hidden] { display: none; }
.canvas-notice-action { flex: none; margin: -6px -8px -6px 0; padding: 5px 12px; white-space: nowrap; pointer-events: auto; -webkit-tap-highlight-color: transparent; }
.refine-panel { position: absolute; left: 0; top: 0; z-index: 900; display: flex; flex-direction: column; gap: 10px; box-sizing: border-box; padding: 14px 16px 12px; border-radius: var(--surface-radius); background: var(--popover); color: var(--text); box-shadow: 0 2px 8px #0004; outline: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.refine-title { margin: 0; font-size: inherit; font-weight: 700; }
.refine-actions { display: flex; justify-content: flex-end; gap: 8px; }
.refine-actions .suggested-action { background: var(--accent); color: var(--accent-foreground); }
:where(:root:not([data-touch])) .refine-actions button:not(.suggested-action):hover { background: color-mix(in srgb, var(--text) 12%, transparent); }
:where(:root:not([data-touch])) .refine-actions .suggested-action:hover { background: color-mix(in srgb, white 10%, var(--accent)); }
dialog { border: 0; border-radius: calc(16px * var(--squircle-scale)); background: var(--settings); color: var(--text); padding: 0; width: 800px; height: fit-content; max-width: calc(100vw - 60px); max-height: calc(100dvh - 40px); box-shadow: 0 2px 8px #0004, 0 0 0 1px #0001; }
#settings { width: 1000px; height: 744px; }
dialog::backdrop { background: #0008; }
body[data-theme="light"] dialog::backdrop { background: #0002; }
.dialog-header { position: relative; display: grid; place-items: center; height: 46px; flex: none; }
dialog h2 { margin: 0; font-size: inherit; font-weight: 700; }
.dialog-close { display: grid; place-items: center; position: absolute; right: 11px; top: 11px; min-height: 24px; width: 24px; height: 24px; padding: 0; line-height: 24px; border-radius: 50%; background: color-mix(in srgb, var(--text) 10%, transparent); font-size: 20px; }
.dialog-close > svg { width: 16px; height: 16px; }
.preferences-layout { height: 100%; display: grid; grid-template-columns: clamp(190px, 26%, 210px) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.preferences-sidebar { display: flex; flex-direction: column; min-height: 0; background: var(--sidebar); box-shadow: inset -1px 0 #0003; }
.preferences-navigation { padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.preferences-navigation button { display: flex; align-items: center; gap: 12px; text-align: left; font-weight: 400; padding: 12px 14px; height: 42px; line-height: 18px; }
.preferences-navigation button[aria-selected="true"] { background: color-mix(in srgb, var(--text) 10%, transparent); }
.preferences-content { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.preferences-search { margin: 6px; min-width: 0; padding: 8px 12px; height: 34px; flex: none; border: 0; border-radius: var(--control-radius); background: color-mix(in srgb, var(--text) 10%, transparent); color: inherit; }
.preferences-search-toggle { position: absolute; left: 6px; width: 34px; padding: 0; display: grid; place-items: center; }
.preferences-search-results { overflow-y: auto; padding: 6px; }
.preferences-search-results button { display: flex; flex-direction: column; align-items: start; text-align: left; width: 100%; padding: 10px; font-weight: 400; line-height: 18px; }
.preferences-search-results small { opacity: .55; font-size: calc(var(--ui-text-size) / 1.2); line-height: 15px; margin-top: 3px; }
.shortcut-search { position: relative; flex: 1; min-width: 0; }
.shortcut-search > svg { position: absolute; left: 9px; top: 9px; opacity: .55; }
#shortcuts-search { display: block; margin: 0; padding-left: 32px; width: 100%; }
.preferences-content { position: relative; }
.preferences-pages { height: 100%; overflow-y: auto; min-height: 0; scrollbar-width: none; }
.preferences-empty { text-align: center; opacity: .55; margin: 48px 24px; }
.preferences-page { padding: 24px 12px; }
.settings-group + .settings-group { margin-top: 24px; }
.settings-group h3 { font-size: inherit; line-height: 18px; height: 34px; padding-top: 8px; margin: 0 0 6px; }
.preference-group { border-radius: calc(12px * var(--squircle-scale)); background: color-mix(in srgb, var(--text) 8%, transparent); box-shadow: var(--card-shadow); overflow: hidden; }
body[data-theme="light"] .preference-group { background: #fff; }
.preference-row { display: flex; align-items: center; justify-content: space-between; min-height: 54px; padding: 8px 14px; gap: 6px; }
.preference-text { min-width: 0; flex: 1; text-align: left; font-weight: 400; line-height: 18px; }
.preference-text p, .settings-description { opacity: .55; font-size: var(--ui-text-size); line-height: 1.25; margin: 3px 0 0; }
.preference-text p, .number-preference .number-description { font-size: calc(var(--ui-text-size) / 1.2); line-height: 15px; }
.settings-description { margin: 0 0 12px; }
.preference-row.disabled { opacity: .5; }
.preferences-error { color: #ff7b63; font-size: var(--ui-text-size); }
body[data-theme="light"] .preferences-error { color: #c01c28; }
.preferences-error:empty { display: none; }
.preferences-content > .preferences-error { margin: 0 18px 6px; }
.settings-info { user-select: text; -webkit-user-select: text; }
.settings-link { color: var(--accent); text-decoration: underline; padding: 6px 17px; overflow-wrap: anywhere; }
.preference-row:not(:last-child) { border-bottom: 1px solid var(--card-shade); min-height: 55px; }
.preference-entry { width: calc(9ch + 18px); max-width: 48%; height: 34px; padding: 6px 9px; border: 0; border-radius: var(--control-radius); background: var(--input); color: var(--text); }
.number-preference .number-control { max-width: 600px; margin-inline: auto; }
.number-preference:has(.number-slider) { padding-block: 12px; }
.number-preference input.number-slider { margin-inline: 8px; }
.number-preference:has(.number-spin) .number-description { margin-top: 3px; }
.number-preference .number-value, .number-preference .number-entry { min-height: 34px; height: 34px; padding: 0 9px; }
.number-preference .number-track { margin-top: 3px; }
.number-preference { --number-track: color-mix(in srgb, var(--text) 12%, transparent); }
.settings-group { max-width: var(--preference-width, 576px); margin-inline: auto; }
.number-preference .number-value-box.number-spin { background: transparent; }
.number-preference .number-spin .number-entry { background: transparent; }
.number-preference .number-spin .number-step { width: 30px; height: 30px; min-width: 30px; min-height: 30px; border-radius: 50%; background: var(--button); margin-inline-start: 10px; }
.settings-switch { appearance: none; flex: none; position: relative; margin: 0; width: 46px; height: 26px; border: 0; border-radius: calc(13px * var(--corner-fit)); background: color-mix(in srgb, var(--text) 20%, transparent); }
.settings-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: calc(10px * var(--corner-fit)); background: #fff; box-shadow: 0 1px 3px #0003; }
.settings-switch:checked { background: var(--accent); }
.settings-switch:checked::after { left: 23px; }
.settings-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.settings-heading > div { min-width: 0; }
.settings-heading h3 { margin: 0; height: auto; padding: 0; }
.settings-heading .settings-description { margin: 0; white-space: pre-line; }
.settings-heading h3 + .settings-description { margin-top: 6px; }
.keymap-preview { margin: 4px 0 12px; padding-left: 20px; }
.keymap-links { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.preference-choice.keymap-menu summary { padding: 0; width: 34px; height: 34px; justify-content: center; border-radius: 50%; cursor: pointer; }
.keymap-menu .preference-options button { justify-content: start; }
.shortcut-filters { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; }
.shortcut-filters .preference-choice summary { height: 34px; padding: 0 10px; gap: 6px; font-weight: 700; background: color-mix(in srgb, var(--text) 10%, transparent); }
:where(:root:not([data-touch])) .shortcut-filters .preference-choice summary:hover { background: color-mix(in srgb, var(--text) 15%, transparent); }
.shortcut-filters .preference-choice summary:active, .shortcut-filters .preference-choice[open] > summary { background: color-mix(in srgb, var(--text) 30%, transparent); }
.shortcut-row { padding: 0; gap: 6px; }
.shortcut-choose { flex: 1; display: flex; align-items: center; text-align: left; min-width: 0; min-height: 54px; padding: 8px 14px; gap: 6px; border-radius: 0; }
.shortcut-row.modified .shortcut-choose { padding-inline-end: 0; }
.shortcut-row > .icon-button { margin-inline-end: 14px; }
:where(:root:not([data-touch])) .shortcut-row:hover { background: color-mix(in srgb, var(--text) 8%, transparent); }
.shortcut-row:has(> .shortcut-choose:active) { background: color-mix(in srgb, var(--text) 16%, transparent); }
.nav-row, .button-row, .picker-row { width: 100%; text-align: left; font-weight: 400; border-radius: 0; }
.nav-row .row-chevron { flex: none; width: 16px; height: 16px; }
.button-row { justify-content: center; gap: 8px; font-weight: 700; }
.button-row > svg { width: 16px; height: 16px; }
.button-row.destructive-action { color: #c01c28; }
body[data-theme="dark"] .button-row.destructive-action { color: #ff7b63; }
.picker-row > svg { flex: none; width: 16px; height: 16px; }
.icon-button { flex: none; display: grid; place-items: center; width: 34px; height: 34px; min-height: 34px; padding: 0; border-radius: 50%; background: transparent; }
.icon-button > svg { width: 16px; height: 16px; }
.status-page { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 36px 12px; text-align: center; }
.status-page > svg { width: 64px; height: 64px; opacity: .5; }
.status-page p { margin: 0; opacity: .7; }
.settings-pane { display: flex; flex-direction: column; gap: 24px; }
.settings-pane > .settings-group, .shortcut-results > .settings-group { width: 100%; margin-top: 0; }
.shortcut-results { display: contents; }
.subpage-back, .preferences-back { position: absolute; left: 6px; place-items: center; padding: 0; width: 34px; }
.subpage-back { display: grid; }
.preferences-layout.in-subpage .preferences-back { display: none !important; }
dialog.sheet { width: 460px; }
dialog.sheet[open] { display: flex; flex-direction: column; }
dialog.sheet.picker { height: 600px; }
.sheet-body { display: flex; flex-direction: column; gap: 18px; padding: 0 12px 24px; min-height: 0; overflow-y: auto; }
.sheet .settings-group { width: 100%; max-width: none; }
.sheet-summary { text-align: center; margin: 0; }
.sheet-start { position: absolute; left: 11px; top: 7px; background: var(--button); }
#action-picker-description { text-align: center; margin: 0; }
#action-picker-search { margin: 0; flex: none; }
.picker-list { display: flex; flex-direction: column; gap: 18px; flex: 1; min-height: 0; overflow-y: auto; }
dialog.sheet.picker .sheet-body { overflow: hidden; flex: 1; }
.recording { gap: 8px; }
.recording > svg { flex: none; width: 16px; height: 16px; }
.recording > svg.warning { color: #e5a50a; }
body[data-theme="light"] .recording > svg.warning { color: #9c5700; }
.recording button { flex: none; background: var(--button); }
.recording button.suggested-action { background: var(--accent); color: var(--accent-foreground); }
.preference-group:has(.preference-choice[open]) { overflow: visible; }
.preference-choice { position: relative; }
.preference-row.disabled .preference-choice { pointer-events: none; }
.preference-choice summary, .preference-options button { display: flex; align-items: center; gap: 12px; padding: 8px; font-weight: 400; }
.preference-choice summary { list-style: none; padding: 5px 10px; }
.preference-choice summary::-webkit-details-marker { display: none; }
.preference-choice svg { width: 24px; height: 24px; }
.preference-choice summary svg:last-child { width: 16px; height: 16px; }
.preference-options { position: absolute; right: 0; top: 100%; z-index: 5; background: var(--popover); border-radius: var(--surface-radius); box-shadow: 0 2px 12px #0004; padding: 6px; min-width: 210px; }
.preference-options button { width: 100%; }
.preference-row.image-preference { flex-direction: column; align-items: stretch; gap: 12px; padding-block: 12px; }
.preference-image-tiles { display: grid; grid-template-columns: repeat(var(--columns), 64px); justify-content: center; gap: 6px; }
.preference-image-tiles button { width: 64px; height: 64px; padding: 8px; display: grid; place-items: center; border-radius: calc(32px * var(--corner-fit)); background: color-mix(in srgb, var(--text) 5%, transparent); }
.preference-image-tiles svg { width: 48px; height: 48px; }
.preference-swatches { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.preference-swatches.inline { flex-direction: row; gap: 8px; }
.swatch-circles { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.preference-swatches.inline .swatch-circles { flex-wrap: nowrap; }
.swatch-circles .swatch { width: 32px; height: 32px; min-height: 0; padding: 0; display: grid; place-items: center; border-radius: 50%; background-color: color-mix(in srgb, var(--text) 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 15%, transparent); color: var(--text); }
.preference-swatches.inline .swatch { width: 28px; height: 28px; }
.swatch-circles .swatch svg { width: 16px; height: 16px; }
.swatch-circles .swatch[aria-checked="true"] { outline: 2px solid var(--text); outline-offset: 2px; }
.transparency-circles { gap: 8px; }
.transparency-circles .swatch { width: 28px; height: 28px; background: none; box-shadow: none; }
.transparency-circles .swatch svg { width: 28px; height: 28px; }
:where(:root:not([data-touch])) .swatch-circles .swatch:hover:not(:disabled) { filter: brightness(1.08); }
.preference-image-tiles button[aria-pressed="true"] { background: var(--selection); box-shadow: inset 0 0 0 2px var(--accent); }

dialog footer { display: flex; justify-content: end; align-items: center; gap: 6px; margin: 12px; grid-column: 1 / -1; }
dialog footer .preferences-error { flex: 1; }
dialog footer button { background: color-mix(in srgb, var(--text) 8%, transparent); }
dialog .suggested-action { background: var(--accent); color: var(--accent-foreground); }
dialog.toolbar-prompt { width: 400px; padding: 24px; }
dialog.toolbar-manager { width: 480px; height: 420px; }
.toolbar-manager[open] { display: flex; flex-direction: column; }
.toolbar-manager-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 18px; padding: 24px; }
.toolbar-manager-body p { margin: 0; color: var(--settings-secondary); }
.toolbar-manager-scroll { flex: 1; min-height: 0; overflow-y: auto; }
.managed-toolbars { background: var(--card); border-radius: calc(12px * var(--squircle-scale)); overflow: hidden; box-shadow: var(--card-shadow); }
.managed-toolbars button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 54px; padding: 8px 12px; border-radius: 0; text-align: left; font-weight: 400; line-height: 18px; }
.managed-toolbars button + button { border-top: 1px solid var(--card-shade); }
.managed-toolbars button > span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.managed-toolbars small { font-size: .83333em; line-height: 15px; color: var(--settings-secondary); }
#toolbar-manager button[aria-pressed="true"] { background: var(--selection); }
.toolbar-manager-empty { text-align: center; padding: 60px 0; }
.toolbar-manager-body > button { align-self: end; flex: none; }
.toolbar-manager .destructive-action { color: #c01c28; }
#delete-managed-toolbar { background: color-mix(in srgb, currentColor 15%, transparent); }
body[data-theme="dark"] .toolbar-manager .destructive-action { color: #ff7b63; }
.toolbar-prompt h2 { font-size: 20px; text-align: center; }
.toolbar-prompt p { line-height: 1.5; margin: 16px 0; }
.toolbar-prompt .toolbar-name { margin-top: 20px; }
.prompt-actions { display: flex; gap: 12px; margin-top: 24px; }
.prompt-actions button { flex: 1; background: var(--button); }
.prompt-actions .destructive-action { color: white; background: #c01c28; }

.preferences-back { display: none; }
[hidden] { display: none !important; }
@media (max-width: 680px) {
  .preferences-layout { grid-template-columns: minmax(0, 1fr); }
  .preferences-layout:not(.show-content) .preferences-content, .preferences-layout.show-content .preferences-sidebar { display: none; }
  .preferences-back { display: grid; }
}
@media (max-width: 480px) {
  #settings { width: 100vw; height: 100dvh; max-width: 100vw; max-height: 100dvh; border-radius: 0; }
}
@media (prefers-reduced-motion: reduce) { .chrome, .dock-group, :where(#header) > :not([data-kind="capy"]) { transition: none; } }
@media (max-width: 640px) { #document-title { display: none; } }
/* Schema-driven adjustment, property and diagnostic panels. */
.adjustments-panel,.properties-panel,.stats-panel { padding: 0; }
.panel.adjustments-panel { display:flex; flex-direction:column; overflow:hidden; }
.filter-picker { margin:var(--panel-inset); flex:1; min-height:0; display:flex; flex-direction:column; }
.filter-picker-header { display:flex; align-items:center; gap:var(--panel-control-spacing); flex:none; }
.filter-picker-header select,.filter-picker-header input { flex:1; width:0; min-width:0; height:var(--panel-control-height); padding:0 var(--panel-field-padding); }
.filter-picker-header select { font-weight:700; }
.panel .filter-picker-header button { flex:none; display:grid; place-items:center; width:var(--panel-control-height); height:var(--panel-control-height); padding:0; min-height:0; }
.filter-picker-list { flex:1; min-height:0; overflow:auto; scrollbar-width:none; }
.filter-category { margin:8px; font-size:inherit; font-weight:700; opacity:.55; }
.filter-category { display:flex; align-items:center; gap:6px; }
.filter-category-icon { display:flex; }
.filter-category-icon[hidden] { display:none; }
.panel .filter-row { display:flex; flex-direction:column; align-items:stretch; width:100%; text-align:right; padding:3px 6px; min-width:0; min-height:0; font-weight:400; line-height:18px; }
.filter-row canvas { display:block; width:100%; height:40px; pointer-events:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
.filter-row span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.filter-row span > svg:not(.filter-animation) { display:inline-block; width:16px; height:16px; margin-right:6px; vertical-align:-3px; }
.filter-animation { display:inline-block; width:12px; height:12px; margin-right:4px; vertical-align:-1px; opacity:.55; }
.effect-properties,.renderer-stats { margin:var(--panel-inset); }
.effect-properties h3 { font-size:inherit; margin:0 0 var(--panel-control-spacing); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.properties-header { display:flex; align-items:center; gap:var(--panel-control-spacing); margin-bottom:var(--panel-group-spacing); min-width:0; }
.properties-layer-type { flex:1; min-width:0; font-size:.9em; opacity:.55; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.effect-properties #properties-add-filter { display:inline-flex; align-items:center; gap:4px; flex:none; min-height:24px; height:24px; line-height:24px; padding:0 6px; }
.property-controls { display:grid; grid-template-columns:fit-content(45%) minmax(0,1fr); gap:var(--panel-control-spacing); }
.property-controls > * { grid-column:1 / -1; }
.property-section { font-size:inherit; font-weight:700; margin:2px 0 0; }
.property-section:first-child { margin-top:0; }
.property-row { display:flex; align-items:center; gap:var(--panel-control-spacing); justify-content:space-between; min-width:0; }
.property-row > span:first-child { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.property-row:has(> :is(select,.property-texture)):not(.property-resource) { display:contents; }
.property-row:has(> :is(select,.property-texture)):not(.property-resource) > span:first-child { grid-column:1; align-self:center; }
.property-row :is(select,.property-texture) { grid-column:2; width:100%; min-width:0; max-width:100%; }
.property-controls select { background:var(--input); padding:0 var(--panel-field-padding); min-height:var(--panel-control-height); }
.property-row.property-resource { flex-wrap:nowrap; margin-bottom:var(--panel-group-spacing); }
.property-resource select { min-width:0; background:var(--input); padding:4px 6px; text-overflow:ellipsis; }
.property-controls.disabled, .property-controls > .disabled { opacity:.4; pointer-events:none; }
.curve-editor { display:block; width:100%; height:200px; background:color-mix(in srgb,var(--text) 12%,transparent); pointer-events:auto; touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
.curve-editor * { pointer-events:none; }
.curve-field { display:flex; flex-direction:column; gap:var(--panel-control-spacing); }
.curve-frame { display:grid; grid-template-columns:auto minmax(0,1fr); gap:4px; }
.curve-plot { position:relative; min-width:0; }
.curve-plot > button { position:absolute; right:2px; bottom:2px; width:24px; height:24px; min-height:24px; padding:0; display:grid; place-items:center; }
.curve-axis { display:flex; justify-content:space-between; color:var(--secondary); }
.curve-axis-y { flex-direction:column; align-items:center; }
.curve-without-readouts .curve-axis { position:relative; font-size:.85em; }
.curve-without-readouts .curve-axis-y { width:24px; }
.curve-without-readouts .curve-axis-y .curve-axis-label { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) rotate(-90deg); white-space:nowrap; }
.curve-without-readouts .curve-axis-x .curve-axis-label { position:absolute; left:50%; transform:translateX(-50%); }
.utility-panel { z-index:1100; left:0; top:0; background:var(--panel); --glass-panel:var(--panel); --glass-strip:var(--tabbar); }
.utility-header { height:34px; min-height:34px; gap:8px; padding:4px 6px 4px 12px; }
.utility-title { flex:1; font-weight:700; }
.utility-close { flex:none; width:24px; height:24px; min-height:24px; padding:0; display:grid; place-items:center; border-radius:var(--control-radius); }
.utility-body { height:auto; padding:12px; }
.utility-sensitivity { display:flex; gap:8px; margin-top:10px; }
.utility-sensitivity > button { flex:1; }
.utility-actions { display:flex; align-items:center; gap:6px; margin-top:14px; }
.utility-actions > span { flex:1; }
.curve-ev { min-height:1em; text-align:right; color:var(--secondary); }
.gradient-editor { display:flex; flex-direction:column; gap:var(--panel-control-spacing); }
.gradient-controls { display:flex; gap:var(--panel-control-spacing); align-items:center; min-width:0; }
.gradient-controls select { flex:1; min-width:0; }
.gradient-controls .number-control { flex:1; min-width:0; }
.gradient-controls .property-color { flex:0 0 36px; width:36px; height:24px; min-width:0; padding:0; font-size:0; }
.gradient-controls button { flex-shrink:0; }
.gradient-ramp { height:32px; margin:0 6px; border-radius:var(--control-radius); overflow:hidden; cursor:crosshair; }
.gradient-preview { display:block; width:100%; height:100%; background:repeating-conic-gradient(var(--checker-dark) 0 25%,var(--checker-light) 0 50%) 0 0/10px 10px; }
.gradient-strip { min-width:0; }
.toolbar-gradient { width:120px; height:24px; }
.toolbar-gradient>button { width:100%; height:100%; padding:0; overflow:hidden; }
.toolbar-editor-popover>.gradient-editor { width:240px; }
.gradient-stops { position:relative; height:12px; margin:0 6px; }
.gradient-stops button { position:absolute; padding:0; width:10px; min-width:0; height:10px; min-height:0; border-radius:50%; transform:translateX(-50%); border:1px solid var(--text); }
.gradient-stops button.selected { outline:2px solid var(--text); outline-offset:1px; }
.renderer-stats { display:flex; flex-direction:column; gap:var(--panel-control-spacing); }
.renderer-stats .numeric { font-variant-numeric:tabular-nums; white-space:nowrap; }
.renderer-chart { display:block; width:100%; height:46px; }

/* Editor panels share the native host's logical sizing and models. */
#header-start { min-width:0; }
.header-menu .popover { max-height:calc(100dvh - 60px); overflow:auto; }
.tool-groups { display:flex; flex-wrap:wrap; gap:2px; margin-bottom:6px; }
.tool-choice-button { display:flex; align-items:center; gap:8px; text-align:left; width:100%; touch-action:manipulation; }
.tool-choice-label { display:flex; align-items:center; gap:6px; }
.tool-choice-button svg, .tool-choice-label svg { flex-shrink:0; }
.tool-setting-action { display:flex; align-items:center; gap:var(--panel-control-spacing); touch-action:manipulation; }
.tool-setting-action > span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tool-groups .tool-choice-button { width:calc(3 * 36px + 2 * 2px); min-width:0; min-height:36px; flex:none; gap:6px; padding:0 6px; line-height:18px; }
.tool-groups .tool-choice-label { flex:1; min-width:0; justify-content:flex-end; }
.tool-groups .tool-choice-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tool-subtools { display:flex; flex-direction:column; gap:2px; }
.tool-set-divider { position:relative; height:1px; margin-bottom:6px; }
.brush-sets-control .tool-groups, .sculpt-sets-control .tool-groups { flex-direction:column; flex-wrap:nowrap; gap:2px; margin-bottom:0; }
.brush-sets-control .tool-choice-button, .sculpt-sets-control .tool-choice-button { width:100%; min-height:44px; gap:8px; padding:6px; }
.brush-sets-control .tool-choice-label, .sculpt-sets-control .tool-choice-label { justify-content:flex-start; }
.brush-sets-control .tool-choice-name, .sculpt-sets-control .tool-choice-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tool-subtools .tool-choice-button { flex-direction:column; align-items:stretch; gap:0; padding:3px 6px; line-height:18px; }
.tool-subtools .tool-choice-button:not([data-brush]) { min-height:44px; justify-content:center; }
.tool-subtools .tool-choice-label { width:100%; min-width:0; }
.tool-subtools .tool-choice-name { flex:1; min-width:0; text-align:right; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tool-subtools .tool-choice-button:not([data-brush]) .tool-choice-name { text-align:left; }
.tool-settings-control { display:flex; flex-direction:column; gap:var(--panel-group-spacing); }
.tool-mode-section { display:flex; flex-direction:column; gap:var(--panel-control-spacing); }
.tool-settings-body,.tool-settings-control.picker-settings { display:grid; grid-template-columns:fit-content(45%) minmax(0,1fr); gap:var(--panel-control-spacing); }
.tool-settings-body > * { grid-column:1 / -1; }
.tool-action-choice,.picker-setting { display:contents; }
.tool-action-choice > span,.picker-setting > span { grid-column:1; align-self:center; }
.tool-action-choice > select,.picker-setting > select { grid-column:2; min-width:0; width:100%; }
.tool-action-row { display:flex; gap:var(--panel-control-spacing); }
.tool-action-row > button:not(.tool-icon-action) { flex:1; min-width:0; }
.panel button.tool-icon-action { width:var(--panel-control-height); padding:0; display:grid; place-items:center; }
.tool-settings-control .selection-modes { border:0; }
.tool-settings-control .selection-modes:not(.choice-grid) > button { height:var(--panel-control-height); min-height:var(--panel-control-height); }
.tool-settings-control .selection-modes:not(.choice-grid) svg { width:var(--panel-icon-size); height:var(--panel-icon-size); }
.tool-settings-control .toolbar-labeled-choice { --choice-width:var(--panel-control-height)!important; --choice-height:var(--panel-control-height)!important; --choice-icon:var(--panel-icon-size)!important; gap:var(--panel-control-spacing); }
.tool-settings-control .toolbar-check { min-height:var(--panel-control-height); }
.tool-settings-control .toolbar-choice > button { height:var(--panel-control-height); }
.selection-modes { display:flex; width:100%; }
.selection-modes > button { flex:1; min-width:0; height:36px; padding:0; display:grid; place-items:center; }
.selection-modes svg { width:20px; height:20px; }
.tool-settings-control h3 { margin:2px 0 0; font-size:inherit; }
.tool-settings-body > h3:first-child { margin-top:0; }
.panel select { min-height:var(--panel-control-height); height:var(--panel-control-height); padding:0 var(--panel-field-padding); }
/* Shared wheel/footer allocations keep controls clear at four tiles. */
.color-wheel-control { display:flex; flex-direction:column; min-width:128px; max-height:100%; }
.color-wheel-stage { position:relative; flex:0 1 auto; min-height:128px; width:100%; aspect-ratio:1; container-type:size; }
.color-wheel-square { position:absolute; width:min(100cqw,100cqh); height:min(100cqw,100cqh); left:50%; top:50%; transform:translate(-50%,-50%); }
.color-wheel { position:absolute; display:block; touch-action:none; }
.color-wheel-control :is(.color-swatch,.color-utility,.color-shape,.color-readout) { position:absolute; touch-action:manipulation; display:grid; place-items:center; min-width:0; min-height:0; padding:3px; border-radius:50%; clip-path:circle(50%); }
.color-wheel-control .color-swatch { background:var(--panel); box-shadow:none; }
.color-wheel-control .color-swatch::after { content:""; position:absolute; inset:0; border-radius:50%; corner-shape:round; pointer-events:none; box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text) 25%,transparent); }
.color-wheel-control .color-swatch:is([data-color-slot="background"],[data-color-slot="transparent"]) { padding:1px; }
.color-wheel-control .color-swatch > span { pointer-events:none; display:block; width:100%; height:100%; border-radius:50%; }
.color-wheel-control .color-swatch[aria-pressed="true"]::after { box-shadow:inset 0 0 0 2px var(--text); }
:where(:root:not([data-touch])) .color-wheel-control .color-swatch:hover::after { box-shadow:inset 0 0 0 2px var(--text); }
.color-wheel-control button.color-swatch:is(:hover,:active):not(:disabled) { background:var(--panel); }
.color-wheel-control .color-utility { padding:2px; background:transparent; }
:where(:root:not([data-touch])) .color-wheel-control .color-utility:hover { background:color-mix(in srgb,var(--text) 12%,transparent); }
.color-wheel-control :is(.color-shape,.color-utility) svg { pointer-events:none; width:16px; height:16px; }
.color-wheel-control button.color-shape, .color-wheel-control button.color-readout { background:transparent; box-shadow:none; }
:where(:root:not([data-touch])) .color-wheel-control button.color-shape:hover { color:var(--accent); }
.color-wheel-control button.color-readout { padding:0; border-radius:0; }
.color-wheel-control .color-readout canvas { width:100%; height:100%; pointer-events:none; }
.color-wheel-control :is(.color-shape,.color-swatch,.color-utility):focus-visible { outline-offset:-2px; }
.color-wheel-control .color-readout:focus-visible { color:var(--accent); outline:none; }
.navigator-control { display:flex; flex-direction:column; gap:var(--panel-control-spacing); height:100%; min-height:0; }
.navigator-overview { position:relative; width:100%; aspect-ratio:220 / 164; flex:1 1 auto; min-height:0; touch-action:none; background:var(--bg); }
.navigator-clip { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.navigator-surface { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.overview-hole { position:absolute; outline:1px solid var(--border); pointer-events:none; }
.navigator-buttons { display:flex; gap:var(--panel-control-spacing); flex:0 0 var(--panel-control-height); }
.panel .navigator-buttons button { display:grid; place-items:center; flex:1; min-width:0; min-height:var(--panel-control-height); padding:0; }
.tile-divider { pointer-events:auto; }
.tile-divider::after { content:""; position:absolute; inset:4px auto 4px round(50% - .5px, 1px); width:1px; background:color-mix(in srgb, var(--text) 30%, transparent); }
.toolbar-controls[data-axis="vertical"] .tile-divider::after { inset:round(50% - .5px, 1px) 4px auto; width:auto; height:1px; }
.collapsed-column { position:absolute; z-index:1; background:var(--glass-panel); border-radius:var(--surface-radius); overflow:hidden; }
.collapsed-column > *, .collapsed-content > * { position:absolute; }
.collapsed-content { overflow:hidden; touch-action:pan-y; }
.column-divider { pointer-events:none; }
.column-divider::after { inset:round(50% - .5px, 1px) 4px auto; width:auto; height:1px; }
.column-tab { display:grid; place-items:center; padding:4px; }
.column-tab[aria-selected="true"] { background:var(--selection); }
:where(:root:not([data-touch])) .column-tab:hover:not([aria-selected="true"]) { background:color-mix(in srgb, var(--text) 8%, transparent); }
.column-tab:active { background:var(--selection); }
.toolbar-controls .tool-tile > button[data-drawer-facing]:not([aria-pressed="true"]) { background:transparent; }
[data-drawer-facing="top"] { border-top-left-radius:0 !important; border-top-right-radius:0 !important; }
[data-drawer-facing="right"] { border-top-right-radius:0 !important; border-bottom-right-radius:0 !important; }
[data-drawer-facing="bottom"] { border-bottom-left-radius:0 !important; border-bottom-right-radius:0 !important; }
[data-drawer-facing="left"] { border-top-left-radius:0 !important; border-bottom-left-radius:0 !important; }
[data-drawer-source-corners~="0"] { border-top-left-radius:0 !important; }
[data-drawer-source-corners~="1"] { border-top-right-radius:0 !important; }
[data-drawer-source-corners~="2"] { border-bottom-right-radius:0 !important; }
[data-drawer-source-corners~="3"] { border-bottom-left-radius:0 !important; }
.zen-hidden > .collapsed-column, .zen-hidden > .column-connection { opacity:0; pointer-events:none; }
.content-drawer { position:absolute; background:var(--glass-panel); border-radius:var(--surface-radius); overflow:hidden; }
/* Keep the shadow below the source chrome, including toolbar tiles inside a drawer. */
.drawer-shadow { position:absolute; pointer-events:none; box-shadow:0 5px 14px #0005; }
.drawer-column { position:absolute !important; overflow:auto; overscroll-behavior:contain; }
.drawer-column > .panel { height:auto; overflow:visible; }
.drawer-column > .toolbar-controls { position:relative; }
.drawer-tabs { position:absolute; display:flex; overflow:hidden; background:transparent; touch-action:none; user-select:none; }
.drawer-tabs .dock-tab[aria-selected="true"] { background:transparent; }
.drawer-tab-strip { display:flex; flex:1; min-width:0; overflow:auto; scrollbar-width:none; touch-action:none; }
.drawer-tabs .dock-tab { flex:none; white-space:nowrap; }
.drawer-tabs .column-drawer-grip { position:static; flex:0 0 20px; width:20px; height:100%; }
.document-dialog { width:min(440px,90vw); padding:18px; }
.document-dialog form { display:flex; flex-direction:column; gap:14px; }
.document-dialog .document-size { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px 12px; }
.document-dialog .document-size > :is(select,input,.number-field) { min-width:0; max-width:100%; }
.document-dialog .document-size:has(> input[type=checkbox]) { flex-wrap:nowrap; justify-content:flex-start; }
.document-dialog .document-size > input[type=checkbox] { order:-1; flex:none; }
.document-dialog .number-spin .number-entry { width:96px; }
.document-dialog h2 { margin:0; font-size:1.15em; }
.document-dialog footer { display:flex; gap:8px; justify-content:flex-end; }
.size-dialog { width:min(380px,90vw); }
.size-dialog h2:focus { outline:none; }
.size-dialog-fields { display:flex; flex-direction:column; gap:10px; }
.size-dialog .number-spin .number-entry { width:96px; }
.size-dialog-row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.size-dialog-select { flex:1; background:color-mix(in srgb,var(--text) 8%,transparent); }
.size-dialog-row > span + .size-dialog-select { flex:0 1 auto; min-width:50%; }
.size-dialog-check { display:flex; align-items:center; gap:6px; min-height:34px; }
.canvas-anchor { display:grid; grid-template-columns:repeat(3,36px); gap:2px; }
.canvas-anchor-cell { display:grid; place-items:center; width:36px; min-height:36px; height:36px; padding:0; background:color-mix(in srgb,var(--text) 8%,transparent); }
.canvas-anchor-cell svg { visibility:hidden; }
.canvas-anchor-cell.selected svg { visibility:visible; }
.size-dialog-message { margin:0; min-height:1.3em; opacity:.72; }
@media(max-width:850px) {
  #header { --header-item-gap:0px; --header-text-padding:6px; }
  .header-menu > summary { font-size:12px; }
  #document-title { display:none; }
}
.drawer-bridge { position:absolute; fill:var(--glass-panel); pointer-events:auto; }
.column-connection { z-index:2; pointer-events:none; }
.drawer-column .tool-tile > button { display:grid; place-items:center; padding:0; width:100%; height:100%; min-height:0; }
.toolbar-controls .tool-tile > button > svg { width:var(--tile-icon-size,16px); height:var(--tile-icon-size,16px); }
.toolbar-controls[data-labeled="true"] .tool-tile > button { display:flex; justify-content:flex-start; gap:0; text-align:left; }
.toolbar-controls[data-labeled="true"] .tool-tile > button > svg { flex-shrink:0; margin:0 10px; }
#document-title { position:static; transform:none; left:auto; flex:1; min-width:0; text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.window-fullscreen #document-title { text-align:right; }
#header-end { flex-shrink:0; }
.system-status { display:flex; align-items:center; gap:var(--header-item-gap); white-space:nowrap; font-variant-numeric:tabular-nums; }
#system-clock { display:flex; align-items:center; height:36px; padding:0 var(--header-text-padding); }
.system-status-tile { display:grid; place-items:center; width:36px; height:36px; flex:none; }
.system-status[hidden], #system-clock[hidden], .system-status-tile[hidden], .system-battery[hidden], .battery-charging[hidden] { display:none; }
.system-battery { --battery-fill:#e5e7eb; --battery-track:#a3a8b0; --battery-ink:#202226; display:inline-block; position:relative; width:26px; height:14px; flex:none; }
body[data-theme="light"] .system-battery { --battery-fill:#3f4246; --battery-track:#707479; --battery-ink:#fff; }
.system-battery.low { --battery-fill:#bc9996; --battery-track:#a3a8b0; --battery-ink:#202226; }
body[data-theme="light"] .system-battery.low { --battery-fill:#a15d59; --battery-track:#707479; --battery-ink:#fff; }
.system-battery.charging { --battery-fill:#91b89d; --battery-track:#c4c9cf; --battery-ink:#13251a; }
body[data-theme="light"] .system-battery.charging { --battery-fill:#91b89d; --battery-track:#c4c9cf; --battery-ink:#13251a; }
.battery-shell { display:flex; position:relative; align-items:center; justify-content:center; width:22px; height:14px; border-radius:4px; overflow:hidden; background:var(--battery-track); }
.system-battery:not(.charging)::after { content:""; position:absolute; left:23px; top:4px; width:2px; height:6px; border-radius:1px; background:var(--battery-track); }
.battery-fill { position:absolute; inset:0 auto 0 0; background:var(--battery-fill); }
.battery-percent { position:relative; font-size:11px; line-height:14px; font-weight:700; color:var(--battery-ink); }
.battery-charging { position:absolute; z-index:1; left:18px; top:1px; width:8px; height:12px; }
.battery-charging svg { display:block; width:100%; height:100%; overflow:visible; }
.battery-charging path { fill:#e5e7eb; stroke:#202226; stroke-width:1.75; stroke-linejoin:round; paint-order:stroke fill; }
body[data-theme="light"] .battery-charging path { fill:var(--battery-ink); stroke:var(--battery-track); }

.system-battery.full .battery-percent { font-size:10px; }
.system-battery.charging .battery-percent { transform:translateX(-.5px); }

/* Workspace-owned title bar: allocations and all drop positions come from Rust. */
#header { --header-tile:36px; --header-icon:20px; --header-surface:var(--chrome-surface); --header-control-bg:var(--header-surface); --header-feedback-bg:var(--header-surface); touch-action:manipulation; }
body[data-theme="light"] #header { text-shadow:none; }
.header-item { position:absolute; display:flex; align-items:center; border-radius:var(--header-radius); }
.header-item-content { display:flex; align-items:center; justify-content:center; flex:1; min-width:0; height:100%; }
.header-item-content > :is(button,details) { flex:1; min-width:0; }
.header-item-content > [inert] { pointer-events:none; }
#header .header-tool, .header-drag-preview .header-tool, #header .header-menu > summary {
  position:static; display:flex; align-items:center; justify-content:center; min-height:0; height:var(--header-tile); padding:0 6px; border-radius:var(--header-radius); background-color:var(--header-control-bg,var(--bg));
}
#header .header-tool, .header-drag-preview .header-tool { width:100%; }
#header .header-tool > svg, #header .header-menu > summary > svg, .header-drag-preview .header-tool > svg { width:var(--header-icon); height:var(--header-icon); }
#header [data-kind="capy"] .header-tool { padding:0; }
#header [data-kind="capy"] svg, .header-drag-preview[data-kind="capy"] svg { width:var(--header-capy-icon); height:var(--header-capy-icon); }
#header .header-menu-overflow > summary { width:100%; }
:is(#header,.header-drag-preview) :is(.workspace-switcher button,.header-menu-labels summary) { height:26px; min-height:26px; padding:0 8px; border-radius:999px; font-weight:500; background:transparent; }
#header .header-menu-labels { --header-control-bg:transparent; --header-feedback-bg:transparent; background:var(--header-surface); }
#header .workspace-switcher button[aria-pressed="true"] { color:var(--text); background:var(--glass-switcher-selection); }
#header #document-title { position:static; transform:none; display:block; overflow:hidden; text-overflow:ellipsis; width:100%; height:var(--header-tile); line-height:var(--header-tile); padding:0 8px; text-align:center; background:var(--header-control-bg); }
#header .workspace-switcher { max-width:none; width:max-content; flex:none; background:var(--glass-switcher); }
#header #header-workspace-selector { width:100%; }
#header #system-clock, #header .system-status-tile { height:var(--header-tile); padding:0 8px; border-radius:var(--header-radius); background:var(--header-control-bg); }
#header .system-status-tile { display:flex; align-items:center; justify-content:center; }
#header #system-clock { height:36px; border-radius:999px; font-variant-numeric:tabular-nums; white-space:nowrap; }
#header[data-size="medium"] #system-battery { transform:scale(1.2); margin:0 4px; }
#header[data-size="large"] #system-battery { transform:scale(1.4); margin:0 8px; }
#header .header-status-placeholder { padding:0 8px; white-space:nowrap; border-radius:var(--header-radius); background:var(--header-surface); }
#header .drawing-selector { height:100%; border-radius:var(--header-radius); background:var(--header-surface); }
:where(:root:not([data-touch])) :is(#zen-capy:hover:not(:disabled), #header :is(.header-tool,.header-menu > summary):hover:not(:disabled):not([aria-pressed="true"]):not([data-drawer-facing])) { background-color:color-mix(in srgb,var(--text) 10%,var(--header-feedback-bg,var(--chrome-surface))); }
#header .header-tool[data-drawer-facing]:not([aria-pressed="true"]) { background-color:var(--glass-panel); }
:is(#zen-capy:is(:active,[data-header-pressed]):not(:disabled), #header :is(.header-tool,.header-menu > summary):is(:active,[data-header-pressed]):not(:disabled):not([aria-pressed="true"]):not([data-drawer-facing])) { background-color:color-mix(in srgb,var(--text) 16%,var(--header-feedback-bg,var(--chrome-surface))); }
#header .header-tool[aria-pressed="true"] { background-image:linear-gradient(var(--glass-header-selection),var(--glass-header-selection)); }
:where(:root:not([data-touch])) #header .workspace-switcher button:hover:not(:disabled) { background:color-mix(in srgb,var(--text) 8%,transparent); }
:where(:root:not([data-touch])) #header .workspace-switcher button[aria-pressed="true"]:hover:not(:disabled) { background:var(--header-selection-hover); }
#header .header-tool[data-drawer-facing="bottom"] { border-bottom-left-radius:0; border-bottom-right-radius:0; }
.header-bar { position:absolute; border-radius:var(--header-radius); background:var(--header-surface); pointer-events:none; }
#header :is(.header-item,.header-overflow).in-bar { --header-control-bg:transparent; --header-feedback-bg:transparent; }
#header :is(.header-item.in-bar :is(.header-tool,.header-menu > summary),.header-overflow.in-bar > summary) { width:100%; padding:0; border-radius:var(--header-radius); }
#header .header-item.in-bar .header-tool[aria-pressed="true"] { background-color:var(--glass-header-selection); background-image:none; }
#header .header-item.in-bar .header-tool[data-drawer-facing="bottom"] { border-bottom-left-radius:0; border-bottom-right-radius:0; }
.header-item-grip, .header-component-grip { display:flex; align-items:center; justify-content:center; width:20px; flex:none; opacity:.55; }
.header-item-grip svg, .header-component-grip svg { width:16px; height:16px; }
.header-editing .header-item { touch-action:none; cursor:grab; }
#header.header-editing { z-index:1001; }
.header-editing :is([data-header-overflow-item],[data-header-overflow-source]) { touch-action:none; cursor:grab; user-select:none; }
.header-overflow-preview { display:flex; align-items:center; justify-content:flex-start; }
.header-editing .header-item-content { pointer-events:none; user-select:none; }
.header-editing [data-kind="workspaces"] .header-item-content { pointer-events:auto; }
.header-editing .header-item.editing-selection { outline:2px solid var(--accent); outline-offset:-2px; }
.header-zone { position:absolute; pointer-events:none; border-block:1px solid color-mix(in srgb,var(--accent) 35%,transparent); }
.header-zone.header-drop-zone { border-color:var(--accent); }
.header-editor { position:absolute; left:6px; right:6px; z-index:1000; display:flex; flex-wrap:wrap; align-items:center; gap:8px 6px; padding:8px; overflow:auto; background:var(--panel); border-radius:var(--surface-radius); }
.header-component { display:flex; align-items:center; gap:6px; padding:4px 10px 4px 0; min-height:34px; border-radius:var(--control-radius); background:var(--button); touch-action:none; cursor:grab; white-space:nowrap; }
.header-component-grip { align-self:stretch; }
.header-editor-options { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:6px; flex:1 1 440px; min-width:0; max-width:100%; margin-left:auto; }
.header-editor-options label { display:flex; align-items:center; gap:6px; margin:0 6px; }
.header-size-choices { display:flex; }
.header-size-choices button { border-radius:0; padding:5px 12px; }
.header-size-choices button:first-child { border-radius:var(--control-radius) 0 0 var(--control-radius); }
.header-size-choices button:last-child { border-radius:0 var(--control-radius) var(--control-radius) 0; }
.header-editor button { background:var(--button); }
.header-editor button[aria-pressed="true"] { background:var(--selection); }
.header-editor .suggested-action { background:var(--accent); color:var(--accent-foreground); }
.header-editor button:focus-visible, #header .header-item:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
#header .popover { top:calc(var(--header-tile) + 4px); max-width:calc(100vw - 12px); max-height:calc(100dvh - var(--header-tile) - 22px); overflow:auto; }
#header .popover button { height:auto; min-height:34px; justify-content:flex-start; }
.header-overflow, #header-recovery { position:absolute; }
.header-overflow [data-header-overflow-item] { position:relative; }
.header-overflow [data-header-overflow-item]:has(.tool-variations:not([hidden])) .header-overflow-label { min-width:0; overflow:hidden; text-overflow:ellipsis; }
.header-dragging .header-item { transition:left 120ms ease-out,top 120ms ease-out,width 120ms ease-out; }
.header-drag-preview { position:absolute!important; margin:0; pointer-events:none; z-index:2100; border-radius:var(--header-radius); background:var(--panel); outline:2px solid var(--accent); overflow:hidden; }
.header-drag-preview.header-drag-remove { outline-color:#f2615c; }
#workspace[data-header-dragging], #workspace[data-header-dragging] * { cursor:grabbing!important; }
#header .header-measuring { width:max-content!important; visibility:hidden!important; }
#header .header-measuring .header-item-content { flex:none; width:max-content; }
.workspace-recovery { position:absolute; right:6px; top:80px; z-index:2000; background:var(--panel); }
@media(prefers-reduced-motion:reduce) { .header-dragging .header-item { transition:none; } }

.picker-dialog { width:min(720px,calc(100vw - 24px)); max-height:calc(100dvh - 24px); padding:0; border-radius:calc(20px * var(--squircle-scale)); box-sizing:border-box; overflow:hidden; }
.dialog-content { display:flex; flex-direction:column; max-height:calc(100dvh - 24px); }
.dialog-page { padding:20px; overflow:auto; }
.dialog-title { margin:0 0 2px; font-size:1.05em; line-height:1.3; text-align:center; outline:0; }
.dialog-footer { display:flex; align-items:center; gap:8px; margin:0; padding:16px 20px 20px; border-top:1px solid var(--card-shade); }
.dialog-footer > :is(.dialog-button,.suggested-action), .new-drawing-actions > :is(.dialog-button,.suggested-action) { min-height:34px; padding:0 16px; border-radius:var(--control-radius); background:var(--button); font-weight:500; }
.dialog-footer .suggested-action { background:var(--accent); color:var(--accent-foreground); }
:where(:root:not([data-touch])) .dialog-footer button.suggested-action:hover:not(:disabled) { background:color-mix(in srgb,white 10%,var(--accent)); }
.dialog-footer button.suggested-action:disabled { opacity:.5; }
.dialog-gap { flex:1; }
.texture-dialog { height:min(556px,calc(100dvh - 24px)); }
.texture-dialog .dialog-content { position:relative; height:100%; }
.texture-page { flex:1; min-height:0; display:flex; flex-direction:column; gap:14px; scrollbar-width:none; }
.texture-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(102px,1fr)); gap:14px 12px; }
.texture-tile { display:flex; flex-direction:column; align-items:center; gap:6px; min-width:0; min-height:0; padding:0; background:transparent; color:inherit; font-weight:400; line-height:normal; }
.texture-frame { display:block; box-sizing:border-box; width:102px; height:102px; padding:3px; border-radius:calc(51px * var(--corner-fit)); }
:where(:root:not([data-touch])) .texture-tile:hover .texture-frame, .texture-tile:active .texture-frame { background:color-mix(in srgb,var(--text) 10%,transparent); }
.texture-tile[aria-checked=true] .texture-frame { outline:2px solid var(--accent); outline-offset:-2px; }
.texture-frame .paper-preview { width:96px; height:96px; border-radius:calc(48px * var(--corner-fit)); background:color-mix(in srgb,var(--text) 6%,transparent); }
.texture-frame .paper-preview svg { width:48px; height:48px; }
.texture-caption { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; max-width:100%; overflow:hidden; overflow-wrap:break-word; text-align:center; }
.paper-preview { display:grid; place-items:center; flex:none; overflow:hidden; }
.paper-preview canvas { display:block; width:100%; height:100%; border-radius:inherit; }
:is(.layer-texture,.property-texture) .paper-preview { width:28px; height:28px; border-radius:calc(14px * var(--corner-fit)); }
:is(.layer-texture,.property-texture) .paper-preview svg { width:14px; height:14px; }
.property-texture { display:flex; align-items:center; gap:var(--panel-group-spacing); min-height:var(--panel-control-height); padding:0 var(--panel-field-padding); background:var(--input); text-align:start; }
.property-texture-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Tagged color forms use the same shared numeric editor as native hosts. */
.color-editor-page { position:relative; display:flex; flex-direction:column; min-height:0; overflow:hidden; }
.color-editor-body { display:grid; grid-template-columns:232px minmax(0,1fr); grid-template-rows:auto auto 1fr; grid-template-areas:"title title" "left head" "left values"; align-content:start; gap:14px 24px; }
.color-editor-title { grid-area:title; }
.color-editor-left { grid-area:left; display:flex; flex-direction:column; align-items:center; gap:6px; min-width:0; }
.color-editor-values { grid-area:values; min-width:0; align-self:start; }
.color-editor-wheel { position:relative; width:100%; }
.color-editor-stage { position:absolute; }
.color-editor-stage canvas { position:absolute; touch-action:none; }
.color-editor-stage .color-intensity { position:absolute; inset:0; overflow:visible; pointer-events:none; touch-action:none; }
.color-editor-stage .color-intensity path[role=slider] { pointer-events:stroke; touch-action:none; outline:0; }
.color-shapes { display:flex; gap:2px; padding:4px; border-radius:999px; background:color-mix(in srgb,var(--text) 6%,transparent); }
.color-shapes button { display:flex; align-items:center; gap:4px; height:26px; min-height:26px; padding:0 8px; border:0; border-radius:999px; background:transparent; color:inherit; font:inherit; font-weight:500; }
.color-shapes button.selected { background:var(--header-selection); color:var(--text); }
:where(:root:not([data-touch])) .color-shapes button.selected:hover:not(:disabled) { background:var(--header-selection-hover); }
.color-shapes svg { width:16px; height:16px; flex:none; }
.color-editor-head { grid-area:head; display:grid; grid-template-columns:auto auto minmax(0,1fr); grid-template-areas:"pair pick hex" "captions . ."; align-items:center; gap:2px 12px; min-width:0; }
.color-editor-head > .color-pair { grid-area:pair; }
.color-editor-head > .color-pick { grid-area:pick; }
.color-editor-head > .color-hex { grid-area:hex; }
.color-editor-head > .color-pair-captions { grid-area:captions; }
.color-pair { position:relative; display:flex; overflow:hidden; border-radius:var(--control-radius); }
.color-pair::after { content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 1px var(--card-shade); pointer-events:none; }
.color-editor-head .color-pair > * { width:54px; height:48px; border:0; padding:0; border-radius:0; }
.color-pair-captions { display:grid; grid-template-columns:1fr 1fr; font-size:.82em; opacity:.6; text-align:center; }
.color-pick { width:48px; height:48px; padding:0; display:grid; place-items:center; border-radius:var(--control-radius); background:var(--button); }
.color-pick svg { width:24px; height:24px; }
.color-copy svg, .color-swatches svg, .color-sheet-close svg { width:16px; height:16px; }
.color-hex { justify-self:end; display:flex; align-items:center; gap:4px; }
.color-badge { padding:1px 6px; border-radius:calc(8px * var(--corner-fit)); background:color-mix(in srgb,var(--text) 8%,transparent); font-size:.82em; font-weight:400; white-space:nowrap; }
.color-badge:empty, .color-badge[hidden] { display:none; }
.color-hex .color-value, .color-hex .color-value-input { width:calc(7ch + 8px); min-height:40px; font-size:1.6em; font-weight:500; text-align:left; }
.color-rows { display:grid; grid-template-columns:auto minmax(0,1fr) repeat(3,auto) auto; align-items:center; gap:2px 4px; }
.color-rows-plain { grid-template-columns:auto minmax(0,1fr) repeat(3,auto); }
.color-row-name { position:relative; display:flex; min-width:0; }
.color-row-space { display:flex; }
.color-format { flex:1; display:flex; align-items:center; justify-content:space-between; gap:4px; min-height:28px; padding:0 6px; border:0; border-radius:var(--control-radius); background:transparent; color:inherit; font:inherit; font-weight:400; white-space:nowrap; }
.color-format-names { display:grid; text-align:left; }
.color-format-names > span { grid-area:1 / 1; }
.color-format-names > span:not(.current) { visibility:hidden; }
.color-format svg { width:12px; height:12px; }
.color-format-menu { position:absolute; z-index:2; top:100%; left:0; display:flex; flex-direction:column; min-width:max-content; padding:4px; border-radius:var(--control-radius); background:var(--panel); box-shadow:var(--card-shadow); }
.color-format-menu[hidden] { display:none; }
.color-format-menu button { min-height:30px; padding:0 10px; border:0; border-radius:calc(var(--control-radius) - 2px); background:transparent; color:inherit; font:inherit; text-align:left; }
.color-format-menu button[aria-checked=true] { background:var(--header-selection); }
.color-value-cell { display:flex; justify-content:flex-end; }
.color-value, .color-value-input { box-sizing:border-box; width:calc(6ch + 8px); min-height:28px; padding:0 4px; border:0; border-radius:var(--control-radius); font:inherit; font-weight:400; font-variant-numeric:tabular-nums; text-align:right; }
.color-value { background:transparent; color:inherit; cursor:ns-resize; touch-action:none; }
.color-hex .color-value { cursor:text; touch-action:manipulation; }
.color-value-input { background:var(--input); color:var(--text); box-shadow:inset 0 0 0 2px var(--accent); outline:0; }
.color-value-input[aria-invalid] { box-shadow:inset 0 0 0 2px #e01b24; }
.color-rows > .color-row-name:has(+ .color-intensity-cell) { grid-column:1 / 3; padding-left:6px; }
.color-intensity-cell { grid-column:3 / 6; }
.color-intensity-cell .color-value, .color-intensity-cell .color-value-input { width:calc(9ch + 8px); }
.color-copy { width:28px; height:28px; min-height:28px; margin-right:-6px; padding:0; display:grid; place-items:center; border:0; border-radius:var(--control-radius); background:transparent; color:inherit; }
.color-editor-error { margin:6px 0 0; color:#e01b24; font-size:.9em; }
.color-editor-error:empty { display:none; }
.color-recent { flex:1; min-width:0; display:flex; gap:4px; overflow:hidden; }
.color-mini { flex:1; display:flex; align-items:center; gap:8px; font-variant-numeric:tabular-nums; }
.color-mini[hidden], .color-recent[hidden] { display:none; }
.color-mini .color-pair > * { width:38px; height:34px; }
:is(.color-dialog,.new-drawing-dialog) .palette-tile { flex:none; width:34px; height:34px; min-height:0; padding:3px; border:0; border-radius:var(--control-radius); background:transparent; }
.color-sheet .palette-tile { width:40px; height:40px; }
:is(.color-dialog,.new-drawing-dialog) button.palette-add { flex:none; width:34px; height:34px; margin:3px; display:grid; place-items:center; padding:0; border:0; border-radius:var(--control-radius); background:color-mix(in srgb,var(--text) 6%,transparent); color:inherit; }
:is(.color-dialog,.new-drawing-dialog) .palette-add svg { width:16px; height:16px; }
.color-swatches { width:34px; height:34px; padding:0; display:grid; place-items:center; border:0; border-radius:var(--control-radius); background:var(--button); color:inherit; }
.color-swatches svg { transform:rotate(180deg); }
.color-swatches.open svg { transform:none; }
.color-sheet { position:absolute; inset:0; display:flex; flex-direction:column; gap:10px; padding:20px 20px 0; background:var(--settings); transform:translateY(100%); transition:transform .25s cubic-bezier(.33,1,.68,1); }
.new-drawing-drawer { position:absolute; inset:0; display:flex; flex-direction:column; background:var(--settings); transform:translateY(100%); transition:transform .25s cubic-bezier(.33,1,.68,1); }
:is(.color-sheet,.new-drawing-drawer).open { transform:none; }
:is(.color-sheet,.new-drawing-drawer)[hidden] { display:none; }
@media (prefers-reduced-motion:reduce) { .color-sheet, .new-drawing-drawer { transition:none; } }
.color-sheet-head { display:flex; gap:6px; }
.color-sheet-head input { flex:1; min-width:0; min-height:34px; padding:0 10px; border:0; border-radius:var(--control-radius); background:var(--input); color:var(--text); font:inherit; }
.color-sheet-close { width:34px; height:34px; padding:0; display:grid; place-items:center; border:0; border-radius:var(--control-radius); background:transparent; color:inherit; }
.color-sheet-body { flex:1; min-height:0; overflow:auto; display:flex; flex-direction:column; gap:14px; padding-bottom:16px; }
.color-sheet-section h3 { display:flex; gap:8px; margin:0 0 6px; font-size:.95em; font-weight:400; }
.color-sheet-count { opacity:.6; }
.color-sheet-tiles { display:flex; flex-wrap:wrap; gap:4px; }
.color-sheet-empty { opacity:.65; }
.color-strip { position:fixed; z-index:2147483000; width:272px; white-space:nowrap; display:flex; align-items:center; gap:10px; padding:8px 12px; border:0; border-radius:var(--surface-radius); background:var(--settings); color:var(--text); box-shadow:0 2px 12px rgb(0 0 0 / 25%); font:inherit; font-weight:400; text-align:left; font-variant-numeric:tabular-nums; }
.color-strip[hidden] { display:none; }
.color-strip .color-pair > * { width:20px; height:40px; }
.color-strip-text { flex:1; display:flex; flex-direction:column; gap:2px; min-width:0; }
.color-strip-line { display:flex; justify-content:space-between; gap:8px; }
.color-strip-hex { font-weight:500; letter-spacing:.04em; }
.color-strip-space { opacity:.65; }
.new-drawing-dialog { height:min(500px,calc(100dvh - 24px)); }
.new-drawing-dialog > .dialog-content { position:relative; height:100%; overflow:hidden; }
.new-drawing-main { display:flex; flex-direction:column; height:100%; min-height:0; }
.new-drawing-scroll { position:relative; flex:1; min-height:0; display:flex; flex-direction:column; }
.new-drawing-scroll > :first-child { flex:1; min-height:0; overflow:auto; scrollbar-width:none; }
:root[data-mouse] .new-drawing-scroll:is(:hover,:focus-within) > .scroll-thumb { opacity:1; }
.new-drawing-page { display:flex; flex-direction:column; gap:14px; padding:18px 20px 16px; }
.new-drawing-body { display:flex; align-items:flex-start; gap:24px; }
.new-drawing-left { flex:none; display:flex; flex-direction:column; align-items:center; gap:8px; }
button.new-drawing-preview { display:block; min-height:0; padding:0; overflow:hidden; border-radius:calc(22px * var(--corner-fit)); background:var(--view); }
:where(:root:not([data-touch])) button.new-drawing-preview:hover { background:color-mix(in srgb,var(--text) 5%,var(--view)); }
.new-drawing-art { display:grid; place-items:center; max-width:100%; }
.new-drawing-sheet { position:relative; display:block; overflow:hidden; box-shadow:0 1px 2px rgb(0 0 0 / 18%), 0 4px 14px rgb(0 0 0 / 14%); }
.new-drawing-sheet.mini { box-shadow:0 0 0 1px rgb(0 0 0 / 10%), 0 1px 3px rgb(0 0 0 / 16%); }
.new-drawing-grain { position:absolute; inset:0; background-repeat:repeat; pointer-events:none; }
.new-drawing-clear { background:repeating-conic-gradient(var(--checker-dark) 0 25%,var(--checker-light) 0 50%) 0 0/10px 10px; }
.new-drawing-captions { display:flex; flex-direction:column; align-items:center; gap:2px; max-width:100%; text-align:center; }
.new-drawing-caption-line, .new-drawing-captions > * { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.new-drawing-preset { font-weight:600; }
.new-drawing-dim { opacity:.6; }
.new-drawing-small { font-size:.9em; }
.new-drawing-caption { font-size:.82em; }
.new-drawing-form { flex:1; min-width:0; display:flex; flex-direction:column; gap:14px; }
.new-drawing-section { display:flex; flex-direction:column; gap:6px; }
.new-drawing-heading { margin:0; font-size:1em; font-weight:700; }
.new-drawing-rows { display:flex; flex-direction:column; gap:10px; }
.new-drawing-row { display:flex; align-items:center; gap:6px; min-width:0; }
.new-drawing-name-row { gap:10px; }
.new-drawing-entry, .new-drawing-field, .new-drawing-select { box-sizing:border-box; min-height:34px; height:34px; border:0; border-radius:var(--control-radius); background:color-mix(in srgb,var(--text) 7%,transparent); color:var(--text); }
.new-drawing-entry { flex:1; min-width:0; padding:0 10px; font:inherit; outline:0; }
.new-drawing-entry:focus-visible { box-shadow:inset 0 0 0 2px var(--accent); }
.new-drawing-entry.error { box-shadow:inset 0 0 0 2px #e01b24; }
.new-drawing-select { padding:0 10px; font-weight:700; }
:where(:root:not([data-touch])) .new-drawing-select:hover:not(:disabled) { background:color-mix(in srgb,var(--text) 11%,transparent); }
.new-drawing-linked { display:flex; align-items:center; }
.new-drawing-field { display:flex; align-items:center; flex:none; padding-left:10px; }
.new-drawing-linked .new-drawing-field { width:92px; }
.new-drawing-affix { flex:none; font-size:.9em; opacity:.62; }
.new-drawing-field .number-control { flex:1; width:auto; min-width:0; font-size:inherit; }
.new-drawing-field .number-track { display:none; }
.new-drawing-field .number-inline .number-value-box { flex:1; min-width:0; background:none; }
.new-drawing-field .number-control .number-entry { height:34px; min-height:34px; padding:0 10px 0 4px; background:none; box-shadow:none; }
.new-drawing-field .number-control.error .number-entry { box-shadow:inset 0 0 0 2px #e01b24; }
.new-drawing-combo { padding:0 3px 0 0; }
.new-drawing-combo .number-control { flex:none; width:44px; }
.new-drawing-combo .number-control .number-entry { padding:0 2px 0 10px; }
.new-drawing-combo .new-drawing-affix { padding:0 2px 0 3px; }
.new-drawing-combo > .new-drawing-affix:last-child { padding-right:10px; }
.new-drawing-relief { display:flex; align-items:center; gap:10px; min-width:0; }
.new-drawing-relief-label { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.new-drawing-relief.disabled { opacity:.5; }
.dialog-footer > .new-drawing-relief ~ button { flex:none; }
button.new-drawing-chevron { display:grid; place-items:center; width:26px; height:26px; min-height:26px; padding:0; border-radius:calc(var(--control-radius) - 2px); }
button.new-drawing-chevron svg { width:16px; height:16px; }
button.new-drawing-link { display:grid; place-items:center; width:26px; height:34px; min-height:34px; padding:0; border-radius:var(--control-radius); color:color-mix(in srgb,currentColor 62%,transparent); }
button.new-drawing-link[aria-pressed=true] { color:var(--accent); }
button.new-drawing-link svg { width:12px; height:12px; }
.new-drawing-label { margin-right:4px; white-space:nowrap; }
.new-drawing-size { flex:1; min-width:0; margin-left:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.new-drawing-size.error { color:#e01b24; opacity:1; }
.new-drawing-well { display:flex; gap:2px; padding:3px; border-radius:calc(var(--control-radius) + 3px); background:color-mix(in srgb,var(--text) 6%,transparent); }
.new-drawing-well button { display:flex; align-items:center; gap:5px; min-height:28px; height:28px; padding:0 9px; border-radius:var(--control-radius); font-weight:400; }
.new-drawing-well button.selected { background:var(--header-selection); }
:where(:root:not([data-touch])) .new-drawing-well button.selected:hover { background:var(--header-selection-hover); }
.new-drawing-well svg { width:14px; height:14px; flex:none; }
.new-drawing-icons button { justify-content:center; width:30px; padding:0; }
.new-drawing-colors { display:grid; grid-template-columns:4fr 5fr 4fr; gap:6px; }
.new-drawing-cell { display:flex; flex-direction:column; gap:2px; min-width:0; }
.new-drawing-cell > .new-drawing-caption { opacity:.6; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.new-drawing-cell > select { width:100%; min-width:0; }
.new-drawing-papers { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
button.new-drawing-paper-tile { display:flex; align-items:center; gap:10px; min-width:0; min-height:44px; padding:4px 12px 4px 4px; border-radius:var(--control-radius); background:color-mix(in srgb,var(--text) 7%,transparent); text-align:start; }
:where(:root:not([data-touch])) button.new-drawing-paper-tile:hover:not(:disabled) { background:color-mix(in srgb,var(--text) 11%,transparent); }
button.new-drawing-paper-tile:disabled { opacity:.5; }
.new-drawing-paper-tile .paper-preview, .new-drawing-patch { flex:none; width:36px; height:36px; border-radius:calc(var(--control-radius) - 1px); }
.new-drawing-paper-tile .paper-preview svg { width:18px; height:18px; }
.new-drawing-patch { box-shadow:inset 0 0 0 1px var(--card-shade); }
.new-drawing-tile-label { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:700; }
.new-drawing-tile-text { display:flex; flex-direction:column; gap:1px; min-width:0; line-height:1.2; }
.new-drawing-tile-text > .new-drawing-caption { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dialog-footer > .new-drawing-open-presets { display:flex; align-items:center; gap:6px; }
.new-drawing-up { width:16px; height:16px; transform:rotate(180deg); }
.new-drawing-drawer-head { flex:none; padding:18px 20px 0; }
.new-drawing-drawer-body { display:flex; flex-direction:column; gap:14px; padding:10px 20px 16px; }
.new-drawing-search { display:flex; align-items:center; gap:6px; height:34px; padding:0 10px; border-radius:var(--control-radius); background:color-mix(in srgb,var(--text) 7%,transparent); }
.new-drawing-search:focus-within { box-shadow:inset 0 0 0 2px var(--accent); }
.new-drawing-search svg { width:16px; height:16px; flex:none; opacity:.7; }
.new-drawing-search input { flex:1; min-width:0; height:100%; padding:0; border:0; outline:0; background:transparent; color:var(--text); font:inherit; }
.new-drawing-tabs { display:flex; flex-wrap:wrap; gap:4px; }
button.new-drawing-pill { min-height:28px; height:28px; padding:0 11px; border-radius:99px; background:color-mix(in srgb,var(--text) 7%,transparent); font-weight:400; }
button.new-drawing-pill.selected { background:var(--header-selection); }
button.new-drawing-pill:disabled { opacity:.5; }
.new-drawing-preset-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(128px,1fr)); gap:12px 10px; }
button.new-drawing-preset { display:flex; flex-direction:column; align-items:center; gap:1px; min-width:0; min-height:0; padding:0; background:transparent; font-weight:400; line-height:1.25; text-align:center; }
button.new-drawing-preset.disabled { opacity:.4; }
.new-drawing-preset-frame { display:block; margin-bottom:3px; padding:3px; border-radius:calc(26px * var(--corner-fit)); }
:where(:root:not([data-touch])) .new-drawing-preset:hover .new-drawing-preset-frame, .new-drawing-preset:active .new-drawing-preset-frame { background:color-mix(in srgb,var(--text) 10%,transparent); }
.new-drawing-preset.selected .new-drawing-preset-frame { outline:2px solid var(--accent); outline-offset:-2px; }
.new-drawing-preset > :not(.new-drawing-preset-frame) { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.new-drawing-tile-name { font-size:.93em; }
.new-drawing-empty { margin:0; }
.new-drawing-summary { flex:1; min-width:0; display:flex; align-items:center; gap:10px; }
.new-drawing-summary-text { min-width:0; display:flex; flex-direction:column; gap:1px; }
.new-drawing-summary-top { display:flex; align-items:baseline; gap:6px; min-width:0; }
.new-drawing-summary-text span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.new-drawing-summary-name { font-size:.93em; font-weight:600; }
.new-drawing-actions { flex:none; display:flex; align-items:center; gap:8px; }
.new-drawing-saving > .new-drawing-entry { flex:none; width:10em; }
.new-drawing-saving > .new-drawing-select { flex:none; max-width:12em; }
.new-drawing-drawer-body:has(> .new-drawing-color-page) { padding:0; }
.new-drawing-color-page .color-editor-body { padding:18px 20px 16px; overflow:visible; }
.color-editor-head.new-drawing-color-head { grid-template-columns:auto minmax(0,1fr) auto; grid-template-areas:"pair hex mode"; }
.new-drawing-color-head > .color-hex { justify-self:start; }
.new-drawing-color-head > .new-drawing-mode { grid-area:mode; }
.new-drawing-transparent { font-size:1.3rem; opacity:.6; }
.new-drawing-palette { display:flex; flex-direction:column; gap:6px; margin-top:8px; }
.new-drawing-palette-head { display:flex; gap:8px; }
.new-drawing-palette-tiles { display:flex; flex-wrap:wrap; gap:4px; }
.new-drawing-menu button { display:flex; justify-content:space-between; gap:16px; }
.new-drawing-menu button.selected { background:color-mix(in srgb,var(--text) 10%,transparent); }
.new-drawing-error { position:absolute; left:20px; right:20px; bottom:74px; z-index:1; margin:0; padding:6px 10px; border-radius:var(--control-radius); background:var(--settings); color:#e01b24; box-shadow:0 1px 6px rgb(0 0 0 / 20%); }
@media (max-width:744px) {
  .color-editor-body { grid-template-columns:minmax(0,1fr); grid-template-rows:none; grid-template-areas:"title" "head" "left" "values"; }
  .color-editor-left { width:min(232px,100%); justify-self:center; }
  :is(.texture-dialog,.new-drawing-dialog) { height:min(600px,calc(100dvh - 24px)); }
  .new-drawing-body { flex-direction:column; align-items:stretch; }
  .new-drawing-left { align-self:center; max-width:100%; }
}
.property-color { min-width: 56px; min-height: 28px; max-width: 120px; overflow: hidden; text-indent: -9999px; border: 1px solid currentColor; border-radius: var(--control-radius); }


.file-progress { position:fixed; bottom:1rem; left:50%; transform:translateX(-50%); display:flex; gap:1rem; align-items:center; padding:.6rem 1rem; border-radius:calc(10px * var(--squircle-scale)); background:var(--panel); box-shadow:0 2px 15px #0006; z-index:50; }
.color-comparison { display: flex; flex-wrap: wrap; gap: 12px; }
.color-comparison figure { margin: 0; flex: 1 1 180px; text-align: center; }
.color-comparison canvas { width: 100%; height: auto; background: repeating-conic-gradient(var(--checker-dark) 0 25%,var(--checker-light) 0 50%) 0 0/10px 10px; }
.source-details { white-space: pre-wrap; }

.proof-panel { padding:8px; }
.proof-controls { display:flex; flex-direction:column; gap:4px; box-sizing:border-box; width:100%; min-width:0; padding:0; color:var(--text); }
.proof-tone-pad { display:block; width:100%; margin:0 auto; touch-action:none; }
.proof-sdr { position:relative; }
.proof-modes { display:flex; flex-wrap:wrap; gap:4px; }
.proof-panel .proof-modes button { flex:1 1 max-content; min-width:min-content; min-height:24px; padding:0 6px; line-height:normal; overflow-wrap:normal; white-space:normal; }
.proof-panel .proof-modes button[aria-pressed=true] { background:color-mix(in srgb,var(--text) 12%,transparent); }
.proof-dial-icon { position:absolute; pointer-events:none; opacity:.62; }
.proof-panel .proof-dial-reset { position:absolute; padding:0; min-height:0; min-width:0; background:transparent; }
.proof-dial-accessibility { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.proof-panel input[type=range] { touch-action:none; min-width:0; width:160px; }
.proof-panel [hidden] { display:none; }

.proof-print { display:grid; grid-template-columns:fit-content(45%) minmax(0,1fr); gap:4px; }
.proof-panel .document-size { display:grid; grid-column:1 / -1; grid-template-columns:subgrid; align-items:center; gap:4px; margin:0; min-width:0; overflow-wrap:anywhere; }
.proof-panel .document-size > :is(select,input) { min-width:0; max-width:100%; }
.proof-panel .document-size > select { width:100%; }
.proof-panel .document-size:has(input[type=checkbox]) { display:flex; flex-direction:row-reverse; justify-content:flex-end; }
.proof-panel .document-size output { grid-column:2; text-align:right; }
.proof-panel select { min-width:0; width:100%; min-height:24px; padding:0 6px; text-overflow:ellipsis; }
.proof-panel .document-size:has(input[type=checkbox]) { min-height:24px; gap:4px; }
.proof-controls > p { margin:0; }
.proof-controls > p:empty { display:none; }

/* Drawing tabs use the final flexible title allocation, independently of dock tabs. */
.drawing-title { position:relative; display:flex; flex:1; min-width:0; width:100%; height:100%; }
.drawing-title [hidden] { display:none !important; }
.drawing-tabs { display:flex; flex:1; width:100%; min-width:0; gap:var(--header-gap); border-radius:var(--header-radius); background:var(--header-surface); }
.drawing-tab { position:relative; display:flex; flex:1 1 0; min-width:0; border-radius:var(--header-radius); background:transparent; }
#header .drawing-tab-pick { display:block; flex:1; min-width:0; height:auto; padding-inline:calc(var(--header-tile) / 2 + 12px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; touch-action:none; border-radius:var(--header-radius); }
#header .drawing-tab-pick[aria-selected="true"] { background:var(--glass-document-tab); }
#header .drawing-tab-close { position:absolute; right:calc(var(--header-tile) / 2 - 12px); top:0; bottom:0; width:24px; min-width:24px; height:24px; margin-block:auto; padding:4px; border-radius:999px; }
.drawing-selector { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.drawing-list { width:min(600px,90vw); max-height:80vh; padding:16px; }
.drawing-list header { display:flex; justify-content:space-between; align-items:center; }
.drawing-list-rows { overflow:auto; max-height:55vh; touch-action:pan-y; }
.drawing-list-row { display:flex; min-height:48px; align-items:stretch; gap:4px; border-radius:calc(5px * var(--squircle-scale)); }
.drawing-list-pick { display:flex; flex:1; min-width:0; flex-direction:column; align-items:start; touch-action:pan-y; }
.drawing-list-pick :is(strong,small) { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.drawing-list-pick[aria-current="true"] { background:var(--accent-bg, #477b9c); }
.drawing-grip { touch-action:none; }
.drawing-row-menu { display:flex; flex-wrap:wrap; gap:4px; padding-top:8px; }
.drawing-slide { position:absolute; z-index:1; overflow:hidden; pointer-events:none; }
.drawing-slide > .drawing-tab { position:absolute; margin:0; }
.drawing-slide > .dragged-tab-preview { z-index:2; background:var(--tabbar); }
.drawing-list-row[data-drawing-drop="before"] { box-shadow:inset 0 3px #55acff; }
.drawing-list-row[data-drawing-drop="after"] { box-shadow:inset 0 -3px #55acff; }
.drawing-dragging, .drawing-dragging * { cursor:grabbing !important; }
.document-transition { position:fixed; inset:0; z-index:11000; cursor:progress; }
.document-transition > span { position:absolute; bottom:24px; left:50%; transform:translateX(-50%); border-radius:calc(8px * var(--squircle-scale)); padding:8px 16px; background:var(--bg); }

.filter-types { display:flex; flex-direction:column; min-height:424px; gap:8px; }
.filter-type-list { display:flex; flex-direction:column; gap:2px; flex:1; }
.filter-types .filter-type { display:flex; align-items:center; gap:6px; min-height:44px; padding:0 6px; text-align:left; }
.filter-types .cancel-filter { align-self:flex-start; }
.content-drawer :is(.filter-types,.filter-picker,.effect-properties) { margin:8px; }
.color-action-property { display:flex; align-items:center; gap:var(--panel-control-spacing); }
.drawer-column > .layers-panel { padding:8px; }
.drawer-column.layer-inspector-column { overflow:hidden; }
.layer-inspector { height:100%; display:flex; flex-direction:column; }
.layer-properties-pages { flex:1; min-height:0; position:relative; overflow:hidden; }
.layer-properties-pages > .panel { position:absolute; inset:0; height:100%; overflow:auto; }
.layer-properties-pages > .layers-panel { overflow:hidden; }
.layer-properties-disclosure { flex:none; width:100%; display:flex; align-items:center; gap:6px; padding:0 8px; border:0; border-top:1px solid var(--border); border-radius:0 0 var(--control-radius) var(--control-radius); font-weight:normal; }
.layer-properties-icon-slot { width:24px; height:24px; flex:none; display:grid; place-items:center; }
.layer-properties-icon-slot svg { width:16px; height:16px; }
.layer-properties-disclosure:not(.open) > .layer-properties-icon-slot:last-child { transform:rotate(180deg); }
.layer-properties-text { flex:1; min-width:0; display:flex; flex-direction:column; text-align:left; gap:1px; line-height:normal; }
.layer-properties-label,.layer-properties-summary { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.layer-properties-summary { color:var(--secondary); font-size:.9em; }

.layer-swipe { position: relative; overflow: hidden; flex: none; --swipe: 0px; }
.layer-swipe > .layer-row { transform: translateX(calc(-1 * var(--swipe))); touch-action: pan-y; }
.layer-swipe.swipe-animating > .layer-row { transition: transform 150ms ease-out; }
.layer-swipe-actions { position:absolute; inset:0 0 0 auto; display:flex; clip-path:inset(0 0 0 calc(100% - var(--swipe))); }
.layer-swipe-actions[hidden] { display:none; }
.panel .layer-swipe-actions button { flex:1 1 auto; min-width:0; height:100%; padding:0 4px; border:0; border-radius:0; background:color-mix(in srgb,var(--bg),var(--fg) 16%); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.panel .layer-swipe-actions button.layer-swipe-duplicate { background:color-mix(in srgb,var(--bg),var(--fg) 24%); }
.panel .layer-swipe-actions button.layer-swipe-delete { color:white; background:#c62828; }
.layer-swipe.swipe-animating > .layer-swipe-actions { transition:clip-path 150ms ease-out; }

.selection-layer-load[hidden] { display:none; }
.selection-menu-button { min-height:44px; padding:6px 12px; display:flex; gap:6px; align-items:center; justify-content:center; }
.selection-menu-button svg { width:12px; height:12px; }
.panel .selection-layer-load { width:30px; height:30px; min-width:30px; min-height:30px; }
.selection-layer-load svg { width:16px; height:16px; }
.selection-modes { gap:0; border-radius:var(--control-radius); overflow:hidden; border:1px solid color-mix(in srgb,var(--text) 20%,transparent); }
.selection-modes > button { height:44px; border-radius:0; border:0; }
.selection-modes > button + button { border-left:1px solid color-mix(in srgb,var(--text) 20%,transparent); }
/* Toolbar controls share panel typography and the Rust tile allocation. */
.toolbar-component { display: block; overflow: clip; }
.toolbar-component > .toolbar-more, .toolbar-component > .toolbar-option { position: absolute; }
.toolbar-component > .toolbar-more { min-width: 0; min-height: 0; padding: 0; }
.toolbar-option { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.toolbar-option[hidden], .toolbar-component [hidden] { display: none !important; }
.toolbar-option-label { flex: none; }
.toolbar-numeric.allocated .toolbar-option-label { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.toolbar-numeric > .number-control { flex: none; width: auto; }
.toolbar-numeric > svg { width: 16px; height: 16px; flex: none; }
.toolbar-numeric .number-track { width: 56px; flex: none; }
.toolbar-numeric input.number-slider { touch-action: none; }
.toolbar-component .number-value, .toolbar-component .number-entry { font-size: var(--ui-text-size, 14.6667px); }
.toolbar-choice > button { display: flex; align-items: center; gap: 6px; min-height: 24px; line-height: 24px; padding: 0 6px; background: var(--input); border-radius: var(--control-radius); width: 168px; }
.toolbar-choice svg { flex: none; width: 16px; height: 16px; }
.toolbar-choice svg:last-child { width: 12px; height: 12px; }
.toolbar-choice-label { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; }
.toolbar-action > button, .toolbar-number-face { width: 100%; height: 100%; min-width: 0; min-height: 0; padding: 0; }
.toolbar-action svg { width: var(--tile-icon-size); height: var(--tile-icon-size); }
.toolbar-segments { gap: 0; overflow: hidden; }
.toolbar-segments > button { flex: 1; height: 100%; min-width: 0; min-height: 0; border-radius: 0; padding: 0; background: var(--input); }
.toolbar-segments > button[aria-pressed=true] { background: var(--selection); }
.toolbar-segments svg { width: var(--tile-icon-size); height: var(--tile-icon-size); }
.toolbar-component:not(.vertical-component) > .toolbar-segments { border-radius: var(--control-radius); }
.toolbar-component:not(.vertical-component) .toolbar-segments svg { width: 16px; height: 16px; }
.toolbar-segments.stacked { flex-direction: column; }
.toolbar-segments.stacked > button { width: 100%; }
.vertical-component .toolbar-choice > button { width: 100%; height: 100%; background: transparent; justify-content: center; padding: 2px; }
.vertical-component .toolbar-choice:not(.labeled) .toolbar-choice-label, .vertical-component .toolbar-choice svg:last-child { display: none; }
.vertical-component .toolbar-choice.labeled > button { padding: 0 8px; }
.toolbar-number-face { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; background: transparent; touch-action: none; }
.toolbar-number-face svg { width: 16px; height: 16px; flex: none; }
.toolbar-face-value { font-weight: 400; font-variant-numeric: tabular-nums; font-size: var(--ui-text-size, 14.6667px); }
.toolbar-component[data-tile-style=small] .toolbar-face-value[data-wide] { font-size: calc(var(--ui-text-size, 14.6667px) * .9); }
.toolbar-number-face.labeled { display: grid; grid-template-columns: 16px 1fr; grid-template-rows: 1fr 1fr; gap: 0 6px; padding: 4px 8px; text-align: left; }
.toolbar-number-face.labeled svg { grid-row: 1 / 3; }
.toolbar-face-label { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.toolbar-editor-popover { position: fixed; margin: 0; padding: 10px; border: 1px solid var(--border); border-radius: var(--surface-radius); min-width: 220px; max-width: min(320px, 90vw); height: fit-content; max-height: calc(100vh - 12px); background: var(--panel); color: var(--text); }
.toolbar-choice-menu { flex-direction: column; gap: 2px; }
.toolbar-choice-menu:not([popover]), .toolbar-choice-menu:popover-open { display: flex; }
.toolbar-choice-menu > button { display: flex; align-items: center; gap: 8px; text-align: left; min-height: 32px; }
.toolbar-choice-menu svg { width: 16px; height: 16px; }
.canvas-action-bar { position: absolute; left: 0; top: 0; z-index: 900; display: flex; align-items: center; box-sizing: border-box; width: max-content; color: var(--text); background: var(--glass-panel); border-radius: var(--surface-radius); box-shadow: 0 2px 8px rgb(0 0 0 / 16%); touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.canvas-action-bar[hidden], .canvas-action-bar [hidden] { display: none !important; }
.canvas-action-bar.suppressed { visibility: hidden; }
.canvas-action-bar-label { flex: none; padding: 0 6px; white-space: nowrap; }
.canvas-action-bar .toolbar-option { flex: none; }
.canvas-action-bar button { display: flex; align-items: center; justify-content: center; gap: 6px; width: auto; height: 40px; min-width: 40px; min-height: 40px; padding: 0 10px; font-weight: 400; white-space: nowrap; border-radius: var(--control-radius); }
.canvas-action-bar svg { width: 20px; height: 20px; flex: none; }
.canvas-action-bar > .canvas-action-bar-more { flex: none; width: 40px; padding: 0; }
.canvas-action-bar .toolbar-segments { box-sizing: border-box; width: auto; height: 40px; border-radius: var(--control-radius); }
.canvas-action-bar .toolbar-segments > button { flex: none; height: 38px; min-height: 38px; border-radius: 0; }
.canvas-action-bar .toolbar-choice > button { width: auto; }
.toolbar-option.choice-grid { display:grid; grid-template-columns:repeat(var(--choice-columns),18px); width:max-content; height:auto; gap:0; border:0; border-radius:0; overflow:visible; flex:none; }
.toolbar-option.choice-grid > button { width:18px; height:18px; min-height:18px; min-width:0; padding:0; border:0; border-radius:var(--control-radius); background:transparent; }
.toolbar-option.choice-grid > button[aria-pressed="true"] { background:var(--selection); }
.toolbar-option.choice-grid svg { width:6px; height:6px; opacity:.45; }
.toolbar-option.choice-grid > button[aria-pressed="true"] svg { opacity:1; }
.tool-position-group { display:flex; align-items:center; gap:var(--panel-compound-spacing); }
.tool-position-numbers { display:flex; flex:1; min-width:0; flex-direction:column; gap:var(--panel-compound-spacing); }
.tool-position-numbers .number-control { flex:1; min-width:0; }
.canvas-action-bar-menu svg:last-child { width: 12px; height: 12px; margin-left: -2px; }
#workspace > .canvas-action-bar .suggested-action { background: var(--accent); color: var(--accent-foreground); }
:where(:root:not([data-touch])) #workspace > .canvas-action-bar .suggested-action:hover { background: color-mix(in srgb, white 10%, var(--accent)); }
#workspace > .canvas-action-bar .suggested-action:active { background: color-mix(in srgb, black 10%, var(--accent)); }
#workspace > .canvas-action-bar button[aria-disabled="true"] { opacity: .36; }
#workspace > .canvas-action-bar button[aria-disabled="true"]:is(:hover, :active) { background: transparent; }
#workspace > .canvas-action-bar .suggested-action[aria-disabled="true"]:is(:hover, :active) { background: var(--accent); }
/* Standalone brush tracks keep their value in the transient stamp preview. */
.toolbar-slider { width: 100%; height: 100%; position: relative; }
.toolbar-slider .toolbar-slider-cap { position: absolute; min-width: 0; min-height: 0; padding: 0; background: transparent; }
.toolbar-slider .number-track { position: absolute; min-width: 0; min-height: 0; margin: 0; }
.toolbar-slider .number-track::before { content: ''; position: absolute; inset: 0; clip-path: var(--track-shape); background: color-mix(in srgb, var(--text) 22%, transparent); pointer-events: none; }
.toolbar-slider.opacity-track .number-track::before { background: linear-gradient(to right, transparent, color-mix(in srgb, var(--text) 65%, transparent)), repeating-conic-gradient(var(--checker-dark) 0 25%,var(--checker-light) 0 50%) 2px 6px / 8px 8px; }
.toolbar-slider input.number-slider { appearance: none; border: 0; padding: 0; background: transparent; position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; touch-action: none; }
.toolbar-slider input.number-slider::-webkit-slider-runnable-track { height: 28px; background: transparent; }
.toolbar-slider input.number-slider::-webkit-slider-thumb { width: 12px; height: 28px; margin: 0; background: transparent; border: none; box-shadow: none; }
.toolbar-slider input.number-slider::-moz-range-track { background: transparent; }
.toolbar-slider input.number-slider::-moz-range-thumb { width: 12px; height: 28px; background: transparent; border: none; box-shadow: none; }
.toolbar-slider-thumb { position: absolute; left: calc((100% - 12px) * var(--position)); top: 0; width: 12px; height: 28px; border: 1px solid color-mix(in srgb, var(--text) 60%, transparent); border-radius: calc(6px * var(--corner-fit)); background: var(--thumb); pointer-events: none; }
.toolbar-slider-marks { position: absolute; inset: 0; pointer-events: none; }
.toolbar-slider-mark { position: absolute; left: calc(6px + (100% - 12px) * var(--position)); top: 7px; height: 14px; width: 2px; transform: translateX(-50%); background: var(--text); border-radius: 1px; }
.vertical-component .toolbar-slider.opacity-track .number-track::before { background: linear-gradient(to top, transparent, color-mix(in srgb, var(--text) 65%, transparent)), repeating-conic-gradient(var(--checker-dark) 0 25%,var(--checker-light) 0 50%) 6px 2px / 8px 8px; }
.vertical-component .toolbar-slider input.number-slider::-webkit-slider-runnable-track { width: 28px; height: 100%; }
.vertical-component .toolbar-slider input.number-slider::-webkit-slider-thumb { width: 28px; height: 12px; }
.vertical-component .toolbar-slider input.number-slider::-moz-range-thumb { width: 28px; height: 12px; }
.vertical-component .toolbar-slider-thumb { left: 0; top: calc((100% - 12px) * (1 - var(--position))); width: 28px; height: 12px; }
.vertical-component .toolbar-slider-mark { left: 7px; top: calc(6px + (100% - 12px) * (1 - var(--position))); width: 14px; height: 2px; transform: translateY(-50%); }
.toolbar-brush-preview { position: fixed; margin: 0; padding: 0; border: 0; border-radius: calc(var(--tile-radius) * var(--corner-fit)); overflow: hidden; background: var(--panel); color: var(--text); box-shadow: 0 4px 16px #0003; }
.toolbar-preview-caption { position: absolute; display: flex; align-items: center; font: inherit; white-space: nowrap; }
.toolbar-preview-bookmark { position: absolute; display: flex; align-items: center; justify-content: center; min-height: 0; padding: 0; border-radius: calc(var(--tile-radius) * var(--corner-fit)); background: transparent; }
.toolbar-preview-bookmark svg { width: var(--preview-icon); height: var(--preview-icon); }
.toolbar-preview-stamp { position: absolute; inset: 0; width: 100%; height: 100%; }
.toolbar-slider-mark.selected { background: var(--panel); }
.toolbar-slider input.number-slider::-moz-range-progress { background: transparent; }
.toolbar-slider:has(input:disabled) { opacity: .4; }

.picker-setting { align-items:center; min-height:var(--panel-control-height); }
.picker-setting > span { min-width:0; white-space:normal; overflow-wrap:anywhere; }
.picker-setting select { min-width:0; width:100%; padding:0 var(--panel-field-padding); }

.picker-drawer .panel { padding:var(--panel-inset); }

/* The same compact tonal form appears in panels and Tool Options overflow. */
.tonal-settings { gap: 2px; }
.tonal-settings .selection-modes { border:0; }
.tonal-settings .selection-modes > button { height: 36px; background: var(--input); border: 0; }
.tonal-settings .selection-modes > button[aria-pressed="true"] { background: var(--selection); }
.tonal-tool-list .tool-choice-button:not([data-brush]) { min-height: 36px; }
.tonal-numeric-row { display:flex; align-items:center; gap:var(--panel-control-spacing); height:var(--panel-control-height); }
.tonal-numeric-row > span { min-width: 62px; }
.tonal-numeric-row .number-control { flex: 1; }
.range-control { display: flex; align-items: center; gap: 4px; width: 100%; min-width: 0; height: 28px; }
.range-control .number-value-only { width: max-content; flex: none; }
.number-value-only .number-track { display: none; }
.interval-track { position: relative; flex: 1; min-width: 64px; height: 28px; touch-action: none; }
.interval-trough { position: absolute; left: 8px; right: 8px; top: 12px; height: 4px; background: color-mix(in srgb, var(--text) 20%, transparent); }
.interval-fill { position: absolute; height: 4px; background: color-mix(in srgb, var(--text) 65%, transparent); }
.interval-input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; padding: 0; pointer-events: none; }
.interval-thumb { position: absolute; width: 6px; height: 14px; top: 7px; background: var(--text); border-radius: 2px; pointer-events: none; }
.interval-thumb.lower { transform: translateX(-7px); }
.interval-thumb.upper { transform: translateX(1px); }
.interval-input:focus-visible + .interval-thumb { outline: 1px solid var(--text); outline-offset: 3px; }
.toolbar-range { display: flex; align-items: center; }
/* Command search uses the panel glass fill and shared search rhythm. */
#command-bar { width: min(var(--command-width), calc(100vw - 32px)); height: auto; max-width: none; max-height: calc(100dvh - 48px); margin: 0 auto; inset: clamp(var(--command-top-min), 20dvh, var(--command-top-max)) 0 auto; padding: var(--command-inset); box-sizing: border-box; border-radius: calc(var(--command-radius) * var(--squircle-scale)); background: var(--glass-panel); color: var(--text); box-shadow: 0 8px 24px #0004, 0 0 0 1px color-mix(in srgb, var(--text) 10%, transparent); overflow: hidden; }
#command-bar[open] { display: flex; flex-direction: column; gap: var(--command-gap); }
#command-bar::backdrop { background: transparent; backdrop-filter: none; }
.command-search-header { display: flex; align-items: center; gap: var(--command-gap); flex: none; }
.command-search-field { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; border: 1px solid color-mix(in srgb, var(--text) 18%, transparent); border-radius: calc(7px * var(--squircle-scale)); padding: 6px 8px; background: var(--input); }
.command-search-field:focus-within { outline: 2px solid color-mix(in srgb, var(--accent) 70%, transparent); outline-offset: -1px; }
.command-search-field .icon { width: 16px; height: 16px; opacity: .65; flex: none; }
#command-search { min-width: 0; width: 100%; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--text); outline: none; box-shadow: none; }
#command-bar .command-search-close { padding: 0; width: 32px; min-height: 32px; font-size: 22px; font-weight: 400; flex: none; }
.command-results { overflow: auto; min-height: 0; overscroll-behavior: contain; }
#command-bar .command-result { display: flex; align-items: center; gap: var(--command-inset); width: 100%; min-height: var(--command-row-height); padding: var(--command-gap) var(--command-inset); text-align: start; font-weight: 400; border-radius: calc(8px * var(--squircle-scale)); background: transparent; }
#command-bar .command-result[data-selected="true"] { background: color-mix(in srgb, var(--text) 10%, transparent); }
.command-name { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.command-result[aria-disabled="true"] .command-name { opacity: .5; }
.command-shortcut, .command-detail, .command-unit { opacity: .65; }
.command-shortcut { font-size: .85em; white-space: nowrap; }
.command-detail { min-height: 20px; padding: 0 var(--command-inset); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .85em; flex: none; }
.command-empty { text-align: center; padding: var(--command-inset); opacity: .65; }
#command-bar [hidden] { display: none; }
@media (max-width: 600px) { #command-bar { top: 16px; max-height: calc(100dvh - 32px); } #command-bar .command-result { min-height: 48px; } #command-bar .command-search-close { width: 48px; min-height: 48px; } .command-search-field { min-height: 48px; box-sizing: border-box; } }

.histogram-panel,.waveform-panel { padding:0; }
.histogram-control,.waveform-control { height:100%; }
.histogram-control > .scope-control,.waveform-control > .scope-control { height:calc(100% - 2 * var(--panel-inset)); }
.scope-control { margin:var(--panel-inset); display:flex; flex-direction:column; gap:var(--panel-control-spacing); min-width:0; }
.scope-toolbar,.scope-footer { display:flex; flex:none; align-items:center; gap:var(--panel-control-spacing); min-width:0; }
.scope-toolbar select { width:0; flex:1; min-width:0; background:var(--input); padding:0 var(--panel-field-padding); min-height:var(--panel-control-height); }
.scope-graph { position:relative; display:flex; flex-direction:column; flex:1; min-width:0; min-height:0; }
.scope-graph canvas { display:block; flex:auto; min-height:0; width:100%; height:160px; }
.scope-axis { display:flex; flex:none; justify-content:space-between; color:var(--secondary); pointer-events:none; }
.scope-waveform .scope-axis { position:absolute; inset:0 auto 0 3px; flex-direction:column-reverse; }
.scope-footer > [data-scope-control=status] { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.scope-log,.scope-clipping { display:flex; align-items:center; gap:0; }
.scope-log { min-height:var(--panel-control-height); }
.scope-clipping button { padding:0; width:24px; height:24px; display:grid; place-items:center; }
.scope-tonal { margin:0; }
.scope-tonal canvas { height:120px; }
.property-toolbar,.property-actions { display:flex; align-items:center; gap:4px; min-width:0; }
.property-toolbar { margin-bottom:6px; }
.property-toolbar > select { flex:1; width:0; min-width:0; background:var(--input); padding:0 var(--panel-field-padding); min-height:var(--panel-control-height); }
.property-actions button { height:var(--panel-control-height); min-width:var(--panel-control-height); padding:0; }
.property-row > .number-inline { flex:1; min-width:0; }
.curve-coordinates { display:flex; gap:var(--panel-control-spacing); min-width:0; }
.curve-coordinate { flex:1; min-width:0; }
.curve-coordinate > label { display:flex; flex-direction:column; align-items:stretch; gap:2px; min-width:0; }
.curve-coordinate .number-value-only { flex:1; min-width:0; }
.curve-coordinate .number-value-box { flex:1; min-width:0; }
.curve-plot > canvas { position:absolute; inset:0; width:100%; height:100%; opacity:.6; pointer-events:none; }

.toolbar-labeled-choice { gap: 8px; }
.toolbar-labeled-choice > .toolbar-option-label { min-width: 0; white-space: normal; }
.toolbar-labeled-choice > .toolbar-segments { display: flex; flex: none; width: max-content; height: var(--choice-height); margin-left: auto; border: 0; border-radius: var(--control-radius); }
.toolbar-labeled-choice > .toolbar-segments > button { flex: none; width: var(--choice-width); height: var(--choice-height); padding: 0; }
.toolbar-labeled-choice > .toolbar-segments svg { width: var(--choice-icon); height: var(--choice-icon); }
.tool-settings-control .toolbar-labeled-choice { width: 100%; }
.tool-settings-control .toolbar-labeled-choice > .toolbar-option-label { flex: 1; }
.toolbar-check { gap: 6px; width: max-content; max-width: 100%; white-space: normal; }
.toolbar-check > input { flex: none; margin: 0; }