@font-face{font-family:"Space Grotesk";src:url("/fonts/space-grotesk-latin.woff2") format("woff2");font-style:normal;font-weight:300 700;font-display:swap}@font-face{font-family:"Instrument Sans";src:url("/fonts/instrument-sans-latin.woff2") format("woff2");font-style:normal;font-weight:400 700;font-display:swap}:root{color-scheme:light;--canvas:var(--brand-canvas);--surface:var(--brand-surface);--text:var(--brand-navy);--accent:var(--brand-coral);--muted:var(--brand-muted);--line:var(--brand-line)}*{box-sizing:border-box}body{margin:0;background:var(--canvas);color:var(--text);font-family:"Space Grotesk",sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}header,main,footer{max-width:1440px;margin:auto;padding-left:clamp(20px,5vw,80px);padding-right:clamp(20px,5vw,80px)}header,footer{display:flex;align-items:center;justify-content:space-between;min-height:90px}a{color:inherit;text-decoration:none}a:hover{text-decoration:underline}.intro{display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:end;padding:80px 0 70px}.eyebrow,.panel-head{text-transform:uppercase;font-size:12px;letter-spacing:.11em;font-weight:700}.eyebrow{color:#b44235}h1,h2{font-family:"Instrument Sans",sans-serif;font-weight:600;letter-spacing:-.015em;line-height:1.03;margin:0}h1{font-size:clamp(56px,8vw,110px)}h1 em{font-style:normal;color:var(--accent)}.intro>div>p:not(.eyebrow){font-size:21px;line-height:1.5;max-width:430px}.intro .note{font-size:13px!important;color:var(--muted)}.workspace{display:grid;grid-template-columns:1fr 1fr;gap:16px}.input-panel,.output-panel{background:var(--surface);border-radius:16px;padding:clamp(22px,3vw,45px);min-width:0}.output-panel{background:var(--text);color:#fff}.panel-head{display:flex;justify-content:space-between;gap:10px;color:#6d7684;border-bottom:1px solid #d9dfe7;padding-bottom:18px;margin-bottom:40px}.output-panel .panel-head{color:#b6c3d3;border-color:#47576b}.input-panel h2,.output-panel h2,.evaluation h2,.closing h2{font-size:clamp(35px,4vw,58px)}p{line-height:1.5}.input-panel>p,.hint{color:var(--muted)}.examples{display:flex;gap:8px;flex-wrap:wrap;margin:28px 0}button{color:inherit;font:inherit;cursor:pointer}.examples button{border:1px solid var(--line);background:var(--surface);border-radius:30px;padding:9px 13px}.examples button[aria-pressed=true]{background:var(--text);color:white;border-color:var(--text)}label{display:block;font-weight:700;font-size:14px;margin-bottom:10px}textarea{width:100%;resize:vertical;border:1px solid #b8c1ce;border-radius:8px;padding:16px;font:inherit;line-height:1.5;color:var(--text)}.run-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:15px}.primary{background:var(--accent);color:var(--text);border:0;border-radius:30px;padding:15px 22px;font-weight:700;display:inline-block}.primary:disabled{opacity:.6;cursor:wait}.run-row span,.hint,.metrics{font-size:13px}.orb{font-size:65px;color:var(--accent);margin:70px 0 35px}.output-panel #empty>p:last-child{color:#c3cedd;max-width:330px}.brief{white-space:pre-wrap;line-height:1.6;margin:28px 0}.output-panel details{border-top:1px solid #526176;border-bottom:1px solid #526176;padding:18px 0}summary{cursor:pointer;font-weight:700}pre{white-space:pre-wrap;overflow-wrap:anywhere;font:13px/1.5 monospace;color:#cfdae8}.review{margin-top:30px}.review p{font-size:13px;color:#c3cedd}.metrics{color:#c3cedd;margin-top:30px}#error{color:#ffb7ad}.evaluation{display:grid;grid-template-columns:1fr 1fr;gap:50px;padding:110px 0}.evaluation p,.evaluation li{line-height:1.7}.evaluation li{margin:12px 0}.evaluation details{margin:30px 0}.closing{border-top:1px solid var(--line);padding:70px 0;display:flex;align-items:center;justify-content:space-between;gap:25px}footer{border-top:1px solid var(--line)}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--text);outline-offset:4px}.output-panel :focus-visible{outline-color:var(--accent)}@media(max-width:700px){.intro,.workspace,.evaluation{grid-template-columns:1fr}.intro{padding:45px 0;gap:12px}.evaluation{padding:70px 0;gap:24px}.closing{align-items:flex-start;flex-direction:column}.panel-head{margin-bottom:28px}.orb{margin:25px 0}}

.evaluation pre{color:#26384f;background:#f6f8fb;padding:16px;border-radius:8px;max-height:420px;overflow:auto}.evaluation #eval-results details{margin:14px 0}.evaluation #eval-results summary{font-size:14px}

.activity{padding:8px 0 30px}.activity-label{font-size:13px;color:#b6c3d3;display:flex;align-items:center;gap:10px}.pulse{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:pulse 1.4s ease-in-out infinite}.activity ol{padding:0;margin:32px 0;list-style:none}.activity li{display:flex;gap:18px;align-items:center;color:#8291a4;padding:15px 0;transition:color .3s,transform .3s}.activity li.done,.activity li.active{color:#fff;transform:translateX(4px)}.step-icon{width:42px;height:42px;display:grid;place-items:center;border:1px solid #627085;border-radius:50%;font-size:20px}.done .step-icon{background:var(--accent);color:var(--text);border-color:var(--accent)}.activity small{display:block;margin-top:5px;color:#aebdce}.activity strong{display:block}@keyframes pulse{50%{opacity:.35;transform:scale(.75)}}@media(prefers-reduced-motion:reduce){.pulse{animation:none}.activity li{transition:none}}

/* The workspace reads as one illuminated surface, with the request and result
   occupying two distinct areas of the same screen. */
.workspace{position:relative;isolation:isolate;gap:1px;padding:10px;border:1px solid rgba(255,255,255,.7);border-radius:24px;background:linear-gradient(135deg,rgba(255,255,255,.78),rgba(159,178,199,.48) 46%,rgba(255,255,255,.68));box-shadow:0 28px 75px rgba(32,51,77,.17),0 3px 10px rgba(32,51,77,.08);overflow:hidden}
.workspace::before{content:"";position:absolute;z-index:-1;inset:-80% -20%;background:linear-gradient(110deg,transparent 42%,rgba(255,255,255,.42) 50%,transparent 58%);transform:translateX(-55%);animation:screen-light 14s ease-in-out infinite;pointer-events:none}
.input-panel,.output-panel{border-radius:15px;min-height:620px}
.input-panel{background:linear-gradient(150deg,rgba(255,255,255,.96),rgba(243,247,251,.94));border:1px solid rgba(255,255,255,.85)}
.output-panel{position:relative;overflow:hidden;background:radial-gradient(ellipse at 85% 8%,rgba(105,151,179,.25),transparent 45%),linear-gradient(145deg,#30415a,var(--text) 72%);border:1px solid rgba(214,231,242,.22)}
.output-panel::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(145deg,rgba(255,255,255,.06),transparent 38%)}
.output-panel>*{position:relative}
.panel-head{letter-spacing:.08em}
.output-panel .panel-head{color:#c6d4e1;border-color:rgba(205,226,240,.25)}
#status{color:#f5ada3}
.orb{width:82px;height:82px;display:grid;place-items:center;font-size:40px;border:1px solid rgba(255,180,167,.55);border-radius:50%;background:rgba(250,104,86,.08);box-shadow:0 0 42px rgba(250,104,86,.12)}
.examples button,textarea,.primary{transition:border-color .2s,background-color .2s,box-shadow .2s,transform .2s}
.examples button:hover{border-color:#73869b}.primary:hover:not(:disabled){background:var(--brand-hover);box-shadow:0 6px 18px rgba(196,72,57,.22)}
textarea:focus-visible{border-color:#c4493b}
@keyframes screen-light{0%,25%{transform:translateX(-55%)}65%,100%{transform:translateX(55%)}}
@media(max-width:700px){.workspace{padding:7px;border-radius:19px}.input-panel,.output-panel{min-height:0;border-radius:12px}.output-panel{min-height:330px}.orb{width:64px;height:64px;font-size:32px}}
@media(prefers-reduced-motion:reduce){.workspace::before{animation:none}.examples button,textarea,.primary{transition:none}}
/* A quiet instrument grid gives the live activity its glass-screen depth. */
.output-panel::before{background-image:linear-gradient(rgba(196,222,238,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(196,222,238,.055) 1px,transparent 1px),linear-gradient(145deg,rgba(255,255,255,.08),transparent 42%);background-size:48px 48px,48px 48px,100% 100%;mask-image:linear-gradient(to bottom,black,transparent 90%);animation:instrument-drift 24s linear infinite}
.activity li.active .step-icon{border-color:#fa8b7d;box-shadow:0 0 0 6px rgba(250,104,86,.08),0 0 25px rgba(250,104,86,.2)}
@keyframes instrument-drift{to{background-position:0 48px,48px 0,0 0}}
@media(prefers-reduced-motion:reduce){.output-panel::before{animation:none}}

/* Keep navigation and keyboard entry usable at narrow widths. */
header,footer{gap:16px;flex-wrap:wrap}header>a:last-child,footer>a:last-child{font-size:14px}.skip-link{position:fixed;top:12px;left:16px;z-index:20;transform:translateY(-180%);padding:12px 20px;border-radius:30px;background:var(--text);color:var(--brand-surface)}.skip-link:focus{transform:none}@media(max-width:420px){header,footer{gap:12px}header>a:last-child,footer>a:last-child{font-size:12px}.site-footer .brand{--logo-size:33px}}