/* Direction 02 — an editorial instrument for studying interaction. */
:root{--canvas:#171717;--panel:#1d1d1d;--surface:#262626;--raised:#333333;--hover:#383838;--line:#404040;--ink:#ffffff;--muted:#b3b3b3;--faint:#999999;--accent:#ffffff;--selected:#333333;--field:#222222;--edge:#ffffff0a;--good:#cccccc}
:root[data-theme=light]{--canvas:#ffffff;--panel:#f7f7f7;--surface:#ffffff;--raised:#f1f1f1;--hover:#ebebeb;--line:#d4d4d4;--ink:#000000;--muted:#555555;--faint:#666666;--accent:#000000;--selected:#eeeeee;--field:#f7f7f7;--edge:#ffffff35;--good:#333333}
body{font-family:Arial,Helvetica,sans-serif}header{height:70px;margin:0 22px;padding:0;border-bottom:1px solid var(--line);gap:24px}.brand{font-weight:500;letter-spacing:-.7px;font-size:17px}.mark{background:transparent;color:var(--ink);border:0;box-shadow:none;font-size:27px;width:28px;border-radius:0}.version{background:none;border-left:1px solid var(--line);border-radius:0;font-size:9px;margin-left:8px;padding-left:12px}.header-note{font:9px/1.5 ui-monospace,monospace;text-transform:uppercase;letter-spacing:.5px;max-width:160px}.mode-label{font:9px ui-monospace,monospace;text-transform:uppercase}.theme-toggle,select{border-radius:3px;box-shadow:none}.theme-toggle{min-width:36px;padding:6px 9px}.theme-toggle #theme-label{display:none}
.workspace{grid-template-columns:174px minmax(380px,1fr) 270px}.navigation{padding:25px 18px 20px 22px;border-right:1px solid var(--line)}.navigation>.eyebrow{padding:0;font-size:9px}.nav-group{font:9px ui-monospace,monospace;text-transform:uppercase;letter-spacing:.5px;margin:28px 0 9px}.nav-button{border-radius:0;padding:9px 0;height:38px;margin:0;border:0;border-bottom:1px solid var(--line);font-size:12px;gap:6px}.nav-button .nav-icon{display:none}.nav-button .num{display:block;font-size:9px}.nav-button.selected{background:transparent;color:var(--ink);font-weight:700}.nav-foot{padding:20px 0 0;margin-top:70px}.mini-mark{font-size:68px;line-height:1;color:var(--ink);font-weight:400}.nav-foot strong{font-size:12px;color:var(--ink)}.nav-foot p{font-size:11px}.nav-foot .small{font:9px/1.6 ui-monospace,monospace}
main{padding:25px 28px 0}.title-row{position:relative;padding-bottom:24px;margin:0}.title-row>div{width:100%;min-width:0}.title-row .eyebrow{font-size:9px;margin-bottom:28px;letter-spacing:.4px}.component-emblem{display:none}h1{font-size:clamp(48px,6.6vw,112px);font-weight:400;letter-spacing:-.065em;line-height:.95;margin:0 0 22px}.title-row p{font-size:12px;max-width:78%;line-height:1.5}.specimen{display:block!important;position:absolute;right:0;top:0;font:8px ui-monospace,monospace;background:none;padding:0;letter-spacing:.4px}.title-row:after{content:'↘';position:absolute;bottom:16px;right:0;font-size:55px;font-weight:400;line-height:1;color:var(--ink)}
.stage{border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:0;box-shadow:none;background-color:transparent;background-image:linear-gradient(to right,transparent calc(50% - .5px),var(--line) 50%,transparent calc(50% + .5px));min-height:380px}.stage:before{content:'FIG. / LIVE STUDY';top:16px;left:0;font-size:8px;letter-spacing:.7px}.lane-label{top:16px;right:0;font-size:9px}.lane-hint{font:9px/1.5 ui-monospace,monospace;color:var(--muted);bottom:17px}.lane{padding-left:20px;padding-right:20px}.stage.compare{background-image:none}.lane+.lane{border-left:1px solid var(--line)}
button{border-radius:4px;box-shadow:none}.transport{padding:12px 0 22px}.transport button{border-radius:3px;font:10px ui-monospace,monospace;padding:6px 10px}.transport #replay{background:var(--ink);color:var(--canvas);border-color:var(--ink)}.speed-label{font:9px ui-monospace,monospace}.speed-label select{font:10px ui-monospace,monospace}.profiles{padding:19px 0 24px}.section-top .eyebrow{font-size:9px;letter-spacing:.5px}.profile-grid{gap:0;margin-top:17px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.profile-card{border:0;border-right:1px solid var(--line);border-radius:0;background:transparent;padding:15px 10px;box-shadow:none}.profile-card:last-child{border-right:0}.profile-card.active{background:var(--selected);box-shadow:inset 0 -3px 0 var(--ink);border-color:var(--line)}.profile-card strong{font-size:11px}.profile-card span{font:8px/1.5 ui-monospace,monospace}.profile-card svg{height:34px;margin-bottom:14px}.profile-card.active svg path:last-child{stroke:var(--ink)}.insight{padding:19px 0;gap:20px}.insight-icon{font-size:34px;color:var(--ink)}.insight h2{font-size:12px;color:var(--ink)}.insight p{font-size:11px;line-height:1.7}footer{font-size:8px;padding:16px 0 22px;letter-spacing:.25px}
.inspector{padding:26px 20px;border-color:var(--line);max-height:calc(100vh - 70px)}.inspector-head h2{font-size:12px}.inspector-head span{font:9px ui-monospace,monospace;border-radius:0;background:var(--selected)}.surface-controls{padding-top:18px}.control-group h2,.surface-controls h2,.access h2{font-size:11px}.control-top,.effect-toggle,.effect-palette,.effect-strength{font-size:10px}.control output{font:9px ui-monospace,monospace;border:0;border-radius:0;background:transparent;padding:0}.control{margin-bottom:17px}.control-group{padding-top:18px}.control-group h2{margin-bottom:17px}.small{font-size:10px}.a11y-row,.check{font-size:10px}.effect-sources a{font:9px ui-monospace,monospace}
/* Retain the specimens' geometry and focus behavior; change their material. */
.surface,.spec-button{background:var(--surface)}.demo .spec-button{border-radius:8px;font-size:14px}.composer,.refinement,.pop{border-radius:12px}.drawer{border-radius:10px 0 0 10px}.composer .toolbar>button,.overlay-actions>button,.pop .overlay-body>button{border-radius:5px}.tabs-box .tabbar,.tab-indicator{border-radius:4px}.surface button{font-size:12px}.surface h3{font-size:15px}.surface p{font-size:13px;line-height:1.7}.composer textarea{font-size:14px}.composer:focus-within{outline-offset:4px}.surface .danger{background:#834330;border-color:#834330;color:#fff}.keyboard-info{border-radius:0}
@media(min-width:1500px){.workspace{grid-template-columns:195px minmax(500px,1fr) 285px}main{padding:30px 42px 0}h1{font-size:112px}}
@media(max-width:1120px){.workspace{grid-template-columns:150px minmax(340px,1fr) 240px}.navigation{padding-left:18px;padding-right:14px}main{padding:25px 22px 0}.inspector{padding:25px 16px}header{margin:0 18px}.version{display:none}}
@media(max-width:850px){.workspace{grid-template-columns:132px minmax(0,1fr)}.inspector{position:static;max-height:none;border:1px solid var(--line);border-radius:0;background:transparent;margin:15px 22px 24px}.navigation{padding-left:16px;padding-right:12px}.nav-button{font-size:11px}.nav-button .num{font-size:8px}.title-row .eyebrow{margin-bottom:24px}h1{font-size:clamp(46px,9vw,76px)}.mode-label{font-size:0}.header-note{display:none}}
@media(max-width:560px){header{height:64px;margin:0 14px;gap:8px}.brand{font-size:14px}.mark{font-size:24px;width:22px}.workspace{display:block}.navigation{padding:8px 14px;border-right:0;border-bottom:1px solid var(--line)}.nav-button{padding:7px 11px;border-bottom:0;font-size:11px;height:34px}.nav-button .num{display:none}.nav-button.selected{background:var(--selected)}.nav-foot{display:none}main{padding:22px 16px 0}h1{font-size:clamp(44px,13vw,70px);margin-bottom:18px}.title-row{padding-bottom:22px}.title-row p{font-size:11px;max-width:78%}.title-row:after{font-size:43px}.specimen{font-size:7px}.title-row .eyebrow{font-size:8px;margin-bottom:30px}.stage{min-height:360px}.lane{padding-left:14px;padding-right:14px}.profile-card{padding:12px 6px}.profile-card strong{font-size:10px}.profile-card span{font-size:8px}.inspector{margin:14px 16px 24px;padding:22px 16px}.transport button{font-size:9px}.stage.compare:has(.popover-demo) .lane{min-height:520px}}
/* The index label is gone; start the navigation at the sidebar's top padding. */
#nav > .nav-group:first-child{margin-top:0}
/* Keep component navigation free of row dividers. */
#nav .nav-button{border-bottom:0}
/* Extend the hover area without shifting the navigation labels. */
@media(min-width:561px){
  #nav .nav-button{width:calc(100% + 16px);margin-left:-8px;padding-left:8px;padding-right:8px;border-radius:10px}
}
@media(max-width:560px){#nav .nav-button{border-radius:10px}}
/* Ready-to-send is the composer's primary action. */
.composer .toolbar .send:not(:disabled){background:#000;color:#fff;border-color:#000}
.composer .toolbar .send:not(:disabled):hover{background:#202020;border-color:#202020}
/* Indicate composer focus on its existing edge, without an outer ring. */
.composer:focus-within{outline:none;outline-offset:0;border-color:var(--muted)}
.surface-controls{border-top:0}
/* Match the sidebar headings' distance from the header rule. */
.surface-controls{padding-top:0}
@media(min-width:850.01px){.inspector{padding-top:25px}}
/* Frosted glass: translucent material, not opacity on the content. */
:root{--glass-rgb:42 42 42;--glass-edge:#ffffff38;--glass-highlight:#ffffff42}
:root[data-theme=light]{--glass-rgb:255 255 255;--glass-edge:#00000018;--glass-highlight:#ffffffee}
.fx-target.fx-glass{
  background:linear-gradient(135deg,rgb(255 255 255 / .12),transparent 55%),rgb(var(--glass-rgb) / calc(.9 - var(--glass-strength,.7) * .55))!important;
  -webkit-backdrop-filter:blur(calc(var(--glass-strength,.7) * 20px)) saturate(150%);
  backdrop-filter:blur(calc(var(--glass-strength,.7) * 20px)) saturate(150%);
  border-color:var(--glass-edge);
  box-shadow:inset 0 1px 0 var(--glass-highlight),inset 1px 0 0 #ffffff30,inset 0 -1px 0 #00000012,0 3px 10px #0000000a!important;
}
.fx-glass .metal-fx-inner{display:none!important}
/* Preserve the send action's meaning and the switch's selected state. */
.composer .toolbar .send.fx-glass:not(:disabled){background:#000!important;color:#fff;border-color:#000}
.switch.fx-glass[aria-checked=true]{background:rgb(var(--glass-rgb) / .6)!important;box-shadow:inset 0 0 0 2px var(--accent),0 3px 10px #0000000a!important}
.effect-swatch.glass{background:linear-gradient(135deg,#ffffffd9,#b7c0ca55 50%,#ffffff80);box-shadow:inset 0 1px 0 #fff,0 2px 5px #0002;border-color:#a9afb866}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.fx-target.fx-glass{background:var(--surface)!important}}
/* A quiet material sample behind glass makes transmission and blur visible. */
.lane:has(.fx-glass){background-image:linear-gradient(90deg,transparent calc(50% - 1px),var(--line) calc(50% - 1px),var(--line) calc(50% + 1px),transparent calc(50% + 1px)),radial-gradient(ellipse 75px 55px at 42% 48%,rgb(127 153 180 / .10),transparent 100%),radial-gradient(ellipse 65px 50px at 59% 54%,rgb(191 166 145 / .08),transparent 100%)}
.fx-target.fx-glass{background:linear-gradient(135deg,rgb(255 255 255 / .09),transparent 55%),rgb(var(--glass-rgb) / calc(.7 - var(--glass-strength,.7) * .55))!important;-webkit-backdrop-filter:blur(calc(var(--glass-strength,.7) * 4px)) saturate(150%);backdrop-filter:blur(calc(var(--glass-strength,.7) * 4px)) saturate(150%)}
.composer .toolbar .send.fx-glass:not(:disabled){background:#000!important}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.fx-target.fx-glass{background:var(--surface)!important}}
/* Keep the preview and title free of decorative annotations. */
.stage::before,.title-row::after{content:none}
.lane-label{display:none}
/* Stable avatar space avoids a layout jump between idle, working and results. */
.status-icon.action-state-icon{width:64px;height:64px;min-width:64px;flex:0 0 64px;background:transparent;box-shadow:none;border:0;display:grid;place-items:center}
.action-orb{display:block;width:64px;height:64px;pointer-events:none}
.action-orb[hidden],.action-state-icon>span[hidden]{display:none}
.action-orb canvas{display:block;width:64px;height:64px}
/* Status symbols get a readable, softly contained avatar. */
.action-state-icon>span:not(.action-orb){width:48px;height:48px;display:grid;place-items:center;border-radius:50%;background:var(--raised);color:var(--ink);font-size:28px;font-weight:500;line-height:1}
.action-state-icon>span[hidden]{display:none}
.refinement{width:420px;max-width:100%;padding:24px}
.refinement-kicker{font:9px ui-monospace,monospace;letter-spacing:1px;color:var(--muted);margin-bottom:14px}
.refinement h3{font-size:19px;letter-spacing:-.4px;margin:0 0 8px}
.refinement-form>p{margin:0 0 22px;color:var(--muted);font-size:12px}
.refinement-options{border:0;padding:0;margin:0 0 20px;min-width:0;display:grid;gap:8px}
.refinement-options legend{font-size:12px;font-weight:600;margin-bottom:10px;padding:0}
.refinement-option{display:flex;align-items:center;gap:12px;padding:11px 12px;border:1px solid var(--line);border-radius:8px;cursor:pointer;background:var(--field)}
.refinement-option:has(input:checked){border-color:var(--ink);background:var(--selected)}
.refinement-option input{margin:0;accent-color:var(--ink);width:16px;height:16px;flex:none}
.refinement-option strong{display:block;font-size:12px;font-weight:500}.refinement-option small{display:block;font-size:11px;color:var(--muted);margin-top:4px;line-height:1.4}
.refinement-actions{display:flex;justify-content:space-between;gap:10px;margin-top:20px}.refinement-actions .primary{background:var(--ink);color:var(--canvas);border-color:var(--ink)}
.refinement-form[hidden],.refinement-summary[hidden]{display:none}.refinement-summary p{font-size:13px}.refinement-summary .small{font-size:10px;color:var(--muted)}
.stage:has(.refinement) .lane{padding-top:28px;padding-bottom:55px}.stage:has(.refinement) .demo{max-height:none}.stage:has(.refinement){height:auto;max-height:none}

/* Keep the primary action legible through hover and material overlays. */
.refinement .refinement-actions .primary{background:var(--ink)!important;color:var(--canvas);border-color:var(--ink)}
.refinement .refinement-actions .primary:not(:disabled):hover{background:color-mix(in srgb,var(--ink) 85%,var(--canvas))!important;color:var(--canvas)}
.refinement-actions .primary .metal-fx-inner{display:none!important}

/* A subtle outline follows the active tab indicator. */
.tabs-box .tab-indicator{border-color:var(--line);z-index:3;pointer-events:none}
.tabs-box .tabbar button{z-index:4}

/* Molded glass: a clear face with a rounded, light-catching inner bevel. */
:root{--molded-tint:28 30 33;--molded-highlight:255 255 255;--molded-shade:0 0 0}
:root[data-theme=light]{--molded-tint:235 238 241}
.fx-target.fx-molded{
 background:linear-gradient(135deg,rgb(255 255 255 / .16),transparent 38%,rgb(255 255 255 / .05) 70%,rgb(255 255 255 / .22)),rgb(var(--molded-tint) / .22)!important;
 -webkit-backdrop-filter:blur(calc(var(--glass-strength,.7) * 2px)) saturate(110%);
 backdrop-filter:blur(calc(var(--glass-strength,.7) * 2px)) saturate(110%);
 border-color:rgb(255 255 255 / .55);
 box-shadow:inset 1px 1px 1px rgb(255 255 255 / .75),inset -1px -1px 2px rgb(255 255 255 / .6),inset 0 calc(-1 * var(--molded-bevel)) var(--molded-bevel) calc(-.3 * var(--molded-bevel)) rgb(255 255 255 / .75),inset var(--molded-bevel) 0 var(--molded-bevel) calc(-.5 * var(--molded-bevel)) rgb(255 255 255 / .4),inset calc(-1 * var(--molded-bevel)) 0 var(--molded-bevel) calc(-.5 * var(--molded-bevel)) rgb(0 0 0 / .18),inset 0 var(--molded-bevel) var(--molded-bevel) calc(-.6 * var(--molded-bevel)) rgb(0 0 0 / .12),0 8px 20px rgb(0 0 0 / calc(var(--glass-strength,.7) * .16))!important;
}
.fx-molded .metal-fx-inner{display:none!important}
.fx-molded.fx-glass{backdrop-filter:blur(calc(var(--glass-strength,.7) * 4px)) saturate(120%);-webkit-backdrop-filter:blur(calc(var(--glass-strength,.7) * 4px)) saturate(120%)}
.composer .toolbar .send.fx-molded:not(:disabled){background:#000!important;color:#fff;border-color:#000}
.switch.fx-molded[aria-checked=true]{background:var(--ink)!important}
.effect-swatch.molded{background:linear-gradient(135deg,#ffffff90,#a9b1bc33);border-color:#a9afb866;box-shadow:inset 1px 1px 1px #fff,inset 0 -5px 5px -2px #fff,inset -3px 0 4px -2px #5558,0 2px 4px #0002;border-radius:8px}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.fx-target.fx-molded{background:var(--surface)!important}}
/* Device preview stays inside the lab; the mounted component survives pose changes. */
.duo-toggle{margin-left:auto;font-size:12px;border-radius:20px;padding:9px 16px;white-space:nowrap}
.access .mode-label{display:flex;font-size:12px;justify-content:space-between;margin:16px 0}
.stage.duo-stage{display:flex;flex-direction:column;justify-content:flex-start;align-items:center;height:auto!important;max-height:none!important;min-height:600px;padding:24px 12px 28px;overflow:visible;gap:28px}
.duo-controls{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;position:relative;z-index:5;width:100%}
.duo-controls button{font-size:11px;min-height:34px;border-radius:18px;padding:7px 13px;background:var(--surface)}
.duo-controls button[aria-pressed=true]{background:var(--selected);border-color:var(--faint)}
.duo-angle{width:100%;display:flex;align-items:center;justify-content:center;gap:12px;font:11px ui-monospace,monospace;color:var(--muted)}
.duo-angle[hidden]{display:none}.duo-angle input{width:150px;accent-color:var(--ink)}
.duo-shell{width:min(100%,740px);perspective:1400px;transition:width .35s ease}
.duo-hardware{padding:8px;border-radius:34px;background:linear-gradient(120deg,#8b8b8b,#202020 20%,#555 85%,#b4b4b4);box-shadow:0 20px 35px #0002,0 2px 4px #0004;transition:transform .35s ease;position:relative}
.duo-screen{background:var(--canvas);border-radius:27px;overflow:hidden;position:relative;border:2px solid #111;min-height:450px}
.duo-status{height:33px;display:flex;justify-content:space-between;padding:10px 24px 0;font-size:10px;font-weight:600}
.duo-workspace{display:grid;grid-template-columns:minmax(125px,30%) minmax(0,1fr);min-height:425px}
.duo-projects{padding:26px 18px;background:var(--field);border-right:1px solid var(--line);display:flex;flex-direction:column;gap:16px;font-size:11px}
.duo-appmark{font-weight:650;font-size:16px;letter-spacing:-.5px}.duo-projects p{font:9px ui-monospace,monospace;color:var(--muted);margin:24px 0 0}.duo-projects span{color:var(--muted)}.duo-project-note{margin-top:auto;padding-top:30px;font-size:22px;letter-spacing:-.7px;line-height:1.2;color:var(--faint)}
.duo-page{min-width:0;padding:25px 18px 35px;position:relative}.duo-context h2{font-size:24px;letter-spacing:-.8px;font-weight:550;margin:12px 0}.duo-eyebrow{font:9px ui-monospace,monospace;text-transform:uppercase;color:var(--muted);letter-spacing:.6px}.duo-context p{font-size:12px;color:var(--muted);line-height:1.6;margin:0 0 28px}
.duo-home{height:4px;width:70px;border-radius:4px;background:var(--ink);opacity:.6;margin:12px auto}
.duo-caption{text-align:center;font:10px ui-monospace,monospace;color:var(--muted);margin:18px 0 0}
.duo-stage .lane{padding:0!important;min-height:160px;width:100%;display:flex;background:none!important;border:0;position:relative}
.duo-stage .lane-hint{display:none}.duo-stage .demo{width:100%;max-height:none;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;scale:1!important}
.duo-stage .surface,.duo-stage .tabs-box{max-width:100%;width:100%}.duo-stage .surface{overflow:visible;max-height:none}.duo-stage .composer{padding:16px}.duo-stage .composer textarea{min-height:100px;font-size:13px}.duo-stage .refinement{padding:16px}.duo-stage .refinement-option{gap:8px;padding:10px}.duo-stage .tabbar button{font-size:11px;padding:8px 3px}.duo-stage .spec-button{max-width:100%;min-width:0}.duo-stage .pop{max-width:100%;width:100%;left:50%}.duo-stage .drawer{max-height:100%;overflow:auto}.duo-stage .overlay-actions{flex-wrap:wrap}
.duo-closed .duo-shell{width:min(100%,390px)}.duo-closed .duo-workspace{grid-template-columns:1fr}.duo-closed .duo-projects{display:none}.duo-closed .duo-screen{min-height:360px}.duo-closed .duo-workspace{min-height:340px}
.duo-rotated:not(.duo-closed) .duo-shell{width:min(100%,470px)}.duo-rotated:not(.duo-closed) .duo-workspace{grid-template-columns:1fr}.duo-rotated:not(.duo-closed) .duo-projects{display:none}.duo-rotated .duo-screen{min-height:590px}.duo-rotated .duo-workspace{min-height:540px}
.duo-inspecting .duo-hardware{transform:rotateX(8deg) rotateY(var(--duo-angle));transform-origin:center}.duo-inspecting:not(.duo-closed) .duo-screen:after{content:'';position:absolute;inset:0 auto 0 49%;width:2%;background:linear-gradient(90deg,transparent,#0003,transparent);pointer-events:none}.duo-inspecting:not(.duo-closed) .duo-page{padding-left:24px}
@media(max-width:1050px){.duo-stage .duo-workspace{grid-template-columns:1fr}.duo-stage .duo-projects{display:none}.duo-stage .duo-shell{max-width:480px}}
@media(max-width:560px){.duo-toggle{font-size:10px;padding:6px 10px}.stage.duo-stage{padding:20px 0}.duo-page{padding:20px 12px}.duo-hardware{padding:5px;border-radius:26px}.duo-screen{border-radius:21px}.duo-controls{gap:5px}.duo-controls button{padding:6px 10px}.access .mode-label{font-size:12px}}
@media(prefers-reduced-motion:reduce){.duo-shell,.duo-hardware{transition:none}}
body:has(#mode option[value="reduced-motion"]:checked) .duo-shell,body:has(#mode option[value="reduced-motion"]:checked) .duo-hardware{transition:none}
/* The fold guide follows the boundary between context and working content. */
.duo-inspecting:not(.duo-closed) .duo-screen:after{left:29%;width:2%}
@media(max-width:1050px){.duo-inspecting:not(.duo-closed) .duo-screen:after{left:0;right:0;top:33px;bottom:auto;height:5px;width:auto;background:linear-gradient(transparent,#0002,transparent)}}
.duo-stage .lane:has(.popover-demo){min-height:420px;align-items:flex-start}.duo-stage .popover-demo{translate:0 0;justify-content:flex-start}.duo-stage .lane:has(.drawer),.duo-stage .lane:has(.overlay-trigger[aria-controls]){min-height:350px}.duo-stage .lane:has(.popover-demo){min-height:420px}.duo-stage .drawer{max-width:100%;min-height:300px}
.scenario-card{padding:18px;margin:20px 0 28px;border-radius:15px;background:var(--field);border:1px solid var(--line);display:grid;gap:8px}
.scenario-card strong{font-size:16px;font-weight:550;letter-spacing:-.3px}.scenario-card small{font-size:10px;color:var(--muted)}.duo-context .scenario-card p{font-size:12px;line-height:1.6;margin:0}.scenario-symbol{font-size:34px;line-height:1.2;margin-bottom:12px}
.scenario-button{background:linear-gradient(155deg,#65796530,#bcc9aa18),var(--field)}.scenario-toggle{background:radial-gradient(ellipse at top right,#edbd7133,transparent 70%),var(--field)}.scenario-tabs{border-left:3px solid #879fba}.scenario-popover{font-family:Georgia,serif;border:0;background:var(--field)}.scenario-popover.warm-page{background:#eedbc3;color:#32291e}.scenario-drawer{border-style:dashed}.scenario-composer{background:linear-gradient(140deg,#8da27825,#c8b58420),var(--field)}.scenario-action{border-radius:3px}.scenario-refinement{background:linear-gradient(135deg,#97b9c830,#d7b99420),var(--field)}
.duo-page:has(.scenario-composer) .live-feedback{position:static;margin-top:14px;white-space:normal;text-align:left;line-height:1.6;font-size:12px}
/* Content-led scenarios: each example has a layout suited to its task. */
.duo-context .scenario-card{padding:0;background:transparent;border:0;border-radius:0;gap:12px;margin:18px 0}.scenario-card>strong{font-size:18px}.trail-map{width:100%;height:auto;border-radius:14px;display:block}.scenario-metrics{display:flex;gap:22px;font-size:11px;color:var(--muted);flex-wrap:wrap}.scenario-metrics b{display:block;font-size:19px;color:var(--ink);font-weight:500}.trail-saved .scenario-button>small:after{content:' · Saved';color:var(--ink)}
.room-preview{height:120px;position:relative;overflow:hidden;border-radius:14px;background:#d8d1c7;transition:background .35s}.room-sofa{position:absolute;bottom:0;left:13%;height:45px;width:66%;background:#a49e91;border-radius:18px 18px 0 0}.lamp-shade{position:absolute;right:15%;top:18px;width:42px;height:32px;background:#f6edda;clip-path:polygon(20% 0,80% 0,100% 100%,0 100%)}.lamp-glow{position:absolute;width:140px;height:140px;right:0;top:0;background:radial-gradient(#ffe9b0aa,transparent 65%)}.room-caption{position:absolute;left:12px;top:12px;color:#39352f;font-size:11px}.evening-on .room-preview{background:#59514e}.evening-on .room-caption{color:#fff}.evening-on .lamp-glow{background:radial-gradient(#eebf7966,transparent 65%)}.home-devices{display:grid;gap:8px;font-size:11px}.home-devices span{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:8px}
.duo-stage .tab-content{text-align:left}.music-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px}.music-item{min-width:0;display:grid;gap:6px}.music-item strong{font-size:13px}.music-item small{font-size:10px;color:var(--muted)}.album-art{aspect-ratio:1;border-radius:8px;background:radial-gradient(ellipse at 75% 20%,#a5babe,transparent 65%),#355360;display:grid;place-items:center;font:italic 42px Georgia;color:#fff}.album-1,.album-3{background:linear-gradient(25deg,#9d544d,#e9c5a1)}.album-2,.album-4{background:repeating-radial-gradient(ellipse at top left,#73836b 0 14px,#d1d5b6 16px 20px)}
.duo-context .scenario-popover{padding:20px;border-radius:4px;background:var(--field);font-family:Georgia,serif}.scenario-popover h3{font:26px Georgia;margin:8px 0}.duo-context .scenario-popover .reader-passage{font-size:var(--reading-size,16px);line-height:1.8}.duo-context .scenario-popover.warm-page{background:#eedbc3;color:#32291e}.reader-size{display:grid;gap:10px;font-size:12px;margin-top:16px}.reader-size input{width:100%;accent-color:var(--ink)}
.parcel-illustration{height:100px;border-radius:12px;background:linear-gradient(140deg,#d8cec0,#eee7df);font-size:92px;color:#927a60;text-align:center;line-height:100px}.delivery-progress{display:flex;gap:5px}.delivery-progress i{height:4px;flex:1;background:#748b72;border-radius:4px}.delivery-progress i:last-child{background:var(--line)}.delivery-timeline{list-style:none;padding:0 0 0 12px;border-left:2px solid var(--line);display:grid;gap:18px}.delivery-timeline li{display:grid;gap:5px}.delivery-timeline small{font-size:10px;color:var(--muted)}.delivery-timeline strong{font-size:12px;font-weight:500}
.duo-context .chat-user{justify-self:end;background:var(--selected);padding:12px 15px;border-radius:16px 16px 3px 16px;max-width:90%;font-size:13px}.duo-context .chat-assistant{padding:10px 0;font-size:13px;line-height:1.7}.research-tags{display:flex;flex-wrap:wrap;gap:6px}.research-tags span{border:1px solid var(--line);border-radius:12px;padding:5px 8px;font-size:10px}.duo-stage .lane{min-height:100px}.duo-stage .demo{gap:8px}
@media(prefers-reduced-motion:reduce){.room-preview{transition:none}}