:root{--paper:#f8f2e4;--paper2:#f3ead6;--ink:#2e2a24;--mute:#776f62;--line:#d9ccb2;--acc:#a8432a;--blue:#2d5f93;--ok:#2e7d4f;--serif:var(--f-serif)}*{box-sizing:border-box}html,body{margin:0}body{background:#5d5348 radial-gradient(ellipse at 50% 30%,#7a6d5d,#4a4138 80%);color:var(--ink);font:16px/1.8 PingFang SC,Noto Sans CJK SC,Microsoft YaHei,sans-serif;padding:18px 18px 76px;min-height:100vh}header{max-width:1320px;margin:0 auto 10px;display:flex;justify-content:space-between;color:#efe6d4;font-size:14px;font-family:var(--serif);letter-spacing:1px}.book{position:relative;max-width:1320px;margin:0 auto;display:flex;border-radius:4px 4px 6px 6px;box-shadow:0 1px #e9dfc9,0 3px #ddd1b8,0 5px #e9dfc9,0 7px #d6c8ad,0 9px #e4d9c2,0 22px 40px #00000073}.page{flex:1;min-width:0;padding:30px 36px 34px;position:relative;background-color:var(--paper);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .45  0 0 0 0 .38  0 0 0 0 .26  0 0 0 .07 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>")}.left{border-radius:4px 0 0 6px;background-image:linear-gradient(to right,rgba(0,0,0,.05),transparent 6%,transparent 88%,rgba(90,70,40,.18)),url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .45  0 0 0 0 .38  0 0 0 0 .26  0 0 0 .07 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>")}.right{border-radius:0 4px 6px 0;background-image:linear-gradient(to left,rgba(0,0,0,.05),transparent 6%,transparent 90%,rgba(90,70,40,.2)),url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .45  0 0 0 0 .38  0 0 0 0 .26  0 0 0 .07 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>")}.folio{position:absolute;bottom:10px;font-family:var(--serif);font-size:13px;color:var(--mute)}.left .folio{left:36px}.right .folio{right:36px}.no{color:var(--acc);font-size:13px;letter-spacing:3px;font-family:var(--serif)}h1{font-family:var(--serif);font-size:30px;margin:4px 0 14px;font-weight:700;letter-spacing:1px}h2{font-family:var(--serif);font-size:18px;margin:20px 0 6px;color:var(--acc)}p{margin:6px 0}.rule{border-left:3px solid var(--acc);background:#a8432a0f;padding:8px 14px;margin:10px 0;font-family:var(--serif);font-size:16.5px}.src{font-size:13px;color:var(--mute)}.t{border-bottom:1px dashed var(--blue);color:var(--blue);cursor:pointer}#tip{position:fixed;z-index:30;max-width:280px;background:#fffaf0;border:1px solid var(--line);box-shadow:0 3px 10px #0000002e;padding:8px 10px;font-size:14px;border-radius:3px;display:none}.quiz{margin-top:18px;border:1px solid var(--line);border-radius:4px;padding:14px;background:#ffffff8c}.quiz .q{font-weight:600;margin-bottom:6px}.opt{display:block;width:100%;text-align:left;margin:6px 0;padding:8px 12px;border:1px solid var(--line);background:#fffcf4;border-radius:3px;font:inherit;font-size:15px;cursor:pointer;color:var(--ink)}.opt.sel{border-color:var(--blue);background:#edf2f8}.opt.right{border-color:var(--ok);background:#e8f3ec}.opt.wrong{border-color:var(--acc);background:#f8ebe6}.btn{font:inherit;font-size:15px;padding:7px 16px;border-radius:3px;border:1px solid var(--ink);background:var(--ink);color:#fff;cursor:pointer}.btn:disabled{opacity:.35;cursor:not-allowed}.btn.ghost{background:transparent;color:var(--ink)}.ans{display:none;margin-top:10px;padding:10px 12px;background:#efe5cf;border-radius:3px;font-size:15px}.stamp{display:inline-block;margin-left:12px;color:var(--acc);border:2.5px double var(--acc);border-radius:50%;width:66px;height:66px;line-height:60px;text-align:center;font-weight:700;transform:rotate(-14deg);font-family:var(--serif);font-size:17px;vertical-align:middle;opacity:.85}.stage{position:relative;border-radius:3px;overflow:hidden;border:1px solid var(--line);background:#f6efe0;aspect-ratio:16/10}.pip{position:absolute;right:8px;bottom:30px;width:17%;min-width:84px;background:#fffcf4eb;border:1px solid var(--line);border-radius:3px;padding:3px;pointer-events:none}.pip span{display:block;font-size:11.5px;color:var(--mute);font-family:var(--serif);line-height:1.5}.pip.strip{position:static;display:flex;align-items:center;gap:12px;width:auto;margin:8px 0 0;padding:6px 8px}.pip.strip canvas{width:120px!important;flex:none}.pip.strip span{font-size:13px}.pip.strip small{font-size:11px}.pip canvas{width:100%!important;height:auto!important;display:block;cursor:default}.stage canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab}.stage canvas.drag{cursor:grabbing}.tool{position:absolute;right:8px;top:8px;display:flex;gap:6px}.tool button{font:inherit;font-size:13px;padding:4px 10px;border:1px solid var(--line);background:#fffcf4eb;border-radius:3px;cursor:pointer;color:var(--ink)}.cap{position:absolute;left:10px;bottom:8px;font-size:12.5px;color:var(--mute);font-family:var(--serif);pointer-events:none}.ctl{display:flex;flex-wrap:wrap;gap:6px 18px;margin:12px 0 8px;font-size:15px}.ctl label{display:flex;gap:8px;align-items:center;flex:1;min-width:230px}.ctl input{flex:1;accent-color:var(--acc)}.read{font-size:15.5px;background:#ffffff8c;border:1px solid var(--line);border-radius:3px;padding:8px 12px;min-height:4.2em}.read b{color:var(--acc)}.qpanel{position:absolute;right:8px;top:44px;z-index:5;background:#fffcf4f7;border:1px solid var(--line);border-radius:4px;box-shadow:0 4px 14px #0000002e;padding:8px;display:none;width:200px;font-size:13px}.qpanel.open{display:block}.qpanel .qh{color:var(--mute);margin-bottom:6px}.qpanel button{font:inherit;font-size:13px;padding:4px 0;width:22%;margin-right:3%;border:1px solid var(--line);background:#fff;border-radius:3px;cursor:pointer;color:var(--ink)}.qpanel button:last-of-type{margin-right:0}.qpanel button.on{background:var(--ink);color:#fff;border-color:var(--ink)}.qpanel .qn{margin-top:6px;color:var(--mute);font-size:12px;line-height:1.5}.vlabel{position:absolute;transform:translate(6px,-50%);pointer-events:none;font-size:13px;color:#7a5a2a;background:#fffaeed9;border:1px dashed #b08a50;border-radius:4px;padding:2px 6px;white-space:nowrap;display:none;z-index:2}.hint{font-size:13px;color:var(--mute)}a{color:var(--blue)}nav{position:fixed;left:0;right:0;bottom:0;background:#28221ceb;display:flex;justify-content:center;gap:8px;padding:9px;padding-bottom:calc(9px + env(safe-area-inset-bottom));z-index:10}nav a{width:36px;height:36px;border-radius:50%;border:1px solid #8c7f6c;color:#efe6d4;text-decoration:none;display:flex;align-items:center;justify-content:center;font-size:14px;font-family:var(--serif)}nav a.on{background:#efe6d4;color:#2e2a24}@media (max-width:900px){body{padding:0 0 70px;font-size:15px;background:#f8f2e4}header{display:none}.book{flex-direction:column;box-shadow:none}.page{padding:18px 15px 30px;border-radius:0!important}.left{background-image:none;border-bottom:1px solid var(--line)}.right{background-image:none}h1{font-size:24px}.stage{aspect-ratio:4/3.6}}.seg{display:inline-flex;border:1px solid var(--line);border-radius:3px;overflow:hidden;background:#fffcf4}.seg button{font:inherit;font-size:14px;padding:5px 12px;border:0;border-right:1px solid var(--line);background:transparent;cursor:pointer;color:var(--ink)}.seg button:last-child{border-right:0}.seg button.on{background:var(--ink);color:#fff}.ctl .grp{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.vlabel.real{border-style:solid;border-color:#a8432a;color:#a8432a}.fig{margin:14px 0 4px;border:1px solid var(--line);border-radius:3px;background:#ffffff80;padding:8px}.fig svg{display:block;width:100%;height:auto}.fig .fc{font-size:13px;color:var(--mute);font-family:var(--serif);text-align:center}.vlabel.lft{transform:translate(calc(-100% - 6px),-50%)}.vlabel.ctr{transform:translate(-50%)}@media (max-width:900px){.stage .pip{inset:8px auto auto 8px;width:30%;min-width:0}.stage .pip span{font-size:10.5px}}@media (min-width:901px){.stage .pip{width:21%}}.graphs{display:flex;gap:10px;margin:8px 0}.graphs figure{flex:1;margin:0;min-width:0;border:1px solid var(--line);border-radius:3px;background:#ffffff8c;padding:4px}.graphs canvas{display:block;width:100%;height:150px}.graphs figcaption{font-size:12.5px;color:var(--mute);text-align:center;font-family:var(--serif)}.steps{font-family:var(--serif);font-size:16.5px;background:#fffcf4;border:1px solid var(--line);border-radius:3px;padding:6px 12px;margin:8px 0}.stp{display:flex;gap:10px;align-items:baseline;opacity:.28;transition:opacity .25s}.stp.on{opacity:1}.stp i{font-style:normal;font-family:var(--f-sans);font-size:12px;color:#fff;background:var(--acc);border-radius:9px;padding:0 7px;white-space:nowrap}.stp span u{text-decoration:none;color:var(--blue);font-weight:600}.stp span b{color:var(--acc)}.wedu{margin:14px 0 4px;border-top:1px dashed var(--line);padding-top:8px;font-size:14px}.wedu p{margin:0 0 6px;color:var(--mute)}.wedu .wb{display:flex;gap:8px}.wedu button{font:inherit;font-size:14px;padding:5px 14px;border:1px solid var(--ink);background:transparent;border-radius:3px;cursor:pointer;color:var(--ink)}.wedu button.on{background:var(--ink);color:#fff}.wedu iframe{width:100%;aspect-ratio:16/10;border:1px solid var(--line);border-radius:3px;margin-top:8px;background:#fff}.wedu .wp a{font-size:13px}.wedu .wx{margin-top:8px;background:#ffffff8c;border:1px solid var(--line);border-radius:3px;padding:8px 12px}.btnrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.play{font:inherit;font-size:14px;padding:5px 14px;border:1px solid var(--acc);color:var(--acc);background:#fffcf4;border-radius:3px;cursor:pointer}@media (max-width:600px){.graphs canvas{height:120px}.steps{font-size:15px}}