/* ============================================================
   v4 — bright editorial / digital-intelligence light theme
   ============================================================ */
:root{
  --bg:#f3f9fc;
  --bg2:#e6f2f8;
  --ink:#102b3d;
  --soft:#33576c;
  --muted:#6b8798;
  --dim:#94aab8;
  --cyan:#0f88ae;
  --blue:#2c6fa8;
  --gold:#b5853c;
  --red:#c54837;
  --line:rgba(22,80,115,.18);
  --line2:rgba(22,80,115,.09);
  --glass:rgba(255,255,255,.92);
  --panel:#0b2a3f;
}
body{background:#dceaf2;color:var(--ink)}
.viewport{background:radial-gradient(ellipse at 50% 35%,#f7fbfd,#dceaf2 75%)}
.stage{background:
  radial-gradient(1000px 700px at 55% 38%,#ffffff 0,#f4fafd 46%,#e8f3f8 100%);
  box-shadow:0 30px 90px rgba(21,64,88,.22)}
.stage::before{background-image:
  linear-gradient(rgba(30,110,150,.07) 1px,transparent 1px),
  linear-gradient(90deg,rgba(30,110,150,.07) 1px,transparent 1px);
  background-size:64px 64px;
  mask:radial-gradient(ellipse at 55% 40%,#000 10%,transparent 80%);
  -webkit-mask:radial-gradient(ellipse at 55% 40%,#000 10%,transparent 80%)}
.stage::after{background:radial-gradient(ellipse at center,transparent 50%,rgba(25,70,95,.14) 100%)}

/* chrome */
.topbar{height:86px;padding:0 44px;background:rgba(255,255,255,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--line2)}
.topbar .course{font-size:17px;color:var(--soft);gap:10px;min-width:286px}
.topbar .course b{color:var(--ink)}
.topbar .course em{font-size:15px;color:var(--muted)}
.topbar .right{gap:16px}
.page{font-size:14px;color:var(--muted)}
.logo-plaque{background:#fff;padding:5px 9px;border-radius:4px;box-shadow:0 4px 16px rgba(25,70,95,.12)}
.logo-plaque{padding:4px 9px;display:flex;align-items:center;gap:8px}
.logo-plaque img{width:190px;height:50px}
.logo-plaque .brand-emblem{width:42px;height:42px;object-fit:contain}
.logo-plaque .brand-name{font-size:13px;font-weight:700;color:var(--ink);letter-spacing:.4px;white-space:nowrap;line-height:1.2}
.end .logo-plaque .brand-name{font-size:13px}
.footer{left:72px;right:72px;bottom:14px;border-top:1px solid var(--line2);color:var(--dim);font-size:12px}
.footer .mid{color:#7f98a7}
.carline{color:rgba(40,125,165,.14)}

/* rhythm */
.rhythm{flex:1;display:flex;align-items:center;justify-content:center;gap:0;margin:0 14px;position:relative;height:100%}
.rhythm::before{content:"";position:absolute;left:4%;right:4%;bottom:12px;height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent)}
.rhythm span{position:relative;z-index:1;width:104px;height:100%;text-align:center;padding-top:12px;transition:.3s}
.rhythm b{display:block;font-size:15.5px;line-height:1.1;font-weight:600;color:#4f7387;letter-spacing:.5px;transition:.3s}
.rhythm i{display:block;font-style:normal;font-family:var(--num);font-size:11px;color:#8fa7b6;letter-spacing:.6px;margin-top:3px}
.rhythm span::before{content:"";position:absolute;left:50%;bottom:8px;width:7px;height:7px;margin:0 0 0 -3.5px;border-radius:50%;background:#c4d5df;border:2px solid #fff;transition:.3s}
.rhythm span.on b{color:var(--red)}
.rhythm span.on i{color:var(--red)}
.rhythm span.on::before{background:var(--red);box-shadow:0 0 0 5px rgba(197,72,55,.12)}
.rhythm span.done::before{background:var(--cyan)}
.on-cover .rhythm{opacity:0;visibility:hidden;pointer-events:none}

/* typography */
.kicker{font-size:15px;letter-spacing:2.8px;color:var(--gold)}
.kicker::before{background:var(--gold)}
h1{font-size:54px;line-height:1.12;color:var(--ink);letter-spacing:.2px}
.sub{font-size:25px;line-height:1.65;color:var(--soft)}
.rule{background:linear-gradient(90deg,rgba(181,133,60,.55),rgba(20,100,140,.14),transparent)}

/* primitives */
.card{background:linear-gradient(150deg,#fff,#f7fbfd);border:1px solid var(--line);box-shadow:0 12px 32px rgba(25,70,95,.08);border-radius:12px}
.card::before{background:var(--gold);opacity:.85}
.btn{background:var(--red);border-color:var(--red);color:#fff}
.btn.ghost{background:#fff;color:var(--soft);border-color:var(--line)}
.badge{background:rgba(181,133,60,.08);border-color:rgba(181,133,60,.45);color:#8d6428}
.badge.cyan{background:rgba(15,136,174,.07);border-color:rgba(15,136,174,.35);color:#0b6e8e}
.tag{color:var(--gold)}
.note{color:var(--dim)}
.red{color:var(--red)}.gold{color:var(--gold)}.cyan{color:var(--cyan)}.soft{color:var(--soft)}.muted{color:var(--muted)}

/* cover */
.cover{background:
  radial-gradient(700px 580px at 74% 42%,rgba(15,136,174,.10),transparent 70%),
  linear-gradient(135deg,#ffffff 0,#f5fbfd 55%,#e9f4f9 100%)}
.cover-copy{top:118px;width:830px}
.cover-eyebrow{color:var(--gold);font-size:15px}
.cover h1{font-size:80px;color:var(--ink);text-shadow:0 2px 0 rgba(255,255,255,.8)}
.cover h1 em{color:var(--red)}
.cover-sub{color:var(--soft);font-size:27px}
.cover-line{background:linear-gradient(90deg,var(--red),rgba(181,133,60,.65),transparent)}
.cover-meta{color:var(--soft)}
.cover-meta b{color:var(--ink)}
.cover-meta span{color:var(--muted)}
.cover-visual{right:20px;bottom:40px;width:670px;height:740px;border-radius:18px;overflow:hidden;background:#082238;border:1px solid rgba(15,50,70,.22);box-shadow:0 24px 70px rgba(15,50,70,.25)}
.cover-visual .cover-gif{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;opacity:.96;transition:opacity .5s}
.cover-visual.ready .cover-gif{opacity:0}
.cover-visual iframe{position:relative;z-index:2;width:100%;height:100%;border:0;display:block;background:transparent}
.cover-visual::before{display:none}
.cover-visual .live-badge{position:absolute;left:18px;top:16px;z-index:4;display:flex;align-items:center;gap:8px;height:30px;padding:0 11px;border-radius:99px;border:1px solid rgba(226,183,107,.45);background:rgba(5,20,32,.6);color:#e2b76b;font-family:var(--num);font-size:11px;letter-spacing:1.5px;backdrop-filter:blur(8px)}
.cover-visual .live-badge i{width:6px;height:6px;border-radius:50%;background:#5ce1ff;box-shadow:0 0 10px #5ce1ff;animation:livePulse 1.8s infinite}
@keyframes livePulse{0%,100%{opacity:1}50%{opacity:.25}}
.cover-visual .live-hint{position:absolute;right:16px;bottom:14px;z-index:4;font-size:12px;color:#cfe4ee;background:rgba(5,20,32,.55);border:1px solid rgba(160,210,235,.22);padding:6px 9px;border-radius:4px;letter-spacing:.4px}
.cover-chips{left:72px;bottom:70px}
.cover-chips span{background:#fff;border-color:var(--line);color:var(--soft);font-size:16px;box-shadow:0 4px 14px rgba(25,70,95,.06)}
.cover-side{color:var(--muted)}
.cover-side b{color:var(--gold)}
.cover::after{border-color:rgba(15,100,140,.10);box-shadow:0 0 0 40px rgba(15,100,140,.02),0 0 0 80px rgba(15,100,140,.012)}

/* import */
.car-frame{border-color:var(--line);background:#fff;box-shadow:0 12px 32px rgba(25,70,95,.08)}
.car-frame img{opacity:1}
.car-frame::after{background:linear-gradient(180deg,rgba(255,255,255,0),rgba(10,40,60,.18))}
.car-frame .cap{background:rgba(255,255,255,.86);color:#274b60;border:1px solid var(--line)}
.car-frame .pin{border:2px solid #fff;box-shadow:0 0 0 5px rgba(181,133,60,.18),0 0 16px rgba(181,133,60,.55)}
.car-frame .pin::after{background:#fff;color:var(--ink);border-color:rgba(181,133,60,.45)}
.qcard{background:#fff;border-color:var(--line);box-shadow:0 8px 24px rgba(25,70,95,.07)}
.qcard .bar{background:var(--red)}
.qcard .no{color:var(--red)}
.qcard h3{color:var(--ink);font-size:28px}
.qcard p{color:var(--soft);font-size:21px}

/* chaoxing native dashboard */
.cx-dash{height:100%;border:1px solid rgba(30,100,140,.28);border-radius:14px;background:
  radial-gradient(420px 300px at 55% 40%,rgba(30,120,190,.24),transparent 70%),
  linear-gradient(135deg,#041326,#07233d 55%,#041725);padding:16px 18px 12px;position:relative;overflow:hidden;color:#eaf7ff;box-shadow:0 16px 38px rgba(14,42,60,.22)}
.cx-dash::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(80,180,240,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(80,180,240,.06) 1px,transparent 1px);background-size:28px 28px;mask:radial-gradient(ellipse at 55% 45%,#000,transparent 80%);pointer-events:none}
.cd-head{position:relative;z-index:2;display:flex;align-items:center;gap:10px;height:34px;border-bottom:1px solid rgba(80,180,240,.18);font-size:11px;color:#9fc5da}
.cd-head i{width:13px;height:13px;border-radius:3px;background:linear-gradient(135deg,#4dd7ff,#2f8cff);box-shadow:0 0 10px rgba(77,215,255,.6)}
.cd-head b{margin-left:auto;color:#fff;font-size:17px;letter-spacing:1px}
.cd-head em{font-style:normal;font-size:9px;color:#e2b76b;border:1px solid rgba(226,183,107,.4);padding:3px 7px;border-radius:99px}
.cd-main{position:relative;z-index:2;display:grid;grid-template-columns:190px 1fr;gap:14px;align-items:center;height:330px}
.cd-total span{display:block;font-size:11px;color:#8fb3c6}
.cd-total b{display:inline-block;font-family:var(--num);font-size:58px;line-height:.95;letter-spacing:-2px;color:#fff;margin-top:6px;text-shadow:0 0 26px rgba(77,215,255,.25)}
.cd-total em{font-style:normal;font-size:13px;color:#8fb3c6;margin-left:4px}
.cd-total p{font-size:10px;line-height:1.7;color:#7fa4b8;margin:8px 0 0}
.cd-ring{position:relative;width:210px;height:210px;margin:0 auto}
.cd-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.cd-ring .rg-bg{fill:none;stroke:rgba(120,190,225,.14);stroke-width:14}
.cd-ring .rg-fg{fill:none;stroke:#4dd7ff;stroke-width:14;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:var(--off,18.7);filter:drop-shadow(0 0 8px rgba(77,215,255,.45))}
.cx-dash.play .cd-ring .rg-fg{animation:ringDraw 1.1s cubic-bezier(.22,.8,.22,1) both}
@keyframes ringDraw{from{stroke-dashoffset:100}to{stroke-dashoffset:var(--off,18.7)}}
.cd-ring-in{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.cd-ring-in b{font-family:var(--num);font-size:38px;color:#fff;line-height:1}
.cd-ring-in span{font-size:10px;color:#9fc5da;margin-top:6px;letter-spacing:1px}
.cd-ring-in small{font-size:10px;color:#5ce1ff;margin-top:4px}
.cd-bars{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;border-top:1px solid rgba(80,180,240,.14);padding-top:10px}
.cd-bar{font-size:9px;color:#8fb3c6}
.cd-bar b{float:right;color:#eaf7ff;font-family:var(--num);font-weight:400}
.cd-bar i{display:block;height:5px;border-radius:5px;background:linear-gradient(90deg,#2f8cff,#4dd7ff);margin-top:5px;width:var(--w);animation:none}
.cx-dash.play .cd-bar i{animation:cxBar 1s .15s both}
@keyframes cxBar{from{width:0}}
.cx-dash .cd-ring-in b,.cx-dash .cd-total b,.cx-dash .cd-bar b{font-variant-numeric:tabular-nums}

/* three native mini dashboards */
.cx-thumb.cx-mini{padding:9px 11px 7px;display:flex;flex-direction:column;background:#0b2a3f;border-color:rgba(30,100,140,.28);min-height:0}
.cx-mini-head{display:flex;align-items:center;gap:8px;height:24px;border-bottom:1px solid rgba(80,180,240,.15);font-size:12px;color:#dcecf5}
.cx-mini-head b{color:#fff}.cx-mini-head em{font-style:normal;font-size:8px;color:#e2b76b;margin-left:auto}
.cx-mini-body{display:grid;grid-template-columns:92px 1fr;gap:10px;align-items:center;flex:1;min-height:0}
.cx-mini-ring{position:relative;width:84px;height:84px;margin:0 auto}
.cx-mini-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.cx-mini-ring .mg-bg{fill:none;stroke:rgba(120,190,225,.14);stroke-width:9}
.cx-mini-ring .mg-fg{fill:none;stroke:#4dd7ff;stroke-width:9;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:var(--off,14);filter:drop-shadow(0 0 6px rgba(77,215,255,.4))}
.cx-thumbs.play .cx-mini-ring .mg-fg{animation:ringDraw .9s .25s cubic-bezier(.22,.8,.22,1) both}
.cx-mini-ring b{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--num);font-size:23px;color:#fff}
.cx-mini-bars{display:flex;flex-direction:column;gap:7px}
.cx-mini-bar{font-size:9px;color:#9fc5da}
.cx-mini-bar b{float:right;color:#fff;font-family:var(--num);font-weight:400}
.cx-mini-bar i{display:block;height:4px;border-radius:4px;margin-top:4px;background:linear-gradient(90deg,#2f8cff,#4dd7ff);width:var(--w)}
.cx-thumbs.play .cx-mini-bar i{animation:cxBar .9s .25s both}
.cx-mini-big{font-family:var(--num);font-size:38px;line-height:1;color:#fff;letter-spacing:-1px}
.cx-mini-big small{font-size:11px;color:#8fb3c6;letter-spacing:0;margin-left:4px}
.cx-mini-note{font-size:8px;line-height:1.5;color:#8fb3c6;margin:2px 0 0}
.cx-rank{display:flex;flex-direction:column;gap:7px;padding-top:2px}
.cx-rank-row{font-size:9px;color:#cfe4ee}
.cx-rank-row b{float:right;color:#fff;font-family:var(--num);font-weight:400}
.cx-rank-row i{display:block;height:5px;border-radius:5px;margin-top:3px;background:linear-gradient(90deg,#2f8cff,#4dd7ff);width:var(--w)}
.cx-thumbs.play .cx-rank-row i{animation:cxBar .9s .25s both}
.cx-thumbs .cx-thumb{opacity:1}
.cx-thumbs.play .cx-thumb{animation:cxCardIn .6s both}
.cx-thumbs.play .cx-thumb:nth-child(1){animation-delay:.05s}
.cx-thumbs.play .cx-thumb:nth-child(2){animation-delay:.32s}
.cx-thumbs.play .cx-thumb:nth-child(3){animation-delay:.59s}
@keyframes cxCardIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.cx-mini .cap{font-size:9.5px;color:#9fc5da;padding-top:4px;line-height:1.3}

/* chaoxing */
.cx-shot{border-color:var(--line);background:#0b2a3f;box-shadow:0 14px 38px rgba(25,70,95,.14)}
.cx-shot .cap{color:var(--muted)}
.cx-stat{background:#fff;border-color:var(--line);box-shadow:0 6px 18px rgba(25,70,95,.06)}
.cx-stat b{color:var(--ink)}
.cx-stat span{color:var(--muted)}
.cx-stat.red b{color:var(--red)}
.cx-stat.cyan b{color:var(--cyan)}
.cx-note{color:var(--soft);border-left-color:var(--gold)}
.cx-thumb{background:#0b2a3f;border-color:var(--line);box-shadow:0 10px 26px rgba(25,70,95,.12)}
.cx-thumb .cap{color:var(--muted)}
.cx-decision{background:#fff;border-color:var(--line);box-shadow:0 6px 18px rgba(25,70,95,.06)}
.cx-decision h4{color:var(--ink)}
.cx-decision p{color:var(--muted)}
.cx-source{color:var(--dim)}

/* divider */
.part .big{color:rgba(181,133,60,.20)}
.part h1{color:var(--ink)}
.part h1 em{color:var(--red)}
.part p{color:var(--soft)}
.part .chips span{background:#fff;border-color:var(--line);color:var(--soft)}
.part-visual{background:radial-gradient(circle at 50% 45%,rgba(15,136,174,.12),transparent 65%)}
.part-visual img{mix-blend-mode:multiply;opacity:.96}

/* types */
.type-card{background:#fff;border-color:var(--line);box-shadow:0 10px 28px rgba(25,70,95,.07)}
.type-card h3{color:var(--ink)}
.type-card p{color:var(--muted)}
.type-card .use{color:var(--cyan);border-top-color:var(--line2)}
.type-card svg [stroke="#9fbdce"]{stroke:#2c6fa8!important}
.type-card svg [stroke="#5ce1ff"]{stroke:#0f88ae!important}
.type-card svg [stroke="#e15a4b"]{stroke:#c54837!important}
.type-card svg [fill="#e2b76b"]{fill:#b5853c!important}
.type-note{color:var(--muted)}
.type-grid{height:calc(100% - 42px)}
.type-card{padding:12px 14px}
.type-card svg{height:150px;margin:2px 0}
.type-card .tag{font-size:12px}
.type-card h3{font-size:24px;line-height:1.2;margin:1px 0 4px}
.type-card p{font-size:14px;line-height:1.5}
.type-card .use{font-size:12px;padding-top:6px;margin-top:auto}
.type-cue{font-size:16px;line-height:1.55;color:var(--soft);text-align:center;margin-top:8px;border-top:1px solid var(--line2);padding-top:7px}
.type-cue b{color:var(--red)}

/* dark figure panels stay dark for diagram legibility */
.figure,.compare-card,.cut-card{background:linear-gradient(150deg,#0b2b40,#071e2d);border-color:rgba(30,100,140,.28);box-shadow:0 16px 40px rgba(14,42,60,.18)}
.compare-card .cap{color:#9fbdce}
.compare-card .cap b{color:#fff}
.cut-card .cap{color:#9fbdce}
.damper-grid .duo .card,.duo .card{background:#fff;color:var(--ink)}
.duo .k{color:var(--gold)}
.duo h3{color:var(--ink)}
.duo p{color:var(--soft)}
.mini-quote{color:#8d6428;border-left-color:var(--gold)}

/* force */
.fitem{background:#fff;border-color:var(--line);border-left-color:var(--c);box-shadow:0 6px 18px rgba(25,70,95,.06)}
.fitem h4{color:var(--ink)}
.fitem p{color:var(--muted)}
.mis{background:rgba(197,72,55,.06);border-color:rgba(197,72,55,.35);color:#8f2c20}
.mis b{color:var(--red)}

/* motion / steering */
.point{background:#fff;border-color:var(--line);box-shadow:0 6px 18px rgba(25,70,95,.06)}
.point h4{color:var(--ink)}
.point p{color:var(--muted)}
.big-idea{color:var(--ink);border-left-color:var(--red);font-size:21px}
.big-idea em{color:var(--red)}

/* compare table */
.cmp-wrap{display:grid;grid-template-columns:1fr 360px;gap:22px;height:100%}
.cmp-apps{padding:16px 16px 10px;display:flex;flex-direction:column;gap:7px;overflow:hidden}
.cmp-apps h3{font-size:22px;line-height:1.25;color:var(--ink);margin:0 0 2px}
.cmp-car{border:1px solid var(--line2);border-radius:7px;overflow:hidden;background:#fff;position:relative}
.cmp-car img{width:100%;height:100px;object-fit:cover;object-position:50% 35%;display:block}
.cmp-car div{position:absolute;left:0;right:0;bottom:0;padding:14px 8px 4px;background:linear-gradient(transparent,rgba(6,25,38,.8));color:#fff;display:flex;align-items:baseline;gap:6px}
.cmp-car b{font-size:12px}.cmp-car span{font-size:9px;color:#d7e8f1}
.cmp-apps-note{font-size:11px;line-height:1.45;color:var(--muted);margin-top:2px}
.cmp-table{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:0 12px 30px rgba(25,70,95,.08);font-size:19.5px}
.cmp-table th{background:#0b2b40;color:#fff;font-size:17px;font-weight:600;padding:13px 14px;text-align:left;letter-spacing:.5px}
.cmp-table th:first-child{color:#e2b76b}
.cmp-table td{padding:11px 14px;border-top:1px solid var(--line2);color:var(--soft);line-height:1.45;vertical-align:middle}
.cmp-table td:first-child{font-weight:700;color:var(--ink);background:#f4fafd;width:150px}
.cmp-table tr:nth-child(even) td{background:#fbfdfe}
.cmp-table tr:nth-child(even) td:first-child{background:#eef7fb}
.cmp-note{padding:22px 20px;display:flex;flex-direction:column;justify-content:center}
.cmp-note h3{font-size:30px;line-height:1.25;color:var(--ink);margin:8px 0 10px}
.cmp-note p{font-size:16px;line-height:1.65;color:var(--muted);margin:0 0 12px}
.cmp-mini{font-size:14px;line-height:1.7;color:var(--soft);border-top:1px solid var(--line2);padding-top:10px}
.cmp-mini b{color:var(--gold)}

/* textbook analysis */
.textbook-grid{display:grid;grid-template-columns:300px 1fr;gap:38px;height:100%;align-items:center}
.textbook-cover{text-align:center}
.textbook-cover img{width:262px;max-height:420px;object-fit:contain;border-radius:4px;box-shadow:0 20px 48px rgba(20,55,80,.22)}
.textbook-cover .cap{font-size:13px;color:var(--muted);margin-top:8px}
.textbook-copy h2{font-size:38px;line-height:1.25;color:var(--ink);margin:0 0 10px}
.textbook-copy h2 em{font-style:normal;color:var(--red)}
.tb-row{display:grid;grid-template-columns:88px 1fr;gap:12px;padding:12px 0;border-top:1px solid var(--line2)}
.tb-row b{font-size:15px;color:var(--gold);letter-spacing:1px}
.tb-row p{font-size:17px;line-height:1.65;color:var(--muted);margin:0}
.part-strip{display:flex;align-items:center;gap:10px;margin-top:16px;font-size:14px;color:var(--soft)}
.part-strip b{font-family:var(--num);font-size:30px;color:var(--red);letter-spacing:-1px}
.part-strip span{border:1px solid var(--line);background:#fff;border-radius:99px;padding:5px 10px;font-size:13px}

/* clickable bump comparison */
.bump-layout{display:grid;grid-template-columns:1fr 294px;gap:22px;height:100%;min-height:0}
.bump-stage{display:flex;flex-direction:column;gap:12px;min-width:0;min-height:0}
.bump-card{flex:1;min-height:0;border:1px solid var(--line);border-radius:12px;background:#fff;box-shadow:0 8px 24px rgba(25,70,95,.06);padding:8px 14px 0;position:relative;overflow:hidden}
.bump-head{display:flex;align-items:baseline;gap:10px;height:28px}
.bump-head b{font-size:20px;color:var(--ink)}
.bump-head span{font-size:12px;color:var(--muted)}
.bump-head .state{margin-left:auto;font-size:12px;color:var(--red);opacity:0;transition:.3s}
.bump-layout.running .bump-head .state{opacity:1}
.bump-svg{width:100%;height:calc(100% - 26px);display:block;overflow:visible}
.bump-layout .axle-group{transform-origin:430px 148px}
.bump-layout .body-group{transform-origin:430px 42px}
.bump-layout .right-wheel{transform-origin:680px 148px}
.bump-layout .right-spring{transform-origin:560px 64px}
.bump-layout.running .axle-group{animation:axleRock 1.15s ease-in-out infinite}
.bump-layout.running .body-group{animation:bodyRock 1.15s ease-in-out infinite}
.bump-layout.running .right-wheel{animation:wheelBounce 1.15s ease-in-out infinite}
.bump-layout.running .right-spring{animation:springBounce 1.15s ease-in-out infinite}
@keyframes axleRock{0%,100%{transform:rotate(0)}50%{transform:rotate(-2.2deg)}}
@keyframes bodyRock{0%,100%{transform:rotate(0)}50%{transform:rotate(-2.2deg)}}
@keyframes wheelBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-24px)}}
@keyframes springBounce{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.8)}}
.bump-side{display:flex;flex-direction:column;justify-content:center}
.bump-side .tag{font-size:13px;color:var(--gold);letter-spacing:1.5px}
.bump-side h3{font-size:32px;line-height:1.28;color:var(--ink);margin:10px 0 10px}
.bump-side h3 em{font-style:normal;color:var(--red)}
.bump-side p{font-size:16px;line-height:1.65;color:var(--muted);margin:0 0 14px}
.bump-btn{height:46px;border:0;border-radius:8px;background:var(--red);color:#fff;font-size:18px;font-weight:700;letter-spacing:1px;cursor:pointer;box-shadow:0 10px 24px rgba(197,72,55,.22)}
.bump-btn:hover{filter:brightness(1.06)}
.bump-legend{display:flex;flex-direction:column;gap:7px;margin-top:14px;font-size:13px;color:var(--muted)}
.bump-legend b{color:var(--ink)}

/* applications */
.app-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;height:calc(100% - 34px)}
.app-card{border:1px solid var(--line);border-radius:12px;background:#fff;overflow:hidden;box-shadow:0 10px 28px rgba(25,70,95,.08);display:flex;flex-direction:column}
.app-img{height:292px;overflow:hidden;background:#dfeaf0;position:relative}
.app-img img{width:100%;height:100%;object-fit:cover;display:block}
.app-img .badge{position:absolute;left:12px;top:12px;background:rgba(255,255,255,.9);backdrop-filter:blur(8px);font-size:12px;height:26px;padding:0 9px}
.app-copy{padding:14px 16px 16px}
.app-copy h3{font-size:25px;color:var(--ink);margin:0 0 4px}
.app-copy p{font-size:15px;line-height:1.55;color:var(--muted);margin:0}
.app-note{font-size:13px;color:var(--dim);text-align:center;margin-top:10px}

/* full-axle quiz image */
.full-quiz{position:relative;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#0b2a3f;box-shadow:0 16px 40px rgba(14,42,60,.18)}
.full-quiz img{width:100%;height:100%;object-fit:contain;display:block;opacity:.96}
.full-quiz .fq-tag{position:absolute;left:14px;top:12px;color:#e2b76b;border:1px solid rgba(226,183,107,.4);background:rgba(5,18,30,.6);border-radius:4px;padding:5px 8px;font-size:11px;letter-spacing:1px}
.full-quiz .fq-cap{position:absolute;left:14px;bottom:10px;color:#cfe4ee;background:rgba(5,18,30,.6);border-radius:4px;padding:5px 8px;font-size:12px}
.hotspot{position:absolute;width:28px;height:28px;border-radius:50%;border:1px solid rgba(226,183,107,.8);background:rgba(5,18,30,.55);color:#e2b76b;font-family:var(--num);font-size:12px;display:grid;place-items:center;cursor:pointer;z-index:3;transition:.2s}
.hotspot:hover,.hotspot.on{background:var(--red);border-color:var(--red);color:#fff;box-shadow:0 0 0 6px rgba(197,72,55,.15)}
.fq-side{position:absolute;top:14px;z-index:3;font-size:13px;color:#e2b76b;border:1px solid rgba(226,183,107,.42);background:rgba(5,18,30,.55);padding:4px 8px;border-radius:4px;letter-spacing:1px}
.fq-side.left{left:14px}.fq-side.right{right:14px}

/* problem chain */
.chain{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;height:calc(100% - 64px)}
.chain-step{position:relative;border:1px solid var(--line);border-radius:12px;background:#fff;padding:22px 20px;box-shadow:0 8px 24px rgba(25,70,95,.06)}
.chain-step .no{font-family:var(--num);font-size:34px;color:#c9d8e1;letter-spacing:-1px}
.chain-step h3{font-size:27px;color:var(--ink);margin:10px 0 8px}
.chain-step p{font-size:17px;line-height:1.6;color:var(--muted);margin:0}
.chain-step .state{position:absolute;left:20px;bottom:18px;font-size:13px;color:var(--dim);letter-spacing:.4px}
.chain-step.done{border-color:rgba(15,136,174,.35);background:#f7fcfe}
.chain-step.done .no{color:var(--cyan)}
.chain-step.on{border-color:rgba(197,72,55,.55);background:#fff;box-shadow:0 12px 30px rgba(197,72,55,.12)}
.chain-step.on .no{color:var(--red)}
.chain-step.on h3{color:var(--red)}
.chain-step.on .state{color:var(--red)}
.chain-step.on::after{content:"";position:absolute;left:50%;top:-7px;width:12px;height:12px;border-radius:50%;background:var(--red);border:3px solid #fff;transform:translateX(-50%)}
.chain-quote{font-size:18px;line-height:1.6;color:var(--soft);border-left:3px solid var(--gold);padding-left:14px;margin-top:16px}

/* 3D panels */
.lab-frame{background:#071e2e;border-color:rgba(20,90,130,.35);box-shadow:0 18px 44px rgba(14,42,60,.18)}
.lab-copy h2{color:var(--ink)}
.lab-copy h2 em{color:var(--red)}
.lab-copy p{color:var(--soft)}
.chips span{background:#fff;border-color:var(--line);color:var(--soft)}
.roles{border-top-color:var(--line)}
.role b{color:var(--gold)}
.role span{color:var(--muted)}

/* errors */
.face{background:#fff;border-color:var(--line);box-shadow:0 10px 26px rgba(25,70,95,.08)}
.face h3{color:var(--ink)}
.face p{color:var(--soft)}
.face .turn{color:var(--dim)}
.face .wm{color:rgba(20,90,130,.06)}
.back{background:#fff;border-color:rgba(181,133,60,.4)}
.back h3{color:#8d6428}
.back p{color:var(--soft)}
.back .ok{color:#1f8a5f}
.back .wm{color:rgba(181,133,60,.09)}

/* quiz */
.quiz-copy h2{color:var(--ink)}
.quiz-copy p{color:var(--soft)}
.qi{background:#fff;border-color:var(--line);box-shadow:0 4px 14px rgba(25,70,95,.05)}
.qi b{color:var(--ink)}
.qi > span:last-child{color:var(--muted)}
.eval{color:var(--muted);border-top-color:var(--line)}
.quiz-line{font-size:14px;line-height:1.55;color:var(--muted);border:1px solid var(--line);border-radius:8px;background:#fff;padding:9px 12px;margin:2px 0 6px}
.quiz-line b{font-family:var(--num);color:var(--red);font-size:12px;letter-spacing:1px;margin-right:4px}
.quiz-qr{display:flex;align-items:center;gap:10px;margin-top:6px}
.quiz-qr img{width:96px;height:115px;object-fit:contain;background:#fff;border:1px solid var(--line);border-radius:6px;padding:2px}
.quiz-qr span{font-size:12px;line-height:1.5;color:var(--muted)}

/* innovation */
.innov-img{border-color:var(--line);background:#0b2a3f;box-shadow:0 14px 38px rgba(25,70,95,.12)}
.innov-copy h2{color:var(--ink)}
.innov-copy p{color:var(--soft)}
.ip{background:#fff;border-color:var(--line);box-shadow:0 4px 14px rgba(25,70,95,.05)}
.ip b{color:var(--gold)}
.ip span{color:var(--muted)}
.pathline{color:var(--soft)}

/* ideology */
.ideo .huge{color:var(--gold)}
.ideo .huge small{color:#9a7a4c}
.ideo h2{color:var(--ink)}
.ideo h2 em{color:var(--red)}
.ideo p{color:var(--soft)}
.principles span{border-color:rgba(181,133,60,.45);color:#7c5a2b;background:rgba(181,133,60,.06)}
.photo-frame{border-color:rgba(181,133,60,.45);box-shadow:0 16px 38px rgba(25,70,95,.14)}
.photo-frame .cap{background:rgba(6,25,38,.65)}
.safety-badge{color:#8f2c20;border-color:rgba(197,72,55,.45);background:rgba(197,72,55,.06)}

/* summary */
.sum-img{background:#0b2a3f;border-color:rgba(20,90,130,.35);box-shadow:0 16px 40px rgba(14,42,60,.15)}
.sum-img img{mix-blend-mode:screen}
.sum-img .tag1{color:#e2b76b;border-color:rgba(226,183,107,.35);background:rgba(5,20,32,.55)}
.take{background:#fff;border-color:var(--line);border-left-color:var(--gold);box-shadow:0 6px 18px rgba(25,70,95,.05)}
.take h4{color:var(--ink)}
.take p{color:var(--muted)}
.exit{background:rgba(181,133,60,.06);border-color:rgba(181,133,60,.45);color:var(--soft)}
.exit b{color:#8d6428}
.sum-copy .note{color:var(--dim)}

/* end */
.end h1{color:var(--ink)}
.end h1 em{color:var(--red)}
.end p{color:var(--soft)}
.end .meta{color:var(--soft)}
.end .meta b{color:#8d6428}
.end{display:block;text-align:left}
.end .end-inner{position:absolute;left:72px;top:188px;width:760px;z-index:3}
.end h1{font-size:54px;line-height:1.2}
.end .line{margin:22px 0}
.end p{font-size:26px;letter-spacing:4px}
.end .meta{font-size:18px;line-height:1.9}
.end .logo-plaque{background:#fff}
.end .line{background:var(--red)}
.end .logo-plaque{background:#fff}
.end-3d{position:absolute;right:38px;top:108px;width:650px;height:690px;border:1px solid rgba(20,80,120,.28);border-radius:16px;overflow:hidden;background:#0b2a3f;box-shadow:0 20px 50px rgba(14,42,60,.2);z-index:2}
.end-3d iframe{width:100%;height:100%;border:0;display:block}
.end-3d-tag{position:absolute;left:14px;bottom:12px;z-index:3;color:#e2b76b;background:rgba(5,18,30,.58);border:1px solid rgba(226,183,107,.4);border-radius:4px;padding:5px 8px;font-size:11px;letter-spacing:1px}
.end{display:flex;align-items:center;justify-content:center;text-align:center}
.end .end-inner{position:relative;left:auto;top:auto;width:1080px;z-index:3;margin:24px auto 0}
.end-kicker{font-family:var(--num);font-size:12px;letter-spacing:5px;color:var(--gold);margin-bottom:22px}
.end h1{font-size:62px;line-height:1.2;letter-spacing:1px}
.end .line{width:92px;height:3px;margin:26px auto 24px;background:var(--red)}
.end p{font-size:24px;letter-spacing:9px;color:var(--soft);margin:0 0 26px}
.end .meta{font-size:17px;line-height:2;color:var(--muted)}
.end .meta b{color:var(--ink)}
.end-tags{display:flex;justify-content:center;gap:10px;margin:24px 0 6px}
.end-tags span{font-size:12px;letter-spacing:2px;color:var(--cyan);border:1px solid rgba(15,136,174,.28);border-radius:99px;padding:6px 14px;background:rgba(15,136,174,.04)}
.end .end-logo{margin:28px auto 0;width:max-content;background:#fff;box-shadow:0 8px 22px rgba(20,60,80,.08)}
.quiz-stat{display:flex;align-items:center;gap:14px;margin-top:18px;padding-top:14px;border-top:1px solid var(--line2)}
.quiz-stat b{font-family:var(--num);font-size:54px;line-height:1;color:var(--red)}
.quiz-stat span{font-size:13px;line-height:1.7;color:var(--muted)}
.show3d-wrap{display:grid;grid-template-columns:1fr 300px;gap:22px;height:100%}
.show3d-frame{border:1px solid rgba(20,80,120,.28);border-radius:14px;overflow:hidden;background:#071b2b;box-shadow:0 18px 44px rgba(14,42,60,.18)}
.show3d-frame iframe{width:100%;height:100%;border:0;display:block}
.show3d-side{display:flex;flex-direction:column;justify-content:center}
.show3d-side h3{font-size:32px;line-height:1.25;color:var(--ink);margin:10px 0 8px}
.show3d-side h3 em{font-style:normal;color:var(--red)}
.show3d-side p{font-size:16px;line-height:1.65;color:var(--muted);margin:0 0 12px}
.show3d-qr{width:170px;height:204px;object-fit:contain;background:#fff;border:1px solid var(--line);border-radius:6px;padding:4px}
.show3d-hint{font-size:12px;color:var(--dim);margin-top:6px;letter-spacing:1px}
.end-qr{position:absolute;right:58px;bottom:56px;z-index:5;display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px 10px;box-shadow:0 12px 30px rgba(25,70,95,.12)}
.end-qr img{width:126px;height:151px;object-fit:contain;display:block}
.end-qr span{display:block;font-size:13px;line-height:1.6;color:var(--soft);letter-spacing:.4px}
.end-qr b{display:block;font-size:15px;color:var(--ink);margin-bottom:3px}

/* controls */
.arrow{border-color:var(--line);background:rgba(255,255,255,.85);color:var(--soft);box-shadow:0 4px 16px rgba(25,70,95,.08)}
.arrow:hover{border-color:var(--red);color:var(--red);background:#fff}
.progress{background:rgba(20,70,100,.08)}
.keyhint{color:rgba(30,80,110,.35)}

.cmp-truck{border:1px solid var(--line2);border-radius:7px;background:#f7fbfd;padding:4px 6px 3px}
.cmp-truck svg{width:100%;height:74px;display:block}
.cmp-truck div{display:flex;align-items:baseline;gap:6px;font-size:11px;color:var(--ink)}
.cmp-truck div b{font-size:12px;color:var(--red)}
.cmp-truck div span{font-size:9px;color:var(--muted)}
.cmp-cars{display:flex;flex-direction:column;gap:4px;margin-top:3px}
.cmp-cars .cmp-car img{height:58px}
.cmp-cars .cmp-car div{padding:10px 7px 3px}
.cmp-cars .cmp-car b{font-size:10px}.cmp-cars .cmp-car span{font-size:8px}

/* visual problem chain */
.pchain{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;height:378px;position:relative}
.pchain::before{content:"";position:absolute;left:6%;right:6%;top:98px;height:2px;background:linear-gradient(90deg,rgba(15,136,174,.35),rgba(197,72,55,.45),rgba(20,80,120,.12));z-index:0}
.pstep{position:relative;z-index:1;border:1px solid var(--line);border-radius:14px;background:#fff;padding:18px 18px;box-shadow:0 8px 24px rgba(25,70,95,.06);display:flex;flex-direction:column}
.pstep .pnum{font-family:var(--num);font-size:13px;letter-spacing:2px;color:var(--dim)}
.picon{width:72px;height:72px;border-radius:50%;border:1px solid var(--line);background:#f7fbfd;display:grid;place-items:center;margin:8px auto 10px}
.picon svg{width:40px;height:40px}
.pstep h3{font-size:25px;line-height:1.2;color:var(--ink);text-align:center;margin:0 0 5px}
.pstep p{font-size:16px;line-height:1.55;color:var(--muted);text-align:center;margin:0}
.pstep .pstate{font-size:12px;color:var(--dim);text-align:center;margin-top:auto;padding-top:8px;border-top:1px solid var(--line2)}
.pstep.done{border-color:rgba(15,136,174,.35)}
.pstep.done .picon{background:#f1fbfe;border-color:rgba(15,136,174,.4)}
.pstep.done .pstate{color:var(--cyan)}
.pstep.on{border-color:rgba(197,72,55,.55);box-shadow:0 12px 30px rgba(197,72,55,.12);transform:translateY(-4px)}
.pstep.on .picon{background:rgba(197,72,55,.07);border-color:rgba(197,72,55,.5)}
.pstep.on h3{color:var(--red)}.pstep.on .pstate{color:var(--red)}
.pstep.on::after{content:"";position:absolute;left:50%;top:-7px;width:12px;height:12px;border-radius:50%;background:var(--red);border:3px solid #fff;transform:translateX(-50%)}
.pchain-note{font-size:17px;line-height:1.6;color:var(--soft);border-left:3px solid var(--gold);padding-left:14px;margin-top:12px}

.type-parts{font-size:12px;line-height:1.55;color:var(--soft);margin:5px 0 0;padding-top:5px;border-top:1px solid var(--line2)}
.type-parts b{color:var(--gold);font-weight:400}

/* streamlined teaching animations */
.flow{stroke-dasharray:12 9;animation:flowDash 1.35s linear infinite}
@keyframes flowDash{to{stroke-dashoffset:-42}}
.spring-coil{transform-box:fill-box;transform-origin:center;animation:springPulse 2.2s ease-in-out infinite}
@keyframes springPulse{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.86)}}
.piston{transform-box:fill-box;transform-origin:center;animation:pistonMove 2.2s ease-in-out infinite}
@keyframes pistonMove{0%,100%{transform:translateY(0)}50%{transform:translateY(14px)}}
#s8 path[stroke-dasharray="5 7"]{stroke-dasharray:7 9;animation:flowDash 1.6s linear infinite}
#s9 line[stroke-dasharray="8 6"]{stroke-dasharray:9 7;animation:flowDash 1.5s linear infinite}