/* 第16版 小步俱乐部 · 队员护照（pingezhoukan-22） */
:root { --font: -apple-system, "PingFang SC", "HarmonyOS Sans SC", "MiSans", "Noto Sans SC", "Source Han Sans SC", "Microsoft YaHei", sans-serif; --red: #d8392b; --deep: #9e1c16; --gold: #d9a531; --gold2: #f6d77a; --ppr: #fbf6ea; --txt: #2e2421; --mut: #7f6b65; --pink: #fde4e0; --rule: #ead2c8; }
[hidden] { display: none !important; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
img { max-width: 100%; display: block; }
.center { text-align: center; }
.tag { display: inline-block; font-size: 12px; line-height: 1.4; padding: 1px 7px; border-radius: 6px; background: #eef0f5; color: #555c6b; font-weight: 700; vertical-align: 1px; }
.tag.ai { background: #ede7ff; color: #5a3fb0; } .tag.demo { background: #fff0c2; color: #7a5a00; } .tag.voice { background: #e0f3ff; color: #1d5f8a; }
html { background: #f1cdc5; }
body.p16 { margin: 0; color: var(--txt); min-height: 100vh; overflow-x: hidden; font: 17px/1.65 var(--font);
  --xb-accent: #d8392b; --xb-accent-dark: #9e1c16; --xb-ink: #2e2421; --xb-paper: #fbf6ea; --xb-font: var(--font); --xb-radius: 16px; --xb-brand-bg: rgba(158,28,22,.08); --xb-brand-fg: #7a2a22;
  background: radial-gradient(130% 70% at 50% 0%, #fbeae5 0%, #f6d6cf 55%, #efc4bb 100%) fixed; }
body.p16::before { /* 报纸第16版左边的红白斜纹 */
  content: ""; position: fixed; left: 0; top: 0; bottom: 0; width: 7px; z-index: 30;
  background: repeating-linear-gradient(-45deg, #d8392b 0 5px, #fff 5px 10px); }
button { font-family: var(--font); -webkit-user-select: none; user-select: none; }

/* ---------- 顶部：像报纸版头 ---------- */
.top { display: flex; align-items: center; gap: 10px; max-width: 520px; margin: 0 auto; padding: 10px 12px 4px 18px; }
.pgtag { display: flex; border-radius: 9px; overflow: hidden; font-weight: 900; box-shadow: 0 2px 0 rgba(90,10,5,.18); }
.pgtag b { background: var(--deep); color: #fff; font-size: 22px; line-height: 36px; padding: 0 9px; }
.pgtag span { background: var(--red); color: #fff; font-size: 17px; line-height: 36px; padding: 0 11px; letter-spacing: 1px; }
.top .logos { display: flex; align-items: center; gap: 4px; background: #fff; border-radius: 8px; padding: 3px 6px; margin-left: auto; }
.top .logos img { height: 22px; width: auto; }
.sndbtn { flex: none; width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(255,255,255,.75); color: var(--deep); display: flex; align-items: center; justify-content: center; }
.sndbtn svg { width: 22px; height: 22px; }
.sndbtn.off .wave { display: none; } .sndbtn:not(.off) .x { display: none; }

/* ---------- 小步招呼 ---------- */
.hello { display: flex; align-items: flex-end; gap: 8px; max-width: 460px; margin: 4px auto 6px; padding: 0 18px 0 16px; }
.hello img { width: 46px; height: auto; flex: none; }
.hello p { position: relative; margin: 0 0 6px; background: #fff; border-radius: 16px; padding: 8px 12px; font-size: 15px; line-height: 1.55; box-shadow: 0 2px 0 rgba(150,40,30,.12); }
.hello p::before { content: ""; position: absolute; left: -7px; bottom: 12px; border: 7px solid transparent; border-right-color: #fff; border-left: 0; }
.hello b { color: var(--deep); }
.hello .tag { margin-left: 4px; vertical-align: 1px; }

/* ---------- 书 ---------- */
.desk { max-width: 520px; margin: 0 auto; padding: 4px 20px 0 14px; }
.book { position: relative; perspective: 2200px; max-width: 440px; margin: 0 auto; }
.pg { display: none; position: relative; z-index: 2; color: var(--txt);
  min-height: clamp(540px, calc(100svh - 150px), 760px); padding: 14px 14px 46px 30px; border-radius: 5px 14px 14px 5px;
  background-color: var(--ppr);
  background-image: linear-gradient(90deg, rgba(120,60,40,.16), rgba(120,60,40,0) 26px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='22'%3E%3Cg fill='none' stroke-width='.7'%3E%3Cpath d='M0 11C8 1 24 1 32 11S56 21 64 11' stroke='%23f0d2c9'/%3E%3Cpath d='M0 11C8 21 24 21 32 11S56 1 64 11' stroke='%23eedfc6'/%3E%3C/g%3E%3C/svg%3E");
  box-shadow: 1px 0 0 #e7d8c4, 2px 0 0 #fff8ee, 3px 0 0 #e3d1bb, 4px 0 0 #fff8ee, 5px 1px 0 #dcc8af, 0 12px 26px rgba(120,30,20,.28); }
.pg.on { display: block; }
.pg:not(.cover)::before { content: ""; position: absolute; left: 12px; top: 16px; bottom: 16px; border-left: 2px dashed rgba(200,50,42,.5); }
.pg[data-no]::after { content: "— " attr(data-no) " —"; position: absolute; left: 0; right: 0; bottom: 12px; text-align: center; font-size: 13px; color: #b89c92; letter-spacing: 2px; }
.pg.leaf { display: block; position: absolute; left: 0; top: 0; right: 0; z-index: 6; transform-origin: left center; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.pg.leaf-out { animation: leafOut .62s cubic-bezier(.45,.05,.55,.95) forwards; }
.pg.leaf-in { animation: leafIn .62s cubic-bezier(.45,.05,.55,.95) forwards; }
@keyframes leafOut { from { transform: rotateY(0); } to { transform: rotateY(-180deg); } }
@keyframes leafIn { from { transform: rotateY(-180deg); } to { transform: rotateY(0); } }
.micro { font-size: 8px; line-height: 10px; letter-spacing: 1px; color: #dcaea5; white-space: nowrap; overflow: hidden; margin: 0 0 8px; }
.ptitle16 { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; border-bottom: 2px solid var(--red); padding-bottom: 4px; margin-bottom: 8px; }
.ptitle16 b { font-size: 21px; color: var(--deep); letter-spacing: 1px; }
.ptitle16 small { font-size: 12px; color: var(--mut); letter-spacing: 1px; text-align: right; line-height: 1.3; }
.lede { font-size: 15px; line-height: 1.6; color: var(--mut); margin: 0 0 8px; }


/* 翻页条 */
.turnbar { position: sticky; bottom: 0; z-index: 20; display: flex; align-items: center; gap: 10px; max-width: 420px; margin: 10px auto 0; padding: 8px 0 calc(8px + env(safe-area-inset-bottom)); }
.desk .turnbar { max-width: 440px; }
.turnbar::before { content: ""; position: absolute; left: -14px; right: -20px; top: 0; bottom: 0; z-index: -1; background: linear-gradient(rgba(241,205,197,0), rgba(241,205,197,.96) 35%); }
.turnbar button { flex: none; height: 48px; min-width: 56px; padding: 0 14px; border: 0; border-radius: 24px; background: var(--red); color: #fff; font: 900 18px var(--font); box-shadow: 0 3px 0 var(--deep); }
.turnbar button:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--deep); }
.turnbar button:disabled { opacity: .35; }
.turnbar .where { flex: 1; min-height: 48px; border: 0; background: rgba(255,255,255,.55); border-radius: 14px; text-align: center; font: 800 15px/1.3 var(--font); color: var(--deep); padding: 4px 6px; }
.turnbar .where::after { content: " ▾"; font-size: 12px; }
.turnbar .where small { display: block; font-weight: 600; font-size: 12px; color: var(--mut); }

/* 通用小部件 */
.b16 { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 50px; padding: 10px 18px; border: 0; border-radius: 26px;
  background: var(--red); color: #fff; font: 900 18px/1.25 var(--font); box-shadow: 0 4px 0 var(--deep); text-decoration: none; cursor: pointer; transition: transform .08s; }
.b16:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--deep); }
.b16:disabled { opacity: .55; }
.b16.wide { display: flex; width: 100%; }
.b16.gold { background: linear-gradient(#ffe48a, #f2bf35); color: #6b3a00; box-shadow: 0 4px 0 #b9821c; }
.b16.line { background: #fff; color: var(--deep); box-shadow: 0 0 0 2px var(--red) inset, 0 3px 0 rgba(158,28,22,.25); }
.lnk { border: 0; background: none; color: var(--deep); font: 800 15px var(--font); text-decoration: underline; text-underline-offset: 3px; padding: 8px 4px; cursor: pointer; }
.slips { display: flex; flex-wrap: wrap; gap: 7px; margin: 6px 0; }
.slip { border: 2px solid #e8c7bd; background: #fff; color: var(--txt); border-radius: 10px; padding: 7px 11px; font: 700 16px/1.3 var(--font); min-height: 40px; transition: transform .1s; }
.slip:active { transform: scale(.95); }
.slip.on { border-color: var(--red); background: #fff1ee; color: var(--deep); box-shadow: 0 2px 0 var(--red); }
.q16 { font-weight: 900; font-size: 18px; margin: 12px 0 4px; color: var(--deep); }
.p16 textarea, .p16 input[type=text] { width: 100%; border: 0; border-bottom: 2px solid #e2c3b9; border-radius: 0; padding: 8px 4px; font: 17px/1.7 var(--font); color: var(--txt);
  background: repeating-linear-gradient(transparent 0 33px, #ecd8cf 33px 34px); outline: none; resize: none; }
.p16 textarea:focus, .p16 input[type=text]:focus { border-bottom-color: var(--red); }
.tiny { font-size: 13px; line-height: 1.55; color: var(--mut); margin: 6px 0; }
.note16 { background: #fff8e6; border-left: 4px solid var(--gold); border-radius: 0 10px 10px 0; padding: 8px 10px; font-size: 15px; line-height: 1.6; margin: 10px 0; }
.hand { font-family: "Kaiti SC", "STKaiti", "KaiTi", var(--font); }
.shake { animation: shake .4s; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

/* ---------- 封面 ---------- */
.pg.cover { min-height: clamp(470px, calc(100svh - 250px), 640px); padding: 26px 20px 24px; text-align: center; color: var(--gold2); cursor: pointer;
  display: none; flex-direction: column; align-items: center; justify-content: space-between; border-radius: 7px 18px 18px 7px;
  background-color: #8f1a14;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .6 -.15'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23f)'/%3E%3C/svg%3E"),
    radial-gradient(120% 90% at 30% 20%, #b3261d 0%, #8f1a14 55%, #6e120d 100%);
  box-shadow: 1px 0 0 #5e0f0a, 2px 0 0 #fbf6ea, 3px 0 0 #e7d8c4, 4px 0 0 #fbf6ea, 5px 1px 0 #dcc8af, inset 12px 0 16px -6px rgba(0,0,0,.35), 0 16px 30px rgba(90,10,5,.45); }
.pg.cover.on, .pg.cover.leaf { display: flex; }
.cv-frame { position: absolute; inset: 11px; border: 1.5px solid rgba(246,215,122,.5); border-radius: 5px 12px 12px 5px; pointer-events: none; }
.foil { background: linear-gradient(180deg, #fff3c2 0%, #f1ca5d 38%, #b47d1f 54%, #f4d47e 72%, #c8932b 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 0 rgba(50,4,0,.65)); }
.cv-pub { font-size: 13px; font-weight: 800; letter-spacing: 2px; }
.cv-emb { width: 148px; height: 148px; filter: drop-shadow(0 1px 0 rgba(50,4,0,.6)); }
.cv-name { font-size: 40px; font-weight: 900; letter-spacing: 6px; line-height: 1.15; margin-top: 4px; }
.cv-sub { font-size: 23px; font-weight: 900; letter-spacing: 12px; line-height: 1.3; padding-left: 12px; }
.cv-en { font-size: 11.5px; font-weight: 800; letter-spacing: 3px; }
.cv-chip { width: 34px; height: 22px; opacity: .9; }
.cv-open { border: 2px solid rgba(246,215,122,.85); background: rgba(0,0,0,.12); color: #ffe7a0; border-radius: 26px; min-height: 50px; padding: 0 26px;
  font: 900 18px var(--font); letter-spacing: 2px; box-shadow: 0 0 0 4px rgba(246,215,122,.15); animation: breathe 2.4s ease-in-out infinite; }
@keyframes breathe { 50% { box-shadow: 0 0 0 9px rgba(246,215,122,.05); } }
.cv-foot { font-size: 13px; font-weight: 800; letter-spacing: 3px; }
.cv-sticker { position: absolute; right: 12px; top: 54px; width: 70px; height: 70px; border-radius: 50%; transform: rotate(9deg);
  background: radial-gradient(circle at 35% 30%, #fff6cf, #f6d77a 55%, #e0ad35); color: var(--deep); box-shadow: 0 3px 6px rgba(0,0,0,.3);
  display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 900; line-height: 1.05; }
.cv-sticker b { font-size: 24px; } .cv-sticker b i { font-style: normal; font-size: 14px; } .cv-sticker small { font-size: 11px; margin-top: 2px; }

/* ---------- 持照人页 ---------- */
.hd { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid var(--red); padding-bottom: 5px; margin-bottom: 10px; }
.hd b { display: block; font-size: 21px; color: var(--deep); letter-spacing: 2px; line-height: 1.2; }
.hd small { font-size: 10px; letter-spacing: .5px; color: var(--mut); font-weight: 700; white-space: nowrap; }
.hd .r { text-align: right; font-size: 11px; line-height: 1.5; color: var(--mut); font-weight: 700; }
.hd .r { white-space: nowrap; }
.hd .r b { display: inline; font-size: 13.5px; letter-spacing: 0; font-family: "Menlo", "Courier New", monospace; }
.idrow { display: flex; gap: 12px; }
.photo { flex: none; width: 112px; text-align: center; }
.photo svg { width: 112px; height: 132px; display: block; border-radius: 6px; background: #fff; box-shadow: inset 0 0 0 1.5px #e3c6bc; }
.photo small { display: block; font-size: 11.5px; color: var(--mut); line-height: 1.3; margin-top: 3px; }
.flds { flex: 1; margin: 0; min-width: 0; }
.flds dt { font-size: 10.5px; color: var(--mut); letter-spacing: .5px; font-weight: 700; line-height: 1.2; margin-top: 6px; }
.flds dt:first-child { margin-top: 0; }
.flds dd { margin: 0; font-size: 17px; font-weight: 900; line-height: 1.35; }
.flds dd.nm { font-size: 22px; color: var(--deep); }
.flds dd.nm.empty { color: #c9aaa1; }
.pickname { margin-top: 10px; }
.pickname .q16 { margin-top: 0; font-size: 17px; }
.pickname .slips { gap: 6px; }
.pickname .slip { padding: 5px 9px; font-size: 15px; min-height: 38px; }
.rr { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mrz { margin-top: 10px; padding: 7px 6px 5px; border-top: 1.5px dashed #d9b9ae; font: 600 12.5px/1.55 "OCR B", "Menlo", "Courier New", monospace; letter-spacing: 1.2px;
  color: #4a3833; white-space: nowrap; overflow: hidden; background: rgba(255,255,255,.5); }

/* ---------- 印章页 ---------- */
.stp .wm { position: absolute; left: 26px; right: 4px; bottom: 34px; height: 58%; z-index: 0; pointer-events: none; opacity: .34;
  background: url(/P16/wm1.webp?v=ea71af0b) center bottom / cover no-repeat; -webkit-mask-image: linear-gradient(rgba(0,0,0,0), #000 40%); mask-image: linear-gradient(rgba(0,0,0,0), #000 40%); }
.stp.b .wm { background-image: url(/P16/wm2.webp?v=678c19f1); }
.stp > *:not(.wm) { position: relative; z-index: 1; }
.stcount { font-size: 15px; font-weight: 800; color: var(--deep); }
.stcount b { font-size: 22px; }
.stgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 6px; }
.stx { position: relative; height: 122px; border: 0; padding: 0; background: none; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.stx .stw { display: block; }
.stx svg { display: block; width: 116px; height: 116px; transform: translate(var(--dx), var(--dy)) rotate(var(--r)); }
.stx.on svg { mix-blend-mode: multiply; opacity: .92; }
.stx svg text { font-family: var(--font); }
.stx.big { grid-column: 1 / -1; height: 150px; }
.stx.big svg { width: 144px; height: 144px; }
.stx.fresh .stw { animation: thump .6s cubic-bezier(.2,.8,.3,1.25) both; }
@keyframes thump { 0% { transform: scale(1.9); opacity: 0; } 55% { transform: scale(.93); opacity: 1; } 100% { transform: scale(1); } }
.wmcap { position: absolute !important; right: 10px; bottom: 30px; margin: 0; font-size: 11px; color: #b8867b; }
.stempty { background: rgba(255,255,255,.82); border: 2px dashed #e3b7ac; border-radius: 14px; padding: 8px 12px; font-size: 15px; line-height: 1.55; margin: 2px 0 8px; }

/* ---------- 任务卡 ---------- */
.ticket { position: relative; background: #fffdf7; border-radius: 12px; padding: 0 0 12px; box-shadow: 0 2px 0 #ecd5cb, 0 6px 14px rgba(150,40,30,.12); overflow: visible; }
.ticket::before, .ticket::after { content: ""; position: absolute; top: 58px; width: 18px; height: 18px; border-radius: 50%; background: var(--ppr); box-shadow: inset 0 0 0 1px #ecd5cb; }
.ticket::before { left: -9px; } .ticket::after { right: -9px; }
.tk-head { display: flex; align-items: flex-end; gap: 8px; background: var(--red); color: #fff; border-radius: 12px 12px 0 0; padding: 9px 12px 11px; border-bottom: 2px dashed rgba(255,255,255,.7); }
.tk-head .w { display: block; width: max-content; font-size: 12.5px; font-weight: 800; background: rgba(255,255,255,.2); border-radius: 6px; padding: 0 6px; margin-bottom: 2px; }
.tk-head b { font-size: 22px; letter-spacing: 1px; line-height: 1.2; }
.tk-head .no { margin-left: auto; font: 700 13px "Menlo", monospace; opacity: .85; }
.tk-steps { list-style: none; margin: 0; padding: 10px 12px 0 8px; }
.tk-steps li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px dashed #ecd8cf; font-size: 16.5px; line-height: 1.55; }
.tk-steps li b { color: var(--red); }
.tk-steps li small { display: block; font-size: 13.5px; color: var(--mut); line-height: 1.5; margin-top: 2px; }
.hole { position: relative; flex: none; width: 40px; height: 40px; margin-top: 2px; border-radius: 50%; border: 2.5px dashed var(--red); background: #fff; color: var(--red);
  font: 900 12px/1 var(--font); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.hole::after { content: "打孔"; }
.punched .hole { border: 0; background: radial-gradient(circle at 50% 60%, #f0c9c0 0 40%, #d99b8f 75%, #b9776b 100%); box-shadow: inset 0 4px 6px rgba(70,15,8,.55), 0 1px 0 #fff, 0 0 0 2px #fffdf7, 0 0 0 3px #e7cfc6; }
.punched b::after { content: " ✓"; color: #2a8a4f; }
.punched .hole::after { content: ""; }
.punched > div { color: var(--mut); }
.chad { position: fixed; z-index: 70; width: 34px; height: 34px; border-radius: 50%; background: #fffdf7; box-shadow: 0 0 0 1px #ecd5cb, 0 2px 3px rgba(0,0,0,.2); pointer-events: none;
  animation: chad .9s cubic-bezier(.4,0,.8,.6) forwards; }
@keyframes chad { to { transform: translate(18px, 260px) rotate(220deg) scale(.7); opacity: 0; } }
.tk-write { padding: 4px 12px 0; }
.same3 { display: grid; gap: 7px; }
.same3 .slip { text-align: left; font-size: 17px; padding: 9px 12px; }
.fb16 { display: flex; gap: 8px; align-items: flex-start; font-size: 15px; line-height: 1.55; background: #fff4f1; border-radius: 12px; padding: 8px 10px; margin: 8px 0 2px; }
.fb16 img { width: 30px; flex: none; }
.tk-parent { margin: 10px 12px 0; font-size: 13.5px; line-height: 1.6; color: var(--mut); border-top: 1px dashed #ecd8cf; padding-top: 8px; }
.tk-done { position: relative; padding: 10px 12px 0; font-size: 16px; line-height: 1.6; }
.tk-ans { background: repeating-linear-gradient(transparent 0 27px, #f1e1d9 27px 28px); padding: 2px 4px; }
.tk-ans p { margin: 0; line-height: 28px; }
.tk-seal { display: flex; align-items: center; justify-content: center; gap: 22px; margin: 8px 0 12px; }
.tk-done .redst { transform: rotate(-12deg); border: 3px solid var(--red); color: var(--red); border-radius: 10px; padding: 2px 10px;
  font-weight: 900; font-size: 22px; line-height: 1.15; text-align: center; opacity: .88; mix-blend-mode: multiply; }
.tk-done .redst small { display: block; font-size: 11px; font-weight: 800; }
.minibadge { width: 74px; height: 74px; border-radius: 50%; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(circle at 35% 30%, #fff4c6, #f7c844 50%, #e7a51e); box-shadow: 0 0 0 3px #fff6d6, 0 0 0 5px #e0a21c, 0 3px 6px rgba(0,0,0,.25); color: #b5400f; font-weight: 900; line-height: 1.05; }
.minibadge b { font-size: 22px; } .minibadge small { font-size: 9.5px; }

/* 授勋 */
.award { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: 20px;
  background: radial-gradient(circle at 50% 40%, #d8392b, #6e120d 85%); }
.award .rays { position: absolute; left: 50%; top: 38%; width: 760px; height: 760px; margin: -380px 0 0 -380px; border-radius: 50%; opacity: .35;
  background: repeating-conic-gradient(from 0deg, #ffe48a 0 8deg, transparent 8deg 20deg); -webkit-mask-image: radial-gradient(#000 20%, transparent 65%); mask-image: radial-gradient(#000 20%, transparent 65%);
  animation: spin 18s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.aw-box { position: relative; text-align: center; color: #fff; max-width: 340px; }
.medal { position: relative; width: 176px; height: 176px; margin: 0 auto 18px; }
.award.go .medal { animation: medalIn 1.3s cubic-bezier(.2,.7,.3,1) both; }
.medal::before, .medal::after { content: ""; position: absolute; top: 120px; width: 46px; height: 92px; background: linear-gradient(#e64535, #a91d14); z-index: -1;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%); }
.medal::before { left: 38px; transform: rotate(14deg); } .medal::after { right: 38px; transform: rotate(-14deg); }
.medal .face { position: absolute; inset: 0; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(circle at 34% 28%, #fff7d2, #f9cd4a 45%, #e9a51c 85%); border: 6px solid #fff6d8; box-shadow: 0 0 0 5px #e0a21c, 0 12px 26px rgba(0,0,0,.35); color: #c0410e; }
.medal .face::before { content: ""; position: absolute; inset: 12px; border: 3px dashed #d38a14; border-radius: 50%; }
.medal .face b { font-size: 50px; line-height: 1; letter-spacing: 2px; }
.medal .face small { font-size: 15px; font-weight: 900; margin-top: 6px; }
@keyframes medalIn { 0% { transform: translateY(-120vh) rotateY(0); } 60% { transform: translateY(0) rotateY(720deg); } 75% { transform: translateY(-14px) rotateY(720deg); } 100% { transform: translateY(0) rotateY(720deg); } }
.aw-t { font-size: 24px; font-weight: 900; margin: 0 0 4px; }
.aw-s { font-size: 16px; margin: 0 0 12px; opacity: .95; }
.aw-net { font-size: 14px; background: rgba(0,0,0,.2); border-radius: 10px; padding: 6px 10px; margin: 0 0 12px; text-align: left; }
.aw-xb { position: absolute; left: -10px; top: 36px; width: 54px; z-index: 2; }

/* ---------- 小步地图 ---------- */
.map16 { background: var(--pink); border-radius: 16px; padding: 4px 2px 0; }
.map16 svg { display: block; width: 100%; height: auto; }
.map16 .nd { cursor: pointer; }
.map16 text { font-family: var(--font); }
.mpinfo { min-height: 52px; font-size: 15.5px; line-height: 1.55; background: #fff; border-radius: 12px; padding: 8px 12px; margin: 8px 0; box-shadow: 0 1px 0 #ecd5cb; }
.mpinfo b { color: var(--deep); }
.press { animation: press .8s cubic-bezier(.2,.8,.3,1.3) both; transform-origin: 76px 24px; transform-box: view-box; }
@keyframes press { 0% { transform: scale(2.6); opacity: 0; } 60% { transform: scale(.9); opacity: 1; } 100% { transform: scale(1); } }
.pulse { animation: pulse 1.8s ease-out infinite; transform-origin: 46px 52px; transform-box: view-box; }
@keyframes pulse { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(1.35); opacity: 0; } }

/* ---------- 大问号：时间胶囊 ---------- */
.qcard { background: #fffdf8; border-radius: 12px; padding: 12px 12px 14px; box-shadow: 0 2px 0 #ecd5cb, 0 6px 14px rgba(150,40,30,.12); border-top: 5px solid var(--red); }
.lt-head { display: flex; justify-content: space-between; align-items: baseline; font-weight: 900; color: var(--deep); font-size: 18px; }
.lt-head span { font-size: 13px; color: var(--mut); font-weight: 800; }
.lt-lead { font-size: 15.5px; line-height: 1.6; margin: 6px 0; }
.lt-big { background: var(--red); color: #ffd84a; border-radius: 12px; text-align: center; font-size: 34px; font-weight: 900; line-height: 1.25; padding: 12px 8px; margin: 8px 0 10px;
  box-shadow: 4px 4px 0 #f3b2a8; letter-spacing: 2px; }
.qopts { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 7px; }
.qopt { position: relative; min-height: 62px; border: 2px solid #e8c7bd; border-radius: 10px; background: #fff; font: 900 16px/1.2 var(--font); color: var(--txt); padding: 14px 0 6px; white-space: nowrap; letter-spacing: 0; }
.qopt::before { content: ""; position: absolute; top: 5px; left: 50%; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--ppr); box-shadow: inset 0 0 0 1.5px #d9b9ae; }
.qopt.on { border-color: var(--red); background: #fff1ee; color: var(--deep); box-shadow: 0 3px 0 var(--red); transform: rotate(-2deg); }
.vbars { margin: 10px 0 4px; }
.vrow { display: grid; grid-template-columns: 96px 1fr 30px; align-items: center; gap: 6px; margin: 5px 0; font-weight: 800; font-size: 15px; }
.vrow .vt { position: relative; height: 22px; background: #f6e6e1; border-radius: 11px; overflow: hidden; display: flex; }
.vrow .vr { background: var(--red); height: 100%; }
.vrow .vd { height: 100%; background: repeating-linear-gradient(-45deg, #f0a497 0 4px, #f8d3cb 4px 8px); }
.vrow.mine .vl { color: var(--deep); }
.vrow .vl { white-space: nowrap; }
.vrow .vl i { font-style: normal; font-size: 11px; background: var(--red); color: #fff; border-radius: 6px; padding: 0 4px; margin-left: 3px; vertical-align: 2px; }
.vrow b { text-align: right; }
.vleg { font-size: 12.5px; color: var(--mut); line-height: 1.6; margin: 2px 0 6px; }
.vleg i { display: inline-block; width: 12px; height: 10px; border-radius: 3px; vertical-align: -1px; margin-right: 3px; }
.vleg .lr { background: var(--red); } .vleg .ld { background: repeating-linear-gradient(-45deg, #f0a497 0 3px, #f8d3cb 3px 6px); margin-left: 8px; }
.peek { background: #fff; border-radius: 10px; padding: 8px 12px; font-size: 15.5px; line-height: 1.6; margin: 6px 0; box-shadow: 0 1px 0 #ecd5cb; }
.capwrap { display: flex; justify-content: center; padding: 34px 0 8px; }
.capwrap.big { padding: 30px 90px 12px 0; }
.cap { position: relative; width: 108px; height: 140px; }
.cap i { position: absolute; display: block; }
.cap-body { left: 0; right: 0; bottom: 0; height: 108px; z-index: 2; border-radius: 10px 10px 20px 20px;
  background: linear-gradient(90deg, #9c6a18 0%, #e8bf5a 18%, #fff0bd 34%, #f0cb68 50%, #c9922d 78%, #8f5f14 100%); box-shadow: 0 8px 14px rgba(120,60,20,.3); }
.cap-body::before { content: "时间胶囊"; position: absolute; left: 0; right: 0; top: 22px; height: 26px; line-height: 26px; text-align: center; color: #fff3c9; font-size: 13px; font-weight: 900; letter-spacing: 2px; text-indent: 2px;
  background: linear-gradient(90deg, #7d130e, #d8392b 30%, #ef6a5a 42%, #c22b20 60%, #7d130e); }
.cap-body::after { content: ""; position: absolute; left: 50%; bottom: 14px; width: 32px; height: 32px; margin-left: -16px; border-radius: 50%; border: 3px solid #8f5f14;
  background: linear-gradient(#7d130e, #7d130e) 14px 6px / 2.5px 10px no-repeat, linear-gradient(#7d130e, #7d130e) 14px 14px / 9px 2.5px no-repeat, #fff8de; }
.cap-lid { left: -5px; right: -5px; top: 22px; height: 26px; z-index: 3; border-radius: 9px 9px 5px 5px; transform-origin: 8% 100%;
  background: linear-gradient(90deg, #7d130e, #d8392b 25%, #f07b6c 38%, #c22b20 60%, #7d130e); box-shadow: 0 3px 0 rgba(0,0,0,.18); transition: transform .7s cubic-bezier(.3,.7,.3,1.25); }
.cap-lid::before { content: ""; position: absolute; left: 50%; top: -9px; width: 30px; height: 10px; margin-left: -15px; border-radius: 6px 6px 0 0; background: linear-gradient(90deg, #7d130e, #e04a3c 40%, #9e1c16); }
.cap.open .cap-lid { transform: translate(-30px, -16px) rotate(-28deg); }
.cap-scroll { position: absolute; left: 50%; top: 4px; z-index: 1; width: 34px; height: 66px; margin-left: -17px; border-radius: 5px; writing-mode: vertical-rl;
  background: linear-gradient(#efe2cf, #fffdf6 16%, #fffdf6 84%, #efe2cf); box-shadow: 0 2px 3px rgba(0,0,0,.18); font: 800 12px/34px var(--font); color: var(--deep); text-align: center; letter-spacing: 2px;
  transition: transform .6s ease-in; }
.cap:not(.open) .cap-scroll { transform: translateY(44px); }
.cap-in { position: absolute; left: 50%; top: -16px; z-index: 4; transform: translateX(-20%); font-size: 13px; font-weight: 800; color: #b0857a; border: 2px dashed #d9b9ae; border-radius: 10px; padding: 3px 8px; background: rgba(255,255,255,.85); white-space: nowrap; }
.cap-tag { position: absolute; left: 100%; top: 58px; margin-left: 24px; z-index: 3; transform: rotate(6deg); transform-origin: left center; background: #fffdf6; border: 1.5px solid #d9b9ae; border-radius: 4px 10px 10px 4px; padding: 4px 10px;
  font-size: 13.5px; color: var(--deep); font-weight: 900; box-shadow: 0 2px 3px rgba(0,0,0,.12); white-space: nowrap; }
.cap-tag::before { content: ""; position: absolute; right: 100%; top: 50%; width: 26px; height: 1.5px; background: #b98d80; }

/* ---------- 问阿零：纸飞机 ---------- */
.sky { position: relative; height: 128px; border-radius: 14px; overflow: visible; margin-bottom: 10px;
  background: radial-gradient(40px 16px at 22% 70%, #fff 60%, transparent 62%), radial-gradient(54px 20px at 30% 64%, #fff 60%, transparent 62%), linear-gradient(#bfe3fa, #e9f6fd); }
.sky-al { position: absolute; right: 10px; top: 10px; width: 86px; animation: bob 3s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-6px); } }
.sky-say { position: absolute; left: 10px; top: 12px; right: 106px; margin: 0; background: #fff; border-radius: 14px 14px 4px 14px; padding: 6px 10px; font-size: 14.5px; line-height: 1.5; color: #1f5f99; font-weight: 700; box-shadow: 0 2px 0 rgba(31,95,153,.15); }
.sky-tag { position: absolute; right: 8px; bottom: 6px; }
.plane { position: absolute; left: 30px; bottom: -150px; width: 64px; height: 40px; z-index: 5; opacity: 0; pointer-events: none; }
.plane.fly { animation: fly 1s cubic-bezier(.45,.05,.4,1) forwards; }
@keyframes fly { 0% { opacity: 1; transform: translate(0, 0) rotate(-8deg) scale(1.2); } 60% { opacity: 1; transform: translate(150px, -170px) rotate(-22deg) scale(.9); } 100% { opacity: 0; transform: translate(230px, -200px) rotate(-10deg) scale(.5); } }
.note { position: relative; background: #fffdf6; border-radius: 4px; padding: 10px 12px 10px 18px; box-shadow: 0 2px 0 #ecd5cb, 0 6px 12px rgba(150,40,30,.12);
  background-image: linear-gradient(90deg, transparent 10px, rgba(216,57,43,.35) 10px 11.5px, transparent 11.5px); transition: transform .45s ease-in, opacity .45s; transform-origin: 50% 0; }
.note.fold { transform: scale(.2, .05); opacity: 0; }
.note-to { font-weight: 900; color: #1f5f99; font-size: 16px; }
.note-from { font-size: 14px; color: var(--mut); text-align: right; margin-top: 4px; }
.sent { text-align: center; padding: 6px 8px 10px; }
.sent-t { font-size: 20px; font-weight: 900; color: #1f5f99; margin: 4px 0; }

/* 目录 */
.toc { list-style: none; margin: 6px 0 0; padding: 0; }
.toc li button { display: flex; align-items: baseline; gap: 6px; width: 100%; border: 0; background: none; padding: 9px 2px; font: 800 17px var(--font); color: var(--txt); text-align: left; border-bottom: 1px dashed #e8cfc6; }
.toc li button .dots { flex: 1; border-bottom: 2px dotted #d9b9ae; transform: translateY(-4px); }
.toc li button small { font-size: 13px; color: var(--mut); font-weight: 700; }
.toc li button b { color: var(--red); font-family: "Menlo", monospace; }
.toc li.on button { color: var(--deep); background: #fff1ee; border-radius: 8px; }

/* ---------- 画画页 ---------- */
.drwrap { position: relative; }
.drpad { display: block; width: 100%; height: 300px; touch-action: none; border-radius: 12px; border: 2.5px dashed #f0a35a;
  background: #fff radial-gradient(circle, #f6c08f 1.3px, transparent 1.6px) 0 0 / 18px 18px; }
.drlab { position: absolute; left: 10px; top: 6px; font-size: 13px; color: #e0843a; font-weight: 800; pointer-events: none; }
.drtools { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 8px 0; }
.drtools .sw { width: 36px; height: 36px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 2px #e3cfc6; }
.drtools .sw.on { box-shadow: 0 0 0 3px var(--txt); }
.drtools .tl { height: 38px; padding: 0 11px; border-radius: 19px; border: 2px solid #e3cfc6; background: #fff; font: 800 15px var(--font); color: var(--txt); }
.drtools .tl.on { border-color: var(--red); color: var(--deep); }

/* ---------- 封底 ---------- */
.memo { margin: 8px 0; }
.memo h3 { display: flex; align-items: center; gap: 6px; margin: 12px 0 4px; font-size: 17px; color: var(--deep); }
.memo h3 i { font-style: normal; display: inline-flex; width: 24px; height: 24px; border-radius: 50%; background: var(--tc, var(--red)); color: #fff; font-size: 13px; align-items: center; justify-content: center; }
.memo ul { margin: 0; padding-left: 20px; font-size: 15.5px; line-height: 1.65; }
.memo ul li { margin: 3px 0; }
.memo p { font-size: 15.5px; line-height: 1.65; margin: 2px 0; }
.memo a { color: var(--deep); font-weight: 800; }
.pact { background: #eaf6ec; border-radius: 10px; padding: 8px 10px; color: #23663a; font-size: 15px; line-height: 1.6; margin: 10px 0; }
.back16 { background: #fff3c9; border: 2.5px solid #f1c232; border-radius: 14px; padding: 10px 12px; margin: 12px 0; }
.back16 .bt { font-weight: 900; color: #8a5a00; font-size: 17px; }
.back16 p { margin: 4px 0 0; font-size: 16px; line-height: 1.6; }
.parents { margin: 10px 0; background: #fff; border-radius: 12px; padding: 8px 10px; box-shadow: 0 1px 0 #ecd5cb; }
.parents summary { font-weight: 900; color: var(--deep); cursor: pointer; font-size: 16px; }
.parents table.xb-pb { width: 100%; border-collapse: collapse; font-size: 12.5px; line-height: 1.45; }
.parents .xb-pb th, .parents .xb-pb td { border-bottom: 1px solid #f0dcd4; padding: 4px 3px; text-align: left; vertical-align: top; }
.parents .xb-pb th { color: var(--mut); font-weight: 800; }
.parents .xb-pb th, .parents .xb-pb td:nth-child(2), .parents .xb-pb td:nth-child(3) { white-space: nowrap; }
.parents .xb-pb td:first-child { min-width: 5.5em; }
.parents p { font-size: 14px; line-height: 1.6; margin: 4px 0; }
.parents .xb-pb-small { font-size: 12px; color: var(--mut); }
.credit { font-size: 12.5px; line-height: 1.6; color: var(--mut); border-top: 1px dashed #e2c8be; padding-top: 8px; margin-top: 10px; }

/* 底部弹出 */
.sheet { position: fixed; inset: 0; z-index: 75; background: rgba(60,15,10,.45); display: flex; align-items: flex-end; justify-content: center; }
.sheet .box { width: 100%; max-width: 460px; background: var(--ppr); border-radius: 20px 20px 0 0; padding: 16px 18px calc(16px + env(safe-area-inset-bottom)); animation: up .25s ease-out; }
@keyframes up { from { transform: translateY(40%); opacity: .4; } }
.sheet .box h4 { margin: 0 0 4px; font-size: 20px; color: var(--deep); }
.sheet .box p { margin: 4px 0; font-size: 16px; line-height: 1.6; }
.sheet .acts { display: flex; gap: 10px; margin-top: 12px; }
.sheet .acts > * { flex: 1; }

/* 页底品牌条用公共的 xb-brand */
.xb-brand { max-width: 520px; margin: 18px auto 0; border-radius: 14px 14px 0 0; }

/* 横屏、平板 */
@media (min-width: 700px) { .hello { max-width: 520px; } .pg { min-height: 620px; } .pg.cover { min-height: 560px; } }
@media (orientation: landscape) and (max-height: 500px) { .pg { min-height: 520px; } .pg.cover { min-height: 460px; } .hello { display: none; } .turnbar { position: static; } }
@media (prefers-reduced-motion: reduce) { .pg.leaf-out, .pg.leaf-in, .cv-open, .award .rays, .award.go .medal, .pulse, .press, .stx.fresh .stw, .plane.fly, .sky-al, .chad { animation: none !important; } .cap-lid, .cap-scroll, .note { transition: none !important; } }

/* 课堂投屏 ?screen=1 */
body.screen .top, body.screen .hello, body.screen .turnbar, body.screen .xb-brand, body.screen .xb-toast { display: none !important; }
body.screen .desk { max-width: 1100px; padding: 20px; }
body.screen .book { max-width: 1000px; }
body.screen .pg { min-height: 0; padding: 26px 32px; }
body.screen .pg::after, body.screen .pg::before { display: none; }
body.screen .lt-big { font-size: 72px; }
body.screen .lt-lead { font-size: 30px; }
body.screen .lt-head { font-size: 34px; } body.screen .lt-head span { font-size: 24px; }
body.screen .qopt { font-size: 34px; min-height: 100px; }
body.screen .vrow { grid-template-columns: 170px 1fr 70px; font-size: 32px; } body.screen .vrow .vt { height: 46px; border-radius: 23px; }
body.screen .vleg { font-size: 20px; }
body.screen .q-only-hide { display: none !important; }
@media (max-width: 699px) { body.screen .lt-big { font-size: 44px; } body.screen .qopt { font-size: 20px; min-height: 70px; } body.screen .vrow { grid-template-columns: 110px 1fr 44px; font-size: 20px; } body.screen .lt-head { font-size: 24px; } body.screen .lt-head span { font-size: 16px; } body.screen .lt-lead { font-size: 20px; } }