@font-face{font-family:GuideIPA;src:url(DoulosSIL-cc89b87c04.ttf);font-display:swap}
:root{--paper:#fffaf0;--ink:#34203d;--muted:#7d6d86;--purple:#79569a;--lavender:#ede1f6;--yellow:#ffe46b;--line:#e5d8c8;--white:#fffefb}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:'PingFang SC','Microsoft YaHei',sans-serif;font-size:15px;line-height:1.75}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:var(--purple);text-underline-offset:4px}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #af88ce;outline-offset:4px}button:disabled{cursor:default;opacity:.4}.shell{max-width:1260px;margin:auto;padding:0 30px}.topbar{display:flex;align-items:center;gap:14px;padding:22px 0;border-bottom:1px dashed #d8c5ac}.brand{font-weight:800;color:var(--ink);text-decoration:none;font-size:20px}.topbar small{color:var(--muted)}.topbar .back{margin-left:auto;text-decoration:none;font-size:13px}.hero{display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center;padding:40px 0 34px}.eyebrow{font-size:11px;letter-spacing:.16em;font-weight:700;color:var(--purple)}h1{font-family:'STKaiti','KaiTi',Georgia,serif;font-size:clamp(38px,5vw,62px);letter-spacing:-.04em;line-height:1.16;margin:12px 0 18px;font-weight:900}h1 em{font-style:normal;background:linear-gradient(transparent 65%,var(--yellow) 65%,var(--yellow) 93%,transparent 93%)}.hero p{max-width:600px;margin:0;color:var(--muted);font-size:15px}.hero-art{width:180px;position:relative;text-align:center}.hero-art img{width:132px;filter:drop-shadow(0 8px 0 #e5d8ef)}.hero-art span{display:block;transform:rotate(-5deg);background:var(--yellow);border:1.5px solid var(--ink);border-radius:9px;padding:5px 10px;font-weight:700;font-size:12px}.platform-bar{position:sticky;top:0;z-index:10;background:#fffaf0f5;backdrop-filter:blur(10px);border-block:1px solid var(--line);padding:12px 0;display:flex;align-items:center;justify-content:space-between;gap:16px}.platforms{display:flex;gap:5px;border:1px solid #c8b4d6;background:#f3eafa;padding:4px;border-radius:14px}.platforms button{border:0;background:transparent;color:var(--purple);font-size:13px;font-weight:700;padding:7px 18px;border-radius:9px}.platforms button[aria-selected=true]{background:var(--ink);color:white;box-shadow:0 2px 0 #bca5ce}.platform-note{font-size:12px;color:var(--muted)}.workspace{display:grid;grid-template-columns:176px minmax(0,1fr);gap:28px;padding-top:26px;padding-bottom:40px}.chapters{position:sticky;top:88px;align-self:start}.chapters button{width:100%;display:flex;align-items:center;gap:10px;border:0;border-radius:10px;text-align:left;background:transparent;padding:10px 8px;color:var(--muted);font-size:13px;margin-bottom:4px}.chapters button .num{font-size:11px;font-family:Georgia,serif;border:1px solid #d7c4e6;border-radius:50%;width:25px;height:25px;display:grid;place-items:center;flex:none}.chapters button.active{background:var(--lavender);color:var(--ink);font-weight:700}.chapters button.active .num{background:var(--purple);border-color:var(--purple);color:#fff}.rail-note{font-size:11px;color:var(--muted);padding:13px 8px;border-top:1px dashed var(--line);margin-top:15px}.lesson{min-width:0}.chapter-heading{display:flex;align-items:flex-start;gap:15px;margin:0 0 18px}.chapter-mark{font:italic 44px/.9 Georgia,serif;color:#c6add8}.chapter-heading h2{margin:0;font-size:23px;line-height:1.5;letter-spacing:-.03em}.chapter-heading p{color:var(--muted);font-size:13px;margin:4px 0 0}.step-tabs{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}.step-tabs button{display:flex;align-items:center;gap:7px;text-align:left;min-height:38px;border:1px solid var(--line);background:#fffdf8;color:var(--muted);border-radius:9px;padding:5px 10px;font-size:12px}.step-tabs button span{font-size:11px;border-radius:50%;background:#eee5f5;width:20px;height:20px;display:grid;place-items:center;flex:none}.step-tabs button.active{border-color:var(--purple);background:var(--lavender);color:var(--ink);font-weight:700}.step-tabs button.active span{color:#fff;background:var(--purple)}.step-card{border:1px solid #d9c7e4;border-radius:20px;background:var(--white);box-shadow:0 6px 0 #e9dfcd;overflow:hidden}.card-top{padding:15px 20px;display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid #e8ddec;font-size:12px;color:var(--muted)}.card-top b{color:var(--purple)}.card-body{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(245px,.9fr)}.picture-panel{background:#f3eee5;padding:18px;display:flex;flex-direction:column;justify-content:center;min-width:0;border-right:1px solid var(--line)}.picture{position:relative;line-height:0;border-radius:12px;overflow:hidden;box-shadow:0 4px 18px #25142d18;background:#242424}.picture svg{display:block;width:100%;max-height:490px;outline:none}.picture .target{fill:#ffe46b16;stroke:#ffd34d;stroke-width:3;vector-effect:non-scaling-stroke}.picture .tag{fill:#ffe46b;stroke:#33203c;stroke-width:1.2;vector-effect:non-scaling-stroke}.picture .tag-text{fill:#34203d;font:700 20px 'Microsoft YaHei',sans-serif;text-anchor:middle;dominant-baseline:central}.picture .arrow{stroke:#ffd34d;stroke-width:3;vector-effect:non-scaling-stroke;fill:none}.picture button{position:absolute;right:9px;bottom:9px;border:1px solid #d0bedc;background:#fffdf4ed;color:var(--ink);border-radius:7px;padding:5px 8px;font-size:11px;line-height:1.6}.picture-caption{font-size:11px;line-height:1.6;color:#87778a;margin:10px 1px 0}.instructions{padding:23px 22px;min-width:0}.step-index{font-size:11px;letter-spacing:.1em;color:var(--purple);font-weight:800}.instructions h3{margin:6px 0 16px;font-size:20px;line-height:1.5}.action{margin:0 0 18px;font-size:14px}.keys{display:flex;flex-wrap:wrap;gap:7px;margin:15px 0 20px}kbd{font-family:inherit;font-size:12px;line-height:1.5;display:inline-block;border:1px solid #c7b7d0;border-bottom-width:3px;min-width:27px;text-align:center;border-radius:7px;background:#faf5ff;padding:5px 8px;color:#4c345d}.watch{border-left:3px solid #b3c8ad;background:#eef4e9;padding:12px 13px;font-size:13px;border-radius:0 10px 10px 0}.watch b{display:block;color:#53734e;font-size:11px;margin-bottom:4px;letter-spacing:.08em}.result{margin-top:18px;border:1px dashed #d1bbdf;border-radius:10px;padding:12px;background:#fbf6ff}.result small{display:block;font-size:10px;color:var(--purple)}.result strong{font-family:GuideIPA,'Times New Roman',serif;font-weight:400;font-size:30px;line-height:1.7;overflow-wrap:anywhere}.tip{font-size:11px;color:var(--muted);margin:13px 0 0}.lesson-controls{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 0 0}.lesson-controls button{border:1.5px solid #a78bbf;border-radius:10px;padding:8px 16px;font-size:13px;font-weight:700;background:#f7f0fc;color:var(--ink);min-height:41px}.lesson-controls #next{background:var(--yellow);border-color:#76613c;box-shadow:0 2px 0 #d0b765}.progress{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--muted)}.progress-track{height:4px;width:75px;background:#e4d7ee;border-radius:3px;overflow:hidden}.progress-track i{display:block;height:100%;background:var(--purple)}.reference{border-top:1px dashed #d8c5ac;padding:28px 0 46px}.reference>summary{cursor:pointer;font-weight:700;font-size:15px;color:var(--purple)}.text-article{margin:22px auto;max-width:850px;line-height:1.95}.text-article h2{font-size:23px;border-top:1px dashed var(--line);padding-top:24px;margin-top:35px}.text-article img{max-width:100%;height:auto}.text-article .table-wrap{overflow:auto}.text-article table{border-collapse:collapse;min-width:550px;font-size:13px}.text-article td,.text-article th{border:1px solid var(--line);padding:11px 14px;text-align:left}.text-article th{background:var(--lavender)}footer{border-top:1px solid var(--line);font-size:11px;color:var(--muted);padding:18px 0 28px}.zoom{padding:0;border:0;background:#21162bea;border-radius:14px;width:min(1200px,96vw);max-width:96vw;max-height:96dvh;color:#fff;overflow:auto}.zoom::backdrop{background:#201427cc;backdrop-filter:blur(4px)}.zoom-top{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:10px 15px;position:sticky;top:0;background:#21162bf5;z-index:2;font-size:13px}.zoom-top button{background:white;border:0;border-radius:7px;padding:5px 12px}.zoom svg{display:block;margin:auto;max-width:100%;max-height:82dvh}.zoom .target{fill:#ffe46b10;stroke:#ffd34d;stroke-width:3;vector-effect:non-scaling-stroke}.zoom .tag{fill:#ffe46b}.zoom .tag-text{fill:#34203d;font:700 20px sans-serif;text-anchor:middle;dominant-baseline:central}.zoom .arrow{stroke:#ffd34d;stroke-width:3;vector-effect:non-scaling-stroke;fill:none}[hidden]{display:none!important}
@media(max-width:1040px){.workspace{grid-template-columns:150px minmax(0,1fr);gap:18px}.card-body{grid-template-columns:minmax(0,1fr)}.picture-panel{border-right:0;border-bottom:1px solid var(--line)}.picture svg{max-height:500px}.instructions{padding:20px 23px}.hero-art{width:145px}.hero-art img{width:110px}.platform-note{max-width:220px;text-align:right}.picture{max-width:680px;width:100%;margin:auto}}
@media(max-width:700px){.shell{padding:0 17px}.topbar{padding:16px 0;gap:8px}.brand{font-size:17px}.topbar small{display:none}.hero{padding:27px 0 24px;gap:12px}.hero-art{width:92px}.hero-art img{width:82px}.hero-art span{font-size:9px;padding:4px 5px}h1{font-size:37px;margin-top:9px}.hero p{font-size:13px}.eyebrow{font-size:9px}.platform-bar{display:block;padding:9px 0}.platforms{width:100%;justify-content:space-between}.platforms button{padding:7px 9px;flex:1;font-size:12px}.platform-note{max-width:none;text-align:left;font-size:10px;margin:6px 2px 0}.workspace{display:block;padding-top:15px}.chapters{position:static;display:flex;overflow-x:auto;gap:6px;margin-bottom:22px;padding-bottom:4px}.chapters button{width:auto;min-width:max-content;font-size:11px;padding:7px}.chapters button .num{width:22px;height:22px}.rail-note{display:none}.chapter-mark{font-size:36px}.chapter-heading h2{font-size:21px}.chapter-heading p{font-size:12px}.step-tabs{gap:5px}.step-tabs button{font-size:10px;padding:5px 7px}.step-tabs button span{width:18px;height:18px}.picture-panel{padding:12px}.picture svg{max-height:440px}.card-top{padding:12px 14px;font-size:10px}.instructions{padding:18px}.instructions h3{font-size:19px}.action{font-size:13px}.keys{margin:12px 0 16px}.lesson-controls button{font-size:12px;padding:8px 12px}.progress-track{width:40px}.reference{padding-top:20px}.result strong{font-size:28px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}