:root{--paper:#f5f6f0;--ink:#303b29;--muted:#869179;--line:#e1e6d7;--board:#eef1e6}*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden}body{background:var(--board);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Noto Sans KR',sans-serif;-webkit-font-smoothing:antialiased}button,input{font:inherit;-webkit-tap-highlight-color:transparent}button{color:inherit;border:0;background:none;cursor:pointer}button:focus-visible,input:focus-visible,canvas:focus-visible{outline:2px solid #759854;outline-offset:4px}button:disabled{opacity:.35;cursor:not-allowed}svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.icon-defs{position:absolute;width:0;height:0;overflow:hidden}[hidden]{display:none!important}.site-header{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;background:#f7f8f2;border-bottom:1px solid var(--line)}.site-header h1{font-size:16px;font-weight:750;margin:0;letter-spacing:-.5px}.sound-control{display:flex;align-items:center;gap:12px}.sound-button{padding:0;display:grid;place-items:center;color:#7d9068;width:28px;height:30px}.sound-control input{width:112px}.sound-control>span{font-size:11px;width:23px;color:#8f9a82;font-variant-numeric:tabular-nums}main{height:calc(100dvh - 56px);width:100%;padding:0}.playground{position:relative;width:100%;height:100%;overflow:hidden;isolation:isolate;background:radial-gradient(ellipse at 48% 44%,#f7f8f1,var(--board) 75%)}#scene{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}#scene{z-index:1;cursor:grab}#scene:active{cursor:grabbing}.board-top{position:absolute;left:24px;right:24px;top:20px;z-index:5;display:flex;justify-content:space-between;align-items:center;pointer-events:none}.count{font-size:11px;color:#8c987d;font-variant-numeric:tabular-nums}.board-actions,.bottom-actions{display:flex;gap:8px;pointer-events:auto}.add-wrap{position:relative}.add-button,.icon-button{height:42px;width:42px;background:#fbfcf7e8;border:1px solid #e0e6d5;border-radius:12px;display:grid;place-items:center;color:#768966;box-shadow:0 2px 8px #35472207}.add-button:hover,.icon-button:hover{background:white}.add-button svg{width:22px;height:22px}.icon-button svg{width:19px;height:19px}.add-menu{position:absolute;right:0;top:50px;background:#fbfcf8;padding:7px;width:188px;border:1px solid #e0e6d5;border-radius:14px;box-shadow:0 12px 35px #344b2522;transform-origin:top right;animation:unfold .15s ease-out}.add-menu button{width:100%;padding:12px 10px;display:flex;align-items:center;gap:14px;text-align:left;font-size:13px;border-radius:8px}.add-menu button:hover{background:#eaf0e1}.mini-toy{display:block;flex-shrink:0;width:29px;height:28px;border-radius:45% 48% 40% 45%;background:radial-gradient(ellipse at 30% 24%,#effacb,#c7e38e 45%,#91b264);box-shadow:inset -2px -3px 4px #53782422}.mini-toy.wax{background:radial-gradient(ellipse at 30% 24%,#ffebd4,#eeb092 45%,#cf8b6a);border-radius:50%}.mini-toy.liquid{background:radial-gradient(ellipse at 30% 24%,#efffff,#9ad8dd 45%,#67acb6);height:20px;border-radius:60% 40% 65% 45%}.board-bottom{position:absolute;left:24px;right:24px;bottom:20px;z-index:4;display:flex;justify-content:space-between;align-items:center;pointer-events:none}#settingsColor{height:22px;width:22px;border-radius:50%;background:#b9d96d;border:2px solid #fff9;box-shadow:0 0 0 1px #8c9d7030}.controls{position:absolute;right:24px;bottom:80px;width:234px;padding:17px;background:#fbfcf8f5;border:1px solid #dfe6d3;border-radius:17px;z-index:7;box-shadow:0 12px 35px #344b2522;backdrop-filter:blur(12px);animation:unfold .15s ease-out}.selected-card{display:flex;align-items:center;gap:10px;padding-bottom:17px;border-bottom:1px solid var(--line);margin-bottom:19px}.selected-card strong{font-size:13px;font-weight:600}.close-settings{margin-left:auto;color:#919f83;display:grid;place-items:center;padding:3px}.close-settings svg{width:16px;height:16px}.control-section{margin-top:20px}.control-label{display:flex;justify-content:space-between;align-items:center;margin-bottom:13px}.control-label h2{margin:0;font-size:12px;font-weight:600}.control-label>span{font-size:10px;color:#91a080}.subtle-button{color:#8c9f77;padding:0;display:grid;place-items:center}.subtle-button svg{width:14px;height:14px}.swatches{display:flex;justify-content:space-between;margin-bottom:13px}.swatches button{width:26px;height:26px;border:3px solid #fbfcf8;outline:1px solid transparent;background:var(--swatch);border-radius:50%}.swatches button[aria-pressed=true]{outline-color:#96ac77}.swatches button:hover{transform:scale(1.1)}.custom-color{display:flex;align-items:center;justify-content:space-between;border:1px solid var(--line);border-radius:8px;height:34px;padding:0 9px;cursor:pointer}.color-value{font-size:10px;color:#8e9b81;font-variant-numeric:tabular-nums}input[type=color]{width:22px;height:22px;padding:0;border:0;background:none;border-radius:5px;cursor:pointer}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:none;border-radius:5px}input[type=range]{appearance:none;height:4px;width:100%;border-radius:5px;margin:0;background:linear-gradient(to right,#a7bf85 0%,#a7bf85 var(--progress,70%),#e1e7d7 var(--progress,70%),#e1e7d7 100%);cursor:pointer}input[type=range]::-webkit-slider-thumb{appearance:none;width:14px;height:14px;background:white;border:3px solid #9ab474;border-radius:50%}input[type=range]::-moz-range-thumb{width:9px;height:9px;background:white;border:3px solid #9ab474;border-radius:50%}.sound-control input{width:112px}.start-overlay{position:absolute;inset:0;z-index:10;display:grid;place-items:center;background:#edf1e5a8;backdrop-filter:blur(4px)}.start-card{display:flex;flex-direction:column;align-items:center;gap:30px;transform:translateY(-4%)}.start-card h1{font-size:clamp(32px,4vw,60px);font-weight:850;letter-spacing:-2px;margin:0;color:#35472c}.start-card button{padding:17px 50px;background:#3c522f;color:#fff;border-radius:16px;font-size:17px;font-weight:650;box-shadow:0 8px 26px #3b512b25;transition:transform .18s,background .18s}.start-card button:hover{transform:translateY(-2px);background:#4c663b}.start-overlay.leaving{opacity:0;pointer-events:none;transition:opacity .25s}.before-start .site-header{display:none}.before-start main{height:100dvh}.before-start .board-top,.before-start .board-bottom{display:none}.before-start #scene{pointer-events:none}.toast{position:absolute;bottom:85px;left:50%;transform:translateX(-50%);border-radius:20px;background:#3d4d31ed;color:white;font-size:12px;padding:10px 18px;z-index:9;pointer-events:none;opacity:0}.toast.show{opacity:1}.fallback{position:absolute;inset:0;z-index:11;display:grid;place-items:center;background:var(--board);color:#748866;font-size:13px}.playground.expanded{position:fixed;inset:0;z-index:30;height:100dvh}.playground.expanded .board-top{right:calc(24px + 200px)}body:has(.playground.expanded) .sound-control{position:fixed;top:26px;right:24px;z-index:31}@keyframes unfold{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}@media(max-width:600px){.site-header{height:50px;padding:0 16px}.site-header h1{font-size:14px}main{height:calc(100dvh - 50px)}.sound-control{gap:8px}.sound-control input{width:70px}.board-top{top:14px;left:16px;right:16px}.board-bottom{bottom:14px;left:14px;right:14px}.add-button,.icon-button{width:38px;height:38px;border-radius:10px}.bottom-actions{gap:6px}.controls{right:14px;bottom:73px;width:220px}.start-card{gap:25px}.start-card h1{letter-spacing:-1px}.start-card button{font-size:15px;padding:16px 40px}.playground.expanded .board-top{right:16px;top:64px}body:has(.playground.expanded) .sound-control{top:15px;right:16px}}@media(max-height:500px){.site-header{height:42px}main{height:calc(100dvh - 42px)}.board-top{top:10px}.board-bottom{bottom:10px}.controls{bottom:65px;max-height:calc(100% - 80px);overflow:auto}.start-card{gap:20px}.start-card h1{font-size:35px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.board-bottom{justify-content:flex-end}.start-card h1{white-space:nowrap}

.mini-toy.gel{border-radius:8px;background:#b8d49c;box-shadow:inset -2px -3px 4px #53782425}

.controls{max-height:calc(100% - 110px);overflow-y:auto}.delete-button{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;margin-top:22px;padding:9px 0;border:1px solid #e3d9d3;border-radius:9px;color:#986556;font-size:12px}.delete-button svg{width:15px;height:15px}.delete-button:hover{background:#f4e9e3;border-color:#cfb4a6}

.start-overlay.with-ad{display:flex;flex-direction:column;justify-content:center;gap:160px;padding:32px 16px 48px}.with-ad .start-card{transform:none}.start-ad{text-align:center;flex:none}.ad-label{display:block;margin-bottom:8px;color:#8c987f;font-size:10px}.start-ad ins{width:728px;height:90px}.privacy-link{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);font-size:10px;color:#87947b;text-decoration:none}.privacy-link:hover{text-decoration:underline}@media(max-width:759px){.start-ad ins{width:320px;height:100px}}

#spill{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}

.mini-toy.crunchy{border-radius:50%;background:radial-gradient(circle at 35% 35%,#728456 0 2px,transparent 3px),radial-gradient(circle at 65% 60%,#f5e4b8 0 3px,transparent 4px),#b8d49c}.design-section{margin-top:0}.design-section label{display:block;font-size:12px;font-weight:600;margin-bottom:9px}.design-section select{width:100%;background:#f4f6ee;color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:9px 7px;font-family:inherit;font-size:12px}.design-section select:focus-visible{outline:2px solid #759854;outline-offset:2px}