:root{--bg: #f7efe2;--bg-warm: #fffaf3;--panel: #fffaf3;--ink: #2c2420;--muted: #6b5e55;--line: #e8d9c8;--accent: #1d4ed8;--accent-2: #eab308;--accent-deep: #193826;--focus: #193826;--ok: #0f766e;--danger: #dc2626;--guide: #f97316;--radius: 14px;font-family:Noto Sans TC,PingFang HK,Helvetica Neue,sans-serif}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background-color:var(--bg);background-image:radial-gradient(ellipse 80% 50% at 18% 12%,rgba(120,140,150,.07),transparent 55%),radial-gradient(ellipse 70% 45% at 82% 78%,rgba(90,110,120,.06),transparent 50%),radial-gradient(ellipse 50% 35% at 70% 22%,rgba(140,150,145,.05),transparent 60%),linear-gradient(180deg,var(--bg-warm),var(--bg));background-attachment:fixed;color:var(--ink);position:relative}body:before{content:"";pointer-events:none;position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;opacity:.045;background-image:linear-gradient(90deg,rgba(44,36,32,.55) 1px,transparent 1px),linear-gradient(rgba(44,36,32,.55) 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(ellipse 75% 70% at 50% 40%,#000 20%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse 75% 70% at 50% 40%,#000 20%,transparent 75%)}.app-shell,.panel,header.top{position:relative;z-index:1}button{font:inherit;border:none;border-radius:999px;padding:.65rem 1.1rem;cursor:pointer;background:var(--accent);color:#fff;font-weight:600}button:disabled{opacity:.45;cursor:not-allowed}button:hover:not(:disabled):not(.ghost):not(.secondary):not(.ok):not(.swatch){background:var(--accent-deep)}button:focus-visible{outline:2px solid var(--focus);outline-offset:2px}button.secondary{background:#efe4d4;color:var(--ink)}button.ghost{background:transparent;border:1px solid var(--line);color:var(--ink)}button.ok{background:var(--ok);color:#fff}.app-shell{max-width:960px;margin:0 auto;padding:1rem 1rem 2rem}header.top{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:1rem}header.top h1{margin:0;font-size:1.35rem;letter-spacing:.04em}header.top p{margin:.2rem 0 0;color:var(--muted);font-size:.9rem}.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:1rem;box-shadow:0 8px 24px #2c24200f}.mask-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin-bottom:.85rem}.mask-tabs button{border-radius:12px;background:#efe4d4;color:var(--ink);padding:.55rem .4rem;font-size:.85rem}.mask-tabs button.active{background:var(--accent-2);color:#2a1808}.paint-layout{display:grid;gap:1rem}@media(min-width:800px){.paint-layout{grid-template-columns:1fr 220px}}.canvas-wrap{position:relative;background:#efe6d8;border:1px solid var(--line);border-radius:12px;overflow:hidden;aspect-ratio:3 / 4;max-height:min(70vh,640px);margin:0 auto;width:min(100%,480px)}#maskCanvas{width:100%;height:100%;touch-action:none;cursor:crosshair;display:block}.tools{display:grid;gap:.75rem}.tools h2{margin:0;font-size:.95rem;color:var(--muted);font-weight:600}.swatches{display:flex;flex-wrap:wrap;gap:.45rem}.swatch{width:34px;height:34px;border-radius:50%;border:2px solid transparent;padding:0}.swatch.active{border-color:var(--ink);box-shadow:0 0 0 2px var(--accent)}.tool-row{display:flex;flex-wrap:wrap;gap:.45rem}.actions{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1rem}.hint{color:var(--muted);font-size:.88rem;line-height:1.45;margin:.75rem 0 0}.ar-stage{position:relative;background:#000;border-radius:12px;overflow:hidden;aspect-ratio:3 / 4;max-height:min(72vh,720px);margin:0 auto;width:min(100%,480px)}.ar-stage video,.ar-stage canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover}.ar-stage video{transform:scaleX(-1)}.ar-stage canvas{transform:scaleX(-1);pointer-events:none}.ar-overlay{position:absolute;left:0;right:0;bottom:0;padding:.85rem;background:linear-gradient(transparent,#000000bf);display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;justify-content:space-between}.ar-overlay .tip{margin:0;font-size:1.12rem;font-weight:700;line-height:1.35;flex:1 1 160px;color:#fff8f0;text-shadow:0 1px 3px rgba(0,0,0,.55)}.ar-overlay .manual-btn{padding:.95rem 1.45rem;font-size:1.12rem;font-weight:700;min-height:3rem}.ar-overlay .ar-actions{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}.status{margin:.75rem 0 0;padding:.65rem .8rem;border-radius:10px;background:#efe4d4;color:var(--ink);font-size:.9rem;display:none}.status.show{display:block}.status.error{background:#fde8e8;color:#9b1c1c}.steps{margin:0 0 .85rem;padding:.75rem .75rem .75rem 1.6rem;background:#efe4d4;border-radius:12px;color:var(--muted);font-size:.92rem;line-height:1.45}.steps li{margin:.25rem 0}.ar-actions{display:flex;gap:.45rem;flex-wrap:wrap}.progress{display:flex;gap:.55rem;justify-content:center;margin:0 0 .85rem}.progress .dot{width:12px;height:12px;border-radius:50%;background:#e8d9c8;border:2px solid #d4c4b0}.progress .dot.done{background:#eab308;border-color:#facc15}.progress .dot.on{background:#f97316;border-color:#fdba74;transform:scale(1.25)}.ar-flash{position:absolute;top:0;right:0;bottom:0;left:0;background:#ffffff8c;pointer-events:none;animation:arflash .28s ease-out forwards;z-index:5}@keyframes arflash{0%{opacity:1}to{opacity:0}}.home-steps{margin-bottom:1rem}.home-choices{display:grid;gap:.85rem}@media(min-width:720px){.home-choices{grid-template-columns:1fr 1fr}}.home-card{display:flex;flex-direction:column;align-items:flex-start;gap:.45rem;text-align:left;border-radius:var(--radius);padding:1.1rem 1.15rem;min-height:8.5rem;border:2px solid var(--line);background:#efe4d4;color:var(--ink);font-weight:600;line-height:1.35}.home-card:hover:not(:disabled){background:#e8d9c4;border-color:#d4c4b0}.home-card-main{background:linear-gradient(160deg,#fff6e8,#fde68a);border-color:#f97316}.home-card-main:hover:not(:disabled){background:linear-gradient(160deg,#ffefd4,#fcd34d)}.home-card-alt{background:#fffaf3}.home-card-badge{display:inline-block;font-size:.75rem;font-weight:700;letter-spacing:.06em;padding:.2rem .55rem;border-radius:999px;background:#f97316;color:#fff}.home-card-badge.alt{background:#efe4d4;color:var(--muted);border:1px solid var(--line)}.home-card-title{font-size:1.15rem;font-weight:700}.home-card-desc{font-size:.88rem;font-weight:400;color:var(--muted)}.upload-layout{display:grid;gap:1rem}@media(min-width:800px){.upload-layout{grid-template-columns:1fr 220px}}.upload-preview-wrap{position:relative;aspect-ratio:1 / 1;max-height:min(70vh,520px);width:min(100%,480px)}.upload-preview-wrap #preview{width:100%;height:100%;display:block;object-fit:contain}.cam-video{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;border-radius:0;background:#111;z-index:2}.upload-oval-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:3;pointer-events:none;display:none}.upload-preview-wrap.cam-active .upload-oval-overlay{display:block}.upload-oval-overlay ellipse.guide{fill:none;stroke:#f97316;stroke-width:1.15}.upload-oval-overlay ellipse.inner{fill:none;stroke:#ffffff59;stroke-width:.45;stroke-dasharray:1.6 1.6}.mask-tabs button.filled:not(.active){box-shadow:inset 0 -3px #16a34a}.home-steps code{font-size:.85em;background:#fffaf3;padding:.05em .35em;border-radius:4px;border:1px solid var(--line)}.paint-screen{max-width:none;height:100dvh;min-height:620px;padding:12px max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));display:flex;flex-direction:column;gap:10px}.paint-screen .paint-header{margin:0;flex-shrink:0}.paint-title{display:flex;align-items:center;gap:12px}.paint-screen .paint-title h1{font-size:20px;color:#a92b3d}.paint-title h1 span{font-size:12px;color:var(--muted);font-weight:400;margin-left:8px}.paint-screen .paint-header button{padding:8px 13px;min-height:40px;font-size:13px}.paint-screen .mask-tabs{margin:0;flex-shrink:0}.paint-screen .mask-tabs button{display:flex;flex-direction:column;align-items:center;gap:2px;height:83px;padding:4px;background:#fffdf8;border:2px solid var(--line);font-size:12px;font-weight:400}.paint-screen .mask-tabs button.active{border-color:#b93548;background:#fff7ee;color:#9b2539}.paint-screen .mask-tabs button:hover:not(:disabled){background:#fff7ee}.paint-screen .mask-tabs canvas{width:40px;height:52px}.paint-stage{flex:1;min-height:0;display:flex;justify-content:center}.paint-screen .canvas-wrap{height:100%;width:auto;max-width:100%;max-height:none;aspect-ratio:3 / 4;margin:0;padding:25px 10px 8px;background:#fffdf8;border-color:#eee4d6;box-shadow:0 8px 26px #38241912}.paint-guide{position:absolute;top:7px;left:0;right:0;margin:0;text-align:center;font-size:10px;color:#8b8278}.paint-screen .paint-tools{display:flex;flex-direction:column;align-items:center;gap:8px;flex-shrink:0}.paint-screen .swatches{flex-wrap:nowrap;justify-content:center;gap:8px}.paint-screen .swatch{width:34px;height:34px;border:2px solid #00000012}.paint-screen .swatch.active{border-color:#fff;box-shadow:0 0 0 2px #6e4c46}.paint-controls{display:flex;justify-content:center;gap:10px}.paint-screen .tool-row{flex-wrap:nowrap;gap:6px}.paint-controls button{display:flex;align-items:center;justify-content:center;min-width:42px;min-height:42px;padding:7px 12px;border-radius:10px;font-size:13px;background:#eac54b;color:#392a1c;border:1px solid #eac54b}.paint-controls button.ghost{background:#fffdf8;border-color:var(--line)}.paint-controls button:hover:not(:disabled){background:#f5e5b0}.brush-dot{display:block;border-radius:50%;background:currentColor}.paint-screen #startBtn{width:100%;flex-shrink:0;border-radius:12px;min-height:48px;letter-spacing:.2em;background:linear-gradient(110deg,#bf3549,#90263c);box-shadow:0 4px 14px #92263c22}@media(max-width:560px){.paint-screen{gap:8px;padding-top:8px}.paint-title{gap:6px}.paint-title h1 span{display:none}.paint-screen .paint-title h1{font-size:17px}.paint-screen .mask-tabs button{height:76px}.paint-screen .mask-tabs canvas{height:46px;width:35px}.paint-screen .swatches{gap:6px}.paint-screen .swatch{width:28px;height:28px}.paint-controls{gap:6px;flex-wrap:wrap}.paint-screen .tool-row{gap:4px}.paint-controls button{padding:7px 9px;min-width:38px}}.paint-screen .canvas-wrap{background:#fff}.mask-reference{width:min(860px,calc(100% - 24px));max-height:90dvh;padding:22px;border:1px solid var(--line);border-radius:16px;color:var(--ink);background:var(--bg-warm);line-height:1.7}.mask-reference::backdrop{background:#251c1bb3}.mask-reference header{display:flex;gap:12px;align-items:center;justify-content:space-between;position:sticky;top:-22px;padding:12px 0;background:var(--bg-warm);z-index:1}.mask-reference h2,.mask-reference h3{margin:0}.reference-kicker{margin:0;font-size:12px;color:var(--muted)}.mask-reference header button{white-space:nowrap}.mask-reference section{border-top:1px solid var(--line);margin-top:22px;padding-top:20px}.mask-reference a{color:#8e2539}.reference-photos{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:12px}.reference-photos figure{margin:0}.reference-photos img{width:100%;height:260px;object-fit:contain;background:#eee6da;border-radius:8px}.reference-photos figcaption,.mask-reference footer{font-size:12px;color:var(--muted)}.reference-scenes{display:flex;flex-wrap:wrap;gap:8px}.reference-scenes [aria-pressed=true]{background:#f4df9d;border-color:#c3a145}#sceneDetail{padding:4px 16px;margin-top:12px;background:#f5edde;border-radius:10px}#sceneDetail dl{display:grid;grid-template-columns:70px 1fr;gap:8px}#sceneDetail dt{font-weight:600}#sceneDetail dd{margin:0}.mask-reference footer{border-top:1px solid var(--line);margin-top:22px;padding-top:12px}@media(max-width:560px){.mask-reference{padding:14px}.mask-reference header{top:-14px}.mask-reference h2{font-size:20px}.reference-photos img{height:190px}.paint-screen #demoBtn{font-size:12px;padding:8px}}.paint-header-actions{display:flex;gap:8px}.paint-stage{position:relative;container-type:size}.paint-screen .paint-stage .canvas-wrap{width:min(75cqh,calc(100cqw - 320px));min-width:180px;height:100%}.reference-board{position:absolute;left:calc(50% + min(37.5cqh,(100cqw - 320px) / 2) + 16px);right:0;top:0;bottom:0;max-width:240px;overflow-y:auto;padding:0 10px;background:transparent}.reference-board header{display:flex;align-items:center;justify-content:space-between;font-size:13px}.reference-board header button{padding:2px 10px;font-size:22px}.reference-board figure{margin:10px 0 16px}.reference-board img{display:block;width:100%;height:145px;object-fit:contain}.reference-board figcaption{font-size:12px;line-height:1.5}.reference-board figcaption strong{display:block;margin:5px 0}.reference-board p{margin:2px 0}.reference-board a{color:var(--muted);font-size:10px}@media(max-width:700px){.paint-header-actions{gap:3px}.paint-screen .paint-header-actions button{font-size:10px;padding:7px}.paint-screen .paint-stage .canvas-wrap{width:calc(100cqw - 150px);height:auto;max-height:100%;min-width:0;align-self:center;margin-right:140px}.reference-board{left:auto;right:0;width:130px;padding:0 4px}.reference-board img{height:110px}.reference-board figcaption{font-size:10px}.paint-screen .paint-guide{font-size:8px}}.reference-subtitle{font-size:11px;color:var(--muted)}.reference-steps{display:flex;gap:4px;margin-top:10px}.reference-steps button{flex:1;padding:7px 2px;font-size:11px;background:#fff;color:var(--ink);border:1px solid var(--line)}.reference-steps button[aria-pressed=true]{background:#f5e5b0;border-color:#b68d35}.reference-step-image{position:relative;aspect-ratio:512 / 500;overflow:hidden;background:#fff;border-radius:12px}.reference-board .reference-step-image img{position:absolute;left:-50%;width:200%;max-width:none;height:auto}.reference-board .reference-meaning{margin-top:8px;color:#8e2539}:root{--bg: #faf7f1;--bg-warm: #fffdf8;--ink: #342c28;--muted: #887d71;--line: #e5ddd1;--accent: #ad3542;--accent-deep: #922b37;--focus: #936e35}html,body{background:radial-gradient(ellipse at 15% 10%,#fffdf8,transparent 65%),#faf7f1}body:before{display:none}.studio-header{display:flex;align-items:center;justify-content:space-between;padding:26px 0;border-bottom:1px solid var(--line)}.studio-brand{display:flex;align-items:center;gap:12px;font:700 22px Songti TC,"Noto Serif TC",serif;letter-spacing:.12em}.studio-seal{display:grid;place-items:center;width:42px;height:46px;color:#fff7e6;background:#ad3542;border-radius:5px 7px 4px 6px;font-size:28px;font-weight:400;transform:rotate(-4deg)}.studio-brand small{display:block;font:8px/1.8 -apple-system,sans-serif;letter-spacing:.23em;color:var(--muted)}.studio-note{font:13px Songti TC,serif;color:var(--muted);letter-spacing:.15em}.studio-progress{display:flex;justify-content:center;gap:32px;padding:14px 0;flex-shrink:0}.studio-progress span{display:flex;align-items:center;gap:9px;color:#a69c90;font-size:12px}.studio-progress b{display:grid;place-items:center;width:25px;height:25px;border:1px solid var(--line);border-radius:50%;font-size:11px}.studio-progress .on{color:var(--accent)}.studio-progress .on b{background:var(--accent);color:#fff;border-color:var(--accent)}.studio-home{max-width:1180px;padding:0 44px 30px}.studio-home .studio-progress{padding-top:35px}.studio-intro{text-align:center;margin:18px 0 30px}.studio-intro p{font-size:11px;color:#a17b46;letter-spacing:.22em}.studio-intro h1{font:600 clamp(26px,3vw,38px) "Songti TC",serif;margin:18px 0;letter-spacing:.06em}.studio-intro div,.studio-footnote{font-size:13px;color:var(--muted)}.studio-home .home-choices{max-width:740px;margin:auto;gap:20px}.studio-home .home-card{display:flex;flex-direction:column;align-items:stretch;background:#f3eee6;border:1px solid var(--line);border-radius:18px;padding:24px 28px;color:var(--ink);box-shadow:none}.studio-home .home-card:hover{border-color:var(--accent);background:#fffaf3!important;box-shadow:0 12px 35px #724b3610}.studio-home .home-card-title{display:flex;justify-content:space-between;font:23px Songti TC,serif;margin:9px 0}.studio-home .home-card-title span{color:var(--accent)}.studio-home .home-card-badge{align-self:flex-start;font-size:10px;background:transparent;padding:0;color:#a17b46}.studio-home .home-card-desc{font-size:12px;color:var(--muted);font-weight:400;line-height:1.8}.home-art{display:block;align-self:center;width:150px;height:170px;margin:0 0 20px;position:relative}.illustrated-mask{overflow:hidden;border-radius:50%;mix-blend-mode:multiply}.illustrated-mask img{position:absolute;width:400px;max-width:none;left:-125px;top:-390px}.paper-mask{width:125px;height:160px;background:#fffdf8;border:1px solid #d8cbbd;border-radius:48% 48% 46% 46%;transform:rotate(-8deg);box-shadow:8px 10px #9635440c}.paper-mask:before,.paper-mask:after{content:"";position:absolute;top:64px;width:26px;height:13px;border:1px dashed #c7b4a0;border-radius:50%}.paper-mask:before{left:20px}.paper-mask:after{right:20px}.paper-mask i{position:absolute;bottom:28px;left:46px;width:30px;height:15px;border:1px dashed #c7b4a0;border-radius:50%}.studio-footnote{text-align:center;margin-top:26px;letter-spacing:.15em}.paint-screen{max-width:1180px;padding:12px 32px 18px;gap:8px}.paint-screen .paint-header{padding-bottom:12px;border-bottom:1px solid var(--line)}.paint-screen .studio-brand{font-size:19px}.paint-screen .studio-seal{width:32px;height:35px;font-size:23px}.paint-screen .studio-progress{padding:3px 0}.paint-screen .mask-tabs{max-width:500px;width:100%;align-self:center;gap:12px}.paint-screen .mask-tabs button{height:66px;flex-direction:row;justify-content:center;border-width:1px;border-radius:12px}.paint-screen .mask-tabs canvas{width:30px;height:40px}.paint-screen .mask-tabs button.active{background:#fffaf3;border-color:var(--accent)}.paint-screen .canvas-wrap{border-radius:18px;box-shadow:0 10px 32px #724b3610}.paint-screen .paint-controls button{background:var(--accent);border-color:var(--accent);color:#fff;border-radius:10px}.paint-screen .paint-controls button.ghost{background:transparent;border-color:var(--line);color:var(--ink)}.paint-screen .paint-controls button:hover:not(:disabled){background:#922b37;color:#fff}.paint-screen #startBtn{width:auto;min-width:240px;align-self:center;background:var(--accent);letter-spacing:0;font-size:13px}.reference-board{border-left:1px solid var(--line);padding-left:18px}.reference-board header{font-family:Songti TC,serif;font-size:16px}.reference-board .reference-steps button:hover:not(:disabled),.reference-board .reference-steps button[aria-pressed=true]{background:#ad3542;color:#fff;border-color:#ad3542}@media(max-width:700px){.studio-home{padding:0 20px 24px}.studio-note{display:none}.studio-home .home-card{padding:18px 14px}.studio-home .home-card-title{font-size:19px}.home-art{transform:scale(.85);margin-bottom:0}.paint-screen{padding:10px}.paint-screen .studio-brand{font-size:15px;gap:6px}.paint-screen .studio-brand small,.paint-screen .studio-seal{display:none}.studio-progress{gap:16px}.studio-progress span{font-size:10px}.reference-board{padding-left:8px}.paint-screen .mask-tabs{max-width:100%}}@media(min-width:560px){.studio-home .home-choices{grid-template-columns:1fr 1fr}}@media(max-width:700px){.paint-screen .paint-stage .canvas-wrap{width:min(75cqh,calc(100cqw - 150px));height:min(100cqh,calc((100cqw - 150px) * 4 / 3))}.reference-steps button{font-size:10px;white-space:nowrap}}.paint-screen .paint-stage{display:grid;grid-template-columns:minmax(0,1.55fr) clamp(180px,28%,260px);gap:12px;align-items:center}.paint-screen .paint-stage .canvas-wrap{grid-column:1;justify-self:center;align-self:center;width:min(100%,96cqh);height:auto;aspect-ratio:.88;min-width:0;max-height:100%;margin:0;padding:0}.paint-screen #maskCanvas{width:100%;height:100%}.paint-screen .paint-guide{top:6px;font-size:9px}.paint-screen .reference-board{position:relative;grid-column:2;left:auto;right:auto;top:auto;bottom:auto;width:100%;max-width:none;height:100%;padding:0 10px 16px 16px}.reference-board .reference-step-image{max-width:230px;margin:auto}.reference-board figcaption{font-size:12px;line-height:1.6}.reference-board .reference-subtitle{font-size:11px;line-height:1.5}.reference-learning{font-size:18px;line-height:1.45;margin:8px 0;font-weight:600}.meaning-colours{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:8px}.meaning-colours button{background:#fffaf3;color:var(--ink);padding:6px;border:1px solid var(--line);border-radius:8px;font-size:12px}.meaning-colours button:before{content:"";display:inline-block;width:12px;height:12px;background:var(--chip);border:1px solid #aaa;border-radius:50%;margin-right:5px}.reference-board .learning-note{color:var(--ink);font-size:18px;margin-top:4px;font-weight:600}.forehead-examples{display:flex;gap:6px;text-align:center}.forehead-examples>div{flex:1;background:#fffaf3;padding:5px;border-radius:8px}.forehead-examples span{display:block;font-size:30px;color:#ad3542}.forehead-examples b,.forehead-examples p{font-size:18px;font-weight:600}@media(max-width:480px){.paint-screen .paint-stage{grid-template-columns:minmax(0,1fr) 150px;gap:6px}.paint-screen .reference-board{padding-left:8px}.meaning-colours{grid-template-columns:repeat(4,1fr);gap:3px}.meaning-colours button{padding:5px 2px}}.paint-screen .mask-tabs canvas{width:35px;height:40px}.paint-screen .paint-stage .canvas-wrap{width:min(100%,100cqh);aspect-ratio:1 / 1}.paint-screen #maskCanvas{width:100%;height:auto;aspect-ratio:1 / 1}.paint-screen .mask-tabs canvas{width:41px;height:40px}.role-learning p{margin:10px 0}.home-choices-3{display:grid;gap:.85rem}@media(min-width:720px){.home-choices-3{grid-template-columns:1fr}}.home-card-lesson{border:2px solid #193826;background:linear-gradient(180deg,#fffaf3,#f0e6d6)}.lesson-shell{max-width:720px}.lesson-progress{display:flex;flex-wrap:wrap;gap:.35rem;margin:.75rem 0 .5rem}.lesson-progress span{font-size:.78rem;font-weight:700;color:var(--muted);background:#efe4d4;padding:.35rem .65rem;border-radius:999px}.lesson-progress span.on{color:#fff;background:var(--accent-deep)}.lesson-words-row{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .85rem;margin-bottom:.75rem}.lesson-words{display:flex;gap:.4rem}.lesson-words span{font-size:.85rem;font-weight:800;color:var(--accent-deep);border:1px solid var(--line);background:#fff;padding:.25rem .55rem;border-radius:8px}.lesson-pledge{margin:0;flex:1 1 12rem;font-size:.78rem;font-weight:700;color:var(--accent-deep);line-height:1.35}.lesson-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:1rem 1.1rem 1.25rem;box-shadow:0 8px 24px #2c24200f}.lesson-card h1{font-size:1.35rem;margin:.2rem 0 .6rem}.lesson-card .eyebrow{margin:0;font-size:.75rem;font-weight:800;letter-spacing:.04em;color:var(--muted);text-transform:none}.lesson-card label{display:grid;gap:.35rem;margin:.75rem 0;font-weight:700;color:var(--ink)}.lesson-card textarea,.lesson-card input[type=text]{font:inherit;width:100%;border:1px solid var(--line);border-radius:10px;padding:.65rem .75rem;background:#fff;color:var(--ink)}.lesson-actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}.lesson-rule{background:#f3eee4;border-left:4px solid var(--accent-deep);padding:.75rem .9rem;border-radius:0 10px 10px 0}.lesson-compare{display:grid;gap:.6rem;margin:.85rem 0}@media(min-width:640px){.lesson-compare{grid-template-columns:repeat(3,1fr)}}.lesson-compare article{background:#fff;border:1px solid var(--line);border-radius:10px;padding:.7rem .75rem}.lesson-compare h3{margin:0 0 .35rem;font-size:.95rem}.lesson-compare p{margin:0;font-size:.88rem;line-height:1.45;color:var(--muted)}.lesson-figure{margin:.5rem 0 .75rem;background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;text-align:center}.lesson-figure .lesson-figure-zoom{position:relative;display:block;width:100%;padding:.35rem 0;border:none;border-radius:0;background:#fff;cursor:zoom-in}.lesson-figure img{display:block;width:100%;height:clamp(240px,44vh,460px);object-fit:contain;object-position:center}.lesson-figure-hint{position:absolute;right:.5rem;bottom:.5rem;font-size:.75rem;font-weight:700;color:#fff;background:#2c2420b8;padding:.2rem .55rem;border-radius:999px}.lesson-zoom-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:45;background:#14100ed1;display:grid;place-items:center;padding:.75rem;cursor:zoom-out}.lesson-zoom-overlay img{max-width:96vw;max-height:calc(100dvh - 4.5rem);width:auto;height:auto;object-fit:contain;background:#fff;border-radius:10px}.lesson-zoom-close{position:fixed;top:.75rem;right:.75rem}.lesson-figure figcaption{background:#fffaf3;color:var(--muted);font-size:.75rem;padding:.4rem}.lesson-saw{background:#efe4d4;padding:.65rem .75rem;border-radius:10px;font-size:.92rem}.lesson-ol{margin:.5rem 0 0;padding-left:1.2rem;line-height:1.55}.learning-note{font-size:.82rem;color:var(--muted);line-height:1.45}.lesson-header-actions{display:flex;flex-wrap:wrap;gap:.4rem}.lesson-api-banner{margin:0 0 .65rem;padding:.45rem .7rem;font-size:.78rem;font-weight:700;color:#14532d;background:#dcfce7;border:1px solid #86efac;border-radius:8px}.lesson-api-banner a{color:#14532d}.lesson-mock-banner{margin:0 0 .65rem;padding:.45rem .7rem;font-size:.78rem;font-weight:700;color:#92400e;background:#fef3c7;border:1px solid #f59e0b;border-radius:8px}.lesson-identity{display:grid;grid-template-columns:1fr 1fr;gap:.65rem;margin:.75rem 0 1rem}.lesson-identity label{margin:0}.lesson-card select{font:inherit;width:100%;border:1px solid var(--line);border-radius:10px;padding:.55rem .65rem;background:#fff;color:var(--ink)}.lesson-tabs{display:flex;gap:.35rem;margin:.5rem 0 .85rem}.lesson-tab{flex:1;background:#efe4d4;color:var(--ink);border-radius:10px;padding:.55rem .4rem;font-size:.9rem}.lesson-tab.on{background:var(--accent-deep);color:#fff}.lesson-micro{margin-top:.55rem!important;font-size:.82rem!important;font-weight:600!important}.lesson-fieldset{border:1px solid var(--line);border-radius:10px;padding:.65rem .85rem .85rem;margin:.75rem 0}.lesson-fieldset legend{font-weight:800;padding:0 .35rem}.lesson-radio{display:flex;align-items:flex-start;gap:.5rem;margin:.45rem 0;font-weight:600;cursor:pointer}.lesson-radio input{margin-top:.25rem}.lesson-ok-note{width:100%;margin:0;font-size:.85rem;font-weight:700;color:var(--ok)}.lesson-hotspot-loading{padding:1rem;color:var(--muted)}.lesson-hotspot-label{font-size:1.1rem;font-weight:800;color:var(--accent-deep);margin:0 0 .75rem}.lesson-hotspot-card{background:#fff;border:2px solid var(--accent-deep);border-radius:12px;padding:.85rem 1rem;margin-bottom:1rem}.lesson-art-preview{display:block;max-width:100%;max-height:200px;margin:.5rem 0;border-radius:10px;border:1px solid var(--line);object-fit:contain;background:#1a1a1a}.lesson-toast{position:fixed;left:50%;bottom:1.25rem;transform:translate(-50%);z-index:50;max-width:min(92vw,420px);padding:.7rem 1rem;border-radius:999px;font-size:.88rem;font-weight:700;box-shadow:0 8px 24px #0000002e;background:var(--ink);color:#fff}.lesson-toast[hidden]{display:none!important}.lesson-toast-ok{background:var(--ok)}.lesson-toast-error{background:var(--danger)}.lesson-toast-info{background:var(--accent)}.lesson-dialog-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:40;background:#2c242073;display:grid;place-items:center;padding:1rem}.lesson-dialog{background:var(--panel);border-radius:var(--radius);padding:1.1rem 1.2rem;max-width:420px;width:100%;border:1px solid var(--line);box-shadow:0 16px 40px #0003}.lesson-dialog h2{margin:0 0 .5rem;font-size:1.15rem}.lesson-check{display:flex;align-items:flex-start;gap:.5rem;margin:.85rem 0;font-weight:600;font-size:.9rem}.teacher-stats{background:#f3eee4;border-radius:10px;padding:.75rem .9rem;margin:.75rem 0;font-size:.9rem}.teacher-stats p{margin:.25rem 0}.teacher-h2{font-size:1rem;margin:1.1rem 0 .4rem}.teacher-samples{margin:0;padding-left:1.1rem;font-size:.85rem;color:var(--muted);line-height:1.45}.teacher-samples li{margin:.4rem 0}button.linkish{background:none;border:none;color:var(--accent);padding:0;font-weight:700;text-decoration:underline;cursor:pointer;font-size:inherit}.lesson-three-cols{display:grid;gap:.85rem;margin:.85rem 0 .5rem}@media(min-width:720px){.lesson-three-cols{grid-template-columns:repeat(3,1fr)}}.lesson-three-cols textarea{min-height:9.5rem;resize:vertical;line-height:1.5}.lesson-three-cols label{background:#fff;border:1px solid var(--line);border-radius:12px;padding:.65rem .75rem .75rem}.lesson-col-hint{display:block;font-size:.78rem;font-weight:600;color:var(--muted);margin:.15rem 0 .4rem}.lesson-label-text{display:block}.lesson-label-text strong{display:inline}.paint-screen .reference-board{display:flex;flex-direction:column;gap:7px;padding:0 6px 4px 16px;overscroll-behavior:contain}.reference-board>header{flex:none;display:grid;grid-template-columns:minmax(0,1fr) 34px;grid-template-areas:"head close" "nav nav";gap:7px 6px;align-items:start}.reference-board .reference-head{grid-area:head;min-width:0}.reference-head strong{display:block;font-size:17px;line-height:1.3}.reference-board .reference-subtitle{margin:2px 0 0;font:11.5px/1.4 Noto Sans TC,PingFang HK,sans-serif;color:var(--muted)}.reference-board header .reference-close{grid-area:close;display:grid;place-items:center;width:34px;height:34px;padding:0;font-size:22px;line-height:1;border-radius:50%}.reference-board .reference-steps{grid-area:nav;margin:0;gap:6px}.reference-board .reference-steps button{min-height:38px;padding:6px 2px;font:700 15px/1.2 Noto Sans TC,PingFang HK,sans-serif;white-space:nowrap}.reference-main{flex:none;display:grid;grid-template-columns:132px 64px;justify-content:center;column-gap:14px;row-gap:9px;align-items:end}.reference-board .reference-main .reference-step-image{grid-column:1;grid-row:1;width:100%;max-width:none;margin:0;border:1px solid var(--line);border-radius:12px}.reference-board .reference-main .reference-step-image img{display:block}.ss-say{display:contents}.ss-mascot{position:relative;grid-column:2;grid-row:1;width:64px;height:64px;-webkit-user-select:none;user-select:none;pointer-events:none}.reference-board .ss-mascot img{position:static;display:block;width:64px;height:64px;max-width:none;object-fit:contain}.ss-mascot.ss-idea:after{content:"💡";position:absolute;top:-8px;right:-6px;font-size:18px;line-height:1;filter:drop-shadow(0 0 2px #fff6c8)}.ss-bubble{position:relative;grid-column:1 / -1;grid-row:2;min-width:0;padding:7px 12px 8px;border:1.5px solid #ecd9b0;border-radius:16px;background:#fffaf0;color:var(--ink)}.ss-bubble:before,.ss-bubble:after{content:"";position:absolute;border:8px solid transparent}.ss-bubble:before{top:-16px;right:24px;border-bottom-color:#ecd9b0}.ss-bubble:after{top:-13px;right:24px;border-bottom-color:#fffaf0}.reference-board .ss-bubble .ss-title{display:block;margin:0 0 2px;color:#ad3542;font-size:19px;line-height:1.35}.reference-board .ss-bubble p{margin:0;font-size:18px;line-height:1.45;font-weight:600}.reference-board .ss-bubble .ss-ask{margin-top:3px;color:#8e2539}.reference-board .reference-learning{flex:none;margin:0;font-size:18px;line-height:1.45;font-weight:600;color:var(--ink)}.reference-board .reference-learning p{margin:2px 0;font-size:18px;line-height:1.45;font-weight:600;color:var(--ink)}.reference-board .reference-learning .colour-meaning{font-size:18px;line-height:1.45;font-weight:700;color:#8e2539}.reference-board .reference-learning .learning-note{margin-top:4px;font-size:18px;line-height:1.45;font-weight:600;color:var(--ink)}.reference-board .meaning-colours{margin-bottom:4px}.reference-board .meaning-colours button{padding:6px 4px;font-size:14px}.reference-board .role-learning p{margin:2px 0}.reference-board .forehead-examples>div{padding:6px 4px}.reference-board .forehead-examples span{font-size:26px;line-height:1.2}.reference-board .forehead-examples b,.reference-board .forehead-examples p{font-size:18px;margin:0;line-height:1.35;font-weight:600;color:var(--ink)}.reference-board .reference-sources{flex:none;margin:0;font-size:14px;line-height:1.4;color:var(--muted);font-weight:500}.reference-board .reference-sources a,.reference-board .reference-learning a{font-size:14px}.reference-more{position:sticky;bottom:0;flex:none;align-self:center;margin-top:auto;padding:6px 14px;min-height:34px;font-size:14px;font-weight:700;color:#fff;background:#ad3542;border-radius:999px;box-shadow:0 4px 14px #92263c40;animation:reference-more-bob 1.4s ease-in-out infinite}.reference-more[hidden]{display:none}@keyframes reference-more-bob{50%{transform:translateY(3px)}}@media(orientation:landscape)and (min-width:900px){.paint-screen .paint-stage.with-reference{grid-template-columns:minmax(0,1fr) minmax(220px,300px);justify-content:center;gap:10px}.paint-screen .paint-stage.with-reference .canvas-wrap{width:min(100cqh,calc(100cqw - 280px))}.reference-board>header{grid-template-columns:minmax(118px,150px) minmax(0,1fr) 34px;grid-template-areas:"head nav close";gap:10px;align-items:center}.reference-board .reference-subtitle{font-size:11.5px;line-height:1.35}.reference-main{grid-template-columns:124px 64px minmax(0,1fr);justify-content:stretch;column-gap:8px;align-items:start}.ss-bubble{grid-column:3;grid-row:1}.ss-bubble:before{top:22px;right:auto;left:-16px;border-bottom-color:transparent;border-right-color:#ecd9b0}.ss-bubble:after{top:22px;right:auto;left:-13px;border-bottom-color:transparent;border-right-color:#fffaf0}.ss-mascot{align-self:start;margin-top:6px}.reference-board .meaning-colours{grid-template-columns:repeat(8,1fr);gap:4px}.reference-board .meaning-colours button{padding:5px 2px}.reference-board .meaning-colours button:before{margin-right:3px;width:10px;height:10px}}@media(max-width:600px){.paint-screen .reference-board{padding-left:8px;padding-right:2px}.reference-main{grid-template-columns:minmax(0,1fr) 44px;column-gap:6px}.ss-mascot,.reference-board .ss-mascot img{width:44px;height:44px}.reference-board .ss-bubble{padding:5px 8px 6px}.reference-board .ss-bubble:before,.reference-board .ss-bubble:after{right:12px}.reference-board .ss-bubble .ss-title{font-size:15px}.reference-board .ss-bubble p{font-size:14px}.reference-board .reference-steps{gap:3px}.reference-board .reference-steps button{min-height:32px;font-size:12px;padding:4px 0}.reference-more{padding:5px 10px;font-size:12px;white-space:nowrap}}.lesson-recorder{margin:1rem 0 .5rem;padding:.85rem .9rem 1rem;border:1px solid var(--line);border-radius:14px;background:#fffaf3}.recorder-title{margin:0 0 .35rem;font-size:1.05rem;color:var(--accent-deep)}.recorder-hint{margin:0 0 .65rem;font-size:.9rem;line-height:1.5;color:var(--muted)}.recorder-stage{position:relative;width:100%;max-width:520px;margin:0 auto .65rem;aspect-ratio:4 / 3;background:#1a1512;border-radius:12px;overflow:hidden}.recorder-stage video{width:100%;height:100%;object-fit:cover;background:#1a1512}.recorder-status{min-height:1.3em;margin:0 0 .55rem;font-size:.9rem;font-weight:600;color:#8e2539}.recorder-actions{display:flex;flex-wrap:wrap;gap:.5rem}.recorder-actions button{min-height:44px}@media(orientation:landscape)and (min-width:900px){.paint-screen{padding-top:8px;padding-bottom:max(8px,env(safe-area-inset-bottom));gap:6px}.paint-screen .paint-header{padding-bottom:6px}.paint-screen .paint-header button{min-height:36px;padding:6px 12px}.paint-screen .studio-progress{position:absolute;top:14px;left:50%;transform:translate(-50%);padding:0;gap:18px;z-index:2;pointer-events:none}.paint-screen .mask-tabs{max-width:440px;gap:8px}.paint-screen .mask-tabs button{height:44px;padding:2px 4px}.paint-screen .mask-tabs canvas{width:28px;height:34px}.paint-screen .paint-tools{flex-direction:row;justify-content:center;gap:14px}.paint-screen .swatches{gap:6px}.paint-screen .swatch{width:32px;height:32px}.paint-screen .paint-controls{gap:8px}.paint-screen .paint-controls button{min-height:40px;min-width:40px;padding:6px 10px}.paint-screen #startBtn{min-height:42px}.paint-screen .paint-stage,.paint-screen .paint-stage.with-reference{grid-template-columns:auto minmax(240px,360px);justify-content:center;gap:14px}.paint-screen .paint-stage .canvas-wrap,.paint-screen .paint-stage.with-reference .canvas-wrap{width:min(100cqh,calc(100cqw - 254px))}.reference-board>header{grid-template-columns:minmax(0,1fr) 34px;grid-template-areas:"head close" "nav nav";gap:6px}.reference-main{grid-template-columns:104px 56px minmax(0,1fr);justify-content:stretch;column-gap:10px;row-gap:8px;align-items:end}.ss-mascot,.reference-board .ss-mascot img{width:56px;height:56px}.ss-mascot{margin-top:0;align-self:end}.ss-bubble{grid-column:1 / -1;grid-row:2}.ss-bubble:before{top:-16px;left:124px;right:auto;border-right-color:transparent;border-bottom-color:#ecd9b0}.ss-bubble:after{top:-13px;left:124px;right:auto;border-right-color:transparent;border-bottom-color:#fffaf0}.reference-board .meaning-colours{grid-template-columns:repeat(8,1fr);gap:3px}.reference-board .meaning-colours button{padding:5px 0;font-size:14px}.reference-board .meaning-colours button:before{width:9px;height:9px;margin-right:2px}}@media(orientation:landscape)and (min-width:900px)and (max-height:740px){.paint-screen .studio-progress{display:none}.paint-screen .mask-tabs{max-width:400px}.paint-screen .mask-tabs button{height:38px}.paint-screen .mask-tabs canvas{width:24px;height:30px}.paint-screen .paint-tools{gap:10px}.paint-screen .swatch{width:28px;height:28px}.paint-screen .paint-controls button{min-height:36px;min-width:36px;padding:4px 8px;font-size:12px}.paint-screen #startBtn{min-height:38px;font-size:12px}.reference-board{gap:5px;padding-top:0}.reference-head strong{font-size:15px}.reference-board .reference-subtitle{display:none}.reference-board .reference-steps button{min-height:32px;font-size:13px}.reference-main{grid-template-columns:88px 48px minmax(0,1fr);column-gap:8px}.ss-mascot,.reference-board .ss-mascot img{width:48px;height:48px}.ss-bubble{padding:5px 10px 6px}.reference-board .ss-bubble .ss-title,.reference-board .ss-bubble p,.reference-board .reference-learning,.reference-board .reference-learning p,.reference-board .reference-learning .colour-meaning,.reference-board .reference-learning .learning-note,.reference-board .forehead-examples b,.reference-board .forehead-examples p{font-size:17px}.reference-board .forehead-examples span{font-size:20px}.reference-board .meaning-colours button{padding:3px 0;font-size:12px}.reference-board .reference-sources,.reference-board .reference-sources a{font-size:12px}}@media(orientation:portrait)and (min-width:700px){.paint-screen{gap:6px;padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}.paint-screen .studio-progress{padding:0}.paint-screen .mask-tabs button{height:46px;padding:2px 4px}.paint-screen .mask-tabs canvas{width:28px;height:34px}.paint-screen .paint-stage,.paint-screen .paint-stage.with-reference{grid-template-columns:minmax(0,1fr) 282px;gap:12px}.paint-screen .paint-stage .canvas-wrap{width:min(100%,100cqh)}.paint-screen .reference-board{padding-left:12px}.reference-main{grid-template-columns:112px 56px}.ss-mascot,.reference-board .ss-mascot img{width:56px;height:56px}.reference-board .forehead-examples{gap:4px}.reference-board .forehead-examples>div{padding:4px 2px}}