#main.is-showcase .showcase-scene { padding:72px var(--gutter); border:0; }
#main.is-showcase .showcase-scene:nth-of-type(even) { background:var(--bg); }
#main.is-showcase .showcase-scene:nth-of-type(odd) { background:var(--chapter-tone); }
#main .showcase-inner { width:100%; max-width:1040px; margin:auto; }
#main .showcase-heading { text-align:center; }
#main .showcase-index { font:11px/1.6 ui-monospace,SFMono-Regular,Menlo,sans-serif; color:var(--muted); margin:0 0 22px; }
#main .showcase-heading h2 { font-size:44px; line-height:1.3; font-weight:550; margin:0; }
#main .showcase-heading h2>span { display:inline; }
#main .showcase-chain { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); max-width:700px; margin:0 auto; position:relative; }
#main .showcase-chain:before { content:""; position:absolute; height:1px; background:var(--line); left:16.66%; right:16.66%; top:15px; }
#main .showcase-chain>div { position:relative; display:flex; flex-direction:column; align-items:center; gap:20px; }
#main .showcase-node { display:block; width:31px; height:31px; border:1px solid var(--blue); border-radius:50%; background:var(--bg); z-index:1; position:relative; }
#main .showcase-node:after { content:""; position:absolute; width:5px; height:5px; background:var(--blue); left:12px; top:12px; }
#main .node-1 { border-color:var(--green); }#main .node-1:after { background:var(--green); }
#main .node-2 { border-color:var(--red); }#main .node-2:after { background:var(--red); }
#main .showcase-chain strong { font-size:22px; line-height:1.4; font-weight:500; }
#main .showcase-insight { color:var(--muted); font-size:15px; line-height:1.8; margin:32px 0 20px; }
#main .showcase-scenario-stage { max-width:760px; margin:36px auto 0; }
#main .showcase-profit { text-align:center; }
#main .showcase-profit>span { font-size:11px; color:var(--muted); }
#main .showcase-profit>div { margin-top:16px; display:flex; justify-content:center; align-items:baseline; gap:12px; }
#main .showcase-profit strong { font-size:98px; line-height:1.1; font-weight:500; font-variant-numeric:tabular-nums; }
#main .showcase-profit>div>span { font-size:14px; color:var(--muted); }
#main .showcase-profit p { font-size:13px; color:var(--muted); margin:12px 0 24px; }
#main .showcase-comparison { display:grid; gap:12px; max-width:440px; margin:0 auto 32px; }
#main .showcase-comparison>div { display:flex; align-items:center; gap:14px; height:22px; }
#main .showcase-comparison i { height:6px; background:var(--blue); display:block; width:80%; transition:width .12s; }
#main .showcase-baseline i { background:var(--muted); opacity:.45; }
#main .showcase-comparison span { font-size:10px; color:var(--muted); white-space:nowrap; }
#main .showcase-controls { display:grid; grid-template-columns:1fr 1fr; gap:48px; }
#main .showcase-controls label>span { display:flex; justify-content:space-between; font-size:14px; gap:12px; }
#main .showcase-controls output { color:var(--blue); font-variant-numeric:tabular-nums; }
#main .showcase-controls input { width:100%; height:32px; accent-color:var(--blue); margin:10px 0 0; cursor:ew-resize; }
#main .showcase-history-stage { position:relative; max-width:670px; margin:50px auto 0; padding-left:22px; }
#main .showcase-record-spine { position:absolute; left:0; top:12px; bottom:12px; width:22px; display:flex; gap:5px; }
#main .showcase-record-spine i { width:1px; height:100%; background:var(--line); }
#main .showcase-record { border-block:1px solid var(--line); padding:28px 30px; background:var(--bg); }
#main .showcase-record-meta { display:flex; justify-content:space-between; gap:16px; font:10px/1.5 ui-monospace,SFMono-Regular,Menlo,sans-serif; color:var(--muted); }
#main .showcase-record h3 { font-size:29px; font-weight:500; line-height:1.5; margin:24px 0; }
#main .showcase-record-line { display:flex; justify-content:space-between; align-items:center; gap:24px; padding-block:18px; border-block:1px solid var(--line); font-size:13px; line-height:1.6; }
#main .showcase-record-line>span { color:var(--muted); flex-shrink:0; }
#main .showcase-record-line strong { font-weight:400; text-align:right; }
#main .showcase-record-next { margin:24px 0; border-left:2px solid var(--green); padding-left:18px; }
#main .showcase-record-next span { font-size:10px; color:var(--muted); }
#main .showcase-record-next p { font-size:18px; line-height:1.6; margin:10px 0 0; overflow-wrap:anywhere; }
#main .showcase-signature { text-align:center; position:relative; max-width:840px; margin:65px auto 45px; }
#main .showcase-signature-word { position:relative; z-index:1; display:inline-block; font-size:82px; font-weight:550; line-height:1.2; }
#main .showcase-signature-word::before { content:attr(data-label); position:absolute; inset:0; z-index:-1; color:transparent; -webkit-text-fill-color:transparent; background:linear-gradient(to bottom,var(--red) 0 var(--signature-red-stop,44%),var(--green) var(--signature-red-stop,44%) var(--signature-green-stop,72%),var(--blue) var(--signature-green-stop,72%) 100%); -webkit-background-clip:text; background-clip:text; opacity:0; white-space:nowrap; pointer-events:none; filter:blur(15px); transform:scale(1.035); transition:opacity 500ms ease; }
#main .showcase-signature-word::after { content:attr(data-label); position:absolute; inset:0; display:block; color:transparent; -webkit-text-fill-color:transparent; background:linear-gradient(to bottom,var(--red) 0 var(--signature-red-stop,44%),var(--green) var(--signature-red-stop,44%) var(--signature-green-stop,72%),var(--blue) var(--signature-green-stop,72%) 100%); -webkit-background-clip:text; background-clip:text; opacity:0; white-space:nowrap; pointer-events:none; transition:opacity 600ms cubic-bezier(.2,.7,.2,1); }
#main .showcase-signature[data-complete="true"] .showcase-signature-word::before { opacity:.82; animation:signature-ambient-glow 2.8s ease-in-out infinite alternate; }
#main .showcase-signature[data-complete="true"] .showcase-signature-word::after { opacity:1; }
@keyframes signature-ambient-glow { from { filter:blur(13px); opacity:.58; } to { filter:blur(21px); opacity:.9; } }
#main .showcase-signature-lines { height:22px; margin-top:36px; }
#main .signature-flight { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
#main .signature-flight path { fill:none; stroke-width:2.2; stroke-linecap:round; vector-effect:non-scaling-stroke; pointer-events:stroke; filter:drop-shadow(0 0 7px var(--flight-glow)) drop-shadow(0 0 20px color-mix(in srgb,var(--flight-glow) 78%,transparent)); }
#main .signature-flight .signature-flight-head { stroke-width:3; pointer-events:none; filter:drop-shadow(0 0 3px #fff) drop-shadow(0 0 9px var(--flight-glow)) drop-shadow(0 0 22px color-mix(in srgb,var(--flight-glow) 94%,transparent)) drop-shadow(0 0 40px color-mix(in srgb,var(--flight-glow) 58%,transparent)); }
#main .showcase-values { display:flex; justify-content:center; gap:38px; }
#main .showcase-values p { display:flex; align-items:center; gap:9px; font-size:14px; line-height:1.5; }
#main .showcase-values i { width:4px; height:4px; background:var(--blue); }
#main .showcase-values p:nth-child(2) i { background:var(--green); }
#main .showcase-values p:nth-child(3) i { background:var(--red); }
#main [data-showcase="why"] .showcase-values i { width:7px; height:7px; flex:none; }
#main [data-showcase="why"] { --blue:#4f83ff; --green:#36c982; --red:#ff525d; }
#main .showcase-scene [data-open-study]:focus-visible,#main .showcase-scene button:focus-visible { outline:2px solid var(--blue); outline-offset:4px; }
#main.is-showcase .hero-edition,#main.is-showcase .hero-bottom>span { display:none; }
#product-lab { width:100%; height:100dvh; max-width:none; max-height:none; margin:0; padding:0; border:0; border-radius:0; background:var(--bg); color:var(--ink); }
#product-lab[open] { display:grid; grid-template-rows:72px 48px minmax(0,1fr); }
#product-lab::backdrop { background:var(--bg); }
html:has(#product-lab[open]) { overflow:hidden; scroll-snap-type:none; }
.product-lab-toolbar { display:flex; align-items:center; gap:20px; padding:0 32px; border-bottom:1px solid var(--line); }
.product-lab-toolbar h2 { margin:0; font-size:18px; font-weight:550; }
.product-lab-toolbar>span { color:var(--muted); font-size:11px; }
.product-lab-toolbar>button { margin-left:auto; display:grid; place-items:center; width:40px; height:40px; padding:0; background:none; color:var(--ink); border:0; cursor:pointer; }
.product-lab-toolbar svg { width:24px; height:24px; transform:rotate(45deg); }
.product-lab-nav { display:flex; gap:28px; padding:0 32px; border-bottom:1px solid var(--line); }
.product-lab-nav button { background:none; color:var(--muted); border:0; border-bottom:2px solid transparent; font:inherit; font-size:13px; cursor:pointer; }
.product-lab-nav button[aria-pressed=true] { color:var(--ink); border-bottom-color:var(--blue); }
.product-lab-scroll { overflow-y:auto; min-height:0; overscroll-behavior:contain; }
#main .lab-page { padding:48px var(--gutter); }
#main .lab-page .lab-head h2 { font-size:30px; }
#main .lab-page .lab-head .lead { font-size:14px; }
@media(max-width:734px) {
  #main.is-showcase .showcase-scene { padding:56px 24px; }
  #main .showcase-heading h2 { font-size:34px; }
  #main .showcase-index { font-size:10px; margin-bottom:18px; }
  #main .showcase-chain strong { font-size:16px; }
  #main .showcase-insight { font-size:14px; margin-top:26px; }
  #main .showcase-profit strong { font-size:78px; }
  #main .showcase-profit>span { font-size:10px; }
  #main .showcase-controls { gap:28px; }
  #main .showcase-controls label>span { font-size:12px; }
  #main .showcase-history-stage { padding-left:16px; margin-top:34px; }
  #main .showcase-record { padding:24px 18px; }
  #main .showcase-record h3 { font-size:24px; }
  #main .showcase-record-line { flex-direction:column; align-items:flex-start; gap:8px; }
  #main .showcase-record-line strong { text-align:left; }
  #main .showcase-record-next p { font-size:16px; }
  #main .showcase-record-meta { font-size:9px; }
  #main .showcase-signature { margin-block:50px 32px; }
  #main .showcase-signature-word { font-size:48px; }
  #main .showcase-values { flex-direction:column; align-items:center; gap:16px; }
  #main .showcase-values p { font-size:14px; }
  .product-lab-toolbar { padding-inline:20px; gap:12px; }
  .product-lab-toolbar>span { font-size:9px; }
  .product-lab-toolbar h2 { font-size:16px; }
  .product-lab-nav { padding-inline:24px; gap:24px; }
  #main .lab-page { padding:32px 24px; }
}
@media(prefers-reduced-motion:reduce) { #main .showcase-comparison i { transition:none; } }

#main .prototype-pair { position:relative; width:100%; margin:24px auto 0; padding-right:58px; }
#main .prototype-device { position:relative; margin:0; isolation:isolate; }
#main .prototype-hardware { display:block; position:relative; width:100%; height:auto; z-index:2; pointer-events:none; }
#main .prototype-display { position:absolute; background:var(--bg); z-index:1; overflow:hidden; }
#main .prototype-display>img { display:block; width:100%; height:100%; object-fit:fill; }
#main .prototype-desktop { width:100%; aspect-ratio:1360/824; }
#main .prototype-desktop .prototype-display { left:9.55%; top:2.17%; width:81.03%; height:88.08%; border-radius:2.2% 2.2% 0 0 / 3.35% 3.35% 0 0; }
#main .prototype-desktop .prototype-display:after { content:''; position:absolute; top:0; left:45.5%; width:9%; height:4.2%; border-radius:0 0 7px 7px; background:#050505; }
#main .prototype-mobile { width:220px; aspect-ratio:432/886; }
#main .prototype-mobile .prototype-display { left:4.405%; top:1.882%; width:91.113%; height:96.235%; border-radius:12% / 5.7%; }
#main .prototype-mobile .prototype-display:after { content:''; position:absolute; top:.8%; left:36%; width:28%; height:3.1%; border-radius:20px; background:#050505; }
#main .prototype-pair>.prototype-mobile { position:absolute; width:21%; right:0; bottom:-3%; z-index:3; }
#main .prototype-history-layout { display:grid; grid-template-columns:minmax(0,1fr) 240px; align-items:center; gap:64px; max-width:900px; margin:40px auto 0; }
#main .prototype-history-layout .showcase-history-stage { margin:0; }
#main .prototype-history-layout>.prototype-mobile { width:240px; }
#main .showcase-device-composition { flex:1 1 560px; width:min(100%,860px); min-width:0; margin:0; }
#main .prototype-history-laptop { position:relative; z-index:1; width:100%; }
#main .prototype-history-laptop .showcase-record-screens { position:absolute; inset:0; grid-template-rows:minmax(0,1fr); overflow:hidden; }
#main .prototype-history-laptop .showcase-record-screen { display:flex; flex-direction:column; min-height:0; border:0; box-shadow:none; }
#main .prototype-history-laptop .record-screen-bar { flex:none; padding:12px 20px; }
#main .prototype-history-laptop .record-screen-content { flex:1; min-height:0; padding:clamp(18px,2.6vw,30px); }
#main .prototype-history-laptop .record-screen-kicker { margin-bottom:12px; }
#main .prototype-history-laptop .record-screen-question { margin:7px 0 18px; }
#main .prototype-history-laptop .record-screen-row { padding:11px 0; }
#main .prototype-history-laptop .record-screen-next { margin-top:8px; padding:11px 14px; }
#main .prototype-history-laptop .record-screen-footer { flex:none; padding:10px 20px; }
#main .prototype-history-phone { filter:drop-shadow(0 18px 28px rgba(0,0,0,.2)); }
#main .prototype-history-phone .prototype-display { border-radius:12% / 5.7%; }
#main .prototype-history-phone .prototype-display:after { content:none; }
#main .prototype-history-phone .showcase-record-screens { position:absolute; inset:0; grid-template-rows:minmax(100%,1fr); overflow-y:auto; scrollbar-width:none; }
#main .prototype-history-phone .showcase-record-screens::-webkit-scrollbar { display:none; }
#main .prototype-history-phone .showcase-record-screen { display:flex; flex-direction:column; min-height:100%; border:0; background:var(--bg); box-shadow:none; }
#main .prototype-history-phone .record-screen-bar { flex:none; min-height:48px; padding:25px 13px 9px; font-size:8px; }
#main .prototype-history-phone .record-screen-brand { gap:4px; font-size:8px; }
#main .prototype-history-phone .record-screen-brand img { width:10px; height:10px; }
#main .prototype-history-phone .record-screen-brand small { margin-left:-3px; font-size:6px; }
#main .prototype-history-phone .record-screen-content { flex:1; padding:16px 14px 18px; }
#main .prototype-history-phone .record-screen-kicker { gap:6px; margin-bottom:13px; font-size:8px; }
#main .prototype-history-phone .record-screen-kicker i { width:6px; height:6px; }
#main .prototype-history-phone .record-screen-content h3 { font-size:20px; line-height:1.35; }
#main .prototype-history-phone .record-screen-question { margin:7px 0 17px; font-size:11px; line-height:1.55; }
#main .prototype-history-phone .record-screen-row { grid-template-columns:1fr; gap:5px; padding:10px 0; }
#main .prototype-history-phone .record-screen-row>span,
#main .prototype-history-phone .record-screen-next>span { font-size:9px; }
#main .prototype-history-phone .record-screen-row p,
#main .prototype-history-phone .record-screen-next p { font-size:11px; line-height:1.5; }
#main .prototype-history-phone .record-screen-next { margin-top:8px; padding:10px 11px; }
#main .prototype-history-phone .record-screen-next p { margin-top:5px; }
#main .prototype-history-phone .record-screen-footer { flex:none; gap:6px; padding:9px 12px 14px; font-size:7px; }
#main .prototype-history-phone .record-screen-footer span:last-child { text-align:right; }
@media(max-width:734px) {
 #main .prototype-pair { padding:0; margin-top:26px; }
 #main .prototype-pair>.prototype-desktop { display:none; }
 #main .prototype-pair>.prototype-mobile { position:relative; width:280px; max-width:100%; bottom:auto; margin:0 auto; }
 #main .prototype-history-layout { grid-template-columns:1fr; margin-top:30px; }
 #main .prototype-history-layout .showcase-history-stage { display:none; }
 #main .prototype-history-layout>.prototype-mobile { width:280px; max-width:100%; margin:auto; }
}

#main.is-showcase .closing { min-height:0; padding-block:clamp(72px,14svh,140px) 24px; }
#main.is-showcase+.footer { display:flex; flex-direction:column; justify-content:flex-end; padding-top:48px; min-height:calc(100svh - var(--site-header-height,65px) - var(--product-closing-height,280px)); background:#fff; }
:root[data-theme=dark] #main.is-showcase+.footer { background:#080809; }
#main.is-showcase+.footer :is(.footer-brand,.footer-columns,.footer-social,.footer-bottom) { width:100%; }
#main.is-showcase+.footer .footer-brand { align-items:center; padding-bottom:24px; }
#main.is-showcase+.footer .footer-brand .brand { height:48px; overflow:hidden; }
#main.is-showcase+.footer .footer-columns { padding-bottom:28px; }
#main.is-showcase+.footer .footer-social { padding-bottom:24px; }
@media(max-width:734px) {
 #main.is-showcase .closing { padding-block:64px 24px; }
 #main.is-showcase+.footer { padding-top:48px; }
 #main.is-showcase+.footer .footer-brand { align-items:flex-start; padding-bottom:20px; }
 #main.is-showcase+.footer .footer-columns { gap:24px; padding-bottom:24px; }
}
@media(min-width:735px) {
 html[data-chapter-snap] { scroll-snap-type:y mandatory; scroll-padding-top:var(--site-header-height,65px); }
 html[data-chapter-snap] #main.is-showcase>.product-hero {
   box-sizing:border-box;
   height:calc(100svh - var(--site-header-height,65px));
   min-height:calc(100svh - var(--site-header-height,65px));
   scroll-snap-align:start;
   scroll-snap-stop:always;
 }
 html[data-chapter-snap] #main.is-showcase .showcase-scene {
   box-sizing:border-box;
   display:grid;
   align-items:center;
   min-height:calc(100svh - var(--site-header-height,65px));
   padding-block:clamp(48px,6svh,80px);
   scroll-snap-align:start;
   scroll-snap-stop:always;
 }
 html[data-chapter-snap] #main .showcase-heading h2 { font-size:clamp(48px,4vw,58px); }
 html[data-chapter-snap] #main .showcase-chain strong { font-size:24px; }
 html[data-chapter-snap] #main .prototype-history-layout { grid-template-columns:minmax(0,1fr) 280px; gap:clamp(48px,5vw,80px); }
 html[data-chapter-snap] #main .prototype-history-layout>.prototype-mobile { width:min(280px,calc((100svh - var(--site-header-height,65px) - 240px)*.4876)); }
}
@media(prefers-reduced-motion:reduce) { html[data-chapter-snap] { scroll-snap-type:none; } }

#main [data-showcase="history"] .showcase-inner { max-width:1400px; }
#main .prototype-history-layout { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:48px; max-width:none; margin:54px auto 0; }
#main .showcase-deck-column { min-width:0; flex:1 1 260px; max-width:390px; }
#main .showcase-deck { position:relative; width:min(100%,390px); min-height:360px; aspect-ratio:1.05; margin:auto; perspective:900px; touch-action:pan-y; }
#main .showcase-deck-card { position:absolute; inset:0; display:flex; flex-direction:column; align-items:stretch; text-align:left; padding:clamp(22px,3vw,34px); border:1px solid color-mix(in srgb,var(--deck-tone) 36%,var(--line)); background:var(--bg); color:var(--ink); box-shadow:0 18px 48px rgba(0,0,0,.09); transform:translate(calc(var(--deck-x) + var(--deck-drag-x,0px)),var(--deck-y)) rotate(var(--deck-rotation)); transform-origin:center; border-radius:3px; overflow:hidden; }
#main .showcase-deck-card.is-front { z-index:var(--deck-layer); cursor:grab; transition:transform .24s ease,opacity .24s ease,box-shadow .24s ease; }
#main .showcase-deck-card.is-front:active,#main .showcase-deck-card.is-front.is-dragging { cursor:grabbing; transition:none; box-shadow:0 26px 58px rgba(0,0,0,.16); }
#main .showcase-deck-card { z-index:var(--deck-layer); }
#main .showcase-deck-card.is-preview-next { z-index:var(--deck-layer); transform:translate(var(--peek-x),var(--peek-y)) rotate(var(--peek-rotation)); transition:transform .08s linear; }
#main .showcase-deck-card.is-front.is-previewing { box-shadow:0 25px 56px rgba(0,0,0,.15); }
#main .showcase-deck-card.is-dragging { transform:translate(var(--deck-drag-x,0px),0) rotate(var(--deck-drag-angle,0deg)); }
#main .showcase-deck-card.is-front .deck-peek-number { display:none; }
#main .deck-peek-number { position:absolute; top:8px; right:5px; display:grid; place-items:center; width:21px; height:21px; border:1px solid color-mix(in srgb,var(--deck-tone) 48%,var(--line)); background:var(--bg); color:var(--deck-tone); font:10px/1 ui-monospace,SFMono-Regular,Menlo,monospace; font-variant-numeric:tabular-nums; }
#main .deck-card-top { display:flex; justify-content:space-between; gap:12px; font:10px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace; color:var(--muted); }
#main .deck-card-rule { display:block; height:2px; width:42px; background:var(--deck-tone); margin:clamp(28px,5vw,56px) 0 18px; }
#main .deck-card-label { color:var(--muted); font-size:12px; margin-bottom:10px; }
#main .showcase-deck-card strong { max-width:16em; font-size:clamp(19px,2.2vw,27px); line-height:1.5; font-weight:520; }
#main .deck-card-bottom { display:flex; align-items:center; gap:9px; margin-top:auto; padding-top:24px; color:var(--muted); font:9px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace; }
#main .deck-card-bottom i,#main .record-screen-kicker i { width:7px; height:7px; flex:none; background:var(--deck-tone); border-radius:50%; }
#main .showcase-deck-controls { display:flex; align-items:center; justify-content:space-between; width:min(100%,390px); margin:26px auto 0; }
#main .showcase-deck-controls>span { color:var(--muted); font:11px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace; font-variant-numeric:tabular-nums; }
#main .showcase-deck-controls button { display:flex; align-items:center; gap:10px; padding:8px 0; border:0; border-bottom:1px solid var(--line); background:transparent; color:var(--ink); font:inherit; font-size:13px; line-height:1.5; cursor:pointer; }
#main .showcase-deck-controls svg { width:15px; height:15px; fill:none; stroke:currentColor; }
#main .showcase-deck-hint { width:min(100%,390px); margin:10px auto 0; color:var(--muted); font-size:11px; }
#main .showcase-record-screens { display:grid; min-width:0; }
#main .showcase-record-screen { grid-area:1/1; min-width:0; border:1px solid var(--line); background:var(--bg); box-shadow:0 20px 60px rgba(0,0,0,.045); transition:opacity .2s ease,transform .2s ease,visibility .2s; }
#main .showcase-record-screen.is-next { visibility:hidden; opacity:0; transform:translateY(8px); pointer-events:none; }
#main .showcase-record-screens.is-previewing .showcase-record-screen.is-current { visibility:hidden; opacity:0; transform:translateY(-8px); }
#main .showcase-record-screens.is-previewing .showcase-record-screen.is-next { visibility:visible; opacity:1; transform:translateY(0); }
#main .record-screen-bar,#main .record-screen-footer { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 20px; color:var(--muted); font:9px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace; }
#main .record-screen-bar { border-bottom:1px solid var(--line); }
#main .record-screen-brand { display:flex; align-items:center; gap:7px; color:var(--ink); font-family:inherit; font-size:13px; font-weight:600; line-height:1; letter-spacing:0; }
#main .record-screen-brand img { display:block; width:15px; height:15px; object-fit:cover; }
#main .record-screen-brand small { margin-left:-5px; color:var(--muted); font-size:9px; font-weight:400; }
:root[data-theme="dark"] #main .record-screen-brand img { filter:invert(1); mix-blend-mode:screen; }
#main .record-screen-content { padding:clamp(22px,3.5vw,38px); }
#main .record-screen-kicker { display:flex; align-items:center; gap:9px; margin:0 0 20px; color:var(--muted); font:10px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace; }
#main .record-screen-content h3 { margin:0; font-size:clamp(21px,2.5vw,30px); line-height:1.4; font-weight:560; }
#main .record-screen-question { margin:10px 0 30px; color:var(--muted); font-size:14px; line-height:1.75; }
#main .record-screen-row { display:grid; grid-template-columns:minmax(105px,.65fr) minmax(0,1fr); gap:18px; padding:16px 0; border-top:1px solid var(--line); }
#main .record-screen-row>span,#main .record-screen-next>span { color:var(--muted); font-size:11px; }
#main .record-screen-row p,#main .record-screen-next p { margin:0; font-size:13px; line-height:1.7; }
#main .record-screen-next { margin-top:10px; padding:16px 18px; border-left:2px solid var(--deck-tone,var(--blue)); background:color-mix(in srgb,var(--soft) 55%,transparent); }
#main .record-screen-next p { margin-top:8px; }
#main .record-screen-footer { border-top:1px solid var(--line); font-size:8px; }
@media(max-width:734px) {
 #main .prototype-history-layout { grid-template-columns:minmax(0,1fr); gap:42px; margin-top:36px; }
 #main .showcase-deck { width:min(100%,370px); }
 #main .showcase-record-screen { width:min(100%,520px); margin:auto; }
 #main .record-screen-content { padding:24px 20px; }
 #main .record-screen-row { grid-template-columns:minmax(92px,.55fr) minmax(0,1fr); gap:14px; }
}
@media(max-width:374px) {
 #main .showcase-deck-card { padding:19px; }
 #main .showcase-deck-card strong { font-size:18px; }
 #main .deck-card-bottom { font-size:8px; }
 #main .record-screen-bar,#main .record-screen-footer { padding-inline:14px; }
}
@media(prefers-reduced-motion:reduce) { #main .showcase-deck-card.is-front,#main .showcase-deck-card.is-preview-next,#main .showcase-record-screen { transition:none; } }

@media(min-width:735px) {
 html[data-chapter-snap] #main.is-showcase [data-showcase="history"] .prototype-history-layout {
   display:grid;
   grid-template-columns:minmax(280px,.72fr) minmax(0,1.28fr);
   gap:clamp(24px,3vw,48px);
   width:100%;
   max-width:none;
   margin-top:clamp(24px,4svh,40px);
 }
 html[data-chapter-snap] #main.is-showcase [data-showcase="history"] .showcase-device-composition {
   width:100% !important;
   min-width:0;
 }
}