/* The same paper, ink, cobalt, and pixels. A quieter rhythm between them. */
section[id], div[id="cli"], div[id="why"] { scroll-margin-top: 92px; }
button { -webkit-tap-highlight-color: transparent; }
nav.top .mobile-links, .nav-label-short { display:none; }
.feature-strip { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); padding-block: 36px; gap: 28px; border-bottom: 1px solid var(--line); }
.feature-strip article { display: flex; align-items: center; gap: 16px; }
.feature-strip canvas { width: 28px; height: 28px; flex: none; image-rendering: pixelated; }
.feature-strip strong, .feature-strip span { display: block; }
.feature-strip strong { font-size: 13px; font-weight: 500; }
.feature-strip span { font-size: 12px; color: var(--muted); margin-top: 3px; }
.quickstart { display: grid; grid-template-columns: .85fr 1.15fr; gap: 64px; align-items: center; padding-block: 48px 36px; }
.quickstart-copy { display: grid; gap: 12px; }
.quickstart-copy .eyebrow { font-size: 10px; }
.quickstart-copy h3 { font-size: 25px; }
.quickstart-copy p { font-size: 14px; color: var(--muted); max-width: 29em; }
.text-link { display: inline-flex; align-items: center; gap: 16px; width: fit-content; color: var(--ink); font: 12px/1.5 var(--mono); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 5px; }
.text-link span { display: inline-block; transition: transform .25s ease; }
.text-link:hover { text-decoration-color: var(--blue); }
.text-link:hover span { transform: translate(2px,-2px); }
.quick-code { min-width: 0; border: 1px solid var(--line); background: var(--card); }
.quick-code-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 18px; border-bottom: 1px solid var(--line); font: 10px/1.4 var(--mono); color: var(--muted); }
.quick-code pre { margin: 0; padding: 18px; font: 12px/1.9 var(--mono); overflow-x: auto; }
.code-comment { color: var(--muted); }
.quiet-button { background: none; color: inherit; border: 0; padding: 5px; font: 10px/1.3 var(--mono); cursor: pointer; white-space: nowrap; }
.quiet-button:hover { color: var(--blue); }

/* Instant: a small workspace physically becomes a full computer. */
.section-index { display:flex; justify-content:space-between; gap:16px; border-top:1px solid var(--line); padding-top:16px; margin-bottom:42px; color:var(--muted); font:10px/1.4 var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.story-heading { display:grid; justify-items:center; text-align:center; gap:18px; margin:0 auto 42px; }
.story-heading h2 { font-size:clamp(35px,4.4vw,55px); line-height:1.1; }
.story-heading p { color:var(--muted); font-size:16px; max-width:34em; }
.instant-story { padding-top:70px !important; padding-bottom:80px !important; }
.instant-theatre { border:1px solid var(--line); background:var(--card); position:relative; overflow:hidden; box-shadow:0 25px 70px -55px #3452a944; }
.theatre-bar { height:46px; padding:0 22px; display:flex; justify-content:space-between; align-items:center; gap:16px; border-bottom:1px solid var(--line); color:var(--muted); font:11px/1 var(--mono); }
.theatre-bar > span { display:flex; align-items:center; gap:10px; }
.theatre-note { color:var(--muted); opacity:.65; font-size:10px; }
.status-dot { display:inline-block; width:5px; height:5px; background:var(--blue); }
.instant-scene { height:440px; position:relative; overflow:hidden; }
.scene-grid { position:absolute; inset:0; background-image:radial-gradient(var(--line) 1px,transparent 1px); background-size:16px 16px; mask-image:radial-gradient(ellipse at center,#000,transparent 80%); }
.task-ticket { position:absolute; top:58px; left:6%; width:165px; padding:18px; border:1px solid var(--line); background:var(--paper); transform:rotate(-4deg); box-shadow:4px 4px 0 var(--line); z-index:2; display:grid; gap:8px; transition:transform .8s cubic-bezier(.16,1,.3,1),opacity .8s; }
.ticket-title { text-transform:uppercase; color:var(--muted); font:9px/1 var(--mono); letter-spacing:.08em; }
.task-ticket strong { font-size:13px; font-weight:500; }
.task-ticket > span:not(.ticket-title) { font-size:11px; color:var(--muted); }
.task-ticket i { font:24px var(--mono); color:var(--blue); font-style:normal; position:absolute; right:15px; bottom:-27px; transform:rotate(4deg); }
.instant-device { position:absolute; top:58px; left:50%; width:300px; height:172px; transform:translateX(-50%); border:1px solid var(--blue); background:var(--card); box-shadow:7px 7px 0 var(--blue-soft); z-index:3; transition:width 1s cubic-bezier(.16,1,.3,1),height 1s cubic-bezier(.16,1,.3,1),top 1s cubic-bezier(.16,1,.3,1),box-shadow .7s; }
.device-bar { height:33px; padding:0 12px; display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--line); font:9px/1 var(--mono); color:var(--muted); }
.device-dots { display:flex; gap:4px; }
.device-dots i { display:block; width:4px; height:4px; background:var(--line); }
#device-mode { margin-left:auto; color:var(--blue); font-size:9px; letter-spacing:.05em; }
.device-body { position:relative; padding:20px; overflow:hidden; height:calc(100% - 33px); }
.device-command { font:12px/1.8 var(--mono); white-space:nowrap; }
.device-command > span { color:var(--blue); }
.device-output { margin-top:10px; color:var(--muted); font:11px/1.6 var(--mono); }
.native-alert { position:absolute; left:20px; bottom:18px; color:var(--blue); background:var(--blue-soft); padding:8px 10px; font:10px var(--mono); opacity:0; transform:translateY(8px); transition:opacity .3s,transform .4s; white-space:nowrap; }
.native-alert > span { margin-right:8px; }
.device-result { position:absolute; left:20px; right:20px; bottom:20px; display:flex; align-items:center; gap:13px; opacity:0; transform:translateY(12px); transition:opacity .65s,transform .65s; }
.result-image { width:44px; height:35px; border:1px solid var(--blue); background:var(--blue-soft); position:relative; overflow:hidden; }
.result-image::before { content:''; width:28px; height:28px; background:var(--blue); opacity:.7; position:absolute; bottom:-13px; left:0; transform:rotate(45deg); }
.result-image::after { content:''; width:21px; height:21px; background:var(--blue); opacity:.35; position:absolute; right:-3px; bottom:-8px; transform:rotate(45deg); }
.result-image i { position:absolute; width:5px; height:5px; right:8px; top:6px; background:var(--blue); }
.device-result > div { display:grid; gap:4px; }
.device-result strong { font:12px var(--mono); font-weight:400; }
.device-result div span { color:var(--muted); font-size:11px; }
.device-result > b { margin-left:auto; color:var(--ok); font:18px var(--mono); }
.device-foot { position:absolute; width:80px; height:5px; bottom:-20px; left:50%; transform:translateX(-50%); background:var(--ink); opacity:0; transition:opacity .5s .3s; }
.device-foot::before { content:''; position:absolute; bottom:0; left:35px; height:20px; width:10px; background:var(--ink); }
.workspace-files { position:absolute; top:267px; left:50%; transform:translateX(-50%); display:flex; gap:8px; align-items:center; z-index:4; white-space:nowrap; transition:top .9s cubic-bezier(.16,1,.3,1); }
.workspace-label { position:absolute; width:100%; text-align:center; top:-26px; color:var(--muted); font:9px/1 var(--mono); letter-spacing:.07em; text-transform:uppercase; transition:opacity .3s; }
.file-chip { display:flex; gap:7px; align-items:center; padding:9px 11px; background:var(--card); border:1px solid var(--line); font:10px var(--mono); transition:transform .8s cubic-bezier(.16,1,.3,1),border-color .6s,background .6s; }
.file-chip i { width:8px; height:10px; border:1px solid var(--blue); position:relative; }
.file-chip i::after { content:''; position:absolute; height:1px; width:4px; top:3px; left:1px; background:var(--blue); box-shadow:0 3px var(--blue); opacity:.5; }
.files-status { position:absolute; width:100%; text-align:center; top:48px; color:var(--muted); font:10px var(--mono); }
.scene-callout { position:absolute; left:20px; right:20px; bottom:26px; display:flex; justify-content:center; gap:9px; align-items:center; color:var(--ink); font-size:14px; }
.callout-dot { width:5px; height:5px; background:var(--blue); }
.pixel-growth { position:absolute; left:50%; top:160px; z-index:2; pointer-events:none; }
.pixel-growth i { position:absolute; width:5px; height:5px; background:var(--blue); opacity:0; }
[data-scene="need"] .native-alert { opacity:1; transform:translateY(0); }
[data-scene="need"] .device-output { opacity:.25; }
[data-scene="move"] .instant-device, [data-scene="linux"] .instant-device, [data-scene="done"] .instant-device { width:470px; height:220px; top:36px; box-shadow:8px 8px 0 var(--blue-soft),0 24px 48px -28px #2f5bff33; }
[data-scene="move"] .device-foot, [data-scene="linux"] .device-foot, [data-scene="done"] .device-foot { opacity:1; }
[data-scene="move"] .task-ticket, [data-scene="linux"] .task-ticket, [data-scene="done"] .task-ticket { opacity:.35; transform:translateX(-25px) rotate(-8deg); }
[data-scene="move"] .workspace-files, [data-scene="linux"] .workspace-files, [data-scene="done"] .workspace-files { top:300px; }
[data-scene="move"] .file-chip { transform:translateY(-6px); border-color:var(--blue); background:var(--blue-soft); }
[data-scene="move"] .file-chip:nth-child(3) { transition-delay:.1s; }
[data-scene="move"] .file-chip:nth-child(4) { transition-delay:.2s; }
[data-scene="move"] .pixel-growth i { animation:pixel-expand 1.1s cubic-bezier(.1,.7,.2,1) both; animation-delay:var(--delay); }
[data-scene="done"] .device-result { opacity:1; transform:translateY(0); }
[data-scene="done"] .file-chip { border-color:color-mix(in srgb,var(--blue) 45%,var(--line)); }
@keyframes pixel-expand { 0% { opacity:0; transform:translate(0,0); } 20% { opacity:.7; } 100% { opacity:0; transform:translate(var(--dx),var(--dy)); } }
.story-controls { display:flex; border-top:1px solid var(--line); }
.story-controls button { flex:1; border:0; border-right:1px solid var(--line); background:none; padding:19px 18px; text-align:left; font:11px/1.4 var(--mono); color:var(--muted); cursor:pointer; position:relative; }
.story-controls button:last-child { border-right:0; }
.story-controls button > span { margin-right:12px; color:var(--muted); opacity:.65; font-size:9px; }
.story-controls button > i { position:absolute; left:0; right:100%; bottom:0; height:2px; background:var(--blue); transition:right .4s ease; }
.story-controls button[aria-pressed="true"] { color:var(--ink); background:var(--blue-soft); }
.story-controls button[aria-pressed="true"] > i { right:0; }
.story-controls button:hover { color:var(--ink); }
.story-footnote { display:flex; align-items:baseline; justify-content:space-between; gap:14px; margin-top:17px; color:var(--muted); font:10px/1.6 var(--mono); }
.story-footnote > span { font-size:9px; }
.story-footnote details { position:relative; max-width:520px; flex:1; text-align:center; }
.story-footnote summary { cursor:pointer; list-style:none; width:fit-content; margin:auto; }
.story-footnote summary::-webkit-details-marker { display:none; }
.story-footnote summary > span { margin-left:10px; color:var(--blue); }
.story-footnote details p { text-align:left; font:12px/1.7 var(--body); padding:12px 16px; margin-top:10px; border:1px solid var(--line); background:var(--card); }
.story-footnote .text-link { font-size:10px; }

/* Vault: the benefit reads at a glance. Motion reinforces it, never reveals it. */
.vault-story { --line:#30394d; --ink:#eef1f8; --muted:#a5afc4; --card:#101622; --blue:#a6b9ff; --blue-soft:#18213a; --vault-pass:#afe3c5; --vault-block:#efb3a5; padding-block:74px 64px !important; }
.vault-heading { text-align:center; margin-bottom:40px; }
.vault-heading h2 { font-size:clamp(34px,4.2vw,52px); line-height:1.13; margin-top:20px; }
.vault-heading h2 .soft { color:#a2acc3; }
.preview-label { font:8px/1 var(--mono); color:#adbce8; border:1px solid #394467; padding:5px 7px; margin-left:10px; letter-spacing:.04em; }
.vault-theatre { width:min(100%,680px); margin:auto; position:relative; }
.vault-credential { position:relative; min-height:155px; display:flex; align-items:center; gap:30px; padding:28px 35px; border:1px solid #53638b; background:#141d30; box-shadow:7px 7px 0 #080c14,8px 8px 0 #2d3956; }
.vault-credential::before,.vault-credential::after { content:''; position:absolute; width:5px; height:5px; background:#778ab4; left:8px; top:8px; }
.vault-credential::after { left:auto; top:auto; bottom:8px; right:8px; }
.vault-lock { position:relative; width:65px; height:77px; flex:none; color:#b8c8ff; }
.vault-lock-shackle { position:absolute; width:39px; height:34px; left:13px; top:0; border:5px solid currentColor; border-bottom:0; clip-path:polygon(6px 0,calc(100% - 6px) 0,calc(100% - 6px) 5px,100% 5px,100% 100%,0 100%,0 5px,6px 5px); }
.vault-lock-body { position:absolute; left:0; bottom:0; width:65px; height:48px; background:currentColor; box-shadow:5px 5px 0 #233454; display:grid; place-items:center; }
.vault-lock-body b { width:10px; height:15px; background:#141d30; clip-path:polygon(0 0,100% 0,100% 60%,70% 60%,70% 100%,30% 100%,30% 60%,0 60%); }
.vault-lock > span { position:absolute; width:5px; height:5px; background:#bdd0ff; right:-12px; top:15px; box-shadow:7px 7px #829be2; animation:vault-lock-glint 3.6s ease infinite; }
.vault-credential-copy > span { display:block; color:#b4c0da; font:10px/1 var(--mono); margin-bottom:15px; }
.vault-masked-key { display:flex; gap:8px; margin-bottom:15px; }
.vault-masked-key i { width:7px; height:7px; background:#c0ceff; }
.vault-masked-key i:nth-child(4n) { margin-right:5px; }
.vault-masked-key i:last-child { margin-right:0; }
.vault-credential-copy strong { font:400 13px/1.4 var(--body); color:#d0daef; }
.vault-seal { align-self:flex-start; margin-left:auto; padding:5px 7px; border:1px solid #475b84; color:#adc1f1; font:8px/1 var(--mono); letter-spacing:.08em; }
.vault-permissions { margin-top:35px; }
.vault-permissions-label { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; color:#aab5ce; font:10px/1.4 var(--mono); }
.vault-permission { position:relative; display:flex; align-items:center; width:100%; gap:16px; min-height:70px; padding:18px 22px; border:1px solid #44567d; background:#172138; overflow:hidden; --result:#bccbff; cursor:pointer; text-align:left; transition:background .2s,border-color .2s; }
.vault-permission + .vault-permission { margin-top:10px; }
.vault-permission[aria-checked="false"] { --result:#9ca8c1; background:#10141e; border-color:#30384c; }
.vault-computer-icon { width:24px; height:24px; color:#b7c8fc; flex:none; transition:color .2s; }
.vault-permission[aria-checked="false"] .vault-computer-icon { color:#6f7c99; }
.vault-permission strong { font:400 15px/1.3 var(--mono); color:#e7ebf4; }
.vault-permission:hover { border-color:#94a8df; }
.vault-result { display:flex; align-items:center; gap:8px; margin-left:auto; color:var(--result); font:11px/1.3 var(--mono); }
.vault-row-motion { position:absolute; bottom:0; height:2px; left:0; right:0; pointer-events:none; }
.vault-row-motion > i { position:absolute; width:36%; top:0; bottom:0; left:-36%; background:linear-gradient(90deg,transparent,var(--result)); animation:vault-permission-pass 3.6s cubic-bezier(.4,0,.2,1) infinite; }
.vault-permission[aria-checked="false"] .vault-row-motion { display:none; }
.vault-control { margin-top:22px; display:flex; align-items:center; justify-content:space-between; gap:16px; color:#aab5cd; font:11px/1.5 var(--body); }
.vault-try { color:#9eafdb; font:9px/1.4 var(--mono); white-space:nowrap; }
.vault-switch { width:27px; height:14px; padding:3px; display:block; border:1px solid #8095cc; background:#364977; position:relative; }
.vault-switch::before { content:''; display:block; width:6px; height:6px; background:#d3ddff; transform:translateX(13px); transition:transform .18s; }
.vault-permission:focus-visible,.vault-theatre .quiet-button:focus-visible { outline:2px solid #b7c8ff; outline-offset:5px; }
.vault-permission[aria-checked="false"] .vault-switch { background:#202737; border-color:#63708d; }
.vault-permission[aria-checked="false"] .vault-switch::before { transform:translateX(0); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.vault-theatre.is-paused *,.vault-theatre.is-offscreen *,.vault-theatre.is-hidden * { animation-play-state:paused !important; }
.vault-footnote { width:min(100%,680px); margin:27px auto 0; padding-top:16px; border-top:1px solid #252d40; }
.vault-footnote details { flex:none; max-width:440px; }
.vault-footnote details p { color:#adb9d1; }
@keyframes vault-permission-pass { 0% { left:-36%; opacity:0; } 5% { opacity:1; } 28% { left:100%; opacity:1; } 29%,100% { left:100%; opacity:0; } }
@keyframes vault-lock-glint { 0%,10%,100% { opacity:.3; } 20%,35% { opacity:1; } 45% { opacity:.3; } }

.proof-section { padding-block: 64px 94px; }
.proof-strip { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 30px; align-items: center; padding: 30px 0; border-bottom: 1px solid var(--line); }
.proof-intro { display: grid; gap: 15px; }
.proof-intro .eyebrow { font-size: 9px; }
.proof-intro h2 { font-size: 25px; max-width: 10em; }
.proof-stat { display: grid; gap: 8px; padding-left: 26px; border-left: 1px solid var(--line); }
.proof-stat > strong { font: 300 45px/1.2 var(--display); letter-spacing: -.03em; color: var(--ink); }
.proof-stat > strong > span { font-size: 25px; color: var(--muted); }
.proof-stat > span { font-size: 12px; }
.proof-stat > small { font: 9px/1.6 var(--mono); color: var(--muted); }
.proof-source { padding-top: 15px; color: var(--muted); font-size: 10px; line-height: 1.7; }
.proof-source a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.plans-note { max-width: 790px; margin: 24px auto 0; font-size: 12px; line-height: 1.9; }
.works .wrap { padding-block: 25px; }
.works .label { font-size: 10px; }
.works ul { font-size: 12px; gap: 14px 26px; }

@media(max-width:1000px) {
  .task-ticket { left:3%; width:140px; padding:15px; }
}
@media(max-width:860px) {
  .quickstart { grid-template-columns:1fr; gap:24px; }
  .feature-strip { gap:18px; }
  .feature-strip article { align-items:flex-start; gap:10px; }
  .feature-strip span { font-size:11px; }
  .task-ticket { display:none; }
  .proof-strip { grid-template-columns:1fr 1fr; }
  .proof-intro { grid-column:1/-1; }
  .proof-intro h2 { max-width:none; }
  .proof-stat { padding-left:0; border:0; }
}
@media(max-width:600px) {
  .story-heading { gap:14px; margin-bottom:28px; }
  .story-heading h2 { font-size:37px; }
  .story-heading p { font-size:14px; max-width:23em; }
  .theatre-bar { padding-inline:14px; font-size:10px; height:42px; }
  .theatre-note { display:none; }
  .instant-scene { height:400px; }
  .instant-device { width:250px; top:42px; height:150px; }
  .device-body { padding:15px; }
  .device-command { font-size:10px; }
  .device-output { font-size:9px; }
  .native-alert { left:15px; bottom:13px; font-size:8px; padding:7px; }
  [data-scene="move"] .instant-device,[data-scene="linux"] .instant-device,[data-scene="done"] .instant-device { width:calc(100% - 42px); height:205px; top:28px; }
  .workspace-files { top:235px; gap:5px; }
  [data-scene="move"] .workspace-files,[data-scene="linux"] .workspace-files,[data-scene="done"] .workspace-files { top:280px; }
  .file-chip { font-size:9px; padding:7px; gap:5px; }
  .workspace-label { font-size:8px; top:-22px; }
  .files-status { font-size:9px; top:40px; }
  .scene-callout { font-size:12px; bottom:24px; text-align:center; }
  .device-result { left:15px; right:15px; bottom:16px; gap:10px; }
  .device-result strong { font-size:10px; }
  .device-result div span { font-size:9px; }
  .story-controls button { padding:14px 8px; font-size:9px; text-align:center; }
  .story-controls button > span { display:block; margin:0 0 6px; font-size:8px; }
  .story-footnote { flex-wrap:wrap; font-size:9px; }
  .story-footnote > span { font-size:8px; }
  .story-footnote details { flex:initial; }
  .story-footnote details[open] { flex:1 0 100%; order:3; }
  .story-footnote .text-link { font-size:9px; }
  .vault-story { padding-block:56px 44px !important; }
  .vault-heading { margin-bottom:28px; }
  .vault-heading h2 { font-size:clamp(29px,8.6vw,35px); }
  .preview-label { font-size:7px; margin-left:4px; }
  .vault-credential { min-height:138px; padding:22px 20px; gap:18px; }
  .vault-lock { transform:scale(.78); margin-inline:-7px; }
  .vault-credential-copy > span { font-size:9px; margin-bottom:13px; }
  .vault-masked-key { gap:6px; margin-bottom:13px; }
  .vault-masked-key i { width:5px; height:5px; }
  .vault-masked-key i:nth-child(4n) { margin-right:3px; }
  .vault-credential-copy strong { font-size:11px; }
  .vault-seal { display:none; }
  .vault-permissions { margin-top:29px; }
  .vault-permission { padding:16px; min-height:65px; gap:10px; }
  .vault-permission strong { font-size:12px; }
  .vault-result { font-size:10px; gap:6px; }
  .vault-control { font-size:10px; gap:8px; min-height:43px; margin-top:15px; }
  .vault-control > span { max-width:165px; }
  .vault-footnote { align-items:flex-start; gap:10px; margin-top:20px; }
  .vault-footnote details { max-width:100%; text-align:left; }
  .vault-footnote summary { margin:0; }
  .feature-strip { grid-template-columns:1fr; gap:22px; padding-block:28px; }
  .feature-strip article { align-items:center; gap:16px; }
  .feature-strip strong { font-size:14px; }
  .feature-strip span { font-size:12px; }
  .quickstart { padding-block:36px 16px; }
  .quick-code pre { padding:14px; font-size:10px; }
  .quick-code-bar { padding-inline:14px; font-size:9px; }
  .section-index { font-size:8px; }
  .section-index > span:last-child { max-width:18em; text-align:right; }
  .proof-section { padding-block:34px 68px; }
  .proof-stat > strong { font-size:39px; }
  .proof-stat > span { font-size:11px; }
  .proof-stat > small { font-size:8px; }
}
@media(prefers-reduced-motion:reduce) {
  .instant-theatre *, .vault-theatre * { animation:none !important; transition:none !important; }
}

/* A readable six-second loop. Files visibly enter and leave the full computer. */
.instant-device { transition-duration:.7s; }
.workspace-files { transition:top .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1); }
.file-chip { transition-duration:.45s; }
.task-ticket { transition-duration:.45s; }
.device-foot { transition-delay:.1s; transition-duration:.3s; }
.device-result { top:108px; bottom:auto; height:42px; transition-duration:.25s; }
.result-image { height:32px; width:26px; }
.result-image::before { height:2px; width:13px; left:5px; top:9px; bottom:auto; transform:none; box-shadow:0 5px var(--blue),0 10px var(--blue); }
.result-image::after,.result-image i { display:none; }
[data-scene="move"] .instant-device,[data-scene="linux"] .instant-device,[data-scene="done"] .instant-device { height:264px; top:24px; }
[data-scene="move"] .workspace-files,[data-scene="linux"] .workspace-files,[data-scene="done"] .workspace-files { top:237px; }
[data-scene="move"] .workspace-label,[data-scene="linux"] .workspace-label,[data-scene="done"] .workspace-label,
[data-scene="move"] .files-status,[data-scene="linux"] .files-status,[data-scene="done"] .files-status { opacity:0; }
[data-scene="move"] .file-chip { transform:translateY(0); }
[data-scene="back"] .file-chip { border-color:var(--blue); }
[data-scene="back"] .device-output { color:var(--ok); }
.workspace-label,.files-status { transition:opacity .2s; }
@media(max-width:600px) {
  [data-scene="move"] .instant-device,[data-scene="linux"] .instant-device,[data-scene="done"] .instant-device { height:250px; top:20px; }
  [data-scene="move"] .workspace-files,[data-scene="linux"] .workspace-files,[data-scene="done"] .workspace-files { top:225px; }
  .device-result { top:100px; height:36px; }
  .file-chip { font-size:8px; padding:7px 6px; }
  .workspace-files { gap:4px; }
}

/* Phone layouts: readable examples, reachable sections, and real touch targets. */
@media(max-width:900px) {
  nav.top .wrap { gap:12px; }
  nav.top .mobile-links { display:flex; height:44px; gap:8px; justify-content:space-between; border-top:1px solid var(--line); }
  nav.top .mobile-links a { display:flex; align-items:center; justify-content:center; min-height:44px; flex:1; font:12px var(--mono); color:var(--muted); }
  nav.top .mobile-links a:hover,nav.top .mobile-links a:focus-visible { color:var(--blue); }
  section[id],div[id="cli"],div[id="why"] { scroll-margin-top:124px; }
}
@media(max-width:600px) {
  .announce { font-size:11px; line-height:1.6; padding:8px 12px; }
  nav.top > .wrap:first-child { height:62px; gap:8px; }
  nav.top .logo { min-height:44px; min-width:32px; justify-content:flex-start; }
  nav.top .end { gap:4px; }
  nav.top .cur { height:46px; }
  nav.top .cur button { min-width:44px; min-height:44px; padding-inline:6px; font-size:11px; white-space:nowrap; }
  nav.top .theme { min-width:44px; height:44px; }
  nav.top .btn { height:44px; white-space:nowrap; font-size:11px; padding-inline:10px; }
  .hero { padding-top:32px; }
  .badge { font-size:12px; line-height:1.6; align-items:baseline; gap:6px; }
  .badge b { flex:none; }
  .lede { font-size:16px; }
  .btn,.install { min-height:48px; }
  .install button { min-height:46px; min-width:54px; }
  .cta-row > .btn { justify-content:center; width:100%; }
  .term-bar { height:48px; }
  .tab { min-height:48px; }
  .term-bar .replay { min-height:44px; min-width:44px; }
  .stage { margin-top:32px; padding:24px 8px; }
  .term pre { padding:14px; font-size:12px; }
  .feature-strip span { font-size:14px; line-height:1.6; }
  .quickstart-copy p { font-size:15px; }
  .quick-code-bar { font-size:11px; padding-left:14px; padding-block:0; }
  .quick-code pre { font-size:12px; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; }
  .quiet-button { min-height:44px; min-width:64px; padding:10px 8px; font-size:11px; }
  .text-link { min-height:44px; font-size:12px; }
  .theatre-bar { height:48px; padding-inline:12px; font-size:11px; }
  .story-heading h2 { font-size:clamp(30px,8.8vw,38px); }
  .story-heading p { font-size:15px; }
  .story-controls button { font-size:11px; min-height:60px; padding:10px 4px; }
  .story-controls button > span { font-size:10px; }
  .device-bar { padding-inline:10px; font-size:10px; }
  #device-mode { font-size:9px; }
  .device-command { font-size:12px; }
  .device-output { font-size:11px; line-height:1.6; }
  .native-alert { font-size:10px; white-space:normal; right:15px; }
  .device-result strong,.device-result div span { font-size:11px; }
  .workspace-files { max-width:calc(100% - 58px); width:max-content; gap:5px; }
  .file-chip { min-width:0; font-size:9px; padding:7px 6px; gap:4px; }
  .file-chip i { flex:none; }
  .workspace-label,.files-status { font-size:10px; }
  .scene-callout { font-size:13px; line-height:1.5; }
  .story-footnote { gap:8px 14px; font-size:11px; }
  .story-footnote > span { flex-basis:100%; font-size:10px; }
  .story-footnote summary { min-height:44px; display:flex; align-items:center; justify-content:space-between; }
  .story-footnote details { flex:1; text-align:left; }
  .story-footnote details p { font-size:14px; padding:14px; overflow-wrap:anywhere; }
  .story-footnote .text-link { font-size:11px; }
  .fork-stage canvas { aspect-ratio:140 / 160; }
  .fork-bar .btn { min-height:48px; }
  .facts { font-size:14px; }
  .vault-credential { padding:22px 18px; gap:16px; }
  .vault-credential-copy { min-width:0; }
  .vault-credential-copy > span { font-size:11px; }
  .vault-credential-copy strong { font-size:13px; }
  .vault-permissions-label { font-size:12px; margin-bottom:4px; }
  .vault-permission { display:grid; grid-template-columns:24px minmax(0,1fr) auto; padding:14px; gap:10px; min-height:72px; }
  .vault-permission strong { font-size:13px; overflow-wrap:anywhere; }
  .vault-result { font-size:11px; }
  .vault-control { font-size:12px; line-height:1.6; }
  .vault-try { font-size:10px; }
  .preview-label { font-size:9px; padding:6px; }
  .proof-strip { gap:24px 16px; }
  .proof-stat > strong { font-size:36px; }
  .proof-stat > span { font-size:13px; }
  .proof-stat > small,.proof-source { font-size:11px; }
  .plan .btn { width:100%; justify-content:center; }
  .plans-note { font-size:13px; line-height:1.8; }
  footer ul a { display:inline-flex; align-items:center; min-height:44px; }
  footer .legal { gap:10px; flex-wrap:wrap; }
}
@media(max-width:360px) {
  .nav-label-long { display:none; }
  .nav-label-short { display:inline; }
  nav.top .btn.solid { min-width:66px; }
  .vault-result { flex-direction:column-reverse; align-items:flex-end; gap:7px; }
  .vault-permission { min-height:78px; }
  .workspace-files { width:calc(100% - 70px); max-width:none; display:grid; grid-template-columns:1fr 1fr; }
  .file-chip { font-size:10px; justify-content:center; padding:6px; }
  .file-chip:nth-of-type(4) { grid-column:1 / -1; }
  .files-status { top:70px; white-space:normal; }
  [data-scene="move"] .instant-device,[data-scene="linux"] .instant-device,[data-scene="done"] .instant-device { height:300px; }
  [data-scene="move"] .workspace-files,[data-scene="linux"] .workspace-files,[data-scene="done"] .workspace-files { top:245px; }
}
.instant-pricing-note{display:grid;grid-template-columns:1fr 1.25fr;gap:32px;margin-top:32px;padding:28px;border:1px solid var(--line);background:var(--card)}
.instant-pricing-note h3{font-size:clamp(24px,3vw,34px);margin-top:12px}
.instant-pricing-note p{font-size:14px;line-height:1.7;color:var(--muted);margin:0 0 14px}
.instant-pricing-note b{color:var(--ink)}
.instant-pricing-note code{overflow-wrap:anywhere}
@media(max-width:650px){.instant-pricing-note{grid-template-columns:1fr;gap:20px;padding:20px}.instant-pricing-note p{font-size:14px}.instant-pricing-note .text-link{display:inline-flex;align-items:center;min-height:44px}}