/* Foundations: define each shared value once; components consume tokens below. */
:root {
  color-scheme: dark;
  --canvas: #131211;
  --sidebar-bg: #191817;
  --surface: #201f1d;
  --raised: #292827;
  --hover: #302f2d;
  --line: rgba(252,252,252,.07);
  --line-strong: rgba(252,252,252,.13);
  --text: #fcfcfc;
  --muted: #a7a6a4;
  --faint: #8f8e8b;
  --blue: var(--palette-blue);
  --blue-wash: color-mix(in srgb,var(--palette-blue) 12%,transparent);
  --danger: var(--palette-red);
  --success: var(--palette-green);
  --field-focus-fill: color-mix(in srgb,var(--surface) 88%,var(--text));
  --composer-fill: #343331;
  --composer-focus-fill: #3e3d3b;
  --composer-shadow: 0 8px 24px rgba(0,0,0,.20);
  --composer-radius: 24px;
  --radius-small: 8px;
  --radius-medium: 12px;
  --radius-card: 16px;
  --radius-dialog: 24px;
  --control-height: 48px;
  --control-radius: var(--radius-medium);
  --control-compact-height: 32px;
  --control-inset: 4px;
  --action-feedback-width: 112px;
  --composer-compact-height: 44px;
  --motion-disclosure: 320ms;
  --motion-disclosure-ease: cubic-bezier(.22,1,.36,1);
  --motion-feedback: 140ms;
  --motion-ease: cubic-bezier(.2,.8,.2,1);
  --select-arrow-size: 14px;
  --select-arrow-inset: 12px;
  --select-arrow-gap: 12px;
  --inset-card-radius: 10px;
  --disclosure-icon-size: 16px;
  --disclosure-icon-gap: var(--space-3);
  --shadow: 0 18px 60px rgba(0,0,0,.42);
  --font: Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --mono: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  --sidebar-w: 258px;
  --rail-w: 72px;
  --type-overline: 12px;
  --type-meta: 13px;
  --type-control: 14px;
  --type-row-title: 15px;
  --type-body: 15px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --palette-red: #ef3e45;
  --palette-orange: #f47920;
  --palette-yellow: #f1bf24;
  --palette-green: #69c42d;
  --palette-teal: #07b99f;
  --palette-blue: #198dff;
  --palette-violet: #9458ec;
  --palette-magenta: #d445ce;
  --palette-slate: #8992b4;
  --palette-ink: #09060e;
  --palette-card-base: #1b1726;
  --chat-user-fill: #0872dd;
  --chat-user-text: #ffffff;
  --label-neutral-fill: var(--palette-slate);
  --label-info-fill: var(--chat-user-fill);
  --label-info-ink: var(--chat-user-text);
  --label-success-fill: var(--palette-green);
  --label-danger-fill: var(--palette-red);
  --label-urgent-fill: var(--palette-violet);
  --label-warm-fill: var(--palette-orange);
  --label-ink: var(--palette-ink);
}
html[data-theme=light]{color-scheme:light;--canvas:#faf9f7;--sidebar-bg:#f2f2f0;--surface:#fff;--raised:#ececea;--hover:#e5e5e2;--line:rgba(18,18,17,.08);--line-strong:rgba(18,18,17,.16);--text:#171717;--muted:#61615e;--faint:#70706c;--blue:#2d68b9;--blue-wash:color-mix(in srgb,var(--blue) 10%,transparent);--danger:#b3424b;--success:#257d53;--shadow:0 18px 60px rgba(10,10,10,.12);--composer-fill:var(--raised);--composer-focus-fill:var(--field-focus-fill);--composer-shadow:0 6px 20px rgba(10,10,10,.10)}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--canvas);color:var(--text);font:15px/1.5 var(--font);-webkit-font-smoothing:antialiased}
button,input,textarea,select{font:inherit}
button{cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.42}
a{color:inherit;text-underline-offset:3px}
svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
svg.sprite{position:absolute;width:0;height:0;overflow:hidden}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
::selection{background:var(--blue-wash)}
[hidden]{display:none!important}
.inset-card{min-width:0;border:0;border-radius:var(--inset-card-radius);background:var(--raised)}
.inset-card-row{min-height:44px;padding:var(--space-3) var(--space-4)}
.disclosure-card{overflow:hidden}
.disclosure-card>summary{display:flex;align-items:center;gap:var(--disclosure-icon-gap);list-style:none;color:var(--text);font-size:var(--type-row-title);font-weight:600;cursor:pointer}
.disclosure-card>summary::-webkit-details-marker{display:none}
.disclosure-card>summary::marker{content:""}
.disclosure-card>summary>svg{width:var(--disclosure-icon-size);height:var(--disclosure-icon-size);flex:none;transform:rotate(-90deg);transition:transform var(--motion-feedback) var(--motion-ease)}
.disclosure-card[open]>summary>svg{transform:rotate(0deg)}
.disclosure-card>summary:hover,.disclosure-card>summary:focus-visible{outline:0;background:var(--hover)}
.disclosure-card>summary:focus-visible>span{text-decoration:underline;text-underline-offset:4px}
.disclosure-card>summary>span{min-width:0;overflow-wrap:anywhere}
.skip{position:fixed;z-index:300;top:8px;left:8px;transform:translateY(-160%);background:var(--text);color:var(--canvas);border-radius:var(--radius-small);padding:8px 12px}
.skip:focus{transform:translateY(0)}
.app{display:grid;grid-template-columns:var(--sidebar-w) minmax(0,1fr);min-height:100vh}
.sidebar{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;min-width:0;padding:10px;background:var(--sidebar-bg);border-right:1px solid var(--line)}
.sidebar-top{display:flex;align-items:center;justify-content:space-between;height:38px;padding:0 3px;margin-bottom:10px}
.sidebar-top-right{display:flex;gap:4px}
.icon-button,.mini-button{display:inline-grid;place-items:center;border:0;background:transparent;color:var(--muted);border-radius:var(--radius-small)}
.icon-button{width:34px;height:34px}
.mini-button{width:26px;height:26px}
.icon-button:hover,.mini-button:hover{background:var(--hover);color:var(--text)}
.brand-button{color:var(--text)}
.brand-button svg{width:19px;height:19px}
.primary-nav{display:grid;gap:3px}
.nav-row{display:flex;align-items:center;gap:10px;width:100%;min-height:36px;padding:6px 9px;border:0;border-radius:var(--radius-medium);background:transparent;color:var(--text);font-size:14px;text-align:left;white-space:nowrap;overflow:hidden}
.nav-row svg{width:17px;height:17px}
.nav-row span:not(.nav-dot):not(.bot-avatar){overflow:hidden;text-overflow:ellipsis}
.nav-row:hover,.nav-row.is-active{background:var(--raised)}
.nav-dot{width:5px;height:5px;margin-left:auto;border-radius:50%;background:var(--blue)}
.sidebar-scroll{flex:1;min-height:0;overflow-y:auto;scrollbar-color:var(--line-strong) transparent;scrollbar-width:thin}
.group-head{display:flex;align-items:center;justify-content:space-between;min-height:30px;margin:23px 6px 4px;color:var(--faint);font-size:var(--type-meta)}
.group-head.with-gap{margin-top:25px}
.group-head svg{width:15px;height:15px}
.group-sub{padding:5px 9px;color:var(--faint);font-size:var(--type-meta)}
.nav-compact{min-height:34px;font-size:13px}
.bot-avatar{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#fff;color:#171717;font-size:15px}
.bot-avatar.purple{background:var(--palette-violet);color:var(--palette-card-base)}
.nav-text{min-height:33px;padding:6px 9px;color:var(--muted);font-size:var(--type-control)}
.sidebar-bottom{display:grid;gap:3px;padding-top:7px}
.sidebar-rail{position:sticky;top:0;display:none;flex-direction:column;align-items:center;gap:10px;width:var(--rail-w);height:100dvh;padding:12px 8px;background:var(--sidebar-bg);border-right:1px solid var(--line)}
.rail-nav{display:grid;gap:8px}
.rail-button{position:relative;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:var(--radius-card);background:transparent;color:var(--muted)}
.rail-button svg{width:21px;height:21px}
.rail-button:hover,.rail-button.is-active{background:var(--raised);color:var(--text)}
.rail-expand{margin-bottom:12px}
.rail-dot{position:absolute;top:5px;right:5px;width:8px;height:8px;border-radius:50%;background:var(--palette-blue)}
.rail-divider{width:34px;height:1px;margin:4px 0;background:var(--line-strong)}
.rail-spacer{flex:1}
.rail-account .account-avatar{width:33px;height:33px}
.account-button{display:flex;align-items:center;gap:9px;width:100%;min-height:38px;padding:5px;border:0;border-radius:10px;background:transparent;color:var(--text);text-align:left;font-size:var(--type-control)}
.account-button:hover{background:var(--raised)}
.account-button>svg{width:14px;height:14px;margin-left:auto;color:var(--faint)}
.account-avatar{display:grid;place-items:center;width:27px;height:27px;border-radius:50%;background:#d1d5db;color:#171717;font-weight:700}
.main{position:relative;display:flow-root;min-width:0;min-height:100vh}
.screen-menu{position:absolute;z-index:4;top:12px;left:15px}
.main:has(.conversation-screen.is-current)>.screen-menu{display:none}
.panel-heading{display:flex;align-items:center;gap:var(--space-3);min-width:0}
.panel-header{display:flex;flex:none;align-items:center;justify-content:space-between;gap:var(--space-3);width:100%;height:60px;margin:0;padding:var(--space-2) var(--space-4);border-bottom:1px solid var(--line);background:var(--canvas)}
.panel-header h2{overflow:hidden;margin:0;font-size:var(--type-row-title);font-weight:600;line-height:1.25;text-overflow:ellipsis;white-space:nowrap}
.panel-control{display:grid;place-items:center;flex:none;width:var(--control-compact-height);height:var(--control-compact-height);padding:0;border:0;border-radius:var(--radius-small);background:transparent;color:var(--muted)}
.panel-control:hover,.panel-control[aria-expanded=true],.panel-control[aria-pressed=true]{background:var(--raised);color:var(--text)}
.panel-control svg{width:18px;height:18px}
.panel-sidebar-layer{position:absolute;z-index:12;inset:60px 0 0;overflow:hidden;visibility:hidden;pointer-events:none;transition:visibility 0s var(--motion-disclosure)}
.panel-sidebar-scrim{position:absolute;inset:0;width:100%;height:100%;border:0;background:color-mix(in srgb,var(--canvas) 50%,transparent);opacity:0;transition:opacity var(--motion-disclosure) var(--motion-disclosure-ease)}
.panel-sidebar{position:relative;display:flex;flex-direction:column;width:min(264px,calc(100% - 32px));height:100%;padding:var(--space-3);overflow-y:auto;background:var(--sidebar-bg);box-shadow:var(--shadow);transform:translateX(-105%);transition:transform var(--motion-disclosure) var(--motion-disclosure-ease)}
.is-panel-sidebar-open>.panel-sidebar-layer{visibility:visible;pointer-events:auto;transition-delay:0s}
.is-panel-sidebar-open>.panel-sidebar-layer .panel-sidebar{transform:translateX(0)}
.is-panel-sidebar-open>.panel-sidebar-layer .panel-sidebar-scrim{opacity:1}
.panel-sidebar header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);margin-bottom:var(--space-3);padding-left:var(--space-2)}
.panel-sidebar strong{font-size:var(--type-row-title);font-weight:600}
.panel-sidebar nav{display:grid;gap:var(--space-1)}
.panel-nav-item{display:flex;align-items:center;gap:var(--space-3);width:100%;min-height:var(--control-height);padding:var(--space-2) var(--space-3);border:0;border-radius:var(--control-radius);background:transparent;color:var(--text);text-align:left;font-size:var(--type-control)}
.panel-nav-item:hover,.panel-nav-item[aria-current=page]{background:var(--raised)}
.panel-nav-item svg{flex:none;width:18px;height:18px}
.panel-nav-item span{min-width:0;overflow-wrap:anywhere}
.unofficial{color:var(--faint);font-size:var(--type-overline);letter-spacing:.14em;font-weight:750}
.mobile-menu{display:none}
.mobile-scrim{position:fixed;z-index:18;inset:0;background:rgba(0,0,0,.56)}
.app.is-sidebar-collapsed{grid-template-columns:var(--rail-w) minmax(0,1fr)}
.app.is-sidebar-collapsed .sidebar{display:none}
.app.is-sidebar-collapsed .sidebar-rail{display:flex}
.screen{display:none;min-height:100vh}
.screen.is-current{display:block}
.screen-kicker{color:var(--faint);font-size:var(--type-overline);font-weight:750;letter-spacing:.16em}
.home-screen{position:relative}
.home-center{position:absolute;top:22%;left:50%;width:min(752px,calc(100% - 54px));transform:translateX(-50%)}
.home-center>.screen-kicker{display:block;margin:0 0 24px;text-align:center}
.home-center h1,.imagine-content h1{margin:0 0 32px;text-align:center;font-size:24px;font-weight:600;line-height:1.35;letter-spacing:-.48px}
.composer{width:100%;min-height:min(128px,calc(var(--composer-input-room,170px) + 50px));border:0;border-radius:var(--composer-radius);background:var(--composer-fill);box-shadow:var(--composer-shadow);transition:background-color var(--motion-feedback) var(--motion-ease),min-height var(--motion-disclosure) var(--motion-disclosure-ease)}
.composer:focus-within{background:var(--composer-focus-fill)}
.composer textarea{display:block;width:100%;min-height:min(76px,var(--composer-input-room,170px));max-height:min(170px,var(--composer-input-room,170px));resize:none;padding:17px 18px 0;border:0;outline:0;background:transparent;color:var(--text);font-size:16px;line-height:1.5}
.composer textarea:focus-visible{outline:0;box-shadow:none}
.composer textarea::placeholder{color:var(--muted)}
.composer-controls{display:flex;align-items:center;gap:4px;min-height:50px;max-height:92px;padding:3px 11px 10px;overflow:hidden;transition:min-height var(--motion-disclosure) var(--motion-disclosure-ease),max-height var(--motion-disclosure) var(--motion-disclosure-ease),padding var(--motion-disclosure) var(--motion-disclosure-ease),opacity var(--motion-feedback) var(--motion-ease)}
.composer.is-thread{display:grid;grid-template-columns:var(--control-compact-height) minmax(0,1fr) var(--control-compact-height) var(--control-compact-height);align-items:end;gap:var(--space-1);min-height:var(--composer-compact-height);padding:calc((var(--composer-compact-height) - var(--control-compact-height))/2)}
.composer.is-thread textarea{grid-column:2;min-width:0;min-height:var(--control-compact-height);padding:var(--space-1) var(--space-2);opacity:1}
.composer.is-thread .composer-controls{display:contents}
.composer.is-thread .icon-button,.composer.is-thread .send-button{width:var(--control-compact-height);height:var(--control-compact-height)}
.composer.is-thread>[data-action="attach"]{grid-column:1}
.composer.is-thread .composer-more{grid-column:3}
.composer.is-thread .send-button{grid-column:4}
.composer-space{flex:1}
.composer .icon-button{width:32px;height:32px}
.composer .icon-button svg{width:17px;height:17px}
.mode-button{display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:5px 12px;border:0;border-radius:var(--radius-small);background:transparent;color:var(--muted);font-size:var(--type-control)}
.mode-button:hover{background:var(--raised);color:var(--text)}
button[aria-haspopup=menu]{border:0}
:is(.mode-button,button[aria-haspopup=menu]):focus-visible,:is(.mode-button,button[aria-haspopup=menu])[aria-expanded=true]{border:0;outline:0;box-shadow:none;background:var(--field-focus-fill);color:var(--text)}
.mode-button svg{width:13px;height:13px}
.select-control{position:relative;display:inline-grid;min-width:0;vertical-align:middle}
.select-control>select:not([multiple]){appearance:none;min-width:0;width:100%;padding-left:12px;padding-right:calc(var(--select-arrow-size) + var(--select-arrow-inset) + var(--select-arrow-gap))}
.select-control>svg{position:absolute;top:50%;right:var(--select-arrow-inset);width:var(--select-arrow-size);height:var(--select-arrow-size);transform:translateY(-50%);pointer-events:none;color:var(--muted)}
.select-control:has(select:disabled)>svg{opacity:.5}
.send-button{display:grid;place-items:center;width:37px;height:37px;border:0;border-radius:50%;background:var(--chat-user-fill);color:var(--chat-user-text)}
.send-button svg{width:18px;height:18px;stroke-width:2}
.send-button:hover:not(:disabled){transform:translateY(-1px)}
.send-button:disabled{background:color-mix(in srgb,var(--chat-user-fill) 50%,var(--composer-fill));opacity:1;cursor:not-allowed}
.canvas-note{margin:12px 0 0;text-align:center;color:var(--muted);font-size:var(--type-meta)}
.home-bottom{position:absolute;bottom:22px;left:32px;right:32px;display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--faint);font-size:var(--type-overline);letter-spacing:.13em}
.home-bottom button{border:0;background:transparent;color:var(--muted);font-size:var(--type-meta);letter-spacing:0}
.home-bottom button:hover{color:var(--text)}
.app:has(.conversation-screen.is-current){height:100dvh;min-height:0;overflow:clip}
.app:has(.conversation-screen.is-current) .main{height:100%;min-height:0}
.conversation-screen{display:none;flex-direction:column}
.conversation-screen.is-current{position:relative;display:flex;height:100%;min-height:0}
.conversation-chat{container:chat / inline-size;position:relative;display:flex;flex:1;flex-direction:column;min-width:0;min-height:0}
.conversation-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior-y:contain}
.conversation-column{width:min(760px,calc(100% - 48px));margin:0 auto;padding:28px 0 var(--composer-clearance,170px)}
.turn{display:flex;gap:14px;margin-bottom:28px}
.user-turn{justify-content:flex-end}
.user-turn p{max-width:78%;margin:0;padding:10px 16px;border-radius:20px 20px 5px 20px;background:var(--chat-user-fill);color:var(--chat-user-text);font-size:var(--type-body);white-space:pre-wrap;overflow-wrap:anywhere}
.assistant-mark{display:grid;place-items:center;width:27px;height:27px;flex:none;border:1px solid var(--line-strong);border-radius:50%}
.assistant-mark svg{width:17px;height:17px}
.turn-body{flex:1;min-width:0;font-size:var(--type-body);line-height:1.7}
.turn-body p{margin:0 0 14px}
.turn-body ul{margin:0 0 16px;padding-left:20px}
.turn-body li{margin-bottom:5px}
.source-row{display:flex;flex-wrap:wrap;gap:6px;margin:15px 0}
.source-pill{padding:5px 8px;border:1px solid var(--line-strong);border-radius:var(--radius-small);color:var(--muted);font-size:var(--type-meta)}
.code-block{margin:16px 0;border:0;border-radius:var(--radius-medium);overflow:hidden;background:var(--surface)}
.code-head{display:flex;align-items:center;justify-content:space-between;padding:8px 11px;border-bottom:1px solid var(--line);color:var(--faint);font:11px var(--mono);font-size:var(--type-meta)}
.code-head button,.turn-actions button{display:inline-flex;align-items:center;gap:4px;border:0;background:transparent;color:var(--muted)}
.code-head button svg,.turn-actions button svg{width:14px;height:14px}
.code-block pre{overflow:auto;margin:0;padding:14px;font:12px/1.5 var(--mono);font-size:var(--type-meta)}
.turn-actions{display:flex;gap:10px}
.turn-actions button{padding:4px 0;font-size:var(--type-meta)}
.turn-actions button:hover{color:var(--text)}
/* Live chat uses the shared composer, message, label and action components. */
.mac-status{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:var(--space-2);margin:0 0 var(--space-4);color:var(--muted);font-size:var(--type-meta);line-height:1.5}
.mac-status>span[data-mac-message]{min-width:0;overflow-wrap:anywhere}
.mac-status-dot{width:7px;height:7px;flex:none;border-radius:50%;background:var(--muted)}
.mac-status[data-state=ready] .mac-status-dot{background:var(--success)}
.conversation-mac-status{flex:none;justify-content:flex-start;margin:0;padding:var(--space-2) var(--space-6)}
.chat-context-note{flex:none;margin:0;padding:0 var(--space-6) var(--space-2);color:var(--muted);font-size:var(--type-meta)}
.mac-menu-note{margin:0;padding:var(--space-3);color:var(--muted);font-size:var(--type-meta);line-height:1.5}
.chat-attachments{display:flex;flex-wrap:wrap;gap:var(--space-2);padding:var(--space-3) var(--space-3) 0}
.chat-attachments:empty{display:none}
.composer.is-thread>.chat-attachments{grid-column:1/-1;padding:var(--space-1)}
.chat-attachment{display:flex;align-items:center;gap:var(--space-2);min-width:0;max-width:100%;padding:var(--space-1) var(--space-2);border-radius:var(--radius-small);background:var(--surface);font-size:var(--type-meta)}
.chat-attachment>svg{width:16px;height:16px;flex:none}
.chat-attachment>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-attachment>.icon-button{flex:none}
.user-turn:has(.chat-message-files){flex-direction:column;align-items:flex-end;gap:var(--space-2)}
.chat-message-files{margin:0;padding:0;list-style:none;color:var(--muted);font-size:var(--type-meta);overflow-wrap:anywhere}
.chat-answer-label,.chat-answer-status{color:var(--muted);font-size:var(--type-meta)}
.chat-answer{overflow-wrap:anywhere}
.chat-answer h3,.chat-answer h4,.chat-answer h5,.chat-answer h6{margin:var(--space-4) 0 var(--space-2);font-size:var(--type-body);font-weight:600;line-height:1.5}
.chat-answer blockquote{margin:var(--space-3) 0;padding:0 var(--space-4);border-left:2px solid var(--line-strong);color:var(--muted)}
.chat-answer :not(pre)>code{padding:2px var(--space-1);border-radius:var(--radius-small);background:var(--raised);font-family:var(--mono);font-size:var(--type-control)}
.chat-answer ol{margin:0 0 var(--space-4);padding-left:var(--space-6)}
.message-table-scroll{width:100%;overflow-x:auto;margin:var(--space-4) 0}
.message-table{width:100%;min-width:480px;border-collapse:collapse;font-size:var(--type-control)}
.message-table th,.message-table td{padding:var(--space-2) var(--space-3);border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.message-table th{font-weight:600;background:var(--raised)}
.process-card,.question-card,.connector-card{margin:0 0 14px 41px;padding:14px 16px;border:0;border-radius:var(--radius-medium);background:var(--surface);font-size:var(--type-control)}
.process-card{display:flex;align-items:center;gap:10px}
.process-dot,.status-dot{display:block;width:7px;height:7px;flex:none;border-radius:50%;background:var(--success)}
.process-card strong,.question-card strong,.connector-card strong{display:block;font-size:var(--type-control)}
.process-card p,.question-card p,.connector-card p{margin:3px 0 0;color:var(--muted);font-size:var(--type-meta)}
.process-card>span:last-child{margin-left:auto;color:var(--faint);font-size:var(--type-meta)}
.choice-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px}
.choice-row button{padding:5px 10px;border:1px solid var(--line-strong);border-radius:var(--radius-small);background:transparent;color:var(--muted);font-size:var(--type-control)}
.choice-row button:hover,.choice-row button.is-selected{background:var(--raised);color:var(--text);border-color:var(--blue)}
.connector-card{display:grid;grid-template-columns:18px minmax(0,1fr);gap:var(--space-3)}
.connector-card>svg{width:18px;height:1.5em;font-size:var(--type-control);align-self:start;color:var(--muted)}
.conversation-compose{position:absolute;z-index:3;left:50%;bottom:14px;width:min(760px,calc(100% - 48px));margin:0;transform:translateX(-50%);background:transparent;pointer-events:none}
.conversation-compose .composer{pointer-events:auto}
.conversation-compose>p.visually-hidden{margin:-1px}
.conversation-compose>p{margin:7px;text-align:center;color:var(--muted);font-size:var(--type-meta)}

/* Imagine */
.imagine-screen{overflow:auto}
.imagine-top{display:flex;align-items:center;justify-content:space-between;gap:15px;width:min(1050px,calc(100% - 48px));margin:75px auto 12px}
.imagine-top>div{display:flex;gap:12px}
.quiet-button,.outline-button,.white-button,.field-action{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:var(--button-height,var(--control-height));padding:0 var(--space-3);border:1px solid transparent;border-radius:var(--button-radius,var(--control-radius));background:transparent;color:var(--muted);white-space:nowrap;font-size:var(--type-control);font-weight:600}
.quiet-button:hover{background:var(--raised);color:var(--text)}
.outline-button{border-color:var(--line-strong);color:var(--text)}
.outline-button:hover{background:var(--raised)}
.white-button,.field-action{background:var(--text);color:var(--canvas)}
.white-button:hover,.field-action:hover{opacity:.85}
.white-button svg,.quiet-button svg,.outline-button svg,.field-action svg{width:16px;height:16px;flex:none}
.control-compact{--button-height:var(--control-compact-height);--button-radius:var(--radius-small)}
.control-row{display:flex;align-items:flex-end;flex-wrap:wrap;gap:var(--space-3)}
.control-row>*{flex:1 1 160px;min-width:0}
.control-row>.control-row-main{flex:3 1 260px}
.action-field{display:flex;align-items:center;gap:var(--control-inset);min-width:0;min-height:var(--control-height);padding:var(--control-inset);border:0;border-radius:var(--control-radius);background:var(--canvas)}
.action-field:focus-within{background:var(--field-focus-fill)}
.action-field-input{flex:1;min-width:0;width:0;min-height:calc(var(--control-height) - 2 * var(--control-inset));padding:0 var(--space-2);border:0;outline:0;box-shadow:none;background:transparent;color:var(--text);font-size:var(--type-control)}
.action-field-input::placeholder{color:var(--muted)}
.action-field-input:focus-visible{outline:0;box-shadow:none}
.field-action{--button-height:calc(var(--control-height) - 2 * var(--control-inset));--button-radius:calc(var(--control-radius) - var(--control-inset));flex:none;border:0}
.action-feedback{min-inline-size:var(--action-feedback-width);transition:background var(--motion-feedback) var(--motion-ease),color var(--motion-feedback) var(--motion-ease)}
.action-feedback[data-action-state=success]{background:var(--label-success-fill);color:var(--label-ink);border-color:transparent}
.action-feedback[data-action-state=error]{background:var(--label-danger-fill);color:var(--label-ink);border-color:transparent}
.action-feedback[data-action-state=pending]{cursor:progress}
.action-feedback[data-action-state] svg{width:16px;height:16px;flex:none}
.imagine-content{width:min(752px,calc(100% - 48px));margin:60px auto 50px}
.imagine-content h1{margin-bottom:31px}
.segmented{display:inline-flex;gap:2px;padding:3px;border-radius:var(--radius-medium);background:var(--raised)}
.segmented button{min-height:32px;padding:4px 10px;border:0;border-radius:var(--radius-small);background:transparent;color:var(--muted);font-size:var(--type-control);white-space:nowrap}
.segmented button.is-selected{background:var(--surface);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.segmented.compact button{padding:4px 8px;font-size:var(--type-meta)}
.section-explainer{margin:11px 0 29px;color:var(--muted);text-align:center;font-size:var(--type-meta)}
.template-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:180px;gap:10px}
.template-card{--card-tone:var(--palette-violet);position:relative;overflow:hidden;border:0;border-radius:var(--radius-card);background:radial-gradient(ellipse at 38% 30%,hsl(from var(--card-tone) h s calc(l * 1.05)),var(--card-tone) 32%,hsl(from var(--card-tone) h s calc(l * .42)) 100%);color:#fff;text-align:left}
.template-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.template-card:hover{filter:brightness(1.12)}
.template-card>span{position:absolute;z-index:2;left:14px;bottom:13px;font-size:var(--type-control);font-weight:600}
.template-card small{padding:2px 4px;border-radius:4px;background:rgba(0,0,0,.35);font-size:var(--type-overline)}
.template-card.tall{grid-row:span 2}

/* Library */
.library-wrap{width:min(1060px,calc(100% - 48px));margin:56px auto 70px}
.library-top{display:flex;align-items:end;justify-content:space-between;gap:20px;min-height:70px}
.library-top h1{margin:4px 0 0;font-size:29px;letter-spacing:-.04em;font-weight:600}
.library-actions{display:flex;align-items:center;gap:7px}
.library-actions .white-button{margin-left:7px}
.inline-search{display:flex;align-items:center;flex:none;min-height:40px;border:0;border-radius:var(--composer-radius);background:transparent;transition:background-color var(--motion-disclosure) var(--motion-disclosure-ease),box-shadow var(--motion-disclosure) var(--motion-disclosure-ease)}
.inline-search.is-open{background:var(--composer-fill);box-shadow:var(--composer-shadow)}
.inline-search.is-open:focus-within{background:var(--composer-focus-fill)}
.inline-search-field{width:0;opacity:0;overflow:hidden;transition:width var(--motion-disclosure) var(--motion-disclosure-ease),opacity var(--motion-disclosure) var(--motion-disclosure-ease)}
.inline-search.is-open .inline-search-field{width:clamp(100px,18vw,240px);opacity:1}
.inline-search input{display:block;width:100%;min-width:0;min-height:40px;padding:8px 4px 8px 16px;border:0;outline:0;box-shadow:none;background:transparent;color:var(--text);font-size:var(--type-control)}
.inline-search input::placeholder{color:var(--muted)}
.inline-search input:focus-visible{outline:0;box-shadow:none}
.inline-search>.icon-button{flex:none;width:40px;height:40px;border-radius:var(--composer-radius)}
.inline-search>.icon-button:focus-visible{outline:0;background:var(--composer-focus-fill);color:var(--text)}
.library-tabs{display:flex;align-items:center;gap:6px;margin:15px 0 27px;overflow-x:auto}
.library-tabs button{min-height:33px;padding:5px 13px;border:0;border-radius:999px;background:transparent;color:var(--muted);font-size:var(--type-control)}
.library-tabs button.is-selected{background:var(--raised);color:var(--text)}
.library-controls{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:16px;font-size:13px;font-weight:600}
.library-controls>div{display:flex;align-items:center;gap:5px}
.library-controls select,.library-controls input{max-width:160px;min-height:33px;padding:5px 8px;border:0;border-radius:var(--radius-small);outline:0;box-shadow:none;background:var(--surface);color:var(--muted);font-size:var(--type-control)}
.library-controls select:focus,.library-controls input:focus{background:var(--field-focus-fill)}
.library-controls .icon-button{width:30px;height:30px}
.library-controls .icon-button.is-selected{background:var(--raised);color:var(--text)}
.library-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px 15px}
.asset-card{display:block;min-width:0;padding:0;border:0;background:transparent;color:var(--text);text-align:left}
.asset-art{--card-tone:var(--palette-violet);position:relative;display:grid;place-items:center;overflow:hidden;height:156px;margin-bottom:8px;border:0;border-radius:var(--radius-medium);background:radial-gradient(circle at 20% 10%,hsl(from var(--card-tone) h s calc(l * 1.05)),var(--card-tone) 42%,hsl(from var(--card-tone) h s calc(l * .56)) 100%);color:rgba(255,255,255,.58);transition:transform .16s ease}
.asset-art img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.asset-art svg{width:29px;height:29px}
.asset-card:hover .asset-art{transform:translateY(-2px)}
.asset-card:focus-visible{outline:0;background:var(--raised);border-radius:var(--radius-medium)}
.asset-card:focus-visible strong{ text-decoration:underline;text-underline-offset:4px }
.template-card:focus-visible{outline:0}
.template-card:focus-visible>span{text-decoration:underline;text-underline-offset:4px}
.asset-card strong,.asset-card small{display:block;margin-left:10px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.asset-card strong{font-size:var(--type-control);font-weight:500}
.asset-card small{color:var(--faint);font-size:var(--type-meta)}
.library-grid.is-list{grid-template-columns:1fr;gap:0}
.library-grid.is-list .asset-card{display:flex;align-items:center;gap:12px;min-height:66px;padding:7px 5px;border-bottom:1px solid var(--line)}
.library-grid.is-list .asset-art{width:73px;height:51px;flex:none;margin:0}
.library-grid.is-list .asset-art svg{width:17px;height:17px}
.library-grid.is-list .asset-card strong{flex:1}
.library-grid.is-list .asset-card small{width:120px}
.empty-state{display:grid;place-items:center;min-height:240px;color:var(--muted);text-align:center}
.empty-state svg{width:29px;height:29px;margin-bottom:12px}
.empty-state strong{color:var(--text);font-size:14px}
.empty-state p{margin:3px 0;font-size:var(--type-control)}

/* Secondary product patterns */
.simple-wrap,.project-wrap{width:min(920px,calc(100% - 48px));margin:100px auto 60px}
.simple-wrap h1,.project-wrap h1{margin:6px 0 8px;font-size:36px;line-height:1.15;letter-spacing:-.05em;font-weight:600}
.simple-wrap>p,.project-wrap>p{max-width:620px;margin:0 0 30px;color:var(--muted);font-size:15px}
.simple-list{display:grid;gap:9px;margin:30px 0}
.simple-list>div{display:flex;align-items:center;gap:12px;min-height:64px;padding:12px 18px;border:0;border-radius:var(--radius-medium);background:var(--surface)}
.simple-list strong{font-size:var(--type-control);font-weight:600}
.simple-list small{margin-left:auto;color:var(--faint);font-size:var(--type-meta)}
.status-dot.muted{background:var(--faint)}
.simple-list svg{color:var(--muted)}
.bot-hero{display:flex;align-items:center;gap:15px;margin:10px 0 30px}
.bot-hero h1{margin:0}
.bot-hero p{margin:3px 0 0;color:var(--muted)}
.bot-avatar.big{width:54px;height:54px;font-size:29px}
.project-layout{display:grid;grid-template-columns:240px minmax(0,1fr);min-height:350px;border:0;border-radius:var(--radius-card);overflow:hidden;background:var(--surface)}
.file-tree{padding:12px;border-right:1px solid var(--line)}
.file-tree-head,.file-panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:38px;margin-bottom:8px}
.file-tree-head strong,.file-panel-head strong{font-size:var(--type-meta)}
.file-tree button:not(.icon-button){display:flex;align-items:center;gap:8px;width:100%;min-height:35px;padding:6px 8px;border:0;border-radius:var(--radius-small);background:transparent;color:var(--muted);text-align:left;font-size:var(--type-control)}
.file-tree button:hover,.file-tree button.is-selected{background:var(--raised);color:var(--text)}
.file-tree button svg{width:15px;height:15px}
.file-panel{padding:12px 16px}
.file-panel-body{display:grid;place-items:center;min-height:260px;border:0;border-radius:10px;color:var(--faint);text-align:center;font-size:var(--type-control)}
.file-panel-body.is-source{display:block;padding:18px;font:12px/1.6 var(--mono);white-space:pre-wrap}

/* Kit pages */
.kit-wrap{width:min(1060px,calc(100% - 48px));margin:94px auto 80px}
.kit-hero{max-width:780px;margin-bottom:38px}
.kit-hero h1,.kit-screen h1{margin:10px 0 15px;font-size:clamp(42px,5vw,72px);line-height:1.04;letter-spacing:-.065em;font-weight:600}
.kit-hero p,.kit-lead{max-width:720px;margin:0;color:var(--muted);font-size:17px;line-height:1.6}
.kit-hero-links{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:25px}
.kit-grid,.component-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}
.kit-card{min-width:0;padding:var(--space-6);border:0;border-radius:var(--radius-card);background:var(--surface)}
.kit-card.wide{grid-column:1/-1}
.kit-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:20px;color:var(--faint);font-size:var(--type-overline);font-weight:750;letter-spacing:.14em}
.kit-card h2{margin:0 0 22px;font-size:25px;font-weight:600;letter-spacing:-.035em}
.swatch-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.swatch-grid>div{min-width:0}
.swatch-grid span{display:block;height:74px;border:0;border-radius:var(--radius-medium)}
.swatch-grid strong,.swatch-grid code{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.swatch-grid strong{margin-top:9px;font-size:var(--type-control)}
.swatch-grid code{color:var(--faint);font:10px var(--mono);font-size:var(--type-meta)}
.kit-small{margin:18px 0 0;color:var(--muted);font-size:var(--type-meta);line-height:1.6}
.type-display{font-size:30px;line-height:1.18;letter-spacing:-.04em;font-weight:600}
.type-body{max-width:370px;margin:19px 0;color:var(--muted);font-size:var(--type-body)}
.type-caption{color:var(--faint);font-size:var(--type-overline);letter-spacing:.15em}
.radius-row{display:flex;flex-wrap:wrap;gap:8px}
.radius-row span{display:grid;place-items:center;width:52px;height:52px;border:0;background:var(--raised);font-size:var(--type-meta)}
.radius-row span:nth-child(1){border-radius:var(--radius-small)}
.radius-row span:nth-child(2){border-radius:var(--radius-medium)}
.radius-row span:nth-child(3){border-radius:var(--radius-card)}
.radius-row span:nth-child(4){border-radius:var(--radius-dialog)}
.radius-row span:nth-child(5){border-radius:50%}
.kit-lead{margin-bottom:30px}
.component-grid .kit-card{min-height:220px}
.component-row{display:flex;flex-wrap:wrap;align-items:center;gap:7px}
.component-row .outline-button svg{width:13px;height:13px}
.component-row kbd{font:10px var(--mono);color:var(--faint);font-size:var(--type-overline)}
.field-label{display:block;margin:0 0 8px;color:var(--muted);font-size:var(--type-meta)}
.field{display:flex;align-items:center;gap:8px;min-height:var(--control-height);padding:0 var(--space-3);border:0;border-radius:var(--control-radius);background:var(--raised)}
.field:focus-within{background:var(--field-focus-fill)}
.field svg{width:16px;height:16px;color:var(--muted)}
.field input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--text);font-size:var(--type-control)}
.field input:focus-visible{outline:0;box-shadow:none}
.component-segments{margin-top:16px}
.status-chip{display:inline-flex;align-items:center;min-height:27px;padding:4px 9px;border-radius:999px;background:var(--label-neutral-fill);color:var(--label-ink);font-size:var(--type-meta);font-weight:600}
.status-chip.good{background:var(--label-success-fill)}
.status-chip.caution{background:var(--label-danger-fill)}
.object-strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px}
.object-strip>div{min-width:0;padding:14px;border:0;border-radius:var(--radius-medium)}
.object-strip svg{width:18px;height:18px;margin-bottom:18px;color:var(--muted)}
.object-strip strong,.object-strip small{display:block}
.object-strip strong{font-size:var(--type-control)}
.object-strip small{margin-top:3px;color:var(--faint);font-size:var(--type-meta)}
.rules-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3);margin-bottom:28px}
.rules-grid article{min-height:205px;padding:22px;border:0;border-radius:var(--radius-card);background:var(--surface)}
.rules-grid article>span{color:var(--blue);font:11px var(--mono);font-size:var(--type-overline)}
.rules-grid :is(h2,h3){margin:25px 0 7px;font-size:19px;letter-spacing:-.03em;overflow-wrap:anywhere}
.rules-grid p{margin:0;color:var(--muted);font-size:var(--type-control);line-height:1.6}
.evidence-panel{display:grid;grid-template-columns:1fr 1.4fr;gap:35px;padding:28px;border:0;border-radius:var(--radius-card);background:var(--raised)}
.evidence-panel h2{font-size:28px;letter-spacing:-.04em}
.evidence-list p{margin:0 0 13px;color:var(--muted);font-size:var(--type-control);line-height:1.65}
.evidence-list strong{color:var(--text)}
.evidence-list code{font:11px var(--mono);font-size:var(--type-meta)}

/* Shared save feedback and read-only media preview. */
.storage-notice{margin:0;padding:var(--space-3) var(--space-4);background:var(--raised);color:var(--text);font-size:var(--type-control)}
.storage-caption{flex:none;margin:0;padding:0 var(--space-6);color:var(--muted);font-size:var(--type-meta)}
.asset-dialog{width:min(760px,calc(100vw - 32px));max-height:85dvh;padding:var(--space-6);overflow:auto;border:0;border-radius:var(--radius-dialog);background:var(--surface);color:var(--text);box-shadow:var(--shadow)}
.asset-dialog::backdrop{background:rgba(0,0,0,.55)}
.asset-dialog header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-4)}
.asset-dialog h2{margin:0;font-size:24px;font-weight:600}
.asset-dialog img{display:block;width:100%;max-height:60dvh;object-fit:contain;border-radius:var(--radius-medium)}
.asset-dialog p{color:var(--muted);font-size:var(--type-control)}
/* Floating surfaces */
.popover{position:fixed;z-index:60;width:230px;max-height:calc(100dvh - 16px);overflow-y:auto;padding:7px;border:0;border-radius:var(--radius-card);background:var(--surface);box-shadow:var(--shadow)}
.popover-label{display:block;padding:7px 10px;color:var(--faint);font-size:var(--type-overline);font-weight:750;letter-spacing:.13em}
.popover>button,.popover-group>button{display:flex;align-items:center;gap:10px;width:100%;min-height:33px;padding:6px 10px;border:0;border-radius:var(--radius-small);background:transparent;color:var(--text);text-align:left;font-size:var(--type-control)}
.popover>button:hover,.popover>button[aria-checked=true],.popover-group>button:hover{background:var(--raised)}
.popover button:focus-visible{border:0;outline:0;box-shadow:none;background:var(--field-focus-fill)}
.popover>button svg,.popover-group>button svg{width:16px;height:16px;color:var(--muted)}
.popover>button small,.popover-group>button small{margin-left:auto;color:var(--faint);font-size:var(--type-meta)}
.popover>button .menu-check{margin-left:auto;color:var(--text)}
.popover-group{border-top:1px solid var(--line);margin-top:var(--space-2);padding-top:var(--space-2)}
.menu-symbol{width:18px;color:var(--muted);font-size:16px;text-align:center}
.popover-divider{height:1px;margin:7px 4px;background:var(--line)}
.theme-segments{display:flex;margin:5px}
.theme-segments button{flex:1}
.search-dialog{position:fixed;width:min(1000px,calc(100vw - 28px));height:min(580px,calc(100vh - 70px));max-width:none;max-height:none;padding:0;border:1px solid var(--line-strong);border-radius:var(--radius-dialog);background:var(--canvas);color:var(--text);box-shadow:var(--shadow);overflow:hidden}
.search-dialog::backdrop{background:rgba(0,0,0,.55);backdrop-filter:blur(5px)}
.search-head{display:flex;align-items:center;gap:10px;height:58px;padding:0 18px;border-bottom:1px solid var(--line)}
.search-head:focus-within{background:var(--field-focus-fill)}
.search-head>svg{width:18px;height:18px;color:var(--muted)}
.search-head>input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--text);font-size:var(--type-body)}
.search-head>input:focus-visible{outline:0;box-shadow:none}
.search-tabs{display:flex;gap:3px}
.search-tabs button{padding:6px 11px;border:0;border-radius:999px;background:transparent;color:var(--muted);font-size:var(--type-control)}
.search-tabs button.is-selected{background:var(--raised);color:var(--text)}
.search-close{display:none}
.search-body{display:grid;grid-template-columns:40% 60%;height:calc(100% - 88px)}
.search-results{overflow-y:auto;padding:16px;border-right:1px solid var(--line)}
.search-group-label{display:flex;align-items:center;justify-content:space-between;margin:2px 8px 8px;color:var(--faint);font-size:var(--type-overline)}
.search-results button{display:flex;align-items:center;justify-content:space-between;gap:15px;width:100%;min-height:44px;padding:8px 11px;border:0;border-radius:10px;background:transparent;color:var(--text);text-align:left;font-size:var(--type-control)}
.search-results button:hover,.search-results button.is-selected{background:var(--raised)}
.search-results button span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.search-results button small{flex:none;color:var(--faint);font-size:var(--type-meta)}
.search-preview{display:grid;place-items:center;padding:25px;color:var(--faint);text-align:center;font-size:13px}
.search-preview.is-preview{display:block;color:var(--text);text-align:left}
.search-preview h3{font-size:20px}
.search-preview p{max-width:330px;color:var(--muted);font-size:var(--type-control)}
.search-foot{display:flex;align-items:center;justify-content:space-between;height:30px;padding:0 16px;border-top:1px solid var(--line);color:var(--faint);font-size:var(--type-overline)}
.toast{position:fixed;z-index:80;bottom:24px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:12px;max-width:calc(100vw - 30px);min-height:44px;padding:5px 8px 5px 15px;border:1px solid var(--line-strong);border-radius:var(--radius-medium);background:var(--raised);box-shadow:var(--shadow);color:var(--text);font-size:var(--type-control)}
.toast>button:not(.icon-button){border:0;background:transparent;color:var(--blue);text-decoration:underline;font-weight:650}

@media(max-width:1100px){.library-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.swatch-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.object-strip{grid-template-columns:repeat(3,minmax(0,1fr))}
.rules-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:820px){.app{display:block}
.sidebar{position:fixed;z-index:20;left:0;top:0;width:var(--sidebar-w);transform:translateX(-100%);transition:transform .2s ease;box-shadow:var(--shadow)}
.app.is-sidebar-open .sidebar{transform:translateX(0)}
.app.is-sidebar-open .mobile-scrim{display:block!important}
.app.is-sidebar-collapsed{display:block}
.app.is-sidebar-collapsed .sidebar{display:flex;width:var(--sidebar-w);padding:10px;border-right:1px solid var(--line)}
.app.is-sidebar-collapsed .sidebar-rail{display:none}
.mobile-menu{display:grid}
.main{width:100%}
.home-center{top:25%}
.library-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:640px){.unofficial{display:none}
.conversation-mac-status{padding-left:var(--space-4);padding-right:var(--space-4)}
.chat-context-note{padding-left:var(--space-4);padding-right:var(--space-4)}
.home-center{top:22%;width:calc(100% - 30px)}
.home-center h1,.imagine-content h1{font-size:23px}
.composer-controls{gap:2px;padding-left:8px;padding-right:8px}
.imagine-content,.library-wrap,.kit-wrap,.simple-wrap,.project-wrap{width:calc(100% - 30px)}
.imagine-content{margin-top:46px}
.imagine-top{width:calc(100% - 30px);margin-top:69px}
.imagine-top .screen-kicker{display:none}
.imagine-screen .composer-controls{flex-wrap:wrap;padding-top:5px}
.imagine-screen .segmented.compact{display:none}
.template-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:150px}
.template-card.tall{grid-row:span 1}
.library-top{align-items:center;flex-wrap:wrap}
.library-top h1{font-size:25px}
.library-actions{margin-left:auto}
.library-actions>[data-action="view-options"]{display:none}
.library-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 10px}
.asset-art{height:120px}
.kit-grid,.component-grid,.rules-grid{grid-template-columns:1fr}
.kit-card{padding:20px}
.kit-card.wide{grid-column:auto}
.swatch-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.object-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
.evidence-panel{grid-template-columns:1fr}
.project-layout{grid-template-columns:1fr}
.file-tree{border-right:0;border-bottom:1px solid var(--line)}
.simple-list>div{flex-wrap:wrap}
.simple-list small{width:100%;margin-left:19px}
.search-body{grid-template-columns:1fr}
.search-results{border-right:0}
.search-preview,.search-preview.is-preview{display:none}
.search-close{display:grid}
.search-foot{display:none}
.search-dialog{height:min(560px,calc(100vh - 30px))}
.search-body{height:calc(100% - 58px)}
.conversation-column,.conversation-compose{width:calc(100% - 30px)}
.process-card,.question-card,.connector-card{margin-left:0}
.home-bottom{left:15px;right:15px}
.home-bottom>span{display:none}}
@media(max-width:400px){.library-grid{grid-template-columns:1fr}
.asset-art{height:170px}
.imagine-screen .segmented button{padding:4px 6px;font-size:var(--type-meta)}
.swatch-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* Shared type and spacing values are defined in the owning component rules above. */
.type-scale,.spacing-scale { display: grid; gap: var(--space-2); }
.type-scale>div,.spacing-scale>div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 34px;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--line);
}
.type-scale>div:last-child,.spacing-scale>div:last-child { border-bottom: 0; }
.type-scale strong { font-weight: 500; }
.type-scale small,.spacing-scale span { color: var(--muted); font-size: var(--type-meta); text-align: right; }
.type-scale .type-sample-title { font-size: 24px; line-height: 1.2; font-weight: 600; }
.type-scale .type-sample-row { font-size: var(--type-row-title); font-weight: 600; }
.type-sample-body { font-size: var(--type-body); }
.type-sample-control { font-size: var(--type-control); }
.type-sample-meta { font-size: var(--type-meta); }
.type-scale .type-sample-overline { font-size: var(--type-overline); font-weight: 700; letter-spacing: .12em; }
.spacing-scale strong { color: var(--text); font: 600 15px var(--mono); }
.card-rule-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--space-3); }
.card-rule-grid>div { padding: var(--space-4); border:0; border-radius: 12px; background: var(--raised); }
.card-rule-grid strong,.card-rule-grid span { display: block; }
.card-rule-grid strong { font-size: var(--type-control); }
.card-rule-grid span { margin-top: var(--space-1); color: var(--muted); font-size: var(--type-meta); }
.card-rule-grid p { margin: var(--space-3) 0 0; color: var(--muted); font-size: var(--type-control); line-height: 1.6; }
@media(max-width:640px) { .card-rule-grid { grid-template-columns: 1fr; } }

/* Demo cards use only the fixed eight-hue spectrum; neutral UI stays quiet. */
.template-one { --card-tone: var(--palette-orange); }
.template-two { --card-tone: var(--palette-green); }
.template-three { --card-tone: var(--palette-blue); }
.template-four { --card-tone: var(--palette-magenta); }
.template-five { --card-tone: var(--palette-yellow); }
.art-one { --card-tone: var(--palette-red); }
.art-two { --card-tone: var(--palette-orange); }
.art-three { --card-tone: var(--palette-yellow); }
.art-four { --card-tone: var(--palette-green); }
.art-five { --card-tone: var(--palette-teal); }
.art-six { --card-tone: var(--palette-blue); }
.art-seven { --card-tone: var(--palette-violet); }
.art-eight { --card-tone: var(--palette-magenta); }
.palette-kicker { margin: 24px 0 12px; color: var(--muted); font-size: var(--type-meta); font-weight: 700; letter-spacing: .08em; }
.accent-swatch-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
@media(max-width:640px) { .accent-swatch-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
/* Shared alignment and filled semantic-label primitives for every kit component. */
button > svg { align-self: center; vertical-align: middle; }
input[type="checkbox"] { display: block; margin: auto; vertical-align: middle; }
.semantic-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: var(--label-fill, var(--label-neutral-fill));
  color: var(--label-text, var(--label-ink));
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
}
.semantic-label[data-tone=info] {
  --label-fill: var(--label-info-fill);
  --label-text: var(--label-info-ink);
}

/* A chat column responds to its panel width, not the whole browser. */
@container chat (max-width:560px){
  .conversation-column,.conversation-screen.is-lab .conversation-column{width:calc(100% - 32px)}
  .conversation-compose{width:calc(100% - 32px)}
  .assistant-mark{display:none}
  .turn{display:block}
  .user-turn p,.lab-request p{max-width:100%}
  .process-card,.question-card,.connector-card{margin-left:0}
    .lab-widget-inline-preview{flex-wrap:wrap;padding:var(--space-4)}
}
@media(prefers-reduced-motion:reduce){
  .composer,.composer textarea,.composer-controls{transition:none}
}