@view-transition { navigation: auto; }
/* Live demo (signal skin, 2026-10-15). One rig, three screens: the customer's
   shop (John's Shoes), the agent's terminal and the BugTape console preview.
   A new report plays one take: the error holds, the agent's terminal types,
   then the console issue opens by itself. The segmented control switches
   screens at any point and stops the take. The page is the walnut room; the
   shop is a customer's site with its own palette and type, never BugTape
   ember; the console wears the product's dark walnut. */
.demo-shell { padding-block: 56px var(--space-page-lg); }

/* Intro: headline, one line, a compact three-step rail. */
.demo-intro { display: grid; gap: 20px; max-width: 980px; padding-bottom: 40px; }
.demo-shell .demo-intro h1 { margin: 0; color: var(--sg-ink); font-family: var(--font-display, inherit); font-size: clamp(36px, 5.6vw, 76px); font-weight: 500; line-height: .98; letter-spacing: -.04em; text-wrap: balance; }
.demo-lede { max-width: 620px; margin: 0; color: var(--sg-mute); font-size: 18px; line-height: 1.5; text-wrap: pretty; }
.demo-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; max-width: 760px; margin: var(--space-xl) 0 0; padding: 0; list-style: none; }
.demo-steps li { position: relative; display: flex; align-items: baseline; gap: var(--space-lg); padding: var(--space-xl) var(--space-2xl) 0 0; color: var(--sg-faint); font-size: 14px; line-height: 1.35; transition: color 400ms var(--sg-out); }
.demo-steps li::before { content: ''; position: absolute; inset: 0 0 auto; height: 2px; background: var(--sg-line-2); }
.demo-steps li::after { content: ''; position: absolute; inset: 0 0 auto; height: 2px; background: var(--sg-ember); transform: scaleX(0); transform-origin: left; transition: transform 700ms var(--sg-expo); }
.demo-steps li + li::before, .demo-steps li + li::after { left: 4px; }
#main .demo-steps li b { flex: none; padding: 0; border: 0; background: none; color: var(--sg-faint); font: 400 12px/1 var(--font-mono); letter-spacing: .04em; }
.demo-steps li strong { color: inherit; font-weight: 600; }
.demo-steps li[data-state='active'], .demo-steps li[data-state='complete'] { color: var(--sg-ink); }
#main .demo-steps li[data-state='active'] b, #main .demo-steps li[data-state='complete'] b { background: none; color: var(--sg-ember); }
.demo-steps li[data-state='active']::after { transform: scaleX(.35); }
.demo-steps li[data-state='complete']::after { transform: scaleX(1); }

/* The rig: one quiet panel on the room. */
#capture { --rig-pad: var(--space-xl); position: relative; padding: var(--rig-pad); border: 1px solid var(--sg-line); border-radius: var(--rounded-xl); background: var(--sg-room-2); box-shadow: none; color: var(--sg-ink); scroll-margin-top: 80px; }
#capture .rig-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-xl) var(--space-2xl); padding: 0 0 var(--rig-pad); }

/* Segmented control: three options in one track; a single thumb slides to the
   one in view (positioned from data-view, so no script is needed). */
#capture .view-switch { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: var(--space-sm); border: 1px solid var(--sg-line); border-radius: var(--rounded-lg); background: var(--sg-room); box-shadow: none; isolation: isolate; }
#capture .view-switch::before { content: ''; position: absolute; z-index: -1; top: var(--space-sm); bottom: var(--space-sm); left: var(--space-sm); width: calc((100% - var(--space-lg)) / 3); border-radius: var(--rounded-md); background: var(--sg-surface-2); box-shadow: inset 0 0 0 1px var(--sg-line-2); transition: transform 420ms var(--sg-expo); }
#capture[data-view='agent'] .view-switch::before { transform: translateX(100%); }
#capture[data-view='console'] .view-switch::before { transform: translateX(200%); }
#capture .view-switch button { position: relative; display: grid; align-content: center; gap: 2px; min-width: 176px; min-height: 48px; padding: var(--space-md) var(--space-2xl); border: 0; border-radius: var(--rounded-md); background: transparent; color: var(--sg-faint); text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color 160ms var(--sg-out), transform 160ms var(--sg-out); }
#capture .view-switch button span { font: 500 14px/1.2 var(--font-ui, inherit); letter-spacing: -.005em; }
#capture .view-switch button small { color: var(--sg-faint); font: 400 11px/1.3 var(--font-mono); opacity: .85; }
#capture .view-switch button:hover, #capture .view-switch button[aria-pressed='true'] { background: transparent; box-shadow: none; color: var(--sg-ink); }
#capture .view-switch button:active { transform: scale(.97); }
#capture .view-switch button em { position: absolute; top: var(--space-md); right: var(--space-lg); display: inline-flex; align-items: center; gap: var(--space-sm); color: var(--sg-ember); font: 400 11px/1 var(--font-mono); font-style: normal; }
#capture .view-switch button em::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
#capture .view-switch button em[hidden] { display: none; }

/* Recording state and the one start control. */
.rig-rec { display: flex; align-items: center; gap: var(--space-xl); margin: 0; color: var(--sg-faint); font: 400 12px/1.4 var(--font-mono); }
.rec-dot { position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--sg-faint); opacity: .6; }
#capture[data-capture='starting'] .rec-dot { background: var(--sg-glow); opacity: 1; }
#capture[data-capture='on'] .rig-rec { color: var(--sg-ink); }
#capture[data-capture='on'] .rec-dot { background: var(--sg-ember); opacity: 1; }
#capture[data-capture='on'] .rec-dot::after { content: ''; position: absolute; inset: -4px; border: 1px solid var(--sg-ember); border-radius: 50%; animation: rec-pulse 1.8s var(--sg-out) infinite; }
@keyframes rec-pulse { from { opacity: .9; transform: scale(.6); } to { opacity: 0; transform: scale(2.2); } }
#start-demo { min-height: 44px; }
#start-demo.secondary { min-height: 44px; padding: 0 var(--space-2xl); border: 1px solid var(--sg-line-2); border-radius: var(--rounded-md); background: transparent; box-shadow: none; color: var(--sg-mute); font: 400 12px/1 var(--font-mono); letter-spacing: 0; text-transform: none; }
#start-demo.secondary:hover { border-color: var(--sg-mute); color: var(--sg-ink); }

/* Screens. The three faces share one grid cell, so the rig is as tall as its
   tallest closed screen and never taller. The one in view fades in; the
   others fade out and stop taking pointer input. */
.rig-screen { overflow: clip; border-radius: var(--rounded-lg); }
.rig-flipper { display: grid; }
.face { grid-area: 1 / 1; display: flex; flex-direction: column; min-width: 0; overflow: clip; border-radius: var(--rounded-lg); transition: opacity 420ms var(--sg-out), transform 520ms var(--sg-expo), visibility 0s linear 420ms; }
#capture[data-view='app'] .face:not(.face-app), #capture[data-view='agent'] .face:not(.face-agent), #capture[data-view='console'] .face:not(.face-console) { visibility: hidden; opacity: 0; transform: translateY(10px) scale(.99); pointer-events: none; }
#capture[data-view='app'] .face-app, #capture[data-view='agent'] .face-agent, #capture[data-view='console'] .face-console { transition-delay: 0s; }
/* A new report holds the customer's error on screen before the agent fades in. */
#capture[data-arrival='1'] .face { transition-delay: 1400ms, 1400ms, 1820ms; }
#capture[data-arrival='1'] .face-agent { transition-delay: 1400ms, 1400ms, 0s; }
.rig-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-sm) var(--space-2xl); padding: var(--rig-pad) var(--space-sm) 0; }
.rig-status { margin: 0; color: var(--sg-mute); font-size: 14px; line-height: 1.45; }
.privacy-line { margin: 0; color: var(--sg-faint); font: 400 11px/1.5 var(--font-mono); }

/* The agent's terminal. Lines arrive one after another once a report exists. */
.face-agent { background: var(--sg-room); box-shadow: inset 0 0 0 1px var(--sg-line); }
.term-win { flex: 1; display: flex; flex-direction: column; color: var(--sg-mute); font: 400 13px/1.7 var(--font-mono); }
.term-top { display: flex; align-items: center; gap: var(--space-md); margin: 0; padding: var(--space-xl) var(--space-2xl); border-bottom: 1px solid var(--sg-line); color: var(--sg-faint); font-size: 12px; }
.term-top i { width: 10px; height: 10px; border-radius: 50%; background: var(--sg-surface-2); box-shadow: inset 0 0 0 1px var(--sg-line-2); }
.term-top span { margin-left: var(--space-lg); }
.term-tag { margin-left: auto; padding: 2px var(--space-md); border: 1px solid var(--sg-line-2); border-radius: var(--rounded-xs); color: var(--sg-faint); font: 400 10px/1.4 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.term-banner { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.face-agent { position: relative; min-height: 460px; background: radial-gradient(120% 80% at 0% 0%, rgba(224, 106, 50, .07), transparent 60%), var(--sg-room); }
.term-log { display: grid; align-content: start; gap: 14px; margin: 0; padding: 40px 44px; list-style: none; font-size: 14px; }
.term-log li { overflow-wrap: anywhere; }
.term-log b { color: var(--sg-ember); font-weight: 600; }
.term-log strong { color: var(--sg-ink); font-weight: 600; }
.t-wait { display: flex; align-items: center; gap: var(--space-xl); color: var(--sg-faint); }
.t-wait::before { content: ''; flex: none; width: 8px; height: 16px; background: var(--sg-ember); animation: caret 1.1s steps(2, jump-none) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.t-cmd { color: var(--sg-ink); }
.t-cmd span { color: var(--sg-mute); }
.t-out { padding-left: var(--space-2xl); color: var(--sg-mute); }
.t-err { color: var(--sg-bad); }
.t-note { padding: var(--space-xl) var(--space-2xl); border-left: 2px solid var(--sg-ember); border-radius: 0 var(--rounded-sm) var(--rounded-sm) 0; background: var(--sg-surface); color: var(--sg-ink); }
.term-log[data-agent='waiting'] li:not(.t-wait) { display: none; }
.term-log[data-agent='ready'] .t-wait { display: none; }
.term-log[data-agent='ready'] li { animation: term-line 360ms var(--sg-out) both; }
/* Commands type out left to right; results land under them. The take opens
   the console 7.6s after the report, a beat after the last line. */
.term-log[data-agent='ready'] li:nth-child(2) { animation-delay: 1500ms; }
.term-log[data-agent='ready'] li:nth-child(3) { animation: term-type 700ms steps(22, end) 2300ms both; }
.term-log[data-agent='ready'] li:nth-child(4) { animation-delay: 3150ms; }
.term-log[data-agent='ready'] li:nth-child(5) { animation-delay: 3350ms; }
.term-log[data-agent='ready'] li:nth-child(6) { animation-delay: 3550ms; }
.term-log[data-agent='ready'] li:nth-child(7) { animation: term-type 600ms steps(24, end) 4300ms both; }
.term-log[data-agent='ready'] li:nth-child(8) { animation-delay: 5100ms; }
.term-log[data-agent='ready'] li:nth-child(9) { animation-delay: 5900ms; }
.term-log[data-agent='ready'] li:nth-child(10) { animation-delay: 6300ms; }
.t-caret { width: 8px; height: 16px; background: var(--sg-ember); }
.term-log[data-agent='ready'] .t-caret { animation: term-line 1ms linear 6300ms both, caret 1.1s steps(2, jump-none) 6300ms infinite; }
.term-log[data-agent='waiting'] .t-caret { display: none; }
@keyframes term-line { from { opacity: 0; transform: translateY(6px); } }
@keyframes term-type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* ─── John's Shoes ─────────────────────────────────────────────────────────
   A customer's boutique, not BugTape: warm paper, ink, a serif wordmark, an
   ink pay button. Its own palette lives here so the shop never borrows ember. */
.face-app { --js-paper: #F7F4EF; --js-card: #FFFFFF; --js-stone: #ECE6DD; --js-ink: #191613; --js-ink-2: #34302B; --js-mute: #716A61; --js-faint: #A39B90; --js-line: #E5DFD6; --js-line-2: #D3CBBF; --js-off: #E4DFD8; --js-off-ink: #9C958B; --js-error: #B42318; --js-error-bg: #FDF1EF; --js-error-line: #F2C9C2; --js-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Charter, "Bitstream Charter", Georgia, ui-serif, serif; --js-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Inter, Arial, sans-serif; background: var(--js-paper); }
.browser-bar { display: flex; align-items: center; gap: var(--space-md); margin: 0; padding: var(--space-lg) var(--space-xl); border-bottom: 1px solid var(--js-line); background: var(--js-off); }
.browser-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--js-line-2); }
.browser-url { display: inline-flex; align-items: center; gap: var(--space-md); margin-inline: auto; padding: var(--space-sm) var(--space-2xl); border-radius: var(--rounded-sm); background: var(--js-paper); color: var(--js-mute); font: 400 12px/1.4 var(--js-sans); }
.browser-url svg { color: var(--js-faint); }

.shop { position: relative; flex: 1; display: flex; flex-direction: column; background: var(--js-paper); color: var(--js-ink); font-family: var(--js-sans); font-feature-settings: 'tnum' 1; }
.shop p, .shop h2, .shop dl, .shop dd, .shop ul, .shop ol, .shop fieldset { margin: 0; }
.shop-promo { padding: var(--space-md) var(--space-2xl); background: var(--js-ink); color: var(--js-paper); font-size: 12px; letter-spacing: .02em; text-align: center; }
.shop-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 64px; padding: 0 32px; border-bottom: 1px solid var(--js-line); }
.shop-links { display: flex; gap: 28px; color: var(--js-ink-2); font-size: 13px; }
.shop-menu { display: none; color: var(--js-ink); }
.shop-name { color: var(--js-ink); font: 400 26px/1 var(--js-serif); letter-spacing: -.01em; white-space: nowrap; }
.shop-name em { font-style: italic; }
.shop-icons { display: flex; justify-content: flex-end; align-items: center; gap: 20px; color: var(--js-ink); }
.shop-cart { position: relative; display: inline-flex; }
.shop-cart b { position: absolute; top: -4px; right: -7px; display: grid; place-items: center; min-width: 16px; height: 16px; padding: 0 var(--space-sm); border-radius: var(--rounded-lg); background: var(--js-ink); color: var(--js-paper); font: 600 10px/1 var(--js-sans); }
.shop-crumbs { display: flex; gap: var(--space-lg); padding: 20px 32px 0; list-style: none; color: var(--js-faint); font-size: 12px; }
.shop-crumbs li + li::before { content: '—'; margin-right: var(--space-lg); color: var(--js-line-2); }
.shop-crumbs [aria-current] { color: var(--js-ink); }
.shop-body { display: grid; grid-template-columns: minmax(0, 7fr) minmax(320px, 5fr); gap: 48px; align-items: start; padding: 20px 32px 32px; }

/* Gallery: the photo multiplied onto a warm stone backdrop, plus crops of it. */
.shop-gallery { display: grid; gap: var(--space-xl); }
.shop-photo { position: relative; margin: 0; overflow: hidden; border-radius: var(--rounded-lg); background: #E3D8CB; }
.shop-photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.shop-thumbs { display: grid; grid-template-columns: repeat(4, 72px); gap: var(--space-lg); }
.shop-thumbs span { aspect-ratio: 1; border-radius: var(--rounded-md); background: #E3D8CB url('./johns-chelsea.webp') 50% 50% / 150% auto no-repeat; box-shadow: inset 0 0 0 1px transparent; transition: box-shadow 160ms var(--sg-out); }
.shop-thumbs .is-on { box-shadow: inset 0 0 0 1.5px var(--js-ink); }
.shop-thumbs .crop-toe { background-size: 300% auto; background-position: 14% 76%; }
.shop-thumbs .crop-lace { background-size: 280% auto; background-position: 66% 38%; }
.shop-thumbs .crop-heel { background-size: 280% auto; background-position: 80% 78%; }

/* Order card. */
.shop-order { display: flex; flex-direction: column; gap: var(--space-2xl); padding: var(--space-3xl); border: 1px solid var(--js-line); border-radius: var(--rounded-lg); background: var(--js-card); }
.shop-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2xl); }
.shop .shop-order h2 { color: var(--js-ink); font: 400 24px/1.15 var(--js-serif); letter-spacing: -.01em; }
.shop-price { color: var(--js-ink); font-size: 16px; white-space: nowrap; }
.shop-variant { margin-top: -10px !important; color: var(--js-mute); font-size: 13px; }
.shop-sizes { display: flex; flex-wrap: wrap; gap: var(--space-lg); min-width: 0; padding: 0; border: 0; }
.shop-sizes legend { display: flex; justify-content: space-between; width: 100%; margin-bottom: var(--space-lg); padding: 0; color: var(--js-ink); font-size: 12px; font-weight: 600; }
.shop-sizes legend span { color: var(--js-mute); font-weight: 400; }
.shop-sizes label { position: relative; flex: 1 1 0; min-width: 44px; }
.shop-sizes input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.shop-sizes label span { display: grid; place-items: center; height: 44px; border: 1px solid var(--js-line-2); border-radius: var(--rounded-md); color: var(--js-ink); font-size: 14px; transition: border-color 160ms var(--sg-out), background 160ms var(--sg-out), color 160ms var(--sg-out); }
.shop-sizes label:hover span { border-color: var(--js-ink); }
.shop-sizes input:checked + span { border-color: var(--js-ink); background: var(--js-ink); color: var(--js-paper); }
.shop-sizes input:focus-visible + span { outline: 2px solid var(--js-ink); outline-offset: 2px; }
.shop-sizes input:disabled { cursor: not-allowed; }
.shop-sizes input:disabled + span { border-color: var(--js-line); color: var(--js-faint); text-decoration: line-through; }
.shop-sizes label:has(input:disabled):hover span { border-color: var(--js-line); }
.shop-details { display: grid; gap: var(--space-lg); padding-top: var(--space-2xl); border-top: 1px solid var(--js-line); font-size: 13px; }
.shop-details div, .shop-total div { display: flex; justify-content: space-between; gap: var(--space-2xl); }
.shop-details dt, .shop-total dt { color: var(--js-mute); }
.shop-details dd { color: var(--js-ink); text-align: right; }
.shop-total { display: grid; gap: var(--space-lg); padding-top: var(--space-2xl); border-top: 1px solid var(--js-line); font-size: 13px; }
.shop-total dd { font-variant-numeric: tabular-nums; }
.shop-total .is-total { margin-top: var(--space-sm); color: var(--js-ink); font-size: 16px; font-weight: 600; }
.shop-total .is-total dt { color: var(--js-ink); }

/* Pay: the shop's own ink button. Disabled reads as a real unavailable step. */
.shop-paybar { position: relative; display: flex; flex-direction: column; gap: var(--space-xl); }
.shop-paybar-total { display: none; }
#checkout .shop-pay { position: relative; display: grid; place-items: center; width: 100%; min-height: 52px; padding: 0 var(--space-2xl); border: 0; border-radius: var(--rounded-md); background: var(--js-ink); color: var(--js-paper); font: 600 15px/1 var(--js-sans); letter-spacing: .01em; cursor: pointer; transition: background 160ms var(--sg-out), color 160ms var(--sg-out), transform 120ms var(--sg-out); }
#checkout .shop-pay:hover:not(:disabled) { background: var(--js-ink-2); }
#checkout .shop-pay:active:not(:disabled) { transform: scale(.985); }
#checkout .shop-pay:disabled { background: var(--js-off); color: var(--js-off-ink); cursor: not-allowed; }
#capture[data-order='placing'] .shop-pay { background: var(--js-ink); color: transparent; }
#capture[data-order='placing'] .shop-pay::after { content: ''; position: absolute; top: 50%; left: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border: 2px solid var(--js-ink-2); border-top-color: var(--js-paper); border-radius: 50%; animation: pay-spin 700ms linear infinite; }
@keyframes pay-spin { to { transform: rotate(360deg); } }
.shop-note { color: var(--js-mute); font-size: 12px; line-height: 1.45; text-align: center; }
/* Failure: an inline payment error above the button, as a real checkout shows it. */
#capture[data-order='failed'] .shop-note { order: -1; display: flex; gap: var(--space-lg); padding: var(--space-xl) var(--space-2xl); border: 1px solid var(--js-error-line); border-radius: var(--rounded-md); background: var(--js-error-bg); color: var(--js-error); font-size: 13px; font-weight: 600; text-align: left; animation: pay-error 420ms var(--sg-out) both; }
#capture[data-order='failed'] .shop-note::before { content: '!'; flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--js-error); color: var(--js-card); font: 700 12px/1 var(--js-sans); }
@keyframes pay-error { 0% { opacity: 0; transform: translateY(-4px); } 40% { opacity: 1; transform: translateX(-4px); } 60% { transform: translateX(3px); } 80% { transform: translateX(-2px); } 100% { transform: none; } }

/* The demo's cue (BugTape's voice, so ember) floats above the shop's button. */
.shop-cue { order: 2; display: flex; justify-content: center; align-items: center; gap: var(--space-md); color: #C2551F; font-size: 13px; line-height: 1.3; }
.shop-cue[hidden] { display: none; }
.shop-cue strong { font-weight: 600; }
.shop-cue-arrow { flex: none; }
@media (prefers-reduced-motion: no-preference) {
  .shop-cue:not([hidden]) .shop-cue-arrow { animation: cue-bob 1.4s var(--sg-inout) infinite; }
  #capture:has(.shop-cue:not([hidden])) .shop-pay { animation: pay-ring 2.4s var(--sg-out) infinite; }
}
@keyframes cue-bob { 50% { transform: translateY(-3px); } }
@keyframes pay-ring { 0% { box-shadow: 0 0 0 0 rgba(224, 106, 50, .55); } 70%, 100% { box-shadow: 0 0 0 10px rgba(224, 106, 50, 0); } }
.shop-cue ~ .shop-note { order: 3; }
.shop-cue[hidden] + .shop-note { margin-top: 0; }
.shop-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-sm) 20px; padding: 0; list-style: none; color: var(--js-mute); font-size: 11px; }
.shop-trust li { display: inline-flex; align-items: center; gap: var(--space-md); }
.shop-trust li::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--js-faint); }


/* ─── BugTape console preview ─── */
.face-console > .bt { flex: 1; }
/* Agent status in the console preview issue page. */
.bt-agent { display: flex; flex-wrap: wrap; gap: var(--space-lg); margin: var(--space-2xl) 0 0; padding: var(--space-lg) var(--space-xl); border: 1px solid var(--border); border-radius: var(--rounded-md); background: var(--surface-2); list-style: none; font-size: 12px; }
.bt-agent li { display: grid; gap: var(--space-xs); min-width: 140px; padding-left: var(--space-2xl); position: relative; color: var(--muted); }
.bt-agent li::before { content: ''; position: absolute; left: 0; top: 4px; width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--border-strong); }
.bt-agent li.is-done::before { border-color: var(--success); background: var(--success); }
.bt-agent b { color: var(--text); font-weight: 600; }
#capture[data-view='console'][data-screen='issue'] .bt-agent li.is-done::before { animation: tick 380ms var(--sg-out) both; }
#capture[data-view='console'][data-screen='issue'] .bt-agent li.is-done + li.is-done::before { animation-delay: 260ms; }
@keyframes tick { from { transform: scale(.2); opacity: 0; } }
/* BugTape console preview: the real console's layout at a smaller scale, in
   the product's dark walnut (the same values as the home page console). */
.bt { --bg: var(--sg-room); --surface: var(--sg-surface); --surface-2: var(--sg-room-2); --border: var(--sg-line); --border-strong: var(--sg-line-2); --text: var(--sg-ink); --muted: var(--sg-mute); --faint: var(--sg-faint); --accent: var(--sg-ember); --accent-tint: rgba(224, 106, 50, .12); --warning: var(--sg-glow); --warning-tint: rgba(255, 178, 92, .1); --error: var(--sg-bad); --success: var(--sg-good); display: grid; grid-template-columns: 184px minmax(0, 1fr); min-height: 100%; background: var(--bg); color: var(--text); font-family: var(--font-ui); }
.bt-side { display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--space-2xl) var(--space-lg); border-right: 1px solid var(--border); background: var(--surface-2); }
.bt-brand { padding: var(--space-xs) var(--space-lg) var(--space-xl); }
.bt-brand img { display: block; height: 18px; width: auto; }
.bt-count { float: right; min-width: 20px; padding: 0 var(--space-sm); border-radius: var(--rounded-sm); background: var(--accent-tint); color: var(--accent); font: 500 11px/18px var(--font-mono); font-style: normal; text-align: center; }
.bt-project { display: grid; margin-bottom: var(--space-xl); padding: var(--space-lg); border: 1px solid var(--border); border-radius: var(--rounded-md); background: var(--surface); font-size: 13px; font-weight: 600; }
.bt-project small { color: var(--muted); font-weight: 400; }
.bt-nav { padding: var(--space-md) var(--space-lg); border-radius: var(--rounded-sm); font-size: 14px; }
.bt-nav.is-on { background: var(--accent-tint); color: var(--accent); font-weight: 600; }
.bt-nav.is-off { color: var(--faint); }
.bt-main { position: relative; min-width: 0; padding: var(--space-2xl) var(--space-3xl) var(--space-3xl); }
.bt-banner { margin-bottom: var(--space-2xl); padding: 0 0 var(--space-lg); border-bottom: 1px solid var(--border); color: var(--faint); font: 400 11px/1.5 var(--font-mono); }
.bt-screen { min-width: 0; }
#capture[data-screen='inbox'] .bt-issue, #capture[data-screen='issue'] .bt-inbox, #capture:not([data-view='console']) .bt-issue { position: absolute; inset: 0 var(--space-3xl); visibility: hidden; pointer-events: none; overflow: hidden; height: 0; }
.bt-inbox h3, .evidence-head h3 { color: var(--text); font-size: 24px; letter-spacing: -.01em; }
.bt-table { margin-top: var(--space-xl); overflow: hidden; border: 1px solid var(--border); border-radius: var(--rounded-md); background: var(--surface); }
.bt-tr { display: grid; grid-template-columns: minmax(0, 1fr) 88px 56px 84px; gap: var(--space-xl); align-items: center; min-height: 52px; padding: var(--space-lg) var(--space-xl); border-top: 1px solid var(--border); font-size: 14px; }
.bt-tr[hidden] { display: none; }
.bt-th { min-height: 36px; border-top: 0; color: var(--muted); font-size: 12px; }
.bt-empty { grid-template-columns: 1fr; color: var(--muted); font-size: 13px; }
.bt-num { font: 400 12px/1.3 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--muted); }
.bt-open, .bt-title { display: grid; gap: var(--space-xs); min-width: 0; padding: 0; border: 0; background: none; color: var(--text); font: 500 14px/1.3 var(--font-ui); text-align: left; }
.bt-open { cursor: pointer; }
.bt-open > span, .bt-title { overflow-wrap: anywhere; }
.bt-open small, .bt-title small { color: var(--muted); font-size: 12px; font-weight: 400; }
.bt-open:hover > span, .bt-open:focus-visible > span { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.bt-tr.is-new { background: var(--accent-tint); box-shadow: inset 3px 0 0 var(--accent); }
#capture[data-arrival='1'] .bt-tr.is-new { animation: row-land 900ms var(--sg-expo) 1800ms both; }
@keyframes row-land { from { opacity: 0; transform: translateY(-12px); } }
.bt-tr.is-sample { color: var(--muted); }
.bt-tr.is-sample .bt-title { color: var(--muted); font-weight: 400; }
.bt-chip { margin-right: var(--space-sm); padding: 0 var(--space-md); border: 1px solid var(--border); border-radius: var(--rounded-xs); font: 400 11px/1.5 var(--font-mono); font-style: normal; }
.bt-sev { display: inline-flex; align-items: center; gap: var(--space-md); padding: var(--space-xs) var(--space-lg); border-radius: var(--rounded-lg); background: var(--warning-tint); color: var(--warning); font: 600 12px/1.3 var(--font-ui); font-style: normal; }
.bt-sev::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.bt-sev.is-med, .bt-sev.is-low { background: var(--surface-2); color: var(--muted); }

/* Issue detail. The evidence tabs and panels are the same captured evidence as before. */
.bt-back { min-height: 32px; margin-bottom: var(--space-lg); padding: 0; border: 0; background: none; color: var(--muted); font-size: 13px; cursor: pointer; }
.bt-back:hover { color: var(--accent); }
.evidence-head { display: grid; gap: var(--space-sm); }
.evidence-head h3 { font-size: 24px; font-weight: 500; letter-spacing: -.015em; overflow-wrap: anywhere; }
.bt-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-2xl); margin: var(--space-lg) 0 0; color: var(--muted); font-size: 13px; }
.bt-meta { gap: var(--space-sm) var(--space-lg); }
.bt-meta span + span::before { content: '·'; margin-right: var(--space-lg); color: var(--faint); }
/* Evidence on the left, the captured timeline on the right. */
.bt-issue-grid { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: var(--space-2xl); align-items: start; }
.bt-evidence { min-width: 0; }
.bt-timeline { margin-top: var(--space-2xl); overflow: hidden; border: 1px solid var(--border); border-radius: var(--rounded-md); background: var(--surface); }
.bt-card-head { display: flex; justify-content: space-between; margin: 0; padding: var(--space-lg) var(--space-xl); border-bottom: 1px solid var(--border); color: var(--text); font: 500 13px/1.4 var(--font-ui); }
.bt-card-head span:last-child { color: var(--faint); font: 400 11px/1.6 var(--font-mono); }
#issue-timeline { margin: 0; padding: var(--space-sm) 0; list-style: none; }
#issue-timeline li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: var(--space-lg); align-items: baseline; padding: var(--space-lg) var(--space-xl); color: var(--text); font-size: 13px; line-height: 1.4; }
#issue-timeline li.is-empty { display: block; color: var(--muted); font-size: 12px; }
#issue-timeline time { color: var(--faint); font: 400 11px/1.4 var(--font-mono); }
#issue-timeline span { overflow-wrap: anywhere; }
#issue-timeline .tl-bad { color: var(--error); }
#issue-timeline .tl-bad:has(b) { margin: 0 var(--space-md); padding-inline: var(--space-lg); border-radius: var(--rounded-sm); background: rgba(238, 122, 98, .08); box-shadow: inset 0 0 0 1px rgba(238, 122, 98, .35); }
#issue-timeline b { padding: 0 var(--space-md); border-radius: var(--rounded-xs); background: rgba(238, 122, 98, .16); color: var(--error); font: 500 11px/1.6 var(--font-mono); }
#capture[data-view='console'][data-screen='issue'] #issue-timeline li:not(.is-empty) { animation: term-line 420ms var(--sg-out) both; }
#capture[data-view='console'][data-screen='issue'] #issue-timeline li:nth-child(2) { animation-delay: 140ms; }
#capture[data-view='console'][data-screen='issue'] #issue-timeline li:nth-child(3) { animation-delay: 280ms; }
#capture[data-view='console'][data-screen='issue'] #issue-timeline li:nth-child(4) { animation-delay: 420ms; }
.evidence-head h3:focus { outline: none; }
.evidence-source { color: var(--muted); font: 400 12px/1.4 var(--font-mono); }
.evidence[data-evidence='ready'] .evidence-source { color: var(--accent); }
.evidence-tabs { display: flex; gap: var(--space-2xl); margin-top: var(--space-2xl); border-bottom: 1px solid var(--border); }
.evidence-tabs button { display: flex; align-items: center; gap: var(--space-md); min-height: 40px; padding: 0 var(--space-xs); border: 0; border-bottom: 2px solid transparent; background: none; color: var(--muted); font: 500 14px/1 var(--font-ui); cursor: pointer; }
.evidence-tabs button em { color: var(--faint); font: 400 12px/1 var(--font-mono); font-style: normal; }
.evidence-tabs button[aria-selected='true'] { border-bottom-color: var(--accent); color: var(--text); }
.evidence-panels { margin-top: var(--space-2xl); overflow: hidden; border: 1px solid var(--border); border-radius: var(--rounded-md); background: var(--surface); }
.evidence-panels > section { min-height: 200px; display: flex; flex-direction: column; }
.evidence-panels > section[hidden] { display: none; }
.artifact-heading { display: flex; justify-content: space-between; gap: var(--space-xl); padding: var(--space-lg) var(--space-xl); border-bottom: 1px solid var(--border); background: var(--surface-2); color: var(--muted); font: 400 12px/1.4 var(--font-mono); }
[data-source='captured'] .artifact-heading span:last-child { color: var(--accent); }
.replay-frame { display: grid; gap: var(--space-lg); padding: var(--space-xl); border-bottom: 1px solid var(--border); }
.replay-provenance { display: flex; justify-content: space-between; gap: var(--space-xl); flex-wrap: wrap; color: var(--muted); font: 400 11px/1.5 var(--font-mono); }
.replay-provenance span:first-child { color: var(--accent); }
.replay-player { min-width: 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--rounded-sm); background: var(--surface-2); }
.replay-player:empty { min-height: 120px; display: grid; place-items: center; }
.replay-player:empty::before { content: 'Place the order to build the local replay.'; color: var(--muted); font-size: 12px; }
.replay-player .rr-player { margin: 0 auto; max-width: 100%; }
#dom-player .rr-player { background: var(--surface); box-shadow: none; }
#dom-player .rr-player__frame { max-width: 100%; }
#dom-player .rr-controller { background: var(--surface); color: var(--text); border-top: 1px solid var(--border); }
#dom-player .rr-timeline__time { color: var(--muted); }
#dom-player .rr-progress { background: var(--border); border-color: var(--border); }
#dom-player .rr-progress__step, #dom-player .rr-progress__handler { background: var(--accent); }
#dom-player .rr-controller__btns button { min-height: var(--space-touch-target); min-width: var(--space-touch-target); }
#dom-player .rr-controller__btns button { color: var(--muted); }
#dom-player .rr-controller__btns button.active { background: var(--accent); color: var(--sg-ember-ink); }
#dom-player .rr-controller__btns button svg { fill: currentColor; }
#dom-player .switch input[type='checkbox']:checked + label::before { background: var(--accent); }
.artifact-facts { margin: 0; padding: var(--space-sm) var(--space-xl); font-size: 12px; }
.artifact-facts > div { display: flex; justify-content: space-between; gap: var(--space-xl); padding-block: var(--space-lg); border-bottom: 1px solid var(--border); }
.artifact-facts > div:last-child { border-bottom: 0; }
.artifact-facts dt { color: var(--muted); }
.artifact-facts dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.artifact-code, .artifact-stack { display: block; margin: 0; padding: var(--space-xl); color: var(--text); font: 400 12px/1.6 var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.console-trail { margin: 0; padding: var(--space-lg) var(--space-xl); list-style: none; font: 400 12px/1.7 var(--font-mono); }
.console-line { display: grid; grid-template-columns: 72px 48px minmax(0, 1fr); gap: var(--space-xl); }
.console-line.level-error { color: var(--error); }
.artifact-foot { margin-top: auto; padding: var(--space-lg) var(--space-xl); border-top: 1px solid var(--border); color: var(--muted); font-size: 12px; }
.raw-report { margin-top: var(--space-xl); }
.raw-report summary { display: flex; align-items: center; min-height: 36px; color: var(--muted); font-size: 13px; cursor: pointer; }
#demo-report { max-height: 280px; margin: 0; padding: var(--space-xl); overflow: auto; border: 1px solid var(--border); border-radius: var(--rounded-sm); background: var(--surface); color: var(--text); font: 400 12px/1.5 var(--font-mono); white-space: pre-wrap; }
.report-actions { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-xl); margin-top: var(--space-2xl); padding: var(--space-xl) var(--space-2xl); border: 1px solid rgba(224, 106, 50, .35); border-radius: var(--rounded-md); background: linear-gradient(90deg, rgba(224, 106, 50, .1), transparent 70%); }
.report-actions[hidden] { display: none; }
.report-actions p { color: var(--muted); font-size: 13px; }
.report-actions .actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xl); }
.text-button { min-height: 36px; padding: 0; border: 0; background: none; color: var(--accent); font: 500 14px/1 var(--font-ui); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }


/* Data handling disclosure, under the rig. */
.technical-disclosure { margin-top: var(--space-3xl); overflow: hidden; border: 1px solid var(--sg-line); border-radius: var(--rounded-lg); background: var(--sg-room-2); }
.technical-disclosure > summary { display: flex; align-items: center; min-height: var(--space-touch-target); padding: var(--space-xl) var(--space-2xl); cursor: pointer; color: var(--sg-faint); font-size: 13px; transition: color 160ms var(--sg-out); }
.technical-disclosure > summary:hover { color: var(--sg-ink); }
.buffer-card { border-top: 1px solid var(--marketing-border); }
.panel-bar { display: flex; justify-content: space-between; padding: var(--space-xl) var(--space-2xl); border-bottom: 1px solid var(--marketing-border); background: var(--marketing-surface-2); color: var(--marketing-muted); font: 400 12px/1.4 var(--font-mono); }
.buffer-card[data-capture='on'] #capture-state { color: var(--marketing-accent); }
.buffer-body { padding: var(--space-2xl); }
.buffer-heading { display: flex; justify-content: space-between; color: var(--marketing-muted); font: 400 12px/1.4 var(--font-mono); }
.buffer-track { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-lg); margin: var(--space-2xl) 0; padding: 0; list-style: none; }
.buffer-track li { display: grid; gap: var(--space-sm); padding-top: var(--space-xl); border-top: 2px solid var(--marketing-border); color: var(--marketing-muted); font-size: 11px; }
.buffer-track li:last-child { border-top-color: var(--marketing-accent); }
.buffer-track time { font: 400 11px/1.4 var(--font-mono); }
.buffer-track strong { color: var(--marketing-accent); }
.counter-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-lg); margin: 0; }
.counter { padding: var(--space-lg); border: 1px solid var(--marketing-border); border-radius: var(--rounded-sm); }
.counter dd { margin: 0; font: 600 18px/1.2 var(--font-marketing); font-variant-numeric: tabular-nums; }
.counter dt { margin-top: var(--space-xs); color: var(--marketing-muted); font: 400 10px/1.3 var(--font-mono); }
.destination { display: grid; gap: var(--space-lg); margin: var(--space-2xl) 0 0; padding-top: var(--space-xl); border-top: 1px solid var(--marketing-border); font-size: 12px; }
.destination > div { display: flex; justify-content: space-between; gap: var(--space-xl); }
.destination dt { color: var(--marketing-muted); }
.destination dd { margin: 0; text-align: right; }


/* Arrival motion: content rises once, 80ms apart. Reduced motion shows it as is. */
@media (prefers-reduced-motion: no-preference) {
  /* The rig itself never animates in: the replay player freezes CSS animations
     at their first frame, and a rig at opacity 0 would replay as a black page. */
  .demo-intro > * { animation: demo-rise 900ms var(--sg-expo) both; }
  .demo-intro > :nth-child(2) { animation-delay: 80ms; }
  .demo-intro > :nth-child(3) { animation-delay: 160ms; }
}
@keyframes demo-rise { from { opacity: 0; transform: translateY(16px); } }

@media (max-width: 1100px) {
  .bt-issue-grid { grid-template-columns: 1fr; }
  .bt-timeline { margin-top: 0; }
}
@media (max-width: 980px) {
  .bt { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .bt-side { flex-direction: row; flex-wrap: wrap; align-items: center; padding: var(--space-lg) var(--space-xl); border-right: 0; border-bottom: 1px solid var(--border); }
  .bt-brand { padding: 0 var(--space-lg) 0 0; }
  .bt-project { display: none; }
  .bt-nav.is-off { display: none; }
  .counter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #capture .rig-bar { flex-direction: column; align-items: stretch; }
  #capture .view-switch button { min-width: 0; }
  .rig-rec { justify-content: flex-start; }
  #start-demo { margin-left: auto; }
  .shop-bar { padding: 0 var(--space-3xl); }
  .shop-links { gap: 20px; }
  .shop-body { gap: var(--space-3xl); padding-inline: var(--space-3xl); }
  .shop-crumbs { padding-inline: var(--space-3xl); }
}
@media (max-width: 820px) {
  .shop-body { grid-template-columns: 1fr; }
  .shop-links { display: none; }
  .shop-menu { display: inline-flex; }
}

/* Phones: the rig runs edge to edge, the shop reads like a real mobile store
   and its pay bar stays at the bottom of the screen while the shop is in view. */
@media (max-width: 640px) {
  .demo-shell { padding-block: 32px var(--space-page); }
  .demo-intro { gap: var(--space-2xl); padding-bottom: var(--space-3xl); }
  .demo-shell .demo-intro h1 { font-size: 40px; line-height: 1; letter-spacing: -.035em; }
  .demo-lede { font-size: 16px; }
  .demo-steps { margin-top: var(--space-sm); }
  .demo-steps li { flex-direction: column; gap: var(--space-sm); padding-right: var(--space-lg); font-size: 13px; }
  #capture { --rig-pad: var(--space-xl); margin-inline: calc(50% - 50vw); padding: var(--space-xl) 0 var(--space-xl); border-width: 1px 0; border-radius: 0; }
  #capture .rig-bar, .rig-foot { padding-inline: var(--space-2xl); }
  #capture .rig-bar { gap: var(--space-xl); }
  #capture .view-switch button { min-height: 44px; padding: var(--space-md) var(--space-sm); text-align: center; }
  #capture .view-switch button span { font-size: 13px; }
  #capture .view-switch button small { display: none; }
  #capture .view-switch button em { top: var(--space-md); right: var(--space-md); gap: 0; font-size: 0; }
  .rig-screen, .face { border-radius: 0; }
  .face-agent { box-shadow: none; border-block: 1px solid var(--sg-line); }
  .term-top, .term-banner { padding-inline: var(--space-2xl); }
  .term-log { padding: 24px var(--space-2xl) 32px; font-size: 12px; gap: 12px; }
  .face-agent { min-height: 480px; }

  .browser-bar { padding: var(--space-md) var(--space-2xl); }
  .browser-bar i { display: none; }
  .browser-url { padding-inline: var(--space-xl); font-size: 11px; }
  .shop-promo { font-size: 11px; }
  .shop-bar { grid-template-columns: 44px 1fr 44px auto; min-height: 56px; padding: 0 var(--space-lg); }
  .shop-menu { display: grid; place-items: center; width: 44px; height: 44px; }
  .shop-name { grid-column: 2 / 4; justify-self: center; font-size: 24px; }
  .shop-icons { grid-column: 4; gap: 0; }
  .shop-icons > * { display: grid; place-items: center; width: 44px; height: 44px; }
  .shop-icons > svg { box-sizing: border-box; padding: 12px; }
  .shop-icon-account { display: none !important; }
  .shop-cart b { top: 6px; right: 4px; }
  .shop-crumbs { padding: var(--space-xl) var(--space-2xl) 0; }
  /* Flex, not grid, so the sticky pay bar can travel the whole shop. */
  .shop-body { display: flex; flex-direction: column; align-items: stretch; gap: 20px; padding: var(--space-xl) var(--space-2xl) 0; }
  .shop-gallery { gap: var(--space-lg); }
  .shop-thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-lg); }
  .shop-order { display: contents; }
  .shop-variant { margin-top: -14px !important; }
  .shop .shop-order h2 { font-size: 24px; }
  .shop-paybar { position: sticky; bottom: 0; z-index: 3; flex-flow: row wrap; align-items: center; gap: var(--space-xl) var(--space-2xl); margin-inline: calc(var(--space-2xl) * -1); padding: var(--space-xl) var(--space-2xl) calc(var(--space-xl) + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--js-line); background: var(--js-paper); }
  .shop-paybar-total { display: grid; gap: var(--space-xs); color: var(--js-ink); }
  .shop-paybar-total span { color: var(--js-mute); font-size: 11px; }
  .shop-paybar-total b { font-size: 16px; font-weight: 600; }
  #checkout .shop-pay { flex: 1; width: auto; }
  /* The BugTape button sits bottom right while capture runs; leave it its place. */
  #capture[data-capture='on'] .shop-paybar { padding-right: 84px; }
  .shop-note:not(:empty) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  #capture[data-order='failed'] .shop-note { position: static; flex-basis: 100%; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; }
  .shop-cue { flex-basis: 100%; justify-content: flex-start; font-size: 12px; }
  .shop-trust { justify-content: flex-start; padding: var(--space-lg) 0 var(--space-3xl); }
  .shop-details, .shop-total { padding-top: var(--space-xl); }

  .bt-main { padding: var(--space-xl); }
  #capture[data-screen='inbox'] .bt-issue, #capture[data-screen='issue'] .bt-inbox, #capture:not([data-view='console']) .bt-issue { inset: 0 var(--space-xl); }
  .bt-tr { grid-template-columns: minmax(0, 1fr) 72px; }
  .bt-tr > :nth-child(3), .bt-tr > :nth-child(4) { display: none; }
  .evidence-tabs { gap: var(--space-xl); overflow-x: auto; }
  .buffer-track li:nth-child(2) { display: none; }
  .buffer-track { grid-template-columns: repeat(3, 1fr); }
  .console-line { grid-template-columns: 1fr; gap: 0; }
  .report-actions { align-items: flex-start; flex-direction: column; }
  .rig-foot { flex-direction: column; }
}
@media (max-width: 370px) {
  .demo-shell .demo-intro h1 { font-size: 32px; }
  #capture .view-switch button span { font-size: 12px; }
  .shop-paybar-total { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .face, #capture .view-switch::before, .demo-steps li::after { transition: none; }
  #capture[data-view] .face { transform: none; }
  .term-log[data-agent='ready'] li, .term-log[data-agent='ready'] .t-caret, .t-wait::before, #issue-timeline li, .bt-agent li::before { animation: none !important; }
  #capture[data-order='failed'] .shop-note, #capture[data-arrival='1'] .bt-tr.is-new, #capture[data-capture='on'] .rec-dot::after { animation: none; }
  #capture[data-order='placing'] .shop-pay::after { animation-duration: 2s; }
}