:root{--bg:#f0faf6;--paper:#fffdf4;--panel:#ffffffe0;--panel-strong:#fff;--ink:#172331;--muted:#65738a;--line:#17233121;--line-strong:#17233138;--drawing-line:#1d2d3a;--future:#1d2d3a29;--done:#22a978;--current:#ff675d;--trace:#f05d5e;--sun:#ffd166;--sky:#76c9ff;--leaf:#3bcf9a;--blue:#4169b2;--shadow:0 22px 60px #1f4f6824;--radius:18px}*{box-sizing:border-box}html,body{min-height:100%;margin:0}body{min-height:100vh;color:var(--ink);background:var(--bg);font-family:"Baloo 2",PingFang SC,Microsoft YaHei,sans-serif}button,a{color:inherit;font:inherit}button{cursor:pointer;border:0;transition:transform .16s,box-shadow .16s,opacity .16s,background-color .16s}button:hover:not(:disabled){transform:translateY(-1px)}button:disabled{cursor:not-allowed;opacity:.45}a{text-decoration:none}.site-background{z-index:-1;background:radial-gradient(circle at 18% 12%,#ffd1666b,#0000 28%),radial-gradient(circle at 78% 4%,#76c9ff57,#0000 30%),radial-gradient(circle at 86% 76%,#3bcf9a47,#0000 26%),linear-gradient(90deg,#4169b217 1px,#0000 1px) 0 0/30px 30px,linear-gradient(#3bcf9a14 1px,#0000 1px) 0 0/30px 30px,linear-gradient(135deg,#f8fdff 0%,#eefaf6 48%,#fff7db 100%);position:fixed;inset:0}.app-shell{width:min(1220px,100% - 28px);margin:0 auto;padding:22px 0 34px}.topbar,.lesson-header,.section-head,.canvas-toolbar,.practice-bar,.step-panel-head,.pagination{justify-content:space-between;align-items:center;gap:16px;display:flex}.topbar{min-height:70px}.brand{align-items:center;gap:14px;display:flex}.brand-mark{background:var(--ink);color:#fff;border-radius:14px;place-items:center;width:48px;height:48px;font-weight:800;display:grid}.brand small,.eyebrow{color:var(--muted);letter-spacing:.02em;margin:0;font-size:.83rem;display:block}.brand strong,.hero-copy h1,.section-head h2,.canvas-toolbar h2{font-family:Noto Serif SC,serif}.brand strong{font-size:1.55rem;line-height:1.1;display:block}.topnav{border:1px solid var(--line);background:#ffffffc2;border-radius:999px;gap:10px;padding:7px;display:flex}.topnav a{border-radius:999px;padding:8px 14px}.topnav a:hover{background:#fff3bf}.view{animation:.42s both rise-in}.is-hidden{display:none!important}.hero-panel{grid-template-columns:minmax(0,1fr) minmax(360px,440px);align-items:stretch;gap:20px;margin-top:18px;display:grid}.hero-copy,.upload-card,.library-panel,.drawing-area,.step-panel{border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.hero-copy{min-height:310px;padding:clamp(28px,5vw,56px);position:relative;overflow:hidden}.hero-copy:after{content:"";opacity:.92;background:radial-gradient(circle at 35% 42%,#111 0 8px,#0000 9px),radial-gradient(circle at 64% 42%,#111 0 8px,#0000 9px),linear-gradient(#fff3a8 0 24%,#ffe43f 24% 100%);border-radius:44% 56% 48% 52%;width:170px;height:170px;position:absolute;bottom:24px;right:34px;transform:rotate(-4deg);box-shadow:inset 0 0 0 10px #1a1a1a}.hero-copy h1{z-index:1;max-width:620px;margin:10px 0 16px;font-size:clamp(2.2rem,6vw,4.8rem);line-height:1.02;position:relative}.hero-copy p:last-child{z-index:1;max-width:500px;color:var(--muted);margin:0;font-size:1.08rem;line-height:1.7;position:relative}.upload-card{padding:16px}.dropzone{background:linear-gradient(135deg, #76c9ff21, #ffd1662e), var(--paper);border:2px dashed #4169b240;border-radius:16px;gap:18px;min-height:240px;padding:24px;display:grid}.dropzone.is-dragging{border-color:var(--current);background:#fff6e6}.dropzone.is-processing{cursor:progress;background:#f8f4ee}.dropzone input{display:none}.dropzone h2{margin:6px 0 8px;font-size:1.6rem;line-height:1.15}.dropzone p{color:var(--muted);margin:0;line-height:1.55}.upload-status{min-height:54px;color:var(--muted);background:#f7fbff;border-radius:14px;justify-content:space-between;align-items:center;gap:12px;margin-top:12px;padding:12px 14px;display:flex}.upload-status.is-working{color:#6e5214;background:#fff7da}.upload-status.is-ready{color:#17684c;background:#ecfbf5}.upload-status.is-error{color:#9e2f2b;background:#fff0ef}.library-panel{margin-top:20px;padding:20px}.section-head{align-items:flex-end;margin-bottom:16px}.section-head h2{margin:4px 0 0;font-size:2rem}.filter-tabs{border:1px solid var(--line);background:#ffffffd1;border-radius:999px;flex-wrap:wrap;gap:8px;padding:6px;display:flex}.filter-tabs button{background:0 0;border-radius:999px;padding:8px 14px}.filter-tabs button.is-active{background:var(--ink);color:#fff}#clear-drafts-button{color:#9e2f2b}.lesson-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;display:grid}.lesson-card,.message-card,.empty-state{border:1px solid var(--line);background:var(--panel-strong);border-radius:16px}.lesson-card{overflow:hidden}.lesson-thumb{background:linear-gradient(90deg,#628da014 1px,#0000 1px) 0 0/24px 24px,linear-gradient(#628da014 1px,#0000 1px) 0 0/24px 24px,#fffdf8;place-items:center;height:210px;display:grid}.lesson-thumb img{object-fit:contain;width:100%;height:100%;padding:14px}.lesson-card-body{gap:8px;padding:14px;display:grid}.lesson-card-actions{flex-wrap:wrap;gap:8px;display:flex}.lesson-card-actions .primary-button,.lesson-card-actions .secondary-button{flex:1;min-width:96px}.lesson-card h3,.message-card h3,.empty-state h3{margin:0;font-size:1.2rem;line-height:1.2}.lesson-card p,.message-card p,.empty-state p{color:var(--muted);margin:0;line-height:1.45}.lesson-badge{border-radius:999px;width:fit-content;padding:4px 9px;font-size:.78rem;font-weight:700}.lesson-badge.is-official{color:#7a5512;background:#fff0b8}.lesson-badge.is-draft{color:#315d9b;background:#eaf3ff}.primary-button,.secondary-button,.next-button,.start-button{border-radius:12px;font-weight:800}.primary-button,.next-button,.start-button{background:var(--current);color:#fff;box-shadow:0 14px 28px #f05d5e33}.primary-button{min-height:42px;padding:0 16px}.secondary-button{border:1px solid var(--line);background:#ffffffc7;min-height:40px;padding:0 14px}.message-card,.empty-state{padding:24px}.empty-state{text-align:center}.pagination{justify-content:center;margin-top:18px}.lesson-header{margin-top:14px}.lesson-status{border:1px solid var(--line);background:#ffffffc2;border-radius:14px;align-items:center;gap:10px;padding:8px 10px;display:flex}.lesson-status span{color:var(--muted)}.lesson-status strong{background:var(--sun);border-radius:10px;padding:9px 11px}.studio{grid-template-columns:minmax(0,1fr) 330px;gap:18px;margin-top:18px;display:grid}.drawing-area{padding:16px}.canvas-toolbar h2{margin:0;font-size:1.6rem;line-height:1.25}.icon-actions,.practice-actions{align-items:center;gap:8px;display:flex}.icon-button,.tool-button{border:1px solid var(--line);background:#f7fbff;border-radius:12px;place-items:center;width:42px;height:42px;font-size:1.15rem;line-height:1;display:grid}.stage-frame{border:1px solid var(--line-strong);background:linear-gradient(90deg, #628da014 1px, transparent 1px), linear-gradient(#628da014 1px, transparent 1px), var(--paper);background-size:32px 32px,32px 32px,auto;border-radius:16px;height:min(64vh,640px);min-height:520px;margin-top:14px;position:relative;overflow:hidden}.paper-texture{pointer-events:none;background:linear-gradient(120deg,#ffd1661f,#0000 34%),linear-gradient(310deg,#6ec6ff24,#0000 28%);position:absolute;inset:0}.svg-layer,.trace-canvas{position:absolute;inset:0}.svg-layer svg,.preview-image,.trace-canvas{width:100%;height:100%}.preview-image{object-fit:contain;padding:12px;display:block}.start-panel{z-index:4;border:1px solid var(--line);background:#ffffffe6;border-radius:14px;gap:4px;min-width:156px;padding:12px 14px;display:grid;position:absolute;bottom:18px;left:18px}.start-panel span{color:var(--muted);font-size:.86rem}.start-button{z-index:4;min-width:118px;height:48px;position:absolute;bottom:18px;right:18px}.next-button{min-width:108px;height:42px;padding:0 18px}.next-button:disabled{box-shadow:none;background:#f4a7a2}.practice-bar{min-height:74px;padding-top:14px}.step-copy{min-width:0}.step-hint{color:var(--ink);margin:2px 0 0;line-height:1.45}.step-panel{max-height:calc(100vh - 150px);padding:14px;overflow:auto}.step-panel-head{z-index:2;background:#ffffffeb;padding-bottom:10px;position:sticky;top:0}.step-list{gap:8px;margin:0;padding:0;list-style:none;display:grid}.step-list li{border:1px solid var(--line);background:var(--panel-strong);border-radius:14px;grid-template-columns:34px minmax(0,1fr);align-items:center;gap:10px;min-height:68px;padding:10px;display:grid}.step-list li.is-active{background:#fff5f4;border-color:#ff6b5f6b}.step-list li.is-completed{background:#f0fbf7;border-color:#21a67a47}.step-number{color:#375d92;background:#edf3ff;border-radius:10px;place-items:center;width:34px;height:34px;font-weight:800;display:grid}.step-list li.is-active .step-number{background:var(--current);color:#fff}.step-list li.is-completed .step-number{background:var(--leaf);color:#fff}.step-list h3{margin:0;font-size:.98rem;line-height:1.25}.step-list p{color:var(--muted);margin:2px 0 0;font-size:.9rem;line-height:1.35}.preview-line{fill:none;stroke:var(--drawing-line);stroke-width:10px;stroke-linecap:round;stroke-linejoin:round}.preview-shadow{opacity:.08}.lesson-line{fill:none;stroke-linecap:round;stroke-linejoin:round;transition:opacity .18s,stroke .18s,stroke-width .18s}.lesson-line.is-future{stroke:var(--future);opacity:1}.lesson-line.is-completed{stroke:var(--done)}.lesson-line.is-current{stroke:var(--drawing-line)}.lesson-line.is-ready{stroke:var(--current)}.lesson-line.is-animating{stroke:var(--drawing-line);filter:drop-shadow(0 0 10px #1d2d3a29)}.trace-canvas{z-index:3;touch-action:none}@keyframes rise-in{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@media (width<=1040px){.hero-panel,.studio{grid-template-columns:1fr}.lesson-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.step-panel{max-height:none}}@media (width<=680px){.app-shell{width:min(100% - 18px,100%);padding-top:12px}.topbar,.lesson-header,.section-head,.canvas-toolbar,.practice-bar{flex-direction:column;align-items:stretch}.topnav,.filter-tabs,.lesson-status,.icon-actions,.practice-actions,.pagination{justify-content:space-between}.hero-panel{grid-template-columns:1fr}.hero-copy{min-height:360px}.hero-copy:after{width:130px;height:130px;bottom:20px;right:20px}.lesson-grid{grid-template-columns:1fr}.drawing-area,.library-panel{padding:12px}.stage-frame{height:min(68vh,640px);min-height:380px;margin-top:10px}}