@import url('/tokens/colors.css');
@import url('/tokens/gradients.css');
@import url('/tokens/layout.css');
@import url('/tokens/typography.css');

@font-face{font-family:"Mona Sans";src:url('/assets/fonts/MonaSans-Variable.ttf') format('truetype');font-weight:200 900;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url('/assets/fonts/IBMPlexMono-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url('/assets/fonts/IBMPlexMono-Medium.ttf') format('truetype');font-weight:500 600;font-style:normal;font-display:swap}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{min-width:320px;scroll-behavior:smooth}
body{margin:0;color:var(--text-primary);font:14px/1.5 var(--font-sans);background:var(--grad-canvas);min-height:100vh}
button,input,textarea,select{font:inherit}
button{cursor:pointer}
button,input,textarea{touch-action:manipulation}
button:disabled{cursor:not-allowed;background:var(--ink-75);color:var(--text-secondary);border-color:var(--border-default);box-shadow:none}
input,textarea{width:100%;border:1px solid var(--border-strong);border-radius:var(--radius-control);background:var(--white);color:var(--text-primary);padding:9px 11px;line-height:1.5}
input{min-height:38px}
textarea{resize:vertical;min-height:72px}
input::placeholder,textarea::placeholder{color:var(--text-muted)}
input:disabled,textarea:disabled{background:var(--surface-canvas);color:var(--text-secondary)}
input:focus-visible,textarea:focus-visible,button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--ink-700);outline-offset:3px}
input:focus-visible,textarea:focus-visible{outline-offset:0;border-color:var(--ink-700)}
fieldset{border:0;margin:0;padding:0;min-width:0}
label{display:block;font-size:12px;color:var(--text-secondary);margin-bottom:7px}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-weight:550;color:var(--text-heading)}
h1{font-size:24px;line-height:1.25;letter-spacing:-.02em}
h2{font-size:16px;line-height:1.4;letter-spacing:-.012em}
h3{font-size:14px;line-height:1.4;letter-spacing:-.008em}
code,.mono{font-family:var(--font-mono);font-size:12px;font-weight:400;letter-spacing:.02em}
.mono,.eyebrow,.chip,.button{font-family:var(--font-mono);text-transform:uppercase}
.muted{color:var(--text-secondary)}
.hint{font-size:12px;line-height:1.55;color:var(--text-secondary)}
.eyebrow{display:block;font-size:10px;letter-spacing:.09em;line-height:1.5;color:var(--text-secondary)}
.button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:36px;padding:8px 12px;background:var(--white);border:1px solid var(--border-strong);border-radius:var(--radius-control);color:var(--text-primary);font-size:11px;line-height:1.45;letter-spacing:.025em;white-space:nowrap;transition:background .14s,box-shadow .14s;box-shadow:0 1px 2px rgba(20,20,28,.025)}
.button:hover:enabled{background:var(--ink-25);box-shadow:var(--shadow-card)}
.button:active:enabled{transform:translateY(1px)}
.button.primary{background:var(--grad-ink);border-color:transparent;color:var(--white)}
.button.primary:hover:enabled{background:var(--grad-ink-hover)}
.button.primary:disabled{background:var(--ink-75);border-color:var(--border-default);color:var(--text-secondary)}
.button.subtle{background:transparent;border-color:transparent;box-shadow:none}
.button.subtle:hover:enabled{background:rgba(20,20,28,.035)}
.button.small{min-height:26px;padding:4px 6px;font-size:9px}
.button.danger-text{color:var(--danger)}
.actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;padding:3px 6px;border:1px solid transparent;border-radius:var(--radius-chip);font-size:9px;letter-spacing:.05em;line-height:1.45;white-space:nowrap}
.chip.neutral{background:var(--gray-fill);color:var(--gray-text);border-color:var(--gray-edge)}
.chip.success{background:var(--green-fill);color:var(--green-text);border-color:var(--green-edge)}
.badges{display:flex;gap:5px;flex-wrap:wrap}
.notice{padding:11px 14px;border:1px solid var(--gray-edge);border-radius:5px;background:var(--gray-fill);font-size:13px;line-height:1.5;overflow-wrap:anywhere}
.notice.success{background:var(--green-fill);border-color:var(--green-edge);color:var(--green-text)}
.notice.warning{background:var(--orange-fill);border-color:var(--orange-edge);color:var(--orange-text)}
.notice.error{background:var(--error-surface);border-color:var(--error-border);color:var(--error-text)}
.status-dot{display:inline-block;width:6px;height:6px;flex:0 0 6px;background:var(--huli-orange);border-radius:100%}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;z-index:20;left:16px;top:8px;padding:10px;background:var(--white);transform:translateY(-150%)}
.skip-link:focus{transform:none}

.login-screen{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}
.login-brand{position:relative;display:flex;flex-direction:column;min-height:100vh;padding:48px 56px;overflow:hidden;background:radial-gradient(ellipse at 50% 60%,rgba(255,136,57,.10),transparent 55%),var(--grad-ink-deep);color:var(--white)}
.brand-logo{width:134px;height:40px}
.login-story{position:relative;margin:auto 0;padding:60px 0 200px;z-index:1}
.login-story .eyebrow{color:var(--ink-400);margin-bottom:22px}
.login-story h1{font-size:clamp(40px,4.4vw,66px);font-weight:450;line-height:1.09;letter-spacing:-.045em;color:var(--white)}
.login-story p{font-size:14px;color:var(--ink-300);margin-top:24px;line-height:1.75}
.brand-orb{position:absolute;bottom:-35px;right:20px;width:240px;height:240px;border-radius:50%;background:radial-gradient(ellipse at 33% 25%,rgba(255,255,255,.88),transparent 30%),radial-gradient(ellipse at 79% 80%,rgba(99,24,0,.7),transparent 65%),var(--grad-brand);box-shadow:inset -25px -10px 32px rgba(65,18,0,.32),0 20px 100px -35px rgba(255,97,35,.4);transform:rotate(-20deg)}
.brand-orb::after{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 30deg,transparent 25%,rgba(255,255,255,.38) 40%,transparent 60%);mix-blend-mode:soft-light}
.login-caption{font-size:10px;letter-spacing:.1em;color:var(--ink-400)}
.login-form-wrap{display:flex;align-items:center;justify-content:center;padding:40px}
.login-form{width:100%;max-width:370px}
.login-form h2{font-size:28px;margin:12px 0 10px;letter-spacing:-.025em}
.login-form>.muted{margin-bottom:32px;font-size:14px}
.login-form input{min-height:44px}
.login-form .hint{margin:10px 0 24px}
.login-form .button{width:100%;min-height:42px}
.login-form .notice{margin-bottom:16px}
.login-footnote{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:26px;font-size:11px;color:var(--text-secondary)}

.workspace{display:grid;grid-template-columns:208px minmax(0,1fr);min-height:100vh}
.sidebar{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;border-right:1px solid var(--border-default);background:var(--grad-veil);padding:26px 12px 16px;backdrop-filter:blur(12px);min-width:0}
.sidebar-brand{padding:0 12px 30px;display:flex;flex-direction:column;gap:13px}
.sidebar-brand img{display:block}
.sidebar-brand .eyebrow{font-size:9px;letter-spacing:.13em;color:var(--text-muted)}
.sidebar-heading{display:flex;align-items:center;justify-content:space-between;padding:0 10px 12px}
.sidebar-heading .mono{font-size:10px;letter-spacing:.07em}
.count{font:10px var(--font-mono);background:var(--ink-100);padding:2px 5px;border-radius:3px}
.sidebar-create{width:100%;margin-bottom:12px;font-size:10px}
.search{min-height:32px;font-size:12px;padding:6px 9px;margin-bottom:12px;background:rgba(255,255,255,.7)}
.agent-list{display:flex;flex-direction:column;gap:5px;min-height:50px;overflow-y:auto;flex:1;margin:0 -2px;padding:2px}
.agent-item{position:relative;border:1px solid transparent;background:transparent;border-radius:5px;padding:12px 10px;text-align:left;color:var(--text-primary);width:100%;min-height:57px;flex-shrink:0}
.agent-item:hover:enabled{background:var(--white)}
.agent-item.selected{background:var(--white);border-color:var(--border-subtle);box-shadow:var(--shadow-card)}
.agent-item.selected::before{content:"";position:absolute;left:-1px;top:11px;bottom:11px;width:2px;background:var(--grad-brand);border-radius:2px}
.agent-item-name{display:block;font-weight:500;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.agent-item-meta{display:block;font-size:9px;margin-top:5px;color:var(--text-secondary);letter-spacing:.015em}
.sidebar-empty{font-size:12px;color:var(--text-secondary);padding:10px}
.sidebar-pagination{display:flex;flex-direction:column;gap:3px;padding-top:12px}
.sidebar-pagination .button{font-size:9px;min-height:30px}
.sidebar-footer{display:flex;align-items:center;gap:7px;margin:14px 10px 0;padding-top:16px;border-top:1px solid var(--border-default);font-size:10px;color:var(--text-secondary)}
.main{min-width:0;outline:0}
.page-header{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:74px;padding:17px 28px;border-bottom:1px solid var(--border-default)}
.breadcrumb{display:flex;align-items:center;gap:12px;font-size:12px;color:var(--text-secondary);min-width:0}
.breadcrumb strong{font-weight:500;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.page-content{padding:28px;max-width:1700px;margin:auto}
#global-notice{margin-bottom:18px}
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:calc(100vh - 180px);text-align:center;gap:14px;padding:40px 20px}
.empty-mark{background:var(--white);padding:16px;border-radius:9px;box-shadow:var(--shadow-card);border:1px solid var(--border-default);margin-bottom:8px}
.empty-mark img{display:block}
.empty-state p{max-width:440px;color:var(--text-secondary)}
.empty-state .button{margin-top:10px}
.workbench{display:grid;grid-template-columns:minmax(380px,1fr) minmax(300px,360px);gap:26px;align-items:start}
.editor{min-width:0}
.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:1px 0 20px}
.section-heading .eyebrow{margin-bottom:7px}
.section-heading h1{font-size:23px}
.section-heading .badges{max-width:240px;justify-content:flex-end}
.editor-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 0;border-top:1px solid var(--border-default);border-bottom:1px solid var(--border-default);margin-bottom:24px}
.editor-toolbar .actions{gap:5px;flex-wrap:nowrap}
.editor-toolbar .button{font-size:9px;padding:7px 9px;min-height:32px}
.editor-toolbar .hint{font-size:11px}
.unsaved{color:var(--orange-text)}
.name-field{margin-bottom:28px}
.name-field input{font-size:16px;font-weight:500;min-height:44px;padding:10px 12px}
.steps-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}
.steps-heading h2{font-size:15px}
.steps-heading .mono{font-size:10px}
.editor-hint{margin:8px 0 18px;max-width:480px}
.editor-hint code{font-size:11px;background:var(--gray-fill);border-radius:3px;padding:1px 4px}
.steps{display:flex;flex-direction:column;gap:12px}
.step-card{background:var(--grad-surface);border:1px solid var(--border-default);border-radius:5px;padding:14px 16px 16px;box-shadow:var(--shadow-card)}
.step-card-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid var(--border-subtle);padding-bottom:10px;margin-bottom:14px}
.step-title{display:flex;align-items:center;gap:10px}
.step-title h3{font-size:13px}
.step-number{color:var(--text-muted);font-size:10px}
.step-tools{display:flex;align-items:center;gap:1px}
.step-field+.step-field{margin-top:13px}
.step-field label{font-size:11px;margin-bottom:6px}
.step-field textarea{font-size:13px;line-height:1.6;min-height:72px}
.step-field input{min-height:34px;font-size:12px;padding:6px 10px}
.step-field .hint{font-size:10px;margin-top:6px}
.add-step{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 0 24px}
.add-step>.mono{font-size:9px}
.add-step .button{min-height:30px;font-size:9px;padding:6px 10px}
#validation{margin-bottom:20px}
#unsupported pre{white-space:pre-wrap;max-height:400px;overflow:auto;font:11px/1.5 var(--font-mono);color:var(--text-primary)}

.playground{position:sticky;top:24px;background:var(--grad-surface);border:1px solid var(--border-default);border-radius:5px;box-shadow:var(--shadow-card);overflow:hidden;min-width:0}
.playground-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 18px 12px}
.playground-header .eyebrow{font-size:9px;margin-bottom:5px}
.playground-header h2{font-size:16px}
.playground-hint{padding:0 18px;font-size:11px;min-height:34px}
.playground-actions{display:flex;align-items:center;justify-content:space-between;gap:4px;padding:15px 18px 17px}
.playground-actions .button{font-size:9px;min-height:30px;padding:6px 8px}
.dialog-meta{padding:10px 18px;border-top:1px solid var(--border-subtle);display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.dialog-meta .mono{margin-left:auto;font-size:10px}
.dialog-meta code{display:block;flex-basis:100%;font-size:9px;color:var(--text-secondary);overflow-wrap:anywhere}
.transcript{height:340px;overflow-y:auto;padding:18px;background:var(--surface-canvas);border-top:1px solid var(--border-default);border-bottom:1px solid var(--border-default);display:flex;flex-direction:column;gap:16px;overscroll-behavior:contain}
.transcript-empty{margin:auto 14px;text-align:center;color:var(--text-secondary);font-size:12px;line-height:1.7}
.transcript-empty .eyebrow{font-size:9px;margin-bottom:10px}
.message{max-width:96%;align-self:flex-start}
.message-meta{font-size:8px;color:var(--text-secondary);margin:0 0 6px 2px;letter-spacing:.07em}
.message-text{font-size:12px;line-height:1.65;white-space:pre-wrap;overflow-wrap:anywhere;padding:11px 13px;border:1px solid var(--border-default);border-radius:5px;background:var(--white)}
.user-message{align-self:flex-end}
.user-message .message-meta{text-align:right}
.user-message .message-text{background:var(--ink-75);border-color:var(--border-default)}
.transcript-end{font-size:9px;color:var(--text-secondary);text-align:center;padding:8px}
.turn-form{padding:14px 18px;display:flex;gap:8px;align-items:flex-end}
.turn-form textarea{min-height:68px;max-height:180px;font-size:12px;padding:8px 10px}
.turn-form .button{font-size:9px;padding:9px 8px}
.continue-dialog{display:flex;margin:0 auto 14px;font-size:10px}
.history-details{border-top:1px solid var(--border-subtle);padding:12px 18px 16px}
.history-details summary{cursor:pointer;color:var(--text-secondary);font-size:11px;line-height:1.5}
.history-details form{padding-top:14px}
.history-details input{font-size:10px;min-height:34px}
.history-details button{margin-top:10px;font-size:9px;min-height:30px}
.history-details .hint{margin-top:10px;font-size:10px}
.pending-notice{padding:12px 18px;background:var(--orange-fill);color:var(--orange-text);border-bottom:1px solid var(--orange-edge)}
.pending-notice p{font-size:11px;margin-bottom:10px}
.pending-notice .button{min-height:30px;font-size:9px}
.answer-choices{display:flex;flex-wrap:wrap;gap:6px;padding:12px 18px 0}
.answer-choices:empty{display:none}
.answer-choices .button{font:11px var(--font-sans);text-transform:none;white-space:normal;text-align:left;min-height:28px;padding:5px 9px}

dialog{width:440px;max-width:calc(100vw - 32px);border:1px solid var(--border-default);border-radius:9px;padding:28px;color:var(--text-primary);box-shadow:var(--shadow-modal)}
dialog::backdrop{background:rgba(20,20,28,.4)}
dialog h2{font-size:22px;margin:9px 0 10px;letter-spacing:-.02em}
dialog .muted{font-size:13px;line-height:1.6;margin-bottom:24px}
dialog input{min-height:42px}
.modal-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:24px}
dialog .notice{margin-top:16px}

@media(min-width:1700px){.workbench{grid-template-columns:minmax(380px,1fr) 400px;gap:36px}.transcript{height:420px}.page-content{padding-top:36px}}
@media(max-width:1220px){.workbench{grid-template-columns:minmax(0,1fr)}.playground{position:static}.transcript{height:320px}.playground-hint{min-height:0}.playground-actions{justify-content:flex-start;gap:10px}.turn-form textarea{min-height:50px}.section-heading .badges{max-width:none}.playground{margin-top:4px}.page-content{padding:24px}.page-header{padding:17px 24px}}
@media(max-width:760px){.workspace{grid-template-columns:minmax(0,1fr)}.sidebar{position:relative;height:auto;padding:18px 20px 14px;border-right:0;border-bottom:1px solid var(--border-default);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px}.sidebar-brand{padding:0;grid-column:1;flex-direction:row;align-items:center;gap:16px}.sidebar-brand img{width:88px;height:auto}.sidebar-brand .eyebrow{font-size:8px}.sidebar-heading,.sidebar-footer{display:none}.sidebar-create{grid-column:2;grid-row:1;margin:0;width:auto}.search{grid-column:1/-1;margin:0}.agent-list{grid-column:1/-1;flex-direction:row;max-height:95px;overflow-x:auto;gap:8px;min-height:0}.agent-item{width:180px;flex:0 0 180px}.sidebar-pagination{grid-column:1/-1;flex-direction:row;justify-content:flex-end;padding:0}.sidebar-pagination .button{padding:3px 6px;min-height:24px;font-size:8px}.page-header{min-height:56px;padding:10px 20px}.page-content{padding:20px}.breadcrumb{font-size:11px;gap:8px}.section-heading{align-items:flex-start;flex-direction:column;gap:10px;padding-bottom:16px}.section-heading h1{font-size:22px}.editor-toolbar{flex-wrap:wrap;margin-bottom:20px;gap:12px}.editor-toolbar .actions{margin-left:auto}.name-field{margin-bottom:22px}.add-step{flex-wrap:wrap}.step-card{padding:12px}.step-card-heading{gap:3px}.step-tools .button{font-size:8px;padding:4px}.login-screen{grid-template-columns:1fr;min-height:100vh}.login-brand{min-height:auto;padding:28px}.login-story{padding:30px 0 10px;margin:0}.login-story h1{font-size:36px;max-width:300px}.login-story .eyebrow{font-size:9px;margin-bottom:14px}.login-story p{font-size:12px;margin-top:14px;max-width:290px}.brand-orb{width:145px;height:145px;right:-40px;bottom:10px;opacity:.8}.login-caption{display:none}.brand-logo{width:107px;height:32px}.login-form-wrap{padding:32px 28px 44px}.login-form h2{font-size:25px}.login-form>.muted{margin-bottom:24px}.login-footnote{font-size:10px}.empty-state{min-height:400px;padding:30px 0}.empty-state h1{font-size:22px}}
@media(max-width:390px){.page-content{padding:16px}.page-header{padding:10px 16px}.sidebar{padding:16px}.sidebar-brand .eyebrow{display:none}.editor-toolbar .button{font-size:8px;padding:7px}.step-tools .button{font-size:7px}.step-title{gap:6px}.turn-form{padding:12px;gap:6px}.turn-form .button{font-size:8px}.brand-orb{right:-80px}.login-story p{max-width:240px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}