:root{font-family:Inter,Pretendard,Apple SD Gothic Neo,Malgun Gothic,system-ui,sans-serif;color:#28392f;background:#f6f3eb;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;font-weight:400;--ink: #28392f;--muted: #6e786e;--green: #245b43;--line: #d8ddcf;--paper: #fffdf7;--accent: #e7b966}*{box-sizing:border-box}body{margin:0}button{font:inherit;color:inherit;border:1px solid var(--line);background:var(--paper);border-radius:12px;min-height:48px;padding:10px 16px;cursor:pointer;touch-action:manipulation}button:hover{border-color:#789684;background:#eef2e8}button:active{transform:translateY(1px)}button:focus-visible{outline:3px solid #b67829;outline-offset:3px}button:disabled{cursor:default;opacity:.55}h1,h2,h3,p{margin:0}button.primary{background:var(--green);color:#fffdf6;border-color:var(--green);font-weight:700;min-height:56px;font-size:16px;box-shadow:0 5px #183f3012}button.primary:hover{background:#194830}button[hidden],[hidden]{display:none!important}.eyebrow{font-size:11px;letter-spacing:.13em;font-weight:700;color:var(--muted)}.site-header{max-width:1120px;margin:auto;height:100px;display:flex;align-items:center;justify-content:space-between;padding:20px 32px}.brand-button{display:flex;gap:11px;align-items:center;border:0;background:transparent!important;padding:0}.brand-mark{display:grid;place-items:center;width:46px;height:46px;background:var(--ink);color:var(--paper);border-radius:50%;font-family:Georgia,serif;font-size:18px}.brand{text-align:left;font-size:11px;line-height:1.25;letter-spacing:.12em;font-weight:700}.site-header nav button{background:transparent;font-size:13px}.site-header nav b{margin-left:8px;color:var(--green)}.home-content,.collection-content{max-width:1056px;margin:auto;padding:20px 0 48px}.home-content>.eyebrow{margin-bottom:16px}.hero{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-bottom:44px}.hero h1{font-size:clamp(36px,4.6vw,60px);font-weight:600;letter-spacing:-.07em;line-height:1.3}.hero h1 em{font-style:normal;color:var(--green)}.hero p{margin:18px 0 24px;color:var(--muted);font-size:14px}.continue{min-width:250px;display:flex;justify-content:space-between;align-items:center;gap:24px}.hero-art{position:relative;width:320px;height:265px;border-radius:140px 140px 16px 16px;background:#dedfc7;overflow:hidden;flex-shrink:0;border:10px solid #ebe9dd;box-shadow:0 10px 30px #364c2d0c}.hero-art:before{content:"";position:absolute;width:240px;height:80px;background:repeating-radial-gradient(ellipse at center,#ae794c 0 7px,#e5bc6c 8px 15px,#445b47 16px 23px);border-radius:50%;left:30px;bottom:23px;transform:rotate(-18deg)}.art-mirror{position:absolute;width:84px;height:165px;left:115px;top:33px;background:linear-gradient(90deg,#5c7163,#f4f6dc 43%,#a5b9a1 60%,#405b48);border-radius:50%/9%;box-shadow:15px 18px 12px #263e4326}.art-orbit{position:absolute;width:165px;height:165px;top:28px;left:72px;border:2px solid #fff9;border-radius:50%}.hero-art>span{position:absolute;bottom:12px;left:18px;font-size:8px;letter-spacing:.2em;color:#203c2d;font-weight:700}.map-heading{display:flex;justify-content:space-between;align-items:baseline;margin:5px 0 24px;border-top:1px solid var(--line);padding-top:26px}.map-heading h2{font-size:20px}.map-heading>span{font-size:12px;color:var(--muted)}.chapter{margin-bottom:32px}.chapter-heading{display:flex;gap:13px;align-items:center;margin-bottom:15px}.chapter-number{font-family:Georgia,serif;font-size:29px;color:#8c987b}.chapter h3{font-size:16px;margin-bottom:4px}.chapter p{font-size:12px;color:var(--muted)}.stage-map{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.stage-card{display:flex;flex-direction:column;text-align:left;align-items:flex-start;gap:12px;min-height:148px;padding:18px;background:#fffdf7;position:relative}.stage-number{font-size:23px;font-family:Georgia,serif;color:#77866c}.stage-title{font-weight:700;font-size:13px}.stage-status{font-size:10px;color:var(--muted);margin-top:auto}.stage-card.current{border:2px solid var(--green);padding:17px;background:#edf1e5}.stage-card.cleared .stage-number{color:var(--green)}.stage-card.cleared:after{content:"✓";position:absolute;top:17px;right:14px;color:var(--green)}.home-footer{padding-top:22px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:8px}.home-footer p{width:100%;font-size:12px;color:var(--muted);line-height:1.7;margin-bottom:8px}.home-footer button{font-size:12px;background:transparent}.save-warning{background:#fff0ce;color:#634d2a;padding:8px 16px;font-size:12px;line-height:1.6;position:relative;z-index:5;text-align:center}.save-warning button{font-size:11px;min-height:36px;padding:5px 10px;margin-left:6px;background:#fff9eb}.game-screen{height:100dvh;min-height:600px;display:flex;flex-direction:column;overflow:hidden;padding-bottom:env(safe-area-inset-bottom)}.game-header{display:flex;align-items:center;gap:12px;flex-shrink:0;max-width:960px;width:100%;margin:auto;padding:14px 24px}.game-header .back{font-size:22px;padding:0;width:48px;flex-shrink:0;background:transparent}.game-header h1{font-size:16px;letter-spacing:-.03em;margin-top:3px}.game-header .eyebrow{font-size:9px;letter-spacing:.06em}.safety{margin-left:auto;display:flex;gap:6px;flex-shrink:0}.safety button{font-size:12px;padding:8px 12px;background:transparent}.game-body{flex:1;min-height:0;width:100%;display:flex;flex-direction:column;align-items:center;gap:12px;padding:4px 20px 12px}.instruction{text-align:center;flex-shrink:0;min-height:76px;display:flex;flex-direction:column;justify-content:center;gap:6px}.instruction h2{font-size:19px;letter-spacing:-.04em}.instruction p{font-size:12px;color:var(--muted);line-height:1.5;max-width:500px}.step-dots{display:flex;gap:5px;justify-content:center;margin-bottom:1px}.step-dots span{width:7px;height:7px;border-radius:10px;background:#d5ddce}.step-dots span.active{width:23px;background:#b78a42}.step-dots span.done{background:var(--green)}.work-area{position:relative;width:min(100%,calc(100dvh - 335px),620px);aspect-ratio:1;flex-shrink:0;border-radius:22px;background:#fffdf7;box-shadow:0 12px 35px #2c493314,0 0 0 1px #dddccc;overflow:hidden;isolation:isolate}.work-area canvas{display:block;width:100%;height:100%;touch-action:none}.target{position:absolute;transform:translate(-50%,-50%);min-width:48px;min-height:48px;padding:0;border:2px dashed #526d5680;background:transparent;border-radius:12px;z-index:2}.target:hover{background:#fff2;border-color:#245b43}.target:active{transform:translate(-50%,-50%)}.paint-target{pointer-events:none;border-color:transparent}.paint-target:focus-visible{border-color:var(--green);background:#fff3}.hidden-cover{display:none;position:absolute;inset:0;z-index:8;background:#e8ebdf;color:var(--muted);text-align:center;place-content:center;font-size:14px;line-height:2.6}.art-hidden .hidden-cover{display:grid}.art-hidden canvas{visibility:hidden}.art-hidden .target,.art-hidden .demo{visibility:hidden}.hidden-cover button{margin-top:12px}.material-tray{display:flex;gap:10px;justify-content:center;width:min(100%,530px);min-height:86px;flex-shrink:0}.material{display:flex;align-items:center;justify-content:center;flex-direction:column;position:relative;padding:6px 12px;min-width:92px;max-width:170px;flex:1;border:1px solid var(--line);border-radius:14px;background:#fffdf7;gap:4px}.material.selected{border:2px solid var(--green);padding:5px 11px;background:#edf2e5}.material canvas{width:48px;height:48px;display:block}.material>span:not(.material-symbol){font-size:11px;font-weight:600;text-align:center}.material-symbol{position:absolute;top:6px;right:8px;font-size:12px;color:var(--muted)}.work-tools{display:flex;justify-content:center;gap:8px;flex-shrink:0}.work-tools button{font-size:11px;border-color:transparent;background:transparent;min-height:48px;padding:8px 13px}.work-tools button[aria-pressed=true]{color:var(--green);text-decoration:underline;text-underline-offset:4px}.demo{position:absolute;z-index:3;pointer-events:none;opacity:0;transform:translate(-50%,-50%);transition:opacity .2s;display:flex;flex-direction:column;align-items:center;gap:10px}.demo.visible{opacity:1}.demo-finger{display:block;position:relative;width:24px;height:37px;background:#fffdf5;border:2px solid #314c39;border-radius:12px 12px 8px 8px;box-shadow:0 3px 8px #183e3233;transform:rotate(-25deg)}.demo-finger:after{content:"";position:absolute;left:-9px;bottom:1px;width:14px;height:22px;border-radius:7px 0 0 8px;background:#fffdf5;border:2px solid #314c39;border-right:0;transform:rotate(-25deg)}.demo.visible.paint .demo-finger{animation:paint-demo 1.7s ease-in-out 2}.demo.visible.place .demo-finger{animation:tap-demo 1.4s ease-in-out 2}.demo-label{white-space:nowrap;background:#28392feb;color:#fffdf5;padding:6px 10px;border-radius:20px;font-size:10px}.clear-label{font-size:10px;letter-spacing:.12em;color:var(--green);font-weight:700}.result-controls{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:8px;max-width:500px;flex-shrink:0}.result-controls button{font-size:12px;min-height:48px}.still-note{font-size:10px;color:var(--muted);width:100%;text-align:center}.result-next{width:min(100%,440px);flex-shrink:0}.result-next button{width:100%}.result-screen .work-area{width:min(100%,calc(100dvh - 375px),600px)}.result-screen .instruction{min-height:74px}.result-screen .instruction h2{font-size:18px}.result-screen .game-body{gap:10px}.collection-content>h1{margin:12px 0;font-size:36px;letter-spacing:-.06em}.collection-content>p{font-size:14px;color:var(--muted);line-height:1.7}.collection-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:32px 0}.collection-card{display:block;padding:10px;border-radius:14px;border:1px solid var(--line);background:var(--paper);text-align:left;overflow:hidden}.collection-card canvas,.empty-art{width:100%;aspect-ratio:1;display:block;border-radius:8px;background:#edeede}.collection-card>span{display:block;font-size:12px;font-weight:600;padding:13px 5px 5px}.empty-art{display:grid;place-items:center;color:#8a947f;font-size:12px;border:1px dashed #c8cdbd}.unearned{opacity:.65}.collection-content>.primary{display:block;margin:auto}#toast{position:fixed;bottom:calc(24px + env(safe-area-inset-bottom));left:50%;transform:translate(-50%,12px);max-width:calc(100vw - 32px);width:max-content;background:#243d31;color:#fffdf7;box-shadow:0 5px 20px #17282030;border-radius:12px;padding:12px 18px;font-size:12px;line-height:1.7;opacity:0;pointer-events:none;z-index:50;transition:opacity .2s,transform .2s}#toast.visible{opacity:1;transform:translate(-50%)}@keyframes paint-demo{0%,to{translate:-18px 0}50%{translate:18px 0}}@keyframes tap-demo{0%,to{translate:0 -8px}50%{translate:0 0}}@media(max-width:1120px){.home-content,.collection-content{padding-left:32px;padding-right:32px}}@media(max-width:650px){.site-header{height:80px;padding:16px 20px}.home-content,.collection-content{padding:12px 20px 32px}.hero{gap:12px;padding-bottom:28px}.hero h1{font-size:34px}.hero p{font-size:12px;max-width:215px;line-height:1.8;margin:12px 0 18px}.hero-art{width:115px;height:180px;border-width:5px;border-radius:80px 80px 12px 12px}.art-mirror{left:35px;top:29px;width:45px;height:109px}.art-orbit{left:1px;top:22px;width:112px;height:112px}.hero-art:before{width:150px;height:50px;left:-20px;bottom:28px}.hero-art>span{font-size:6px;left:8px;bottom:13px}.continue{min-width:0;width:100%;font-size:13px!important;padding:10px 14px!important;gap:8px}.home-content>.eyebrow{font-size:9px;letter-spacing:.08em}.map-heading{padding-top:20px;margin-bottom:18px}.map-heading h2{font-size:18px}.map-heading>span{font-size:10px}.stage-map{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}.stage-card{padding:10px 6px;gap:9px;min-height:129px;border-radius:10px}.stage-card.current{padding:9px 5px}.stage-number{font-size:20px}.stage-title{font-size:10px;word-break:keep-all;line-height:1.5}.stage-status{font-size:8px;line-height:1.5;word-break:keep-all}.stage-card.cleared:after{font-size:10px;top:9px;right:5px}.chapter-heading{gap:10px}.chapter h3{font-size:14px}.chapter p{font-size:10px}.game-header{padding:10px 12px;gap:8px}.game-header h1{font-size:13px;max-width:160px}.game-header .back{width:42px;min-width:48px;border:0}.safety{gap:4px}.safety button{padding:8px 10px;font-size:11px}.game-body{padding:2px 14px 8px;gap:10px}.instruction{min-height:72px}.instruction h2{font-size:17px}.instruction p{font-size:11px;padding:0 6px}.work-area{width:min(100%,calc(100dvh - 310px));border-radius:18px}.material-tray{min-height:84px;gap:8px}.material{padding:5px 8px;min-width:0}.material.selected{padding:4px 7px}.material>span:not(.material-symbol){font-size:10px}.material-symbol{font-size:10px;right:5px}.work-tools{gap:3px}.work-tools button{padding:8px 10px}.result-screen .work-area{width:min(100%,calc(100dvh - 358px))}.result-screen .instruction h2{font-size:16px}.result-screen .instruction p{font-size:10px}.result-controls{gap:6px}.result-controls button{padding:8px 12px;font-size:11px}.collection-content>h1{font-size:30px}.collection-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.collection-card{padding:7px}.collection-card>span{font-size:10px;padding:10px 3px 3px}.empty-art{font-size:9px}.save-warning{padding:5px 10px;font-size:10px}.game-screen:has(.save-warning:not([hidden])) .work-area{width:min(100%,calc(100dvh - 400px))}}@media(max-height:700px){.game-header{padding-top:5px;padding-bottom:5px}.game-body{gap:6px}.instruction{min-height:61px;gap:4px}.material-tray{min-height:74px}.material canvas{width:40px;height:40px}.work-area{width:min(100%,calc(100dvh - 285px))}.result-screen .work-area{width:min(100%,calc(100dvh - 335px))}.result-screen .game-body{gap:6px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}.demo-material{outline:3px solid #b78a42;outline-offset:3px}.demo[style*=fixed]{z-index:10}@media(max-width:600px){.hero{grid-template-columns:1fr;position:relative;padding-right:90px}.hero h1{font-size:clamp(30px,8.7vw,36px);word-break:keep-all}.hero-art{position:absolute;width:110px;right:0;bottom:32px}.stage-map{grid-template-columns:repeat(3,minmax(0,1fr))}.stage-title{word-break:keep-all}}