@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,600;1,600&display=swap');
:root{color-scheme:light;--ink:#1d2123;--sub:#727476;--line:#dad9d4;--paper:#f5f3ee;--accent:#b44731}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.5 'DM Sans',system-ui,sans-serif}
.shell{max-width:1600px;margin:auto;padding:32px 38px 24px}.masthead{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:28px}
.eyebrow,.panel-heading,.panel-number,.canvas-caption,.live-mark,.footnote,.metrics small,.meter-label{font-family:'DM Mono',ui-monospace,monospace;letter-spacing:.1em}
.eyebrow{font-size:11px;color:var(--accent);font-weight:500;margin:0 0 13px}h1{font:600 clamp(40px,5vw,72px)/1.04 'Playfair Display',Georgia,serif;letter-spacing:-.045em;margin:0}h1 em{color:var(--accent)}.intro{color:var(--sub);margin:12px 0 0;max-width:590px;font-size:15px}
.live-mark{font-size:11px;color:#536a60;white-space:nowrap;margin-bottom:8px}.live-dot{display:inline-block;width:7px;height:7px;background:#709481;border-radius:50%;margin-right:9px;box-shadow:0 0 0 4px #dce8df}
.studio{display:grid;grid-template-columns:minmax(0,1fr) 315px;gap:20px;align-items:stretch}.canvas-wrap{position:relative;min-height:500px;background:#edece6;overflow:hidden;border:1px solid #deddd8;box-shadow:0 12px 28px #24211c0b}
canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:fill}#agents{pointer-events:auto;touch-action:pan-y}.canvas-caption{position:absolute;bottom:15px;left:18px;right:18px;display:flex;justify-content:space-between;font-size:10px;color:#6f6e6b;mix-blend-mode:multiply;pointer-events:none}
.controls{background:#fff;border:1px solid #e7e5df;padding:23px 22px 19px;box-shadow:0 12px 28px #24211c08}.panel-heading{display:flex;justify-content:space-between;font-size:10px;font-weight:500;color:#777774;margin-bottom:23px}.panel-number{color:#b2b0aa}
label{display:block;font-weight:700;font-size:12px;margin-bottom:7px}select,button{font:inherit}select{width:100%;height:42px;border:1px solid var(--line);border-radius:3px;background:#faf9f6;color:var(--ink);padding:0 10px;font-size:13px;cursor:pointer}.field-note{font-size:11px;color:var(--sub);line-height:1.5;min-height:32px;margin:8px 0 23px}
.slider-head{display:flex;align-items:center;justify-content:space-between;margin:21px 0 7px}.slider-head label{margin:0}.slider-head output{font:11px 'DM Mono',monospace;color:var(--sub)}input[type=range]{width:100%;accent-color:var(--accent);cursor:pointer;height:16px;margin:0}
.buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:25px}button{border:1px solid var(--ink);border-radius:3px;background:white;color:var(--ink);min-height:40px;font-weight:700;font-size:12px;cursor:pointer;transition:background .15s,color .15s}button:hover{background:#ece9e2}button.primary{background:var(--ink);color:#fff}button.primary:hover{background:#414749}.wide{width:100%;margin-top:8px;border-color:var(--line);font-weight:600}
.divider{border-top:1px solid #eceae6;margin:26px 0 22px}.status{font-size:11px;color:#686a6b;margin:-10px 0 15px;min-height:33px}.status.error{color:#a14633}.metrics{display:grid;grid-template-columns:1fr 1fr;border:1px solid #eeece6}.metrics>div{padding:10px 11px}.metrics>div+div{border-left:1px solid #eeece6}.metrics strong{display:block;font:600 18px 'DM Sans',sans-serif}.metrics small{display:block;font-size:9px;color:#898985;letter-spacing:.03em}
.meter-label{font-size:10px;color:#888783;margin:20px 0 8px}.intent-list{display:flex;gap:5px;flex-wrap:wrap}.intent-chip{border:1px solid #e8e6df;border-radius:2px;padding:3px 6px;font:10px 'DM Mono',monospace;color:#666}.intent-chip b{font-weight:500;color:#b44731}.footnote{display:flex;justify-content:space-between;gap:25px;font-size:10px;color:#92918d;letter-spacing:0;margin-top:18px}
.about{margin:52px 0 30px;padding:30px 0 0;border-top:1px solid var(--line)}.about h2{font:600 clamp(28px,3vw,42px)/1.12 'Playfair Display',Georgia,serif;letter-spacing:-.035em;margin:0 0 24px}.about h3{font-size:13px;line-height:1.4;margin:0 0 9px}.about p{color:#626466;font-size:13px;line-height:1.7;margin:0}.about-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}.source-note{display:flex;align-items:center;justify-content:space-between;gap:35px;border:1px solid #ddd9d0;background:#fff;padding:21px 24px;margin-top:28px}.source-note>div{max-width:730px}.source-link{flex:none;display:inline-block;padding:11px 14px;border:1px solid var(--ink);border-radius:3px;color:var(--ink);font-size:12px;font-weight:700;text-decoration:none}.source-link:hover,.source-link:focus-visible{background:var(--ink);color:#fff}.source-link span{margin-left:7px}
@media(max-width:940px){.shell{padding:22px 18px}.studio{grid-template-columns:1fr}.canvas-wrap{height:min(70vw,620px);min-height:350px}.controls{display:grid;grid-template-columns:1fr 1fr;column-gap:20px;align-content:start}.controls>.field{min-width:0}.controls>.panel-heading,.controls>.divider,.controls>.status,.controls>.metrics,.controls>.meter-label,.controls>.intent-list{grid-column:1/-1}.controls .buttons,.controls .wide{align-self:end}.footnote{flex-direction:column;gap:5px}}
@media(max-width:540px){.masthead{display:block}.live-mark{margin-top:17px}.canvas-wrap{height:65vh;min-height:390px}.controls{display:block}.footnote{line-height:1.6}}
@media(max-width:940px){.about-grid{gap:20px}.source-note{display:block}.source-link{margin-top:18px}}
@media(max-width:620px){.about-grid{grid-template-columns:1fr;gap:24px}.about{margin-top:38px}}
@media(prefers-reduced-motion:reduce){button{transition:none}}
.learned{margin-top:34px;padding-top:26px;border-top:1px solid var(--line)}.learned h2{font-size:clamp(22px,2.4vw,30px);margin:0 0 8px}.learned time{color:var(--muted,inherit);font-size:.95em}.learned h3:not(:first-child){margin-top:18px}