.agent-invitation { position:relative; display:grid; grid-template-columns:80px 1.3fr 1fr; gap:35px; padding:75px 7%; border-block:1px solid #353539; background:#18191c; align-items:center; }
.invitation-thread { align-self:stretch; position:relative; display:grid; place-items:center; }
.invitation-thread::before { content:''; position:absolute; top:-75px; bottom:50%; width:1px; background:#dc6557; }
.invitation-thread span { z-index:1; color:#ff7667; font-size:80px; line-height:1; transform-origin:50% 0; transform:rotate(var(--star-tilt,0deg)) scale(var(--star-scale,1)); filter:brightness(var(--star-light,1)); transition:transform 650ms cubic-bezier(.2,1.5,.4,1),filter 350ms ease; }
.motion-off .invitation-thread span { transform:none; filter:none; }
@media(prefers-reduced-motion:reduce) { .invitation-thread span { transform:none; filter:none; } }
.agent-invitation h2 { font-size:clamp(2rem,4vw,3.4rem); letter-spacing:-.045em; margin:16px 0; }
.agent-invitation p { color:#c7c5c8; line-height:1.7; max-width:450px; }
.agent-invitation .eyebrow { color:#d99589; }
.agent-invitation .invitation-aside { color:#a5a2aa; font-size:.875rem; margin-top:15px; }
.invitation-action { justify-self:end; max-width:340px; }
.invitation-action .button { font-size:.875rem; }
#invitation-status { font-size:.75rem; margin:15px 0; min-height:40px; }
.invitation-action summary { cursor:pointer; font-size:.75rem; color:#c1b4b1; padding:9px 0; }
.invitation-action details label { display:block; font-size:.75rem; margin:12px 0; }
#agent-invitation-prompt { width:100%; resize:vertical; background:#101113; color:#e8e5e2; font:13px/1.6 var(--mono); border:1px solid #4d4240; padding:12px; }
.invitation-human { display:inline-block; margin-top:17px; color:#c7a69f; font-size:.8125rem; text-decoration:none; }
.invitation-human[hidden] { display:none; }
.invitation-human:hover { color:#ffb9aa; text-decoration:underline; }
.workshop[data-audience="human"] .workshop-process { display:none; }
.invitation-action details a { display:block; font-size:.75rem; margin-top:12px; }
.workshop { width:100%; max-width:none; height:100dvh; max-height:none; margin:0; padding:0 5%; border:0; background:#111214; color:#efede8; overflow-y:auto; overscroll-behavior:contain; }
.workshop::backdrop { background:#111214; }
.workshop-open { overflow:hidden; }
.workshop button,.workshop input,.workshop textarea { font:inherit; }
.workshop button { cursor:pointer; }
.workshop button:disabled { opacity:.55; cursor:wait; }
.workshop .sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.workshop :focus-visible,.agent-invitation :focus-visible { outline:2px solid #ff9b88; outline-offset:4px; }
.workshop-header { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:23px 0; border-bottom:1px solid #35363a; }
.workshop-brand { display:flex; align-items:center; gap:12px; text-decoration:none; font:11px/1.5 var(--mono); letter-spacing:1px; }
.workshop-brand>span>span { color:#aaa5aa; }
.workshop-header button { color:#d7d1ce; background:transparent; border:1px solid #45464a; padding:11px 15px; font-size:.8125rem; }
.workshop-header button span { margin-left:18px; }
.workshop-intro { position:relative; display:flex; gap:40px; align-items:end; padding:40px 0 30px; overflow:hidden; }
.workshop-intro .eyebrow { color:#d99687; }
.workshop-intro h2 { font-size:clamp(2.8rem,5.3vw,5.6rem); font-weight:500; letter-spacing:-.055em; line-height:.97; margin:15px 0 0; }
.workshop-intro h2 em { color:#ff8573; font-family:Georgia,serif; font-weight:400; }
.workshop-intro>p { color:#ded6d0; font-size:.875rem; line-height:1.8; margin:0 0 3px 5%; z-index:1; }
.workshop-intro>p span { color:#aaa3a1; }
.workshop-spool { position:absolute; right:1%; top:-20px; font-size:250px; color:#2b2423; line-height:1; transform:rotate(-15deg); pointer-events:none; }
.workshop[data-started] .workshop-intro { padding-block:20px; align-items:center; }
.workshop[data-started] .workshop-intro .eyebrow { display:none; }
.workshop[data-started] .workshop-intro h2 { font-size:38px; margin:0; }
.workshop[data-started] .workshop-intro h2 br { display:none; }
.workshop[data-started] .workshop-intro h2 em { margin-left:.18em; }
.workshop[data-started] .workshop-intro>p { font-size:11px; }
.workshop[data-started] .workshop-spool { font-size:120px; top:0; }
.workshop-process { display:grid; grid-template-columns:155px 1fr; gap:20px; padding:17px 0; margin-bottom:14px; border-top:1px solid #363539; }
.workshop-process>p { margin:0; color:#e6b6a2; font:10px/1.7 var(--mono); letter-spacing:1px; }
.workshop-process>p span { display:block; color:#979095; margin-top:6px; font-size:9px; }
#workshop-notes { padding:0; margin:0; list-style:none; max-height:100px; overflow:auto; }
#workshop-notes li { display:flex; gap:14px; color:#c2bcba; font-size:12px; line-height:1.7; padding:0 6px 8px 0; }
#workshop-notes li:last-child { color:#f2d9c8; padding-bottom:0; }
#workshop-notes time { color:#a39999; font:10px/2 var(--mono); white-space:nowrap; padding-top:2px; }
.workshop-toolbar { display:flex; justify-content:space-between; align-items:center; gap:20px; border:1px solid #424044; border-bottom:0; padding:13px 17px; background:#1c1c1f; }
.workshop-toolbar label { display:flex; align-items:center; gap:15px; font:10px/1.5 var(--mono); color:#ada5a3; letter-spacing:1px; flex:1; min-width:0; }
.workshop-toolbar input { min-width:0; width:100%; max-width:360px; background:transparent; border:0; border-bottom:1px solid #555054; border-radius:0; padding:7px 0; color:#f1ece8; font:14px/1.4 system-ui,sans-serif; }
.workshop-toolbar>div { display:flex; gap:8px; }
.workshop-toolbar button { padding:11px 14px; border:1px solid #51484a; color:#d9d1cb; background:transparent; font-size:12px; min-height:42px; white-space:nowrap; }
.workshop-toolbar .workshop-run { background:#f16c58; border-color:#f16c58; color:#171316; font-weight:650; padding-inline:22px; }
.workshop-grid { display:grid; grid-template-columns:1fr 1fr; border:1px solid #424044; min-height:470px; }
.workshop-source { min-width:0; display:flex; flex-direction:column; background:#161719; border-right:1px solid #424044; }
.workshop-panel-heading { height:46px; flex-shrink:0; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:0 17px; border-bottom:1px solid #424044; font:10px/1.4 var(--mono); letter-spacing:1px; color:#ada7a5; }
.workshop-panel-heading [role=tablist] { display:flex; gap:20px; height:100%; }
.workshop-panel-heading button { padding:0 0; border:0; border-bottom:2px solid transparent; background:none; color:#a5a2a7; font:12px var(--mono); }
.workshop-panel-heading button[aria-selected=true] { color:#ffae98; border-bottom-color:#ff8b73; }
.workshop-source [role=tabpanel] { flex:1; min-height:350px; }
.workshop-source textarea { display:block; height:100%; min-height:370px; width:100%; resize:vertical; background:#161719; border:0; border-radius:0; padding:22px; color:#d7dacf; font:12px/1.8 var(--mono); tab-size:2; white-space:pre; overflow:auto; }
.workshop-source textarea:focus-visible { outline-offset:-3px; }
#editor-help { display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; padding:12px 17px; margin:0; color:#a6a4a8; font-size:11px; border-top:1px solid #303136; }
#editor-help span { color:#d2b0a4; }
.workshop-output { min-width:0; display:flex; flex-direction:column; background:#202023; }
.workshop-preview { flex:1; min-height:420px; display:flex; position:relative; }
.workshop-preview iframe { display:block; border:0; width:100%; min-height:420px; flex:1; background:#eee9df; }
.workshop-dot { display:inline-block; height:5px; width:5px; margin-right:6px; border-radius:50%; background:#888087; }
.workshop[data-state=running] .workshop-dot { background:#9bbda2; box-shadow:0 0 12px #71997d; }
.workshop[data-state=error] .workshop-dot { background:#ff8c78; }
.workshop-waiting { width:100%; text-align:center; padding:60px 20px; background:radial-gradient(ellipse at 50% 10%,#322321,transparent 65%); }
.workshop-waiting>span { color:#ee806c; font-size:62px; display:block; }
.workshop-waiting p { font-size:25px; line-height:1.3; margin:18px 0; letter-spacing:-.5px; }
.workshop-waiting em { font-family:Georgia,serif; color:#c1a797; }
.workshop-waiting small { color:#b5aaab; font-size:12px; line-height:1.7; }
.workshop-status-row { display:flex; justify-content:space-between; gap:20px; padding:14px 0; font-size:12px; line-height:1.6; }
.workshop-status-row p { margin:0; color:#d7b6a7; }
.workshop-status-row a { white-space:nowrap; color:#b4adb1; }
#workshop-errors { white-space:pre-wrap; overflow-wrap:anywhere; border:1px solid #6a3c35; background:#2a1b1b; color:#ffd1be; padding:16px; font:12px/1.6 var(--mono); max-height:220px; overflow:auto; }
.workshop-footer { display:flex; justify-content:space-between; gap:20px; border-top:1px solid #363539; padding:23px 0 30px; color:#a5a0a4; }
.workshop-footer>span { font:10px/1.7 var(--mono); letter-spacing:1px; }
.workshop-footer p { font-size:11px; line-height:1.7; margin:0; }
.workshop[open] .workshop-intro,.workshop[open] .workshop-grid { animation:stage-arrive 650ms 950ms ease-out both; }
.workshop-reveal { position:fixed; inset:0; z-index:11; pointer-events:none; background:#151416; display:grid; place-items:center; text-align:center; visibility:hidden; }
.workshop[open] .workshop-reveal { animation:reveal-away 1650ms ease both; }
.workshop[open] .workshop-reveal>div { animation:title-lift 1650ms cubic-bezier(.45,0,.2,1) both; }
.workshop-reveal>div { position:relative; }
.workshop-reveal img { display:block; margin-inline:auto; background:#151416; padding:5px; }
.workshop-reveal p { margin:15px 0 35px; color:#f5eadf; font-size:clamp(50px,9vw,125px); letter-spacing:-.065em; line-height:.98; }
.workshop-reveal em { color:#f3957c; font-family:Georgia,serif; font-weight:400; }
.workshop-reveal small { color:#c8a291; font:10px var(--mono); letter-spacing:3px; }
.reveal-string { position:absolute; left:50%; top:0; height:50%; width:1px; background:#d98168; }
@keyframes reveal-away { 0%,58% { visibility:visible; opacity:1; } 99% { visibility:visible; } 100% { visibility:hidden; opacity:0; } }
@keyframes title-lift { 0%,55% { transform:translateY(0); opacity:1; } 100% { transform:translateY(-46px); opacity:0; } }
@keyframes stage-arrive { from { opacity:.2; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
.motion-off .workshop-reveal,.motion-off .workshop[open] .workshop-reveal>div,.motion-off .workshop[open] .workshop-intro,.motion-off .workshop[open] .workshop-grid { animation:none; }
@media (prefers-reduced-motion:reduce) { .workshop[open] .workshop-reveal,.workshop[open] .workshop-reveal>div,.workshop[open] .workshop-intro,.workshop[open] .workshop-grid { animation:none; } }
@media (max-width:760px) {
 .agent-invitation { grid-template-columns:1fr; padding:50px 6%; gap:20px; }
 .invitation-thread { display:none; }
 .invitation-action { justify-self:start; max-width:none; width:100%; }
 .workshop { padding:0 5%; }
 .workshop-header { padding:17px 0; gap:12px; }
 .workshop-brand { gap:7px; font-size:9px; }
 .workshop-brand>span>span { display:block; }
 .workshop-header button { font-size:11px; padding:11px; }
 .workshop-header button span { margin-left:8px; }
 .workshop-intro { align-items:start; flex-direction:column; gap:18px; padding:25px 0; }
 .workshop-intro>p { margin:0; font-size:12px; }
 .workshop[data-started] .workshop-intro { align-items:start; gap:12px; }
 .workshop[data-started] .workshop-intro h2 { font-size:30px; }
 .workshop[data-started] .workshop-intro>p { display:none; }
 .workshop-spool { right:-25px; top:55px; font-size:180px; }
 .workshop-process { grid-template-columns:1fr; gap:12px; }
 .workshop-process>p { display:flex; justify-content:space-between; }
 .workshop-process>p span { margin:0; }
 .workshop-toolbar { flex-wrap:wrap; padding:12px; gap:12px; }
 .workshop-toolbar label { flex-basis:100%; }
 .workshop-toolbar>div { width:100%; }
 .workshop-toolbar button { flex:1; font-size:11px; padding:9px; }
 .workshop-toolbar .workshop-run { padding:9px 13px; }
 .workshop-grid { grid-template-columns:1fr; }
 .workshop-output { grid-row:1; border-bottom:1px solid #424044; }
 .workshop-preview,.workshop-preview iframe { min-height:400px; }
 .workshop-source { border-right:0; }
 .workshop-source textarea { min-height:330px; }
 .workshop-footer { flex-direction:column; gap:10px; }
 .workshop-status-row { font-size:11px; }
}

.workshop-instructions { margin:16px 0; border:1px solid #3c373d; border-radius:3px; background:#18171b; }
.workshop-instructions summary { display:flex; gap:12px; cursor:pointer; padding:11px 14px; color:#d0b4ae; font:.75rem/1.5 var(--mono); }
.workshop-instructions summary::before { content:'+'; }
.workshop-instructions[open] summary::before { content:'−'; }
.workshop-instructions pre { margin:0; padding:18px; border-top:1px solid #3c373d; max-height:400px; overflow:auto; white-space:pre-wrap; overflow-wrap:anywhere; color:#c8c3cc; font:.8125rem/1.65 var(--mono); }
.workshop-instructions pre:focus-visible { outline:2px solid #ff7667; outline-offset:2px; }