/* Homepage feature chapters. Loaded after the shared homepage styles.
 * One result per chapter: the picture holds only the product and its windows, the words sit beside it.
 * Media scale with the visible chapter height (published rule); setup steps and conditions live in dialogs. */
:root {
  --show-h: clamp(260px, calc(var(--landing-page-height) - 330px), 560px);
  --feature-accent:#316df3; --feature-link:#2459cf; --feature-control:#e6eaf4;
  --run: #3d7bff; --wait: #ffa31a; --done: #34c96f; --fail: #ff4766;
}

/* T82: chapter media already use the visible-height budget. Do not spend
 * another 90+ pixels on outer padding before the content can fit one stop. */
.hero, #keys, #agent, .dl-section { padding-block:min(var(--chapter-pad),24px); }

/* ---------- ① Hero: three selling points as an index, plus the download action ---------- */
.screen.hero { padding:24px 32px; }
/* Copy and image occupy separate rows. Crop only the render's empty border,
 * using the same intact-product bounds as the feature chapters below. */
.hero .hero-stage { display:flex; flex-direction:column; align-items:center; width:min(900px,100%); gap:28px; container-type:normal; }
.hero .hero-copy,.hero .hero-product { grid-area:auto; width:100%; }
.hero .hero-copy { position:static; padding:0; }
.hero .hero-copy .eyebrow { margin:0 0 14px; font-size:20px; line-height:1.4; }
.hero h1 { position:relative; width:max-content; margin-inline:auto; font-size:clamp(44px,5.4vw,80px); line-height:1.1; }
/* Hang the full-width stop so the four Chinese characters share the product axis. */
.hero-punctuation { position:absolute; inset-inline-start:100%; }
.hero-benefit { margin:14px auto 0; font-size:16px; line-height:1.6; color:var(--muted); text-wrap:balance; }
.hero .hero-product { display:flex; flex-direction:column; align-items:center; margin:0; gap:18px; }
.hero .hero-image { top:auto; width:min(720px,100%,max(320px,calc((var(--landing-page-height) - 480px) * 2300 / 1140))); margin:0 auto; }
.hero .hero-product figcaption { display:flex; justify-content:center; gap:4px 18px; width:100%; margin:0; font-size:13px; line-height:1.7; }
.hero .hero-product figcaption a { padding:0; }
.hero-pillars { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:stretch; width:min(900px,100%); margin-top:28px; padding:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.hero-pillars a { display:flex; align-items:center; justify-content:center; gap:12px; min-width:0; padding:16px 18px; text-align:left; border-radius:0; transition:background .2s; }
.hero-pillars a+a { border-left:1px solid var(--line); }
.hero-pillars a:hover { background:#fff8; }
.hero-pillars svg { width:28px; height:28px; color:var(--accent); flex:none; }
.hero-pillars b { display:block; font-size:18px; font-weight:600; letter-spacing:-.01em; color:var(--ink); }
.hero-pillars small { display:block; font-size:13px; color:var(--muted); margin-top:2px; }
.hero .hero-actions { margin-top:20px; align-items:center; gap:30px; }
.hero-actions .hero-download { padding:10px 20px; border-radius:999px; background:var(--ink); color:#fff; font-weight:600; text-decoration:none; }
.hero-actions .hero-download:hover { background:#000; }
@media(max-width:900px) {
  .hero-pillars a { padding-inline:14px; gap:9px; }
  .hero-pillars small { font-size:12px; }
}
@media(max-width:760px) {
  .screen.hero { padding:24px 20px; }
  .hero .hero-stage { gap:24px; }
  .hero .hero-copy .eyebrow { font-size:17px; margin-bottom:12px; }
  .hero h1 { font-size:clamp(40px,11vw,60px); }
  .hero-benefit { max-width:23em; font-size:14px; margin-top:12px; }
  .hero .hero-image { width:min(500px,100%); }
  .hero .hero-product { gap:14px; }
  .hero .hero-product figcaption { gap:3px 14px; font-size:12px; }
  .hero-pillars { margin-top:24px; }
  .hero-pillars a { flex-direction:column; justify-content:flex-start; gap:7px; padding:12px 6px; text-align:center; }
  .hero-pillars svg { width:24px; height:24px; }
  .hero-pillars b { font-size:15px; }
  .hero-pillars small { font-size:11px; line-height:1.6; text-wrap:balance; }
  .hero .hero-actions { margin-top:20px; gap:24px; }
}
@media(max-width:760px) and (max-height:650px) {
  .screen.hero { padding-block:16px; }
  .hero .hero-stage { gap:18px; }
  .hero .hero-image { width:min(280px,100%); }
  .hero .hero-product { gap:12px; }
  .hero-pillars { margin-top:18px; }
  .hero-pillars a { padding-block:9px; }
  .hero-pillars small { display:none; }
  .hero .hero-actions { margin-top:16px; }
}

/* ---------- Shared: cropped native keyboard render ---------- */
/* Crop x 500–2800, y 580–1720 of the 3300×2280 top view; marks use % of this crop. */
.kb { position:relative; aspect-ratio:2300/1140; overflow:hidden; }
.kb>img { position:absolute; width:143.478%; max-width:none; height:auto; left:-21.739%; top:-50.877%; pointer-events:none; user-select:none; }
.kb-ring { position:absolute; width:13.6%; height:27%; transform:translate(-50%,-50%); border-radius:17%; box-shadow:0 0 0 3px var(--accent),0 0 22px 5px rgba(181,86,58,.3); background:rgba(181,86,58,.06); opacity:0; transition:opacity .25s; }
.kb-ring.is-on { opacity:1; animation:key-press .45s ease-out; }
@keyframes key-press { 0% { transform:translate(-50%,-50%) scale(1.06); } 45% { transform:translate(-50%,-50%) scale(.94); } 100% { transform:translate(-50%,-50%) scale(1); } }
.kb [data-ring="KEY1"] { left:17.48%; top:36.4%; } .kb [data-ring="KEY3"] { left:46.04%; top:36.4%; }
.kb [data-ring="KEY5"] { left:17.48%; top:65.35%; } .kb [data-ring="KEY6"] { left:31.76%; top:65.35%; }

/* ---------- ③④ Showcase chapters: centered heading, then picture + a short caption column ---------- */
.show-section { align-items:center; }
.show-section .section-heading { margin-bottom:18px; }
.section-heading .term { font-weight:600; color:var(--ink); }
.show-section .section-heading .eyebrow { margin-bottom:6px; }
.show-section .section-heading>p:not(.eyebrow) { margin-top:6px; }
.keys-section { background:#f5f5f7; }
.show { width:min(1040px,100%); }
.show-picture { position:relative; margin:0; }
.show-foot { display:block; margin-top:8px; font-size:12px; color:#9a9ba0; text-align:center; }
.show-note { margin:6px 0 0; font-size:12.5px; line-height:1.6; color:#8b8c91; text-align:left; }
.show-words { display:flex; align-items:flex-start; justify-content:space-between; gap:28px; margin-top:10px; text-align:left; }
.show-side { display:flex; align-items:center; gap:14px; flex:none; padding-top:2px; }

.play-toggle { display:grid; place-items:center; width:34px; height:34px; flex:none; border-radius:50%; background:#ebebee; color:#333438; border:0; }
.play-toggle svg { grid-area:1/1; }
.play-toggle .i-pause { display:none; }
.play-toggle[data-playing=true] .i-play { display:none; }
.play-toggle[data-playing=true] .i-pause { display:block; }
.play-toggle:disabled { opacity:.4; cursor:default; }
.more-link { padding:0; border:0; background:none; font-size:14px; color:var(--accent); cursor:pointer; }
.more-link:hover { text-decoration:underline; text-underline-offset:3px; }

/* ---------- ④ T76 · State meanings in motion, one intact product ---------- */
.agent-section { background:#f5f5f7; }
#agent .section-heading { margin-bottom:12px; }
#agent h2 em { font-style:normal; color:var(--feature-accent); }
#agent .section-heading>p:not(.eyebrow) { font-size:18px; margin-top:14px; }
.agent-signal { width:min(1000px,100%); --signal-lit:1; --signal-enter:1; --signal-exit:0; }
.signal-picker { position:relative; margin:0; padding:0; border:0; min-width:0; }
.signal-radio { top:94%; left:50%; }
.signal-layout { --c:var(--run); --state-ink:var(--feature-accent); --state-paper:var(--feature-accent); --mark-ink:#fff; --mark-turn:-7deg; display:flex; flex-direction:column; align-items:center; gap:16px; }
#signal-running:checked ~ .signal-layout { --c:var(--run); }
#signal-waiting:checked ~ .signal-layout { --c:var(--wait); --state-ink:#a66b00; --state-paper:#ffdc6e; --mark-ink:#704900; --mark-turn:7deg; }
#signal-completed:checked ~ .signal-layout { --c:var(--done); --state-ink:#16814c; --state-paper:#b6ee9c; --mark-ink:#176341; --mark-turn:-5deg; }
#signal-failed:checked ~ .signal-layout { --c:var(--fail); --state-ink:#cc3755; --state-paper:#ffcfdb; --mark-ink:#a12642; --mark-turn:6deg; }
.signal-state-display { display:grid; place-items:center; width:100%; min-height:98px; }
.signal-scene { grid-area:1/1; display:none; align-items:center; justify-content:center; gap:24px; }
#signal-running:checked ~ .signal-layout [data-signal-scene=running],
#signal-waiting:checked ~ .signal-layout [data-signal-scene=waiting],
#signal-completed:checked ~ .signal-layout [data-signal-scene=completed],
#signal-failed:checked ~ .signal-layout [data-signal-scene=failed] { display:flex; }
.signal-mark { display:grid; place-items:center; width:76px; height:76px; flex:none; background:var(--state-paper); color:var(--mark-ink); border-radius:26px 29px 25px 28px; transform:rotate(var(--mark-turn)); }
.signal-mark svg { width:52px; height:52px; }
.signal-message { text-align:left; min-width:265px; }
.signal-message strong { display:block; font-size:38px; font-weight:650; letter-spacing:-.04em; line-height:1.3; color:#1d1d1f; }
.signal-message em { font-style:normal; color:var(--state-ink); }
.signal-message p { margin:8px 0 0; color:#686b73; font-size:14px; line-height:1.5; }
.signal-support { display:block; font-size:11px; margin-top:2px; }
.agent-signal[data-signal-ready=true] .signal-mark { opacity:calc(var(--signal-enter) * (1 - var(--signal-exit))); transform:translateY(calc((1 - var(--signal-enter)) * 18px - var(--signal-exit) * 8px)) rotate(calc(var(--mark-turn) - (1 - var(--signal-enter)) * 14deg)) scale(calc(.82 + var(--signal-enter) * .18)); }
.agent-signal[data-signal-ready=true] .signal-message { opacity:calc(var(--signal-enter) * (1 - var(--signal-exit))); transform:translateY(calc((1 - var(--signal-enter)) * 12px - var(--signal-exit) * 7px)); }
.signal-product { position:relative; margin:0; width:min(640px,100%,calc((var(--landing-page-height) - 570px) * 1800 / 1140)); min-width:min(280px,100%); }
.kb-agent { width:100%; filter:drop-shadow(0 20px 24px #222b3b1b); }
/* Same-colour firmware windows: 1/4, 1/2, 1, 1/2, 1/4. No breathing or chase. */
.kb-leds i { position:absolute; top:71.2%; width:1.13%; aspect-ratio:1; border-radius:50%; transform:translate(-50%,-50%); opacity:calc(var(--b,1) * var(--signal-lit,1)); transition:opacity .2s; }
.kb-leds i::before { content:""; position:absolute; inset:0; border-radius:50%; background:radial-gradient(circle at 50% 46%,color-mix(in srgb,var(--c) 30%,#fff) 0 22%,var(--c) 62%,color-mix(in srgb,var(--c) 78%,#000) 100%); box-shadow:inset 0 0 0 .5px #0000002e; }
.kb-leds i::after { content:""; position:absolute; inset:-110%; border-radius:50%; background:radial-gradient(circle,color-mix(in srgb,var(--c) 34%,transparent) 0%,color-mix(in srgb,var(--c) 10%,transparent) 38%,transparent 66%); pointer-events:none; }
.kb-leds i:nth-child(1) { left:72.78%; --b:.25; }
.kb-leds i:nth-child(2) { left:76.52%; --b:.5; }
.kb-leds i:nth-child(3) { left:80.26%; --b:1; }
.kb-leds i:nth-child(4) { left:84%; --b:.5; }
.kb-leds i:nth-child(5) { left:87.74%; --b:.25; }
.signal-controls { display:flex; align-items:center; justify-content:center; gap:18px; margin:14px auto 0; }
.signal-choices { display:flex; gap:4px; }
.signal-choice { min-width:70px; min-height:44px; padding:0 10px; display:flex; align-items:center; justify-content:center; gap:7px; font-size:13px; color:#686b73; cursor:pointer; border-radius:22px; border:1px solid transparent; }
.signal-choice i { width:8px; height:8px; border-radius:50%; background:var(--choice-dot,var(--choice)); }
.signal-choice:hover { background:#fff9; }
#signal-running:checked ~ .signal-controls [for=signal-running],
#signal-waiting:checked ~ .signal-controls [for=signal-waiting],
#signal-completed:checked ~ .signal-controls [for=signal-completed],
#signal-failed:checked ~ .signal-controls [for=signal-failed] { color:var(--choice); background:#fff; border-color:color-mix(in srgb,var(--choice) 30%,#fff); font-weight:600; }
#signal-running:focus-visible ~ .signal-controls [for=signal-running],
#signal-waiting:focus-visible ~ .signal-controls [for=signal-waiting],
#signal-completed:focus-visible ~ .signal-controls [for=signal-completed],
#signal-failed:focus-visible ~ .signal-controls [for=signal-failed] { outline:2px solid #316df3; outline-offset:3px; }
.signal-play { display:grid; place-items:center; width:40px; height:40px; flex:none; padding:0; border:0; border-radius:50%; color:var(--feature-accent); background:var(--feature-control); cursor:pointer; }
.signal-pause-icon,.signal-play[data-playing=true] .signal-play-icon { display:none; }
.signal-play[data-playing=true] .signal-pause-icon { display:block; }
.signal-play:disabled,.signal-play[hidden] { display:none; }
.signal-play:focus-visible { outline:2px solid #316df3; outline-offset:3px; }
.agent-sound { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; width:fit-content; max-width:100%; margin:18px auto 12px; padding-top:16px; border-top:1px solid var(--line); gap:8px 14px; text-align:left; }
.agent-sound-icon { width:22px; height:22px; flex:none; color:var(--muted); }
.agent-sound h3 { font-size:15px; line-height:1.4; font-weight:600; letter-spacing:-.02em; }
.agent-sound p { margin:4px 0 0; font-size:11px; line-height:1.65; color:var(--muted); }
.sound-previews { display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; font-size:11px; color:var(--muted); }
.sound-previews button { display:inline-flex; align-items:center; gap:4px; min-height:28px; padding:2px 7px; border-radius:15px; color:var(--ink); background:#f3f3f5; cursor:pointer; font:inherit; }
.sound-previews button:hover,.sound-previews button[aria-pressed=true] { background:#e7e7eb; }
.sound-previews button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.sound-previews button:disabled { display:none; }
.sound-previews:has(button:disabled) { display:none; }
.sound-feedback:not(:empty) { display:block; flex-basis:100%; text-align:center; font-size:11px; color:var(--muted); }
.signal-footer { margin:8px auto 0; width:100%; }
.signal-demo-note { margin:0; color:#686b73; font-size:12px; line-height:1.6; text-align:center; }
.signal-conditions { display:flex; align-items:center; justify-content:center; gap:18px; margin-top:12px; }
.signal-conditions p { font-size:12px; color:#686b73; margin:0; line-height:1.65; text-align:left; }
.signal-conditions .more-link { font-size:12px; color:var(--feature-link); }
@media(min-width:821px) and (max-height:760px) {
  #agent .section-heading { margin-bottom:10px; }
  .signal-state-display { min-height:98px; }
  .signal-mark { width:62px; height:62px; border-radius:22px; }
  .signal-mark svg { width:44px; height:44px; }
  .signal-message strong { font-size:32px; }
  .signal-message p { font-size:12px; margin-top:4px; }
  .signal-layout { gap:12px; }
  .signal-controls { margin-top:14px; }
  .signal-footer { margin-top:4px; }
  .agent-sound { margin-top:12px; padding-top:12px; margin-bottom:8px; }
}
@media(max-width:820px) {
  #agent .section-heading { margin-bottom:16px; }
  #agent .section-heading h2 { font-size:36px; }
  #agent .section-heading h2 span { display:block; }
  #agent .section-heading>p:not(.eyebrow) { display:block; font-size:14px; max-width:26em; margin:10px auto 0; }
  .agent-signal { max-width:500px; }
  .signal-layout { gap:12px; }
  .signal-state-display { min-height:86px; }
  .signal-scene { gap:16px; }
  .signal-mark { width:60px; height:60px; border-radius:22px 24px 21px 23px; }
  .signal-mark svg { width:42px; height:42px; }
  .signal-message { min-width:0; }
  .signal-message strong { font-size:27px; }
  .signal-message p { font-size:12px; margin-top:6px; }
  .signal-product { width:min(100%,420px); min-width:0; }
  .signal-controls { gap:8px; margin-top:14px; }
  .signal-choice { min-width:62px; padding:0 7px; font-size:12px; gap:6px; }
  .signal-conditions { flex-direction:column; gap:6px; margin-top:12px; }
  .signal-conditions p { font-size:11px; text-align:center; }
  .signal-demo-note { font-size:11px; }
  .agent-sound { width:100%; gap:8px 10px; margin-top:16px; padding-top:12px; text-align:center; }
  .agent-sound-icon { display:none; }
  .agent-sound-copy { flex-basis:100%; }
  .agent-sound h3 { font-size:14px; }
  .sound-previews { gap:3px 5px; }
}
@media(max-width:380px) {
  #agent .section-heading h2 { font-size:32px; }
  .signal-scene { gap:10px; }
  .signal-mark { width:50px; height:50px; border-radius:18px; }
  .signal-mark svg { width:36px; height:36px; }
  .signal-message strong { font-size:24px; }
  .signal-message p { font-size:11px; }
  .signal-choices { gap:0; }
  .signal-choice { min-width:53px; padding:0 5px; gap:5px; font-size:11px; }
  .signal-play { width:36px; height:36px; }
}
@media(prefers-reduced-motion:reduce) { .kb-leds i { transition:none; } }

/* ---------- ⑥ Community: one centered axis, as in the feature chapters ---------- */
.community-section { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:28px; text-align:center; }
.community-word { flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px; font-size:clamp(24px,4.2vw,58px); letter-spacing:-.045em; }
.community-word .multiply { font-size:.75em; margin:0; }
.community-copy { width:min(620px,100%); }
.community-copy .community-note { max-width:440px; margin-inline:auto; }

/* ---------- ⑦ Start with the App (download) ---------- */
.dl-section { background:#fff; }
.dl-grid { width:min(760px,100%); text-align:center; }
.dl-copy { width:100%; }
.dl-copy h2 { margin:0; }
.dl-lead { margin:12px auto 0; font-size:18px; color:#55565b; text-wrap:balance; }
.dl-section .actions { justify-content:center; margin-top:24px; }
.dl-section .download-note { text-align:center; margin:10px 0!important; }
.dl-help { display:flex; flex-direction:column; align-items:center; gap:8px; margin-top:20px; font-size:13px; line-height:1.7; color:var(--muted); }
.dl-help p { margin:0; text-wrap:balance; }
.dl-help .text-link { max-width:100%; margin:0; padding:0; font-size:13px; white-space:normal; }

/* ---------- Dialogs: setup steps and conditions, with real App crops ---------- */
.ui-crop { width:100%; background-image:var(--src); background-repeat:no-repeat; background-size:calc(1200 / var(--w) * 100%) auto; background-position:calc(var(--x) / (1200 - var(--w)) * 100%) calc(var(--y) / (800 - var(--h)) * 100%); background-color:#fbfaf8; }
.info-dialog .dialog-steps, .info-dialog .dialog-list { margin:12px 0 0; padding-left:1.3em; display:grid; gap:8px; font-size:14.5px; line-height:1.6; color:#3c3d41; text-align:left; }
.info-dialog .dialog-note { margin:16px 0 0; padding:12px 14px; border-radius:10px; background:#f5f5f7; font-size:13.5px; line-height:1.65; color:#55565b; text-align:left; }
.info-dialog .dialog-note b { color:var(--ink); }
.info-dialog .dialog-sub { margin:20px 0 0; font-size:15px; font-weight:600; color:var(--ink); text-align:left; }
.dialog-shot { margin:16px 0 0; }
.dialog-shot .ui-crop { border-radius:10px; border:1px solid #ececf0; }
.dialog-shot figcaption { display:block; margin-top:6px; font-size:12px; color:#9a9ba0; text-align:right; }

/* ---------- Laptop heights ---------- */
@media(min-width:821px) and (max-height:850px) {
  .show-section .section-heading { margin-bottom:16px; }
  .dl-section .actions { margin-top:18px; }
}
@media(min-width:821px) and (max-height:700px) {
  .show-section .section-heading>p:not(.eyebrow) { margin-top:8px; font-size:15px; }
}

/* ---------- Phones and portrait tablets: picture first, then the words ---------- */
@media(max-width:820px) {
  .show { max-width:560px; --show-h:clamp(190px,54vw,300px); }
  .show-section .section-heading { margin-bottom:14px; }
  .show-words { flex-direction:column; gap:10px; margin-top:12px; }
  .show-side { padding-top:0; }
  .dl-grid { max-width:560px; }
}
@media(max-width:760px) {
  .show-section h2 span, .dl-copy h2 span { display:block; }
  .show-section .section-heading>p:not(.eyebrow) { font-size:14px; line-height:1.6; margin-top:8px; }
  .dl-lead { font-size:16px; }
}
@media(max-width:480px) {
}
/* Short phones (same threshold as the published voice chapter) */
@media(max-width:820px) and (max-height:740px) {
  #keys, #agent, .dl-section { padding-block:min(var(--chapter-pad),16px); }
  .show-section .section-heading { margin-bottom:10px; }
  .show { --show-h:clamp(180px,52vw,300px); }
  .show-note { margin-top:4px; font-size:12px; }
  .show-foot { margin-top:6px; }
}
@media(max-width:820px) and (max-height:600px) {
  .show-section .section-heading>p:not(.eyebrow) { display:none; }
  .show { --show-h:clamp(170px,48vw,280px); }
}

@media(prefers-reduced-motion:reduce) {
  .kb-ring, .voice-result-window { transition:none!important; }
  .kb-ring.is-on { animation:none!important; }
}

/* All decorative motion follows the same playback state as the content. */
.show:not([data-playing="true"]) .caret,
.show:not([data-playing="true"]) .kb-ring { animation-play-state:paused; }
@media(prefers-reduced-motion:reduce) {
  .caret, #voice-experience .kb-ring { animation:none!important; }
  .kb-leds i, .kb-leds i::before, .kb-leds i::after { transition:none!important; }
}

.key-settings-shot { max-width:300px; margin-inline:auto; }

/* ---------- ③ T107 · category examples open into a personal app and key mapping ---------- */
/* T111: light keycaps keep the app-to-keymap story clear without a data-table frame. */
#keys { padding-block:18px; }
#keys .section-heading { margin-bottom:16px; }
#keys .section-heading h2 { font-size:clamp(32px,3.8vw,50px); line-height:1.15; }
#keys .section-heading h2 span { color:var(--muted); white-space:nowrap; }
#keys .section-heading>p:not(.eyebrow) { display:block; font-size:15px; margin-top:10px; color:var(--muted); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.keys-experience { --work-morph:1; --work-content:1; --work-map:1; --work-press:0; --work-progress:1; --tile-size:58px; --panel-w:min(520px,100%); --panel-h:208px; --app-step:min(88px,calc((100% - 70px)/6)); border:0; padding:0; margin:0; width:min(920px,100%); min-width:0; position:relative; }
.work-radio,.software-radio { top:20px; left:50%; }
.work-tabs { display:flex; align-items:center; justify-content:center; gap:10px; margin:0 auto 14px; }
.work-tabs label { position:relative; display:flex; align-items:center; justify-content:center; gap:8px; min-height:36px; padding:8px 20px; border:1px solid var(--line); border-radius:24px; font-size:14px; line-height:1.3; cursor:pointer; overflow:hidden; }
.work-tabs label>span { font-size:15px; color:var(--muted); }
.work-tabs label::after { content:""; position:absolute; left:16%; bottom:0; height:2px; width:68%; background:var(--site-accent); transform-origin:left; transform:scaleX(var(--work-progress)); opacity:0; }
.workflow-composition { width:100%; position:relative; }
.work-screen { position:relative; width:min(780px,100%); height:436px; margin:0 auto; overflow:clip; overflow-clip-margin:5px; }
.workflow-scene { display:none; position:relative; height:100%; }
.work-apps { position:absolute; inset:0; z-index:3; pointer-events:none; }
.software-item { --fly-progress:1; position:absolute; left:calc(50% + var(--slot-x,0)*var(--app-step)); top:var(--slot-y,40px); width:var(--tile-size); display:flex; flex-direction:column; align-items:center; gap:7px; font-size:10px; color:#787b83; line-height:1.25; opacity:var(--fly-progress); transform:translate(calc(-50% + (1 - var(--fly-progress))*var(--fly-x)),calc((1 - var(--fly-progress))*var(--fly-y))) rotate(calc((1 - var(--fly-progress))*var(--fly-turn))) scale(calc(.65 + .35*var(--fly-progress))); transform-origin:center center; }
label.software-item { cursor:pointer; pointer-events:auto; -webkit-tap-highlight-color:transparent; }
.software-item[data-position="0"] { --slot-x:0; --slot-y:40px; }
.software-item[data-position="1"] { --slot-x:-1; --slot-y:6px; }
.software-item[data-position="2"] { --slot-x:1; --slot-y:10px; }
.software-item[data-position="3"] { --slot-x:-2; --slot-y:42px; }
.software-item[data-position="4"] { --slot-x:2; --slot-y:40px; }
.software-item[data-position="5"] { --slot-x:-3; --slot-y:4px; }
.software-item[data-position="6"] { --slot-x:3; --slot-y:6px; }
.software-tile { display:grid; place-items:center; width:var(--tile-size); height:var(--tile-size); border:1px solid #e5e5e9; border-radius:16px; background:#fff; box-shadow:0 5px 15px #27293607; }
.software-icon { display:block; width:34px; height:34px; object-fit:contain; border-radius:7px; }
.software-name { width:80px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:2px; font-weight:450; }
.software-name small { font-size:9px; font-weight:400; color:#989aa3; }
.software-more .software-tile { font-size:28px; font-weight:250; color:#9c9fa8; border-style:dashed; background:#fcfcfd; box-shadow:none; }
.software-more .software-name { font-size:9px; }
.software-item:hover .software-tile { border-color:#b9bbc1; }
#keys-experience[data-work-motion="true"]:is([data-phase="entering"],[data-phase="context"]) .software-item .software-tile { border-color:#e5e5e9; box-shadow:0 5px 15px #27293607; }
.work-morph { position:absolute; z-index:4; left:50%; top:180px; width:var(--panel-w); height:var(--panel-h); transform:translateX(-50%) translateY(calc((1 - var(--work-morph))*14px)) scale(calc(.95 + .05*var(--work-morph))); transform-origin:top center; }
.work-hub { position:absolute; z-index:2; left:50%; top:-36px; display:flex; align-items:center; gap:8px; min-height:30px; padding:5px 12px 5px 8px; border:1px solid #e3e4e8; border-radius:999px; background:#fff; box-shadow:0 6px 16px #2729360a; color:#6f737c; font-size:11px; line-height:1; white-space:nowrap; opacity:var(--work-morph); transform:translateX(-50%) translateY(calc((1 - var(--work-morph))*8px)) scale(calc(.94 + .06*var(--work-morph))); transform-origin:center bottom; }
.work-hub::after { display:none; }
.work-hub-key { display:grid; place-items:center; min-width:28px; height:20px; padding-inline:4px; border:1px solid #e0e1e5; border-radius:6px; color:#777b84; font-size:10px; letter-spacing:.04em; }
.work-hub-label { color:#555a63; font-weight:550; }
.work-hub-arrow { color:#b0b3ba; font-size:15px; }
.work-hub-app { color:var(--site-accent); font-weight:550; }
#keys-experience[data-phase="switching"] .work-hub { border-color:#d9a28f; box-shadow:0 0 0 3px #bc594214,0 7px 18px #2729360d; }
#keys-experience[data-phase="switching"] .work-hub-key { border-color:#bc5942; color:#bc5942; }
.work-keymap-panel { position:absolute; inset:0; padding:8px 10px 10px; border:1px solid #e1e2e6; border-radius:22px; background:linear-gradient(180deg,#fff 0%,#fcfcfd 100%); box-shadow:0 12px 26px #2729360a; opacity:var(--work-content); text-align:left; }
.app-keymap { display:none; }
.keymap-heading { display:flex; gap:7px; align-items:center; justify-content:center; height:30px; color:#4f545d; font-size:12px; line-height:1.2; }
.keymap-heading img { width:18px; height:18px; object-fit:contain; border-radius:3px; }
.keymap-heading small { margin-left:6px; color:#999da5; font-size:10px; font-weight:400; }
.keymap-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-template-rows:repeat(2,70px); gap:9px; margin:0 8px; padding:0 0 4px; opacity:var(--work-map); transform:translateY(calc((1 - var(--work-map))*9px)); }
.keymap-cell { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; min-width:0; border:1px solid #e5e6e8; border-bottom:2px solid #dcdde0; border-radius:12px; background:#fafafb; color:#4f545d; box-shadow:inset 0 1px 0 #fff,0 2px 0 #eeeeef,0 5px 9px #30343b05; }
.keymap-number { position:absolute; top:7px; left:9px; font-size:9px; line-height:1; color:#b1b4bb; font-weight:400; }
.keymap-cell svg { width:23px; height:23px; margin-top:5px; stroke-width:1.5; color:#727782; }
.keymap-name { font-size:12px; line-height:1.25; white-space:nowrap; font-weight:500; letter-spacing:-.015em; }
.keymap-hint { display:block; max-width:100%; overflow:hidden; color:#a0a4ad; font-size:9px; font-weight:400; line-height:1.05; text-overflow:ellipsis; white-space:nowrap; }
.keymap-caption { margin:8px 0 0; text-align:center; color:#a6a9b0; font-size:9px; line-height:1.4; opacity:var(--work-map); }
/* T115: keep the keymap as a visual cue, with shortcut details available on demand. */
.keymap-heading small { display:none; }
.keymap-grid { grid-template-rows:repeat(2,62px); gap:8px; padding-bottom:0; }
.keymap-cell { gap:4px; border-radius:11px; box-shadow:inset 0 1px 0 #fff,0 2px 0 #eeeeef; cursor:help; }
.keymap-cell svg { margin-top:2px; }
.keymap-hint { display:none; position:absolute; z-index:5; left:50%; bottom:-22px; max-width:calc(100% - 10px); padding:3px 6px; border:1px solid #e2e3e6; border-radius:6px; background:#fff; box-shadow:0 4px 12px #30343b14; color:#777b83; font-size:9px; line-height:1; pointer-events:none; transform:translateX(-50%); }
.keymap-cell:hover .keymap-hint, .keymap-cell:focus-visible .keymap-hint { display:block; }
.keymap-caption { margin-top:7px; }
.work-backdrop { position:absolute; inset:0; pointer-events:none; opacity:calc(.12 + var(--work-morph)*.1); }
.work-file-card { position:absolute; left:8px; top:178px; width:154px; height:154px; padding:16px; border:1px solid #e9e9ed; border-radius:9px; background:#fcfcfd; color:#b5b8c0; transform:rotate(-9deg); }
.work-file-card>span { display:block; font-size:10px; margin-bottom:18px; }.work-file-card>i { display:block; height:4px; margin-top:10px; width:90%; border-radius:3px; background:#e7e8ed; }.work-file-card>i:nth-child(2n) { width:66%; }.work-file-card>b { display:block; font-size:24px; font-weight:500; line-height:1.25; color:#c8bda9; }
.work-file-echo { position:absolute; right:22px; top:180px; width:135px; height:151px; border:1px solid #ededf0; border-radius:9px; background:repeating-linear-gradient(0deg,#fafafb 0px,#fafafb 19px,#f1f1f3 20px,#fafafb 21px); transform:rotate(8deg); }
.work-benefit { position:absolute; bottom:24px; left:0; right:0; margin:0; font-size:14px; line-height:1.5; text-align:center; color:#989ba3; opacity:var(--work-map); }.work-benefit strong { font-weight:500; color:#555962; }
.keys-experience[data-work-motion="true"]:is([data-phase="entering"],[data-phase="context"],[data-phase="launch"],[data-phase="choose"]) .work-keymap-panel { visibility:hidden; }
@media(prefers-reduced-motion:no-preference) {
 html[data-work-boot="pending"] .keys-experience:not([data-work-ready]) { --work-morph:0; --work-content:0; --work-map:0; --work-progress:0; }
 html[data-work-boot="pending"] .keys-experience:not([data-work-ready]) .software-item { --fly-progress:0; }
 html[data-work-boot="pending"] .keys-experience:not([data-work-ready]) .work-keymap-panel,
 html[data-work-boot="pending"] .keys-experience:not([data-work-ready]) .work-operation { visibility:hidden; }
}
.work-device { position:relative; display:flex; flex-direction:column; align-items:center; margin-top:8px; }
.work-product { position:relative; width:400px; max-width:100%; margin:0; }.work-product img { display:block; width:100%; height:auto; filter:drop-shadow(0 12px 16px #1d1d1f0b); }.work-key-target { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }.work-key { display:none; opacity:calc(.45 + var(--work-press) * .55); transform:translateY(calc(var(--work-press) * 6px)); }.work-key polygon { fill:rgb(190 82 50 / calc(.12 + var(--work-press) * .18)); stroke:var(--site-accent); stroke-width:5; stroke-linejoin:round; }
.work-map-key { opacity:var(--work-map); }.work-map-key text { fill:#777b81; stroke:#e7e8e7; stroke-width:4px; paint-order:stroke; font-size:64px; text-anchor:middle; font-weight:500; }
.keys-experience[data-active-key="5"] .work-key[data-work-key="5"] { display:block; }
.keys-experience[data-active-key="6"] .work-key[data-work-key="6"] { display:block; }
.keys-experience[data-active-key="7"] .work-key[data-work-key="7"] { display:block; }
.work-operation { margin:0; min-height:20px; font-size:12px; line-height:1.5; color:#7e828b; text-align:center; }
.work-controls { display:flex; align-items:center; justify-content:center; gap:10px; margin-top:8px; font-size:10px; line-height:1.4; color:#9699a2; }
.work-play { display:grid; place-items:center; flex:none; width:28px; height:28px; padding:0; border-radius:50%; background:#f0f0f2; color:#4e5159; }.work-play[hidden] { display:none; }.work-play-icon { display:block; width:0; height:0; margin-left:2px; border-top:4px solid transparent; border-bottom:4px solid transparent; border-left:6px solid currentColor; }.work-play[data-playing="true"] .work-play-icon { width:6px; height:8px; margin-left:0; border:0; border-left:2px solid currentColor; border-right:2px solid currentColor; }
.story-foot { display:flex; justify-content:center; align-items:center; gap:16px; margin-top:9px; text-align:center; }.story-foot p { margin:0; font-size:10px; line-height:1.6; color:var(--muted); }.story-foot .more-link { color:var(--feature-link); font-size:11px; flex:none; }
#work-coding:checked ~ .work-tabs [for="work-coding"],#work-creator:checked ~ .work-tabs [for="work-creator"],#work-office:checked ~ .work-tabs [for="work-office"] { background:var(--ink); color:#fff; border-color:var(--ink); }
#work-coding:checked ~ .work-tabs [for="work-coding"]>span,#work-creator:checked ~ .work-tabs [for="work-creator"]>span,#work-office:checked ~ .work-tabs [for="work-office"]>span { color:inherit; }
#work-coding:checked ~ .work-tabs [for="work-coding"]::after,#work-creator:checked ~ .work-tabs [for="work-creator"]::after,#work-office:checked ~ .work-tabs [for="work-office"]::after { opacity:1; }
#work-coding:checked ~ .workflow-composition [data-work-panel="coding"] { display:block; }
#work-creator:checked ~ .workflow-composition [data-work-panel="creator"] { display:block; }
#work-office:checked ~ .workflow-composition [data-work-panel="office"] { display:block; }
#work-coding:focus-visible ~ .work-tabs [for="work-coding"],#work-creator:focus-visible ~ .work-tabs [for="work-creator"],#work-office:focus-visible ~ .work-tabs [for="work-office"] { outline:2px solid var(--site-accent); outline-offset:4px; }
#work-app-codex:checked ~ .work-morph [data-keymap="codex"] { display:block; }
#work-app-codex:checked ~ .work-apps [for="work-app-codex"] .software-tile { border-color:#bc5942; box-shadow:0 0 0 2px #bc594212,0 6px 18px #27293609; }
#work-app-codex:checked ~ .work-apps [for="work-app-codex"] .software-name { color:#42464e; font-weight:550; }
#work-app-codex:focus-visible ~ .work-apps [for="work-app-codex"] .software-tile { outline:2px solid var(--site-accent); outline-offset:4px; }
#work-app-claude:checked ~ .work-morph [data-keymap="claude"] { display:block; }
#work-app-claude:checked ~ .work-apps [for="work-app-claude"] .software-tile { border-color:#bc5942; box-shadow:0 0 0 2px #bc594212,0 6px 18px #27293609; }
#work-app-claude:checked ~ .work-apps [for="work-app-claude"] .software-name { color:#42464e; font-weight:550; }
#work-app-claude:focus-visible ~ .work-apps [for="work-app-claude"] .software-tile { outline:2px solid var(--site-accent); outline-offset:4px; }
#work-app-workbuddy:checked ~ .work-morph [data-keymap="workbuddy"] { display:block; }
#work-app-workbuddy:checked ~ .work-apps [for="work-app-workbuddy"] .software-tile { border-color:#bc5942; box-shadow:0 0 0 2px #bc594212,0 6px 18px #27293609; }
#work-app-workbuddy:checked ~ .work-apps [for="work-app-workbuddy"] .software-name { color:#42464e; font-weight:550; }
#work-app-workbuddy:focus-visible ~ .work-apps [for="work-app-workbuddy"] .software-tile { outline:2px solid var(--site-accent); outline-offset:4px; }
#work-app-qoder:checked ~ .work-morph [data-keymap="qoder"] { display:block; }
#work-app-qoder:checked ~ .work-apps [for="work-app-qoder"] .software-tile { border-color:#bc5942; box-shadow:0 0 0 2px #bc594212,0 6px 18px #27293609; }
#work-app-qoder:checked ~ .work-apps [for="work-app-qoder"] .software-name { color:#42464e; font-weight:550; }
#work-app-qoder:focus-visible ~ .work-apps [for="work-app-qoder"] .software-tile { outline:2px solid var(--site-accent); outline-offset:4px; }
#work-app-cursor:checked ~ .work-morph [data-keymap="cursor"] { display:block; }
#work-app-cursor:checked ~ .work-apps [for="work-app-cursor"] .software-tile { border-color:#bc5942; box-shadow:0 0 0 2px #bc594212,0 6px 18px #27293609; }
#work-app-cursor:checked ~ .work-apps [for="work-app-cursor"] .software-name { color:#42464e; font-weight:550; }
#work-app-cursor:focus-visible ~ .work-apps [for="work-app-cursor"] .software-tile { outline:2px solid var(--site-accent); outline-offset:4px; }
#work-app-vscode:checked ~ .work-morph [data-keymap="vscode"] { display:block; }
#work-app-vscode:checked ~ .work-apps [for="work-app-vscode"] .software-tile { border-color:#bc5942; box-shadow:0 0 0 2px #bc594212,0 6px 18px #27293609; }
#work-app-vscode:checked ~ .work-apps [for="work-app-vscode"] .software-name { color:#42464e; font-weight:550; }
#work-app-vscode:focus-visible ~ .work-apps [for="work-app-vscode"] .software-tile { outline:2px solid var(--site-accent); outline-offset:4px; }
#work-app-photoshop:checked ~ .work-morph [data-keymap="photoshop"] { display:block; }
#work-app-photoshop:checked ~ .work-apps [for="work-app-photoshop"] .software-tile { border-color:#bc5942; box-shadow:0 0 0 2px #bc594212,0 6px 18px #27293609; }
#work-app-photoshop:checked ~ .work-apps [for="work-app-photoshop"] .software-name { color:#42464e; font-weight:550; }
#work-app-photoshop:focus-visible ~ .work-apps [for="work-app-photoshop"] .software-tile { outline:2px solid var(--site-accent); outline-offset:4px; }
#work-app-jianying:checked ~ .work-morph [data-keymap="jianying"] { display:block; }
#work-app-jianying:checked ~ .work-apps [for="work-app-jianying"] .software-tile { border-color:#bc5942; box-shadow:0 0 0 2px #bc594212,0 6px 18px #27293609; }
#work-app-jianying:checked ~ .work-apps [for="work-app-jianying"] .software-name { color:#42464e; font-weight:550; }
#work-app-jianying:focus-visible ~ .work-apps [for="work-app-jianying"] .software-tile { outline:2px solid var(--site-accent); outline-offset:4px; }
#work-app-figma:checked ~ .work-morph [data-keymap="figma"] { display:block; }
#work-app-figma:checked ~ .work-apps [for="work-app-figma"] .software-tile { border-color:#bc5942; box-shadow:0 0 0 2px #bc594212,0 6px 18px #27293609; }
#work-app-figma:checked ~ .work-apps [for="work-app-figma"] .software-name { color:#42464e; font-weight:550; }
#work-app-figma:focus-visible ~ .work-apps [for="work-app-figma"] .software-tile { outline:2px solid var(--site-accent); outline-offset:4px; }
#work-app-canva:checked ~ .work-morph [data-keymap="canva"] { display:block; }
#work-app-canva:checked ~ .work-apps [for="work-app-canva"] .software-tile { border-color:#bc5942; box-shadow:0 0 0 2px #bc594212,0 6px 18px #27293609; }
#work-app-canva:checked ~ .work-apps [for="work-app-canva"] .software-name { color:#42464e; font-weight:550; }
#work-app-canva:focus-visible ~ .work-apps [for="work-app-canva"] .software-tile { outline:2px solid var(--site-accent); outline-offset:4px; }
#work-app-premiere:checked ~ .work-morph [data-keymap="premiere"] { display:block; }
#work-app-premiere:checked ~ .work-apps [for="work-app-premiere"] .software-tile { border-color:#bc5942; box-shadow:0 0 0 2px #bc594212,0 6px 18px #27293609; }
#work-app-premiere:checked ~ .work-apps [for="work-app-premiere"] .software-name { color:#42464e; font-weight:550; }
#work-app-premiere:focus-visible ~ .work-apps [for="work-app-premiere"] .software-tile { outline:2px solid var(--site-accent); outline-offset:4px; }
#work-app-illustrator:checked ~ .work-morph [data-keymap="illustrator"] { display:block; }
#work-app-illustrator:checked ~ .work-apps [for="work-app-illustrator"] .software-tile { border-color:#bc5942; box-shadow:0 0 0 2px #bc594212,0 6px 18px #27293609; }
#work-app-illustrator:checked ~ .work-apps [for="work-app-illustrator"] .software-name { color:#42464e; font-weight:550; }
#work-app-illustrator:focus-visible ~ .work-apps [for="work-app-illustrator"] .software-tile { outline:2px solid var(--site-accent); outline-offset:4px; }
#work-app-word:checked ~ .work-morph [data-keymap="word"] { display:block; }
#work-app-word:checked ~ .work-apps [for="work-app-word"] .software-tile { border-color:#bc5942; box-shadow:0 0 0 2px #bc594212,0 6px 18px #27293609; }
#work-app-word:checked ~ .work-apps [for="work-app-word"] .software-name { color:#42464e; font-weight:550; }
#work-app-word:focus-visible ~ .work-apps [for="work-app-word"] .software-tile { outline:2px solid var(--site-accent); outline-offset:4px; }
#work-app-feishu:checked ~ .work-morph [data-keymap="feishu"] { display:block; }
#work-app-feishu:checked ~ .work-apps [for="work-app-feishu"] .software-tile { border-color:#bc5942; box-shadow:0 0 0 2px #bc594212,0 6px 18px #27293609; }
#work-app-feishu:checked ~ .work-apps [for="work-app-feishu"] .software-name { color:#42464e; font-weight:550; }
#work-app-feishu:focus-visible ~ .work-apps [for="work-app-feishu"] .software-tile { outline:2px solid var(--site-accent); outline-offset:4px; }
#work-app-excel:checked ~ .work-morph [data-keymap="excel"] { display:block; }
#work-app-excel:checked ~ .work-apps [for="work-app-excel"] .software-tile { border-color:#bc5942; box-shadow:0 0 0 2px #bc594212,0 6px 18px #27293609; }
#work-app-excel:checked ~ .work-apps [for="work-app-excel"] .software-name { color:#42464e; font-weight:550; }
#work-app-excel:focus-visible ~ .work-apps [for="work-app-excel"] .software-tile { outline:2px solid var(--site-accent); outline-offset:4px; }
#work-app-powerpoint:checked ~ .work-morph [data-keymap="powerpoint"] { display:block; }
#work-app-powerpoint:checked ~ .work-apps [for="work-app-powerpoint"] .software-tile { border-color:#bc5942; box-shadow:0 0 0 2px #bc594212,0 6px 18px #27293609; }
#work-app-powerpoint:checked ~ .work-apps [for="work-app-powerpoint"] .software-name { color:#42464e; font-weight:550; }
#work-app-powerpoint:focus-visible ~ .work-apps [for="work-app-powerpoint"] .software-tile { outline:2px solid var(--site-accent); outline-offset:4px; }
#work-app-notion:checked ~ .work-morph [data-keymap="notion"] { display:block; }
#work-app-notion:checked ~ .work-apps [for="work-app-notion"] .software-tile { border-color:#bc5942; box-shadow:0 0 0 2px #bc594212,0 6px 18px #27293609; }
#work-app-notion:checked ~ .work-apps [for="work-app-notion"] .software-name { color:#42464e; font-weight:550; }
#work-app-notion:focus-visible ~ .work-apps [for="work-app-notion"] .software-tile { outline:2px solid var(--site-accent); outline-offset:4px; }
#work-app-chrome:checked ~ .work-morph [data-keymap="chrome"] { display:block; }
#work-app-chrome:checked ~ .work-apps [for="work-app-chrome"] .software-tile { border-color:#bc5942; box-shadow:0 0 0 2px #bc594212,0 6px 18px #27293609; }
#work-app-chrome:checked ~ .work-apps [for="work-app-chrome"] .software-name { color:#42464e; font-weight:550; }
#work-app-chrome:focus-visible ~ .work-apps [for="work-app-chrome"] .software-tile { outline:2px solid var(--site-accent); outline-offset:4px; }
@media(min-width:821px) and (max-height:780px) {
 #keys { padding-block:8px; }#keys .section-heading { margin-bottom:8px; }#keys .section-heading .eyebrow { margin-bottom:5px; font-size:12px; }#keys .section-heading h2 { font-size:36px; }#keys .section-heading>p:not(.eyebrow) { font-size:13px; margin-top:7px; }
 .keys-experience { --panel-h:180px; --panel-w:470px; --tile-size:44px; --app-step:min(76px,calc((100% - 54px)/6)); }.work-tabs { margin-bottom:8px; }.work-tabs label { min-height:32px; padding:6px 17px; font-size:12px; }.work-screen { height:334px; }.software-icon { width:27px; height:27px; }.software-tile { border-radius:12px; }.software-item { gap:5px; font-size:9px; }.software-item[data-position="0"],.software-item[data-position="3"],.software-item[data-position="4"] { --slot-y:22px; }.software-name small { display:none; }.work-morph { top:125px; }.work-hub { top:-28px; }.keymap-heading { height:27px; }.keymap-grid { grid-template-rows:repeat(2,59px); gap:8px; }.keymap-cell { gap:3px; border-radius:10px; }.keymap-cell svg { width:20px; height:20px; margin-top:2px; }.keymap-name { font-size:11px; }.keymap-hint { font-size:8px; }.keymap-caption { margin-top:5px; }.work-benefit { bottom:0; font-size:12px; }.work-device { margin-top:0; }.work-product { width:300px; }.work-operation { font-size:11px; min-height:17px; }.work-controls { margin-top:2px; }.work-play { width:24px; height:24px; }.story-foot { margin-top:4px; }
}
@media(max-width:820px) {
 #keys { padding-block:18px; }#keys .section-heading { width:100%; }#keys .section-heading h2 { font-size:clamp(29px,5.8vw,42px); }#keys .section-heading>p:not(.eyebrow) { font-size:14px; margin-top:8px; }.keys-experience { --panel-w:min(440px,calc(100% - 8px)); }.work-benefit { bottom:0; }.story-foot { gap:4px; flex-direction:column; }
}
@media(max-width:600px) {
 #keys { padding-block:12px; }#keys .section-heading { margin-bottom:12px; }#keys .section-heading>p:not(.eyebrow) { font-size:12px; }.keys-experience { --tile-size:42px; --app-step:calc((100% - 52px)/6); --panel-w:100%; --panel-h:180px; }.work-tabs { gap:6px; margin-bottom:12px; }.work-tabs label { min-height:34px; font-size:11px; padding:7px 11px; gap:4px; }.work-tabs label>span { font-size:12px; }.work-screen { height:390px; }.software-item { gap:6px; font-size:9px; }.software-item[data-position="0"] { --slot-x:0; --slot-y:74px; }.software-item[data-position="1"] { --slot-x:-3; --slot-y:0px; }.software-item[data-position="2"] { --slot-x:-1; --slot-y:8px; }.software-item[data-position="3"] { --slot-x:1; --slot-y:0px; }.software-item[data-position="4"] { --slot-x:3; --slot-y:8px; }.software-item[data-position="5"] { --slot-x:-2; --slot-y:72px; }.software-item[data-position="6"] { --slot-x:2; --slot-y:72px; }.software-tile { border-radius:12px; }.software-icon { width:27px; height:27px; border-radius:6px; }.software-name { width:65px; }.software-name small { display:none; }.software-more .software-tile { font-size:24px; }.software-more .software-name { font-size:8px; }.work-morph { top:170px; }.work-hub { top:-28px; font-size:10px; gap:6px; padding-right:9px; }.work-hub-key { min-width:25px; height:19px; font-size:9px; }.keymap-heading { height:26px; font-size:11px; }.keymap-heading small { font-size:9px; }.keymap-grid { margin:0 4px; gap:7px; grid-template-rows:repeat(2,61px); }.keymap-cell { gap:3px; border-radius:10px; }.keymap-number { top:6px; left:7px; font-size:8px; }.keymap-cell svg { width:21px; height:21px; }.keymap-name { font-size:10.5px; }.keymap-hint { font-size:7.5px; }.keymap-caption { font-size:9px; margin-top:7px; }.work-file-card { left:0; width:105px; padding:10px; }.work-file-echo { right:0; width:105px; }.work-benefit { font-size:12px; }.work-product { width:250px; }.work-operation { min-height:20px; font-size:11px; }.work-controls { margin-top:4px; }.story-foot { margin-top:8px; }.story-foot p { font-size:10px; }
}
@media(max-width:380px) {
 #keys .section-heading h2 { font-size:26px; }.software-name { font-size:8px; width:58px; }.software-more .software-name { font-size:8px; }.work-tabs label { font-size:10px; padding-inline:8px; }.keymap-grid { gap:6px; }.keymap-name { font-size:9px; }.keymap-cell svg { width:20px; height:20px; }.work-benefit { font-size:11px; }
}

/* Existing task-light compact layouts are unchanged. */
@media(min-width:821px) and (max-height:740px) {
 #agent .section-heading h2 { font-size:40px; }
 #agent .section-heading>p:not(.eyebrow) { font-size:15px; margin-top:8px; }
}
@media(max-width:820px) and (max-height:740px) {
 #agent .section-heading h2 { font-size:34px; }
 #agent .section-heading>p:not(.eyebrow) { display:block; font-size:13px; margin-top:8px; }
 .signal-layout { gap:12px; }
 .signal-state-display { min-height:88px; }
 .signal-controls { margin-top:16px; }
 .signal-footer { margin-top:4px; }
 .signal-conditions { margin-top:8px; }
}
@media(max-width:380px) { #agent .section-heading h2 { font-size:32px; } }
@media(max-width:760px) and (max-height:650px) {
 #agent { padding-block:12px; }
 #agent .section-heading { width:100%; margin-bottom:12px; }
 #agent .section-heading h2 { font-size:28px; line-height:1.15; }
 .signal-layout { gap:10px; }
 .signal-state-display { min-height:76px; }
 .signal-controls { margin-top:12px; }
 #agent .section-heading .eyebrow { display:block; font-size:12px; margin-bottom:4px; }
 #agent .signal-product { width:min(100%,280px); }
 #agent .agent-sound { margin-top:10px; padding-top:10px; margin-bottom:8px; }
 #agent .agent-sound h3 { font-size:13px; }
}