/* 8x Makers art direction, adapted for creative infrastructure. */
:root { --stage:#f5f8f7; --panel:#fff; --panel-2:#f0f5f4; --text:#102628; --text-2:#405c60; --text-3:#526b70; --line:#d7e2e1; --line-strong:#a8bfbe; --accent:#08778a; --cta:#08778a; --cta-hover:#066475; --fs-body:14px; --fs-control:13px; --fs-section:18px; --control-height:40px; --radius-panel:16px; }
:root[data-theme="dark"] { --stage:#080d10; --panel:#10181c; --panel-2:#0c1418; --raised:#18282d; --text:#eff9f9; --text-2:#b0c1c5; --text-3:#8fa8ae; --line:#26373d; --line-strong:#3c585f; --accent:#69e9f3; --cta:#69e9f3; --cta-ink:#062d32; --cta-hover:#a1f4f9; --accent-soft:#153138; }
html { scroll-behavior:smooth; scroll-padding-top:24px; }
header { min-height:80px; padding:16px max(24px,calc((100vw - 1280px)/2)); background:var(--stage); }
.logotype { height:23px; }
header .product { font-size:13px; }
main { max-width:1280px; padding:0 32px 64px; }
h1,h2,h3 { letter-spacing:-.035em; }
h2 { font-size:28px; line-height:1.25; font-weight:600; }
h3 { font-size:17px; font-weight:600; line-height:1.4; }
p { line-height:1.7; }
.eyebrow { font:500 10px/1.5 var(--font-mono); letter-spacing:.15em; color:var(--accent); }
button,.primary,.secondary { border-radius:999px; }
.agent-hero { position:relative; isolation:isolate; min-height:430px; margin:0 -32px; overflow:hidden; color:#eff9f9; background:#080d10; border-bottom:1px solid #26373d; }
.makers-art { position:absolute; inset:0 0 0 auto; width:72%; height:100%; object-fit:cover; object-position:68% 15%; z-index:-2; }
.agent-hero::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,#080d10 14%,rgba(8,13,16,.98) 30%,rgba(8,13,16,.25) 62%,rgba(8,13,16,.05)),linear-gradient(0deg,#080d10 0%,transparent 25%); }
.hero-copy { max-width:650px; padding:38px 48px 30px; }
.hero-copy .eyebrow { color:#69e9f3; font-size:10px; }
.hero-copy h1 { font-size:clamp(42px,4.8vw,62px); line-height:1.04; font-weight:600; letter-spacing:-.055em; margin:22px 0; }
.hero-copy h1 span,.hero-copy h1 em { display:block; }
.hero-copy h1 em { color:#69e9f3; font-style:normal; }
.hero-lede { max-width:390px; font-size:15px; line-height:1.8; color:#c6d6d9; }
.hero-actions { display:flex; gap:24px; align-items:center; flex-wrap:wrap; margin-top:28px; }
.hero-actions a,.hero-actions button { font-size:13px; text-decoration:none; color:#eff9f9; }
.hero-actions .primary { display:inline-flex; gap:24px; padding:13px 23px; background:#69e9f3; color:#062d32; font-weight:600; min-height:48px; }
.hero-note { font:11px/1.6 var(--font-mono); color:#a7b9bd; margin-top:22px; }
.connection-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:24px; }
.connection-grid article { padding:0 28px; border-left:1px solid var(--line); min-width:0; }
.connection-grid article:first-child { padding-left:0; border:0; }
.connection-grid article:last-child { padding-right:0; }
.step-index { font:10px var(--font-mono); color:var(--text-3); letter-spacing:.1em; }
.connection-grid h3 { margin:15px 0 10px; }
.connection-grid p { color:var(--text-2); font-size:13px; }
.connection-link { display:inline-block; color:var(--accent); text-underline-offset:4px; margin-top:18px; font-weight:500; }
.connection-grid code { display:block; overflow-wrap:anywhere; white-space:normal; color:var(--text-2); font:11px/1.7 var(--font-mono); padding:12px 0; }
.connection-grid details { margin-top:14px; }
.connection-grid summary { cursor:pointer; font-size:12px; color:var(--text-2); min-height:30px; }
.agent-section-heading { padding-top:40px; margin-bottom:24px; }
.agent-section-heading h2 { margin:8px 0; }
.login-layout { display:block; max-width:none; margin:0 0 40px; }
.sign-in { max-width:640px; }
.sign-in .primary { max-width:340px; }
.agent-workbench { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:20px; align-items:start; }
.agent-console,.task-panel { min-width:0; }
.console-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 20px; border-bottom:1px solid var(--line); }
.agent-name { display:flex; align-items:center; gap:8px; }
.agent-name strong { font-weight:600; }
.agent-messages { height:280px; overflow-y:auto; padding:22px; scroll-behavior:auto; }
.agent-empty { color:var(--text-3); font-size:18px; max-width:380px; margin:52px auto; text-align:center; }
.agent-message { margin-bottom:22px; overflow-wrap:anywhere; }
.agent-message .message-role { display:block; font-size:11px; font-weight:600; color:var(--accent); margin-bottom:6px; }
.agent-message p { white-space:pre-wrap; margin:0; line-height:1.7; font-size:14px; }
.agent-message[data-role="user"] { padding:14px 16px; border-radius:12px; background:var(--accent-soft); margin-left:32px; }
.agent-transcript { position:relative; min-width:0; }
.agent-messages { height:clamp(320px,50vh,560px); overscroll-behavior:contain; overflow-anchor:none; }
#agent-latest { position:absolute; bottom:12px; left:50%; transform:translateX(-50%); min-height:32px; padding:6px 14px; font-size:12px; background:var(--panel); box-shadow:0 3px 16px #0002; white-space:nowrap; }
.agent-process { border:1px solid var(--line); border-radius:10px; background:var(--panel-2); margin:8px 0 16px; color:var(--text-2); }
.agent-process summary { display:flex; align-items:center; gap:8px; padding:10px 12px; cursor:pointer; font-size:12px; list-style:none; }
.agent-process summary::-webkit-details-marker { display:none; }
.agent-process summary::after { content:'⌄'; margin-left:auto; transform:rotate(-90deg); font-size:15px; }
.agent-process[open] summary::after { transform:none; }
.process-summary { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.process-dot { width:7px; height:7px; flex:none; border-radius:50%; background:var(--text-3); }
.agent-process[data-status="streaming"] .process-dot { background:var(--accent); animation:process-pulse 1.6s ease-in-out infinite; }
.agent-process[data-status="failed"] .process-dot { background:var(--danger); }
.process-detail { max-height:220px; overflow:auto; padding:12px; border-top:1px solid var(--line); overscroll-behavior:contain; }
.thinking-text { white-space:pre-wrap; line-height:1.7; font-size:12px; color:var(--text-3); }
.process-tools { padding:0; margin:10px 0 0; list-style:none; }
.process-tools li { display:flex; gap:16px; justify-content:space-between; align-items:baseline; font-size:12px; padding:6px 0; }
.tool-state { color:var(--text-3); flex:none; font-size:11px; }
.process-tools li[data-status="error"] .tool-state { color:var(--danger); }
.agent-message .process-waiting { font-size:12px; color:var(--text-3); }
.agent-markdown { font-size:14px; line-height:1.75; min-width:0; color:var(--text); }
.agent-markdown > :first-child { margin-top:0; }
.agent-markdown > :last-child { margin-bottom:0; }
.agent-message .agent-markdown p { white-space:normal; margin:0 0 14px; line-height:1.75; }
.agent-markdown h1,.agent-markdown h2,.agent-markdown h3,.agent-markdown h4,.agent-markdown h5,.agent-markdown h6 { font-weight:600; letter-spacing:-.015em; line-height:1.4; margin:22px 0 10px; }
.agent-markdown h1 { font-size:23px; }.agent-markdown h2 { font-size:20px; }.agent-markdown h3 { font-size:17px; }.agent-markdown h4,.agent-markdown h5,.agent-markdown h6 { font-size:15px; }
.agent-markdown ul,.agent-markdown ol { margin:10px 0 16px; padding-left:24px; }
.agent-markdown li { margin:5px 0; padding-left:3px; }
.agent-markdown li p { margin:4px 0; }
.agent-markdown li > ul,.agent-markdown li > ol { margin-block:6px; }
.agent-markdown blockquote { margin:14px 0; padding:2px 0 2px 14px; border-left:3px solid var(--line-strong); color:var(--text-2); }
.agent-markdown blockquote p:last-child { margin-bottom:0; }
.agent-markdown hr { border:0; border-top:1px solid var(--line); margin:22px 0; }
.agent-markdown a { color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
.agent-markdown code { font:12px/1.65 var(--font-mono); background:var(--panel-2); border:1px solid var(--line); padding:2px 5px; border-radius:5px; overflow-wrap:anywhere; }
.markdown-code { border:1px solid var(--line); border-radius:10px; margin:14px 0; overflow:hidden; background:var(--panel-2); }
.code-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:6px 12px; border-bottom:1px solid var(--line); font:11px var(--font-mono); color:var(--text-3); }
.code-heading button { font:11px var(--font-ui); padding:4px 6px; min-height:28px; border-radius:6px; }
.agent-markdown pre { margin:0; padding:14px; overflow:auto; white-space:pre; tab-size:2; }
.agent-markdown pre code { padding:0; border:0; background:none; border-radius:0; overflow-wrap:normal; color:var(--text); }
.markdown-table { max-width:100%; overflow-x:auto; margin:16px 0; border:1px solid var(--line); border-radius:8px; }
.agent-markdown table { border-collapse:collapse; min-width:100%; width:max-content; font-size:13px; }
.agent-markdown th,.agent-markdown td { padding:10px 13px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); max-width:360px; min-width:90px; vertical-align:top; }
.agent-markdown th { font-weight:600; background:var(--panel-2); text-align:left; }
.agent-markdown th:last-child,.agent-markdown td:last-child { border-right:0; }.agent-markdown tr:last-child td { border-bottom:0; }
.agent-markdown input[type="checkbox"] { width:auto; min-height:0; margin-right:6px; accent-color:var(--accent); }
.message-actions { margin-top:12px; display:flex; }
.message-actions button { font-size:11px; padding:4px 0; min-height:28px; color:var(--text-3); }
.agent-message[data-status="failed"] .agent-markdown { border-left:2px solid var(--danger); padding-left:12px; }
.agent-message[data-status="streaming"] .agent-markdown::after { content:''; display:inline-block; width:5px; height:14px; background:var(--accent); border-radius:3px; animation:process-pulse 1.6s ease-in-out infinite; }
@keyframes process-pulse { 50% { opacity:.35; } }
@media(prefers-reduced-motion:reduce) { .process-dot,.agent-message[data-status="streaming"] .agent-markdown::after { animation:none!important; } }
.agent-prompts { display:flex; flex-wrap:wrap; gap:6px; padding:12px 20px; }
.agent-prompts button { font-size:11px; background:var(--panel-2); border-color:var(--line); color:var(--text-2); min-height:32px; }
#agent-form { margin:0 16px; padding:14px 16px; background:var(--stage); border:1px solid var(--line-strong); border-radius:14px; }
#agent-prompt { display:block; width:100%; min-height:72px; border:0; outline-offset:6px; resize:vertical; background:transparent; color:var(--text); font:14px/1.65 var(--font-ui); }
#agent-prompt::placeholder { color:var(--text-3); opacity:1; }
.composer-bottom { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:12px; }
.composer-bottom .fine { font-size:11px; }
#agent-status { min-height:18px; padding:8px 20px 0; }
#agent-error { margin:12px 20px; }
.agent-boundary { margin:10px 20px 18px; font-size:11px; line-height:1.65; color:var(--text-3); }
#tasks-status { margin:18px 20px; }
#agent-tasks { max-height:540px; overflow-y:auto; }
.task-card { padding:18px 20px; border-top:1px solid var(--line); }
.task-card h4 { margin:9px 0; font-size:13px; font-weight:500; overflow-wrap:anywhere; }
.task-card p { font-size:12px; color:var(--text-2); white-space:pre-wrap; overflow-wrap:anywhere; max-height:180px; overflow:auto; }
.task-card time { display:block; color:var(--text-3); font-size:11px; margin:8px 0; }
.task-card .task-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.task-card a { color:var(--accent); font-size:12px; }
.task-card code { font:10px var(--font-mono); color:var(--text-3); overflow-wrap:anywhere; }
.personal-heading { padding-top:36px; }
.personal-heading h2 { margin:10px 0; }
.region-nav { margin-top:24px; margin-bottom:28px; }
.region-nav a[aria-current="page"] { background:var(--cta); color:var(--cta-ink); }
.region-nav p { font-size:12px; }
#workspace-view { max-width:100%; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
footer { padding:20px 32px; }
@media(max-width:900px) { .agent-workbench { grid-template-columns:minmax(0,1fr); } .task-panel { margin-top:0; } #agent-tasks { max-height:400px; } .hero-copy { padding-left:32px; } .connection-grid article { padding-inline:18px; } }
@media(max-width:600px) {
  header { min-height:68px; padding:12px 16px; } main { padding:0 20px 40px; } .logotype { height:20px; } .theme-select { max-width:94px; }
  .agent-hero { margin-inline:-20px; } .hero-copy .eyebrow { font-size:9px; }
  .makers-art { inset:auto 0 0; width:100%; height:330px; object-position:center; } .agent-hero::before { background:linear-gradient(180deg,#080d10 48%,transparent 81%,rgba(8,13,16,.25)); }
  .hero-lede { font-size:14px; } .hero-actions { gap:18px; } .hero-actions .primary { padding:12px 18px; gap:16px; } .hero-note { margin-top:18px; font-size:10px; }
  h2 { font-size:25px; } .connection-grid { grid-template-columns:1fr; gap:24px; margin-top:28px; }
  .connection-grid article,.connection-grid article:first-child,.connection-grid article:last-child { padding:0 0 24px; border-left:0; border-bottom:1px solid var(--line); }
  .connection-grid article:last-child { border-bottom:0; padding-bottom:0; } .connection-grid h3 { margin-top:10px; } .connection-link { margin-top:12px; }
  .agent-section-heading { padding-top:32px; } .composer-bottom { align-items:flex-end; } .composer-bottom .fine { max-width:140px; } .console-heading { padding:14px; } .agent-messages { height:clamp(300px,50vh,460px); padding:16px; } .agent-prompts { padding-inline:14px; } .agent-prompts button { min-height:40px; }
  #agent-form { margin:0 12px; padding:12px; } #agent-prompt { font-size:16px; } .personal-heading { padding-top:32px; } .hero-copy h1 { letter-spacing:-.045em; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
.header-computer { color:var(--text-2); font-size:12px; text-decoration:none; margin-right:10px; white-space:nowrap; }
#personal-signin a { color:var(--accent); text-underline-offset:4px; }
@media(max-width:600px) { .header-computer { display:none; } }
/* Keep the artwork below copy when localized actions wrap on small screens. */
@media(max-width:600px) {
  .agent-hero { display:flex; flex-direction:column; min-height:0; }
  .hero-copy { order:0; padding:28px 24px 20px; }
  .hero-copy h1 { font-size:clamp(40px,13.33vw,52px); }
  .makers-art { order:1; position:relative; inset:auto; width:100%; height:220px; flex:none; object-position:center 20%; }
  .agent-hero::before { display:none; }
}
/* A matched daylight photograph, with text surfaces that follow appearance. */
.makers-art-light { display:none; }
:root:not([data-theme="dark"]) .makers-art-dark { display:none; }
:root:not([data-theme="dark"]) .makers-art-light { display:block; }
:root:not([data-theme="dark"]) .agent-hero { color:var(--text); background:var(--stage); border-color:var(--line); }
:root:not([data-theme="dark"]) .agent-hero::before { background:linear-gradient(90deg,#f5f8f7 14%,rgba(245,248,247,.98) 30%,rgba(245,248,247,.12) 67%,transparent),linear-gradient(0deg,#f5f8f7,transparent 18%); }
:root:not([data-theme="dark"]) .hero-copy .eyebrow,:root:not([data-theme="dark"]) .hero-copy h1 em { color:var(--accent); }
:root:not([data-theme="dark"]) .hero-lede,:root:not([data-theme="dark"]) .hero-note,:root:not([data-theme="dark"]) .hero-actions a,:root:not([data-theme="dark"]) .hero-actions button { color:var(--text-2); }
:root:not([data-theme="dark"]) .hero-actions .primary { background:var(--cta); color:var(--cta-ink); }
.theme-cycle { min-width:62px; min-height:34px; padding:6px 14px; border:1px solid var(--line); border-radius:999px; background:var(--panel); color:var(--text-2); font-size:12px; box-shadow:0 1px 3px rgba(0,0,0,.04); }
.theme-cycle:hover { border-color:var(--line-strong); color:var(--text); background:var(--panel-2); }
.portal-tabs { display:flex; gap:24px; border-bottom:1px solid var(--line); }
.portal-tabs button { border:0; border-bottom:2px solid transparent; border-radius:0; padding:16px 2px 14px; background:transparent; color:var(--text-3); }
.portal-tabs button[aria-selected="true"] { border-bottom-color:var(--accent); color:var(--text); font-weight:600; }
.computer-summary { display:flex; align-items:center; flex-wrap:wrap; justify-content:space-between; gap:12px 20px; padding:20px 0; border-bottom:1px solid var(--line); }
.summary-identity,.summary-actions { display:flex; align-items:center; flex-wrap:wrap; gap:12px; }
.summary-identity strong { font-size:14px; font-weight:600; }
.summary-actions .primary { min-height:36px; font-size:12px; padding:8px 18px; }
.summary-actions a { color:var(--text-3); font-size:12px; text-underline-offset:3px; }
#summary-operation:empty,#summary-link-slot:empty { display:none; }
#summary-operation,#summary-link-slot { width:100%; margin:0; }
#summary-link-slot a { color:var(--accent); }
#computer-panel .login-layout { margin-top:24px; }
footer { display:block; }
.footer-line { display:flex; align-items:center; flex-wrap:wrap; gap:12px 24px; }
.footer-line > [data-i18n="footer"] { flex:1; }
footer #token-toggle { font-size:11px; color:var(--text-3); font-weight:400; text-decoration:none; min-height:32px; padding:0; }
footer #token-toggle:hover { text-decoration:underline; }
footer #token-form { max-width:440px; margin:20px 0 0 auto; padding:20px; border:1px solid var(--line); border-radius:12px; background:var(--panel); }
@media(max-width:600px) {
  header { gap:8px; } header nav { gap:4px; } .theme-cycle { min-width:56px; padding:5px 12px; } header .lang { min-width:32px; padding-inline:6px; }
  .portal-tabs { gap:24px; } .portal-tabs button { padding-block:14px 12px; }
  .computer-summary { align-items:flex-start; gap:14px; padding-block:18px; }
  .summary-identity { gap:8px; } .summary-actions { width:100%; justify-content:space-between; }
  .connection-grid { margin-top:22px; gap:20px; }
  .footer-line { gap:12px; } .footer-line > [data-i18n="footer"] { flex-basis:75%; }
  footer #token-form { margin-left:0; }
}
/* Compact navigation and progressive disclosure. */
header { min-height:68px; padding-block:12px; gap:28px; }
.header-primary { flex:1; }
.header-tools { flex:none; }
.compact-brand { display:none; }
.portal-tabs { gap:8px; border:0; }
.portal-tabs button { min-height:36px; padding:8px 16px; border:0; border-radius:999px; font-size:13px; }
.portal-tabs button[aria-selected="true"] { background:var(--accent-soft); color:var(--accent); }
.agent-hero { min-height:388px; }
.hero-copy { padding:34px 48px; }
.hero-copy h1 { font-size:clamp(40px,4.7vw,60px); margin:18px 0; }
.hero-lede { max-width:340px; }
.hero-actions { margin-top:22px; }
.connection-grid { margin:0; padding:0 0 24px; }
.connection-grid h3 { margin:8px 0; }
.connection-grid .connection-link { margin:0 0 12px; }
.connection-grid .mcp-endpoint { padding-top:0; }
.connection-grid details { margin-top:8px; }
.agent-boundary summary { cursor:pointer; color:var(--text-3); }
.agent-boundary p { margin-top:8px; }
.personal-heading { padding-top:28px; }
.personal-heading h1 { font-size:24px; }
.region-nav { margin-block:20px; }
.inline-help { font-size:12px; color:var(--text-3); }
.inline-help summary { cursor:pointer; }
.inline-help p { margin-top:10px; }
.region-nav .inline-help { margin-left:auto; max-width:360px; }
.computer-state { display:flex; align-items:center; gap:8px; }
.computer-identity h2 { font-size:20px; }
.computer-details > summary { cursor:pointer; padding:12px 24px; border-top:1px solid var(--line); color:var(--text-3); font-size:12px; }
.backups-panel h2 { font-size:18px; }
.backups-panel .inline-help { margin-block:10px; }
header #account { position:relative; display:block; margin-left:8px; padding-left:12px; border-left:1px solid var(--line); }
#account-trigger { display:flex; align-items:center; gap:9px; cursor:pointer; list-style:none; min-height:40px; border-radius:999px; }
#account-trigger::-webkit-details-marker { display:none; }
#account-trigger:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
#user-label { display:block; color:var(--text-2); font-size:12px; font-weight:500; max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.account-avatar { position:relative; display:grid; place-items:center; flex:none; width:32px; height:32px; border-radius:50%; overflow:hidden; background:var(--panel-2); color:var(--accent); border:1px solid var(--line); font-size:12px; font-weight:600; }
.account-avatar img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.account-menu { position:absolute; z-index:20; right:0; top:calc(100% + 10px); width:220px; padding:16px; display:flex; flex-direction:column; align-items:flex-start; gap:5px; background:var(--panel); border:1px solid var(--line); border-radius:14px; box-shadow:0 12px 32px #0002; overflow-wrap:anywhere; }
.account-menu strong { font-size:14px; color:var(--text); }
#account-handle { font-size:12px; color:var(--text-3); }
#account .account-menu #logout { margin-top:10px; padding:6px 0; min-height:32px; font-size:12px; }
@media(max-width:760px) {
  header #account { margin-left:2px; padding-left:5px; border:0; }
  #account-trigger #user-label { display:none; }
}
@media(min-width:601px) and (max-width:900px) {
  .hero-copy { width:55%; min-width:330px; padding:30px 28px; }
  .hero-actions { gap:16px; }
  .hero-actions .primary { padding-inline:18px; gap:12px; }
}
@media(max-width:600px) {
  header { padding:12px 16px; min-height:60px; gap:10px; flex-wrap:nowrap; }
  header .logotype { display:none; } .compact-brand { display:block; }
  .brand { gap:0; } .header-primary { flex:1; min-width:0; }
  .portal-tabs { gap:2px; }
  .portal-tabs button { font-size:12px; min-height:36px; padding:8px 10px; }
  .header-tools { gap:2px; } .theme-cycle { min-width:48px; padding-inline:10px; font-size:11px; }
  header .lang { font-size:11px; min-width:28px; padding-inline:4px; }
  .agent-hero { min-height:0; } .hero-copy { width:100%; padding:24px; }
  .hero-copy h1 { font-size:clamp(40px,12.5vw,50px); }
  .makers-art { height:190px; }
  .hero-actions { gap:16px; }
  .hero-actions .primary { min-height:44px; padding:10px 16px; gap:10px; }
  .hero-actions a,.hero-actions button { font-size:12px; }
  .connection-grid { padding-bottom:20px; }
  .computer-identity h2 { font-size:18px; }
  .computer-state { gap:3px; }
  #refresh { padding:8px; }
  #refresh [data-i18n="refresh"] { display:none; }
  .region-nav .inline-help { margin-left:0; flex-basis:100%; }
}
@media(max-width:350px) {
  header { padding-inline:10px; gap:6px; }
  .portal-tabs button { padding-inline:8px; }
  .theme-cycle { min-width:42px; padding-inline:6px; }
  .hero-copy { padding-inline:20px; }
}
/* The same composer welcomes guests; sign-in is requested on interaction. */
.guest-hint { display:none; }
.agent-workbench[data-guest="true"] { display:block; max-width:760px; margin:34px auto 36px; }
.agent-workbench[data-guest="true"] .agent-console { display:flex; flex-direction:column; background:transparent; border:0; box-shadow:none; }
.agent-workbench[data-guest="true"] .console-heading,
.agent-workbench[data-guest="true"] .task-panel,
.agent-workbench[data-guest="true"] .agent-boundary,
.agent-workbench[data-guest="true"] #agent-status,
.agent-workbench[data-guest="true"] .member-hint { display:none; }
.agent-workbench[data-guest="true"] .guest-hint { display:block; }
.agent-workbench[data-guest="true"] .agent-messages { height:auto; padding:0; overflow:visible; }
.agent-workbench[data-guest="true"] .agent-empty { max-width:none; margin:0 0 24px; color:var(--text); font-size:24px; font-weight:500; letter-spacing:-.035em; }
.agent-workbench[data-guest="true"] #agent-form { order:1; margin:0; padding:20px; border-radius:24px; background:var(--panel); border-color:var(--line); box-shadow:0 8px 32px rgba(0,0,0,.035); }
.agent-workbench[data-guest="true"] #agent-form:focus-within { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft); }
.agent-workbench[data-guest="true"] #agent-prompt { cursor:text; resize:none; min-height:70px; outline:none; }
.agent-workbench[data-guest="true"] .agent-prompts { order:2; justify-content:center; padding:16px 0 0; }
#agent-signin-dialog { width:calc(100vw - 32px); max-width:480px; padding:20px; color:var(--text); background:var(--panel); border:1px solid var(--line); border-radius:24px; }
#agent-signin-dialog::backdrop { background:rgba(4,15,19,.45); backdrop-filter:blur(4px); }
#agent-signin-close { display:block; margin-left:auto; font-size:12px; }
#agent-signin-dialog .login-layout { margin:0; }
#agent-signin-dialog .sign-in { padding:12px 8px 8px; border:0; box-shadow:none; }
#agent-signin-dialog .sign-in h2 { margin:12px 0; font-size:26px; }
#agent-signin-dialog .sign-in .primary { max-width:none; }
#agent-signin-dialog .sign-in .fine { margin-bottom:0; }
@media(max-width:600px) {
  .agent-workbench[data-guest="true"] { margin:24px auto; }
  .agent-workbench[data-guest="true"] .agent-empty { font-size:21px; margin-bottom:20px; }
  .agent-workbench[data-guest="true"] #agent-form { padding:16px; border-radius:20px; }
  .agent-workbench[data-guest="true"] .composer-bottom { align-items:center; }
  .agent-workbench[data-guest="true"] .composer-bottom .fine { max-width:120px; }
  .agent-workbench[data-guest="true"] #agent-send { font-size:12px; padding-inline:14px; }
}

/* Connection instructions are on demand; the Agent composer stays on the page. */
.agent-entry { margin:32px 0 0; }
#connect-agent { width:calc(100vw - 32px); max-width:760px; max-height:calc(100dvh - 32px); overflow:auto; padding:28px; color:var(--text); background:var(--panel); border:1px solid var(--line); border-radius:24px; }
#connect-agent::backdrop { background:rgba(4,15,19,.45); backdrop-filter:blur(4px); }
html:has(#connect-agent[open]) { overflow:hidden; }
.connect-dialog-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.connect-dialog-heading h2 { margin:0; font-size:24px; }
#connect-agent-close { flex:none; font-size:12px; }
#connect-agent .connect-clients { margin:12px 0 24px; font-size:12px; }
#connect-agent .connection-grid { padding:0; margin:0; }
@media(max-width:600px) {
  .agent-entry { margin-top:24px; }
  #connect-agent { padding:20px; border-radius:20px; }
  .connect-dialog-heading h2 { font-size:21px; }
  .connect-dialog-heading { gap:8px; }
}

.connect-prompt { margin:0 0 28px; padding:16px; background:var(--panel-2); border:1px solid var(--line); border-radius:16px; }
.connect-prompt-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.connect-prompt-heading label { font-size:13px; font-weight:500; color:var(--text); }
#copy-agent-instruction { flex:none; min-height:32px; padding:6px 14px; font-size:12px; }
#agent-connect-prompt { display:block; width:100%; border:0; background:transparent; color:var(--text-2); resize:none; font:13px/1.65 var(--font-ui); padding:0; border-radius:0; }
#connect-copy-status { margin:10px 0 0; color:var(--accent); font-size:12px; }
#connect-copy-status:empty { display:none; }
@media(max-width:600px) { #agent-connect-prompt { height:132px; } }

/* Put the working surface before the supporting brand story. */
.agent-entry { margin:0; padding:36px 0 32px; }
.agent-workbench[data-guest="true"] { max-width:800px; margin:12px auto; }
.agent-workbench[data-guest="true"] .agent-empty { margin-bottom:24px; font-size:28px; }
.agent-workbench[data-guest="true"] .agent-prompts { max-width:720px; margin-inline:auto; gap:8px; }
.agent-prompts button { font-size:12px; min-height:36px; padding-inline:14px; }
.agent-hero { border-top:1px solid var(--line); }
@media(max-width:600px) {
  .agent-entry { padding:28px 0; }
  .agent-workbench[data-guest="true"] { margin:8px auto; }
  .agent-workbench[data-guest="true"] .agent-empty { font-size:23px; }
  .agent-prompts button { min-height:40px; padding-inline:12px; }
}
.task-environment{font-size:12px;color:var(--text-2);margin:14px 0 6px}.task-model{font-size:13px;color:var(--text-2);overflow-wrap:anywhere;margin:7px 0 12px}.task-card h4{font-size:16px;line-height:1.5;margin:8px 0}.task-details,.task-result{margin-top:16px;border-top:1px solid var(--line);padding-top:12px}.task-details summary,.task-result summary{cursor:pointer;color:var(--text-2);font-size:13px}.task-details dl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px 12px;font-size:12px;line-height:1.6;margin:16px 0}.task-details dt{color:var(--text-2)}.task-details dd{margin:0;text-align:right;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}.task-details .fine{font-size:11px;line-height:1.7}.task-stale{color:var(--danger);font-size:12px;overflow-wrap:anywhere}.task-result .agent-markdown{font-size:13px;max-height:360px;overflow:auto}.task-card time{font-size:12px}.task-separation{font-size:12px;color:var(--text-2);margin:0;padding:0 20px 16px;line-height:1.6}