/* Erulab · Sunny Bytes Solution: shared styles for / and /lab/ */
  :root {
    --bg: #f2eddf; --bg-2: #e9e2d0; --card: #faf7ef; --ink: #14191b; --ink-2: #5c6664; --line: #d6cdb8;
    --accent: #A2442E; --accent-ink: #fff; --ok: #2f6b45; --shadow: 0 1px 2px rgba(20,25,27,.05), 0 10px 28px rgba(20,25,27,.07);
    color-scheme: light;
  }
  * { box-sizing: border-box; }
  @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
  body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.6 Geist, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
  img, video { max-width: 100%; height: auto; display: block; }
  a { color: inherit; }
  .wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
  .mono { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
  h1, h2, h3 { font-family: "Instrument Serif", Georgia, serif; font-weight: 400; letter-spacing: -.005em; margin: 0; }
  h2 { font-size: clamp(34px, 4.4vw, 52px); line-height: 1.05; }
  h3 { font-size: 26px; line-height: 1.15; }
  h2 em, h3 em, h1 em { color: var(--accent); }
  p { margin: 0; }
  section { padding: 88px 0; border-top: 1px solid var(--line); scroll-margin-top: 60px; }
  .kicker { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; color: var(--accent); }
  .kicker::before { content: ""; width: 28px; height: 1px; background: var(--accent); }
  .lead { color: var(--ink-2); font-size: 18px; max-width: 660px; margin-top: 16px; }

  /* nav */
  nav { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
  nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 60px; gap: 16px; }
  .brand { display: flex; align-items: baseline; gap: 12px; text-decoration: none; min-width: 0; }
  .logo { font-family: "Instrument Serif", serif; font-size: 26px; white-space: nowrap; }
  .logo .x { display: inline-block; min-width: .5em; color: var(--accent); transition: opacity .22s ease; }
  .brand-tag { font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .22s ease; }
  .links { display: flex; gap: 20px; align-items: center; }
  .links a { text-decoration: none; font-size: 14px; color: var(--ink-2); }
  .links a:hover { color: var(--ink); }
  .btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 999px; font-weight: 500; font-size: 15px; text-decoration: none; border: 1px solid var(--ink); background: transparent; color: var(--ink); cursor: pointer; font-family: inherit; }
  .btn:hover { background: var(--ink); color: var(--bg); }
  .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
  .btn.primary:hover { filter: brightness(.92); }
  .btn.small { padding: 8px 14px; font-size: 14px; }
  @media (max-width: 980px) { .links a:not(.btn) { display: none; } }
  @media (max-width: 560px) { .brand-tag { display: none; } }

  /* hero */
  .hero { position: relative; padding: 56px 0 72px; border-top: 0; overflow: hidden; }
  .topo { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .09; pointer-events: none; }
  .hero .wrap { position: relative; }
  .hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
  .hero h1 { font-size: clamp(44px, 6vw, 76px); line-height: 1; }
  .avail { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
  .avail span { font-size: 13px; padding: 6px 12px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); }
  .avail span::before { content: "●"; color: var(--ok); margin-right: 6px; font-size: 10px; vertical-align: 1px; }
  .hero .cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
  .hero figure { margin: 0; }
  .hero figure img { border-radius: 14px; box-shadow: var(--shadow); aspect-ratio: 4/3; object-fit: cover; width: 100%; }
  .hero figcaption { margin-top: 10px; }
  .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin-top: 56px; }
  .stat { background: var(--card); padding: 20px 22px; }
  .stat b { display: block; font-family: "Instrument Serif", serif; font-weight: 400; font-size: 36px; line-height: 1.05; }
  .stat span { color: var(--ink-2); font-size: 14px; }
  @media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } .stats { grid-template-columns: 1fr; } }

  /* cards */
  .grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }
  .card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 26px; box-shadow: var(--shadow); }
  .card p { color: var(--ink-2); margin-top: 10px; }
  .card ul { margin: 14px 0 0; padding-left: 18px; color: var(--ink-2); font-size: 15px; }
  .card li { margin-bottom: 4px; }
  .num { font-family: "JetBrains Mono", monospace; color: var(--accent); font-size: 13px; margin-bottom: 14px; display: block; }
  @media (max-width: 900px) { .grid3 { grid-template-columns: 1fr; } }

  /* case studies */
  .case { display: grid; grid-template-columns: 1.1fr .9fr; gap: 44px; align-items: center; margin-top: 56px; }
  .case + .case { margin-top: 80px; }
  .case.flip > :first-child { order: 2; }
  .shot { border-radius: 12px; border: 1px solid var(--line); overflow: hidden; background: #fff; box-shadow: var(--shadow); }
  .shot + .shot { margin-top: 14px; }
  .shot img { width: 100%; }
  .cap { margin-top: 8px; font-size: 13px; color: var(--ink-2); }
  .eru { font-family: "Instrument Serif", serif; font-size: 44px; line-height: 1; }
  .eru small { font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); margin-left: 10px; vertical-align: 8px; }
  .tag { display: inline-block; font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; padding: 4px 8px; border-radius: 6px; background: var(--bg-2); color: var(--ink-2); margin: 0 6px 6px 0; }
  .tag.live { background: color-mix(in srgb, var(--ok) 15%, transparent); color: var(--ok); }
  .prb { display: grid; grid-template-columns: 84px 1fr; gap: 8px 14px; margin-top: 18px; font-size: 15px; }
  .prb dt { font-family: "JetBrains Mono", monospace; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); padding-top: 3px; }
  .prb dd { margin: 0; color: var(--ink-2); }
  .prb dd b { color: var(--ink); font-weight: 500; }
  @media (max-width: 900px) { .case { grid-template-columns: 1fr; gap: 24px; } .case.flip > :first-child { order: 0; } }

  /* youtube (loads only when clicked) */
  .yt { position: relative; display: block; width: 100%; aspect-ratio: 16/9; border: 0; padding: 0; border-radius: 12px; overflow: hidden; cursor: pointer; background: #111 center/cover no-repeat; box-shadow: var(--shadow); }
  .yt::after { content: "▶"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 72px; height: 72px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 26px; display: grid; place-items: center; padding-left: 4px; box-shadow: 0 6px 20px rgba(0,0,0,.35); }
  .yt:hover::after { filter: brightness(1.08); }
  .yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
  .yt.on::after { display: none; }

  /* family */
  .family { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 64px; }
  .fam { border: 1px solid var(--line); border-radius: 12px; padding: 20px; background: var(--card); }
  .fam b { font-family: "Instrument Serif", serif; font-weight: 400; font-size: 28px; }
  .fam p { color: var(--ink-2); font-size: 15px; margin-top: 6px; }
  @media (max-width: 760px) { .family { grid-template-columns: 1fr; } }

  /* quote placeholder */
  .quote { margin: 72px auto 0; max-width: 820px; text-align: center; }
  .quote blockquote { margin: 0; font-family: "Instrument Serif", serif; font-size: clamp(26px, 3vw, 34px); line-height: 1.25; }
  .quote cite { display: block; margin-top: 16px; font-style: normal; }
  .quote.is-placeholder { border: 1.5px dashed var(--accent); border-radius: 14px; padding: 28px; }
  .quote.is-placeholder blockquote { color: var(--ink-2); }

  /* teaching */
  .gallery { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 12px; margin-top: 40px; }
  .gallery img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
  .gallery .big { grid-row: span 2; }
  .gallery .wide { grid-column: span 2; }
  .ideas { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-top: 40px; }
  .idea { border-top: 2px solid var(--accent); padding-top: 14px; }
  .idea b { display: block; font-size: 15px; font-weight: 600; margin-bottom: 6px; }
  .idea span { font-size: 14px; color: var(--ink-2); }
  @media (max-width: 900px) { .gallery { grid-template-columns: 1fr 1fr; } .gallery .big { grid-column: span 2; grid-row: auto; } .ideas { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 520px) { .ideas { grid-template-columns: 1fr; } }

  /* built with AI */
  .feature { display: grid; grid-template-columns: 1.3fr .7fr; gap: 36px; align-items: center; margin-top: 40px; }
  .tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; }
  .tile { background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
  .tile img { aspect-ratio: 16/10; object-fit: cover; width: 100%; background: var(--bg-2); }
  .tile .t { padding: 18px 20px 22px; }
  .tile p { color: var(--ink-2); font-size: 15px; margin-top: 6px; }
  @media (max-width: 900px) { .feature { grid-template-columns: 1fr; } .tiles { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 560px) { .tiles { grid-template-columns: 1fr; } }

  /* before / after */

  /* farm */
  .farm { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 40px; }
  .farm img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 10px; }
  .farm-row { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: center; margin-top: 40px; }
  @media (max-width: 760px) { .farm { grid-template-columns: 1fr 1fr; } .farm-row { grid-template-columns: 1fr; } }

  /* about */
  .about { display: grid; grid-template-columns: 300px 1fr; gap: 48px; align-items: start; }
  .about img { border-radius: 14px; aspect-ratio: 3/4; object-fit: cover; width: 100%; box-shadow: var(--shadow); }
  .tl { margin-top: 32px; }
  .tl-row { display: grid; grid-template-columns: 130px 1fr; gap: 24px; padding: 16px 0; border-bottom: 1px solid var(--line); }
  .tl-row:first-child { border-top: 1px solid var(--line); }
  .tl-row b { font-weight: 600; }
  .tl-row p { color: var(--ink-2); font-size: 15px; margin-top: 4px; }
  @media (max-width: 760px) { .about { grid-template-columns: 1fr; } .about img { max-width: 280px; } .tl-row { grid-template-columns: 1fr; gap: 4px; } }

  /* contact */
  .engage .card b { font-family: "Instrument Serif", serif; font-weight: 400; font-size: 30px; display: block; margin-top: 4px; line-height: 1.1; }
  .contact { text-align: center; }
  .contact h2 { font-size: clamp(38px, 5.4vw, 64px); }
  .contact .cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 28px; }
  footer { padding: 32px 0 48px; color: var(--ink-2); font-size: 14px; border-top: 1px solid var(--line); }
  footer .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

  /* ==== Oct 2026: film, solutions, 60-second facts, training formats, why an engineer ==== */
  .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; }
  .film { margin:0; }
  .film canvas { width:100%; height:auto; aspect-ratio:16/9; display:block; border-radius:14px; border:1px solid var(--line); background:#F2EDDF; box-shadow:var(--shadow); cursor:pointer; }
  .film-ui { display:flex; align-items:center; gap:12px; margin-top:10px; }
  #film-play { width:34px; height:34px; border-radius:50%; border:1px solid var(--ink); background:transparent; color:var(--ink); cursor:pointer; font-size:11px; flex-shrink:0; }
  #film-play:hover { background:var(--ink); color:var(--bg); }
  .film-bar { flex:1; display:grid; grid-template-columns:repeat(6,1fr); gap:5px; }
  .film-bar button { position:relative; height:18px; border:0; padding:0; background:none; cursor:pointer; }
  .film-bar button::before { content:""; position:absolute; left:0; right:0; top:7.5px; height:3px; border-radius:2px; background:var(--line); }
  .film-bar button i { position:absolute; left:0; top:7.5px; height:3px; width:0; border-radius:2px; background:var(--accent); }
  .stats { grid-template-columns:repeat(4,1fr); }
  .sol { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:40px; }
  .sol .card { display:flex; flex-direction:column; }
  .sol .card h3 { margin-top:4px; }
  .sol .card p { flex:1; }
  .sol .tag { align-self:flex-start; margin:16px 0 0; }
  .steps { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(4,1fr); border-top:2px solid var(--ink); counter-reset:s; }
  .steps li { padding:18px 22px 0 0; counter-increment:s; }
  .steps li::before { content:"0" counter(s); display:block; margin-bottom:8px; font-family:"JetBrains Mono",monospace; font-size:12px; color:var(--accent); }
  .steps b { display:block; font-family:"Instrument Serif",serif; font-weight:400; font-size:32px; line-height:1; }
  .steps span { display:block; margin-top:8px; font-size:15px; color:var(--ink-2); }
  .steps i { display:inline-block; margin-top:12px; padding:2px 10px; border:1px solid var(--line); border-radius:999px; font-style:normal; font-family:"JetBrains Mono",monospace; font-size:11px; color:var(--ink-2); }
  .method-more { margin-top:28px; color:var(--ink-2); }
  .method-more a { color:var(--accent); }
  .learn60 { background:var(--bg-2); }
  .facts { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:36px; }
  .fact { position:relative; height:230px; padding:0; border:0; background:none; color:inherit; font:inherit; text-align:left; cursor:pointer; perspective:1100px; border-radius:14px; }
  .fact > span { position:absolute; inset:0; display:flex; flex-direction:column; gap:10px; padding:22px; border-radius:14px; border:1px solid var(--line); backface-visibility:hidden; -webkit-backface-visibility:hidden; transition:transform .6s cubic-bezier(.2,.7,.2,1), border-color .2s ease; }
  .fact .front { background:var(--card); box-shadow:var(--shadow); }
  .fact .back { background:var(--ink); color:var(--bg); transform:rotateY(180deg); }
  .fact.flipped .front { transform:rotateY(-180deg); }
  .fact.flipped .back { transform:rotateY(0); }
  .fact i { font-style:normal; font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); }
  .fact .back i { color:#eda78f; }
  .fact b { font-family:"Instrument Serif",serif; font-weight:400; font-size:27px; line-height:1.12; }
  .fact .front em { margin-top:auto; font-style:normal; font-family:"JetBrains Mono",monospace; font-size:11px; color:var(--ink-2); }
  .fact .front em::after { content:" ↻"; color:var(--accent); }
  .fact .back > span { font-size:15px; line-height:1.5; color:rgba(242,237,223,.86); }
  .fact .back strong { color:#fff; font-weight:600; }
  .fact:hover .front { border-color:var(--accent); }
  .fact:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
  .facts-foot { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; margin-top:26px; }
  .facts-foot .mono { color:var(--accent); }
  @media (prefers-reduced-motion: reduce) { .fact > span { transition:none; } }
  .formats .card h3 { margin-top:6px; }
  .formats-note { margin-top:18px; color:var(--ink-2); font-size:15px; }
  .vs { margin-top:36px; border-top:2px solid var(--ink); }
  .vs-row { display:grid; grid-template-columns:210px 1fr 1fr; gap:24px; padding:15px 0; border-bottom:1px solid var(--line); align-items:baseline; }
  .vs-row > span:first-child { font-family:"JetBrains Mono",monospace; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2); }
  .vs-row > span:nth-child(2) { color:var(--ink-2); }
  .vs-row > span:nth-child(3) { font-weight:500; }
  .vs-head > span { font-family:"JetBrains Mono",monospace !important; font-size:12px; letter-spacing:.08em; text-transform:uppercase; font-weight:400 !important; }
  .vs-head > span:nth-child(3) { color:var(--accent); }
  @media (max-width:980px) { .sol, .facts { grid-template-columns:1fr 1fr; } .steps { grid-template-columns:1fr 1fr; row-gap:24px; } .stats { grid-template-columns:1fr 1fr; } }
  @media (max-width:600px) {
    .sol, .facts, .steps, .stats { grid-template-columns:1fr; }
    .vs-row { grid-template-columns:1fr; gap:4px; } .vs-head { display:none; }
    .vs-row > span:nth-child(2)::before { content:"Typical course: "; }
    .vs-row > span:nth-child(3)::before { content:"Sunny Bytes: "; color:var(--accent); }
  }

  .edge-band { background:var(--ink); color:var(--bg); border-top:0; }
  .edge-band h2 { max-width:900px; }
  .edge-band h2 em { color:#eda78f; }
  .edge-band .kicker { color:#eda78f; }
  .edge-band .kicker::before { background:#eda78f; }
  .edge { display:grid; grid-template-columns:repeat(4,1fr); gap:28px; margin-top:44px; }
  .edge > div { border-top:1px solid rgba(242,237,223,.25); padding-top:16px; }
  .edge i { font-style:normal; font-family:"JetBrains Mono",monospace; font-size:12px; color:#eda78f; }
  .edge b { display:block; margin-top:8px; font-family:"Instrument Serif",serif; font-weight:400; font-size:28px; line-height:1.05; }
  .edge span { display:block; margin-top:10px; font-size:15px; line-height:1.55; color:rgba(242,237,223,.78); }
  .sol .card p { margin-top:10px; }
  .sol .card p.pain { flex:0; color:var(--ink); }
  .sol .card p b { display:inline-block; min-width:44px; margin-right:6px; font-family:"JetBrains Mono",monospace; font-size:10.5px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); }
  .sol .card p b.fix { color:var(--ok); }
  @media (max-width:980px) { .edge { grid-template-columns:1fr 1fr; } }
  @media (max-width:600px) { .edge { grid-template-columns:1fr; gap:20px; } }

  /* ==== v2: trust strip, handover, calculator, lab teaser, FAQ, /lab ==== */
  .trust { display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:22px; padding:14px 0 0; border-top:1px solid var(--line); font-size:14px; color:var(--ink-2); }
  .trust span::before { content:"✓"; color:var(--ok); margin-right:7px; font-weight:600; }
  .trust b { color:var(--ink); font-weight:600; }
  .hand { display:grid; grid-template-columns:1fr 1fr; gap:40px; margin-top:56px; }
  .ticks { list-style:none; margin:0; padding:0; }
  .ticks li { position:relative; padding:9px 0 9px 28px; border-bottom:1px solid var(--line); font-size:16px; }
  .ticks li::before { content:"✓"; position:absolute; left:2px; top:9px; color:var(--ok); font-weight:700; }
  .calc { display:grid; grid-template-columns:1.1fr 1.2fr .9fr; gap:28px; align-items:start; margin-top:56px; padding:28px; border:1px solid var(--line); border-radius:16px; background:var(--card); box-shadow:var(--shadow); }
  .calc-head h3 { margin-top:2px; }
  .calc-head p { margin-top:8px; color:var(--ink-2); font-size:15px; }
  .calc-in { display:flex; flex-direction:column; gap:14px; }
  .calc-in label { display:grid; grid-template-columns:150px 1fr 82px; gap:12px; align-items:center; font-size:14px; color:var(--ink-2); }
  .calc-in output { font-family:"JetBrains Mono",monospace; font-size:12.5px; color:var(--ink); text-align:right; }
  .calc input[type=range] { width:100%; accent-color:var(--accent); }
  .calc-out { display:flex; flex-direction:column; gap:12px; }
  .calc-out b { display:block; font-family:"Instrument Serif",serif; font-weight:400; font-style:italic; font-size:38px; line-height:1; color:var(--accent); }
  .calc-out span { font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2); }
  .calc-out p { font-size:12.5px; color:var(--ink-2); }
  .calc-out p a { color:var(--accent); }
  .calc-out .btn { align-self:flex-start; }
  .lab-teaser { background:var(--bg-2); }
  .lt { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:36px; }
  .lt a { display:flex; flex-direction:column; text-decoration:none; background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden; transition:transform .2s ease, border-color .2s ease; }
  .lt a:hover { transform:translateY(-3px); border-color:var(--accent); }
  .lt img { width:100%; aspect-ratio:16/10; object-fit:cover; }
  .lt b { font-family:"Instrument Serif",serif; font-weight:400; font-size:24px; padding:14px 18px 0; }
  .lt span { padding:4px 18px 18px; color:var(--ink-2); font-size:14.5px; }
  .engage .card .more { display:inline-block; margin-top:14px; color:var(--accent); font-weight:500; text-decoration:none; }
  .engage .card .more:hover { text-decoration:underline; }
  .faq details { border-bottom:1px solid var(--line); }
  .faq details:first-of-type { border-top:2px solid var(--ink); }
  .faq summary { list-style:none; cursor:pointer; padding:18px 36px 18px 0; position:relative; font-family:"Instrument Serif",serif; font-size:24px; line-height:1.2; }
  .faq summary::-webkit-details-marker { display:none; }
  .faq summary::after { content:"+"; position:absolute; right:4px; top:16px; font-family:"JetBrains Mono",monospace; font-size:20px; color:var(--accent); transition:transform .2s ease; }
  .faq details[open] summary::after { transform:rotate(45deg); }
  .faq details p { padding:0 0 18px; max-width:760px; color:var(--ink-2); font-size:16px; }
  .lab-hero h1 { max-width:900px; }
  .lab-hero .lead a { color:var(--accent); }
  a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
  @media (max-width:980px) { .calc { grid-template-columns:1fr; } .lt { grid-template-columns:1fr 1fr; } }
  @media (max-width:600px) { .hand { grid-template-columns:1fr; gap:24px; } .lt { grid-template-columns:1fr; } .calc { padding:20px; } .calc-in label { grid-template-columns:1fr 70px; } .calc-in label span { grid-column:1 / -1; } .faq summary { font-size:21px; } }

  /* ==== v3: menu, film captions, guess-first facts, courses, ways to start, mobile rhythm ==== */
  .menu-btn { display:none; font:500 14px Geist, system-ui, sans-serif; padding:8px 14px; border-radius:999px; border:1px solid var(--ink); background:transparent; color:var(--ink); cursor:pointer; }
  @media (max-width:980px) {
    .menu-btn { display:inline-flex; margin-left:auto; }
    nav .wrap { gap:10px; }
    .links.open { display:flex; flex-direction:column; align-items:stretch; gap:4px; position:absolute; top:58px; right:16px; left:16px; padding:14px; background:var(--bg); border:1px solid var(--line); border-radius:14px; box-shadow:0 18px 40px rgba(20,25,27,.14); }
    .links.open a:not(.btn) { display:block; padding:10px 8px; font-size:16px; color:var(--ink); border-bottom:1px solid var(--line); }
    .links.open .btn { justify-content:center; margin-top:8px; }
  }
  .film-stage { position:relative; }
  .film-end { position:absolute; inset:0; display:flex; flex-wrap:wrap; align-items:flex-end; align-content:flex-end; gap:10px; padding:18px; border-radius:14px; background:linear-gradient(to bottom, rgba(242,237,223,0) 35%, rgba(242,237,223,.94) 78%); }
  .film-end[hidden] { display:none; }
  .film-end .btn { font-size:14px; padding:10px 16px; background:var(--bg); }
  .film-end .btn.primary { background:var(--accent); }
  .film-cap { margin-top:12px; min-height:2.6em; font-family:"Instrument Serif",serif; font-size:22px; line-height:1.25; color:var(--ink); }
  .film-cap:lang(zh) { font-family:"PingFang SC","Noto Sans SC",system-ui,sans-serif; font-size:19px; }
  .film-lang { display:flex; gap:2px; flex-shrink:0; }
  .film-lang button { font:500 11px "JetBrains Mono",monospace; padding:5px 8px; border:1px solid var(--line); background:transparent; color:var(--ink-2); cursor:pointer; border-radius:6px; }
  .film-lang button.on { background:var(--ink); color:var(--bg); border-color:var(--ink); }
  .film-note { margin-top:6px; font-size:12.5px; color:var(--ink-2); }
  .facts { align-items:stretch; }
  .fact { position:relative; height:330px; perspective:1100px; border-radius:14px; }
  .fact .face { position:absolute; inset:0; display:flex; flex-direction:column; gap:10px; padding:20px 22px; border-radius:14px; border:1px solid var(--line); backface-visibility:hidden; -webkit-backface-visibility:hidden; transition:transform .6s cubic-bezier(.2,.7,.2,1); }
  .fact .front { background:var(--card); box-shadow:var(--shadow); }
  .fact .back { background:var(--card); transform:rotateY(180deg); }
  .fact.flipped .front { transform:rotateY(-180deg); }
  .fact.flipped .back { transform:rotateY(0); }
  .fact .front b { font-size:28px; }
  .guess { display:flex; gap:10px; margin-top:auto; }
  .guess button { flex:1; padding:12px 0; border-radius:999px; border:1px solid var(--ink); background:transparent; color:var(--ink); font:600 15px Geist, system-ui, sans-serif; cursor:pointer; }
  .guess button:hover { background:var(--ink); color:var(--bg); }
  .stamp { align-self:flex-start; font-family:"Instrument Serif",serif; font-size:32px; line-height:1; padding:2px 12px; border:2px solid currentColor; border-radius:6px; transform:rotate(-3deg); }
  .fact.ok .stamp { color:var(--ok); } .fact.no .stamp { color:var(--accent); }
  .you { font-family:"JetBrains Mono",monospace; font-size:12px; color:var(--ink-2); }
  .fact.ok .you { color:var(--ok); }
  .pic { width:100%; height:auto; max-height:64px; }
  .fact .back > span { font-size:14.5px; line-height:1.5; color:var(--ink-2); }
  .fact .back strong { color:var(--ink); font-weight:600; }
  .fact .back a { margin-top:auto; color:var(--accent); font-weight:500; font-size:14px; text-decoration:none; }
  .fact .back a:hover { text-decoration:underline; }
  .cowgy-pop { display:flex; align-items:center; gap:14px; margin-top:22px; }
  .cowgy-pop[hidden] { display:none; }
  .cowgy-pop img { width:56px; height:56px; border-radius:50%; border:1px solid var(--line); }
  .cowgy-pop p { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:10px 16px; font-size:15px; }
  .cowgy-pop b { font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin-right:8px; }
  .cowgy-pop a { color:var(--accent); font-weight:500; }
  .formats { grid-template-columns:repeat(3,1fr); }
  .formats-note a { color:var(--accent); }
  .grid2 { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:20px; }
  .sol .card p b { font-size:12px; }
  a.tag { text-decoration:none; } a.tag:hover { filter:brightness(.95); text-decoration:underline; }
  .case { scroll-margin-top:80px; }
  .case:target { animation:flash 1.6s ease; }
  @keyframes flash { 0%,100% { background:transparent; } 25% { background:rgba(162,68,46,.08); } }
  .cap + .shot { margin-top:24px; }
  .prb { grid-template-columns:112px 1fr; }
  .gallery { grid-auto-rows:210px; }
  .gallery .big { grid-row:span 2; }
  @media (max-width:980px) { .hero-grid > .film { order:-1; } .formats { grid-template-columns:1fr 1fr; } .grid2 { grid-template-columns:1fr; } }
  @media (max-width:600px) {
    section { padding:56px 0; }
    .hero { padding:28px 0 48px; }
    .stats { grid-template-columns:1fr 1fr; }
    .stat { padding:14px 14px; } .stat b { font-size:24px; } .stat span { font-size:12.5px; }
    .sol, .facts, .formats { display:grid; grid-auto-flow:column; grid-auto-columns:86%; grid-template-columns:none; overflow-x:auto; scroll-snap-type:x mandatory; gap:12px; padding-bottom:10px; margin-left:-24px; margin-right:-24px; padding-left:24px; padding-right:24px; scroll-padding-left:24px; }
    .sol > *, .facts > *, .formats > * { scroll-snap-align:start; }
    .fact { height:360px; }
    .film-cap { font-size:18px; }
    .film-ui { flex-wrap:wrap; }
    .gallery { grid-auto-rows:150px; }
  }
  .fact .back { color:var(--ink); }
  .fact .back .pic text { font-family:"JetBrains Mono",monospace; }