: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,1fr) clamp(220px,37%,320px);gap:20px;align-items:center}.paint-screen .paint-stage .canvas-wrap{grid-column:1;justify-self:center;align-self:center;width:min(100%,88cqh);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:12px;line-height:1.6;margin:12px 0}.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(--muted);font-size:11px;margin-top:8px}.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:10px}@media(max-width:480px){.paint-screen .paint-stage{grid-template-columns:minmax(0,1fr) 175px;gap:8px}.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%,102.4cqh);aspect-ratio:512 / 500}.paint-screen .mask-tabs canvas{width:41px;height:40px}.role-learning p{margin:10px 0}