:root { --ink:#0c2340; --lime:#d9ff00; --paper:#f7f6f2; --line:#c9c7c1; --muted:#697587; --gold:#c97b22; --silver:#c6ced2; }
    * { box-sizing:border-box; }
    body { margin:0; background:var(--paper); color:var(--ink); font-family:Arial, Helvetica, sans-serif; overflow-x:hidden; }
    button { font:inherit; color:inherit; }
    .shell { max-width:1500px; margin:auto; min-height:100svh; padding:20px clamp(16px,3vw,48px) 34px; }
    .topline { display:flex; justify-content:space-between; align-items:flex-start; border-bottom:1px solid var(--line); padding-bottom:18px; gap:16px; }
    .eyebrow { font-size:12px; letter-spacing:.13em; font-weight:800; text-transform:uppercase; }
    h1 { font-size:clamp(27px,4vw,56px); line-height:.88; letter-spacing:-.075em; max-width:740px; margin:9px 0 0; text-transform:uppercase; }
    .badge { border:1px solid var(--ink); font-size:12px; font-weight:800; letter-spacing:.08em; padding:10px 12px; white-space:nowrap; text-transform:uppercase; }
    .tabs { display:flex; gap:0; overflow-x:auto; scrollbar-width:none; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:4; background:color-mix(in srgb,var(--paper) 94%,transparent); backdrop-filter:blur(10px); }
    .tabs::-webkit-scrollbar { display:none; }
    .tab { background:none; border:0; border-bottom:4px solid transparent; padding:17px 15px 13px; flex:0 0 auto; font-weight:800; font-size:13px; letter-spacing:.04em; text-transform:uppercase; cursor:pointer; }
    .tab[aria-selected="true"] { border-color:var(--lime); }
    .swipe-banner { display:flex; align-items:center; justify-content:center; gap:10px; min-height:38px; color:#1267d6; border-bottom:1px solid var(--line); font-size:12px; font-weight:900; letter-spacing:.08em; text-align:center; text-transform:uppercase; }
    .swipe-banner b { font-size:18px; letter-spacing:-.18em; line-height:1; }
    .workspace { display:grid; grid-template-columns:minmax(220px,.29fr) minmax(0,.71fr); gap:28px; padding-top:28px; }
    .agent { border:1px solid var(--line); padding:0; height:max-content; position:sticky; top:68px; overflow:hidden; background:#111511; }
    .agent-media { display:block; width:100%; aspect-ratio:21/9; object-fit:cover; filter:saturate(.82) contrast(1.06); }
    .agent-content { padding:20px; color:#f7f6f2; }
    .agent .eyebrow { color:var(--lime); }
    .agent p { color:rgba(255,255,255,.9); margin:9px 0 18px; line-height:1.48; font-size:14px; }
    .agent strong { color:#fff; font-size:16px; display:block; line-height:1.2; }
    .chips { display:flex; flex-wrap:wrap; gap:8px; }
    .chip { border:1px solid rgba(255,255,255,.84); color:#fff; background:rgba(8,25,45,.38); border-radius:999px; padding:8px 10px; font-size:12px; font-weight:700; cursor:pointer; }
    .chip:hover { background:#fff; color:var(--ink); }.agent-cta{display:inline-block;margin-top:16px;color:inherit;text-decoration:none;}
    .chip[aria-pressed="true"] { background:#1267d6; border-color:#1267d6; color:white; }
    .agent-media-controls { display:flex; justify-content:flex-start; margin:0 0 20px; }
    .agent-sound { width:42px; height:36px; border:1px solid rgba(255,255,255,.92); color:#fff; background:rgba(8,25,45,.56); padding:4px; cursor:pointer; }
    .agent-sound svg { display:block; width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round; }
    .agent-sound .speaker-off { display:none; }.agent-sound[aria-pressed="true"] .speaker-on { display:none; }.agent-sound[aria-pressed="true"] .speaker-off { display:block; }
    .agent-sound:focus-visible { outline:2px solid var(--lime); outline-offset:3px; }
    .stage { min-width:0; touch-action:pan-y; overscroll-behavior-x:contain; }
    .agent-output { display:none; border:2px solid #1267d6; background:#fff; padding:20px; margin-bottom:22px; animation:enter .34s ease; }
    .agent-output.active { display:block; }
    .agent-output .output-kicker { color:#1267d6; font-size:11px; letter-spacing:.12em; font-weight:900; text-transform:uppercase; }
    .agent-output h3 { font-size:clamp(24px,3vw,40px); line-height:.95; letter-spacing:-.065em; margin:8px 0 14px; text-transform:uppercase; }
    .agent-output p { line-height:1.45; margin:0 0 14px; }
    .agent-output .output-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
    .agent-output .output-card { border:1px solid var(--line); padding:13px; }
    .agent-output .output-card b { display:block; font-size:12px; letter-spacing:.08em; text-transform:uppercase; margin-bottom:6px; }
    .agent-output .output-card span { font-size:14px; line-height:1.35; display:block; }
    .panel { display:none; animation:enter .34s ease; }
    .panel.active { display:block; }
    @keyframes enter { from { opacity:0; transform:translateX(18px);} to {opacity:1; transform:none;} }
    .stage-number { color:var(--muted); font-size:13px; font-weight:800; letter-spacing:.08em; }
    h2 { font-size:clamp(33px,5vw,73px); line-height:.88; letter-spacing:-.075em; text-transform:uppercase; margin:8px 0 22px; max-width:900px; }
    .lede { font-size:clamp(19px,2vw,28px); line-height:1.13; max-width:810px; margin:0 0 26px; }
    .callout { display:inline-block; background:var(--lime); padding:3px 7px; font-weight:800; }
    .grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
    .card { border:1px solid var(--line); padding:18px; min-height:150px; }
    .card.visual { position:relative; overflow:hidden; min-height:270px; display:flex; flex-direction:column; justify-content:flex-end; background:#fff; }
    .card.visual::before { content:""; position:absolute; inset:0; background-image:var(--backdrop); background-size:cover; background-position:center; filter:saturate(.88) contrast(1.05); }
    .card.visual::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(247,246,242,.15),rgba(247,246,242,.95) 80%); }
    .card.visual h3,.card.visual p { position:relative; z-index:1; }
    .card.visual.bottle-pair::before { background-size:contain; background-repeat:no-repeat; background-position:center top; }
    .card h3 { font-size:13px; letter-spacing:.1em; text-transform:uppercase; margin:0 0 12px; }
    .card p, .card li { margin:0; color:#253a51; line-height:1.42; font-size:15px; }
    .card ul { padding-left:17px; margin:0; }
    .film { aspect-ratio:21/9; position:relative; overflow:hidden; background:#182435; margin-bottom:18px; }
    .film img,.film video { width:100%; height:100%; object-fit:cover; filter:saturate(.82) contrast(1.04); transform:scale(1.05); }
    .film video { object-fit:contain; transform:none; }
    .film::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(7,21,36,.52),transparent 58%,rgba(7,21,36,.28)); }
    .film-copy { position:absolute; z-index:1; left:clamp(16px,4vw,44px); bottom:clamp(16px,4vw,38px); color:white; }
    .film-copy small { font-size:11px; letter-spacing:.14em; font-weight:800; }
    .film-copy b { display:block; font-size:clamp(20px,3.4vw,48px); line-height:.9; letter-spacing:-.06em; max-width:450px; margin-top:7px; text-transform:uppercase; }
    .film-meta { display:flex; justify-content:space-between; border-top:1px solid var(--line); padding-top:12px; font-size:13px; color:var(--muted); }
    .media-controls { display:flex; justify-content:flex-end; padding:10px 0 0; }
    .sound-toggle { width:42px; height:36px; border:1px solid var(--ink); color:var(--ink); background:transparent; padding:4px; cursor:pointer; }
    .sound-toggle svg { display:block; width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round; }
    .sound-toggle .speaker-off { display:none; }
    .sound-toggle[aria-pressed="true"] .speaker-on { display:none; }
    .sound-toggle[aria-pressed="true"] .speaker-off { display:block; }
    .sound-toggle:focus-visible { outline:2px solid #1267d6; outline-offset:3px; }
    .bottle-layout { display:grid; grid-template-columns:.9fr 1.1fr; gap:22px; align-items:center; }
    .bottle-layout figure { margin:0; background:white; }
    .bottle-layout img { width:100%; display:block; }
    .expression-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
    .expression { border:1px solid var(--line); background:#fff; overflow:hidden; }
    .expression figure { margin:0; background:#fff; }
    .expression img, .expression video { width:100%; display:block; aspect-ratio:1/1; object-fit:contain; background:#fff; }
    .expression-copy { padding:17px; }
    .expression-copy h3 { margin:0 0 8px; font-size:22px; letter-spacing:-.05em; text-transform:uppercase; }
    .expression-copy p { margin:0; line-height:1.4; font-size:15px; }
    .spin-label { margin:26px 0 10px; font-size:12px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
    .spin-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
    .spin { margin:0; border:1px solid var(--line); background:#fff; overflow:hidden; }
    .spin video { display:block; width:100%; aspect-ratio:1; object-fit:contain; background:#f3f3f1; }
    .spin figcaption { padding:12px 14px; font-size:12px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
    .architecture { border:1px solid var(--ink); padding:18px; }
    .architecture .root { text-align:center; border:1px solid var(--ink); padding:13px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
    .branches { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:30px; }
    .branch { border-top:4px solid var(--ink); padding-top:12px; }
    .branch h3 { font-size:18px; margin:0 0 10px; line-height:1; text-transform:uppercase; letter-spacing:-.04em; }
    .branch p { font-size:14px; margin:0; line-height:1.45; }
    .metrics { width:100%; border-collapse:collapse; font-size:14px; }
    .metrics th,.metrics td { text-align:left; vertical-align:top; padding:12px; border:1px solid var(--line); }
    .metrics th { font-size:11px; text-transform:uppercase; letter-spacing:.08em; }
    .note { color:var(--muted); font-size:12px; line-height:1.45; margin-top:12px; }
    .controls { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:24px; border-top:1px solid var(--line); padding-top:15px; }
    .arrows { display:flex; gap:8px; }
    .arrow { width:42px; height:42px; background:transparent; border:1px solid var(--ink); cursor:pointer; font-size:20px; }
    .arrow:disabled { opacity:.3; cursor:not-allowed; }
    .swipe-hint { color:var(--muted); font-size:13px; }
    @media (max-width:760px) { .shell { padding:14px 16px 27px; } .topline { padding-bottom:14px; } .badge { font-size:10px; padding:8px; } .workspace { display:block; padding-top:18px; } .agent { position:relative; top:auto; margin-bottom:20px; } .agent-content { padding:18px 15px; } .agent p { margin-bottom:12px; } .grid,.bottle-layout,.expression-grid,.spin-grid,.agent-output .output-grid { grid-template-columns:1fr; } .branches { grid-template-columns:1fr; gap:20px; margin-top:20px; } h2 { font-size:46px; } .lede { font-size:20px; } .film { margin-left:-16px; margin-right:-16px; } .tabs { margin:0 -16px; padding:0 16px; } .tab { padding-left:10px; padding-right:10px; font-size:11px; } .metrics { font-size:12px; } .metrics th,.metrics td { padding:9px 7px; } .agent-output { padding:16px; } }