/* 整屏横向翻页版首页 · 全端统一「一屏一切」
 * 全端：deck 是唯一横向滚动容器，CSS scroll-snap x 定屏，原生横滑跟手。
 * PC：滚轮 / 触控板横滑 / ←→ / 底部箭头 / 圆点；移动端：左右滑切主、副屏。
 * 任何尺寸都不降级为长滚动；单屏内容超高时只在「本屏内」纵向滚动，不影响横滑切屏。
 * 只作用于首页；category.html / question.html 不受影响。
 */
:root{
  --head-h:62px;                       /* 只剩顶栏 */
  --foot-h:50px;
  --pad-x:clamp(20px,4.2vw,88px);
}
html,body{height:100%;overflow:hidden}
[hidden]{display:none!important}

/* ---------- 固定层 ---------- */
.topbar{position:fixed;top:0;left:0;right:0;z-index:60;height:62px}
.topbar .wrap{height:62px}
.screen-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:90;
  background:linear-gradient(90deg,var(--acc),var(--ac2));box-shadow:0 0 12px var(--acc);
  transition:width .18s linear}

/* 底部条：左提示 · 圆点+左右箭头 · 屏号 · 屏名 */
.screen-foot{position:fixed;bottom:0;left:0;right:0;height:var(--foot-h);z-index:56;
  display:flex;align-items:center;gap:12px;padding:0 var(--pad-x);pointer-events:none;
  background:linear-gradient(0deg,rgba(7,11,22,.94),rgba(7,11,22,0));font-size:12px}
.sf-hint{color:var(--muted);white-space:nowrap}
.sf-num{font:800 15px ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--acc);white-space:nowrap}
.sf-num i{font-style:normal;color:var(--dim);font-size:12px;font-weight:600}
.sf-name{color:var(--dim);min-width:64px;text-align:right;white-space:nowrap}

.dots{margin-left:auto;pointer-events:auto;display:flex;flex-direction:row;
  align-items:center;gap:6px;padding:5px 8px;border:1px solid var(--line);
  border-radius:999px;background:rgba(9,14,28,.82);backdrop-filter:blur(12px)}
.dots button[data-go]{display:flex;align-items:center;background:none;border:0;padding:4px;color:var(--dim)}
.dots button[data-go] i{display:block;width:9px;height:9px;border-radius:50%;
  border:1px solid var(--line2);background:transparent;transition:.25s}
.dots button[data-go]:hover i{border-color:var(--acc)}
.dots button[data-go].on i{background:var(--acc);border-color:var(--acc);
  box-shadow:0 0 14px var(--acc);transform:scale(1.3)}
.dots span{display:none}
.dots .arw{width:26px;height:26px;border-radius:50%;border:1px solid var(--line2);
  background:var(--surface);color:var(--muted);font-size:16px;line-height:1;
  display:grid;place-items:center;padding:0;transition:.2s}
.dots .arw:hover{color:var(--acc);border-color:var(--acc);background:var(--surface2)}
.dots .arw[disabled]{opacity:.28;cursor:not-allowed}

/* ---------- 横向屏幕容器 ---------- */
.deck{display:flex;flex-direction:row;width:100%;height:100vh;height:100dvh;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.deck::-webkit-scrollbar{display:none}
.screen{position:relative;flex:0 0 100%;width:100%;height:100vh;height:100dvh;
  scroll-snap-align:start;scroll-snap-stop:always;
  overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:contain;
  display:flex;flex-direction:column;scrollbar-width:none;
  padding:calc(var(--head-h) + clamp(6px,1.5vh,20px)) var(--pad-x) calc(var(--foot-h) + clamp(6px,1.2vh,16px))}
.screen::-webkit-scrollbar{display:none}
.screen-inner{flex:1;min-height:0;width:100%}

/* 切屏换主色：只动两个变量，整屏跟着变 */
body[data-screen="1"]{--acc:#8b7dff;--ac2:#ff6ba8}
body[data-screen="2"]{--acc:#5ce6a8;--ac2:#4de3ff}
body[data-screen="3"]{--acc:#ffc46b;--ac2:#ff6ba8}

/* 入场：横向位移，与左右翻页方向一致 */
.anim{opacity:0;transform:translateX(26px);
  transition:opacity .55s ease,transform .55s cubic-bezier(.2,.8,.2,1)}
.screen.active .anim{opacity:1;transform:none}
.screen.active .anim.d1{transition-delay:.08s}
.screen.active .anim.d2{transition-delay:.16s}
.screen.active .anim.d3{transition-delay:.24s}

/* ---------- 屏 1 · 主屏：模式选择 / 组内答题 / 结算 ---------- */
.main-wrap{display:flex;flex-direction:column;height:100%;min-height:0}
.setup,.running,.result{flex:1;min-height:0;display:flex;flex-direction:column}

.setup{gap:clamp(8px,1.35vh,18px)}
.setup-head{flex:none;display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(14px,2.4vw,40px);align-items:center}
.setup-title h1{font-size:clamp(26px,3.35vw,46px);font-weight:850;letter-spacing:-.045em;
  line-height:1.16;margin:clamp(6px,1.2vh,14px) 0 0}
.setup-lead{font-size:clamp(12px,1.13vw,15px);line-height:1.65;margin:clamp(6px,1vh,12px) 0 0;
  color:var(--muted);max-width:78ch}
.setup-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;min-width:220px}
.setup-stats .stat{padding:clamp(5px,.9vh,10px) 10px;text-align:center;min-width:0}
.setup-stats .stat b{font-size:clamp(16px,1.7vw,22px)}
.setup-stats .stat span{font-size:10.5px}

.mode-grid{flex:1;min-height:0;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));
  gap:clamp(8px,1.15vw,16px)}
.mode-card{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  text-align:left;gap:clamp(2px,.4vh,5px);
  min-height:0;position:relative;overflow:hidden;
  padding:clamp(9px,1.5vh,20px) clamp(12px,1.35vw,22px);border-radius:16px;
  border:1px solid var(--line);background:var(--surface);color:var(--txt);transition:.22s}
.mode-card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--acc) 50%,transparent);background:var(--surface2)}
.mode-card.on{border-color:color-mix(in srgb,var(--acc) 65%,transparent);
  background:linear-gradient(150deg,color-mix(in srgb,var(--acc) 13%,transparent),var(--surface));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--acc) 14%,transparent)}
.mode-card.on::after{content:"✓";position:absolute;right:14px;top:10px;
  font-weight:850;color:var(--acc);font-size:15px}
.mode-icon{font-style:normal;color:var(--acc);margin-bottom:clamp(3px,.7vh,8px);
  font:800 clamp(18px,1.8vw,26px)/1 ui-monospace,SFMono-Regular,Consolas,monospace}
.mode-card b{font-size:clamp(14px,1.28vw,19px);font-weight:800;line-height:1.3}
.mode-card span{font-size:clamp(11px,.92vw,13px);color:var(--muted);line-height:1.45}
.mode-card em{position:absolute;left:clamp(12px,1.35vw,22px);bottom:clamp(6px,1vh,13px);
  margin:0;font-style:normal;font-size:10.5px;color:var(--dim);letter-spacing:.08em}

.setup-bar{flex:none;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center;
  padding:clamp(9px,1.4vh,16px) clamp(12px,1.35vw,20px);border:1px solid var(--line);
  border-radius:16px;background:var(--surface)}
.bar-left{display:flex;flex-direction:column;gap:7px;min-width:0}
.bar-row{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.bar-label{font-size:12px;color:var(--dim);min-width:54px;white-space:nowrap}
.chip-row{display:flex;gap:6px;flex-wrap:wrap}
.chip-row .chip{padding:5px 11px;font-size:12.5px}
.bar-right{display:flex;flex-direction:column;align-items:flex-end;gap:6px;
  padding-left:14px;border-left:1px solid var(--line);white-space:nowrap}
.setup-sum{font-size:12px;color:var(--muted)}
.bar-links{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.lnk{background:none;border:0;padding:0;color:var(--dim);font-size:11.5px;
  text-decoration:underline;text-underline-offset:3px}
.lnk:hover{color:var(--acc)} .lnk.danger:hover{color:var(--no)}
.lnk[disabled]{opacity:.4;cursor:not-allowed;text-decoration:none}
.setup-note{flex:none;font-size:11.5px;color:var(--dim);line-height:1.6}

.running{gap:clamp(8px,1.3vh,16px);justify-content:center}
.run-head{flex:none;display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:12px}
.run-head .btn{margin-left:auto}
.running .quiz-shell{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;
  width:100%;max-width:1020px;margin:0 auto}
.running .quiz-card{width:100%;padding:clamp(18px,2.8vh,34px);
  display:flex;flex-direction:column;overflow:hidden}
.running .quiz-top{margin-bottom:clamp(8px,1.3vh,16px)}
.running .progress{margin-bottom:clamp(9px,1.7vh,20px)}
.running .q-stem{font-size:clamp(16px,1.8vw,23px);line-height:1.5;margin:0 0 5px}
.running .q-hint{font-size:clamp(11px,1vw,13px);margin:0 0 clamp(8px,1.5vh,16px)}
.running .opts{gap:clamp(6px,1.05vh,10px)}
.running .opt{padding:clamp(8px,1.3vh,14px) clamp(12px,1.25vw,18px);
  font-size:clamp(12.5px,1.12vw,15px);line-height:1.5}
.running .opt .key{flex-basis:24px;height:24px;font-size:12px}
.running .quiz-foot{margin-top:clamp(9px,1.6vh,20px)}

.result{justify-content:center;align-items:center;text-align:center;gap:clamp(9px,1.6vh,18px)}
.result h2{font-size:clamp(24px,3vw,40px);font-weight:850}
.result-sub{color:var(--muted);font-size:clamp(12.5px,1.1vw,15px);margin:0;max-width:64ch;line-height:1.7}
.result-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(7px,1vw,12px);width:min(560px,100%)}
.result .hero-actions{justify-content:center;margin-top:6px;gap:9px;flex-wrap:wrap}

/* ---------- 副屏通用 ---------- */
.screen-head{flex:none;display:flex;align-items:flex-end;justify-content:space-between;
  gap:20px;margin-bottom:clamp(12px,2.2vh,26px)}
.screen-head .sec-title{font-size:clamp(22px,2.8vw,36px);margin:10px 0 6px}
.screen-head .sec-desc{font-size:clamp(12.5px,1.12vw,15px);max-width:82ch;margin:0}
.screen-head .btn{flex:none}
.screen-tail{flex:none;display:flex;gap:8px;flex-wrap:wrap;margin-top:clamp(10px,1.8vh,20px)}
.screen-tail .badge{font-size:11px}

/* 屏 2：随手一题 + 推荐阅读 */
.quick-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(18px,3vw,54px);height:100%}
.quick-left,.quick-right{display:flex;flex-direction:column;min-height:0}
.quick-left .screen-head,.quick-right .screen-head{margin-bottom:clamp(8px,1.4vh,16px);align-items:flex-end}
.quick-left .sec-title,.quick-right .sec-title{font-size:clamp(19px,2.1vw,28px);margin:6px 0 4px}
.quick-left .sec-desc,.quick-right .sec-desc{font-size:clamp(11px,1vw,13px);line-height:1.6}
.quick-left .quiz-card{flex:none;min-height:0;display:flex;flex-direction:column;
  overflow:hidden;padding:clamp(14px,2vh,24px)}
.quick-tip{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;
  gap:clamp(7px,1.2vh,14px);margin-top:clamp(9px,1.5vh,16px);
  padding:clamp(14px,2vh,26px);border:1px dashed var(--line2);border-radius:16px;
  background:rgba(255,255,255,.022)}
.quick-tip b{font-size:clamp(14px,1.28vw,19px);font-weight:800}
.quick-tip p{margin:0;color:var(--muted);font-size:clamp(11.5px,1vw,13.5px);
  line-height:1.75;max-width:70ch}
.quick-tip .btn{align-self:flex-start}
.quick-left .quiz-top{margin-bottom:clamp(7px,1.2vh,14px)}
.quick-left .progress{margin-bottom:clamp(8px,1.5vh,18px)}
.quick-left .q-stem{font-size:clamp(15px,1.62vw,21px);line-height:1.5;margin:0 0 5px}
.quick-left .q-hint{font-size:clamp(10.5px,.95vw,12.5px);margin:0 0 clamp(7px,1.3vh,14px)}
.quick-left .opts{gap:clamp(5px,.9vh,9px)}
.quick-left .opt{padding:clamp(7px,1.2vh,13px) clamp(11px,1.2vw,17px);
  font-size:clamp(12px,1.05vw,14px);line-height:1.5}
.quick-left .opt .key{flex-basis:23px;height:23px;font-size:11.5px}
.quick-left .quiz-foot{margin-top:clamp(8px,1.4vh,18px)}
.quick-right .roam-grid{flex:1;min-height:0;grid-template-columns:1fr;
  grid-template-rows:repeat(5,minmax(0,1fr));gap:clamp(5px,.9vh,10px);counter-reset:rc}
.quick-right .roam-card{display:flex;align-items:center;gap:10px;min-height:0;
  padding:clamp(7px,1.2vh,14px) clamp(11px,1.2vw,16px);position:relative;overflow:hidden}
.quick-right .roam-card::after{display:none}
.quick-right .roam-card::before{counter-increment:rc;content:counter(rc,decimal-leading-zero);
  position:absolute;right:10px;bottom:0;pointer-events:none;
  font:800 clamp(28px,3.2vw,54px)/1 ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:-.08em;color:rgba(255,255,255,.05)}
.quick-right .roam-tag{flex:none;font-size:10px;min-width:30px}
.quick-right .roam-card b{flex:1;min-width:0;font-size:clamp(12px,1.05vw,15px);
  margin:0;padding:0;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.quick-right .roam-card em{flex:none;font-size:10.5px;margin:0;padding:0}

/* 屏 3：大类路线（10 卡 5×2） */
.screen-tracks .cat-grid{flex:1;min-height:0;grid-template-columns:repeat(5,minmax(0,1fr));
  grid-template-rows:repeat(2,minmax(0,1fr));gap:clamp(8px,1vw,14px)}
.screen-tracks .cat-card{height:100%;min-height:0;padding:clamp(11px,1.7vh,20px)}
.screen-tracks .cat-no{font-size:10px}
.screen-tracks .cat-icon{font-size:clamp(15px,1.5vw,20px);margin:clamp(5px,1vh,11px) 0 5px}
.screen-tracks .cat-name{font-size:clamp(14px,1.3vw,18px)}
.screen-tracks .cat-en{font-size:9.5px;margin:1px 0 5px}
.screen-tracks .cat-desc{font-size:clamp(11px,.94vw,13px);line-height:1.55}
.screen-tracks .cat-soon{margin-top:6px;font-size:10.5px}

/* 屏 4：怎么学与延伸 */
.more-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  gap:clamp(22px,4vw,72px);align-items:center;height:100%}
.more-left .sec-title{font-size:clamp(22px,2.8vw,36px);margin:12px 0 8px}
.more-left .sec-desc{font-size:clamp(12.5px,1.1vw,15px);max-width:62ch}
.steps{display:grid;gap:clamp(7px,1.25vh,13px);margin-top:clamp(12px,2.2vh,26px)}
.step{display:flex;align-items:center;gap:14px;padding:clamp(8px,1.25vh,14px) 16px;
  border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.step i{font-style:normal;font:800 13px ui-monospace,SFMono-Regular,Consolas,monospace;
  color:var(--acc);min-width:26px}
.step b{font-size:clamp(13px,1.15vw,15px);display:block}
.step span{font-size:clamp(11px,.98vw,13px);color:var(--muted);display:block;line-height:1.5}
.more-left .hero-actions{margin-top:clamp(14px,2.3vh,24px)}
.more-right{height:100%;min-height:0;display:flex;flex-direction:column;justify-content:center;
  gap:clamp(10px,1.8vh,20px)}
.more-right .hero-visual{min-height:clamp(170px,26vh,260px);flex:none}
.more-right .hero-visual .p1{inset:0 0 0 0;transform:rotate(-1deg)}
.more-right .hero-visual .p2{right:0;bottom:-4px;width:auto;padding:8px 14px;transform:rotate(1.5deg)}
.more-right .hero-visual .p2 .rowline{display:none}
.more-right .hero-visual .p2 .mini{font-size:11px}
.more-right .hero-visual .panel{padding:12px 14px}
.more-right .hero-visual .code{font-size:clamp(11px,1vw,12.5px);line-height:1.9}
.more-right .hero-visual .pl{margin-bottom:10px}
.more-links{flex:none;padding:clamp(14px,2vh,22px)}
.more-links .fl{display:flex;flex-direction:column;gap:3px}
.more-links .fl a{font-size:clamp(12px,1.05vw,14px);color:var(--muted);line-height:1.8}
.more-links .fl a:hover{color:var(--acc)}

/* ---------- 矮屏桌面（1366×768 笔记本）：仍整屏，只压缩密度 ---------- */
@media (min-width:901px) and (max-height:780px){
  :root{--head-h:62px;--foot-h:42px}
  .setup{gap:8px}
  .setup-title h1{font-size:clamp(25px,3vw,40px);margin:4px 0 0}
  .setup-lead{font-size:12.5px;line-height:1.5;margin-top:6px}
  .setup-stats .stat{padding:5px 8px}
  .setup-stats .stat b{font-size:17px}
  .mode-card{padding:9px 14px}
  .mode-icon{font-size:18px;margin-bottom:3px}
  .mode-card b{font-size:15px}
  .mode-card span{font-size:11.5px}
  .setup-bar{padding:9px 14px}
  .setup-note{font-size:10.5px;line-height:1.45}
  .running .quiz-card{padding:12px 16px}
  .running .q-stem{font-size:17px}
  .running .opt{padding:7px 12px;font-size:13px}
  .running .progress{margin-bottom:10px}
  .running .opts{gap:6px}
  .quick-left .quiz-card{padding:12px 15px}
  .quick-left .q-stem{font-size:15px}
  .screen-head{margin-bottom:10px}
  .screen-head .sec-title{font-size:24px;margin:6px 0 4px}
  .screen-head .sec-desc{font-size:12.5px}
  .screen-tracks .cat-card{padding:9px 14px}
  .screen-tracks .cat-icon{margin:4px 0 3px;font-size:15px}
  .screen-tracks .cat-desc{font-size:11px}
  .steps{gap:6px;margin-top:10px}
  .step{padding:7px 12px}
  .more-right .hero-visual{min-height:150px}
  .more-links{padding:12px 16px}
}

/* ---------- 中屏 / 平板：仍是一屏一切 ---------- */
@media (max-width:900px){
  :root{--head-h:56px;--foot-h:46px;--pad-x:clamp(16px,3vw,34px)}
  .topbar{top:0;height:56px}
  .topbar .wrap{height:56px;gap:14px}
  .setup-head{grid-template-columns:minmax(0,1fr) auto;gap:12px}
  .setup-title h1{font-size:clamp(24px,3.6vw,34px);margin:5px 0 0}
  .setup-lead{font-size:12px;line-height:1.55;margin-top:5px}
  .setup-stats{min-width:180px;gap:4px}
  .setup-stats .stat{padding:4px 6px}
  .setup-stats .stat b{font-size:15px}
  .setup-stats .stat span{font-size:9.5px}
  .mode-card{padding:8px 11px}
  .mode-icon{font-size:17px;margin-bottom:2px}
  .mode-card b{font-size:14px}
  .mode-card span{font-size:11px;line-height:1.4}
  .mode-card em{font-size:9.5px}
  .setup-bar{padding:9px 11px;gap:10px}
  .chip-row .chip{padding:4px 8px;font-size:11.5px}
  .bar-label{font-size:11px;min-width:46px}
  .setup-sum{font-size:11px}
  .lnk{font-size:10.5px}
  .setup-note{font-size:10.5px;line-height:1.45}
  .running .quiz-card{padding:11px 13px;overflow-y:auto}
  .running .q-stem{font-size:15px}
  .running .q-hint{font-size:11px;margin-bottom:8px}
  .running .opts{gap:5px}
  .running .opt{padding:6px 10px;font-size:12.5px;line-height:1.45}
  .running .opt .key{flex-basis:20px;height:20px;font-size:11px}
  .running .progress{margin-bottom:8px}
  .running .quiz-foot{margin-top:8px}
  .quick-grid{gap:14px}
  .quick-left .quiz-card{padding:11px 13px;overflow-y:auto}
  .quick-left .q-stem{font-size:14px}
  .quick-left .opt{padding:6px 9px;font-size:12px}
  .quick-tip{padding:11px 14px;gap:6px;margin-top:9px}
  .quick-tip b{font-size:13px}
  .quick-tip p{font-size:11px;line-height:1.6}
  .screen-head{margin-bottom:10px}
  .screen-head .sec-title{font-size:22px;margin:6px 0 4px}
  .screen-head .sec-desc{font-size:12px;line-height:1.6}
  .screen-tracks .cat-grid{grid-template-columns:repeat(5,minmax(0,1fr));
    grid-template-rows:repeat(2,minmax(0,1fr))}
  .screen-tracks .cat-card{padding:9px 10px}
  .screen-tracks .cat-name{font-size:13px}
  .screen-tracks .cat-desc{font-size:10.5px}
  .more-grid{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);
    gap:14px;align-items:stretch}
  .steps{gap:6px;margin-top:10px}
  .step{padding:6px 10px;gap:10px}
  .step b{font-size:12.5px}
  .step span{font-size:11px}
  .more-right{flex-direction:row;gap:12px}
  .more-right .hero-visual{display:none}
  .more-links{flex:1;padding:12px}
  .more-links .fl a{font-size:11.5px;line-height:1.6}
  .more-links .copy{display:none}
  .sf-hint{font-size:11px}
  .sf-name{display:none}
}

/* ---------- 手机：全部塞进一屏，横滑切换（不降级长滚动） ---------- */
@media (max-width:640px){
  :root{--head-h:48px;--foot-h:44px;--pad-x:13px}
  .topbar{top:0;height:48px}
  .topbar .wrap{height:48px;gap:8px;padding:0 13px}
  .brand img{width:30px;height:30px;border-radius:9px}
  .nav{gap:0}
  .nav a{padding:4px 6px;font-size:11.5px}
  .top-cta .btn.sm{padding:5px 9px;font-size:11.5px}
  .screen{padding-top:calc(var(--head-h) + 6px);padding-bottom:calc(var(--foot-h) + 8px)}
  .screen-foot{padding:0 12px;gap:8px;font-size:11px}
  .sf-hint{display:none}
  .sf-num{font-size:13px}
  .dots{margin-left:0;margin-right:auto;padding:4px 6px;gap:4px}
  .dots .arw{width:24px;height:24px;font-size:14px}
  .dots button[data-go] i{width:7px;height:7px}
  .setup{gap:7px}
  .setup-head{grid-template-columns:1fr;gap:6px}
  .setup-title h1{font-size:clamp(21px,6vw,28px);line-height:1.2;margin:4px 0 0}
  .setup-lead{font-size:10.5px;line-height:1.45;max-width:none;margin-top:5px}
  .setup-stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;min-width:0}
  .setup-stats .stat{padding:3px 2px}
  .setup-stats .stat b{font-size:13px}
  .setup-stats .stat span{font-size:8.5px}
  .mode-grid{grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:repeat(3,minmax(0,1fr));gap:6px}
  .mode-card{padding:6px 9px;gap:0;border-radius:12px}
  .mode-card.on::after{right:8px;top:6px;font-size:12px}
  .mode-icon{font-size:15px;margin-bottom:1px}
  .mode-card b{font-size:12px}
  .mode-card span{font-size:9.5px;line-height:1.3}
  .mode-card em{display:none}
  .setup-bar{grid-template-columns:1fr;gap:7px;padding:7px 9px}
  .bar-row{gap:5px}
  .bar-label{font-size:10px;min-width:42px}
  .chip-row{gap:4px}
  .chip-row .chip{padding:3px 7px;font-size:10.5px}
  .bar-right{align-items:flex-start;padding-left:0;border-left:0;
    border-top:1px solid var(--line);padding-top:6px;gap:5px;white-space:normal}
  .setup-sum{font-size:10.5px}
  .bar-right .btn{width:100%;padding:6px 10px;font-size:12px}
  .bar-links{justify-content:flex-start}
  .lnk{font-size:10px}
  .setup-note{font-size:9.5px;line-height:1.35}
  .run-head{gap:5px}
  .run-head .badge{font-size:9.5px;padding:2px 6px}
  .run-head .dim{font-size:10px}
  .run-head .btn{padding:4px 8px;font-size:10.5px}
  .running .quiz-card{padding:9px 10px}
  .running .quiz-meta .badge{font-size:9px;padding:2px 5px}
  .running .q-stem{font-size:13px;line-height:1.4}
  .running .q-hint{font-size:10px;margin-bottom:6px}
  .running .opt{padding:5px 8px;font-size:11px;line-height:1.4;gap:8px}
  .running .opt .key{flex-basis:18px;height:18px;font-size:10px}
  .running .quiz-foot .btn{padding:5px 9px;font-size:11px}
  .result-stats{gap:5px}
  .result-stats .stat b{font-size:16px}
  .result-stats .stat span{font-size:9px}
  .result .hero-actions .btn{padding:6px 10px;font-size:11.5px}
  .quick-grid{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);gap:7px}
  .quick-left .screen-head,.quick-right .screen-head{margin-bottom:5px}
  .quick-left .sec-title,.quick-right .sec-title{font-size:16px;margin:2px 0 2px}
  .quick-left .sec-desc,.quick-right .sec-desc{font-size:9.5px;line-height:1.35}
  .quick-left .eyebrow,.quick-right .eyebrow{font-size:9px;padding:2px 7px}
  .quick-left .quiz-card{padding:8px 10px}
  .quick-tip{display:none}
  .quick-left .quiz-top{margin-bottom:5px}
  .quick-left .quiz-meta .badge{font-size:9px;padding:2px 5px}
  .quick-left .progress{margin-bottom:6px}
  .quick-left .q-stem{font-size:12.5px;line-height:1.4;margin-bottom:3px}
  .quick-left .q-hint{font-size:9.5px;margin-bottom:5px}
  .quick-left .opts{gap:4px}
  .quick-left .opt{padding:4px 7px;font-size:10.5px;line-height:1.35;gap:7px}
  .quick-left .opt .key{flex-basis:17px;height:17px;font-size:9px}
  .quick-left .quiz-foot{margin-top:6px}
  .quick-left .quiz-foot .btn{padding:4px 8px;font-size:10.5px}
  .quick-right .roam-grid{gap:4px}
  .quick-right .roam-card{flex-direction:row;align-items:center;gap:6px;padding:5px 9px}
  .quick-right .roam-tag{font-size:9px;min-width:26px}
  .quick-right .roam-card b{font-size:10.5px;line-height:1.3}
  .quick-right .roam-card em{display:none}
  .quick-right .roam-card::before{font-size:24px;bottom:0;right:6px}
  .quick-right .screen-tail{margin-top:5px;gap:4px}
  .quick-right .screen-tail .badge{font-size:9px;padding:2px 6px}
  .screen-head .btn{padding:4px 8px;font-size:10.5px}
  .screen-head{margin-bottom:8px;gap:8px}
  .screen-head .sec-title{font-size:19px;margin:4px 0 3px}
  .screen-head .sec-desc{font-size:10.5px;line-height:1.5;max-width:none}
  .screen-tail{margin-top:7px;gap:5px}
  .screen-tail .badge{font-size:9.5px;padding:2px 7px}
  .screen-tracks .cat-grid{grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:repeat(5,minmax(0,1fr));gap:5px}
  .screen-tracks .cat-card{padding:6px 9px;min-height:0}
  .screen-tracks .cat-no{font-size:9px}
  .screen-tracks .cat-icon{font-size:13px;margin:2px 0}
  .screen-tracks .cat-name{font-size:12px}
  .screen-tracks .cat-en{display:none}
  .screen-tracks .cat-desc{font-size:9.5px;line-height:1.35;display:-webkit-box;
    -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .screen-tracks .cat-soon{margin-top:2px;font-size:9px}
  .more-left .sec-title{font-size:19px}
  .more-left .sec-desc{font-size:10.5px;line-height:1.5}
  .steps{gap:4px;margin-top:8px}
  .step{padding:5px 9px;gap:8px}
  .step i{font-size:11px;min-width:18px}
  .step b{font-size:11.5px}
  .step span{font-size:9.5px;line-height:1.35}
  .more-left .hero-actions{margin-top:8px;gap:5px}
  .more-left .hero-actions .btn{padding:5px 8px;font-size:10.5px}
  .nav a:nth-child(n+4){display:none}
  .more-right{flex-direction:column;justify-content:flex-start;gap:8px}
  .more-right .hero-visual{display:none}
  .more-links{flex:none;width:100%;padding:8px 10px}
  .more-links h3{font-size:12px!important;margin-bottom:4px!important}
  .more-links .fl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px 10px}
  .more-links .fl a{font-size:10px;line-height:1.5}
}

/* ---------- 矮屏手机（360×640 一类）：砍说明性文字，交互与题目完整保留 ---------- */
@media (max-width:640px) and (max-height:720px){
  .setup-lead,.setup-note,.setup-stats,.mode-card span,.quick-left .sec-desc,
  .quick-right .sec-desc,.quick-right .screen-tail{display:none}
  .setup-title h1{font-size:20px;margin:2px 0 0}
  .mode-card{padding:4px 8px}
  .mode-icon{font-size:13px}
  .mode-card b{font-size:11px}
  .bar-right .btn{padding:5px 9px}
  .quick-left .quiz-card,.running .quiz-card{padding:7px 9px}
  .quick-left .q-hint,.running .q-hint{display:none}
  .quick-left .quiz-top,.running .quiz-top{margin-bottom:4px}
  .screen-tracks .cat-desc,.screen-tracks .cat-soon{display:none}
  .screen-tracks .cat-card{padding:5px 8px}
  .screen-tracks .cat-icon{margin:1px 0}
  .more-links .fl a:nth-child(n+4){display:none}
}

/* ---------- 极矮屏（横屏手机 / 小窗）：仍一屏一切，只砍装饰 ---------- */
@media (max-height:620px){
  :root{--head-h:44px;--foot-h:38px}
  .topbar{top:0;height:44px}
  .topbar .wrap{height:44px}
  .screen{padding-top:calc(var(--head-h) + 4px);padding-bottom:calc(var(--foot-h) + 4px)}
  .setup{gap:5px}
  .setup-lead,.setup-note,.setup-stats,.mode-card em{display:none}
  .setup-title h1{font-size:clamp(18px,2.4vw,26px);margin:2px 0 0}
  .setup-head{grid-template-columns:1fr}
  .mode-grid{grid-template-columns:repeat(3,minmax(0,1fr));
    grid-template-rows:repeat(2,minmax(0,1fr));gap:5px}
  .mode-card{padding:4px 9px}
  .mode-icon{font-size:14px;margin-bottom:0}
  .mode-card b{font-size:11.5px}
  .mode-card span{font-size:9px;line-height:1.25}
  .setup-bar{padding:5px 9px;gap:6px}
  .bar-row{gap:5px}
  .chip-row .chip{padding:2px 6px;font-size:10px}
  .bar-right .btn{padding:4px 9px;font-size:10.5px}
  .bar-links{display:none}
  .run-head .badge{font-size:9px;padding:1px 5px}
  .running .quiz-card,.quick-left .quiz-card{padding:7px 10px}
  .quick-tip{display:none}
  .quick-left .quiz-card{flex:1}
  .running .quiz-top,.running .q-hint,.quick-left .quiz-top,.quick-left .q-hint{display:none}
  .running .progress,.quick-left .progress{margin-bottom:5px}
  .running .q-stem,.quick-left .q-stem{font-size:12.5px;line-height:1.35;margin-bottom:4px}
  .running .opts,.quick-left .opts{gap:3px}
  .running .opt,.quick-left .opt{padding:3px 8px;font-size:10.5px;line-height:1.3}
  .running .opt .key,.quick-left .opt .key{flex-basis:16px;height:16px;font-size:9px}
  .running .quiz-foot,.quick-left .quiz-foot{margin-top:5px}
  .running .quiz-foot .btn,.quick-left .quiz-foot .btn{padding:3px 8px;font-size:10px}
  .quick-grid{gap:10px}
  .quick-left .screen-head,.quick-right .screen-head{margin-bottom:4px}
  .eyebrow{font-size:9px;padding:2px 7px}
  .screen-head .sec-title{font-size:16px;margin:1px 0 0}
  .screen-head .sec-desc,.quick-right .screen-tail{display:none}
  .screen-head{margin-bottom:6px}
  .screen-tail{margin-top:5px}
  .screen-tail .badge{font-size:9px;padding:2px 6px}
  .quick-right .roam-card{padding:3px 8px}
  .quick-right .roam-card b{font-size:10px;line-height:1.25}
  .quick-right .roam-tag{font-size:9px}
  .quick-right .roam-card::before{display:none}
  .screen-tracks .cat-card{padding:4px 8px}
  .screen-tracks .cat-no{font-size:8.5px}
  .screen-tracks .cat-icon{font-size:11px;margin:1px 0}
  .screen-tracks .cat-name{font-size:11px}
  .screen-tracks .cat-en,.screen-tracks .cat-desc,.screen-tracks .cat-soon{display:none}
  .steps{gap:3px;margin-top:6px}
  .step{padding:3px 8px}
  .step b{font-size:10.5px}
  .step span{font-size:9px;line-height:1.3}
  .more-left .sec-title{font-size:18px}
  .more-left .hero-actions{margin-top:6px}
  .more-left .hero-actions .btn{padding:4px 8px;font-size:10px}
  .more-links .copy{display:none}
  .main-copy .eyebrow,.more-left .eyebrow,.more-left .hero-actions,.more-left .sec-desc{display:none}
  .more-grid{grid-template-rows:1fr}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
  .step{padding:4px 7px}
  .step span{display:none}
  .step b{font-size:10px}
}
/* 矮屏（笔记本 / 横屏）：次屏说明卡让位给题卡，保证仍是一屏一切 */
@media (max-height:780px){
  .quick-tip{display:none}
  .quick-left .quiz-card{flex:1}
}
@media (prefers-reduced-motion:reduce){
  .deck{scroll-behavior:auto}
  .anim{opacity:1;transform:none;transition:none}
}