/* Animated figures ("scenes"), drawn by scenes.js from scene-defs.js. Used by the docs and the homepage hero. */

/* ---------- scene stage ---------- */
.scene { --sc-bg: #ECEEF8; --sc-bg2: #E2E5F5; --sc-ink: #15183D; --sc-ink2: #5A5F8C; --sc-line: rgba(21, 24, 61, .14);
  position: relative; width: 100%; aspect-ratio: var(--ar, 1.76); border-radius: 18px; overflow: hidden; border: 1px solid var(--line);
  background: radial-gradient(120% 90% at 50% 0%, var(--sc-bg) 0%, var(--sc-bg2) 100%); color: var(--sc-ink); isolation: isolate; contain: layout paint; }
[data-theme="dark"] .scene { --sc-bg: #1A1E4A; --sc-bg2: #0E1130; --sc-ink: #E9EBFF; --sc-ink2: #9DA2D6; --sc-line: rgba(233, 235, 255, .14); }
.sc-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; font-family: var(--sans); }
.sc-world * { box-sizing: border-box; }
.sc-abs { position: absolute; }
.sc-ctl { position: absolute; right: 10px; bottom: 10px; display: flex; gap: 6px; z-index: 5; opacity: 0; transition: opacity .2s ease; }
.scene:hover .sc-ctl, .scene:focus-within .sc-ctl, .sc-ctl.show { opacity: 1; }
@media (hover: none) { .sc-ctl { opacity: 1; } }
@media (pointer: coarse) {
  .sc-ctl { gap: 14px; right: 14px; bottom: 14px; } /* clear of the 18px rounded corner, which clips */
  .sc-ctl button { position: relative; }
  .sc-ctl button::before { content: ""; position: absolute; inset: -8px; } /* -8px from inside the 1px border: a 44px square */
}
.sc-ctl button { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--sc-line); background: color-mix(in srgb, var(--bg) 80%, transparent); color: var(--ink); display: grid; place-items: center; cursor: pointer; backdrop-filter: blur(6px); }
.sc-ctl svg { width: 13px; height: 13px; fill: currentColor; }
.sc-ctl .i-play, .scene.paused .sc-ctl .i-pause { display: none; }
.scene.paused .sc-ctl .i-play { display: block; }
.sc-static * { transition: none !important; animation: none !important; }

/* motion helpers */
.sc-fade { opacity: 0; transition: opacity .45s ease, transform .55s var(--ease); }
.sc-fade.up { transform: translateY(12px); }
.sc-fade.in { opacity: 1; transform: none; }
.sc-pop { opacity: 0; transform: scale(.9); transition: opacity .35s ease, transform .5s var(--spring); }
.sc-pop.in { opacity: 1; transform: none; }

/* captions and chips inside scenes */
.sc-label { font: 600 14px/1 var(--sans); color: var(--sc-ink2); }
.sc-title { font: 650 22px/1.15 var(--sans); letter-spacing: -.02em; color: var(--sc-ink); }
.sc-chip { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 15px; font: 600 13px/1 var(--sans); background: var(--bg); color: var(--sc-ink); border: 1px solid var(--sc-line); white-space: nowrap; box-shadow: 0 6px 16px -10px rgba(10, 12, 40, .4); }
.sc-chip i { width: 9px; height: 9px; border-radius: 3px; background: var(--c, var(--accent)); }
.sc-chip.mono { font: 500 12.5px/1 var(--mono); }
.sc-chip.ok { color: #0B7A45; border-color: rgba(26, 158, 92, .4); background: #E7F8EF; }
.sc-chip.bad { color: #B2224A; border-color: rgba(217, 61, 99, .4); background: #FDEBF0; }
[data-theme="dark"] .sc-chip.ok { color: #6FF0A8; background: #0F2E22; }
[data-theme="dark"] .sc-chip.bad { color: #FF9DB5; background: #3A1426; }

/* window chrome: terminals, editors, agents */
.sc-win { position: absolute; border-radius: 14px; background: #0D0F2A; border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 30px 60px -30px rgba(5, 7, 30, .7); overflow: hidden; color: #DADDFF; display: flex; flex-direction: column; }
.sc-bar { flex: none; height: 34px; display: flex; align-items: center; gap: 7px; padding: 0 14px; border-bottom: 1px solid rgba(255, 255, 255, .07); background: rgba(255, 255, 255, .03); }
.sc-bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .16); }
.sc-bar span { margin-left: 8px; font: 500 12px/1 var(--mono); color: #7D82B3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-term { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; padding: 12px 16px 14px; font: 400 13.5px/1.62 var(--mono); white-space: pre; }
.sc-term.top { justify-content: flex-start; }
.sc-ln { flex: none; min-height: 1.62em; }
.sc-ln.wrap { white-space: pre-wrap; padding-left: 5ch; text-indent: -5ch; }
.sc-ln.enter { animation: sc-ln .3s var(--ease); }
@keyframes sc-ln { from { opacity: 0; transform: translateY(6px); } }
.sc-caret { display: inline-block; width: .55em; height: 1.1em; vertical-align: -.18em; background: #DADDFF; animation: sc-blink 1s steps(1) infinite; }
@keyframes sc-blink { 50% { opacity: 0; } }
.t-dim { color: #7D82B3; } .t-mod { color: #B9A3FF; } .t-var { color: #F3BE00; } .t-lit { color: #5FD6C4; }
.t-ok { color: #3DDC84; } .t-bad { color: #FF7096; } .t-info { color: #6FD0FF; } .t-ai { color: #F3BE00; font-weight: 500; }
.t-b { color: #fff; font-weight: 500; } .t-ghost { color: #7D82B3; font-style: italic; } .t-pink { color: #FF8FB9; }
.sc-status { flex: none; height: 30px; padding: 0 14px; border-top: 1px solid rgba(255, 255, 255, .07); font: 500 11.5px/1 var(--mono); color: #7D82B3; line-height: 30px; white-space: pre; overflow: hidden; text-overflow: ellipsis; }
.sc-status b { color: #DADDFF; font-weight: 500; }
.sc-rec { color: #FF5577; } .sc-aion { color: #F3BE00; }

/* files */
.sc-file { position: absolute; border-radius: 12px; background: #0D0F2A; border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 24px 50px -30px rgba(5, 7, 30, .7); overflow: hidden; font: 400 12.5px/1 var(--mono); color: #DADDFF; }
.sc-file-h { height: 32px; display: flex; align-items: center; gap: 8px; padding: 0 12px; color: #7D82B3; border-bottom: 1px solid rgba(255, 255, 255, .07); font-size: 11.5px; }
.sc-file-h::before { content: ""; width: 10px; height: 12px; border-radius: 2px; border: 1.5px solid currentColor; }
.sc-row { height: 27px; display: flex; align-items: center; padding: 0 12px; white-space: pre; transition: background .3s ease, color .3s ease; position: relative; }
.sc-row.hl { background: rgba(112, 134, 255, .2); }
.sc-row.hl::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 3px; border-radius: 2px; background: #7086FF; }
.sc-row.add { background: rgba(61, 220, 132, .14); }
.sc-row.add::before { content: "+"; position: absolute; left: 3px; color: #3DDC84; }
.sc-row.bad { background: rgba(255, 112, 150, .16); }
.sc-row.new { animation: sc-row .45s var(--ease); }
@keyframes sc-row { from { opacity: 0; transform: translateX(-8px); } }

/* connectors */
.sc-svg { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.sc-path { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; opacity: .9; transition: stroke-dashoffset .6s var(--ease); }
.sc-dot { fill: var(--accent); }

/* phone and the Birch app */
.sc-phone { position: absolute; width: 270px; height: 560px; border-radius: 42px; background: #121318; padding: 9px; box-shadow: 0 40px 70px -35px rgba(5, 7, 30, .75), inset 0 0 0 1.5px #2a2c36; transform-origin: 0 0; }
.sc-scr { position: relative; width: 100%; height: 100%; border-radius: 34px; overflow: hidden; background: #FBFAF6; color: #1C1B19; font-family: var(--sans); }
.sc-island { position: absolute; left: 50%; top: 9px; width: 78px; height: 22px; margin-left: -39px; border-radius: 12px; background: #0b0b0e; z-index: 6; }
.sc-sbar { position: absolute; left: 0; right: 0; top: 0; height: 40px; display: flex; justify-content: space-between; align-items: center; padding: 2px 24px 0 26px; font: 650 12px/1 var(--sans); z-index: 5; }
.sc-app { position: absolute; inset: 0; opacity: 0; transition: opacity .35s ease, transform .45s var(--ease); transform: translateX(26px); }
.sc-app.on { opacity: 1; transform: none; }
.sc-app.off { opacity: 0; transform: translateX(-20px); }
.b-logo { display: flex; align-items: center; gap: 6px; font-weight: 750; letter-spacing: -.04em; color: #1F5B43; }
.b-leaf { width: 18px; height: 18px; border-radius: 50% 0 50% 0; background: #2F7A5A; transform: rotate(-8deg); }
.b-h { font-weight: 720; letter-spacing: -.03em; }
.b-field { position: absolute; left: 16px; right: 16px; height: 46px; border-radius: 12px; border: 1.5px solid #E2DED4; background: #fff; padding: 7px 12px 0; font-size: 13px; transition: border-color .25s ease; }
.b-field small { display: block; font-size: 9.5px; color: #8b877d; font-weight: 600; letter-spacing: .02em; margin-bottom: 2px; }
.b-field.focus { border-color: #2F7A5A; }
.b-btn { position: absolute; left: 16px; right: 16px; height: 46px; border-radius: 13px; background: #1F5B43; color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 14.5px; transition: transform .15s ease, filter .2s ease; }
.b-btn.press { transform: scale(.97); filter: brightness(1.15); }
.b-search { position: absolute; left: 14px; right: 14px; height: 38px; border-radius: 12px; background: #EFEBE2; display: flex; align-items: center; gap: 8px; padding: 0 12px; font-size: 12.5px; color: #8b877d; }
.b-search b { color: #1C1B19; font-weight: 500; }
.b-chips { position: absolute; left: 14px; display: flex; gap: 6px; }
.b-chips span { height: 24px; padding: 0 10px; border-radius: 12px; background: #EFEBE2; font-size: 11px; font-weight: 600; display: grid; place-items: center; }
.b-chips span:first-child { background: #1F5B43; color: #fff; }
.b-card { position: absolute; width: 111px; transition: opacity .3s ease, left .45s var(--ease), top .45s var(--ease); }
.b-img { height: 104px; border-radius: 14px; display: grid; place-items: center; }
.b-img svg { width: 84px; }
.b-nm { margin-top: 6px; font-size: 11.5px; font-weight: 650; }
.b-pr { font-size: 11px; color: #8b877d; }
.b-tab { position: absolute; left: 0; right: 0; bottom: 0; height: 56px; border-top: 1px solid #EEEAE0; background: #FBFAF6; display: flex; justify-content: space-around; align-items: center; padding-bottom: 10px; }
.b-tab i { width: 20px; height: 20px; border-radius: 6px; background: #E2DED4; }
.b-tab i:first-child { background: #1F5B43; }
.b-toast { position: absolute; left: 18px; right: 18px; top: 46px; height: 44px; border-radius: 13px; background: #1C1B19; color: #fff; display: flex; align-items: center; gap: 10px; padding: 0 14px; font-size: 12.5px; font-weight: 600; opacity: 0; transform: translateY(-14px); transition: opacity .3s ease, transform .4s var(--spring); z-index: 4; box-shadow: 0 12px 24px -12px rgba(0, 0, 0, .5); }
.b-toast.in { opacity: 1; transform: none; }
.b-toast i { width: 20px; height: 20px; border-radius: 50%; background: #3DDC84; display: grid; place-items: center; font-style: normal; color: #0b2a18; font-weight: 800; font-size: 12px; }
.b-modal { position: absolute; inset: 0; background: rgba(20, 18, 14, .45); display: grid; place-items: center; opacity: 0; transition: opacity .3s ease; z-index: 4; }
.b-modal.in { opacity: 1; }
.b-modal > div { width: 210px; border-radius: 18px; background: #fff; padding: 18px 16px 12px; text-align: center; transform: scale(.92); transition: transform .4s var(--spring); }
.b-modal.in > div { transform: none; }
.b-modal b { display: block; font-size: 15px; }
.b-modal p { margin-top: 6px; font-size: 12px; color: #6f6b62; line-height: 1.4; }
.b-modal span { display: block; margin-top: 12px; padding-top: 10px; border-top: 1px solid #EEEAE0; color: #2F7A5A; font-weight: 700; font-size: 13px; }
.sc-tap { position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: rgba(36, 195, 171, .45); border: 2px solid rgba(36, 195, 171, .9); opacity: 0; pointer-events: none; z-index: 7; }
.sc-tap.go { animation: sc-tap .6s ease-out; }
@keyframes sc-tap { 0% { opacity: 1; transform: scale(.4); } 100% { opacity: 0; transform: scale(1.4); } }

/* reticle that locks onto an element */
.sc-ret { position: absolute; z-index: 8; opacity: 0; pointer-events: none; transition: left .45s var(--ease), top .45s var(--ease), width .45s var(--ease), height .45s var(--ease), opacity .3s ease; --rc: #9672F8; }
.sc-ret.in { opacity: 1; }
.sc-ret b { position: absolute; width: 14px; height: 14px; border: 3px solid var(--rc); }
.sc-ret b:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; border-radius: 5px 0 0 0; }
.sc-ret b:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; border-radius: 0 5px 0 0; }
.sc-ret b:nth-child(3) { right: 0; bottom: 0; border-left: 0; border-top: 0; border-radius: 0 0 5px 0; }
.sc-ret b:nth-child(4) { left: 0; bottom: 0; border-right: 0; border-top: 0; border-radius: 0 0 0 5px; }
.sc-ret em { position: absolute; left: -3px; bottom: calc(100% + 6px); font: 600 10.5px/1 var(--mono); font-style: normal; color: #fff; background: var(--rc); padding: 4px 7px; border-radius: 6px; white-space: nowrap; }
.sc-scan { position: absolute; left: 0; right: 0; height: 60px; z-index: 7; pointer-events: none; opacity: 0; background: linear-gradient(to bottom, transparent, rgba(243, 190, 0, .28) 70%, rgba(243, 190, 0, .9) 100%); transition: opacity .2s ease; }
.sc-scan.go { animation: sc-scan 1.1s ease-in-out forwards; }
@keyframes sc-scan { 0% { top: -60px; opacity: 1; } 90% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
.sc-aoi { position: absolute; z-index: 7; border: 2px dashed #F3BE00; background: rgba(243, 190, 0, .1); border-radius: 8px; opacity: 0; transition: all .6s var(--ease); }
.sc-aoi.in { opacity: 1; }
.sc-dim { position: absolute; inset: 0; z-index: 6; background: rgba(15, 18, 48, .45); opacity: 0; transition: opacity .4s ease; }
.sc-dim.in { opacity: 1; }

/* ladder rungs */
.sc-rungs { position: absolute; display: grid; gap: 10px; }
.sc-rung { display: grid; grid-template-columns: 34px 1fr 26px; align-items: center; gap: 12px; height: 54px; padding: 0 14px 0 12px; border-radius: 12px; background: var(--bg); border: 1px solid var(--sc-line); transition: border-color .3s ease, background .3s ease, opacity .3s ease, transform .4s var(--ease); }
.sc-rung .n { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--bg-2); font: 650 13px/1 var(--sans); color: var(--sc-ink2); }
.sc-rung .k { font: 650 14px/1.2 var(--sans); color: var(--sc-ink); }
.sc-rung .k small { display: block; margin-top: 3px; font: 400 11.5px/1.2 var(--mono); color: var(--sc-ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-rung .st { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 800 13px/1 var(--sans); color: #fff; opacity: 0; transform: scale(.5); transition: all .35s var(--spring); }
.sc-rung.trying { border-color: var(--accent); transform: translateX(6px); box-shadow: 0 10px 24px -16px var(--accent); }
.sc-rung.missed { opacity: .55; }
.sc-rung.missed .st { opacity: 1; transform: none; background: #D93D63; }
.sc-rung.found { border-color: #1A9E5C; background: color-mix(in srgb, #3DDC84 12%, var(--bg)); }
.sc-rung.found .st { opacity: 1; transform: none; background: #1A9E5C; }
.sc-rung.opt { border-style: dashed; }

/* tv and browser */
.sc-tv { position: absolute; border-radius: 12px; background: #050610; padding: 8px; box-shadow: 0 30px 60px -30px rgba(5, 7, 30, .8), inset 0 0 0 1.5px #23253a; }
.sc-tv-scr { position: relative; width: 100%; height: 100%; border-radius: 6px; overflow: hidden; background: linear-gradient(160deg, #13162E, #1C1636); }
.sc-tile { position: absolute; border-radius: 8px; transition: box-shadow .25s ease, transform .3s var(--ease); }
.sc-tile.focus { box-shadow: 0 0 0 3px #fff, 0 10px 24px rgba(0, 0, 0, .5); transform: scale(1.06); z-index: 2; }
.sc-browser { position: absolute; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 30px 60px -30px rgba(5, 7, 30, .6); border: 1px solid rgba(0, 0, 0, .08); }
.sc-url { height: 34px; display: flex; align-items: center; gap: 8px; padding: 0 12px; background: #F1F0EC; border-bottom: 1px solid #E5E2DA; }
.sc-url i { width: 9px; height: 9px; border-radius: 50%; background: #D8D4CA; }
.sc-url span { margin-left: 8px; flex: 1; height: 22px; border-radius: 6px; background: #fff; font: 500 11px/22px var(--mono); color: #6f6b62; padding: 0 10px; }
.sc-cursor { position: absolute; width: 18px; height: 22px; z-index: 9; transition: left .7s var(--ease), top .7s var(--ease); pointer-events: none; }
.sc-cursor svg { width: 100%; height: 100%; filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); }

/* pipeline nodes */
.sc-node { position: absolute; display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 16px 0 12px; border-radius: 12px; background: var(--bg); border: 1px solid var(--sc-line); font: 600 14px/1 var(--sans); color: var(--sc-ink); white-space: nowrap; transition: border-color .3s ease, box-shadow .3s ease; }
.sc-node .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--sc-line); transition: background .3s ease; }
.sc-node.run { border-color: #F3BE00; }
.sc-node.run .dot { background: #F3BE00; animation: sc-pulse 1s ease-in-out infinite; }
.sc-node.ok { border-color: #1A9E5C; }
.sc-node.ok .dot { background: #1A9E5C; }
.sc-node.bad { border-color: #D93D63; }
.sc-node.bad .dot { background: #D93D63; }
@keyframes sc-pulse { 50% { opacity: .35; } }
.sc-bar-fill { height: 6px; border-radius: 3px; background: #3DDC84; display: inline-block; vertical-align: 2px; transition: width .4s linear; }

.sc-narrow .sc-term { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; padding: 10px 12px 12px; }
.sc-narrow .sc-ln { padding-left: 1.2em; text-indent: -1.2em; }

/* value headings in the ways-of-finding panels, footnotes, wrapping log panels */
.sc-vh { margin: 2px 0 -4px 2px; font: 600 11.5px/1.2 var(--mono); color: var(--sc-ink2); }
.sc-foot { width: 500px; font: 400 12.5px/1.45 var(--sans); color: var(--sc-ink2); }
.sc-foot code { font: 500 11.5px/1 var(--mono); color: var(--sc-ink); }
.sc-log .sc-row { display: block; height: auto; min-height: 27px; padding: 5px 12px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.sc-val { border-radius: 4px; transition: background .25s ease, color .25s ease; }
.sc-val.on { background: rgba(243, 190, 0, .25); color: #fff; }
.sc-rungs.compact { gap: 8px; } .sc-rungs.compact .sc-rung { height: 46px; }
.sc-box { position: relative; margin: .55em 0 .45em; padding: .3em 1ch; border: 1px solid rgba(125, 130, 179, .55); border-radius: 6px; white-space: pre-wrap; }
.sc-box[data-title]::before, .sc-box[data-sub]::after { position: absolute; padding: 0 1ch; background: #0D0F2A; line-height: 1; }
.sc-box[data-title]::before { content: attr(data-title); top: -.5em; left: 50%; transform: translateX(-50%); }
.sc-box[data-sub]::after { content: attr(data-sub); bottom: -.5em; right: 2ch; }
.sc-box.bad { border-color: rgba(255, 112, 150, .6); }
.sc-box.bad::before { color: #FF7096; }
.sc-box.info { border-color: rgba(111, 208, 255, .55); }
.sc-box.info::before, .sc-box.info::after { color: #6FD0FF; }

/* rows ticked off as a run passes them, and the one-row file on a narrow hero */
.sc-row .sc-done { margin-left: auto; padding-left: 16px; color: #3DDC84; opacity: 0; transition: opacity .3s ease; }
.sc-row.done .sc-done { opacity: 1; }
.sc-ticker .sc-row { font-size: 11.5px; }