/* THE DEMOS' OWN LOOK, for the Website project's working page (concept-open-hero.html). Forked 2026-10-14 from website/adaptive.html
   (its Stage 1 "Eden in use", the running rows and the two diagrams), which stays as it is: it is the live waitlist site. Changed here,
   on Josh's word (2026-10-14: the examples "all dark mode... much closer to the real (if not the real) ui from eden studio"; "the image
   area border matched up to the top and bottom of the tabs"): the section on the canvas is dark and turns Light; every piece of Studio
   takes Studio's own dark rail values (Eden2.1/studio/index.html, --ib-*); one face, Source Sans 3, no mono; the frame is the page's
   own container, as tall as the four boxes. The page's structure is in concept-open-hero.css; this file is only what the demos draw. */
.eo-page{--ground:#121214;--ink:#f7f8f8;--ink-2:#a6a7a7;--ink-3:#6b6c6e;--line:rgba(255,255,255,.07);--line-2:rgba(255,255,255,.14);--flow:#9ee7ff, #c9b7ff, #f6c7e7, #fff4c2, #9ee7ff;
  /* Studio's dark rail (index.html, :root[data-mode="dark"] --ib-*) */
  --ib-font:"Source Sans 3",system-ui,sans-serif;--ib-panel:#1c1c1f;--ib-hover:#242427;--ib-open:#29292c;--ib-ink:#f4f4f5;--ib-val:#c2c2c7;--ib-label:#696a71;
  --ib-chev:#595a60;--ib-kind:#82838a;--ib-line:rgba(255,255,255,.09);--ib-pop:#1c1c1f;--ib-pop-shadow:0 18px 44px rgba(0,0,0,.55);--ib-well:#151517;--ib-well-on:#252528;--ib-opt:#a6a7ac;--ib-opt-on:rgba(255,255,255,.075);--ib-meta:#6f7077}
.sys{font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)} .num{font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@keyframes foil { to { background-position: 300% 300%; } }

/* ── EDEN IN USE: the four boxes (concept-open-hero.css draws them; their states are here) ── */
.ltab{position:relative;transition:background .2s}
.ltab-h,.ltab-b{transition:color .2s} .ltab:hover .ltab-h,.ltab.is-on .ltab-h{color:var(--eden-ink)} .ltab.is-on .ltab-b{color:var(--eden-ink-2)}
.ltab.is-on::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(115deg,#9ee7ff,#c9b7ff,#f6c7e7,#fff4c2,#9ee7ff,#c9b7ff);background-size:300% 300%;animation:foil 40s linear infinite;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.ltab__steps{display:flex;gap:4px;margin-top:6px} .ltab__steps i{width:22px;height:2px;background:rgba(255,255,255,.12);transition:background .3s}
.ltab__steps i.on{background:rgba(255,255,255,.45)} .ltab__steps i.is-now{background:linear-gradient(90deg,var(--flow))}
.ltab__now{display:block;min-height:14px;color:var(--ink-2)!important}
.ltab:not(.is-on) .ltab__steps,.ltab:not(.is-on) .ltab__now{opacity:.45}
/* the frame: the page's own container, from the first box's top to the last box's bottom, ringed in the spectrum; the set inside it is
   scaled so its 960-wide stage fills the frame's width, and its pieces sit inside it and over its edges, as on the newest site */
.eo-frame{position:relative}
.eo-frame::before,.eo-frame::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(115deg,#9ee7ff,#c9b7ff,#f6c7e7,#fff4c2,#9ee7ff,#c9b7ff);background-size:300% 300%;animation:foil 40s linear infinite;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);opacity:.55}
.eo-frame::after{padding:2px;filter:blur(10px);opacity:.3}
.eo-frame .live__space{position:absolute;left:0;width:125%}

.live__space { position: relative; }
.scene { position: absolute; left: 0; top: 0; width: 1200px; height: 760px; transform-origin: 0 0;
  --cr: 4px; --sp: 28px; --p: 1; --mx: 0; --my: 0; font-family: var(--ib-font); }
/* still and square (Josh, 2026-10-01: "do not skew the ui. lets keep it super clean looking"; "I dont think i need the ui
   moving around - its one too many gimmicks"): the pieces sit where they are; depth is only their shadow and their order.
   They fade in as you reach them. */
.fp { position: absolute; opacity: calc(var(--p) * 1); transition: opacity .3s linear;
  box-shadow: 0 50px 90px -24px rgba(0,0,0,.95), 0 18px 34px -14px rgba(0,0,0,.8); }
.fp--none { box-shadow: none; }
/* the chrome of Studio: quiet until the working cursor reaches it */
[data-g] { --gl: calc(.32 + .68 * var(--g, 0)); }
.fp[data-g] > * { opacity: var(--gl); transition: opacity .2s linear; }
.ui { background: #161618; border-radius: 14px; color: #ececec; box-shadow: 0 50px 90px -24px rgba(0,0,0,.95), 0 18px 34px -14px rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,255,255,.06); }
.chipk { display: inline-block; font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #9a9a9e; background: rgba(255,255,255,.07); border-radius: 5px; padding: 3px 7px; }

/* the section on the canvas: a real page fragment, a wireframe */
.sec { left: 60px; top: 104px; width: 660px; z-index: 1; --z: 0px; background: #c8c8cb; color: #111; padding: var(--sp) 26px; transition: background .5s, color .5s, padding .28s cubic-bezier(.3,.7,.2,1); }
.sec__eb { font-size: 10px; font-weight: 600; letter-spacing: .06em; color: #6b6b6b; margin-bottom: 4px; transition: color .5s; }
.sec__h { font-size: 24px; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 14px; }
.sec__f { display: flex; gap: 14px; align-items: center; font-size: 10px; color: #333; margin-bottom: 12px; transition: color .5s; }
.sec__f span::after { content: " \25BE"; } .sec__f b { font-weight: 700; border: 1px solid #a9a9ad; padding: 3px 6px; border-radius: 2px; transition: border-color .5s; }
.sec__f i { margin-left: auto; font-style: normal; color: #777; }
.pcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.pcard { position: relative; background: #d6d6d9; border-radius: var(--cr); padding: 10px; overflow: hidden; transition: border-radius .4s, background .5s, transform .3s, box-shadow .3s; }
.pcard__img { aspect-ratio: 4 / 4.2; border-radius: calc(var(--cr) * .6); margin: -10px -10px 10px; transition: border-radius .4s, transform .5s;
  background: repeating-conic-gradient(#bcbcc0 0 25%, #c7c7ca 0 50%) 0 0 / 10px 10px; }
.pcard__tag { display: inline-block; font-size: 7.5px; font-weight: 800; letter-spacing: .06em; background: #111; color: #fff; padding: 2px 4px; margin-bottom: 5px; transition: background .5s, color .5s; }
.pcard__row { display: flex; justify-content: space-between; font-size: 11px; margin-bottom: 4px; } .pcard__row b { font-weight: 700; }
.pcard__d { height: 5px; background: #b3b3b7; border-radius: 2px; margin-bottom: 3px; transition: background .5s; } .pcard__d.s { width: 66%; margin-bottom: 7px; }
.pcard__btn { display: flex; justify-content: center; gap: 4px; align-items: center; height: 22px; background: #111; color: #fff; font-size: 9px; font-weight: 700; border-radius: calc(var(--cr) * .5); transition: background .25s, color .5s, border-radius .4s, transform .15s; }
.pcard__btn::after { content: "\2192"; }
.pcard__btn.is-added { background: #1e7a1e; } .pcard__btn.is-added::after { content: "\2713"; }
.pcard__btn.is-press { transform: scale(.95); }
.pcard.is-hover { transform: translateY(-3px); box-shadow: 0 10px 22px -10px rgba(0,0,0,.35); } .pcard.is-hover .pcard__img { transform: scale(1.03); }
/* Dark mode: every color follows its token */
.sec.is-dark { background: #121214; color: #f2f2f2; } .sec.is-dark .sec__eb { color: #9a9a9a; } .sec.is-dark .sec__f { color: #ccc; } .sec.is-dark .sec__f b { border-color: #3a3a3e; }
.sec.is-dark .pcard { background: #1e1e21; } .sec.is-dark .pcard__d { background: #3b3b40; } .sec.is-dark .pcard__tag { background: #f2f2f2; color: #111; }
.sec.is-dark .pcard__btn { background: #f2f2f2; color: #111; } .sec.is-dark .pcard__img { background: repeating-conic-gradient(#2a2a2e 0 25%, #333338 0 50%) 0 0 / 10px 10px; }
.sec.is-dark .pcard__btn.is-added { background: #2f9a4f; color: #fff; }
/* the review strip the agent adds, from the library */
.rstrip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-height: 0; overflow: hidden; margin-top: 0; transition: max-height .7s cubic-bezier(.3,.7,.2,1), margin-top .7s; }
.rstrip.is-in { max-height: 80px; margin-top: 12px; }
.rstrip > div { background: #d6d6d9; border-radius: var(--cr); padding: 8px; opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .4s, background .5s, border-radius .4s; }
.rstrip.is-in > div { opacity: 1; transform: none; } .rstrip.is-in > div:nth-child(2) { transition-delay: .12s; } .rstrip.is-in > div:nth-child(3) { transition-delay: .24s; }
.rstrip i { display: block; height: 4px; border-radius: 2px; background: #b3b3b7; margin-bottom: 3px; } .rstrip i.s { width: 60%; }
.rstrip i.st { width: 40px; height: 6px; margin-bottom: 6px; background: repeating-linear-gradient(90deg, #c9a227 0 6px, transparent 6px 8px); }
.sec.is-dark .rstrip > div { background: #1e1e21; } .sec.is-dark .rstrip i:not(.st) { background: #3b3b40; }
/* Studio's selection: violet edge, square handles, a name tag, the sizing chip, the drag grip */
.sel { position: absolute; z-index: 5; pointer-events: none; border: 1px solid #716cff; opacity: 0; transition: opacity .15s; }
.sel.is-on { opacity: 1; }
.sel__tag { position: absolute; left: -1px; top: -17px; font-size: 8px; font-weight: 700; color: #fff; background: #716cff; padding: 2px 5px; border-radius: 3px; white-space: nowrap; }
.sel__fit { position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%); font-size: 8px; font-weight: 700; color: #fff; background: #716cff; padding: 2px 6px; border-radius: 3px; white-space: nowrap; }
.sel__grip { position: absolute; right: -1px; top: -17px; width: 14px; height: 13px; border-radius: 3px; background: #716cff; }
.sel__grip::after { content: ""; position: absolute; inset: 3px 4px; background: radial-gradient(#fff 0.8px, transparent 1px) 0 0 / 3px 3px; }
.sel i { position: absolute; width: 5px; height: 5px; background: #fff; border: 1px solid #716cff; }
.sel i:nth-of-type(1) { left: -3px; top: -3px; } .sel i:nth-of-type(2) { right: -3px; top: -3px; } .sel i:nth-of-type(3) { left: -3px; bottom: -3px; } .sel i:nth-of-type(4) { right: -3px; bottom: -3px; }
/* the hot spots a second click arms: the section's padding, as bands you drag */
.hotp { position: absolute; left: 0; right: 0; z-index: 4; height: var(--sp); opacity: 0; pointer-events: none; transition: opacity .2s, height .28s cubic-bezier(.3,.7,.2,1);
  background: repeating-linear-gradient(135deg, rgba(113,108,255,.26) 0 3px, rgba(113,108,255,.08) 3px 7px); }
.hotp--t { top: 0; } .hotp--b { bottom: 0; }
.sec.is-armed .hotp { opacity: 1; }
.tip { position: absolute; z-index: 9; font-size: 9px; font-weight: 700; color: #fff; background: #111; border-radius: 5px; padding: 4px 7px; white-space: nowrap; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
  opacity: 0; transition: opacity .15s; pointer-events: none; }
.tip.is-on { opacity: 1; }
.scene.is-interact .sel, .scene.is-interact .hotp { opacity: 0 !important; }

/* the inspector, as Studio draws it */
.insp { left: 800px; top: 120px; width: 240px; padding: 12px 10px; z-index: 2; --z: 70px; }
.insp__nm { display: flex; align-items: baseline; gap: 8px; font-size: 12px; font-weight: 600; margin: 7px 2px 10px; }
.insp__nm small { font-size: 8px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #77777c; }
.insp__h { font-size: 8px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #77777c; margin: 12px 2px 6px; }
.irow2 { display: flex; align-items: center; justify-content: space-between; background: #1e1e21; border-radius: 8px; padding: 0 9px; height: 29px; margin-bottom: 4px; font-size: 10px; font-weight: 600; transition: background .2s; }
.irow2 span { font-weight: 400; color: #b5b5b9; font-size: 9.5px; font-variant-numeric: tabular-nums; transition: color .2s; } .irow2 span::after { content: "  \2304"; color: #6b6b70; }
.irow2.is-on { background: #29292d; } .irow2.is-on span { color: #fff; }
.irow2 em { font-style: normal; display: inline-flex; align-items: center; gap: 8px; } .irow2 em::before { content: ""; width: 11px; height: 11px; border-radius: 50%; background: var(--fill, #fff); transition: background .4s; }
.seg2 { display: flex; background: #1e1e21; border-radius: 9px; padding: 3px; margin-bottom: 5px; }
.seg2 b { flex: 1; text-align: center; font-size: 9.5px; font-weight: 600; color: #8b8b90; padding: 5px 0; border-radius: 7px; transition: background .2s, color .2s; }
.seg2 b.on { background: #111113; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
/* a token dropdown: your Foundation's steps, nothing else */
.ddl { left: 870px; top: 0; width: 220px; padding: 5px; z-index: 6; --z: 110px; opacity: 0; transition: opacity .16s; }
.ddl.is-open { opacity: calc(var(--p) * 1); }
.ddl b, .ctx b { display: flex; justify-content: space-between; align-items: center; font-weight: 400; font-size: 11px; padding: 7px 10px; border-radius: 7px; color: #d5d5d8; }
.ddl b span, .ctx b span { color: #6f6f75; font-size: 10px; font-family: var(--ib-font); font-variant-numeric: tabular-nums; }
.ddl b.is-hl, .ctx b.is-hl { background: #2a2a2e; color: #fff; }
.ddl b.is-cur::before { content: "\2713"; margin-right: 8px; } .ddl b:not(.is-cur)::before { content: ""; width: 9px; margin-right: 8px; }
.ddl b > i { font-style: normal; margin-right: auto; }
/* the context menu */
.ctx { width: 230px; padding: 5px; z-index: 7; --z: 120px; opacity: 0; transition: opacity .14s; }
.ctx.is-open { opacity: calc(var(--p) * 1); }
.ctx hr { border: 0; height: 1px; background: rgba(255,255,255,.06); margin: 4px 6px; }
/* Edit or Interact */
.mode2 { left: 60px; top: 30px; z-index: 3; --z: 40px; display: flex; padding: 3px; border-radius: 10px; }
.mode2 b { font-size: 11px; font-weight: 600; color: #8b8b90; padding: 6px 14px; border-radius: 7px; transition: background .2s, color .2s; }
.mode2 b.on { background: #2a2a2e; color: #fff; }
/* your agent: just the conversation, loose on the page */
.talk { left: 36px; bottom: 26px; width: 262px; z-index: 3; --z: 90px; display: flex; flex-direction: column; gap: 8px; }
/* the live demo's conversation sits in its own panel, the agent app (Josh, 2026-10-01: "maybe chat is inside another container?") */
.talk.ui { left: 760px; right: auto; bottom: 30px; width: 270px; padding: 12px; gap: 8px; }
.talk__h { font-size: 8.5px; margin: 0 2px 2px; color: #77777c; }
.talk__log { display: flex; flex-direction: column; gap: 7px; }
.talk.ui p { font-size: 11px; line-height: 16px; padding: 8px 10px; border-radius: 10px; background: #1e1e21; box-shadow: none; }
.talk.ui p.u { background: #2a2a2e; }
.talk.ui .talk__in { background: #111113; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08) !important; padding: 10px 12px !important; min-height: 36px; }
.talk.ui .talk__in.is-on { box-shadow: inset 0 0 0 1px rgba(255,255,255,.3) !important; }
.talk p { margin: 0; font-size: 12px; line-height: 17px; padding: 9px 12px; border-radius: 12px; background: #161618; color: #cfcfd3; box-shadow: 0 30px 60px -20px rgba(0,0,0,.95), inset 0 0 0 1px rgba(255,255,255,.06); }
.talk p.u { align-self: flex-end; background: #232327; color: #fff; }
.talk p.is-new { animation: rise .35s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
.chipe { display: inline-block; font-size: 10px; font-weight: 600; color: #fff; padding: 1px 7px; border-radius: 999px; margin-right: 5px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
.talk__in { min-height: 40px; padding: 11px 14px !important; color: #fff !important; transition: box-shadow .2s; }
.talk__in.is-on { box-shadow: 0 30px 60px -20px rgba(0,0,0,.95), inset 0 0 0 1px rgba(255,255,255,.3) !important; }
.talk__in .t:empty::before { content: "Ask your agent"; color: #6f6f75; }
.talk__in .caret { display: none; width: 1px; height: 13px; background: #fff; vertical-align: -2px; margin-left: 1px; animation: blink 1s steps(1) infinite; }
.talk__in.is-on .caret { display: inline-block; }
/* a set put away fades, it is never removed, so it keeps its place on the stage */
.fp.is-off { opacity: 0 !important; pointer-events: none; }
.scene.is-swap .fp { opacity: 0 !important; transition: opacity .35s ease; }
.lcode { left: 760px; top: 110px; width: 300px; height: 300px; z-index: 2; --z: 70px; overflow: hidden; }
.lcode .fcode__bar b { font-size: 11px; } .lcode pre { margin: 0; padding: 14px 16px; font-family: var(--ib-font); font-variant-numeric: tabular-nums; font-size: 10.5px; line-height: 17px; color: #cfcfd3; white-space: pre-wrap; }
.ticks i { width: 22px; }
.fcode__bar { display: flex; gap: 2px; padding: 8px; border-bottom: 1px solid rgba(255,255,255,.06); }
.fcode__bar b { font-size: 11px; font-weight: 600; color: #8b8b90; padding: 5px 10px; border-radius: 7px; } .fcode__bar b small { font-weight: 400; color: #6f6f75; margin-left: 4px; }
.fcode__bar b.on { background: #2a2a2e; color: #fff; }

/* drift, and Health as Studio's dock draws it */
/* drift: a value off the system turns amber, a snapped one green, and Eden says which */
.irow2.is-off span { color: #e0954a !important; } .irow2.is-off span::before { content: "\25CF  "; color: #e0954a; }
.irow2.is-ok span { color: #3fbf6a !important; } .irow2.is-ok span::before { content: "\2713  "; color: #3fbf6a; }
/* HEALTH, as Studio's dock draws it (Eden2.1/studio .hl-*): a count, kinds with a warn dot, scope and number, and inside
   each kind what it costs and the one action that fixes each row */
.hlth { left: 690px; top: 84px; width: 400px; padding: 16px 8px 18px; z-index: 2; --z: 70px; }   /* the largest piece: the chapter is about it */
.hlth .chipk { margin-left: 12px; font-size: 10px; }
.hl__head { padding: 12px 12px 10px; } .hl__n { display: block; font-size: 17px; font-weight: 500; color: #ececec; }
.hl__sub { display: block; margin-top: 5px; font-size: 12.5px; line-height: 1.5; color: #8b8b90; }
.hl__kind { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 10px; overflow: hidden; max-height: 50px; transition: background .2s, max-height .35s ease, opacity .3s, padding .35s; }
.hl__kind.is-on { background: #1e1e21; } .hl__kind.is-gone { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; }
.hl__dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: #e0954a; }
.hl__kt { flex: 1; min-width: 0; font-size: 14px; font-weight: 500; } .hl__scope { font-size: 9.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: #6b6b70; }
.hl__c { font-size: 12.5px; color: #6b6b70; font-variant-numeric: tabular-nums; } .hl__chev { width: 12px; text-align: center; font-size: 10px; color: #6b6b70; transition: transform .2s; }
.hl__kind.is-open .hl__chev { transform: rotate(180deg); }
.hl__body { padding: 0 12px 0 28px; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .35s ease, opacity .3s, padding .35s; }
.hl__body.is-open { max-height: 340px; opacity: 1; padding-bottom: 6px; }
.hl__cost { margin: 8px 0 10px; font-size: 12.5px; line-height: 1.5; color: #8b8b90; }
.hl__row { padding: 7px 0; overflow: hidden; max-height: 100px; transition: max-height .35s ease, opacity .3s, padding .35s; }
.hl__row.is-gone { max-height: 0; opacity: 0; padding: 0; }
.hl__row b { display: block; font-size: 13.5px; font-weight: 500; line-height: 1.45; color: #ececec; }
.hl__d { display: block; margin-top: 4px; padding-left: 10px; border-left: 1px solid rgba(255,255,255,.1); font-size: 12.5px; line-height: 1.45; color: #8b8b90; transition: color .3s; }
.hl__fix { display: inline-block; margin-top: 6px; font-size: 12px; color: #8b8b90; transition: color .2s; }
.hl__fix.is-on { color: #ececec; text-decoration: underline; text-underline-offset: 2px; }
.hl__row.is-done .hl__d { color: #3fbf6a; } .hl__row.is-held .hl__d { color: #e0954a; } .hl__row.is-done .hl__fix { visibility: hidden; }
/* what Health found, drawn on the page until it is fixed */
.pcard.d-pad { padding: 14px; } .pcard.d-pad .pcard__img { margin: -14px -14px 10px; }
.pcard.d-fill { background: #e4e4e7; } .pcards.d-gap { gap: 22px; }
.pcard__btn.d-atom { background: #3a3a3f; border-radius: 0; font-weight: 500; text-transform: none; } .pcard__btn.d-atom::after { content: none; }
.is-flag { outline: 1.5px solid #e0954a; outline-offset: 2px; transition: outline-color .3s; }

/* ── THE RUNNING ROWS: the track is doubled by the page's script and runs; a hover holds it ── */
.eo-tick-view{-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.eo-tick-track.is-run{animation:tick 79s linear infinite}   /* the top row's pace (60s for 16), for all 21 */ [data-eo-rev] .eo-tick-track.is-run{animation-direction:reverse;animation-duration:50s}
.eo-tick:hover .eo-tick-track{animation-play-state:paused}
@keyframes tick{to{transform:translateX(calc(-50% - var(--eden-space-10) / 2))}}   /* the track holds its chips twice */
@media (prefers-reduced-motion: reduce){.eo-tick-track.is-run{animation:none}}

/* ── WHERE IT SITS, AND ALWAYS ON-SYSTEM ── */
.flow__box { position: relative; }
.flow__area { position: absolute; left: 0; top: 0; width: 700px; height: 300px; transform-origin: 0 0; font-family: "Source Sans 3", system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.flow__area svg { position: absolute; inset: 0; width: 700px; height: 300px; overflow: visible; }
.flow__area svg path:not([d^="M0 0"]) { fill: none; stroke: rgba(255,255,255,.28); stroke-width: 1.2; stroke-dasharray: var(--len); stroke-dashoffset: var(--len); transition: stroke-dashoffset .9s cubic-bezier(.3,.7,.2,1); }
.flow__area svg path.is-dashed { stroke-dasharray: 4 4; stroke-dashoffset: 0; opacity: 0; transition: opacity .6s; }
.flow.is-in svg path:not([d^="M0 0"]) { stroke-dashoffset: 0; } .flow.is-in svg path.is-dashed { opacity: 1; }
.flow__area marker path { fill: rgba(255,255,255,.4); }
.flow__spark { fill: #fff; filter: drop-shadow(0 0 4px #c9b7ff) drop-shadow(0 0 8px #9ee7ff); opacity: 0; }
.fn, .fg, .fchk { position: absolute; opacity: 0; transform: translateY(10px) scale(.97); transition: opacity .5s ease, transform .5s cubic-bezier(.3,.7,.2,1); }
.flow.is-in .fn, .flow.is-in .fg, .flow.is-in .fchk { opacity: 1; transform: none; }
.flow.is-in [data-id] { transition-delay: calc(var(--d, 0) * 1s); }
.fn { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; height: 36px; padding: 0 14px; border-radius: 10px; background: #161618; color: #e6e6e9; font-size: 12px;
  box-shadow: 0 20px 40px -16px rgba(0,0,0,.95), inset 0 0 0 1px rgba(255,255,255,.08); }
.fn i { width: 7px; height: 7px; border-radius: 2px; background: #6b6c6e; } .fn em { font-style: normal; color: #8b8b90; }
.fn--ok i { background: #3fbf6a; } .fn--off i { background: #e0954a; } .fn--flag { box-shadow: 0 20px 40px -16px rgba(0,0,0,.95), inset 0 0 0 1px rgba(224,149,74,.35); }
.fg { display: grid; grid-template-columns: auto auto; gap: 7px; padding: 11px; border-radius: 14px; border: 1px dashed rgba(255,255,255,.22); background: rgba(22,22,24,.6); }
.fg b { font-weight: 400; font-size: 11.5px; color: #e6e6e9; padding: 8px 10px; border-radius: 9px; background: #161618; box-shadow: 0 14px 28px -12px rgba(0,0,0,.95), inset 0 0 0 1px rgba(255,255,255,.08); text-align: center; }
.fg__l { position: absolute; left: 50%; top: -22px; transform: translateX(-50%); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #8b8b90; }
.fg--list { grid-template-columns: 1fr; border-style: solid; border-color: rgba(255,255,255,.1); } .fg--list .fn { position: static; opacity: 1; transform: none; box-shadow: none; background: transparent; height: 26px; padding: 0 6px; } .fg--list .fn em { margin-left: auto; padding-left: 14px; }
.fchk { width: 90px; height: 90px; border-radius: 16px; border: 1px dashed rgba(255,255,255,.22); display: grid; place-items: center; }
.fchk i { width: 52px; height: 52px; border-radius: 10px; background: radial-gradient(rgba(255,255,255,.55) 1.2px, transparent 1.6px) 0 0 / 8px 8px, #161618; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.flow.is-in .fchk i { animation: chkpulse 2.4s ease-in-out 2s infinite; }
@keyframes chkpulse { 50% { box-shadow: inset 0 0 0 1px rgba(201,183,255,.6), 0 0 24px -4px rgba(201,183,255,.5); } }
.flow__say { margin: 22px 0 0; max-width: 34em; font-size: 15px; line-height: 23px; color: var(--ink-2); } .flow__say b { color: var(--ink); font-weight: 400; }

/* ── DARK, AND STUDIO'S OWN CHROME (Josh, 2026-10-14) ──
   The section on the canvas starts in Dark, every colour following its token, and the context menu turns it Light. Every piece of
   Studio takes the dark rail's values: the panel, the fields, the segmented control, the token menu and the context menu as Studio
   draws them (index.html #instrumentBar, .al-field, .token-popover, .menu). */
.scene .ui{background:var(--ib-panel);color:var(--ib-ink);font-family:var(--ib-font);
  box-shadow:0 50px 90px -24px rgba(0,0,0,.95),0 18px 34px -14px rgba(0,0,0,.8),inset 0 0 0 1px var(--ib-line)}
.scene .chipk{font-size:9.5px;font-weight:600;letter-spacing:.08em;color:var(--ib-kind);background:transparent;border-radius:6px;box-shadow:inset 0 0 0 1px var(--ib-line);padding:3px 7px}
.scene .insp{width:260px;padding:14px 12px}
.scene .insp__nm{font-size:13px;font-weight:600;color:var(--ib-ink)} .scene .insp__nm small{font-size:9px;color:var(--ib-label)}
.scene .insp__h{font-size:10px;font-weight:600;letter-spacing:.12em;color:var(--ib-label);margin:14px 2px 7px}
.scene .irow2{background:var(--ib-hover);border-radius:8px;height:28px;padding:0 10px;font-size:12px;font-weight:400;color:var(--ib-ink)}
.scene .irow2 span{color:var(--ib-val);font-size:11.5px} .scene .irow2 span::after{content:"  \2304";color:var(--ib-chev)}
.scene .irow2.is-on{background:var(--ib-open)} .scene .irow2.is-on span{color:var(--ib-ink)}
.scene .seg2{background:var(--ib-well);border-radius:8px} .scene .seg2 b{font-size:11px;font-weight:500;color:var(--ib-opt)}
.scene .seg2 b.on{background:var(--ib-well-on);color:var(--ib-ink);box-shadow:none}
.scene .ddl,.scene .ctx{background:var(--ib-pop);box-shadow:var(--ib-pop-shadow),inset 0 0 0 1px var(--ib-line);border-radius:10px}
.scene .ddl b,.scene .ctx b{font-size:12px;color:var(--ib-opt)} .scene .ddl b span,.scene .ctx b span{font-family:var(--ib-font);font-variant-numeric:tabular-nums;color:var(--ib-meta);font-size:11px}
.scene .ddl b.is-hl,.scene .ctx b.is-hl{background:var(--ib-opt-on);color:var(--ib-ink)}
.scene .ctx hr{background:var(--ib-line)}
.scene .mode2{background:var(--ib-panel)} .scene .mode2 b{font-size:12px;font-weight:500;color:var(--ib-label)} .scene .mode2 b.on{background:transparent;color:var(--ib-ink);font-weight:600}
.scene .talk.ui p{background:var(--ib-hover);font-size:12px} .scene .talk.ui p.u{background:var(--ib-open)} .scene .talk.ui .talk__in{background:var(--ib-well)!important}
.scene .talk__h{color:var(--ib-label)}
.scene .lcode pre{font-family:var(--ib-font);font-variant-numeric:tabular-nums;font-size:11.5px;color:var(--ib-val)}
.scene .fcode__bar{border-bottom-color:var(--ib-line)} .scene .fcode__bar b.on{background:var(--ib-open)}
/* the section: Dark first */
.scene .sec{background:#121214;color:#f2f2f2} .scene .sec__eb{color:#9a9a9a} .scene .sec__f{color:#ccc} .scene .sec__f b{border-color:#3a3a3e} .scene .sec__f i{color:#8b8b90}
.scene .pcard{background:#1e1e21} .scene .pcard__d{background:#3b3b40} .scene .pcard__tag{background:#f2f2f2;color:#111}
.scene .pcard__btn{background:#f2f2f2;color:#111} .scene .pcard__img{background:repeating-conic-gradient(#2a2a2e 0 25%,#333338 0 50%) 0 0/10px 10px}
.scene .pcard__btn.is-added{background:#2f9a4f;color:#fff}
.scene .rstrip>div{background:#1e1e21} .scene .rstrip i:not(.st){background:#3b3b40}
.scene .pcard.d-fill{background:#2a2a2e}
/* …and Light, from the context menu */
.scene .sec.is-light{background:#c8c8cb;color:#111} .scene .sec.is-light .sec__eb{color:#6b6b6b} .scene .sec.is-light .sec__f{color:#333} .scene .sec.is-light .sec__f b{border-color:#a9a9ad}
.scene .sec.is-light .sec__f i{color:#777}
.scene .sec.is-light .pcard{background:#d6d6d9} .scene .sec.is-light .pcard__d{background:#b3b3b7} .scene .sec.is-light .pcard__tag{background:#111;color:#fff}
.scene .sec.is-light .pcard__btn{background:#111;color:#fff} .scene .sec.is-light .pcard__img{background:repeating-conic-gradient(#bcbcc0 0 25%,#c7c7ca 0 50%) 0 0/10px 10px}
.scene .sec.is-light .rstrip>div{background:#d6d6d9} .scene .sec.is-light .rstrip i:not(.st){background:#b3b3b7}
/* the frame is Studio's canvas, dark: its dotted ground (Studio's own grid dots) under the section, which sits on it as a board does */
.eo-frame{background:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1.3px) 0 0/16px 16px,#0e0e10;overflow:visible}
.scene .sec{background:#161618;box-shadow:0 50px 90px -24px rgba(0,0,0,.95),0 18px 34px -14px rgba(0,0,0,.8),inset 0 0 0 1px rgba(255,255,255,.07)}
.scene .sec.is-light{background:#c8c8cb}
/* on a phone the set fits inside its frame: nothing over the edges, so the page never scrolls sideways */
@media (max-width:767px){.eo-frame{overflow:hidden}.eo-frame .live__space{width:100%}}
/* no Edit / Interact switch on the set (Josh, 2026-10-15: "remove this element") */
.scene .mode2{display:none}

/* ── LAID OUT AS STUDIO IS (2026-10-15): the set fills the frame; the section is centred in the canvas; Studio's tool strip at the
   left; the rail, the agent app, the code and Health docked at the right, as Studio's rail is ── */
.eo-frame .live__space{position:absolute;inset:0;width:100%;height:100%!important;overflow:hidden;border-radius:inherit}
.scene .sec{left:var(--sec-x, 150px);top:var(--sec-y, 104px);transition:background .5s,color .5s,padding .28s cubic-bezier(.3,.7,.2,1),top .4s ease}
.scene .ld-tools{position:absolute;left:16px;top:16px;bottom:16px;z-index:3;box-shadow:none;opacity:1}
.scene .ld-tools .tools{position:relative!important;left:0!important;top:0!important;bottom:auto!important;height:auto!important;transform:none!important}
.scene .ld-tools .rail-stack{position:relative!important;top:0!important;bottom:auto!important}
.scene .insp,.scene .talk.ui,.scene .lcode,.scene .hlth{left:auto!important;right:16px!important;top:16px!important;bottom:auto!important;width:300px!important}
.scene .hlth{width:340px!important}
.scene .lcode{height:auto!important;max-height:calc(100% - 32px)}
.scene .talk.ui{top:auto!important;bottom:16px!important}

/* ── THE STORE SECTION, AS A REAL PAGE IN A MODERN DARK MODE (Josh, 2026-10-15: "the ui in the examples needs to look more real but we
   can make it appear darker"): real words, prices, ratings and reviews; quiet surfaces, one hairline, white actions. Pictures stay the
   checkerboard: the agent does not draw them ── */
.scene .sec{background:#0e0e10;color:#ededef;border-radius:12px;box-shadow:0 50px 90px -24px rgba(0,0,0,.95),inset 0 0 0 1px rgba(255,255,255,.07);font-family:var(--ib-font)}
.scene .sec__eb{font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#8b8b92}
.scene .sec__h{font-size:26px;font-weight:600;letter-spacing:-.015em;color:#f4f4f5}
.scene .sec__f{gap:8px;font-size:11px;color:#c2c2c7;margin-bottom:14px}
.scene .sec__f span{padding:5px 10px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)} .scene .sec__f span::after{content:" \25BE";color:#6f7077}
.scene .sec__f b{font-weight:500;border:0;padding:5px 4px;color:#8b8b92}
.scene .sec__f i{color:#8b8b92}
.scene .pcards{gap:12px}
.scene .pcard{background:#16161a;border-radius:10px;padding:10px 10px 12px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.scene .pcard__img{border-radius:7px;margin:-4px -4px 10px;aspect-ratio:4/4.4;background:repeating-conic-gradient(#1d1d21 0 25%,#222227 0 50%) 0 0/12px 12px}
.scene .pcard__tag{font-size:8px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;background:rgba(255,255,255,.08);color:#d4d4d8;border-radius:4px;padding:3px 6px;margin-bottom:7px}
.scene .pcard__row{font-size:12px;margin-bottom:2px;color:#ededef} .scene .pcard__row span{font-weight:500} .scene .pcard__row b{font-weight:600}
.scene .pcard__meta{margin:0 0 4px;font-size:10px;color:#8b8b92}
.scene .pcard__stars{margin:0 0 9px;font-size:9px;letter-spacing:.06em;color:#e4e4e7} .scene .pcard__stars span{letter-spacing:0;color:#8b8b92;margin-left:3px}
.scene .pcard__btn{height:26px;border-radius:7px;background:#f4f4f5;color:#111113;font-size:10px;font-weight:600;letter-spacing:0;text-transform:none}
.scene .pcard__btn::after{content:none}
.scene .pcard__btn.is-added{background:#f4f4f5;color:#111113} .scene .pcard__btn.is-added::after{content:"  \2713"}
.scene .rstrip>div{background:#16161a;border-radius:10px;padding:10px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.scene .rv__s{margin:0 0 5px;font-size:9px;letter-spacing:.06em;color:#e4e4e7} .scene .rv__q{margin:0 0 6px;font-size:10.5px;line-height:1.4;color:#d4d4d8} .scene .rv__n{margin:0;font-size:9.5px;color:#8b8b92}
.scene .rstrip.is-in{max-height:120px}
/* Light, from the context menu: the same page in Eden's light mode */
.scene .sec.is-light{background:#fafafa;color:#18181b;box-shadow:0 50px 90px -24px rgba(0,0,0,.95),inset 0 0 0 1px rgba(0,0,0,.06)}
.scene .sec.is-light .sec__h,.scene .sec.is-light .pcard__row{color:#18181b} .scene .sec.is-light .sec__f{color:#52525b}
.scene .sec.is-light .sec__f span{box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.scene .sec.is-light .pcard,.scene .sec.is-light .rstrip>div{background:#ffffff;box-shadow:inset 0 0 0 1px rgba(0,0,0,.07)}
.scene .sec.is-light .pcard__img{background:repeating-conic-gradient(#ececef 0 25%,#f4f4f5 0 50%) 0 0/12px 12px}
.scene .sec.is-light .pcard__tag{background:rgba(0,0,0,.06);color:#3f3f46} .scene .sec.is-light .pcard__stars,.scene .sec.is-light .rv__s{color:#18181b}
.scene .sec.is-light .pcard__btn{background:#18181b;color:#fafafa} .scene .sec.is-light .rv__q{color:#3f3f46}
/* what Health found, drawn on the page until it is fixed, in this page's own terms */
.scene .pcard.d-fill{background:#26262b} .scene .pcard__btn.d-atom{background:#3a3a3f;color:#ededef;border-radius:0;font-weight:500}

/* the small labels in the demos are Studio's system voice, in the one face (they fell back to the browser's serif) */
.eo-page .sys,.scene,.td{font-family:var(--ib-font)}

/* ── TRY A TOOL (site-tool-demo.js): Studio's chrome inside the frame, where Studio pins it to the window ── */
.td{position:relative;overflow:hidden;border-radius:var(--eden-r-14);background:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1.3px) 0 0/16px 16px,#0e0e10;
  box-shadow:inset 0 0 0 1px var(--eden-line);user-select:none;-webkit-user-select:none}
.td-canvas{position:absolute;inset:0;display:grid;place-items:center;padding:24px 332px 24px 88px}
.td-board{width:min(520px,100%)}
.td-sec{display:flex;flex-direction:column;align-items:stretch;background:var(--eden-black);color:var(--eden-ink);border-radius:12px;
  box-shadow:0 50px 90px -24px rgba(0,0,0,.95),inset 0 0 0 1px var(--eden-line);transition:padding .25s ease,gap .25s ease,background .4s ease}
.td-part{cursor:grab;position:relative;transition:transform .2s ease}
.td-part.td-moving{cursor:grabbing;opacity:.7;transition:none;z-index:5}
.td-img{width:100%;background:repeating-conic-gradient(#1d1d21 0 25%,#222227 0 50%) 0 0/12px 12px;box-shadow:inset 0 0 0 1px var(--eden-line)}
.td-sec[data-scheme="light"] .td-img{background:repeating-conic-gradient(#ececef 0 25%,#f4f4f5 0 50%) 0 0/12px 12px}
.td-shape{width:140px;height:84px;align-self:flex-start} .td-shape--ellipse{width:96px;height:96px} .td-shape--line{width:60%;height:2px}
.td-shape--star{width:64px;height:64px;background:none!important} .td-shape--star svg{width:100%;height:100%;fill:var(--eden-ink)}
.td .sel{position:absolute;z-index:6;pointer-events:none}
.td-drop{position:absolute;z-index:7;height:2px;border-radius:2px;background:#716cff;pointer-events:none}
.td-ghost{position:fixed;left:0;top:0;z-index:3000;pointer-events:none;opacity:.85;width:auto!important;transform-origin:0 0}
.td-hint{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);margin:0;padding:8px 14px;border-radius:999px;z-index:8;
  font-size:12px;color:#c2c2c7;background:rgba(18,18,20,.9);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);pointer-events:none;white-space:nowrap}
.td-hint[hidden]{display:none}
/* Studio's pieces, put in the frame */
.td-tools{position:absolute;left:16px;top:16px;z-index:9}
.td-tools [data-sx-id="tools"],.scene .ld-tools [data-sx-id="tools"]{position:relative!important;left:0!important;top:0!important;bottom:auto!important;height:auto!important;transform:none!important}
.td-tools [data-sx-id="railStack"],.scene .ld-tools [data-sx-id="railStack"]{position:relative!important;top:0!important;bottom:auto!important;inset:auto!important}
.td-fly{position:absolute;left:84px;top:16px;bottom:16px;z-index:9;display:none}
.td-fly.is-on{display:block}
.td-fly [data-sx-id="dock"],.td-fly [data-sx-id="fdock"]{position:absolute!important;left:0!important;top:0!important;bottom:0!important;height:auto!important;width:280px!important;max-height:none!important;transform:none!important;opacity:1!important;visibility:visible!important}
.td-fly [data-sx-id="railFly"]{position:absolute!important;left:0!important;top:0!important;transform:none!important;opacity:1!important;visibility:visible!important}
.td-fly .lib-filter{display:none}
.td-rail{position:absolute;right:16px;top:16px;bottom:16px;width:280px;z-index:9;overflow:auto;scrollbar-width:none}
.td-rail[hidden]{display:none}
.td-rail [data-sx-id="instrumentBar"]{position:relative!important;right:auto!important;top:auto!important;width:100%!important;max-height:none!important}
.td-pop,.td-menu{position:absolute;inset:0;z-index:20;pointer-events:none}
.td-pop[hidden],.td-menu[hidden]{display:none}
.td-pop .token-popover{position:absolute!important;display:block!important;pointer-events:auto;max-height:320px}
.td-menu .menu{position:absolute!important;display:block!important;pointer-events:auto}
.td-layers{display:flex;flex-direction:column;gap:2px;padding:8px}
.td-layer{all:unset;cursor:pointer;padding:7px 10px;border-radius:7px;font-size:12px;color:#c2c2c7}
.td-layer--in{padding-left:26px} .td-layer:hover{background:rgba(255,255,255,.05)} .td-layer.on{background:rgba(113,108,255,.18);color:#f4f4f5}
@media (max-width:767px){.td-canvas{padding:16px 16px 16px 76px}.td-rail{display:none}.td-fly{left:76px;right:16px}}

/* ── TRY A TOOL, FLOATING (Josh, 2026-10-15: "I dont think the ui... needs to even be enclosed by the frame and background... the toolbar
   floating freely and interactive then space then the component then space then the right rail - all floating freely") ── */
.td{background:none;box-shadow:none;overflow:visible;border-radius:0}
.td-canvas{padding:0 360px 0 120px}
.td-tools{left:0;top:50%;transform:translateY(-50%)}
.td-fly{left:76px;top:0;bottom:auto;height:100%}
.td-rail{right:0;top:0;bottom:auto;max-height:100%;border-radius:14px;box-shadow:0 30px 80px -20px rgba(0,0,0,.85)}
.td-tools [data-sx-id="tools"]{box-shadow:0 30px 80px -20px rgba(0,0,0,.85)}
.td-fly [data-sx-id="dock"],.td-fly [data-sx-id="fdock"]{border-radius:14px;box-shadow:0 30px 80px -20px rgba(0,0,0,.85)}
.td-sec{box-shadow:0 40px 100px -30px rgba(0,0,0,.9),inset 0 0 0 1px var(--eden-line)}
@media (max-width:767px){.td-canvas{padding:0 0 0 72px}.td-tools{top:0;transform:none}}

/* ── FEATURES, SHOWN WORKING (forked 2026-10-15 from website/adaptive.html's "features, shown working", with the pieces only the
   features use and the glowing frame they sit in); site-feature-demo.js plays them ── */
.eo-fstage { position: relative; }
.fscene { position: absolute; left: 0; top: 0; width: 460px; height: 300px; transform-origin: 0 0; --cr: 4px; --sp: 14px; --gp: 8px; --p: 1; --mx: 0; --my: 0;
  font-family: var(--ib-font); }
.fscene .msec { left: 4px; top: 40px; width: 304px; padding: var(--sp) 12px; }
.fscene .sec__h { font-size: 12px; margin-bottom: 8px; } .fscene .sec__eb { font-size: 6.5px; }
.fscene .pcards { gap: var(--gp); transition: gap .25s cubic-bezier(.3,.7,.2,1); }
.fscene .pcard { padding: 6px; } .fscene .pcard__img { margin: -6px -6px 6px; }
.fscene .pcard__tag { font-size: 5px; } .fscene .pcard__row { font-size: 7px; } .fscene .pcard__d { height: 3px; }
.fscene .pcard__btn { height: 13px; font-size: 6px; }
.fscene .mode2 { left: 4px; top: 0; } .fscene .mode2 b { font-size: 10px; padding: 5px 11px; }
.minsp { left: 318px; top: 54px; width: 142px; padding: 10px 8px; z-index: 2; --z: 60px; }
.minsp__nm { display: block; font-size: 11px; font-weight: 600; margin: 0 2px 8px; }
.minsp .irow2 { height: 28px; font-size: 10px; padding: 0 8px; } .minsp .irow2 span { font-size: 9.5px; }
.fscene .ddl { width: 150px; } .fscene .ctx { width: 170px; } .fscene .ddl b, .fscene .ctx b { font-size: 10px; padding: 6px 8px; }
.fscene .ddl b em { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
.fscene .fm-talk { left: 318px; top: 40px; bottom: auto; width: 142px; gap: 6px; }
.fscene .fm-talk p { font-size: 10.5px; line-height: 14px; padding: 7px 9px; }
.fscene .fm-talk .chipe { font-size: 8.5px; }
/* a promo banner the agent adds */
.mban { display: flex; align-items: center; gap: 6px; background: #111; border-radius: var(--cr); padding: 0 10px; height: 0; overflow: hidden; margin-bottom: 0; opacity: 0;
  transition: height .6s cubic-bezier(.3,.7,.2,1), margin .6s, opacity .5s; }
.mban i { display: block; height: 4px; width: 70px; background: #fff; border-radius: 2px; } .mban i.s { width: 40px; background: #777; }
.mban span { margin-left: auto; font-size: 6px; font-weight: 700; background: #fff; color: #111; padding: 3px 8px; border-radius: 999px; }
.msec.is-in .mban { height: 28px; margin-bottom: 8px; opacity: 1; }
/* gap hot spots, armed by a second click */
.hotg { position: absolute; top: 0; bottom: 0; right: calc(var(--gp) * -1); width: var(--gp); z-index: 4; opacity: 0; transition: opacity .2s, width .25s, right .25s;
  background: repeating-linear-gradient(135deg, rgba(113,108,255,.3) 0 3px, rgba(113,108,255,.1) 3px 7px); }
.pcard:last-child .hotg { display: none; }
.msec.is-gaps .hotg { opacity: 1; }
.pcard { overflow: visible; } .pcard__img { overflow: hidden; }
/* focus, and the master opened from a hold */
.msec.is-focus { box-shadow: 0 0 0 999px rgba(18,18,20,.55), 0 50px 90px -24px rgba(0,0,0,.95); }
.msec.is-focus2 > :not(.pcards):not(.sel):not(.mchip):not(.hotp) { opacity: .15; transition: opacity .3s; }
.msec.is-focus2 .pcards { transform: scale(1.04); transition: transform .4s cubic-bezier(.3,.7,.2,1); }
.msec.is-master > :not(.pcards):not(.sel):not(.mchip) { opacity: .15; }
.msec.is-master .pcard:not(.is-pick) { opacity: .2; }
.mchip { position: absolute; right: 8px; top: 8px; z-index: 6; font-size: 8px; font-weight: 700; color: #fff; background: #716cff; padding: 3px 7px; border-radius: 4px; opacity: 0; transition: opacity .2s; }
.mchip.is-on { opacity: 1; }
/* Brand mode, and a fill swapped to a token */
.sec.is-brand { background: #0b5fa5; color: #fff; } .sec.is-brand .sec__eb { color: #cfe3f5; } .sec.is-brand .pcard__btn { background: #fff; color: #0b5fa5; }
.pcard.is-swap { background: #002847 !important; color: #fff; } .pcard.is-swap .pcard__d { background: #2b4a66; } .pcard.is-swap .pcard__btn { background: #fff; color: #002847; }
.pcard.is-swap .pcard__tag { background: #fff; color: #002847; }
/* the hold ring around the hand */
.ghost__hold { position: absolute; left: -20px; top: -20px; opacity: 0; transform: rotate(-90deg); }
.ghost__hold circle { fill: none; stroke: #c9b7ff; stroke-width: 2.5; stroke-dasharray: 101; stroke-dashoffset: 101; }
.ghost__hold.is-on { opacity: 1; } .ghost__hold.is-on circle { animation: holdfill var(--hold, 700ms) linear forwards; }
@keyframes holdfill { to { stroke-dashoffset: 0; } }
/* the team, the code, a clip */
.fteam { left: 70px; top: 24px; width: 320px; padding: 14px; z-index: 2; }
.fteam__h { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 8px; } .fteam__h span { color: #8b8b90; font-size: 11px; }
.fteam p { display: flex; align-items: center; gap: 10px; margin: 0; padding: 8px 0; border-top: 1px solid rgba(255,255,255,.06); }
.fteam p > i { font-style: normal; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-weight: 700; background: #2a2a2f; color: #cfcfd3; position: relative; }
.fteam p > i::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 8px; height: 8px; border-radius: 50%; background: #3fbf6a; box-shadow: 0 0 0 2px #161618; }
.fteam p.sk > i::after { background: #555; transition: background .3s; } .fteam p.sk.is-in > i::after { background: #3fbf6a; }
.fteam p > i.ag { background: conic-gradient(var(--flow)); color: #111; } .fteam p > i.ag::after { display: none; }
.fteam span { flex: 1; display: flex; flex-direction: column; } .fteam b { font-size: 12px; font-weight: 600; } .fteam em { font-style: normal; font-size: 10.5px; color: #8b8b90; }
.fteam small { font-size: 10px; color: #b5b5b9; background: rgba(255,255,255,.06); padding: 3px 8px; border-radius: 999px; } .fteam small.own { color: #fff; }
.fcode { left: 34px; top: 34px; width: 392px; height: 232px; z-index: 2; overflow: hidden; }   /* inside the frame, over its edge a little like every piece */
.fcode__bar { display: flex; gap: 2px; padding: 8px; border-bottom: 1px solid rgba(255,255,255,.06); }
.fcode__bar b { font-size: 11px; font-weight: 600; color: #8b8b90; padding: 5px 10px; border-radius: 7px; } .fcode__bar b small { font-weight: 400; color: #6f6f75; margin-left: 4px; }
.fcode__bar b.on { background: #2a2a2e; color: #fff; }
.fcode pre { margin: 0; padding: 14px 14px; font-family: var(--ib-font); font-variant-numeric: tabular-nums; font-size: 8.6px; line-height: 15px; color: #cfcfd3; white-space: pre; overflow: hidden; }
.fvid { left: 0; top: 10px; width: 460px; height: 280px; border-radius: 12px; overflow: hidden; background: #0b0b0d; z-index: 2; }
.fvid video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* the stage's frame, and the pieces only the features use */
.fring { left: 18px; top: 18px; width: 424px; height: 264px; }
/* the four rows' frame is a square, the pieces falling off its sides (Josh, 2026-10-01) */
.rstage .fring { left: 80px; top: 0; width: 300px; height: 300px; }
.mgrid { position: absolute; inset: 0; z-index: 3; display: grid; grid-template-columns: repeat(var(--cols, 12), 1fr); gap: 6px; padding: 0 12px; pointer-events: none; opacity: 0; transition: opacity .3s; }
.mgrid i { border-left: 1px solid rgba(70,160,255,.55); border-right: 1px solid rgba(70,160,255,.55); }
.msec.is-grid .mgrid { opacity: 1; }
.msec.is-display .sec__h { font-size: 19px; font-weight: 800; letter-spacing: -0.02em; transition: font-size .3s; }
.pin { position: absolute; z-index: 6; right: 40px; top: 30px; width: 18px; height: 18px; border-radius: 50% 50% 50% 2px; background: #716cff; transform: scale(0); transition: transform .25s cubic-bezier(.3,1.4,.5,1); }
.pin.p2 { right: 60px; top: 120px; } .pin.is-on { transform: scale(1); }
.fcom { left: 300px; top: 40px; width: 160px; padding: 10px; display: flex; gap: 8px; align-items: flex-start; z-index: 4; opacity: 0; transition: opacity .25s; }
.fcom.is-on { opacity: 1; }
.fcom i { font-style: normal; flex: none; width: 22px; height: 22px; border-radius: 50%; background: #2a2a2f; display: grid; place-items: center; font-size: 8px; font-weight: 700; }
.fcom p { margin: 0; font-size: 11px; line-height: 15px; color: #e6e6e9; }
.fappr { left: 120px; top: 262px; display: flex; align-items: center; gap: 14px; padding: 6px 6px 6px 14px; border-radius: 999px; z-index: 4; font-size: 11px; color: #b5b5b9; }
.fappr b { font-weight: 600; color: #111; background: #f2f2f2; padding: 6px 12px; border-radius: 999px; transition: background .25s, color .25s; }
.fappr.is-done b { background: #2f9a4f; color: #fff; }
.fknow { left: 40px; top: 36px; width: 250px; padding: 14px; z-index: 2; }
.fk__h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } .fk__h b { font-size: 14px; font-weight: 600; }
.fk__g { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 12px; }
.fk__c { display: flex; align-items: center; gap: 7px; font-size: 11px; color: #b5b5b9; background: #1e1e21; border-radius: 8px; padding: 8px; transition: background .25s, color .25s; }
.fk__c i { width: 8px; height: 8px; border-radius: 50%; background: #3a3a3f; transition: background .25s; }
.fk__c.is-lit { color: #fff; background: #26262a; } .fk__c.is-lit i { background: conic-gradient(var(--flow)); }
.fk__e { margin: 0; font-size: 11px; line-height: 16px; color: #b5b5b9; } .fk__e b { color: #fff; font-weight: 600; }
.fscene .fknow ~ .fm-talk { top: 150px; }
.fsurv, .fans { left: 70px; top: 30px; width: 320px; padding: 16px; z-index: 2; }
.fs__h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; } .fs__h b { font-size: 12px; font-weight: 600; } .fs__h span { font-size: 10px; color: #8b8b90; }
.fs__q { margin: 0 0 16px; font-size: 16px; line-height: 21px; }
.fs__sl { display: flex; align-items: center; gap: 10px; font-size: 10px; color: #8b8b90; margin-bottom: 16px; }
.fs__tr { position: relative; flex: 1; height: 4px; border-radius: 2px; background: #2a2a2f; --sv: 30%; }
.fsurv .fs__tr { --sv: inherit; } .fsurv { --sv: 30%; }
.fs__fill { position: absolute; left: 0; top: 0; bottom: 0; width: var(--sv); border-radius: 2px; background: linear-gradient(90deg, var(--flow)); }
.fs__th { position: absolute; top: 50%; left: var(--sv); width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.5); }
.fs__o { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.fs__o b { font-size: 11px; font-weight: 500; color: #b5b5b9; padding: 6px 11px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); transition: background .2s, color .2s; }
.fs__o b.on { background: #f2f2f2; color: #111; box-shadow: none; }
.fs__go { display: flex; justify-content: space-between; align-items: center; }
.fs__dots { display: inline-flex; gap: 4px; } .fs__dots i { width: 14px; height: 3px; border-radius: 2px; background: #2a2a2f; } .fs__dots i.on { background: #f2f2f2; }
.fs__next { font-size: 11px; font-weight: 600; color: #111; background: #f2f2f2; padding: 7px 14px; border-radius: 999px; }
.fsurv.is-sent .fs__dots i:nth-child(3) { background: #f2f2f2; }
.fa__r { display: grid; grid-template-columns: 24px 1fr 104px; gap: 10px; align-items: center; margin-bottom: 10px; font-size: 10.5px; color: #b5b5b9; }
.fa__r > i { font-style: normal; width: 24px; height: 24px; border-radius: 50%; background: #2a2a2f; display: grid; place-items: center; font-size: 8.5px; font-weight: 700; color: #cfcfd3; }
.fa__tr { position: relative; height: 4px; border-radius: 2px; background: #2a2a2f; }
.fa__tr i { position: absolute; top: 50%; left: var(--at); width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #f2f2f2; }
.fa__sum { display: flex; gap: 6px; margin-top: 14px; }
.fa__sum b { font-size: 10.5px; font-weight: 600; padding: 6px 10px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); color: #b5b5b9; transition: background .3s, color .3s; }
.fans.is-read .fa__ag { background: #2f9a4f; color: #fff; box-shadow: none; } .fans.is-read .fa__df { background: #b07a1c; color: #fff; box-shadow: none; }
.fgset { left: 318px; top: 54px; width: 142px; padding: 10px 8px; z-index: 2; }
.fg__n { display: inline-flex; align-items: center; gap: 8px; font-style: normal; } .fg__n u { text-decoration: none; color: #8b8b90; } .fg__n span { min-width: 14px; text-align: center; }
.fgset .irow2 { height: 28px; font-size: 10px; padding: 0 8px; } .fgset .irow2 > span { font-size: 9.5px; }
.fmesh { left: 90px; top: 30px; width: 280px; height: 240px; border-radius: 14px; z-index: 2; box-shadow: 0 40px 70px -20px rgba(0,0,0,.95);
  --x0: 20%; --y0: 25%; --x1: 80%; --y1: 30%; --x2: 75%; --y2: 80%; --x3: 25%; --y3: 78%;
  background: radial-gradient(circle at var(--x0) var(--y0), #9ee7ff, transparent 55%), radial-gradient(circle at var(--x1) var(--y1), #c9b7ff, transparent 55%),
    radial-gradient(circle at var(--x2) var(--y2), #f6c7e7, transparent 55%), radial-gradient(circle at var(--x3) var(--y3), #fff4c2, transparent 55%), #b8b2d6; }
.fm__h { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px rgba(0,0,0,.25); }
.fm__h[data-h="0"] { left: var(--x0); top: var(--y0); } .fm__h[data-h="1"] { left: var(--x1); top: var(--y1); } .fm__h[data-h="2"] { left: var(--x2); top: var(--y2); } .fm__h[data-h="3"] { left: var(--x3); top: var(--y3); }
.ficb { left: 60px; top: 116px; z-index: 2; box-shadow: none; }
.ficb__b { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 22px; border-radius: 999px; background: #c8c8cb; color: #111; font-size: 15px; font-weight: 700; box-shadow: 0 30px 60px -20px rgba(0,0,0,.95); }
.ficb__i { font-style: normal; font-size: 18px; }
.fipick { left: 300px; top: 160px; width: 150px; padding: 6px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; z-index: 6; opacity: 0; transition: opacity .16s; }
.fipick.is-open { opacity: 1; }
.fipick b { display: grid; place-items: center; height: 30px; border-radius: 6px; font-size: 15px; font-weight: 400; color: #d5d5d8; } .fipick b.is-hl { background: #2a2a2e; color: #fff; }
.fimg { left: 60px; top: 30px; width: 200px; aspect-ratio: 4 / 5; border-radius: var(--ir, 0); z-index: 2; transition: width .4s, aspect-ratio .4s, border-radius .4s;
  background: repeating-conic-gradient(#bcbcc0 0 25%, #c7c7ca 0 50%) 0 0 / 12px 12px; }
.fimg.is-wide { width: 260px; aspect-ratio: 16 / 9; top: 60px; }
.fimg__r { position: absolute; left: 8px; bottom: 8px; font-size: 9px; font-weight: 700; color: #111; background: rgba(255,255,255,.7); padding: 2px 6px; border-radius: 4px; }
.fpen { left: 24px; top: 4px; display: flex; padding: 3px; border-radius: 10px; z-index: 3; }
.fpen b { font-size: 10.5px; font-weight: 600; color: #8b8b90; padding: 5px 11px; border-radius: 7px; } .fpen b.on { background: #2a2a2e; color: #fff; }
.fvec { left: 80px; top: 40px; width: 300px; height: 220px; z-index: 2; box-shadow: none; overflow: visible; }
.fv__p { fill: transparent; stroke: #716cff; stroke-width: 1.5; transition: fill .6s; } .fv__p.is-shut { fill: url(#vg); stroke: #716cff; }
.fv__v rect { fill: #fff; stroke: #716cff; stroke-width: 1; }
/* assembling a component from loose atoms (feature "assemble") */
.fasm { left: 0; top: 0; width: 460px; height: 300px; z-index: 2; }
.fa__a { position: absolute; z-index: 3; white-space: nowrap; transition: left .45s cubic-bezier(.3,.7,.2,1), top .45s cubic-bezier(.3,.7,.2,1), box-shadow .2s; }
.fa__a.is-drag { transition: none; box-shadow: 0 0 0 1px #716cff; }
.fa__new { font-size: 7px; font-weight: 800; letter-spacing: .06em; background: #111; color: #fff; padding: 2px 5px; }
.fa__name { font-size: 12px; color: #111; background: #d6d6d9; padding: 2px 4px; } .fa__price { font-size: 12px; font-weight: 700; color: #111; background: #d6d6d9; padding: 2px 4px; }
.fa__btn { width: 150px; height: 24px; display: grid; place-items: center; background: #111; color: #fff; font-size: 9px; font-weight: 700; border-radius: 4px; }
.fasm:not(.is-wrap) .fa__a:not(.fa__new) { box-shadow: 0 10px 22px -10px rgba(0,0,0,.9); }
.fa__card { position: absolute; left: 160px; top: 56px; width: 170px; height: 82px; border-radius: 8px; background: #d6d6d9; opacity: 0; transform: scale(.96);
  transition: opacity .35s, transform .35s, height .45s cubic-bezier(.3,.7,.2,1); box-shadow: 0 30px 60px -20px rgba(0,0,0,.95); }
.fasm.is-wrap .fa__card { opacity: 1; transform: none; } .fasm.is-wrap .fa__name, .fasm.is-wrap .fa__price { background: none; }
.fasm.is-img .fa__card { height: 174px; }
.fasm.is-sel .fa__card, .fasm.is-sel:not(.is-wrap) .fa__card { opacity: 1; }
.fasm.is-sel:not(.is-wrap) .fa__card { background: transparent; box-shadow: none; outline: 1px solid #716cff; transform: none; }
.fasm.is-wrap .fa__card { outline: 1px solid #716cff; }
.fasm.is-comp .fa__card { outline: 1.5px solid #716cff; outline-offset: 2px; }
.fa__tag { position: absolute; left: -1px; top: -16px; font-size: 8px; font-weight: 700; color: #fff; background: #716cff; padding: 2px 5px; border-radius: 3px; white-space: nowrap; }
.fa__chip { position: absolute; right: -8px; bottom: -26px; font-size: 9px; font-weight: 600; color: #111; background: #f2f2f2; padding: 4px 9px; border-radius: 999px; opacity: 0; transform: translateY(4px); transition: opacity .3s, transform .3s; white-space: nowrap; }
.fasm.is-comp .fa__chip { opacity: 1; transform: none; }
.fa__img { position: absolute; z-index: 3; left: 170px; top: 66px; width: 150px; height: 0; border-radius: 5px; opacity: 0;
  background: repeating-conic-gradient(#bcbcc0 0 25%, #c7c7ca 0 50%) 0 0 / 10px 10px; transition: height .45s cubic-bezier(.3,.7,.2,1), opacity .3s; }
.fasm.is-img .fa__img { height: 84px; opacity: 1; }
.fa__marq { position: absolute; left: 150px; top: 56px; width: 0; height: 0; z-index: 4; border: 1px solid #716cff; background: rgba(113,108,255,.12); opacity: 0; }
.fasm.is-marq .fa__marq { opacity: 1; }
.fpal { left: 4px; top: 70px; width: 34px; padding: 4px; display: grid; gap: 3px; z-index: 3; }
.fpal b { display: grid; place-items: center; height: 26px; border-radius: 6px; font-size: 12px; font-weight: 600; color: #b5b5b9; } .fpal b.on { background: #716cff; color: #fff; }
/* files dropped into the business (feature "drop") */
.fdrop { left: 150px; top: 26px; width: 280px; padding: 14px; z-index: 2; transition: box-shadow .2s; }
.fd__zone { display: grid; place-items: center; text-align: center; height: 64px; border-radius: 10px; border: 1px dashed rgba(255,255,255,.2); font-size: 12px; color: #cfcfd3; margin-bottom: 10px; transition: border-color .2s, background .2s; }
.fd__zone small { display: block; font-size: 10px; color: #77777c; }
.fdrop.is-over .fd__zone { border-color: #716cff; background: rgba(113,108,255,.1); }
.fd__rows p { display: flex; justify-content: space-between; gap: 10px; margin: 0 0 6px; padding: 7px 9px; border-radius: 8px; background: #1e1e21; font-size: 10.5px; color: #b5b5b9; }
.fd__rows p b { font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fd__rows p span { white-space: nowrap; }
.fd__rows p span::before { content: "\2713  "; color: #3fbf6a; }
.fd__rows p.is-new { animation: rise .35s ease both; }
.fd__e { opacity: 0; transition: opacity .3s; margin-top: 8px; } .fdrop.is-done .fd__e { opacity: 1; }
.ffile { display: inline-flex; align-items: center; gap: 7px; z-index: 4; padding: 6px 10px 6px 6px; border-radius: 9px; background: #232327; color: #e6e6e9; font-size: 10.5px; white-space: nowrap;
  box-shadow: 0 20px 40px -14px rgba(0,0,0,.95), inset 0 0 0 1px rgba(255,255,255,.08); transition: opacity .3s, transform .3s; }
.ffile i { font-style: normal; font-size: 8px; font-weight: 800; padding: 3px 4px; border-radius: 4px; background: #3a3a40; color: #fff; }
.ffile[data-n="0"] i { background: #4a5bd6; } .ffile.is-in { opacity: 0; transform: scale(.6); }
/* a component the agent builds (feature "agentbuild") */
.fbuild { left: 50px; top: 50px; width: 240px; z-index: 2; box-shadow: none; }
.fb__card { position: relative; padding: 16px; border-radius: 10px; min-height: 150px; background: transparent; outline: 1px dashed rgba(113,108,255,0); transition: background .4s, outline-color .3s, box-shadow .4s; }
.fbuild.is-frame .fb__card { outline-color: rgba(113,108,255,.8); }
.fbuild.is-stars .fb__card { background: #d6d6d9; box-shadow: 0 30px 60px -20px rgba(0,0,0,.95); }
.fbuild.is-comp .fb__card { outline: 1.5px solid #716cff; outline-offset: 2px; }
.fb__tag { position: absolute; left: -1px; top: -17px; font-size: 8px; font-weight: 700; color: #fff; background: #716cff; padding: 2px 5px; border-radius: 3px; opacity: 0; transition: opacity .3s; white-space: nowrap; }
.fbuild.is-frame .fb__tag { opacity: 1; }
.fb__chip { position: absolute; right: -8px; bottom: -26px; font-size: 9px; font-weight: 600; color: #111; background: #f2f2f2; padding: 4px 9px; border-radius: 999px; opacity: 0; transition: opacity .3s; white-space: nowrap; }
.fbuild.is-comp .fb__chip { opacity: 1; }
.fb__p { opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .4s; }
.fbuild.is-stars .fb__stars, .fbuild.is-quote .fb__q, .fbuild.is-who .fb__who { opacity: 1; transform: none; }
.fb__stars { color: #c9a227; font-size: 13px; letter-spacing: 2px; margin-bottom: 10px; }
.fb__q { font-size: 14px; line-height: 19px; color: #111; margin-bottom: 14px; }
.fb__who { display: flex; align-items: center; gap: 8px; } .fb__who i { font-style: normal; width: 26px; height: 26px; border-radius: 50%; background: #111; color: #fff; display: grid; place-items: center; font-size: 9px; font-weight: 700; }
.fb__who b { display: block; font-size: 11px; color: #111; } .fb__who em { font-style: normal; font-size: 9.5px; color: #555; }
.glow { position: absolute; pointer-events: none; border-radius: 16px; }
.glow::before, .glow::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(115deg, #9ee7ff, #c9b7ff, #f6c7e7, #fff4c2, #9ee7ff, #c9b7ff); background-size: 300% 300%; animation: foil 12s linear infinite;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.glow::after { padding: 2px; filter: blur(10px); opacity: .55; }
/* the index: the one reached for reads at full voice, underlined in the spectrum */
.eo-feat .eo-feat-h{transition:color .2s} .eo-feat:hover .eo-feat-h,.eo-feat.is-on .eo-feat-h{color:var(--eden-ink)}
.eo-feat.is-on .eo-feat-h{background:linear-gradient(90deg,var(--flow)) 0 100%/100% 1px no-repeat}

/* ── THE PLANS AND THE WAITLIST (concept-open-hero.js, ways): the chosen plan at full voice, the rest quiet; the form on Eden's tokens,
   its fields in Eden's Field style ── */
/* every plan stays readable while one is chosen (2026-10-24: four plans, each with what it holds); the chosen one carries the edge */
.eo-plan.is-chosen{border-top-color:transparent!important;background:linear-gradient(90deg,var(--flow)) 0 0/100% 1px no-repeat}
.eo-form{display:flex;gap:var(--eden-space-48);padding:var(--eden-space-32) 0 0;animation:eb-in .4s ease both}
@keyframes eb-in{from{opacity:0;transform:translateY(10px)}}
.eo-form-intro{flex:1 1 0%;display:flex;flex-direction:column;gap:var(--eden-space-8)}
.eo-f-form,.eo-f-done{flex:1 1 0%;display:flex;flex-direction:column;gap:var(--eden-space-16);align-items:flex-start}
.eo-f-done[hidden],.eo-f-form[hidden],.eo-f-err[hidden]{display:none}
.eo-f-k{margin:0;color:var(--eden-ink-3);font-family:var(--eden-text-label-family);font-size:var(--eden-text-label-size);font-weight:var(--eden-text-label-weight);letter-spacing:var(--eden-text-label-tracking);text-transform:var(--eden-text-label-case, uppercase)}
.eo-f-h{margin:0;color:var(--eden-ink);font-family:var(--eden-text-heading-family);font-size:var(--eden-text-heading-size);font-weight:var(--eden-text-heading-weight);line-height:var(--eden-text-heading-line-height)}
.eo-f-p{margin:0;max-width:34em;color:var(--eden-ink-2);font-family:var(--eden-text-body-family);font-size:var(--eden-text-body-size);line-height:var(--eden-text-body-line-height)}
.eo-f-two{display:flex;gap:var(--eden-space-16);align-self:stretch}
.eo-f{display:flex;flex-direction:column;gap:var(--eden-space-6);flex:1 1 0%;align-self:stretch}
.eo-f-l{color:var(--eden-ink-2);font-family:var(--eden-text-meta-family);font-size:var(--eden-text-meta-size)}
.eo-f-in{font-family:var(--eden-text-field-family);font-size:var(--eden-text-field-size);color:var(--eden-ink);background:var(--eden-surface);border:var(--eden-edge-1) solid var(--eden-line);
  border-radius:var(--eden-r-10);padding:var(--eden-space-10) var(--eden-space-12);outline:none}
.eo-f-in:focus{border-color:var(--eden-line-strong)} .eo-f-in::placeholder{color:var(--eden-ink-3)}
textarea.eo-f-in{resize:vertical}
.eo-f-trap{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.eo-f-err{margin:0;color:#D9B27C;font-family:var(--eden-text-meta-family);font-size:var(--eden-text-meta-size)}
@media (max-width:767px){.eo-form{flex-direction:column;gap:var(--eden-space-24)}.eo-f-two{flex-direction:column}}

/* ── STUDIO'S REAL RAIL AND MENUS IN THE SET (2026-10-15): placed where the set needs them; the demo's hover and state marks in Studio's
   own values ── */
.scene .ld-rail{padding:0;background:none;box-shadow:none;width:280px!important}
.scene .ld-rail [data-sx-id="instrumentBar"]{position:relative!important;right:auto!important;top:auto!important;width:100%!important;max-height:none!important;box-shadow:0 30px 80px -20px rgba(0,0,0,.85)}
.scene .ld-rail [data-i].is-on{background:var(--ib-open,#29292c)!important}
.scene .ld-rail [data-i="fill"] .current-swatch{background:var(--fill, var(--swatch))!important}
.scene .ld-rail [data-i].is-off .al-val,.scene .ld-rail [data-i].is-off .val{color:#D9B27C}
.scene .ld-rail [data-i].is-ok .al-val,.scene .ld-rail [data-i].is-ok .val{color:#f4f4f5}
.scene .ddl.sx-pop,.scene .ctx.sx-menu{background:none!important;box-shadow:none!important;padding:0!important;width:auto!important}
.scene .ddl .token-popover{position:static!important;display:block!important}
.scene .ddl .token-popover button.is-hl{background:var(--ib-opt-on,rgba(255,255,255,.075))}
.scene .ctx .menu{position:static!important;display:block!important}
.scene .ctx .menu button.is-hl{background:var(--ib-opt-on,rgba(255,255,255,.075))}

/* ── THE REACH AND COMPARE, as the newest site draws them (website/adaptive.html) ── */
.eo-reach [data-r]{opacity:calc(.34 + .66 * var(--v, 0));transition:opacity .18s linear}
.eo-reach [data-r]:focus-within,.eo-reach [data-r]:focus{--v:1}
.eo-cmp-glow{z-index:0} .eo-cmp-glow[hidden]{display:none}
.eo-cmp-row,.eo-cmp-head{position:relative;z-index:1}
.eo-cmp-eden::before{content:"";position:absolute;left:0;top:calc(var(--eden-space-14) - 1px);width:16px;height:16px;border-radius:50%;
  background:linear-gradient(115deg,#9ee7ff,#c9b7ff,#f6c7e7,#fff4c2);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.3l2.6 2.6L12 5.4' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.3l2.6 2.6L12 5.4' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.eo-cmp-eden::before{left:var(--eden-space-16)}
@media (max-width:767px){.eo-cmp-eden::before{left:0;top:2px}}

/* ── THE WAITLIST, AS THE NEWEST SITE DRAWS IT (Josh, 2026-10-15: "bring this section back just like this too"): a box ringed in the
   spectrum with its close, the plan and the ask on the left, the fields on the right as lines under spaced labels ── */
.eo-form{position:relative;padding:var(--eden-space-48);border-radius:16px;gap:var(--eden-space-80);margin-top:var(--eden-space-24)}
.eo-form-ring{inset:0}
.eo-form-x{position:absolute;right:var(--eden-space-20);top:var(--eden-space-20);width:28px;height:28px;border:0;border-radius:50%;background:none;color:var(--eden-ink-2);font:400 22px/1 var(--eden-sans);cursor:pointer}
.eo-form-x:hover{color:var(--eden-ink)}
.eo-form-intro{gap:var(--eden-space-16)}
.eo-f-k{letter-spacing:.18em}
.eo-f-big{font-family:var(--eden-text-section-family);font-size:var(--eden-text-section-size);font-weight:var(--eden-text-section-weight);line-height:var(--eden-text-section-line-height);letter-spacing:var(--eden-text-section-tracking)}
.eo-form .eo-f-p{font-size:var(--eden-text-field-size);line-height:1.6}
.eo-f-form{gap:var(--eden-space-24)}
.eo-f-two{gap:var(--eden-space-32)}
.eo-f{gap:var(--eden-space-10)}
.eo-f-l{font-family:var(--eden-text-label-family);font-size:var(--eden-text-label-size);font-weight:var(--eden-text-label-weight);letter-spacing:.16em;text-transform:uppercase;color:var(--eden-ink-3)}
.eo-f-in{background:none;border:0;border-bottom:var(--eden-edge-1) solid var(--eden-line-2, rgba(255,255,255,.14));border-radius:0;padding:var(--eden-space-8) 0;font-size:var(--eden-text-field-size)}
.eo-f-in:focus{border-bottom-color:var(--eden-ink-2)}
@media (max-width:767px){.eo-form{padding:var(--eden-space-24);gap:var(--eden-space-24)}}

/* ── THE CLOSE, as the newest site has it: the mark in the spectrum, and the hidden peony (website/adaptive.html) ── */
[data-eo-sig]{background:linear-gradient(115deg,#9ee7ff,#c9b7ff,#f6c7e7,#fff4c2,#9ee7ff,#c9b7ff);background-size:300% 300%;animation:foil 40s linear infinite;-webkit-background-clip:text;background-clip:text;color:transparent!important}
.bloom{position:absolute;z-index:0;cursor:pointer;background:none;border:0;padding:0;margin:0;appearance:none;-webkit-appearance:none}
.bloom--peony{right:1vw;bottom:2vh;width:min(21vw,330px);aspect-ratio:1081/1322}
.bloom__ink,.bloom__lit{position:absolute;inset:0;-webkit-mask:var(--art) center/contain no-repeat;mask:var(--art) center/contain no-repeat}
.bloom__ink{background:#222226;transition:background .3s ease} .bloom:hover .bloom__ink{background:#2c2c31}
.bloom__lit{background:linear-gradient(115deg,#9ee7ff,#c9b7ff,#f6c7e7,#fff4c2,#9ee7ff,#c9b7ff);background-size:260% 260%;animation:foil 9s linear infinite;clip-path:circle(0 at var(--bx,50%) var(--by,50%))}
.bloom.is-open .bloom__lit{clip-path:circle(150% at var(--bx,50%) var(--by,50%));transition:clip-path 1.6s cubic-bezier(.3,.7,.2,1)}
.bloom.is-pouring .bloom__lit{filter:url(#liquid)}
.eo-end > *:not(.bloom){position:relative;z-index:1}
@media (hover: none),(pointer: coarse),(prefers-reduced-motion: reduce){.bloom__lit{clip-path:none;animation:none}}
@media (max-width:767px){.bloom--peony{position:relative;right:auto;bottom:auto;width:70vw;margin:0 auto}}

/* ── EDEN IN USE, IN THE COMBINED LOOK (Josh, 2026-10-15: "show me this section with that combined styling - animated"; the study is
   ui-studies.html → Combined): Black plastic's near-black, Tonal's steps with a breath of light on each top edge and no lines, and the
   spectrum only on what the demo picks. Studio's real strip, rail and menus keep their markup and take these values through their own
   variables. One class on the section (look-combined); without it the section is as it was. ── */
.look-combined{--c0:#08080a;--c1:#0c0c0e;--c2:#111113;--c3:#151517;--c4:#19191c;--c5:#1d1d21;--c6:#222226;
  --t1:#ececef;--t2:#6e6f75;--t3:#505157;--t4:#3b3c41;--breath:inset 0 1px 0 rgba(255,255,255,.035);
  --rimc:linear-gradient(115deg,#9ee7ff,#c9b7ff,#f6c7e7,#fff4c2,#9ee7ff)}
/* the boxes */
.look-combined .ltab{background:var(--c2)!important;border-color:transparent!important;box-shadow:var(--breath)}
.look-combined .ltab-h{color:var(--t1)!important} .look-combined .ltab-b{color:var(--t3)!important}   /* full brightness always (Josh, 2026-10-27: "i dont want sections that you have to hover over to see them at full brightness"); the playing one has its bar */
.look-combined .ltab:hover .ltab-h,.look-combined .ltab.is-on .ltab-h{color:var(--t1)!important} .look-combined .ltab.is-on .ltab-b{color:var(--t3)!important}
.look-combined .ltab__steps i{background:#1a1a1d} .look-combined .ltab__steps i.on{background:#3a3b40}
/* the frame: plain near-black, no ring, no dots */
.look-combined .eo-frame{background:var(--c1)!important;box-shadow:var(--breath)}
.look-combined .eo-frame::before,.look-combined .eo-frame::after{display:none}
/* the store section */
.look-combined .scene .sec{background:var(--c2);box-shadow:var(--breath);color:var(--t1)}
.look-combined .scene .sec__eb,.look-combined .scene .sec__f i,.look-combined .scene .pcard__meta,.look-combined .scene .pcard__stars span,.look-combined .scene .rv__n{color:var(--t4)}
.look-combined .scene .sec__h{color:var(--t2)}
.look-combined .scene .sec__f span{box-shadow:none;background:var(--c4);color:var(--t3)} .look-combined .scene .sec__f span::after{color:var(--t4)}
.look-combined .scene .sec__f b{color:var(--t3)}
.look-combined .scene .pcard,.look-combined .scene .rstrip>div{background:var(--c3);box-shadow:var(--breath)}
.look-combined .scene .pcard__img{background:var(--c4)}
.look-combined .scene .pcard__tag{background:var(--c5);color:var(--t3)}
.look-combined .scene .pcard__row{color:var(--t2)} .look-combined .scene .pcard__stars,.look-combined .scene .rv__s{color:var(--t3)} .look-combined .scene .rv__q{color:var(--t3)}
.look-combined .scene .pcard__btn{background:var(--c5);color:var(--t3)}
.look-combined .scene .pcard__btn.is-added{background:var(--c6);color:var(--t1)}
/* Light, from the menu, stays a step lighter but in the same family */
.look-combined .scene .sec.is-light{background:#1a1a1d} .look-combined .scene .sec.is-light .pcard{background:#202024}
/* the selection: the spectrum, round what is chosen */
.look-combined .scene .sel{border:0}
.look-combined .scene .sel::before{content:"";position:absolute;inset:-1px;border-radius:12px;padding:1px;background:var(--rimc);background-size:300% 300%;animation:rim 14s linear infinite;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
/* (no glow fill under the selection: inside the selection it washed the part in colour; the edge alone carries it) */
.look-combined .scene .sel i,.look-combined .scene .sel__grip{display:none}
.look-combined .scene .sel__tag,.look-combined .scene .sel__fit{background:var(--c1);color:#c9b7ff;box-shadow:inset 0 0 0 1px rgba(201,183,255,.25)}
.look-combined .scene .hotp{background:repeating-linear-gradient(135deg,rgba(201,183,255,.12) 0 3px,rgba(201,183,255,.03) 3px 7px)}
@keyframes rim{to{background-position:300% 300%}}
/* Studio's own pieces, re-toned through their variables */
.look-combined .sx-tools{--strip:var(--c2);--panel:var(--c2);--tool-ink:var(--t3);--tool-on-bg:var(--c5);--ink:var(--t1);--line:transparent;--hover:var(--c4)}
.look-combined .sx-rail{--ib-ink:var(--t2);--ib-val:var(--t3);--ib-val-hi:var(--t1);--ib-label:var(--t4);--ib-name:var(--t3);--ib-kind:var(--t4);--ib-kind-bg:var(--c3);--ib-card:var(--c3);
  --ib-hover:var(--c3);--ib-open:var(--c5);--ib-chev:var(--t4);--ib-icon:var(--t3);--ib-meta:var(--t4);--ib-line:transparent;--line:transparent;--hover:var(--c3);--rail-solid:var(--c2);color:var(--t2)}
.look-combined .sx-pop{--ib-pop:var(--c2);--ib-opt:var(--t3);--ib-ink:var(--t1);--ib-hover:var(--c4)}
.look-combined .sx-menu{--menu-bg:var(--c2);--menu-line:var(--c4);--ink:var(--t1);--muted:var(--t4)}
.look-combined .ld-rail [data-sx-id="instrumentBar"]{background:var(--c2)!important;box-shadow:var(--breath)!important}
.look-combined .ld-rail .meta-name,.look-combined .ld-rail .insp__nm{color:var(--t2)!important}
.look-combined .ld-rail [data-i].is-on{background:var(--c5)!important;position:relative}
.look-combined .ld-rail [data-i].is-on::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;background:var(--rimc);background-size:300% 300%;animation:rim 14s linear infinite;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.look-combined .ld-tools [data-sx-id="tools"]{background:var(--c2)!important;box-shadow:var(--breath)!important}
/* the agent app, the code and Health */
.look-combined .talk.ui,.look-combined .scene .lcode,.look-combined .scene .hlth{background:var(--c2);box-shadow:var(--breath)}
.look-combined .talk.ui p{background:var(--c4);color:var(--t2)} .look-combined .talk.ui p.u{background:var(--c5);color:var(--t1)} .look-combined .talk.ui .talk__in{background:var(--c3)!important}
.look-combined .scene .lcode pre{color:var(--t3)} .look-combined .scene .fcode__bar b{color:var(--t3)} .look-combined .scene .fcode__bar b.on{background:var(--c5);color:var(--t1)}
.look-combined .scene .hl__n,.look-combined .scene .hl__row b{color:var(--t1)} .look-combined .scene .hl__kt{color:var(--t2)} .look-combined .scene .hl__sub,.look-combined .scene .hl__cost,.look-combined .scene .hl__d,.look-combined .scene .hl__fix{color:var(--t3)}
.look-combined .scene .hl__kind.is-on{background:var(--c4)}
.look-combined .scene .chipk{color:var(--t4);box-shadow:none;background:var(--c3)}
@media (prefers-reduced-motion: reduce){.look-combined .scene .sel::before,.look-combined .ld-rail [data-i].is-on::after{animation:none}}

/* ── STUDIO'S CHROME AT ITS REAL SIZE, AND THE AGENT'S OWN RAIL (2026-10-15): the strip, the rail and the menus sit in the frame, never
   scaled; the agent's conversation is a rail of its own on the frame's left, as agent apps put it, and Studio moves over for it ── */
.eo-frame > .fp{position:absolute;opacity:1}
.eo-frame > .fp.is-off{opacity:0!important;pointer-events:none}
.eo-frame > .ld-tools{left:16px;top:16px;z-index:4;box-shadow:none;transition:left .5s cubic-bezier(.3,.7,.2,1),opacity .3s}
.eo-frame.agent-on > .ld-tools{left:332px}
.eo-frame > .ld-tools [data-sx-id="tools"]{position:relative!important;left:0!important;top:0!important;bottom:auto!important;height:auto!important;transform:none!important}
.eo-frame > .ld-tools [data-sx-id="railStack"]{position:relative!important;top:0!important;bottom:auto!important;inset:auto!important}
.eo-frame > .insp{left:auto!important;right:16px!important;top:16px!important;width:280px!important;padding:0!important;background:none!important;box-shadow:none!important;z-index:4}
.eo-frame > .insp [data-sx-id="instrumentBar"]{position:relative!important;right:auto!important;top:auto!important;width:100%!important;max-height:none!important}
.eo-frame > .insp [data-i].is-on{background:var(--ib-open,#29292c)!important}
.eo-frame > .insp [data-i="fill"] .current-swatch{background:var(--fill, var(--swatch))!important}
.eo-frame > .ddl,.eo-frame > .ctx{z-index:6;background:none!important;box-shadow:none!important;padding:0!important;width:auto!important}
.eo-frame > .ddl .token-popover,.eo-frame > .ctx .menu{position:static!important;display:block!important}
.eo-frame > .ddl .token-popover button.is-hl,.eo-frame > .ctx .menu button.is-hl{background:var(--ib-opt-on,rgba(255,255,255,.075))}
/* the agent's rail: the agent app beside Studio, not a panel in it */
.eo-frame > .ld-agent{left:0!important;top:0!important;bottom:0!important;right:auto!important;width:300px!important;height:auto!important;border-radius:14px 0 0 14px!important;
  padding:20px 16px!important;display:flex!important;flex-direction:column;justify-content:flex-end;gap:10px;z-index:5;
  background:#0e0e10;box-shadow:inset -1px 0 0 rgba(255,255,255,.05)!important;transition:opacity .4s ease,transform .5s cubic-bezier(.3,.7,.2,1)}
.eo-frame > .ld-agent.is-off{transform:translateX(-16px)}
.eo-frame > .ld-agent .talk__h{position:absolute;left:16px;top:20px;margin:0}
.look-combined .eo-frame > .ld-agent{background:var(--c1)}
/* the menus only show while open, as the demo opens them */
.eo-frame > .ddl:not(.is-open),.eo-frame > .ctx:not(.is-open){opacity:0!important;pointer-events:none}
.eo-frame > .ddl,.eo-frame > .ctx{transition:opacity .15s ease}

/* ── NO ORANGE, NO GREEN (Josh, 2026-10-15: "dont use orange accents... use the iridescent line style we use already"): what is flagged
   gets the spectrum's edge; what is done, added or on reads at full ink with a spectrum mark; what is off reads quiet. Eden's accent is
   light, never a colour of its own ── */
.eo-page{--spec:linear-gradient(115deg,#9ee7ff,#c9b7ff,#f6c7e7,#fff4c2,#9ee7ff)}
.is-flag{outline:none!important;position:relative}
.is-flag::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;z-index:3;background:var(--spec);background-size:300% 300%;animation:rim 14s linear infinite;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.hl__dot{background:var(--spec)!important}
.hl__row.is-held .hl__d{color:#c2c2c7!important;border-left-color:transparent!important;border-image:var(--spec) 1!important}
.hl__row.is-done .hl__d{color:#ececef!important}
.irow2.is-off span,.irow2.is-ok span{color:#ececef!important} .irow2.is-off span::before,.irow2.is-ok span::before{color:#c9b7ff!important}
.eo-frame > .insp [data-i].is-off .al-val,.eo-frame > .insp [data-i].is-off .val,.scene .ld-rail [data-i].is-off .al-val,.scene .ld-rail [data-i].is-off .val{color:#ececef!important}
.eo-frame > .insp [data-i].is-off,.eo-frame > .insp [data-i].is-ok{position:relative}
.eo-frame > .insp [data-i].is-off::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;background:var(--spec);background-size:300% 300%;animation:rim 14s linear infinite;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.fn--ok i{background:var(--spec)!important} .fn--off i{background:#4a4b51!important}
.fn--flag{box-shadow:0 20px 40px -16px rgba(0,0,0,.95)!important;position:relative}
.fn--flag::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;background:var(--spec);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.pcard__btn.is-added,.scene .pcard__btn.is-added,.sec.is-dark .pcard__btn.is-added{background:#ececef!important;color:#111113!important}
.fteam p > i::after,.fteam p.sk.is-in > i::after{background:var(--spec)!important}
.fappr.is-done b,.fans.is-read .fa__ag{background:#ececef!important;color:#111113!important}
.fans.is-read .fa__df{background:#3a3b40!important;color:#ececef!important}
.fd__rows p span::before{color:#c9b7ff!important}
.eo-f-err{color:#ececef!important;padding-left:var(--eden-space-10);border-left:1px solid;border-image:var(--spec) 1}
@media (prefers-reduced-motion: reduce){.is-flag::after,.eo-frame > .insp [data-i].is-off::after{animation:none}}

/* ── THE BLACK CONTAINERS, ACROSS THE PAGE (Josh, 2026-10-15: "make the tabs that are unselected the same black as the image area" and
   "lets use this chrome on the page in the other sections... i like these black containers"): Eden in use's frame black, a breath of
   light on the top edge, no line; what is chosen gets the spectrum rim. The page's own stylesheet loads after this one, so each rule
   is scoped by .eo-page ── */
.eo-page{--blk:#0c0c0e;--blk-breath:inset 0 1px 0 rgba(255,255,255,.035)}
.look-combined .ltab{background:var(--c1)!important}
/* the black containers take the page's own Foundation surface (2026-10-26): a look set only here is one Studio can't draw. The old black: --blk with --blk-breath */
.eo-page .eo-part-media{background:#08080a}
.eo-page .eo-plan{position:relative}
.eo-page .eo-plan.is-chosen{background:var(--blk)!important}
.eo-page .eo-plan.is-chosen::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;background:linear-gradient(115deg,#9ee7ff,#c9b7ff,#f6c7e7,#fff4c2,#9ee7ff);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}

/* ── FEATURES IN GROUPS, AND THE DESIGN TOOLS' REEL (Josh, 2026-10-15; features-studies.html A and C) ── */
.eo-page .eo-fseg{background:var(--blk);box-shadow:var(--blk-breath)}
.eo-fseg-b{appearance:none;border:0;margin:0;background:none;text-transform:none;cursor:pointer;display:flex;gap:8px;align-items:center;padding:9px 16px;border-radius:999px;white-space:nowrap;color:var(--eden-ink-3);
  font:var(--eden-text-ui-weight) var(--eden-text-ui-size)/1.2 var(--eden-text-ui-family);transition:color .2s,background .2s}
.eo-fseg-b small{font-size:11px;color:#3b3c41;font-variant-numeric:tabular-nums}
.eo-fseg-b:hover{color:var(--eden-ink)} .eo-fseg-b:focus-visible{outline:2px solid #c9b7ff;outline-offset:2px}
.eo-fseg-b.is-on{background:var(--eden-surface-2);color:var(--eden-ink)} .eo-fseg-b.is-on small{color:#6e6f75}
/* one group at a time once the script groups them (it marks the section); at rest, and on Studio's canvas, every feature is drawn (2026-10-16) */
.is-grouped .eo-feat[data-g]:not(.in){display:none}
.eo-feat[data-g]{transition:background .2s}
.eo-feat[data-g].is-on{background:#111113}
.eo-feat[data-g].is-on .eo-feat-h{background:none;color:var(--eden-ink)}
.eo-feat[data-g]:focus-visible{outline:2px solid #c9b7ff;outline-offset:2px}
@media (min-width:768px){
  .eo-feat[data-g] .eo-feat-b{max-height:0;opacity:0;overflow:hidden;transition:max-height .35s ease,opacity .3s}
  .eo-feat[data-g].is-on .eo-feat-b{max-height:80px;opacity:1}
}
.eo-page .eo-read{background:#08080a;box-shadow:none;border-left:1px solid #141416}
.eo-reel-track{scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 64px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 64px),transparent)}
.eo-reel-track::-webkit-scrollbar{display:none}
.eo-rcard{scroll-snap-align:start}
/* (the reel cards take the page's surface too, 2026-10-26) */
.eo-page .eo-rstage{background:#08080a}
.eo-rstage .fscene .fring{display:none}
.eo-reel-n{margin-right:12px;color:var(--eden-ink-3);font:var(--eden-text-label-weight) var(--eden-text-label-size)/1 var(--eden-text-label-family);letter-spacing:var(--eden-text-label-tracking);font-variant-numeric:tabular-nums}
.eo-reel-b{appearance:none;border:0;margin:0;padding:0;text-transform:none;cursor:pointer;width:40px;height:40px;border-radius:999px;display:grid;place-items:center;background:var(--eden-surface);box-shadow:var(--blk-breath);color:var(--eden-ink-2);font-size:16px;transition:color .2s,opacity .2s}
.eo-reel-b:hover{color:var(--eden-ink)} .eo-reel-b:disabled{opacity:.3;cursor:default} .eo-reel-b:focus-visible{outline:2px solid #c9b7ff;outline-offset:2px}
.eo-rstage{position:relative}   /* the scene is placed against its stage, as .eo-fstage's is */

/* ── THE AGENT RAIL, AS THE AGENT APP DRAWS IT (Josh, 2026-10-15: "try to have this look closer to how it really looks"): your messages in
   bubbles, the agent's replies as plain text, and Eden's card as a quote block with a rule down its left ── */
.eo-frame > .ld-agent .talk__log p:not(.u):not(.eq){background:none!important;box-shadow:none!important;padding:2px 2px!important;color:#a6a7ab!important;font-size:12px;line-height:18px}
.eo-frame > .ld-agent .talk__log p.eq{display:flex;flex-direction:column;gap:2px;background:none!important;box-shadow:none!important;border-radius:0!important;
  padding:2px 0 2px 12px!important;border-left:2px solid #2a2a2e;color:#a6a7ab!important;font-size:12px;line-height:17px}
.eo-frame > .ld-agent .eq .eq-m{font-weight:600;color:#ececef;margin-bottom:6px}
.eo-frame > .ld-agent .eq .eq-k{margin-top:6px;color:#6e6f75}
.eo-frame > .ld-agent .eq .eq-m + .eq-k{margin-top:0}

/* ── EDEN IN USE, CLOSER TO STUDIO (Josh, 2026-10-15) ── */
/* the tool palette floats as Studio's does: the menu tile and the tool stack are two pieces, each with its own shadow, the stack only as tall
   as its tools ("make the tool palette look more like the real tool palette please (floating)") */
.eo-frame > .ld-tools{height:auto!important}
.look-combined .ld-tools [data-sx-id="tools"]{background:none!important;box-shadow:none!important;height:auto!important;display:flex;flex-direction:column;gap:12px}
.look-combined .ld-tools [data-sx-id="barTool"],.look-combined .ld-tools [data-sx-id="railStack"]{background:var(--c2)!important;border-radius:14px!important;flex:none!important;height:auto!important;
  box-shadow:var(--breath),0 12px 32px rgba(0,0,0,.45)!important}
/* the store page, wider in proportion: its width is the room between the strip and the rail, its pictures a little wider than tall */
.eo-frame .scene .sec{width:var(--sec-w, 660px)}
.eo-frame .scene .pcard__img{aspect-ratio:4 / 3}
/* the filter the agent adds */
.scene .sec__f .sec__fx{max-width:0;padding:5px 0!important;opacity:0;overflow:hidden;white-space:nowrap;box-shadow:none!important;transition:max-width .5s cubic-bezier(.3,.7,.2,1),padding .5s,opacity .4s .1s}
.scene .sec__f .sec__fx.is-in{max-width:90px;padding:5px 10px!important;opacity:1;box-shadow:inset 0 0 0 1px rgba(201,183,255,.55)!important}
.look-combined .scene .sec__f .sec__fx.is-in{background:var(--c4);color:var(--t1)}
/* the agent app's own lines (acts 03 and 04): a tool it ran, in quiet type with a dot, and a file it read, as a block of its own */
.eo-frame > .ld-agent .talk__log p.tl{background:none!important;box-shadow:none!important;padding:2px 2px 2px 14px!important;position:relative;color:#6e6f75!important;font-size:11.5px;line-height:17px}
.eo-frame > .ld-agent .talk__log p.tl::before{content:"";position:absolute;left:2px;top:6px;width:6px;height:6px;border-radius:50%;background:linear-gradient(115deg,#9ee7ff,#c9b7ff,#f6c7e7)}
.eo-frame > .ld-agent .talk__log p.tl b{font-weight:600;color:#a6a7ab;margin-right:4px}
.eo-frame > .ld-agent .talk__log p.file{display:flex;flex-direction:column;gap:6px;background:#0c0c0e!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important;border-radius:10px!important;padding:10px 12px!important}
.eo-frame > .ld-agent .file .fl-h{font-size:11px;font-weight:600;color:#a6a7ab}
.eo-frame > .ld-agent .file code{display:block;white-space:pre-wrap;word-break:break-word;font:400 10.5px/1.6 var(--eden-text-ui-family);font-variant-numeric:tabular-nums;color:#6e6f75;min-height:16px}
.eo-x-bar .eo-x-seg[hidden]{display:none}   /* the way back shows only while Studio is open full screen */

/* ── THE FEATURES' TABS, AS EDEN IN USE'S (Josh, 2026-10-15: "tabs in this section should still look like the tabs from other tabbed
   sections with the outline border"): each a black card in the frame's black, the chosen one outlined in the moving spectrum; the stage
   in a black frame of its own ── */
.eo-page .eo-feat[data-g]{position:relative;background:var(--blk);box-shadow:var(--blk-breath);transition:background .2s}
.eo-page .eo-feat[data-g].is-on{background:var(--blk)}
.eo-page .eo-feat[data-g].is-on::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(115deg,#9ee7ff,#c9b7ff,#f6c7e7,#fff4c2,#9ee7ff,#c9b7ff);background-size:300% 300%;animation:foil 40s linear infinite;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.eo-page .eo-feat[data-g]:hover .eo-feat-h{color:var(--eden-ink)}
.eo-page .eo-read{background:var(--blk);box-shadow:var(--blk-breath);border-left:0}
@media (prefers-reduced-motion:reduce){.eo-page .eo-feat[data-g].is-on::before{animation:none}}

/* the closing lines' boxes hug their words (Josh, 2026-10-15: "have these dotted lines hug the copy vs span the full width please") */
.eo-end .mo-line{width:fit-content;margin-inline:auto}

/* ── 07, ON YOUR CLAUDE PLAN: two black containers; Eden's carries the spectrum rim ── */
.eo-page .eo-cost-col{position:relative;background:var(--blk);box-shadow:var(--blk-breath)}
.eo-page .eo-cost-col.is-eden::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;background:linear-gradient(115deg,#9ee7ff,#c9b7ff,#f6c7e7,#fff4c2,#9ee7ff);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.eo-page .eo-cost-col:not(.is-eden) .eo-cost-h{color:var(--eden-ink-2)}

/* ── THE HERO, ON STUDIO'S REAL TOOLS AND MOON BOOTS (site-hero-play.js) ── */
.hplay .himg{width:140px;height:140px}   /* 1:1, as the lifestyle shot is: the whole picture, nothing cropped (Josh, 2026-10-15: "use a better crop or a 1:1 ratio on this one in the header") */
.hplay .himg--p{width:170px;height:120px}   /* as tall as the other pictures, so its menu stays clear of the headline */
.hplay .hc__img{background:#f4f4f5 url(media/moonboots/product-white.jpg) center / cover no-repeat}
.hplay .hpop--mesh{flex-direction:column;align-items:stretch;gap:8px}
.hplay .hpop--mesh .hsl em{width:38px}
/* the cursors are named: you, and the agents working beside you */
.hplay .ghost__who{position:absolute;left:16px;top:20px;padding:2px 8px;border-radius:999px;font:600 10px/1.5 var(--eden-text-ui-family);white-space:nowrap;pointer-events:none;
  background:#ececef;color:#0c0c0e;box-shadow:0 4px 12px rgba(0,0,0,.35)}
.hplay .ghost__who--agent{background:linear-gradient(115deg,#9ee7ff,#c9b7ff,#f6c7e7);color:#0c0c0e}
html[data-scheme="light"] .hplay .ghost__who--you{background:#18181b;color:#ffffff}

/* ── MOON BOOTS IN THE DEMOS (Josh, 2026-10-15: "replace the Heritage watch store with Moon Boots across Eden in use, Try it and the feature
   demos"): the product shots fill the cards, the hangar shot fills Try it's image part. A picture set on a card covers it; the checkerboard
   stays only where a demo means an empty slot ── */
.eo-frame .scene .pcards .pcard:nth-child(1) .pcard__img{background:#ececef url(media/moonboots/product-white.jpg) center / cover no-repeat!important}
.eo-frame .scene .pcards .pcard:nth-child(2) .pcard__img{background:#ececef url(media/moonboots/product-black.jpg) center / cover no-repeat!important}
.eo-frame .scene .pcards .pcard:nth-child(3) .pcard__img{background:#ececef url(media/moonboots/product-red.jpg) center / cover no-repeat!important}
.fscene .pcard__img[style*="background-image"],.pl-cimg[style*="background-image"]{background-size:cover!important;background-position:center!important;background-repeat:no-repeat!important;background-color:#ececef!important}
.pl-img{background:#ececef url(media/moonboots/lifestyle-black.jpg) center / cover no-repeat!important}

/* ── THE FIRST SECTION'S CYCLE: one message and its diagram at a time; the other keeps its place (flows.js measures it), unseen ── */
.eo-cycle-words,.eo-cycle-flows{position:relative}
.eo-cycle-word,.eo-cycle-flows > .eo-flow{transition:opacity .5s ease,transform .5s ease}
/* the slides stack only while the cycle runs (the script marks it): at rest, and on Studio's canvas, both are drawn (2026-10-16) */
.is-cycling .eo-cycle-word:not(.is-on){position:absolute;left:0;right:0;top:0;opacity:0;visibility:hidden;transform:translateY(8px)}
.is-cycling .eo-cycle-flows > .eo-flow:not(.is-on){position:absolute;left:0;right:0;top:0;opacity:0;visibility:hidden}
.eo-cycle-tab{appearance:none;margin:0;border:0;background:none;text-transform:none;cursor:pointer;position:relative;flex:1 1 0%;text-align:left;
  padding:var(--eden-space-12) 0 0;color:var(--eden-ink-3);font:var(--eden-text-ui-weight) var(--eden-text-ui-size)/1.3 var(--eden-text-ui-family);box-shadow:inset 0 1px 0 var(--eden-line);transition:color .2s}
.eo-cycle-tab::before{content:"";position:absolute;left:0;top:0;height:1px;width:var(--p, 0%);background:linear-gradient(90deg,#9ee7ff,#c9b7ff,#f6c7e7,#fff4c2)}
.eo-cycle-tab:hover,.eo-cycle-tab.is-on{color:var(--eden-ink)} .eo-cycle-tab:focus-visible{outline:2px solid #c9b7ff;outline-offset:4px}
@media (prefers-reduced-motion:reduce){.eo-cycle-word,.eo-cycle-flows > .eo-flow{transition:none}}

/* ── SIMPLER FEATURE DEMOS (Josh, 2026-10-15: "we're now in a phase where we need to simplify the examples a bit") ── */
/* the mesh fills the stage: Studio's own material, edge to edge, one handle on it */
.fscene .fmesh{left:0;top:0;width:460px;height:300px;border-radius:0;box-shadow:none;background:#111113;overflow:hidden}
.fscene .fmesh .fm__h{z-index:2;left:30%;top:35%;width:16px;height:16px;margin:-8px 0 0 -8px;background:#fff;box-shadow:0 0 0 2px rgba(0,0,0,.18),0 4px 14px rgba(0,0,0,.35)}
.fscene[data-f="mesh"] .fring{display:none}
/* focus: the held card to the middle, larger, selected; the rest of the section steps back */
.fscene .msec .pcard{transition:transform .55s cubic-bezier(.3,.7,.2,1),opacity .35s ease;transform-origin:50% 50%}
.fscene .msec{transition:background .35s ease,box-shadow .35s ease}
.fscene .msec.is-focus1{background:transparent!important;box-shadow:none!important}
.fscene .msec.is-focus1 > :not(.pcards):not(.mchip){opacity:0;transition:opacity .3s ease}
.fscene .msec.is-focus1 .pcard:not(.is-focused){opacity:0}
.fscene .msec .pcard.is-focused{position:relative;z-index:3;outline:1.5px solid #716cff;outline-offset:3px;box-shadow:0 30px 60px -20px rgba(0,0,0,.6)}
/* the pen, on its own: no tab bar */
.fscene[data-f="vector"] .fvec{left:80px;top:40px}
/* the hero's moments are yours to play with: drag one anywhere, press one for another; a new one pops in */
.hplay .hv-slot{pointer-events:auto;cursor:grab;touch-action:none;user-select:none}
.hplay .hv-slot.is-drag{cursor:grabbing;z-index:5;transition:none}
.hplay .hv-slot.is-pop{animation:hv-pop .6s cubic-bezier(.2,.8,.2,1) both}
@keyframes hv-pop{0%{opacity:0;transform:scale(.4)}60%{opacity:1;transform:scale(1.05)}100%{opacity:1;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.hplay .hv-slot.is-pop{animation:none}}

/* ── 07, EDEN THE CLEAR CHOICE (Josh, 2026-10-15: "has to be more clear that the first card is the preference and winner. More like the compare
   ui"): Eden's card ringed in the spectrum, each line checked as Compare checks Eden's; the other is no card at all, quiet, each line a dash ── */
.eo-page .eo-cost-col.is-eden{box-shadow:var(--blk-breath),0 24px 48px -20px rgba(0,0,0,.35)}
.eo-cost-col .eo-cost-li{position:relative;padding-left:var(--eden-space-24)}
.eo-cost-col.is-eden .eo-cost-li{color:var(--eden-ink)}
.eo-cost-col.is-eden .eo-cost-li::before{content:"";position:absolute;left:0;top:1px;width:16px;height:16px;background:linear-gradient(115deg,#9ee7ff,#c9b7ff,#f6c7e7,#fff4c2);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.3l2.6 2.6L12 5.4' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.3l2.6 2.6L12 5.4' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.eo-page .eo-cost-col:not(.is-eden){background:transparent;box-shadow:none}
.eo-cost-col:not(.is-eden) .eo-cost-h,.eo-cost-col:not(.is-eden) .eo-cost-li{color:var(--eden-ink-3)}
.eo-cost-col:not(.is-eden) .eo-cost-li::before{content:"–";position:absolute;left:2px;top:0;color:var(--eden-ink-3)}
/* the waitlist form as wide as the plans above it (Josh, 2026-10-15: "have the bottom container be the same width as the row above it") */
#choose .eo-form{align-self:stretch}

/* the first section's arrows sit as the reel's do, after its words */
.eo-cycle-tabs{align-items:center;gap:var(--eden-space-8)}
/* THE HERO'S CURSORS ARE STUDIO'S (Josh, 2026-10-15: "the cursors need to look more like the cursors in studio - which are filled dots"): Studio's
   agent cursor (Eden2.1/studio/lib/agent-cursor.js), a filled dot in Studio's cursor colour (--cursor #716cff) with its press ring, and its
   dark name tag; the same in Light and Dark, as in Studio */
.hplay .ghost::before{left:-5px!important;top:-5px!important;width:10px!important;height:10px!important;background:#716cff!important;box-shadow:0 0 0 1px rgba(0,0,0,.25),0 1px 6px rgba(0,0,0,.25)!important}
.hplay .ghost .ghost__ring{background:#716cff!important}
.hplay .ghost .ghost__who,html[data-scheme="light"] .hplay .ghost .ghost__who{left:10px!important;top:8px!important;padding:2px 7px!important;border-radius:9px!important;background:rgba(15,16,17,.86)!important;color:#f7f8f8!important;
  font:500 11px/16px var(--eden-text-ui-family)!important;box-shadow:0 0 0 1px rgba(255,255,255,.08)!important}
/* every feature's words show, not only the chosen one's */
@media (min-width:768px){.eo-feat[data-g] .eo-feat-b{max-height:none;opacity:1}}

/* ── EDEN IN USE'S STUDIO CHROME, TIGHTENED (Josh, 2026-10-15: "there is def room for ui tightening and fixing") ── */
/* the strip floats: no docked strip's edge line beside it */
.eo-frame > .ld-tools [data-sx-id="tools"]{border-right:0!important}
/* the rail: room inside its panel, the kind chip clear of the top edge, the cards a step apart from the panel they sit in */
.eo-frame > .insp [data-sx-id="instrumentBar"]{padding:var(--eden-space-10)!important}
.eo-frame > .insp .context-meta{padding:var(--eden-space-4) var(--eden-space-6) var(--eden-space-10)!important}

/* ── DARK, A TOUCH EASIER TO SEE (Josh, 2026-10-15: "in dark mode.. its a touch too hard to see some of the ui and containers"): the black
   containers keep their black and gain a hairline and a brighter top edge; Eden in use's Combined steps and its quieter words each move up a
   step. Light is untouched (site-light.css restates its own) ── */
.eo-page{--blk-breath:inset 0 1px 0 rgba(255,255,255,.07),0 0 0 1px rgba(255,255,255,.06)}
.look-combined{--c2:#141416;--c3:#19191c;--c4:#1e1e22;--c5:#25252a;--c6:#2c2c31;--t2:#8b8c92;--t3:#6e6f75;--t4:#55565c;
  --breath:inset 0 1px 0 rgba(255,255,255,.07),0 0 0 1px rgba(255,255,255,.06)}
.look-combined .eo-frame{box-shadow:var(--breath)!important}
.look-combined .ltab{box-shadow:var(--breath)!important}
.eo-page .eo-read,.eo-page .eo-rstage,.eo-page .eo-part-media,.pl-canvas{box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}

/* ── ASK EDEN, THE DRAWER (site-ask-eden.js): from the right, full height, on the Foundation's own colours so it follows Light and Dark ── */
.ae{position:fixed;top:0;right:0;bottom:0;z-index:1200;width:min(420px,100vw);display:flex;flex-direction:column;background:var(--eden-surface);color:var(--eden-ink);
  box-shadow:-24px 0 60px rgba(0,0,0,.35),-1px 0 0 var(--eden-line);transform:translateX(104%);transition:transform .32s cubic-bezier(.3,.7,.2,1);font-family:var(--eden-text-ui-family)}
.ae.is-open{transform:none}
.ae-head{display:flex;align-items:center;justify-content:space-between;gap:var(--eden-space-12);padding:var(--eden-space-20) var(--eden-space-20) var(--eden-space-16);border-bottom:1px solid var(--eden-line)}
.ae-h{margin:0;font:var(--eden-text-heading-weight) var(--eden-text-heading-size)/1.2 var(--eden-text-heading-family);letter-spacing:var(--eden-text-heading-tracking)}
.ae-h b{display:inline-block;margin-right:6px;font-weight:600;background:linear-gradient(115deg,#9ee7ff,#c9b7ff,#f6c7e7,#fff4c2);-webkit-background-clip:text;background-clip:text;color:transparent}
.ae-x{appearance:none;margin:0;border:0;padding:0;text-transform:none;cursor:pointer;width:32px;height:32px;border-radius:999px;display:grid;place-items:center;background:var(--eden-fill-menu, rgba(127,127,127,.12));color:var(--eden-ink-2);font-size:18px;line-height:1}
.ae-x:hover{color:var(--eden-ink)}
.ae-log{flex:1 1 auto;overflow:auto;display:flex;flex-direction:column;gap:var(--eden-space-16);padding:var(--eden-space-20)}
.ae-msg p{margin:0 0 var(--eden-space-8);font:var(--eden-text-body-weight) var(--eden-text-ui-size)/1.55 var(--eden-text-ui-family)}
.ae-msg p:last-child{margin-bottom:0}
.ae-eden{color:var(--eden-ink-2)} .ae-eden b{color:var(--eden-ink);font-weight:600}
.ae-you{align-self:flex-end;max-width:85%;padding:var(--eden-space-8) var(--eden-space-12);border-radius:14px;background:var(--eden-surface-2);color:var(--eden-ink);box-shadow:inset 0 0 0 1px var(--eden-line)}
.ae-chips{display:flex;flex-wrap:wrap;gap:var(--eden-space-8);padding:0 var(--eden-space-20) var(--eden-space-12)}
.ae-chip{appearance:none;margin:0;border:0;text-transform:none;cursor:pointer;padding:7px 12px;border-radius:999px;background:transparent;color:var(--eden-ink-2);box-shadow:inset 0 0 0 1px var(--eden-line-2);
  font:var(--eden-text-ui-weight) var(--eden-text-meta-size)/1.2 var(--eden-text-ui-family);transition:color .2s,box-shadow .2s}
.ae-chip:hover{color:var(--eden-ink);box-shadow:inset 0 0 0 1px var(--eden-line-strong)}
.ae-form{display:flex;gap:var(--eden-space-8);padding:var(--eden-space-12) var(--eden-space-20) var(--eden-space-20);border-top:1px solid var(--eden-line)}
.ae-in{flex:1 1 auto;min-width:0;padding:11px 14px;border-radius:999px;border:0;outline:0;background:var(--eden-surface-2);color:var(--eden-ink);box-shadow:inset 0 0 0 1px var(--eden-line-2);font:400 var(--eden-text-ui-size)/1.2 var(--eden-text-ui-family)}
.ae-in::placeholder{color:var(--eden-ink-3)}
.ae-in:focus{box-shadow:inset 0 0 0 1px var(--eden-line-strong)}
.ae-go{appearance:none;margin:0;border:0;padding:0;text-transform:none;cursor:pointer;flex:0 0 auto;width:40px;height:40px;border-radius:999px;display:grid;place-items:center;background:var(--eden-ink);color:var(--eden-surface);font-size:16px}
.ae-x:focus-visible,.ae-chip:focus-visible,.ae-go:focus-visible{outline:2px solid #c9b7ff;outline-offset:2px}
@media (prefers-reduced-motion:reduce){.ae{transition:none}}
/* nothing ever scrolls the page sideways: the features stage keeps its demo's menus inside its frame (one reached 256px past the page's
   right edge), and the page itself clips anything else that tries (on the root, clip still scrolls, so it is the page, not html) */
.eo-page .eo-read{overflow:hidden}
.eo-page{overflow-x:clip}

/* ── THE FIRST SECTION'S CONTROLLER AND ITS STILLNESS (Josh, 2026-10-15) ── */
.eo-cycle-word.is-on{min-height:var(--cw-h, auto)}
.eo-cycle-flows > .eo-flow.is-on{min-height:var(--cf-h, auto)}
.eo-cyc{display:inline-flex;align-items:center;gap:4px;padding:4px;border-radius:999px;background:var(--blk);box-shadow:var(--blk-breath)}
.eo-cyc-b,.eo-cyc-s{appearance:none;margin:0;border:0;padding:0;text-transform:none;cursor:pointer;background:transparent}
.eo-cyc-b{width:32px;height:32px;border-radius:999px;display:grid;place-items:center;color:var(--eden-ink-2);transition:color .2s,background .2s}
.eo-cyc-b svg{width:16px;height:16px}
.eo-cyc-b:hover{color:var(--eden-ink);background:var(--eden-fill-hover)}
.eo-cyc-segs{display:flex;gap:6px;padding:0 6px}
.eo-cyc-s{width:28px;height:20px;display:flex;align-items:center}
.eo-cyc-s i{position:relative;display:block;width:100%;height:3px;border-radius:3px;background:var(--eden-line-2);overflow:hidden;transition:width .3s}
.eo-cyc-s i::after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--p, 0%);border-radius:inherit;background:linear-gradient(90deg,#9ee7ff,#c9b7ff,#f6c7e7,#fff4c2)}
.eo-cyc-s.is-on{width:44px}
.eo-cyc-s:hover i{background:var(--eden-line-strong)}
.eo-cyc-b:focus-visible,.eo-cyc-s:focus-visible{outline:2px solid #c9b7ff;outline-offset:2px}

/* ── STUDIO, UP CLOSE (site-studio-reel.js): six moments drawn with Studio's own chrome at Studio's own size ── */
.eo-up-stage{position:relative}
.sr-tile{position:absolute;left:50%;top:0;width:880px;height:520px;margin-left:-440px;transition:transform .8s cubic-bezier(.6,0,.2,1),opacity .8s;cursor:pointer}
.sr-tile.is-on{cursor:default}
.sr-st{position:absolute;inset:0;border-radius:16px;overflow:hidden;background:radial-gradient(rgba(255,255,255,.055) 1px,transparent 1.3px) 0 0/20px 20px,#0b0b0c;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 40px 90px -40px rgba(0,0,0,.8);pointer-events:none;font-family:"Source Sans 3",system-ui,sans-serif}
.sr-cap{display:flex;flex-direction:column;align-items:center;gap:4px;margin:0;text-align:center}
.sr-cap b{color:var(--eden-ink);font-family:var(--eden-text-title-family);font-size:var(--eden-text-title-size);font-weight:var(--eden-text-title-weight);line-height:var(--eden-text-title-line-height,normal)}
.sr-cap span{max-width:560px;color:var(--eden-ink-2);font-family:var(--eden-text-body-family);font-size:var(--eden-text-body-size);line-height:var(--eden-text-body-line-height,normal)}
/* the canvas beside the chrome, and the page section on it */
.sr-cv{position:absolute;left:0;top:0;bottom:0;right:320px;display:grid;place-items:center;padding:48px}
.sr-cv--tools{left:72px;right:0} .sr-cv--dock{left:372px;right:0} .sr-cv--fd{left:420px;right:0}
.sr-board{position:relative;width:100%;max-width:460px;border-radius:10px;background:#141416;color:#f4f4f5;box-shadow:0 0 0 1.5px #716cff}
.sr-tag{position:absolute;left:-1px;top:-26px;padding:3px 8px;border-radius:6px;background:#716cff;color:#fff;font:600 11px/1.3 "Source Sans 3",system-ui,sans-serif;white-space:nowrap}
.sr-eb{margin:0;color:#8b8c92;font:600 10.5px/1.2 "Source Sans 3",system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase}
.sr-h{margin:0;color:#f4f4f5;font-family:var(--eden-text-section-family);font-size:var(--eden-text-section-size);font-weight:var(--eden-text-section-weight);line-height:var(--eden-text-section-line-height,normal);letter-spacing:var(--eden-text-section-tracking)}
.sr-p{margin:0;max-width:30em;color:#a6a7ab;font:15px/1.5 "Source Sans 3",system-ui,sans-serif}
.sr-btn{align-self:flex-start;display:inline-flex;align-items:center;height:36px;padding:0 16px;border-radius:999px;background:#f4f4f5;color:#0c0c0e;font:600 13px/1 "Source Sans 3",system-ui,sans-serif}
.sr-sel{outline:1.5px solid #716cff;outline-offset:4px}
.sr-board--pic{box-shadow:none;background:none}
.sr-pic{width:100%;aspect-ratio:4/3;border-radius:8px;background:#1c1c20 center/cover no-repeat;overflow:hidden;box-shadow:0 0 0 1.5px #716cff}
.sr-board--mesh{aspect-ratio:4/3;overflow:visible}
.sr-meshfill{position:absolute;inset:0;border-radius:10px;overflow:hidden}
.sr-meshin{position:relative;height:100%;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;padding:32px}
.sr-board--promo,.sr-board--comp,.sr-board--type{display:flex;align-items:stretch;overflow:visible}
.sr-promo{--sr-gap:12px;--sr-pad:32px;flex:1;display:flex;flex-direction:column;gap:var(--sr-gap);padding:var(--sr-pad) 28px}
.sr-promo-img{flex:0 0 38%;border-radius:0 10px 10px 0;background:center/cover no-repeat}
.sr-board--draw{max-width:420px}
.sr-promo--draw{padding:24px 24px 8px}
.sr-art{position:relative;height:250px;margin:0 24px 24px}
.sr-shape{position:absolute;background:#f4f4f5}
.sr-shape--ellipse{border-radius:50%;background:#c8321f}
.sr-shape--star{background:none} .sr-shape--star svg{display:block;width:100%;height:100%;fill:#f4f4f5}
.sr-shape--rectangle{border-radius:2px;background:#3a3a40}
.sr-shape.is-drawing{background:transparent;outline:1.5px solid #716cff}
.sr-shape.is-drawing svg{fill:none;stroke:#716cff;stroke-width:1}
.sr-size{position:absolute;left:50%;bottom:-24px;transform:translateX(-50%);padding:2px 7px;border-radius:5px;background:#716cff;color:#fff;font:600 10.5px/1.4 "Source Sans 3",system-ui,sans-serif;white-space:nowrap;font-variant-numeric:tabular-nums}
.sr-row{display:flex;flex-wrap:wrap;gap:8px;min-height:40px;margin-top:6px;border-radius:8px;transition:outline-color .2s;outline:1.5px dashed transparent;outline-offset:4px}
.sr-row.is-drop{outline-color:#716cff}
.sr-ghost{position:absolute!important;z-index:30;transform:translate(-50%,-50%)!important;opacity:.85;pointer-events:none}
.sr-copy{position:static!important;transform:none!important}
/* the rail and its token menu (captured chrome, placed in the tile) */
.sr-rail{position:absolute;right:12px;top:12px;bottom:12px;width:296px;z-index:9;overflow:auto;scrollbar-width:none;border-radius:12px}
.sr-rail [data-sx-id="instrumentBar"]{position:relative!important;right:auto!important;top:auto!important;width:100%!important;max-height:none!important}
.sr-rail .al-field.is-open{box-shadow:inset 0 0 0 1.5px #716cff}
.sr-pop{position:absolute;inset:0;z-index:20;pointer-events:none}
.sr-pop[hidden]{display:none}
.sr-pop .token-popover{position:absolute!important;display:block!important;max-height:330px;overflow:auto;scrollbar-width:none}
.sr-pop .token-popover button.is-hover{background:rgba(255,255,255,.09)}
/* the tool strip, the Shape menu and the Components dock */
.sr-tools{position:absolute;left:12px;top:12px;z-index:9}
.sr-tools [data-sx-id="tools"]{position:relative!important;left:0!important;top:0!important;bottom:auto!important;height:auto!important;transform:none!important}
.sr-tools [data-sx-id="railStack"]{position:relative!important;top:0!important;bottom:auto!important;inset:auto!important}
.sr-fly{position:absolute;left:78px;top:60px;z-index:10}
.sr-fly[hidden]{display:none}
.sr-fly [data-sx-id="railFly"]{position:relative!important;left:0!important;top:0!important;transform:none!important;opacity:1!important;visibility:visible!important}
.sr-dock{position:absolute;left:78px;top:12px;bottom:12px;width:280px;z-index:9}
.sr-dock [data-sx-id="dock"]{position:absolute!important;left:0!important;top:0!important;bottom:0!important;height:auto!important;width:280px!important;max-height:none!important;transform:none!important;opacity:1!important;visibility:visible!important}
.sr-fd{position:absolute;left:12px;top:12px;bottom:12px;width:396px;z-index:9}
.sr-fd [data-sx-id="fdock"]{position:absolute!important;left:0!important;top:0!important;bottom:0!important;height:auto!important;width:396px!important;max-height:none!important;transform:none!important;opacity:1!important;visibility:visible!important}
.sr-fd .fd-node.on{background:rgba(255,255,255,.08);color:#f7f8f8}
/* the effects studio, as image-fx-lab.js styles it (its own rules, scoped here; buttons reset explicitly) */
.sr-fx{--fx-line:rgba(255,255,255,.08);--fx-ink:#F7F8F8;--fx-dim:#9a9b9c;--fx-field:rgba(255,255,255,.05);position:absolute;right:0;top:0;bottom:0;width:320px;z-index:9;display:flex;flex-direction:column;background:#0F1011;border-left:1px solid var(--fx-line);font:500 12px/1.3 "Source Sans 3",system-ui,sans-serif;color:var(--fx-ink)}
.sr-fx button{appearance:none;margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;text-transform:none;cursor:default}
.sr-fx .fx-head{display:flex;align-items:center;justify-content:space-between;height:44px;flex:none;padding:0 8px 0 16px;border-bottom:1px solid var(--fx-line)}
.sr-fx .fx-head b{font-weight:600;font-size:12px}
.sr-fx .fx-who{margin-left:6px;color:var(--fx-dim)}
.sr-fx .fx-x,.sr-fx .fx-ic{box-sizing:border-box;width:28px;height:28px;display:grid;place-items:center;border-radius:7px;color:var(--fx-dim);font-size:15px}
.sr-fx .fx-body{flex:1;min-height:0;overflow:hidden;padding:12px 12px 28px;display:flex;flex-direction:column;gap:10px}
.sr-fx .fx-bar{display:flex;gap:6px;align-items:center}
.sr-fx .fx-select{flex:1;min-width:0;height:30px;padding:0 8px;border-radius:8px;border:1px solid var(--fx-line);background:var(--fx-field);color:inherit;font:inherit;transition:box-shadow .2s}
.sr-fx .fx-select.is-on{box-shadow:0 0 0 1.5px #716cff}
.sr-fx .fx-seg{display:flex;padding:2px;border-radius:8px;background:var(--fx-field);gap:2px}
.sr-fx .fx-seg button{height:24px;padding:0 9px;border-radius:6px;color:var(--fx-dim);font-size:11px;display:flex;align-items:center}
.sr-fx .fx-seg button[aria-pressed="true"]{background:var(--fx-ink);color:#111}
.sr-fx section{border-radius:10px;background:var(--fx-field);padding:0 10px}
.sr-fx section.off > .fx-rows{display:none}
.sr-fx .fx-sh{display:flex;align-items:center;gap:8px;height:36px}
.sr-fx .fx-sh b{flex:1;font-weight:600;font-size:12px}
.sr-fx .fx-chev{color:var(--fx-dim)}
.sr-fx .fx-rows{padding:0 0 10px;display:flex;flex-direction:column;gap:6px}
.sr-fx .fx-row{display:grid;grid-template-columns:78px 1fr 46px;align-items:center;gap:8px;min-height:24px}
.sr-fx .fx-row.wide{grid-template-columns:78px 1fr}
.sr-fx .fx-row label{color:var(--fx-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr-fx .fx-row input[type=range]{width:100%;accent-color:var(--fx-ink);margin:0}
.sr-fx .fx-num{width:46px;height:22px;box-sizing:border-box;padding:0 4px;border-radius:5px;border:1px solid var(--fx-line);background:transparent;color:inherit;font:inherit;font-variant-numeric:tabular-nums;text-align:right}
.sr-fx .fx-chips{display:flex;flex-wrap:wrap;gap:3px}
.sr-fx .fx-chips button{height:22px;padding:0 7px;border-radius:5px;border:1px solid var(--fx-line);color:var(--fx-dim);font-size:11px;display:flex;align-items:center}
.sr-fx .fx-chips button[aria-pressed="true"]{border-color:var(--fx-ink);color:var(--fx-ink)}
.sr-fx .fx-toggle{appearance:none;width:30px;height:18px;border-radius:9px;background:var(--fx-line);position:relative;margin:0;flex:none}
.sr-fx .fx-toggle::after{content:'';position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--fx-dim);transition:transform .12s}
.sr-fx .fx-toggle:checked{background:var(--fx-ink)}
.sr-fx .fx-toggle:checked::after{transform:translateX(12px);background:#111}
/* the mesh's own inspector, with the values Studio gives its variables */
.sr-mesh{--studio-ink:#F7F8F8;--studio-ink-dim:#75757a;--studio-ink-mid:#A6A7A7;--studio-hairline:rgba(255,255,255,.08);--studio-fill-hover:rgba(255,255,255,.045);--studio-nb:#0F1011;--studio-milled:#0F1011;--studio-lift:#1a1b1d;--studio-black:#0a0a0b;--studio-sans:"Source Sans 3",system-ui,sans-serif;
  position:absolute;right:0;top:0;bottom:0;width:320px;z-index:9;overflow:auto;scrollbar-width:none;background:#0F1011;border-left:1px solid rgba(255,255,255,.08);color:#F7F8F8;font-family:var(--studio-sans)}
.sr-mesh .mgl-inspector{overflow:visible;border:0}
.sr-mesh details{border-bottom:1px solid var(--studio-hairline)}
.sr-mesh summary{padding:12px 14px;color:var(--studio-ink);font:600 12px/1.2 var(--studio-sans);list-style:none}
.sr-mesh summary::-webkit-details-marker{display:none}
.sr-mesh select,.sr-mesh input:not([type=range]):not([type=checkbox]){min-width:0;height:28px;padding:0 8px;border-radius:7px;border:1px solid var(--studio-hairline);background:rgba(255,255,255,.05);color:var(--studio-ink);font:500 11.5px/1 var(--studio-sans)}
.sr-mesh button{appearance:none;margin:0;padding:0 8px;height:28px;border:1px solid var(--studio-hairline);border-radius:7px;background:none;color:var(--studio-ink-mid);font:500 11px/1 var(--studio-sans);text-transform:none}
.sr-mesh input[type=range]{width:100%;margin:0;accent-color:#F7F8F8}
.sr-mesh .mgl-controls>label{font-size:11px}
.sr-mesh .mgl-inline{display:flex;gap:6px}
.sr-mesh .mgl-check{display:flex!important;gap:8px;align-items:center}
.sr-meshin .sr-eb{color:rgba(255,255,255,.78)}
/* ONE PANEL EACH (2026-10-15): every moment is the page on the left and one panel on the right, as the effects studio and the mesh are */
.sr-side{position:absolute!important;left:auto!important;right:0!important;top:0!important;bottom:0!important;width:320px!important;z-index:9;overflow:hidden;border-radius:0!important;background:#0F1011;border-left:1px solid rgba(255,255,255,.08)}
.sr-rail.sr-side{overflow:auto;scrollbar-width:none}
.sr-rail.sr-side [data-sx-id="instrumentBar"]{background:transparent!important;box-shadow:none!important;border:0!important}
.sr-dock.sr-side [data-sx-id="dock"],.sr-fd.sr-side [data-sx-id="fdock"]{width:320px!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:transparent!important}
.sr-fd.sr-side .fd-main,.sr-fd.sr-side .fd-tabs,.sr-fd.sr-side .fd-edits{display:none!important}
.sr-fd.sr-side .fd-body{display:block!important}
.sr-fd.sr-side .fd-nav{width:100%!important;max-width:none!important;border:0!important}
.sr-shapes{display:flex;flex-direction:column;font:500 12px/1.3 "Source Sans 3",system-ui,sans-serif;color:#F7F8F8}
.sr-shapes .fx-head{display:flex;align-items:center;height:44px;flex:none;padding:0 16px;border-bottom:1px solid rgba(255,255,255,.08)}
.sr-shapes .fx-head b{font-weight:600;font-size:12px} .sr-shapes .fx-who{margin-left:6px;color:#9a9b9c}
.sr-shapes .sr-fly{position:static!important;padding:12px}
.sr-shapes [data-sx-id="railFly"]{display:flex!important;flex-direction:column!important;gap:6px!important;width:auto!important;padding:0!important;background:none!important;box-shadow:none!important;border:0!important}
.sr-shapes .ri-card{width:100%!important}
.sr-shapes .ri-pill{width:100%!important;justify-content:flex-start!important}
.sr-shapes .ri-pill.on{box-shadow:inset 0 0 0 1.5px #716cff!important}
/* ONE CARD, THE SAME EVERY TIME (2026-10-15): the page in the first two thirds, one floating card in the last third, four or five controls */
.sr-cv{left:0!important;right:33.333%!important;padding:40px}
.sr-card{position:absolute;z-index:9;right:28px;top:50%;transform:translateY(-50%);width:276px;padding:14px;border-radius:14px;background:#141416;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 24px 60px -24px rgba(0,0,0,.8);font:500 12px/1.3 "Source Sans 3",system-ui,sans-serif;color:#F7F8F8}
.sr-card header{display:flex;align-items:baseline;gap:6px;padding:2px 2px 12px;margin-bottom:12px;border-bottom:1px solid rgba(255,255,255,.07)}
.sr-card header b{font-size:13px;font-weight:600} .sr-card header span{color:#8b8c92}
.sr-rows{display:flex;flex-direction:column;gap:10px}
.sr-r{display:grid;grid-template-columns:76px minmax(0,1fr) 44px;align-items:center;gap:10px;min-height:28px}
.sr-r--field,.sr-r--wide{grid-template-columns:76px minmax(0,1fr)}
.sr-r label{color:#8b8c92;white-space:nowrap;transition:color .2s}
.sr-r.on label{color:#F7F8F8}
.sr-r output{color:#F7F8F8;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.sr-card input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:16px;margin:0;background:transparent}
.sr-card input[type=range]::-webkit-slider-runnable-track{height:3px;border-radius:2px;background:rgba(255,255,255,.16)}
.sr-card input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;margin-top:-4.5px;border-radius:50%;background:#F7F8F8;box-shadow:0 1px 3px rgba(0,0,0,.5);transition:box-shadow .2s}
.sr-card input[type=range]::-moz-range-track{height:3px;border-radius:2px;background:rgba(255,255,255,.16)}
.sr-card input[type=range]::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:#F7F8F8}
.sr-r.on input[type=range]::-webkit-slider-thumb{box-shadow:0 0 0 3px rgba(113,108,255,.5)}
.sr-field{display:flex;align-items:center;justify-content:space-between;gap:8px;height:30px;padding:0 10px;border-radius:8px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);transition:box-shadow .2s}
.sr-field.on{box-shadow:inset 0 0 0 1.5px #716cff}
.sr-field svg{flex:none;color:#8b8c92}
.sr-field--in > span:empty::before{content:"Search";color:#6f7076}
.sr-menu{position:absolute;z-index:3;display:flex;flex-direction:column;padding:4px;border-radius:10px;background:#1b1b1f;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 18px 40px -12px rgba(0,0,0,.8)}
.sr-menu span{padding:6px 8px;border-radius:6px;color:#c2c2c7}
.sr-menu span.is-cur{color:#F7F8F8;font-weight:600}
.sr-menu span.is-hover{background:rgba(255,255,255,.09);color:#F7F8F8}
.sr-shapes{display:flex;gap:4px}
.sr-sh{display:grid;place-items:center;width:32px;height:30px;border-radius:7px;background:rgba(255,255,255,.05);color:#a6a7ab;transition:box-shadow .2s,color .2s}
.sr-sh svg{width:18px;height:18px}
.sr-sh.on{box-shadow:inset 0 0 0 1.5px #716cff;color:#F7F8F8}
.sr-shape--ellipse{background:#f4f4f5}
.sr-shape.is-accent{background:#c8321f} .sr-shape--star.is-accent{background:none} .sr-shape--star.is-accent svg{fill:#c8321f}
.sr-lib{display:flex;flex-direction:column;gap:6px;opacity:.3;transition:opacity .3s}
.sr-lib.is-found{opacity:1}
.sr-item{display:flex;align-items:center;gap:10px;padding:6px;border-radius:9px;background:rgba(255,255,255,.04);transition:box-shadow .2s}
.sr-item.on{box-shadow:inset 0 0 0 1.5px #716cff}
.sr-item-pv{display:grid;place-items:center;flex:none;width:112px;height:44px;overflow:hidden;border-radius:6px;background:#0f0f11}
.sr-item-pv > *{transform:scale(.72)!important}
.sr-item-n{color:#c2c2c7}
.sr-list{display:flex;flex-direction:column;gap:2px}
.sr-li{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;border-radius:8px;color:#c2c2c7;transition:background .2s,color .2s}
.sr-li b{font-size:14px}
.sr-li em{color:#6f7076;font-style:normal}
.sr-li.on{background:rgba(255,255,255,.07);color:#F7F8F8;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
/* DARK, MORE SEPARATION (Josh, 2026-10-15: "dark mode - still a touch too hard to see the containers against the background... maybe the
   background color needs to lighten a bit and the containers need to be closer to black?"). On this page, in Dark only: the ground lifts a
   step (#121214 → #19191c) and the containers drop toward black (#0c0c0e and #0F1011 → #09090a and #0b0b0c). Eden's Foundation is unchanged. */
html[data-scheme="dark"],html[data-scheme="dark"] .eo-page{--eden-black:#19191c;--ground:#19191c}
html[data-scheme="dark"] .eo-page{--blk:#09090a;--eden-surface:#0b0b0c}
/* SHORTER TABS (Josh, 2026-10-15): the playing tab's status line only takes room when it has something to say */
.ltab__now:empty{display:none}
.ltab__steps{margin-top:8px}
/* VISUAL ANSWERS IN THE DRAWER (2026-10-15): the drawer widens while a showcase is in it */
.ae{transition-property:transform,width}
.ae.is-wide{width:min(640px,100vw)}
.ae-log{position:relative}
.ae-show{margin-top:var(--eden-space-12)}
/* SHAPES, AGAIN (2026-10-15: "this is poorly done. try again."): words and an art space side by side; a moon, a horizon and a star */
.sr-board--draw{display:flex;align-items:center;gap:24px;max-width:480px;padding:28px}
.sr-draw-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px}
.sr-art2{position:relative;flex:none;width:176px;height:176px}
.sr-shape-row{display:flex;gap:4px}
.sr-shape{position:absolute;background:none;border-radius:0}
.sr-shape--ellipse{border-radius:50%;background:#8e9097}
.sr-shape--line{background:currentColor;border-radius:1px}
.sr-shape--star svg{display:block;width:100%;height:100%;fill:currentColor}
.sr-shape--star.is-accent svg{fill:#c8321f}
.sr-shape.is-drawing{background:transparent!important;outline:1.5px solid #716cff}
.sr-shape--line.is-drawing{outline-offset:2px}
.sr-shape--star.is-drawing svg{fill:none;stroke:#716cff;stroke-width:1}
.sr-shape.sr-sel{outline:1.5px solid #716cff;outline-offset:3px}
/* the type list, as the real scale: name, its values, its specimen (2026-10-15) */
.sr-li{display:grid!important;grid-template-columns:minmax(0,1fr) auto 40px;align-items:center;gap:10px;min-height:38px}
.sr-li b{font-weight:500;font-size:12.5px}
.sr-li small{color:#6f7076;font-size:10.5px;font-variant-numeric:tabular-nums;white-space:nowrap}
.sr-li em{justify-self:end;color:inherit;line-height:1;font-style:normal}
/* DOTS (Josh, 2026-10-15: "use a more simple pattern... maybe dots"): one dot per slide, the current one lit; no progress fill */
.eo-cyc-segs{gap:2px;padding:0 4px}
.eo-cyc-s,.eo-cyc-s.is-on,.eo-cyc-s.on{width:20px;height:24px;justify-content:center}
.eo-cyc-s i{width:6px!important;height:6px;border-radius:50%;background:var(--eden-line-strong);transition:background .25s,transform .25s}
.eo-cyc-s i::after{display:none}
.eo-cyc-s:hover i{background:var(--eden-ink-3)}
.eo-cyc-s.is-on i,.eo-cyc-s.on i{background:var(--eden-ink);transform:scale(1.15)}
/* the rail stays inside the frame: never past its bottom edge (2026-10-15) */
.eo-frame > .insp{max-height:calc(100% - 32px);overflow:auto;scrollbar-width:none;border-radius:14px}
.eo-frame > .insp::-webkit-scrollbar{display:none}

/* ── EDEN IN USE ON A PHONE (assessment, 2026-10-16: at real size the rail, the strip and the agent's rail covered the whole 440px frame,
   so the demo itself never showed). Designed for the phone, not shrunk: the canvas on top, as a picture of the whole set at the frame's
   width; under it one slot, 432px, where Studio's rail sits at its real size, and the agent's rail takes the same slot while the agent
   works. The strip of tools is left out; the menus still open over the canvas, where the demo clicks. ── */
/* (its phone stacking is gone: the demos stay whole on a phone, 2026-10-24; see the end of this file) */
/* the play's top row sits along the hero's top edge, above the line, not at a share of the hero's height, which put it over the words
   (assessment, 2026-10-16); the two side pieces stay beside the words */
.eo-stage .hplay .s1{top:56px} .eo-stage .hplay .s2,.eo-stage .hplay .s3,.eo-stage .hplay .s4{top:24px}
/* the drawer, closed, is closed to the keyboard too: its own display rule outranked [hidden], so its eight controls stayed in the tab order
   off screen (assessment, 2026-10-16) */
.ae[hidden]{display:none!important}
/* TAP TARGETS ON A TOUCH SCREEN (same pass): the header's two buttons, the carousels' arrows and segments and the view bar's buttons are
   drawn as they are; on a touch screen each answers a press across at least 44px, its hit area centred on it */
@media (pointer:coarse){
  .eo-top [role="button"],.eo-x-mode,.eo-cyc-b,.eo-cyc-s,.eo-x-bar button{position:relative}
  .eo-top [role="button"]::after,.eo-x-mode::after,.eo-cyc-b::after,.eo-cyc-s::after,.eo-x-bar button::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,44px);height:max(100%,44px);transform:translate(-50%,-50%)}
}

/* ── EDEN IN USE, FREE FLOATING (Josh, 2026-10-16: "the tool rail, the main frame, the chat rail, the editing rail... all looked like free
   floating sets of ui vs being inside a framed container"): no frame, no canvas ground behind them; each piece is its own panel on the
   page. And nothing moves between tabs ("Each tab should load in its UI"): the strip, the agent's rail, Studio's rail and the page are put
   where the tab has them at once; inside a tab the demo still works them as before ── */
:is(#app,#studio,.ld-host).look-float .eo-frame{background:none!important;box-shadow:none!important;overflow:visible}
:is(#app,#studio,.ld-host).look-float .eo-frame::before,:is(#app,#studio,.ld-host).look-float .eo-frame::after{display:none}
:is(#app,#studio,.ld-host).look-float .eo-frame .live__space{overflow:visible;background:none}
:is(#app,#studio,.ld-host).look-float .eo-frame > .ld-agent{border-radius:14px!important;background:var(--c2)!important;box-shadow:var(--breath)!important}
:is(#app,#studio,.ld-host).look-float .eo-frame > .ld-tools,:is(#app,#studio,.ld-host).look-float .eo-frame > .ld-agent,:is(#app,#studio,.ld-host).look-float .eo-frame > .insp{transition:none!important}
:is(#app,#studio,.ld-host).look-float .eo-frame > .ld-agent.is-off{transform:none}
:is(#app,#studio,.ld-host).look-float .scene .sec{transition:background .5s,color .5s,padding .28s cubic-bezier(.3,.7,.2,1)}
/* the strip drew two edges (Josh, 2026-10-16: "the ui looks doubled up"): a clear 1px border inside the ring, with the panel's fill stopping
   at it, left a dark line between the fill and the ring; the ring alone is the edge, on the fill */
:is(#app,#studio,.ld-host) .ld-tools [data-sx-id="barTool"],:is(#app,#studio,.ld-host) .ld-tools [data-sx-id="railStack"]{border:0!important}

/* ── ACT 03, IN A REAL BROWSER (Josh, 2026-10-16): the page alone in a browser window, Studio's strip and rail and the agent set aside. The
   window's bar sits on the page's top edge, in the scene's units, so it scales with the page ── */
.scene .ld-bbar{display:none;position:absolute;left:var(--sec-x);top:calc(var(--sec-y) - 40px);width:var(--sec-w, 660px);height:40px;z-index:2;
  align-items:center;gap:7px;padding:0 14px;border-radius:12px 12px 0 0;background:var(--c3,#151517);box-shadow:inset 0 -1px 0 rgba(255,255,255,.05)}
.scene.is-browser .ld-bbar{display:flex}
.scene .ld-bbar > i{width:10px;height:10px;border-radius:50%;background:#2c2c30;flex:0 0 auto}
.scene .ld-url{flex:0 1 52%;margin:0 auto;height:24px;border-radius:999px;background:var(--c1,#0c0c0e);display:flex;align-items:center;justify-content:center;gap:1px;
  color:var(--t3,#a6a7a7);font:500 11.5px/1 var(--ib-font, inherit);box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}
.scene .ld-url b{font-weight:500}
.scene .ld-bbar.is-focus .ld-url{box-shadow:inset 0 0 0 1px rgba(201,183,255,.45)}
.scene .ld-bbar.is-focus .ld-url-c{width:1px;height:12px;background:var(--t2,#d4d4d6)}
.scene.is-browser .sec{border-top-left-radius:0;border-top-right-radius:0}
.scene .sec.is-blank > *{opacity:0} .scene .sec > *{transition:opacity .35s ease}
.eo-frame.no-tools > .ld-tools{opacity:0!important;pointer-events:none}   /* acts 02 and 03 (2026-10-16)
/* (its phone stacking is gone: the demos stay whole on a phone, 2026-10-24; see the end of this file) */

/* the cursor's name, You or Agent, as the hero's play draws it (2026-10-16) */
:is(#live-frame,.sl-frame,.ld-frame) .ghost .ghost__who{position:absolute;left:18px;top:20px;padding:2px 8px;border-radius:999px;font:600 11px/1.5 var(--eden-text-ui-family);white-space:nowrap;
  pointer-events:none;background:#ececef;color:#0c0c0e;box-shadow:0 4px 12px rgba(0,0,0,.35)}
:is(#live-frame,.sl-frame,.ld-frame) .ghost .ghost__who--agent{background:linear-gradient(115deg,#9ee7ff,#c9b7ff,#f6c7e7);color:#0c0c0e}
:is(#live-frame,.sl-frame,.ld-frame) .ghost .ghost__who[hidden]{display:none}
/* the cursor stays in sight over every panel (2026-10-16: typing a prompt, it went under the agent's rail): the scene, which carries it, sits
   above the panels; with no frame its ground is clear, and the panels and the page never overlap */
:is(#app,#studio,.ld-host).look-float .eo-frame .live__space{z-index:6}
/* WHO IT'S FOR, THREE CARDS JOINED (Josh, 2026-10-16): one surface for the three, a hairline between them, no gutters */
/* (the joined columns take the page's surface too, 2026-10-26) */
.eo-page .eo-for-col{background:transparent!important;box-shadow:none!important;border-radius:0}
.eo-page .eo-for-col + .eo-for-col{border-left:1px solid var(--eden-line)}
/* on a phone the three are a row that scrolls (a Grid carousel, 2026-10-24), so each is a card of its own */
@media (max-width:767px){.eo-page .eo-for{background:none;box-shadow:none}
  .eo-page .eo-for-col{background:var(--blk)!important;box-shadow:var(--blk-breath)!important;border-radius:var(--eden-r-14)}
  .eo-page .eo-for-col + .eo-for-col{border-left:0}}
/* THE QUESTIONS: the simple concept's chevron (Josh, 2026-10-27: "use faq width and styling from the simple concept"), turning up when an
   answer is open; the question lights on hover */
.eo-faq-q::-webkit-details-marker{display:none}
.eo-faq-q::after{content:"";position:absolute;right:4px;top:50%;width:9px;height:9px;margin-top:-7px;border:solid var(--eden-ink-3);border-width:0 1.5px 1.5px 0;transform:rotate(45deg);transition:transform .25s,margin-top .25s,border-color .2s}
.eo-faq-i[open] > .eo-faq-q::after{transform:rotate(225deg);margin-top:-2px;border-color:var(--eden-ink)}
.eo-faq-q:hover::after{border-color:var(--eden-ink)} .eo-faq-q .eo-faq-h{transition:color .2s} .eo-faq-i:not([open]) .eo-faq-q:not(:hover) .eo-faq-h{color:var(--eden-ink-2)}
.eo-faq-q:focus-visible{outline:2px solid #c9b7ff;outline-offset:4px;border-radius:6px}
@media (prefers-reduced-motion:reduce){.eo-faq-q::after{transition:none}}

/* ── EDEN HUB, IN TURN (2026-10-16): its boxes are drawn as the agent section's are; one page of the Hub at a time once the turn runs (at
   rest, and on Studio's canvas, all four are drawn) ── */
.htab{position:relative;transition:background .2s}
.htab-h,.htab-b{transition:color .2s} .htab:hover .htab-h,.htab.is-on .htab-h{color:var(--eden-ink)} .htab.is-on .htab-b{color:var(--eden-ink-2)}
.htab.is-on::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(115deg,#9ee7ff,#c9b7ff,#f6c7e7,#fff4c2,#9ee7ff,#c9b7ff);background-size:300% 300%;animation:foil 40s linear infinite;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.htab:focus-visible{outline:2px solid #c9b7ff;outline-offset:2px}
.look-combined .htab{background:var(--c1)!important;border-color:transparent!important;box-shadow:var(--breath)!important}
.look-combined .htab-h{color:var(--t1)!important} .look-combined .htab-b{color:var(--t3)!important}   /* full brightness always (2026-10-27) */
.look-combined .htab:hover .htab-h,.look-combined .htab.is-on .htab-h{color:var(--t1)!important} .look-combined .htab.is-on .htab-b{color:var(--t3)!important}
.htab__bar{display:block;align-self:stretch;height:2px;margin-top:10px;border-radius:2px;overflow:hidden;background:rgba(255,255,255,.08)}
.htab__bar i{display:block;height:100%;width:var(--p,0%);background:linear-gradient(90deg,#9ee7ff,#c9b7ff,#f6c7e7,#fff4c2)}
.htab:not(.is-on) .htab__bar{opacity:0}
.is-cycling .eo-hub-stage > :not(.is-on){display:none}
@media (prefers-reduced-motion:reduce){.htab.is-on::before{animation:none}}

/* ── STUDIO, LOOSE (Josh, 2026-10-17): the Studio section's pieces float as the agent section's do (site-studio-loose.js). The frame fills
   its stage; the Components and Foundation panels sit beside the strip at their real size; box 04 draws the page's Desktop and Mobile
   boards side by side. Nothing moves between boxes. ── */
.sl-frame{position:absolute!important;inset:0;min-height:0!important}
.sl-scene [hidden]{display:none!important}
.sl-fly{position:absolute;left:96px;top:16px;bottom:16px;z-index:4}
.sl-fly.is-off{display:none}
.sl-fly [data-sx-id="dock"],.sl-fly [data-sx-id="fdock"]{position:absolute!important;left:0!important;top:0!important;bottom:0!important;height:auto!important;width:300px!important;
  max-height:none!important;transform:none!important;opacity:1!important;visibility:visible!important;border-radius:14px!important;box-shadow:var(--breath,none)!important}
.sl-fly--wide [data-sx-id="fdock"]{width:344px!important}
.sl-scene .sec.sl-phone .pcards{grid-template-columns:1fr}
.sl-scene .sec.sl-phone .pcard:nth-child(n+2),.sl-scene .sec.sl-phone .rstrip,.sl-scene .sec.sl-phone .sel,.sl-scene .sec.sl-phone .sec__f i,.sl-scene .sec.sl-phone .sec__f b{display:none}
.sl-scene .sec.sl-phone .sec__f{flex-wrap:wrap}
.sl-board{position:absolute;z-index:2;font:600 11px/1 var(--ib-font, inherit);letter-spacing:.08em;text-transform:uppercase;color:var(--t3,#6e6f75)}
/* (its phone stacking is gone: the demos stay whole on a phone, 2026-10-24; see the end of this file) */
/* the real Studio window only opens full screen now (Edit this page): it no longer sits in the section */
#studio-window:not(.is-full){display:none!important}

/* the Studio section's runs (2026-10-17): the button dragged from Components, the button it becomes on the page, and the text style the cursor
   picks in the Foundation */
.sl-scene .sl-drag{position:absolute;left:0;top:0;z-index:20;padding:7px 16px;border-radius:999px;background:#f7f8f8;color:#0c0c0e;font:600 13px/1 var(--ib-font, inherit);
  box-shadow:0 10px 30px rgba(0,0,0,.45);opacity:.92;pointer-events:none}
.sl-scene .sl-cta{align-self:center;margin:18px auto 4px;width:fit-content;padding:8px 18px;border-radius:999px;background:#f7f8f8;color:#0c0c0e;font:600 13px/1 var(--ib-font, inherit)}
.sl-fly .fd-node.sl-pick{background:var(--hover,rgba(255,255,255,.06));color:var(--ink,#f7f8f8);box-shadow:inset 0 0 0 1px rgba(201,183,255,.45);border-radius:6px}
.sl-scene .sec__h{transition:font-size .35s cubic-bezier(.3,.7,.2,1)}

/* ── ONE GRID FOR EVERY TAB (Josh, 2026-10-17: "the tool palette should align at top and bottom and the ui shown - same top to bottom and the
   rail also top to bottom and the elements should try to be consistently spaced and aligned on each frame"): in the agent and Studio
   sections every piece runs the frame's full height, nothing is inset from its edges, and the gap between pieces is 24px. The boxes on the
   left fill the same height, so the frame and the boxes start and end together ── */
@media (min-width:768px){
  .eo-frame > .ld-tools{top:0!important;bottom:0!important;left:0}
  .eo-frame.agent-on > .ld-tools{left:324px}
  .eo-frame > .ld-tools [data-sx-id="tools"]{height:100%!important;display:flex!important;flex-direction:column}
  .eo-frame > .ld-tools [data-sx-id="railStack"]{flex:1 1 auto!important}
  .eo-frame > .insp{top:0!important;right:0!important;bottom:0!important;height:auto!important;max-height:none!important}
  .eo-frame > .insp [data-sx-id="instrumentBar"]{height:100%!important}
  .eo-frame > .ld-agent{top:0!important;bottom:0!important;left:0!important;width:300px!important}
  .eo-frame .scene .sec{min-height:var(--sec-h, 0px)}
  .eo-frame .scene .hlth{top:0!important;right:0!important;bottom:0!important;width:var(--rail-sw, 340px)!important;height:auto!important}
  .sl-fly{left:86px;top:0;bottom:0}
  .eo-live-row > .eo-ltabs,.eo-hub-row > .eo-hub-tabs,.eo-hub-row > .eo-gtabs{align-self:stretch}
  .eo-ltabs > .ltab,.eo-hub-tabs > .htab,.eo-gtabs > .htab,.eo-ctabs > .htab{flex:1 1 0%}
}
/* the Studio section's Components panel names its components and shows no previews (Josh, 2026-10-17: "only show component names in the
   rail not the thumbnails") */
.sl-fly .palette.no-thumbs .tile-prev{display:none!important}
.sl-fly .palette.no-thumbs .tile{padding:8px 10px}

/* ONE CONTROL FOR EVERY CAROUSEL (Josh, 2026-10-17): the count, then two plain chevrons on the reel's own round buttons; the dot pill is gone */
.eo-cyc{background:none!important;box-shadow:none!important;padding:0!important;gap:8px!important}
.eo-cyc .eo-cyc-segs{display:none!important}
.eo-cyc .eo-cyc-b{appearance:none;border:0;margin:0;padding:0;cursor:pointer;width:40px!important;height:40px!important;border-radius:999px;display:grid;place-items:center;
  background:var(--eden-surface)!important;box-shadow:var(--blk-breath);color:var(--eden-ink-2);transition:color .2s,opacity .2s}
.eo-cyc .eo-cyc-b:hover,.eo-reel-b:hover:not(:disabled){color:var(--eden-ink)}
.eo-cyc .eo-cyc-b svg,.eo-reel-b svg{width:16px;height:16px}
.eo-cyc .eo-reel-n{margin-right:12px}

/* ── YOUR FOUNDATION, LIVE (act 04, 2026-10-17): Studio's Foundation panel as one column beside the strip, from the frame's top to its bottom;
   the colour picker shows once the swatch is pressed; the page's brand colour is the panel's own ── */
.eo-frame > .ld-fd{position:absolute;left:86px;top:0;bottom:0;width:320px;z-index:4;opacity:1}
.ld-fd [data-sx-id="fdock"]{position:absolute!important;inset:0!important;left:0!important;top:0!important;width:100%!important;height:100%!important;
  clip-path:none!important;transform:none!important;border-radius:14px;overflow:hidden;z-index:auto!important}
.ld-fd:not(.is-main) .fd-main{display:none!important}
.ld-fd.is-main .fd-nav{display:none!important} .ld-fd.is-main .fd-main{display:block!important;overflow:hidden;padding:24px 24px 60px!important}   /* Studio's second column, as .fs-wide pads it */
.ld-fd .fd-pick{display:none} .ld-fd.is-pick .fd-pick{display:block}
.ld-fd .fd-body{height:calc(100% - 48px);overflow:hidden}
.scene.is-brand .pcard__btn{background:var(--mb-brand, #b3261e)!important;color:#fff!important}
.scene.is-brand .sec__eb{color:var(--mb-brand, #b3261e)!important}
.scene.is-brand .sec__h{font-size:calc(26px * var(--mb-hs, 1))}   /* Heading LG/D's size, 40 to 48, followed by the page */
/* (its phone stacking is gone: the demos stay whole on a phone, 2026-10-24; see the end of this file) */
/* act 04 on a phone: the Foundation panel takes the rail's slot, and is gone from the frame in the other acts */
.eo-frame > .ld-fd.is-off{display:none!important}
/* (its phone stacking is gone: the demos stay whole on a phone, 2026-10-24; see the end of this file) */
/* (its phone stacking is gone: the demos stay whole on a phone, 2026-10-24; see the end of this file) */
/* the tab boxes are one height (2026-10-18): each keeps its step line whether or not it is playing, and none is shorter than the tallest
   one's words (concept-open-hero.js sets --tab-min) */
.ltab__now:empty{display:block!important}
@media (min-width:768px){ .eo-ltabs > .ltab,.eo-hub-tabs > .htab,.eo-gtabs > .htab,.eo-ctabs > .htab{min-height:var(--tab-min, 0px)} }

/* a carousel card opens larger (2026-10-18): it says so on hover and to the keyboard; the full-screen view has no list when a card has none */
.eo-opens{cursor:zoom-in;transition:box-shadow .2s} .eo-opens:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.eo-opens:focus-visible{outline:2px solid #c9b7ff;outline-offset:3px}
.vgm-pts:empty{display:none}
/* the full-screen view's stage stays centred when what it shows is wider than the stage before scaling (a phone): it sits on the stage's
   centre, out of the grid's flow, so an overflow can't push it to one side */
.vgm-stage > .vgm-fit{position:absolute;left:50%;top:50%;translate:-50% -50%}

/* the spacing moment's content card (2026-10-18): a card on the page, its padding and gap the field's values; while one changes, Studio's
   hot spot colour shows it: the padding as a band inside the card's edge, the gap as the bars between its parts */
.sr-board--cc{display:flex;justify-content:center;padding:36px 40px;box-shadow:none}
.sr-cc{position:relative;width:250px;border-radius:12px;background:#1c1c1f;outline-offset:3px}
.sr-cc .sr-tag{left:-4px;top:-29px}
.sr-cc-img{display:block;aspect-ratio:16/10;border-radius:12px 12px 0 0;background:center/cover no-repeat}
.sr-cc-body{--sr-pad:8px;--sr-gap:4px;display:flex;flex-direction:column;gap:var(--sr-gap);padding:var(--sr-pad);border-radius:0 0 12px 12px}
.sr-cc-h{margin:0;color:#f4f4f5;font:600 18px/1.25 "Source Sans 3",system-ui,sans-serif}
.sr-cc .sr-p{font-size:13px}
.sr-cc-link{color:#f4f4f5;font:600 12.5px/1.3 "Source Sans 3",system-ui,sans-serif;text-decoration:underline;text-underline-offset:3px}
.sr-cc-body.is-pad{background:linear-gradient(#1c1c1f,#1c1c1f) content-box,rgba(113,108,255,.32)}
.sr-cc-body.is-gap{background:rgba(113,108,255,.32) content-box} .sr-cc-body.is-gap > *{background:#1c1c1f}

/* the type moment's list (2026-10-18): the Foundation's families as group labels, each style a row with its size / leading · weight */
.sr-list--sys{gap:0} .sr-list--sys .sr-li{padding-top:7px;padding-bottom:7px}
.sr-li-g{display:block;padding:10px 12px 4px;color:#8b8c92;font:600 10px/1.2 "Source Sans 3",system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase}
.sr-li-g:first-child{padding-top:2px}

/* ── YOUR SYSTEM, GOVERNED (2026-10-18): Studio's rail and Foundation panel as captured, placed on the agent section's grid: the rail from the
   frame's top to its bottom on the right, the Foundation's two columns beside the strip; the page between them. The captured roots are
   Studio's fixed panels, held in place here ── */
.gv-frame > .gv-rail{position:absolute;right:0;top:0;bottom:0;width:280px;z-index:4}
.gv-frame > .gv-fd{position:absolute;left:86px;top:0;bottom:0;width:640px;z-index:4}
.gv-frame > .is-off{display:none!important}
.gv-frame [data-sx-id="instrumentBar"],.gv-frame [data-sx-id="fdock"]{position:absolute!important;inset:0!important;left:0!important;right:auto!important;top:0!important;
  width:100%!important;height:100%!important;transform:none!important;clip-path:none!important;border-radius:14px;overflow:hidden;z-index:auto!important}
.gv-frame [data-sx-id="instrumentBar"]{overflow-y:auto;scrollbar-width:none} .gv-frame [data-sx-id="instrumentBar"]::-webkit-scrollbar{display:none}
.sl-scene .gv-note{display:flex;gap:16px;margin-top:18px;padding:12px;border-radius:10px;background:#1c1c1f;max-width:440px}
.gv-note-img{flex:0 0 120px;aspect-ratio:4/3;border-radius:8px;background:url(media/moonboots/lifestyle-black.jpg) center/cover no-repeat}
.gv-note-t{display:flex;flex-direction:column;gap:4px;min-width:0}
.gv-note-k{margin:0;color:#8b8c92;font:600 9.5px/1.2 "Source Sans 3",system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase}
.gv-note-h{margin:0;color:#f4f4f5;font:600 15px/1.25 "Source Sans 3",system-ui,sans-serif}
.gv-note-p{margin:0;color:#a6a7ab;font:12px/1.45 "Source Sans 3",system-ui,sans-serif}
.gv-note-a{color:#f4f4f5;font:600 11.5px/1.3 "Source Sans 3",system-ui,sans-serif;text-decoration:underline;text-underline-offset:3px}
/* (its phone stacking is gone: the demos stay whole on a phone, 2026-10-24; see the end of this file) */
/* box 04 on a phone: the Foundation's second column, where the proposal is, takes the slot (the colours' list is the first) */
/* (its phone stacking is gone: the demos stay whole on a phone, 2026-10-24; see the end of this file) */

/* ── CAPTURE FROM ANY SITE (2026-10-18): Moon Boots' current store (fictional, an older theme) in a browser with Eden's capture tools on it;
   the capture on Studio's canvas with the Components rail's Quarantine; the agent measuring the store into the Foundation ── */
.cp-scene > *{position:absolute}
.cp-scene > .is-off,.cp-frame > .is-off{display:none!important}
.cp-frame > .cp-fd{left:324px}
.cp-win{border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.06)}
.cp-win > .cp-bar{position:relative;display:flex;align-items:center;gap:6px;height:40px;padding:0 14px;background:#e9e9ec}
.cp-win > .cp-bar i{width:10px;height:10px;border-radius:50%;background:#c9c9ce}
.cp-win > .cp-bar .ld-url{margin-left:14px;flex:1;max-width:460px;height:24px;display:flex;align-items:center;padding:0 12px;border-radius:999px;background:#fff;color:#55565c;font:500 12px/1 "Source Sans 3",system-ui,sans-serif}
.cp-win > .cp-bar .ld-url b{font-weight:500}
.cp-page{position:absolute;inset:40px 0 0;overflow:hidden}
/* the store's own old theme: serif, warm, rounded, nothing of Moon Boots' new system */
.os{background:#fbf8f3;color:#2b2622;font-family:Georgia,"Times New Roman",serif}
.cp-page > .os{min-height:100%}
.os-ann{padding:8px;text-align:center;background:#2b2622;color:#fbf8f3;font:13px/1.2 Georgia,serif}
.os-head{display:flex;align-items:center;gap:26px;padding:18px 40px;border-bottom:1px solid #e7dfd3;font-size:15px}
.os-logo{margin-right:auto;font-size:22px;letter-spacing:.12em} .os-bag{margin-left:auto}
.os-hero{padding:30px 40px 18px} .os-k{margin:0 0 6px;color:#b3261e;font-size:13px;font-style:italic} .os-h{margin:0;font-size:34px;line-height:1.1}
.os-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;padding:6px 40px 40px}
.os-card{padding:12px;border-radius:16px;background:#fff;box-shadow:0 2px 10px rgba(43,38,34,.08);text-align:center}
.os-img{display:block;aspect-ratio:1/1;border-radius:10px;background:#f1ece4 center/cover no-repeat}
.os-name{margin:12px 0 2px;font-size:17px} .os-price{margin:0 0 12px;color:#7a6f66;font-size:15px}
.os-btn{display:inline-block;padding:9px 22px;border-radius:999px;background:#b3261e;color:#fff;font:600 13px/1 Georgia,serif}
.cp-win--small .os-grid{grid-template-columns:repeat(2,1fr)} .cp-win--small .os-card:nth-child(n+3){display:none}
/* Eden's capture layer (Studio's lib/eden-capture.js, its own stylesheet, scoped) */
.cp-cap{position:absolute;inset:40px 0 0;pointer-events:none}
.cp-cap *{box-sizing:border-box;font:500 12px/1.3 "Source Sans 3",system-ui,-apple-system,sans-serif;color:#f7f8f8}
.cp-cap .box{position:absolute;border:1.5px solid #f7f8f8;box-shadow:0 0 0 1px rgba(0,0,0,.55);border-radius:2px;display:none;transform:translateY(-40px)}
.cp-cap .box.kept{border-style:dashed;opacity:.75}
.cp-cap .tag{position:absolute;display:none;padding:3px 7px;border-radius:4px;background:#0f1011;white-space:nowrap;font-size:11px;transform:translateY(-40px)}
.cp-cap .tag b{font-weight:600}.cp-cap .tag span{color:#a6a7a7}.cp-cap .tag i{font-style:normal;color:#7f8080;margin-left:10px}
.cp-cap .dock{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px}
.cp-cap .bar{display:flex;align-items:center;gap:2px;padding:4px;border-radius:999px;background:#0f1011;box-shadow:0 10px 30px rgba(0,0,0,.3),0 0 0 1px rgba(255,255,255,.08)}
.cp-cap .mark{padding:0 10px 0 8px;font-weight:600;letter-spacing:.01em}
.cp-cap button{all:unset;display:flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;color:#c9caca}
.cp-cap button.on{background:#f7f8f8;color:#0f1011}
.cp-cap .count{min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#2a2b2d;display:inline-flex;align-items:center;justify-content:center;font-size:11px}
.cp-cap .tray{width:360px;border-radius:12px;background:#0f1011;box-shadow:0 10px 30px rgba(0,0,0,.3),0 0 0 1px rgba(255,255,255,.08);padding:6px}
.cp-cap .tray[hidden]{display:none}
.cp-cap .row{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:8px}
.cp-cap .row .k{flex:none;width:40px;color:#a6a7a7;font-size:11px}
.cp-cap .row .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp-cap .row button{padding:2px 7px;color:#a6a7a7}
.cp-cap .row .row-go{flex:none;padding:4px 9px;border-radius:999px;background:#f7f8f8;color:#0f1011;font-size:11px;white-space:nowrap}
.cp-cap .row .row-go.is-hl{background:#fff}
.cp-cap .row .row-go:disabled{background:#2a2b2d;color:#a6a7a7}
.cp-cap .foot{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 8px 4px;border-top:1px solid #222326;margin-top:4px;color:#a6a7a7;font-size:11px}
.cp-cap .foot span{color:#a6a7a7} .cp-cap .foot button{padding:3px 8px}
/* Studio's canvas: the capture laid out in three, each under its label (placeCaptureRow) */
.cp-canvas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;align-content:center;padding:40px 48px;border-radius:14px;
  background:radial-gradient(rgba(255,255,255,.055) 1px,transparent 1.3px) 0 0/20px 20px,#0b0b0c}
.cp-col{display:flex;flex-direction:column;gap:8px;min-width:0}
.cp-col-h{margin:0;color:#f4f4f5;font:600 17px/1.25 "Source Sans 3",system-ui,sans-serif}
.cp-col-p{margin:0 0 10px;min-height:60px;color:#8b8c92;font:13px/1.45 "Source Sans 3",system-ui,sans-serif}
.cp-col-c > .os{padding:12px;border-radius:12px} .cp-col-c .pcard{border-radius:10px}
.cp-col-c .pcard.cp-ours{width:100%}
/* the Components rail's Quarantine (index.html .q-row, .q-meta) */
.cp-rail{border-radius:14px;background:#121214;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);padding:16px;display:flex;flex-direction:column;gap:12px;color:#c2c2c7;font:13px/1.35 "Source Sans 3",system-ui,sans-serif;overflow:hidden}
.cp-rail-h{display:flex;align-items:baseline;gap:8px} .cp-rail-h b{color:#f4f4f5;font-weight:600;font-size:15px} .cp-rail-h span{color:#6f7077}
.cp-filter{display:flex;gap:4px;padding:3px;border-radius:8px;background:#1c1c1f} .cp-filter b{flex:1;text-align:center;padding:5px 0;border-radius:6px;font-weight:500;font-size:12px;color:#8b8c92} .cp-filter b.on{background:#2a2a2e;color:#f4f4f5}
.cp-group{display:flex;justify-content:space-between;padding-top:6px;color:#6f7077;font:600 10.5px/1 "Source Sans 3",system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase}
.cp-rail .q-row{display:flex;flex-direction:column;gap:6px;padding:8px 0 10px;border-bottom:1px solid rgba(255,255,255,.08)}
.cp-rail .q-row:last-child{border-bottom:0}
.cp-rail .q-meta{display:flex;justify-content:space-between;gap:8px;font-size:11px;color:#8a8b8c}
.cp-q-name{display:block;padding:9px 10px;border-radius:8px;background:#1c1c1f;color:#f4f4f5;font-size:12.5px}
.cp-q-acts{display:flex;gap:6px} .cp-rail .btn{all:unset;padding:5px 12px;border-radius:999px;background:#1f1f22;color:#d6d6da;font-size:12px}
.cp-rail .q-approve{background:#f4f4f5;color:#0c0c0e}
.cp-rail .q-row.is-approved .cp-q-acts::after{content:"In the library";align-self:center;margin-left:4px;color:#f4f4f5;font-size:12px}
.cp-rail .q-row.is-approved .btn{display:none}
/* the Foundation filling as the agent measures */
.cp-fd .fs-cfg{transition:opacity .4s} .cp-fd.cp-filling .fs-in-sec:first-of-type .fs-cfg:not(.cp-lit){opacity:.25}
/* (its phone stacking is gone: the demos stay whole on a phone, 2026-10-24; see the end of this file) */
/* capture, fitted (2026-10-18): the store's cards sized so the capture tools sit under them; the Make it ours card shows its picture; the
   narrow store keeps its logo on one line */
.cp-win:not(.cp-win--small) .os-grid{grid-template-columns:repeat(3,minmax(0,230px));justify-content:center;gap:28px}
.cp-win:not(.cp-win--small) .os-hero{text-align:center}
.cp-col-c .pcard.cp-ours .pcard__img{background:#ececef url(media/moonboots/product-white.jpg) center / cover no-repeat!important}
.cp-win--small .os-head{gap:12px;padding:14px 18px;font-size:13px} .cp-win--small .os-logo{font-size:16px;white-space:nowrap}
.cp-win--small .os-head span:not(.os-bag){display:none} .cp-win--small .os-hero{padding:22px 18px 12px} .cp-win--small .os-h{font-size:26px}
.cp-win--small .os-grid{padding:6px 18px 30px;gap:14px}
.cp-cap .mark,.cp-cap button{white-space:nowrap}

/* THE CARDS FOLLOW THE RADIUS TOKEN (Josh, 2026-10-19: "round the cards a little more - nothing happens"): the scene's cards were fixed at
   10px, so the agent's r-4 to r-14 never reached them; the card, its picture and its button now step with --cr (r-4 draws as before) */
.scene .pcard{border-radius:calc(var(--cr, 4px) + 6px)}
.scene .pcard__img{border-radius:calc(var(--cr, 4px) + 3px)}
.scene .pcard__btn{border-radius:calc(var(--cr, 4px) + 3px)}
/* THE PAGE FLOATS (Josh, 2026-10-19: "remove the container border and fill so that these ui examples float without background color or
   border"): in the loose sections (Studio, governed) the page has no panel of its own; its parts sit on the section */
.sl-scene .sec{background:transparent!important;box-shadow:none!important;border:0!important}
[data-eden-auth][hidden]{display:none!important}   /* signed in or out: website/src/js/eden-auth.js shows one of Log in / Open Hub */
[data-eo-edit][hidden]{display:none!important}   /* Edit this page, where Studio is served only */

/* the account control, the older site's (ui-packages/toolbar/styles.css .eden-toolbar .ab-account*), for someone signed in */
.eo-acct{--tb-line:var(--eden-line);--tb-text:var(--eden-paper);--tb-soft:var(--eden-soft);display:contents}   /* no box of its own, so signed out it leaves no gap in the header (2026-10-25) */
.eo-acct .ab-account{appearance:none;display:inline-flex;align-items:center;gap:7px;background:transparent;border:1px solid transparent;border-radius:var(--eden-r-item,8px);
  padding:3px 7px 3px 3px;color:var(--tb-soft);font-family:inherit;font-size:var(--eden-t-toolbar,13px);cursor:pointer;transition:color .15s,border-color .15s}
.eo-acct .ab-account[hidden],.eo-acct .ab-account-menu[hidden]{display:none!important}
.eo-acct .ab-account:hover,.eo-acct .ab-account[aria-expanded="true"]{color:var(--tb-text);border-color:var(--tb-line)}
.eo-acct .ab-avatar{position:relative;overflow:hidden;width:21px;height:21px;border-radius:50%;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  background:#1b1b1f;color:var(--eden-paper);font-size:10px;font-weight:600;letter-spacing:.02em}
.eo-acct .ab-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%;display:none} .eo-acct .ab-avatar.has-img img{display:block}
.eo-acct .ab-account-n{white-space:nowrap}
.eo-acct .ab-account-chev{width:11px;height:11px;flex:0 0 auto;margin-left:1px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;opacity:.7}
.eo-acct .ab-account:hover .ab-account-chev{opacity:1}
.eo-acct .ab-account-menu{position:fixed;z-index:90;min-width:190px;padding:5px;background:var(--eden-milled,#1b1b1f);border:1px solid var(--tb-line);border-radius:11px;
  box-shadow:var(--eden-lift,0 18px 40px -16px rgba(0,0,0,.8))}
.eo-acct .ab-account-head{display:flex;flex-direction:column;gap:2px;padding:7px 9px 8px;border-bottom:1px solid var(--tb-line);margin-bottom:4px;color:var(--tb-text);font-size:var(--eden-t-toolbar,13px)}
.eo-acct .ab-account-role{color:var(--eden-grey,#8a8b8c);font-size:10.5px;letter-spacing:.04em;text-transform:uppercase}
.eo-acct .ab-account-item{display:block;width:100%;text-align:left;border:0;background:transparent;color:var(--tb-soft);font-family:inherit;font-size:var(--eden-t-toolbar,13px);
  padding:7px 9px;border-radius:7px;cursor:pointer;text-decoration:none;box-sizing:border-box}
.eo-acct .ab-account-item:hover{color:var(--tb-text);background:rgba(255,255,255,.06)}
@media (max-width:767px){ .eo-acct .ab-account-n{display:none} }

/* ── THE DEMOS STAY WHOLE ON A PHONE (Josh, 2026-10-24: "the graphic area needs to remain together... not stacked"): the Studio, governance,
   capture and agent frames are drawn on a phone as they are on Desktop, canvas and rail together, at an 800px design width, and scaled to
   the column (concept-open-hero.js sets --eo-k: the column's width over 800). Their own phone arrangements (the rail in a slot under the
   canvas) are retired, and their scripts lay them out as on Desktop ── */
@media (max-width:767px){
  .eo-sl > .eo-frame{position:relative!important;inset:auto!important;flex:0 0 auto!important;width:800px!important;height:600px!important;zoom:var(--eo-k,.42)}
  .eo-sl > .gv-frame{height:600px!important}   /* one design height on a phone, so every stage scales to the same 251px (2026-10-26) */
  :is(#live-frame,.ld-frame){flex:0 0 auto!important;align-self:flex-start!important;width:800px!important;height:640px!important;min-height:0!important;zoom:var(--eo-k,.42)}
}

/* the teams page carries the agent demo's frame only as the governance demo's source (2026-10-25): never shown */
[data-eo-source]{display:none!important}

/* the agent demo's frame is clear from the start, as its float look leaves it and as Studio draws it (2026-10-26) */
:is(#live-frame,.ld-frame){background:none}

/* UP CLOSE: each moment says what it shows inside its card, bottom centre, and the drawing sits above it (Josh, 2026-10-26); a phone draws the
   card scaled to its width, too small to read, so there the words stay under the card (.sr-cap) */
.sr-tcap{position:absolute;left:0;right:0;bottom:28px;z-index:3;display:flex;flex-direction:column;align-items:center;gap:4px;margin:0;padding:0 48px;text-align:center;pointer-events:none}
.sr-tcap b{color:var(--eden-ink);font-family:var(--eden-text-title-family);font-size:var(--eden-text-title-size);font-weight:var(--eden-text-title-weight);line-height:var(--eden-text-title-line-height,normal)}
.sr-tcap span{max-width:560px;color:var(--eden-ink-2);font-family:var(--eden-text-body-family);font-size:var(--eden-text-body-size);line-height:var(--eden-text-body-line-height,normal)}
.sr-tile .sr-cv{bottom:96px}
.sr-cap{display:none}
@media (max-width:767px){.sr-tcap{display:none}.sr-tile .sr-cv{bottom:0}.sr-cap{display:flex}}

/* CHAPTER TABS ARE LINES, NOT CARDS (Josh, 2026-10-26: "maybe a highlight on the top border, no rounded edges, no fills"): no fill, no radius, no
   ring, over the look-combined cards too; the chosen tab's top border lights up */
.ltab,.htab,.look-combined .ltab,.look-combined .htab{background:none!important;border-radius:0!important;box-shadow:none!important;border-top-color:var(--eden-line)!important}
.ltab.is-on::before,.htab.is-on::before{inset:-1px 0 auto 0;height:1px;padding:0;border-radius:0;-webkit-mask:none;mask:none}

/* UP CLOSE: the picture keeps its whole height above the words (Josh, 2026-10-26: "recrop this so we dont loose the top") */
.sr-tile .sr-pic{height:320px;width:auto;max-width:100%}
/* THE WAY IN, FULL SCREEN (Josh, 2026-10-26: "similar to the login pages"): the chosen plan's form over the whole page, the mark top left */
#choose.is-open{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:var(--eden-space-80) var(--eden-space-32);background:var(--eden-black);overflow:auto;max-width:none}
#choose.is-open{flex-direction:column;align-items:center!important}
#choose.is-open .eo-form{width:100%;max-width:960px;margin:auto!important}
.eo-modal-mark{position:fixed;top:var(--eden-space-24);left:var(--eden-space-32);margin:0;color:var(--eden-ink);font-family:var(--eden-text-title-family);font-size:var(--eden-text-title-size);font-weight:var(--eden-text-title-weight)}
.eo-modal-x{position:fixed;top:var(--eden-space-16);right:var(--eden-space-24);width:44px;height:44px;border-radius:999px;border:1px solid var(--eden-line-strong);background:none;color:var(--eden-ink);font:inherit;font-size:22px;line-height:1;cursor:pointer}
.eo-modal-x:hover{background:var(--eden-surface)}
#choose:not(.is-open):not(:empty){display:none}   /* the way in is full screen only (2026-10-26); closed, its form stayed under the FAQ, off the page's grid (Josh, 2026-10-28: "Is the waitlist supposed to be here at the bottom of the marketing site?"), and its fixed mark and close sat over the header. Empty, it keeps its place, as Studio draws it (the plans' gap on teams and partners) */
body.eo-modal-on{overflow:hidden}
@media (max-width:767px){#choose.is-open{align-items:flex-start;padding:var(--eden-space-80) var(--eden-space-20) var(--eden-space-32)}.eo-modal-mark{left:var(--eden-space-20)}}
/* PEOPLE AT WORK ON ONE SYSTEM (concept-open-hero.js): a small page in progress and three named cursors moving over it */
.eo-act-scene{overflow:hidden;border-radius:14px;background:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1.3px) 0 0/20px 20px,#0b0b0c;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.pr-page{position:absolute;left:50%;top:28px;bottom:-24px;width:min(560px,78%);transform:translateX(-50%);border-radius:10px;background:#141416;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);padding:16px;display:flex;flex-direction:column;gap:14px}
.pr-nav{display:flex;gap:8px} .pr-nav i{height:6px;width:36px;border-radius:3px;background:rgba(255,255,255,.12)} .pr-nav i:first-child{width:56px;background:rgba(255,255,255,.24)}
.pr-hero{display:flex;flex-direction:column;gap:8px;padding:8px 0} .pr-hero b{height:14px;width:60%;border-radius:4px;background:rgba(255,255,255,.32)}
.pr-hero i{height:7px;width:80%;border-radius:3px;background:rgba(255,255,255,.12)} .pr-hero i.s{width:55%} .pr-hero span{margin-top:4px;height:18px;width:88px;border-radius:999px;background:rgba(255,255,255,.85)}
.pr-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;flex:1} .pr-row div{border-radius:6px;background:rgba(255,255,255,.06)}
.pr-row .pr-sel{box-shadow:0 0 0 1.5px #716cff}
.pr-cur{position:absolute;display:flex;align-items:flex-start;gap:2px;color:#f7f8f8;pointer-events:none;transition:none}
.pr-cur span{margin-top:12px;padding:3px 8px;border-radius:999px;font-family:var(--eden-text-meta-family);font-size:12px;line-height:1.3;white-space:nowrap;color:#0b0b0c}
.pr-a{color:#9ee7ff} .pr-a span{background:#9ee7ff}
.pr-b{color:#f6c7e7} .pr-b span{background:#f6c7e7}
.pr-c{color:#c9b7ff} .pr-c span{background:linear-gradient(90deg,#9ee7ff,#c9b7ff,#f6c7e7,#fff4c2)}
.pr-a{left:24%;top:46%;animation:pr-a 9s ease-in-out infinite} .pr-b{left:62%;top:30%;animation:pr-b 11s ease-in-out infinite} .pr-c{left:46%;top:70%;animation:pr-c 8s ease-in-out infinite}
@keyframes pr-a{0%,100%{transform:translate(0,0)}35%{transform:translate(90px,-40px)}70%{transform:translate(40px,30px)}}
@keyframes pr-b{0%,100%{transform:translate(0,0)}40%{transform:translate(-110px,50px)}75%{transform:translate(-30px,-20px)}}
@keyframes pr-c{0%,100%{transform:translate(0,0)}30%{transform:translate(70px,-30px)}65%{transform:translate(-60px,-10px)}}
@media (prefers-reduced-motion:reduce){.pr-cur{animation:none}}
@media (max-width:767px){.pr-page{width:86%;top:20px}.pr-cur span{font-size:11px}}

/* THE PIECES AROUND THE DESIGNERS BAND (Josh, 2026-10-26: "bring back the ui that pop in around the content area"): a row of pieces above the words and a row below, never over them */
.eo-actp .hplay .hv-slot{right:auto}
.eo-actp .hplay .s1{left:calc(50% - 620px);top:40px} .eo-actp .hplay .s2{left:calc(50% - 85px);top:24px} .eo-actp .hplay .s3{left:calc(50% + 380px);top:48px}
.eo-actp .hplay .s4{left:calc(50% - 560px);top:calc(100% - 268px)} .eo-actp .hplay .s5{left:calc(50% - 120px);top:calc(100% - 262px)} .eo-actp .hplay .s6{left:calc(50% + 330px);top:calc(100% - 290px)}

/* THE STUDIOS SECTION (2026-10-26): each surface's engine fills it; the preset showing is named at its foot, on Studio's own glass */
.eo-stu-surf .eo-stu-fill{position:absolute;inset:0}
.eo-stu-surf .eo-stu-fill > *{width:100%;height:100%}
.eo-stu-surf > canvas,.eo-stu-surf .eo-stu-fill{transition:opacity .26s ease}
.eo-stu-surf.is-switch > canvas,.eo-stu-surf.is-switch .eo-stu-fill{opacity:0}
.eo-stu-chip{position:absolute;left:16px;bottom:16px;z-index:2;padding:4px 10px;border-radius:999px;background:rgba(15,16,17,.72);color:#f7f8f8;
  font:600 12px/1.4 var(--eden-text-ui-family,"Source Sans 3",sans-serif);letter-spacing:.02em;box-shadow:0 0 0 1px rgba(255,255,255,.08);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);pointer-events:none}
@media (prefers-reduced-motion:reduce){.eo-stu-surf > canvas,.eo-stu-surf .eo-stu-fill{transition:none}}

/* YOUR COMPONENTS, SHOWN (site-components.js, 2026-10-27): a master on Studio's canvas and Studio's rail for it, drawn at their own size and
   fitted to the stage; the item being read lights its parts with Studio's own spectral edge (accent is light, never a fill) */
.eo-cmx-stage{background:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1.3px) 0 0/16px 16px}
.cmx-set{position:absolute;left:50%;top:50%;display:flex;gap:28px;align-items:stretch;padding:28px;transform-origin:50% 50%;font-family:var(--eden-text-ui-family)}
.cmx-canvas{position:relative;flex:1;min-width:0;display:grid;place-items:center}
.cmx-board{position:absolute;left:0;top:0;color:#8b8c92;font:500 11px/1 var(--eden-text-ui-family)}
.cmx-master{position:relative;width:260px;display:flex;flex-direction:column;gap:10px}
.cmx-mtag{position:absolute;left:0;top:-30px;display:flex;align-items:center;gap:6px;padding:4px 9px;border-radius:6px;background:#716cff;color:#fff;font:600 11px/1.3 var(--eden-text-ui-family)}
.cmx-mtag b{font-weight:600}
.cmx-lock{display:none;width:13px;height:13px} .cmx-lock svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.4}
.is-locked .cmx-lock{display:block}
.cmx-tags{position:absolute;right:0;top:-30px;display:flex;gap:4px;opacity:0;transition:opacity .25s}
.cmx-tags em{padding:3px 8px;border-radius:999px;box-shadow:inset 0 0 0 .5px rgba(255,255,255,.3);color:#c2c2c7;font:500 10.5px/1.3 var(--eden-text-ui-family);font-style:normal}
.cmx-tags.is-lit{opacity:1}
.cmx-card{position:relative;display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:12px;background:#fff;color:#18181b;outline:1.5px solid #716cff;outline-offset:3px}
.cmx-img{display:block;aspect-ratio:1;border-radius:8px;background:#ececef center/cover no-repeat}
.cmx-row{display:flex;justify-content:space-between;gap:8px;margin:0;font:600 13px/1.25 var(--eden-text-ui-family)}
.cmx-meta{margin:-4px 0 0;color:#6b6b72;font:12px/1.3 var(--eden-text-ui-family)}
.cmx-btn{display:block;height:34px;border-radius:999px;background:#18181b;color:#fff;font:600 12px/34px var(--eden-text-ui-family);text-align:center;text-decoration:none;transition:background .25s}
.cmx-btn.is-lit{background:#3a3a42}
.cmx-pad{position:absolute;left:0;right:0;height:12px;border-radius:12px;opacity:0;transition:opacity .25s;background:repeating-linear-gradient(-45deg,rgba(113,108,255,.32) 0 4px,transparent 4px 8px)}
.cmx-pad--t{top:0} .cmx-pad--b{bottom:0} .cmx-pad.is-lit{opacity:1}
.cmx-vars{display:flex;flex-wrap:wrap;align-items:center;gap:4px;opacity:0;transform:translateY(-4px);transition:opacity .25s,transform .25s}
.cmx-vars span{margin:0 2px 0 6px;color:#6f7076;font:600 9.5px/1 var(--eden-text-ui-family);letter-spacing:.1em;text-transform:uppercase} .cmx-vars span:first-child{margin-left:0}
.cmx-vars em{padding:3px 8px;border-radius:6px;box-shadow:inset 0 0 0 .5px rgba(255,255,255,.2);color:#a6a7ab;font:500 11px/1.2 var(--eden-text-ui-family);font-style:normal}
.cmx-vars em.on{color:#f7f8f8;box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}
.cmx-vars.is-lit{opacity:1;transform:none}
.cmx-rule{position:absolute;left:0;right:0;top:calc(100% + 8px);margin:0;padding:8px 10px;border-radius:9px;box-shadow:inset 0 0 0 .5px rgba(255,255,255,.22);color:#d4d4d8;font:12px/1.4 var(--eden-text-ui-family);opacity:0;transition:opacity .25s}
.cmx-rule.is-lit{opacity:1}
.cmx-menu{position:absolute;left:58%;top:20%;display:flex;align-items:center;gap:14px;margin:0;padding:8px 11px;border-radius:9px;background:rgba(20,20,23,.94);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.14),0 16px 32px -16px rgba(0,0,0,.8);color:#ececef;font:500 12px/1 var(--eden-text-ui-family);white-space:nowrap;opacity:0;transform:translateY(4px);transition:opacity .25s,transform .25s}
.cmx-menu kbd{color:#8b8c92;font:inherit} .cmx-menu.is-lit{opacity:1;transform:none}
.cmx-set .cmx-rail{flex:none;align-self:stretch;width:280px!important;min-width:0}
.cmx-set .cmx-rail [data-sx-id="instrumentBar"]{position:relative!important;inset:auto!important;width:100%!important;height:100%;max-height:100%!important;overflow:hidden;box-shadow:none!important}   /* in the rail's place in the set, on every board (a phone rule elsewhere pins the live demo's rail) */
.cmx-rail .stack-item,.cmx-rail .master-save{position:relative;transition:box-shadow .25s}
.cmx-rail .stack-item.is-lit,.cmx-rail .master-save.is-lit{border-radius:8px;box-shadow:inset 0 0 0 1px #f7f8f8,inset 0 0 0 2.5px rgba(201,183,255,.5),inset 0 0 14px rgba(158,231,255,.18)}
.cmx-locknote{margin:6px 0 0;padding:8px 10px;border-radius:8px;box-shadow:inset 0 0 0 .5px rgba(217,178,124,.6);color:#e8d3b0;font:12px/1.4 var(--eden-text-ui-family);opacity:0;transition:opacity .25s}
.cmx-locknote.is-lit{opacity:1}
.cmx-card.is-lit{outline-color:#f7f8f8;box-shadow:0 0 0 6px rgba(201,183,255,.25)}
.is-locked .cmx-card{outline-color:#f7f8f8}
/* the list: the item being read is at full ink, the rest wait at a quieter step */
.eo-cmx-i{transition:border-color .25s}   /* every item at full brightness (Josh, 2026-10-27: "i dont want sections that you have to hover over to see them at full brightness"); the one being read wears a lit line */
.eo-cmx-i.is-on{border-top-color:var(--eden-ink-2)!important}
.eo-cmx-i:focus-visible{outline:2px solid #c9b7ff;outline-offset:4px;border-radius:4px}
@media (prefers-reduced-motion:reduce){.cmx-set *{transition:none!important}}
/* the phone's own set: a compact card on the canvas, the rail under it at near its true size */
.cmx-set.is-phone{flex-direction:column;gap:16px;padding:16px}
.is-phone .cmx-canvas{flex:none;height:170px;place-items:end start;padding:0 0 4px 4px}
.is-phone .cmx-board{display:none}
.is-phone .cmx-master{width:100%}
.is-phone .cmx-card{display:grid;grid-template-columns:76px 1fr;grid-template-rows:auto auto auto;column-gap:12px;row-gap:4px;padding:10px}
.is-phone .cmx-img{grid-row:1 / 4;width:76px}
.is-phone .cmx-btn{height:28px;line-height:28px}
.is-phone .cmx-mtag{top:-28px}
.is-phone .cmx-tags{top:-28px}
.is-phone .cmx-vars{position:absolute;left:96px;top:-28px;flex-wrap:nowrap}
.is-phone .cmx-vars.is-lit + .cmx-rule,.is-phone .cmx-tags.is-lit ~ .cmx-vars{opacity:0}
.is-phone .cmx-rule{left:auto;right:0;top:-52px;width:190px;padding:5px 8px;font-size:11px;line-height:1.35;background:rgba(20,20,23,.94)}
.is-phone .cmx-menu{left:auto;right:0;top:-30px}
.is-phone .cmx-rail{flex:1;min-height:0}
.cmx-set.is-phone .cmx-rail{width:100%!important}
.is-phone .cmx-rail .seg-card{display:none}   /* the phone keeps the rows the six items light, so the lock note fits */
.cmx-hist{position:absolute;left:0;right:0;top:calc(100% + 8px);display:flex;flex-direction:column;gap:2px;padding:6px;border-radius:9px;box-shadow:inset 0 0 0 .5px rgba(255,255,255,.22);background:rgba(20,20,23,.94);opacity:0;transition:opacity .25s}
.cmx-hist p{display:flex;align-items:baseline;gap:8px;margin:0;padding:4px 6px;border-radius:6px;color:#c2c2c7;font:12px/1.3 var(--eden-text-ui-family)}
.cmx-hist b{width:44px;color:#8b8c92;font-weight:500} .cmx-hist span{flex:1} .cmx-hist em{color:#f7f8f8;font-style:normal;font-weight:600}
.cmx-hist p:first-child{box-shadow:inset 0 0 0 .5px rgba(255,255,255,.18)} .cmx-hist.is-lit{opacity:1}
.is-phone .cmx-hist{top:auto;bottom:calc(100% + 34px);font-size:11px}

/* ── STUDIO, AS IT DRAWS ITSELF (fidelity pass, 2026-10-27; Josh: "these snapshots are not accurate enough to the real studio"): the live
   set (site-live-set.js) laid out and styled as the running Studio is, measured from it at :4399 (dark). Revised the same day (Josh: "i want
   to show the ui. remove the studio background"): no window ground and no canvas; Studio's Floating chrome, each piece its own card on the
   site's ground (the palette's cards and the rail's card, below); the page a square
   board on the canvas, no border, its title row above it (index.html .boardlabel: 12px, 600, --muted #75757a; the size 500 --faint
   #47474b; Live 11px 600 on --hover, 6px radius); the selection 1px #716cff with a 5px radius and its glow, the name above it on #716cff
   (700 9px, .06em), white 7px handles with a 1.5px #716cff edge, and the size chip under it (10.5px on #716cff, 3px radius); the view bar
   under the canvas (12px 500; the chosen view on 13% white). Studio's own cursor is a filled dot in its cursor colour with a dark name tag
   (lib/agent-cursor.js). Scoped to the set's frame (.ld-frame), over the floating and combined looks it used to wear ── */
/* NO WINDOW, NO CANVAS (Josh, 2026-10-27: "i want to show the ui. remove the studio background"): the pieces float on the site's own ground */
:is(#app,#studio,.ld-host) .eo-frame.ld-frame{background:none!important;border-radius:0!important;overflow:visible!important;box-shadow:none!important}
:is(#app,#studio,.ld-host) .eo-frame.ld-frame.is-browser{background:none!important}
:is(#app,#studio,.ld-host) .ld-frame .live__space{background:none!important;overflow:visible!important}
/* THE TOOL PALETTE, AS STUDIO'S FLOATING CHROME DRAWS IT (measured at :4399, data-chrome="float"; Josh: "make sure the tool palette is reflective
   of the real tool palette style and sizing"): its menu card 54 square and its tools card 54 wide, 8px apart and 8px in from the edge, each
   #121214 with a 14px radius and 0 12px 32px rgba(0,0,0,.45); tools 62 by 36 (their word hidden, as Studio keeps it), 2px apart, 20px icons
   at a 1.5 stroke in #75757a; groups 8px apart, a 20px hairline between them; a chosen tool's icon on a 36px rgba(255,255,255,.10) tile, in ink */
:is(#app,#studio,.ld-host) .ld-frame > .ld-tools.ld-pal{position:absolute!important;left:8px!important;top:8px!important;bottom:auto!important;width:54px!important;height:auto!important;opacity:1;
  background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding:0!important;transition:none!important;z-index:4}
:is(#app,#studio,.ld-host) .ld-frame > .ld-pal [data-sx-id="tools"]{position:static!important;width:54px!important;height:auto!important;display:flex!important;flex-direction:column!important;
  align-items:stretch!important;gap:8px!important;padding:0!important;background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;transform:none!important}
:is(#app,#studio,.ld-host) .ld-frame > .ld-pal :is([data-sx-id="barTool"],[data-sx-id="railStack"]){position:static!important;margin:0!important;width:54px!important;
  background:#121214!important;border:1px solid transparent!important;border-radius:14px!important;box-shadow:0 12px 32px rgba(0,0,0,.45)!important;box-sizing:border-box}
:is(#app,#studio,.ld-host) .ld-frame > .ld-pal [data-sx-id="barTool"]{height:54px!important;display:grid!important;place-items:center!important;padding:0!important;color:#F7F8F8}
:is(#app,#studio,.ld-host) .ld-frame > .ld-pal [data-sx-id="barTool"] svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
:is(#app,#studio,.ld-host) .ld-frame > .ld-pal [data-sx-id="railStack"]{display:flex!important;flex-direction:column!important;align-items:center!important;padding:8px 0!important;inset:auto!important;height:auto!important}
:is(#app,#studio,.ld-host) .ld-frame > .ld-pal .rail-zone{position:relative!important;display:flex!important;flex-direction:column!important;align-items:center!important;gap:2px!important;padding:0!important;margin:0!important;border:0!important;background:none!important}
:is(#app,#studio,.ld-host) .ld-frame > .ld-pal .rail-zone + .rail-zone{margin-top:8px!important;padding-top:8px!important;border:0!important}
:is(#app,#studio,.ld-host) .ld-frame > .ld-pal .rail-zone + .rail-zone::before{content:""!important;display:block!important;position:absolute!important;top:0;left:50%;width:20px;margin-left:-10px;border-top:1px solid rgba(255,255,255,.08)}
:is(#app,#studio,.ld-host) .ld-frame > .ld-pal .tool{position:relative!important;width:62px!important;height:36px!important;min-height:0!important;padding:0!important;margin:0!important;display:grid!important;place-items:center!important;
  border:0!important;border-radius:10px!important;background:none!important;color:#75757a!important;box-shadow:none!important}
:is(#app,#studio,.ld-host) .ld-frame > .ld-pal .tool > .tool-label{display:none!important}
:is(#app,#studio,.ld-host) .ld-frame > .ld-pal .tool svg.ri{width:20px!important;height:20px!important;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;display:block;border-radius:2px;background:none;box-shadow:none}
:is(#app,#studio,.ld-host) .ld-frame > .ld-pal .tool.on:not(.vs-opt){color:#F7F8F8!important}
:is(#app,#studio,.ld-host) .ld-frame > .ld-pal .tool.on:not(.vs-opt) svg.ri{background:rgba(255,255,255,.10);box-shadow:0 0 0 8px rgba(255,255,255,.10)}
:is(#app,#studio,.ld-host) .ld-frame > .ld-pal .tool::after{display:none}
:is(#app,#studio,.ld-host) .ld-frame.no-tools > .ld-tools{opacity:0!important}
/* the rail: Studio's Floating rail, one card, 8px in from the right */
:is(#app,#studio,.ld-host) .ld-frame > .insp{top:8px!important;right:8px!important;bottom:8px!important;width:280px!important;height:auto!important;max-height:none!important;
  background:none!important;border-radius:14px!important;box-shadow:none!important;transition:none!important}
:is(#app,#studio,.ld-host) .ld-frame > .insp [data-sx-id="instrumentBar"]{height:100%!important;background:#121214!important;border:1px solid transparent!important;border-radius:14px!important;
  box-shadow:0 12px 32px rgba(0,0,0,.45)!important;overflow:hidden}
/* the Foundation panel: Studio's Floating dock, beside the palette */
:is(#app,#studio,.ld-host) .ld-frame > .ld-fd{left:70px!important;top:8px!important;bottom:8px!important;border:1px solid rgba(255,255,255,.08)!important;border-radius:12px!important;overflow:hidden!important;box-shadow:0 12px 32px rgba(0,0,0,.45)!important}
/* no agent app: Studio has none */
:is(#app,#studio,.ld-host) .ld-frame > .ld-agent{display:none!important}
/* the page: a board on the canvas */
:is(#app,#studio,.ld-host) .ld-frame .scene .sec{border-radius:0!important;box-shadow:none!important;background:#0e0e10!important;color:#ededef!important;min-height:0!important}
:is(#app,#studio,.ld-host) .ld-frame .scene .sec.is-light{background:#fafafa!important;color:#18181b!important}
:is(#app,#studio,.ld-host) .ld-frame .scene .sec.is-light .sec__h,:is(#app,#studio,.ld-host) .ld-frame .scene .sec.is-light .pcard__row{color:#18181b!important}
:is(#app,#studio,.ld-host) .ld-frame .scene .sec.is-light .sec__eb,:is(#app,#studio,.ld-host) .ld-frame .scene .sec.is-light .sec__f{color:#52525b!important}
:is(#app,#studio,.ld-host) .ld-frame .scene .sec.is-light .pcard{background:#fff!important;box-shadow:inset 0 0 0 1px rgba(0,0,0,.07)!important}
:is(#app,#studio,.ld-host) .ld-frame .scene .sec.is-light .pcard__btn{background:#18181b!important;color:#fafafa!important}
:is(#app,#studio,.ld-host) .ld-frame .scene .sec.is-light .pcard__meta,:is(#app,#studio,.ld-host) .ld-frame .scene .sec.is-light .pcard__stars{color:#52525b!important}
:is(#app,#studio,.ld-host) .ld-frame .scene .sec.is-light .pcard__tag{background:rgba(0,0,0,.06)!important;color:#3f3f46!important}
:is(#app,#studio,.ld-host) .ld-frame .scene .sec.is-light .sec__f span{box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)!important;color:#3f3f46!important}
/* the page's title row (index.html .boardlabel at 53% zoom or more) */
.ld-frame > .ld-bl{position:absolute;z-index:3;display:flex;align-items:baseline;gap:8px;transform:translateY(-100%);padding-bottom:6px;font:600 12px/1.3 var(--ib-font,"Source Sans 3",system-ui,sans-serif);
  color:#75757a;white-space:nowrap;pointer-events:none}
.ld-frame > .ld-bl .bl-name{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.ld-frame > .ld-bl .bl-dim{margin-left:auto;font-weight:500;color:#47474b;font-variant-numeric:tabular-nums}
.ld-frame > .ld-bl .bl-live{margin-left:2px;padding:2px 7px;border-radius:6px;background:rgba(255,255,255,.045);color:#a6a7a7;font-size:11px;font-weight:600}
.ld-frame.is-browser > .ld-bl{display:none}
/* the view bar (index.html #viewBar): under the canvas, its top corners rounded */
.ld-frame > .ld-vb{position:absolute;z-index:4;bottom:12px;transform:translateX(-50%);display:flex;gap:10px;align-items:center;   /* Floating: its pills on their own, 12px up (index.html .view-bar) */
  background:none;font:500 12px/12px var(--ib-font,"Source Sans 3",system-ui,sans-serif);color:#75757a;pointer-events:none}
.ld-frame > .ld-vb .vb-set{display:flex;gap:4px;padding:0 4px}
.ld-frame > .ld-vb .vb-g{position:relative;display:flex;padding:2px;border-radius:8px;background:rgba(255,255,255,.05)}
.ld-frame > .ld-vb .vb-thumb{position:absolute;left:2px;top:2px;width:54px;height:26px;border-radius:6px;background:rgba(255,255,255,.13)}
.ld-frame > .ld-vb button{position:relative;height:26px;padding:0 9px;border:0;border-radius:6px;background:none;color:#75757a;font:inherit}
.ld-frame > .ld-vb button[aria-pressed="true"]{color:#f7f8f8}
.ld-frame.is-browser > .ld-vb{display:none}
/* the selection (index.html .ov.sel and its parts) */
:is(#app,#studio,.ld-host) .ld-frame .scene .sel{border:1px solid #716cff!important;border-radius:5px!important;box-shadow:0 0 0 1px rgba(113,108,255,.15),0 0 18px rgba(113,108,255,.08)!important;background:none!important}
:is(#app,#studio,.ld-host) .ld-frame .scene .sel::before,:is(#app,#studio,.ld-host) .ld-frame .scene .sel::after{display:none!important}
:is(#app,#studio,.ld-host) .ld-frame .scene .sel__tag{display:block!important;left:-1px!important;top:auto!important;bottom:calc(100% + 5px)!important;background:#716cff!important;color:#fff!important;
  font:700 9px/1.2 var(--ib-font,"Source Sans 3",system-ui,sans-serif)!important;letter-spacing:.06em;padding:3px 6px!important;border-radius:4px!important;box-shadow:none!important;transform:none!important}
:is(#app,#studio,.ld-host) .ld-frame .scene .sel__fit{display:block!important;left:50%!important;top:calc(100% + 7px)!important;bottom:auto!important;transform:translateX(-50%)!important;background:#716cff!important;color:#fff!important;
  font:400 10.5px/16px var(--ib-font,"Source Sans 3",system-ui,sans-serif)!important;padding:0 5px!important;border-radius:3px!important;box-shadow:none!important}
:is(#app,#studio,.ld-host) .ld-frame .scene .sel__grip{display:none!important}
:is(#app,#studio,.ld-host) .ld-frame .scene .sel i[data-h]{display:block!important;position:absolute;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;background:#fff;border:1.5px solid #716cff;border-radius:1px;box-sizing:border-box}
.ld-frame .scene .sel i[data-h="nw"]{left:0;top:0} .ld-frame .scene .sel i[data-h="n"]{left:50%;top:0} .ld-frame .scene .sel i[data-h="ne"]{left:100%;top:0}
.ld-frame .scene .sel i[data-h="e"]{left:100%;top:50%} .ld-frame .scene .sel i[data-h="se"]{left:100%;top:100%} .ld-frame .scene .sel i[data-h="s"]{left:50%;top:100%}
.ld-frame .scene .sel i[data-h="sw"]{left:0;top:100%} .ld-frame .scene .sel i[data-h="w"]{left:0;top:50%}
/* the context menu's accordions (index.html .menu .menu-sec, .menu-acc, .menu-sub) */
.ld-frame .sx-menu .menu .menu-sec{border-top:1px solid var(--menu-line);margin-top:4px;padding-top:4px}
.ld-frame .sx-menu .menu .menu-sec + .menu-sec{margin-top:0}
.ld-frame .sx-menu .menu .menu-acc .menu-chev{font-size:14px;transition:transform .12s}
.ld-frame .sx-menu .menu .menu-acc[aria-expanded="true"] .menu-chev{transform:rotate(90deg)}
.ld-frame .sx-menu .menu .menu-sub button{padding-left:20px}
.ld-frame .sx-menu .menu .menu-sub[hidden]{display:none}
.ld-frame .sx-menu .menu button.is-hl{background:var(--menu-hover);color:var(--menu-hover-ink)}
/* Studio's cursor: a filled dot in its cursor colour, a press ring, a dark name tag (lib/agent-cursor.js) */
:is(#app,#studio,.ld-host) .ld-frame .ghost svg{display:none!important}
:is(#app,#studio,.ld-host) .ld-frame .ghost::before{content:"";position:absolute;left:-5px;top:-5px;width:10px;height:10px;border-radius:50%;background:#716cff;box-shadow:0 0 0 1px rgba(0,0,0,.25),0 1px 6px rgba(0,0,0,.25)}
:is(#app,#studio,.ld-host) .ld-frame .ghost .ghost__who{left:10px!important;top:8px!important;padding:2px 7px!important;border-radius:9px!important;background:rgba(15,16,17,.86)!important;color:#f7f8f8!important;
  font:500 11px/16px var(--ib-font,"Source Sans 3",system-ui,sans-serif)!important;box-shadow:0 0 0 1px rgba(255,255,255,.08)!important}
:is(#app,#studio,.ld-host) .ld-frame .ghost__sh{display:none!important}
:is(#app,#studio,.ld-host) .ld-frame .scene .sel.is-page .sel__tag{display:none!important}
:is(#app,#studio,.ld-host) .ld-frame .scene .sec.is-light .sec__f span{background:rgba(0,0,0,.04)!important}
/* the menu wears Studio's own menu values (studio-chrome.css .sx-menu, as captured; the combined look had darkened them) */
:is(#app,#studio,.ld-host) .ld-frame > .ctx .menu{background:#16181B!important;border:1px solid #2A2E33!important;border-radius:7px!important;box-shadow:0 18px 44px rgba(0,0,0,.55)!important}

/* THE HUB'S CARDS (Josh, 2026-10-27: "mirror the chrome from studio's hub more closely... uses the beautiful gradient flow lines on important
   calls to actions and cards"): a card under the pointer gets the Hub's own ring, the iris turning around its edge (enter.html
   .home-areas .action.ring), its grey line stepping aside. Drawn inside the card, so a joined row's clip never cuts it; reduced motion keeps it still. */
.eo-plan{position:relative}   /* the ring only on the plan cards, the pages' ways in; content cards have no hover (Josh, 2026-10-27: "these dont need hovers", "no hovers on these please") */
.eo-plan::before{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;padding:1.5px;pointer-events:none;opacity:0;
  background:conic-gradient(from var(--sheen),var(--eden-iris-cyan,#9ee7ff),var(--eden-iris-lavender,#c9b7ff),var(--eden-iris-pink,#f6c7e7),var(--eden-iris-butter,#fff4c2),var(--eden-iris-cyan,#9ee7ff));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;transition:opacity .22s}
.eo-plan:hover::before,.eo-plan:focus-within::before{opacity:1;animation:eo-flow 3.4s linear infinite}
@property --sheen{syntax:"<angle>";initial-value:0deg;inherits:false}
@keyframes eo-flow{to{--sheen:360deg}}
@media (prefers-reduced-motion:reduce){.eo-plan::before{animation:none!important}}
.eo-mark-i{display:inline-block}

/* NOTHING WAITS FOR THE POINTER TO BE READ (Josh, 2026-10-27: "i dont want sections that you have to hover over to see them at full
   brightness"): the reach (items quiet until the pointer comes near) is off, and every tab rests at full ink; the one playing keeps its line */
.eo-reach [data-r]{opacity:1!important}
.ltab-h,.htab-h,.look-combined .ltab-h,.look-combined .htab-h{color:var(--eden-ink)!important}
.ltab-b,.htab-b,.look-combined .ltab-b,.look-combined .htab-b{color:var(--eden-ink-2)!important}
.ltab:not(.is-on) .ltab__steps,.ltab:not(.is-on) .ltab__now{opacity:1}
.eo-cmx-i.is-on .eo-cmx-h{color:var(--eden-ink)}

/* WHAT'S INSIDE (concept_site.py SEC['inside'], site-inside.js, 2026-10-27): the behaviour's look. A row's answer shows while it's open
   (closed rows draw nothing, in the file and on Studio's canvas alike); the open tab wears the spectral edge; a stage's moving piece is drawn
   on the stage's own dotted ground, no card around it; the studios fade between looks */
.eo-in-stage{background:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1.3px) 0 0/16px 16px}
.eo-in-stage .vg{background:transparent;box-shadow:none;border-radius:0}
.eo-in-stage .vg::after{background:var(--eden-black,#19191c)}
.eo-in-stage .vg-canvas,.eo-in-stage .vg-canvas--dots,.eo-in-stage .vg-boards{background:transparent}
.eo-in-d::details-content{align-self:stretch}
details[open] > .eo-in-a{display:flex}
.eo-in-q::-webkit-details-marker{display:none}
.eo-in-q::after{content:"";position:absolute;right:4px;top:50%;width:9px;height:9px;margin-top:-7px;border:solid var(--eden-ink-2);border-width:0 1.5px 1.5px 0;transform:rotate(45deg);transition:transform .25s,margin-top .25s}
details[open] > .eo-in-q::after{transform:rotate(225deg);margin-top:-2px}
.eo-in-q:focus-visible,.eo-in-tab:focus-visible{outline:2px solid #c9b7ff;outline-offset:4px;border-radius:var(--eden-r-6)}
.eo-in-tab{transition:border-color .2s}
.eo-in-tab[aria-selected="true"]{border-color:transparent;background:linear-gradient(var(--eden-black),var(--eden-black)) padding-box,linear-gradient(115deg,#f7f8f8,#9ee7ff,#c9b7ff,#f6c7e7,#fff4c2) border-box}
.cs-stu-fill{transition:opacity .3s ease} .cs-stu-fill > *{width:100%;height:100%}
[data-cs-studios].is-switch .cs-stu-fill{opacity:0}
@media (prefers-reduced-motion:reduce){.cs-stu-fill,.eo-in-q::after{transition:none}}

/* THE HEADER AND THE DRAWER (2026-10-27): the menu is an icon (concept-open-hero.js draws it; Eden's library has no icon-only button), and the
   light-mode switch is a quiet row in the drawer */
.eo-burger{display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:var(--eden-r-pill);background:none;color:var(--eden-ink);cursor:pointer}
.eo-burger:hover{background:rgba(255,255,255,.06)} .eo-burger:focus-visible{outline:2px solid #c9b7ff;outline-offset:2px}
.eo-burger svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
html[data-scheme="light"] .eo-burger:hover{background:rgba(0,0,0,.05)}
.eo-menu-mode{align-self:stretch;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-top:1px solid var(--eden-line);color:var(--eden-ink-2);font-family:var(--eden-text-ui-family);font-size:var(--eden-text-ui-size);cursor:pointer}
.eo-menu-mode .eo-x-mode{position:static}

/* FLAT (Josh, 2026-10-27: "loose the drop shadows of the studio ui... id prefer everything be very flat looking"): every piece of Studio
   the site draws (the palette's cards, the rail, the Foundation panel, the token list, the right-click menu, the floating pieces of the
   feature sections) loses its drop shadow and keeps one hairline edge, so it still reads as a card on the page. Last in the file, so it
   wins over the Floating look's --breath and the captured chrome's own shadows. Cursors and the spectral glows are not shadows and stay */
.ld-frame :is(.rail-corner,.rail-stack,[data-sx-id="instrumentBar"],[data-sx-id="tools"],.token-popover,.menu,.fp.ui),
:is(#app,#studio,.ld-host) .ld-frame > :is(.ld-fd,.ld-agent),
main [data-sx-id="menu"], .vg-menu, .vg-drawer, .sr-st, .sr-card,
:is(.hbtn,.hpop,.himg,.hmesh,.hc,.ha,.hblk,.fn){box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)!important}
:is(#app,#studio,.ld-host) .ld-frame .scene .sel{box-shadow:none!important}
.hsl__k{box-shadow:none!important}
.vg-menu,.vg-drawer{box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)!important}   /* the light menus keep a dark hairline */

/* THE BROWSER IS A WINDOW (Josh, 2026-10-27: "maybe a thin line around this so it looks more like an enclosed browser pane"): in act 03
   the browser's bar and the page under it share one hairline outline, rounded at the window's four corners */
:is(#app,#studio,.ld-host) .ld-frame .scene.is-browser .ld-bbar{box-shadow:inset 1px 0 0 rgba(255,255,255,.14),inset -1px 0 0 rgba(255,255,255,.14),inset 0 1px 0 rgba(255,255,255,.14),inset 0 -1px 0 rgba(255,255,255,.05)!important}
:is(#app,#studio,.ld-host) .ld-frame .scene.is-browser .sec{border-radius:0 0 12px 12px!important;box-shadow:inset 1px 0 0 rgba(255,255,255,.14),inset -1px 0 0 rgba(255,255,255,.14),inset 0 -1px 0 rgba(255,255,255,.14)!important}

/* HOVER GROWS THE PICTURE, NOT THE CARD (Josh, 2026-10-27: "on hover have the image grow (inside) its container frame - not the image
   dimension growing... the fill should grow"): in the set's cards the card holds still and keeps its size; the picture's frame clips a copy of
   its own fill, which grows inside it */
.eo-frame .scene .pcard.is-hover{transform:none!important;box-shadow:none!important}
.eo-frame .scene .pcard.is-hover .pcard__img{transform:none!important}
.eo-frame .scene .pcard__img{position:relative;overflow:hidden}
.eo-frame .scene .pcard__img::before{content:"";position:absolute;inset:0;background:inherit;border-radius:0;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.eo-frame .scene .pcard.is-hover .pcard__img::before{transform:scale(1.08)}
/* FLAT, AT THE ROOT (2026-10-27, Josh again: "no dropshadows on the ui (tool palette!)"): the captured chrome draws its cards' shadows from
   --shadow-rail; on the site it is nothing, everywhere the chrome is drawn */
:is(.sx-tools,.sx-rail,.sx-dock,.sx-fdock,.sx-fly,.sx-gv,.sx-pop,.sx-menu){--shadow-rail:transparent!important;--ib-card-shadow:none!important}
.sx-tools .tools > :is(.rail-corner,[data-sx-id="railStack"],[data-sx-id="railFoot"]),.sx-rail [data-sx-id="instrumentBar"],.sx-fly .rail-fly{box-shadow:none!important}
:is(#app,#studio,.ld-host) .ld-frame.ld-frame.ld-frame :is([data-sx-id="barTool"],[data-sx-id="railStack"],.rail-corner,.rail-stack,[data-sx-id="instrumentBar"],.context-wrap,.token-popover,.menu){box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)!important}   /* as heavy as the Floating look's own rules, so flat wins on every frame */
.fg b,html[data-scheme="light"] .fg b{box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)!important}   /* flat (2026-10-27) */
html[data-scheme="light"] .fg b{box-shadow:inset 0 0 0 1px rgba(24,24,27,.1)!important}

/* THE GOVERNED STAGE'S PALETTE (2026-10-27, Josh: "not sure whats going on here"): site-govern.js copies the live set's palette into its
   own frame (.gv-frame), where the palette's rules above never reached, so its icons drew at their full size with their labels. The same
   rules, for that frame */
.gv-frame > .ld-tools.ld-pal{position:absolute!important;left:8px!important;top:8px!important;bottom:auto!important;width:54px!important;height:auto!important;opacity:1;
  background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding:0!important;transition:none!important;z-index:4}
.gv-frame > .ld-pal [data-sx-id="tools"]{position:static!important;width:54px!important;height:auto!important;display:flex!important;flex-direction:column!important;
  align-items:stretch!important;gap:8px!important;padding:0!important;background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;transform:none!important}
.gv-frame > .ld-pal :is([data-sx-id="barTool"],[data-sx-id="railStack"]){position:static!important;margin:0!important;width:54px!important;
  background:#121214!important;border:1px solid transparent!important;border-radius:14px!important;box-shadow:0 12px 32px rgba(0,0,0,.45)!important;box-sizing:border-box}
.gv-frame > .ld-pal [data-sx-id="barTool"]{height:54px!important;display:grid!important;place-items:center!important;padding:0!important;color:#F7F8F8}
.gv-frame > .ld-pal [data-sx-id="barTool"] svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.gv-frame > .ld-pal [data-sx-id="railStack"]{display:flex!important;flex-direction:column!important;align-items:center!important;padding:8px 0!important;inset:auto!important;height:auto!important}
.gv-frame > .ld-pal .rail-zone{position:relative!important;display:flex!important;flex-direction:column!important;align-items:center!important;gap:2px!important;padding:0!important;margin:0!important;border:0!important;background:none!important}
.gv-frame > .ld-pal .rail-zone + .rail-zone{margin-top:8px!important;padding-top:8px!important;border:0!important}
.gv-frame > .ld-pal .rail-zone + .rail-zone::before{content:""!important;display:block!important;position:absolute!important;top:0;left:50%;width:20px;margin-left:-10px;border-top:1px solid rgba(255,255,255,.08)}
.gv-frame > .ld-pal .tool{position:relative!important;width:62px!important;height:36px!important;min-height:0!important;padding:0!important;margin:0!important;display:grid!important;place-items:center!important;
  border:0!important;border-radius:10px!important;background:none!important;color:#75757a!important;box-shadow:none!important}
.gv-frame > .ld-pal .tool > .tool-label{display:none!important}
.gv-frame > .ld-pal .tool svg.ri{width:20px!important;height:20px!important;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;display:block;border-radius:2px;background:none;box-shadow:none}
.gv-frame > .ld-pal .tool.on:not(.vs-opt){color:#F7F8F8!important}
.gv-frame > .ld-pal .tool.on:not(.vs-opt) svg.ri{background:rgba(255,255,255,.10);box-shadow:0 0 0 8px rgba(255,255,255,.10)}
.gv-frame > .ld-pal .tool::after{display:none}

/* ── STUDIO AS IT REALLY WORKS (Josh, 2026-10-27: "the cards are most likely components and require editing in master... the control menu
   you show in the demo is also way too large and needs to be truthful. the right rail dropdown for radius tokens isnt correct. and we should
   try to keep the right rail to the same height as the other ui in this screen... no dropshadows on the ui (tool palette!)"). The live set
   (site-live-set.js, .lx) as the running Studio draws it, measured from it the same day: the palette as Studio's strip, the rail for what
   is selected, the copy's right-click menu at 200px with 28px rows, the master's grey canvas, the selection, the adaptive handle and its tag,
   and on the teams page the agent's chat beside Studio. Every piece runs the frame's full height and is flat: one 1px hairline, no shadow.
   Each rule leads with .ld-frame.lx.lx.lx.lx:is(#live-frame,.lx), heavier than every earlier rule on the set, so nothing above outranks it ── */
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx){--lx-cr:4px;--lx-cp:12px;--lx-sp:28px;--lx-hair:rgba(255,255,255,.08);--lx-font:var(--ib-font,"Source Sans 3",system-ui,sans-serif)}
/* what the acts no longer show: kept in the frame (the Studio, capture and governance demos copy them), never drawn here */
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) > :is(.insp,.ctx,.ddl,.ld-bl,.ld-vb,.talk,.ld-agent){display:none!important}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) .scene :is(.sel,.hotp,.mode2,.lcode,.hlth,.tip){display:none!important}
/* the palette: Studio's strip (Flat chrome), one card the frame's height, its menu at the top under a hairline and its tools centred */
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) > .ld-tools.ld-pal{top:0!important;bottom:0!important;width:70px!important;height:auto!important}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) > .ld-pal [data-sx-id="tools"]{position:absolute!important;inset:0!important;width:70px!important;height:100%!important;display:flex!important;flex-direction:column!important;
  align-items:center!important;gap:0!important;background:#121214!important;border-radius:12px!important;box-shadow:inset 0 0 0 1px var(--lx-hair)!important;overflow:hidden}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) > .ld-pal [data-sx-id="barTool"]{flex:0 0 54px!important;width:100%!important;height:54px!important;background:none!important;border:0!important;border-radius:0!important;
  box-shadow:inset 0 -1px 0 var(--lx-hair)!important}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) > .ld-pal [data-sx-id="railStack"]{flex:1 1 auto!important;width:100%!important;justify-content:center!important;background:none!important;border:0!important;border-radius:0!important;
  box-shadow:none!important;padding:8px 0!important}
/* the page: a board, the frame's height, its content centred in it (Josh, 2026-10-28: "it bothers me that there is so much space under the
   cards... either center the content in the container or hug the container to the content"; centred, since every piece keeps the frame's height) */
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) .scene .sec{height:var(--sec-h)!important;min-height:0!important;box-sizing:border-box;overflow:hidden;padding-left:var(--lx-sp)!important;padding-right:var(--lx-sp)!important;
  display:flex!important;flex-direction:column;justify-content:center;transition:background .5s,color .5s!important}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx).is-master .scene .sec{visibility:hidden}
/* the product card, a copy of Card / Product: its radius and padding are the master's (--lx-cr, --lx-cp), drawn at their token's size */
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) :is(.scene .pcards .pcard,.lx-mcard){border-radius:var(--lx-cr)!important;padding:var(--lx-cp)!important;transition:none!important;background:#16161a;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)!important}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) :is(.scene .pcards .pcard,.lx-mcard) .pcard__img{margin:0 0 10px!important;border-radius:2px!important;transition:none!important}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) :is(.scene .pcards .pcard,.lx-mcard) .pcard__btn{border-radius:6px!important;transition:none!important}
/* the master's card, drawn as the page draws its copies */
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) .lx-mcard{position:relative;display:block;box-sizing:border-box;color:#ededef;font-family:var(--lx-font)}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) .lx-mcard .pcard__img{display:block;aspect-ratio:4/4.4;background:#ececef url(media/moonboots/product-black.jpg) center / cover no-repeat}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) .lx-mcard .pcard__tag{display:inline-block;font-size:8px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;background:rgba(255,255,255,.08);color:#d4d4d8;border-radius:4px;padding:3px 6px;margin-bottom:7px}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) .lx-mcard .pcard__row{display:flex;justify-content:space-between;font-size:12px;margin-bottom:2px;color:#ededef}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) .lx-mcard .pcard__row span{font-weight:500} .ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) .lx-mcard .pcard__row b{font-weight:600}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) .lx-mcard .pcard__meta{margin:0 0 4px;font-size:10px;color:#8b8b92}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) .lx-mcard .pcard__stars{margin:0 0 9px;font-size:9px;letter-spacing:.06em;color:#e4e4e7}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) .lx-mcard .pcard__stars span{letter-spacing:0;color:#8b8b92;margin-left:3px}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) .lx-mcard .pcard__btn{display:flex;justify-content:center;align-items:center;height:26px;background:#f4f4f5;color:#111113;font-size:10px;font-weight:600}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) .lx-mcard .pcard__btn::after{content:none}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) > .lx-menu kbd:only-child,.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) > .lx-menu kbd.is-chev{font-size:14px}
/* the master, opened (index.html openEditor): Studio's grey canvas in the page's place, the master's Desktop and Mobile boards on it, each
   named above it (the selected one's name on Studio's violet), and View | Edit at its foot */
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) > .lx-mc{position:absolute;top:0;bottom:0;z-index:2;display:none;background:#cacaca;border-radius:12px;overflow:hidden}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx).is-master > .lx-mc{display:block}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) .lx-boards{position:absolute;inset:0 0 40px;display:grid;grid-auto-flow:column;place-content:center;align-items:start;gap:56px}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) .lx-board{position:relative}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) .lx-board[data-b="d"] .lx-mcard{width:280px} .ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) .lx-board[data-b="m"] .lx-mcard{width:236px}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) .lx-mc.is-narrow .lx-board[data-b="m"]{display:none}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) .lx-bl{position:absolute;left:0;bottom:100%;margin:0 0 7px;padding:2px 0;font:600 12px/1.3 var(--lx-font);color:#5c5c60;white-space:nowrap}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) .lx-board.is-sel .lx-bl{margin-left:-8px;padding:2px 9px;border-radius:7px;background:#716cff;color:#fff}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) .lx-ve{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);display:flex;gap:2px;padding:4px;border-radius:9px;background:#1d1d1f;font:500 12px/1 var(--lx-font)}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) .lx-ve > *{padding:6px 10px;border-radius:6px} .ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) .lx-ve span{color:#75757a}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) .lx-ve b{font-weight:600;color:#f7f8f8}
/* the rail: Studio's rail at its own width, the frame's height, for what is selected (site-live-set.js railHTML) */
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) > .lx-rail{position:absolute;top:0;bottom:0;right:0;width:288px;z-index:4;display:none;background:#121214;border-radius:12px;box-shadow:inset 0 0 0 1px var(--lx-hair);overflow:hidden;
  font-family:var(--lx-font);color:#e6e6e8;text-align:left}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx).rail-shown > .lx-rail{display:block}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) .lx-rb{transition:transform .35s cubic-bezier(.3,.7,.2,1)}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) .lx-rail p{margin:0}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) .lr-head{position:relative;padding:12px 14px 14px}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) .lr-chip{display:inline-block;padding:5px 7px;border-radius:6px;background:#1c1c1f;color:#7c7d84;font:620 8.5px/1 var(--lx-font);letter-spacing:.09em;text-transform:uppercase}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) .lr-name{margin-top:10px!important;font:600 13px/1.3 var(--lx-font);color:#e6e6e8}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) .lr-note{margin-top:9px!important;font:400 10.5px/1.4 var(--lx-font);color:#d4d4d8}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) .lr-acts{display:flex;gap:6px;margin-top:10px}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) .lr-acts button{height:30px;padding:0 10px;border:0;border-radius:7px;font:600 11px/1 var(--lx-font);cursor:default}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) .lr-edit{flex:1 1 auto;background:#f4f4f5;color:#111113}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) .lr-det{background:#1c1c1f;color:#e6e6e8}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) .lr-acts--m button{height:28px;border-radius:6px;font:500 10px/1 var(--lx-font)}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) .lr-save{flex:1 1 auto;background:#d6d7d7!important;color:#4a4a4e!important}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) .lr-save.is-dirty{background:#f4f4f5!important;color:#111113!important}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) .lr-done{background:#0f1011!important;color:#f4f4f5!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) .lr-acts button.is-press{filter:brightness(.86)}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) .lr-lock{position:absolute;right:10px;top:8px;width:12px;height:12px;fill:none;stroke:#6b6c72;stroke-width:1.1}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) .lr-band{padding:18px 14px 6px;border-top:1px solid #272729;font:600 9px/1 var(--lx-font);letter-spacing:.72px;text-transform:uppercase;color:#696a71}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) .lr-seg{padding:8px 14px 8px}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) .lr-band + .lr-seg{padding-top:10px}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) .lr-sk{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px!important;font:600 11px/1.2 var(--lx-font);color:#e6e6e8}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) .lr-sk em{font:400 9.5px/1 var(--lx-font);font-style:normal;color:#6b6c72}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) .lr-sg{display:flex;height:28px;padding:2px;box-sizing:border-box;border-radius:8px;background:#242427}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) .lr-sg b{flex:1 1 0;display:grid;place-items:center;border-radius:6px;font:500 10px/1 var(--lx-font);color:#9a9ba1}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) .lr-sg b.on{background:#18181b;color:#f4f4f5;box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) .lr-row{display:flex;align-items:center;gap:8px;height:44px;padding:0 14px;box-sizing:border-box;border-top:1px solid #272729;font:600 11px/1 var(--lx-font);color:#e6e6e8}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) .lr-band + .lr-row{border-top:0}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) .lr-v{margin-left:auto;max-width:176px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:450 10.5px/1 var(--lx-font);color:#a6a7ac}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) .lr-chev{flex:0 0 auto;width:10px;height:10px;fill:none;stroke:#6b6c72;stroke-width:1.2;transition:transform .15s}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) .lr-row.is-open .lr-chev{transform:rotate(180deg)}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) .lr-row.is-hl{background:rgba(255,255,255,.035)}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) .lr-sw{flex:0 0 auto;width:14px;height:14px;border-radius:50%;background:#16161a;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) .lr-plus{height:44px;display:grid;place-items:center;border-top:1px solid #272729;font:400 16px/1 var(--lx-font);color:#8b8b92}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) .lr-lay{padding:4px 14px 14px}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) .lr-lay-top{display:grid;grid-template-columns:125px 1fr;gap:8px;margin-bottom:6px}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) .lr-lk{margin:6px 0 7px!important;font:400 10.5px/1 var(--lx-font);color:#7c7d84}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) .lr-al{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);place-items:center;height:79px;padding:6px;box-sizing:border-box;border-radius:8px;background:#1c1c1f}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) .lr-al i{width:2px;height:2px;border-radius:50%;background:#55565c}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) .lr-al[data-a="tl"] i:first-child{width:14px;height:1.5px;border-radius:1px;background:#e6e6e8;box-shadow:0 -4px 0 #e6e6e8,-3px 4px 0 -0px #e6e6e8;clip-path:inset(-5px 0 -5px 0)}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) .lr-f{display:flex;align-items:center;gap:7px;height:28px;padding:0 8px;box-sizing:border-box;border-radius:7px;background:#1c1c1f;font:500 10.5px/1 var(--lx-font);color:#e6e6e8}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) .lr-f i{font-style:normal;font-size:11px;color:#7c7d84} .ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) .lr-f b{flex:1 1 auto;font-weight:500}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) .lr-pads{display:grid;grid-template-columns:1fr 1fr 16px;gap:8px;align-items:center}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) .lr-ind{width:12px;height:12px;fill:none;stroke:#8b8b92;stroke-width:1.2}
/* Radius's token list, inline under its row (studio-truth 03d): Independent corners, then the tokens by group, name left and size right,
   the current one lit with a tick */
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) .lr-list{display:flex;flex-direction:column;gap:3px;padding:2px 7px 8px}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) .lr-opt{display:flex;align-items:center;height:34px;padding:7px 9px;box-sizing:border-box;border:0;border-radius:6px;background:none;text-align:left;font:400 11px/1 var(--lx-font);color:#a6a7ac}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) .lr-opt em{margin-left:auto;font:400 9px/1 var(--lx-font);font-style:normal;font-variant-numeric:tabular-nums;color:#6f7077}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) .lr-opt i{margin-left:9px;font-style:normal;font-size:11px;color:#8fd6a0}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) .lr-opt.on{background:rgba(255,255,255,.075);color:#f4f4f5}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) .lr-lg{margin:8px 9px 3px!important;font:600 9px/1 var(--lx-font);letter-spacing:.72px;text-transform:uppercase;color:#696a71}
/* the right-click menu on a copy (studio-truth 04b): 200 wide, 28px rows, 13px words, no shadow */
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) > .lx-menu{position:absolute;z-index:8;display:none;width:200px;padding:4px;box-sizing:border-box;border:1px solid #2a2e33;border-radius:7px;background:#16181b;box-shadow:none}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) > .lx-menu.is-open{display:block}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) > .lx-menu button{display:flex;align-items:center;width:100%;height:28px;padding:0 10px;box-sizing:border-box;border:0;border-radius:5px;background:none;text-align:left;
  font:400 13px/18.2px var(--lx-font);color:#f7f8f8;cursor:default}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) > .lx-menu button.is-hl{background:rgba(255,255,255,.08)}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) > .lx-menu kbd{margin-left:auto;font:400 11px/1 var(--lx-font);color:#75757a}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) > .lx-menu hr{height:0;margin:4px 6px;border:0;border-top:1px solid #2a2e33}
/* the selection (index.html .ov.sel): 1px violet, its eight handles, its name above and its size below */
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) > .lx-sel{position:absolute;z-index:6;display:none;box-sizing:border-box;border:1px solid #716cff;pointer-events:none;transition:opacity .12s}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) > .lx-sel.is-on{display:block} .ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) > .lx-sel.is-hot{opacity:0}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) .lx-sel-tag{position:absolute;left:-1px;bottom:calc(100% + 5px);padding:3px 6px;border-radius:4px;background:#716cff;color:#fff;font:700 9px/1.2 var(--lx-font);letter-spacing:.06em;white-space:nowrap}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) .lx-sel-tag:empty{display:none}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) .lx-sel-fit{position:absolute;left:50%;top:calc(100% + 7px);transform:translateX(-50%);padding:0 5px;border-radius:3px;background:#716cff;color:#fff;font:400 10.5px/16px var(--lx-font);white-space:nowrap}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) .lx-sel i{position:absolute;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;box-sizing:border-box;border:1.5px solid #716cff;border-radius:1px;background:#fff}
.ld-frame.lx .lx-sel i[data-h="nw"]{left:0;top:0} .ld-frame.lx .lx-sel i[data-h="n"]{left:50%;top:0} .ld-frame.lx .lx-sel i[data-h="ne"]{left:100%;top:0} .ld-frame.lx .lx-sel i[data-h="e"]{left:100%;top:50%}
.ld-frame.lx .lx-sel i[data-h="se"]{left:100%;top:100%} .ld-frame.lx .lx-sel i[data-h="s"]{left:50%;top:100%} .ld-frame.lx .lx-sel i[data-h="sw"]{left:0;top:100%} .ld-frame.lx .lx-sel i[data-h="w"]{left:0;top:50%}
/* the adaptive handle (index.html paintHot, #eden-hot): an arc on the corner it rounds, a 48px bar on the edge it pads, both 3px violet,
   a little heavier while pressed; its tag 16px right of and 18px under the pointer (#eden-hot-tag) */
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) > .lx-hot{position:absolute;z-index:7;display:none;pointer-events:none}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) > .lx-hot.is-on{display:block}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) .lx-hot svg{position:absolute;left:0;top:0;display:none;overflow:visible}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) .lx-hot path{fill:none;stroke:#716cff;stroke-width:3;stroke-linecap:round}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) .lx-hot.is-down path{stroke-width:3.4}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) .lx-hot.mode-corner svg{display:block}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) .lx-hot i{position:absolute;left:0;top:0;display:none;background:#716cff}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) .lx-hot.mode-line i{display:block}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) > .lx-tag{position:absolute;z-index:9;display:none;padding:3px 7px;border:1px solid rgba(255,255,255,.08);border-radius:6px;background:rgba(17,17,19,.92);color:#f2f2f4;
  font:600 10px/1.2 var(--lx-font);letter-spacing:.02em;white-space:nowrap;box-shadow:none;pointer-events:none}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) > .lx-tag.is-on{display:block}
/* the cursors: Studio's own, an 8px dot in the cursor colour that steps aside while a handle is held (only the handle and its tag show);
   the agent's a 10px dot with a press ring and its name (lib/agent-cursor.js) */
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) .ghost::before{left:-4px;top:-4px;width:8px;height:8px;box-shadow:0 0 0 1px rgba(0,0,0,.25)}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) .ghost.is-agent::before{left:-5px;top:-5px;width:10px;height:10px}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) .ghost.is-hid{opacity:0!important}
/* the agent's chat, beside Studio on the teams page: an agent app's own column, plain (the designer's words in a bubble, the agent's as text) */
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) > .lx-chat{position:absolute;left:0;top:0;bottom:0;z-index:4;display:none;flex-direction:column;box-sizing:border-box;background:#121214;border-radius:12px;
  box-shadow:inset 0 0 0 1px var(--lx-hair);overflow:hidden;font:400 12.5px/1.5 var(--lx-font);color:#d4d4d8;text-align:left}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx).chat-on > .lx-chat{display:flex}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) .lc-log{flex:1 1 auto;display:flex;flex-direction:column;justify-content:flex-end;gap:12px;padding:16px 14px;overflow:hidden}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) .lc-log p{margin:0}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) .lc-u{align-self:flex-end;max-width:88%;padding:8px 11px;border-radius:12px;background:#232326;color:#f4f4f5}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) .lc-tool{display:flex;align-items:center;gap:7px;font-size:11.5px;color:#8b8b92}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) .lc-tool::before{content:"";width:6px;height:6px;border-radius:50%;background:#8fd6a0;flex:0 0 auto}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) .lc-tool.is-run::before{background:#8b8b92}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) .lc-in{display:flex;align-items:center;gap:1px;min-height:40px;margin:0 10px 10px;padding:0 6px 0 12px;box-sizing:border-box;border-radius:10px;background:#1a1a1d;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) .lc-in.is-on{box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) .lc-t{white-space:nowrap;overflow:hidden;color:#f4f4f5}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) .lc-caret{width:1px;height:14px;background:#e4e4e7;opacity:0}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) .lc-in.is-on .lc-caret{opacity:1}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) .lc-send{margin-left:auto;flex:0 0 auto;width:26px;height:26px;padding:6px;box-sizing:border-box;border-radius:50%;background:#2a2a2e;fill:none;stroke:#a1a1aa;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
/* the Foundation panel (act 04) and the palette while the master is open take the frame's height too, flat */
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) > .ld-fd{top:0!important;bottom:0!important;border:0!important;border-radius:12px!important;box-shadow:inset 0 0 0 1px var(--lx-hair)!important}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) .ghost .ghost__ring{position:absolute;left:-14px;top:-14px;width:28px;height:28px;box-sizing:border-box;border:1.5px solid #716cff;border-radius:50%;background:none!important;opacity:0;pointer-events:none}
.ld-frame.lx.lx.lx.lx:is(#live-frame,.lx) .ghost.is-agent .ghost__ring.is-go{animation:lx-press .5s ease-out}
@keyframes lx-press{0%{opacity:.8;transform:scale(.4)}100%{opacity:0;transform:scale(1.4)}}