@font-face{font-family:DM Sans;src:url('./fonts/dm-sans.woff2') format('woff2');font-weight:100 1000;font-display:swap}
:root{--ink:#30332d;--muted:#7c7e72;--paper:#f7f6f2;--orange:#f16b3d;--orange-dark:#c34a24;--line:#dedfd5;--white:#fffefb;--scale:1;color:var(--ink);font-family:'DM Sans',ui-rounded,'Avenir Next',system-ui,sans-serif;font-synthesis:none;font-size:calc(14px * var(--scale));-webkit-tap-highlight-color:transparent}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--paper)}button,input{font:inherit}button,a,input{touch-action:manipulation}button{color:inherit;cursor:pointer;-webkit-user-select:none;user-select:none}button:disabled{cursor:default;opacity:.32}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #4279d6;outline-offset:4px}button{transition:transform .18s cubic-bezier(.2,.8,.2,1.4),background .16s,box-shadow .16s}button:not(:disabled):active{transform:translateY(2px) scale(.96)}button[aria-pressed=true]{color:var(--orange-dark)}.icon{width:1.5rem;height:1.5rem;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.icon.small{width:1.15rem;height:1.15rem}.icon-button{width:3rem;height:3rem;border:0;background:transparent;border-radius:.9rem;display:inline-flex;align-items:center;justify-content:center}.icon-button:hover:not(:disabled){background:#eae9e2}.button{border:1px solid var(--line);background:var(--white);border-radius:1rem;display:inline-flex;align-items:center;justify-content:center;gap:.65rem;padding:.85rem 1.2rem;font-weight:700;white-space:nowrap;min-height:3.15rem;box-shadow:0 2px 0 #dedfd5}.button:hover{background:#efeee7;transform:translateY(-1px)}.button.primary{color:white;background:var(--orange);border-color:#e75e30;box-shadow:0 3px 0 #ce512a,inset 0 1px 0 #ff9c77}.button.primary:hover{background:#ec5b2b}.button.quiet{box-shadow:none;background:transparent;border-color:transparent}.button.danger{color:#ae3d34;background:#fff2ec}.panel{background:#fffefbf2;border:1px solid #dedfd4;box-shadow:0 4px 12px #35362d06,0 2px 0 #d7d8cd88;border-radius:1.3rem}#app{height:100%;height:100dvh;display:flex;flex-direction:column;padding:env(safe-area-inset-top) max(1.1rem,env(safe-area-inset-right)) env(safe-area-inset-bottom) max(1.1rem,env(safe-area-inset-left))}.topbar{height:6rem;display:flex;align-items:center;gap:1.35rem;flex-shrink:0;padding:0 .9rem;position:relative}.brand{text-decoration:none;display:flex;align-items:center;gap:.6rem;color:var(--ink);font-size:2.65rem;line-height:1;font-weight:900;letter-spacing:-.18rem}.brand img{width:2.5rem;height:2.5rem;border-radius:.8rem;transform:rotate(-8deg);box-shadow:0 2px 0 #d9552b}.brand-dot{color:var(--orange)}.brand-caption{color:var(--muted);font-size:.79rem;max-width:6rem;line-height:1.4;letter-spacing:-.01rem;border-left:1px solid #dddcd4;padding-left:1.2rem}.project-name{position:absolute;left:50%;transform:translateX(-50%);text-align:center;display:flex;flex-direction:column;gap:.28rem}.name-field{display:flex;align-items:center;justify-content:center;gap:.4rem}.name-field input{background:none;border:0;color:var(--ink);font-weight:650;width:12.5rem;text-align:center;padding:0;max-width:100%;text-overflow:ellipsis}.name-field svg{width:.85rem;height:.85rem;color:#96978a}#save-status{font-size:.68rem;color:#838679;display:flex;align-items:center;justify-content:center;gap:.4rem}#save-status i{width:.35rem;height:.35rem;border-radius:50%;background:#80a378}.header-actions{margin-left:auto;display:flex;gap:.6rem;align-items:center}.header-actions .quiet{padding-right:1.4rem}.workspace{position:relative;flex:1;min-height:0;isolation:isolate;border:1px solid #ddded3;border-radius:2rem;overflow:hidden;background-color:#eeeee6;background-image:radial-gradient(ellipse at 49% 39%,#faf9f000 20%,#dadfcd33 100%),radial-gradient(#b6bba953 .8px,transparent .8px);background-size:100% 100%,20px 20px}#viewport{position:absolute;inset:0;touch-action:none;outline:0;cursor:crosshair;z-index:1}#viewport canvas{display:block;width:100%;height:100%;touch-action:none}#viewport[data-tool=orbit]{cursor:grab}#viewport[data-tool=orbit]:active{cursor:grabbing}.canvas-top{position:absolute;left:2rem;right:1.2rem;top:1.1rem;display:flex;align-items:center;justify-content:space-between;pointer-events:none;z-index:3}.studio-tag{font-size:.64rem;font-weight:700;letter-spacing:.13rem;display:flex;align-items:center;gap:.65rem;color:#747969}.live-dot{width:.45rem;height:.45rem;border-radius:50%;background:#8fa57a;box-shadow:0 0 0 4px #dce4d256}.canvas-actions{display:flex;gap:.3rem;pointer-events:auto}.canvas-actions .icon-button{color:#848875;width:2.6rem;height:2.6rem}.canvas-intro{position:absolute;top:19%;left:calc(7.8rem + 3vw);pointer-events:none;z-index:2;transition:opacity .5s,transform .5s}.eyebrow{font-size:.59rem;letter-spacing:.15rem;font-weight:750;color:#8a8e7f}h1{font-size:clamp(2.1rem,3.2vw,3.9rem);line-height:1.07;letter-spacing:-.15rem;font-weight:650;margin:1rem 0 1.2rem}h1 em{font-weight:600;font-style:normal;color:#889570}.canvas-intro p{font-size:.85rem;line-height:1.8;color:#8a8e7c}.sketch-arrow{display:block;font-size:3.5rem;line-height:1;margin:1rem 0 0 65%;color:#8d987b;transform:rotate(15deg);font-family:Georgia,serif}.canvas-intro.dismissed{opacity:0;transform:translateY(-10px)}.tool-rail{position:absolute;z-index:4;left:1.3rem;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;width:5.35rem;padding:.8rem .5rem .5rem;gap:.25rem}.rail-caption{color:#9b9d90;font-size:.55rem;font-weight:750;letter-spacing:.15rem;margin-bottom:.55rem}.tool{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;width:4.2rem;height:4.25rem;border:1px solid transparent;border-radius:1rem;background:none;color:#787e6d;font-size:.68rem;font-weight:600}.tool .icon{width:1.65rem;height:1.65rem;stroke-width:1.65}.tool:hover{background:#efefe7}.tool.active{background:#fff0e6;border-color:#f4c8ae;color:#d35d32;box-shadow:0 2px 0 #eaceb6,inset 0 1px 0 #fff}.tool.active:before{content:'';position:absolute;left:-.55rem;width:.2rem;height:1.1rem;border-radius:0 .5rem .5rem 0;background:var(--orange)}.tool kbd{position:absolute;top:.3rem;right:.4rem;font-family:inherit;font-size:.5rem;opacity:0}.tool:hover kbd{opacity:.6}.rail-divider{width:2.6rem;height:1px;background:#e6e7de;margin:.45rem 0}.brush-panel{position:absolute;z-index:4;right:1.4rem;top:50%;transform:translateY(-50%);width:13.5rem;padding:1.3rem;border-radius:1.5rem}.brush-heading{display:flex;align-items:center;gap:.8rem;margin-bottom:1.3rem}.brush-heading strong{font-size:.84rem;font-weight:700;display:block}.brush-heading div>span{display:block;font-size:.65rem;color:#8d9080;margin-top:.35rem}.brush-preview{background:#eaa679;box-shadow:inset -3px -3px 5px #b6543433,inset 3px 3px 5px #fff5;width:2.35rem;height:2.35rem;flex-shrink:0;border-radius:45% 55% 48% 52%;transform:rotate(-15deg)}.range-label{display:flex;justify-content:space-between;align-items:center;font-size:.7rem;font-weight:600}.range-label output{font-size:.65rem;border:1px solid #e4e4d9;border-radius:.4rem;padding:.15rem .4rem;color:#848976;min-width:1.5rem;text-align:center}input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:1.8rem;background:transparent;margin:.4rem 0 .8rem;cursor:pointer;touch-action:pan-x}input[type=range]::-webkit-slider-runnable-track{height:5px;border-radius:10px;background:linear-gradient(to right,#ed946b 0 var(--fill,44%),#e7e7de var(--fill,44%) 100%)}input[type=range]::-moz-range-track{height:5px;border-radius:10px;background:#e7e7de}input[type=range]::-moz-range-progress{height:5px;border-radius:10px;background:#ed946b}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:#fffefb;width:19px;height:19px;margin-top:-7px;border-radius:50%;border:1px solid #dedbd0;box-shadow:0 2px 3px #0002}input[type=range]::-moz-range-thumb{background:#fffefb;width:19px;height:19px;border-radius:50%;border:1px solid #dedbd0;box-shadow:0 2px 3px #0002}.mirror-button{display:flex;align-items:center;gap:.55rem;background:transparent;border:0;border-top:1px solid #e6e7de;padding:.95rem 0 0;width:100%;font-size:.7rem;color:#777e68}.toggle{margin-left:auto;width:1.85rem;height:1.1rem;border-radius:2rem;background:#e5e7dc;padding:.2rem;transition:background .15s}.toggle:after{content:'';display:block;width:.7rem;height:.7rem;background:white;border-radius:50%;box-shadow:0 1px 2px #0002;transition:transform .18s}.mirror-button[aria-pressed=true] .toggle{background:#ee8b62}.mirror-button[aria-pressed=true] .toggle:after{transform:translateX(.75rem)}.view-controls{position:absolute;right:1.4rem;bottom:1.8rem;display:flex;align-items:center;z-index:4;padding:.2rem;border-radius:1rem}.view-controls .icon-button{width:2.3rem;height:2.5rem}.view-controls .icon{width:1.15rem;height:1.15rem}.zoom-reset{font-size:.67rem;font-weight:700;background:none;border:0;min-width:3.3rem;height:2.5rem}.zoom-reset span{font-weight:400;color:#939785}.mini-divider{width:1px;height:1rem;background:var(--line);margin:0 .2rem}.history{position:absolute;left:1.4rem;bottom:1.8rem;display:flex;z-index:4;border-radius:1rem;padding:.2rem}.history .icon-button{width:2.7rem;height:2.5rem}.history .icon{width:1.25rem;height:1.25rem}.bottom-dock{position:absolute;z-index:4;left:50%;bottom:4.4rem;transform:translateX(-50%);display:flex;align-items:center;gap:.8rem}.colors{display:flex;align-items:center;gap:.9rem;border-radius:1.3rem;padding:.9rem 1.1rem}.color-caption{font-size:.55rem;color:#9a9c8f;line-height:1.5;letter-spacing:.06rem;white-space:nowrap}.color-caption strong{font-weight:700;color:#727966}#swatches{display:flex;gap:.55rem}.swatch{width:1.9rem;height:1.9rem;border-radius:50%;background:var(--color);border:0;position:relative;box-shadow:inset -2px -3px 4px #00000015,inset 1px 2px 3px #fff5}.swatch:hover{transform:translateY(-3px)}.swatch.selected:after{content:'';position:absolute;inset:-4px;border:1.5px solid var(--color);border-radius:50%}.swatch.selected:before{content:'';position:absolute;inset:0;margin:auto;width:.45rem;height:.45rem;border-radius:50%;background:white;box-shadow:0 1px 2px #0002}.custom-color{position:relative;display:flex;align-items:center;justify-content:center;width:2.1rem;height:2.1rem;border:1px dashed #b9bdac;border-radius:50%;color:#858c75;cursor:pointer}.custom-color input{position:absolute;opacity:0;width:100%;height:100%;inset:0;cursor:pointer}.custom-color svg{pointer-events:none}.new-clay{height:4rem;border-radius:1.25rem;padding:0 1.3rem;color:#626c56;font-size:.8rem;border-style:dashed;background:#f8f9f0ba;box-shadow:0 2px 0 #d5d9c8}.new-clay .icon{width:1.3rem;height:1.3rem}.gesture-hint{position:absolute;z-index:2;bottom:1.75rem;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:.5rem;white-space:nowrap;font-size:.65rem;color:#929884;pointer-events:none}.gesture-hint b{padding:0 .4rem;font-weight:400}.gesture-hint svg{width:1rem;height:1rem}.creation-label{position:absolute;right:calc(16rem + 2vw);bottom:24%;display:flex;gap:.7rem;align-items:center;transform:rotate(-8deg);font-size:.7rem;line-height:1.5;color:#9ba28d;pointer-events:none;z-index:2}.creation-label strong{font-weight:500}.tiny-star{font-size:2rem;color:#b2b89f}.footer{height:2.65rem;display:flex;justify-content:space-between;align-items:center;flex-shrink:0;padding:0 1rem;font-size:.63rem;color:#929580}.footer>span{display:flex;align-items:center;gap:.5rem}.footer-dot{width:.3rem;height:.3rem;border-radius:50%;background:#9aab85}.footer-right .icon{width:1rem;height:1rem;color:#adb396}#loading{z-index:5;position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.2rem;background:#eeeee6;color:#929884;font-size:.85rem;transition:opacity .4s}.loading-clay{height:3rem;width:3rem;background:var(--orange);border-radius:47% 53% 62% 38%;box-shadow:inset -8px -5px 12px #96351530;animation:squish 1s ease-in-out infinite alternate}@keyframes squish{to{transform:scale(1.2,.8) rotate(15deg)}}#loading.done{opacity:0;pointer-events:none}dialog{border:1px solid #dedfd4;box-shadow:0 30px 100px #303d3033;background:#fbfaf6;border-radius:2rem;width:min(37rem,calc(100% - 2rem));padding:1.7rem 2rem 2rem;color:var(--ink);max-height:calc(100dvh - 3rem);overscroll-behavior:contain}dialog::backdrop{background:#3f493347;backdrop-filter:blur(5px)}dialog[open]{animation:modal-in .22s ease-out}@keyframes modal-in{from{transform:translateY(16px) scale(.98);opacity:0}to{transform:none;opacity:1}}.modal-top{display:flex;justify-content:space-between;align-items:center}.modal-top .icon-button{margin-right:-.6rem;width:2.4rem;height:2.4rem}.modal-top .eyebrow{color:#8a907d}dialog h2{font-size:2rem;letter-spacing:-.075rem;margin:.6rem 0 .5rem;font-weight:650}dialog .subtitle{font-size:.9rem;line-height:1.6;color:#858a77;margin:0 0 1.6rem}.shape-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem}.shape-card{padding:1rem .8rem .85rem;background:#f0f0e7;border:1px solid #e3e4d8;border-radius:1.2rem;display:flex;flex-direction:column;align-items:center;gap:.6rem;font-size:.8rem;font-weight:650}.shape-card:hover{background:#e9eddf;transform:translateY(-3px)}.shape-card svg{width:5.2rem;height:5.2rem}.modal-footnote{font-size:.7rem;line-height:1.65;color:#949986;margin:1.3rem 0 0;display:flex;align-items:center;gap:.5rem}.export-options{display:grid;gap:.7rem}.export-card{display:flex;align-items:center;text-align:left;gap:1rem;border:1px solid #dfe3d3;background:#f2f4e9;padding:1.2rem;border-radius:1rem}.export-card:hover{background:#e9eddd}.export-card>.icon{width:1.9rem;height:1.9rem;color:#829368}.export-card strong{display:block;font-size:.95rem;font-weight:650}.export-card small{display:block;margin-top:.3rem;font-size:.7rem;color:#859176}.export-card .chev{margin-left:auto;width:1rem}.save-shelf-button{margin-top:1.1rem;width:100%}.help-list{display:grid;gap:1.2rem}.help-step{display:flex;align-items:flex-start;gap:1rem}.help-step>.icon{width:2.2rem;height:2.2rem;background:#fff0e4;padding:.45rem;color:#d67e54;border-radius:.7rem;box-sizing:content-box}.help-step strong{font-size:.9rem;display:block;margin:.3rem 0}.help-step p{font-size:.8rem;line-height:1.65;color:#818a73;margin:0}.help-keys{margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--line);color:#929884;font-size:.7rem;line-height:1.8}.help-keys kbd{padding:.15rem .3rem;border:1px solid #dedfd3;border-radius:.3rem;font-family:inherit}.shelf-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem;max-height:48vh;overflow:auto;padding:.15rem}.shelf-item{position:relative;background:#eceee1;border:1px solid #dce1cd;border-radius:1.2rem;overflow:hidden}.shelf-item>button:first-child{width:100%;background:none;border:0;padding:0;text-align:left}.shelf-item img{width:100%;aspect-ratio:1.2;object-fit:cover;display:block}.shelf-item .shelf-info{padding:.8rem 1rem;display:block;font-size:.8rem}.shelf-info small{display:block;margin-top:.3rem;color:#939a85;font-size:.6rem}.delete-creation{position:absolute;right:.4rem;top:.4rem;background:#fffdf0d9;width:2rem;height:2rem;border-radius:.6rem;border:0;display:flex;align-items:center;justify-content:center}.delete-creation svg{width:1rem;height:1rem}.shelf-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:#f0f2e8;padding:2rem;border-radius:1.2rem;gap:1rem;color:#8c9879}.shelf-empty .icon{width:3rem;height:3rem}.shelf-empty p{font-size:.85rem;line-height:1.7;margin:0}.shelf-actions{display:flex;gap:.8rem;margin-top:1.2rem}.shelf-actions .button{flex:1;font-size:.8rem;padding:.8rem}.toast-visible{opacity:1!important;transform:translate(-50%,0)!important}#toast{position:fixed;bottom:max(2rem,env(safe-area-inset-bottom));left:50%;transform:translate(-50%,12px);z-index:30;background:#3c4735;color:#fffbed;border:1px solid #59674f;padding:.85rem 1.4rem;border-radius:1rem;box-shadow:0 5px 18px #0002;font-size:.8rem;font-weight:500;pointer-events:none;opacity:0;transition:all .2s;max-width:calc(100% - 2rem);text-align:center}.no-script,.webgl-error{position:absolute;inset:20% 15%;padding:2rem;background:var(--white);border-radius:2rem;text-align:center;display:flex;flex-direction:column;justify-content:center;gap:1rem;line-height:1.7;z-index:10}.webgl-error h2{margin:0}.webgl-error p{margin:0;color:#858c76}.workspace.focus-mode .canvas-intro,.workspace.focus-mode .creation-label{opacity:0}.workspace.focus-mode .studio-tag{opacity:.4}
@media(min-width:1900px) and (min-height:1000px){:root{--scale:1.35}.workspace{background-size:100% 100%,27px 27px}}
@media(min-width:3000px) and (min-height:1600px){:root{--scale:2}.workspace{background-size:100% 100%,40px 40px}}
@media(max-width:1150px){.canvas-intro{left:9rem;top:16%}.canvas-intro h1{font-size:2.4rem}.canvas-intro .eyebrow{font-size:.5rem}.canvas-intro p{font-size:.73rem}.brush-panel{width:12rem;padding:1rem;right:1.1rem}.creation-label{display:none}.color-caption{display:none}.brand-caption{display:none}.view-controls{right:1.1rem}.bottom-dock{bottom:4.6rem}.new-clay{padding:0 1rem}.swatch{width:1.75rem;height:1.75rem}.colors{padding:1rem}.gesture-hint{font-size:.58rem}}
@media(max-width:850px){.canvas-intro{top:13%;left:8rem}.canvas-intro p,.sketch-arrow{display:none}.canvas-intro h1{font-size:1.9rem;letter-spacing:-.07rem}.canvas-intro .eyebrow{display:none}.brush-panel{top:7rem;right:1rem;transform:none;width:10.7rem;padding:.9rem}.brush-heading{margin-bottom:.7rem;gap:.5rem}.brush-heading strong{font-size:.75rem}.brush-heading div>span{font-size:.56rem}.brush-preview{width:1.8rem;height:1.8rem}.mirror-button{font-size:.62rem;padding-top:.7rem}.bottom-dock{gap:.5rem}.colors{gap:.6rem;padding:.8rem}.new-clay{height:3.8rem;padding:0 .9rem}.colors #swatches{gap:.45rem}.swatch{width:1.6rem;height:1.6rem}.custom-color{width:1.7rem;height:1.7rem}.history .icon-button{width:2.4rem}.view-controls .icon-button{width:2rem}.zoom-reset{min-width:2.8rem}.gesture-hint{bottom:2rem;font-size:.57rem}.gesture-hint .icon{display:none}.footer{font-size:.57rem}}
@media(max-width:620px) and (orientation:portrait){:root{font-size:13px}#app{padding-right:max(.65rem,env(safe-area-inset-right));padding-left:max(.65rem,env(safe-area-inset-left))}.topbar{height:5.3rem;padding:0 .5rem;gap:.6rem}.brand{font-size:2.4rem;gap:.4rem}.brand img{width:2.15rem;height:2.15rem}.header-actions{gap:.2rem}.header-actions .quiet{padding:.6rem;width:3rem}.header-actions .quiet span{display:none}.header-actions .primary{padding:.6rem .9rem;min-height:2.9rem;font-size:.8rem;gap:.4rem}.header-actions .primary svg{width:1.1rem}.project-name{position:static;transform:none;margin:auto;max-width:8.5rem}.name-field input{width:7.7rem;font-size:.73rem}.name-field svg{display:none}#save-status{font-size:.5rem;gap:.3rem}.workspace{border-radius:1.5rem}.canvas-top{left:1rem;right:.7rem;top:.65rem}.studio-tag{font-size:.46rem;letter-spacing:.08rem;gap:.5rem}.canvas-actions .icon-button{width:2.4rem;height:2.4rem}.canvas-intro{left:1.3rem;top:4rem}.canvas-intro h1{font-size:1.8rem;line-height:1.1;margin:0;letter-spacing:-.07rem}.brush-panel{top:4rem;right:1rem;width:9.2rem;padding:.65rem .8rem;border-radius:1rem}.brush-heading{gap:.5rem;margin-bottom:.3rem}.brush-heading strong{font-size:.65rem}.brush-heading div>span{display:none}.brush-preview{width:1.4rem;height:1.4rem}.range-label{font-size:.59rem}.range-label output{font-size:.55rem}.brush-panel input{margin:0 0 .2rem;height:1.65rem}.mirror-button{font-size:.57rem;padding-top:.5rem;gap:.4rem}.mirror-button .icon{width:1rem}.toggle{height:1rem;width:1.6rem;padding:.15rem}.toggle:after{width:.7rem;height:.7rem}.mirror-button[aria-pressed=true] .toggle:after{transform:translateX(.6rem)}.tool-rail{top:auto;left:50%;bottom:7.65rem;transform:translateX(-50%);flex-direction:row;width:auto;gap:.3rem;padding:.4rem;border-radius:1.2rem}.rail-caption,.rail-divider{display:none}.tool{width:4rem;height:4.05rem;gap:.3rem;border-radius:.8rem;font-size:.63rem}.tool .icon{width:1.6rem;height:1.6rem}.tool.active:before{display:none}.tool kbd{display:none}.bottom-dock{bottom:3.4rem;width:calc(100% - 1.6rem);justify-content:center;gap:.5rem}.colors{gap:.55rem;padding:.7rem .8rem;border-radius:1rem}.colors #swatches{gap:.57rem}.swatch{width:1.65rem;height:1.65rem}.custom-color{width:1.65rem;height:1.65rem}.new-clay{width:3.1rem;height:3.1rem;padding:0;flex-shrink:0;border-radius:.9rem}.new-clay span{display:none}.new-clay svg{width:1.5rem;height:1.5rem}.gesture-hint{bottom:1.25rem;font-size:.55rem;width:100%;justify-content:center;white-space:normal}.gesture-hint b{padding:0 .2rem}.history{bottom:auto;top:13.25rem;left:.85rem;flex-direction:column;padding:.15rem;border-radius:.9rem}.history .icon-button{height:2.7rem;width:2.7rem}.view-controls{bottom:auto;top:13.25rem;right:.85rem;flex-direction:column;padding:.15rem;border-radius:.9rem}.view-controls .icon-button{width:2.7rem;height:2.7rem}.zoom-reset{display:none}.mini-divider{height:1px;width:1.3rem;margin:.25rem}.footer{height:2.2rem;padding:0 .4rem;font-size:.53rem}.footer-right{font-size:.48rem}.footer-right .icon{display:none}dialog{padding:1rem 1.3rem 1.5rem;border-radius:1.5rem}dialog h2{font-size:1.9rem}.shape-card{padding:.6rem .3rem;font-size:.7rem}.shape-card svg{width:4.8rem;height:4.8rem}}
@media(max-width:365px) and (orientation:portrait){.brand img{display:none}.header-actions .primary{padding:.6rem .7rem}.colors{padding:.75rem .6rem}.colors #swatches{gap:.43rem}.swatch{width:1.5rem;height:1.5rem}.custom-color{width:1.5rem;height:1.5rem}.bottom-dock{gap:.4rem}.tool{width:3.75rem}.canvas-intro h1{font-size:1.6rem}.footer-right{display:none}}
@media(max-height:660px) and (min-width:621px){.topbar{height:4.7rem}.footer{height:2rem}.workspace{border-radius:1.5rem}.canvas-top{top:.5rem}.tool-rail{padding:.4rem;gap:.1rem;left:.8rem;width:4.6rem}.tool{height:3.5rem;width:3.7rem;font-size:.58rem;gap:.25rem}.tool .icon{width:1.4rem;height:1.4rem}.rail-caption{display:none}.rail-divider{margin:.25rem}.brush-panel{top:50%;transform:translateY(-50%);width:11rem}.canvas-intro{left:7rem;top:13%}.canvas-intro h1{font-size:2rem}.canvas-intro p,.canvas-intro .eyebrow,.sketch-arrow{display:none}.bottom-dock{bottom:3.2rem}.colors{padding:.75rem 1rem}.new-clay{height:3.4rem}.gesture-hint{bottom:1rem}.history,.view-controls{bottom:1rem}}
@media(orientation:landscape) and (max-height:480px){:root{font-size:12px}.topbar{height:4.1rem}.brand{font-size:2.3rem}.brand img{width:2rem;height:2rem}.header-actions .button{min-height:2.6rem;padding:.5rem .8rem;font-size:.8rem}.workspace{border-radius:1rem}.footer{display:none}.workspace{margin-bottom:.7rem}.canvas-top{top:.3rem;left:6rem;right:.5rem}.studio-tag{font-size:.45rem}.canvas-actions .icon-button{height:2.2rem;width:2.2rem}.tool-rail{width:4rem;left:.5rem;padding:.25rem;gap:.1rem;top:50%}.tool{width:3.45rem;height:3.3rem;font-size:.52rem;gap:.1rem}.tool .icon{width:1.3rem;height:1.3rem}.rail-divider{margin:.12rem}.canvas-intro,.gesture-hint{display:none}.brush-panel{top:3.1rem;right:.6rem;transform:none;width:10rem;padding:.7rem}.brush-heading{margin-bottom:.5rem}.brush-heading div>span{display:none}.brush-preview{width:1.4rem;height:1.4rem}.range-label{font-size:.6rem}.brush-panel input{height:1.5rem;margin:.25rem 0 .4rem}.mirror-button{padding-top:.5rem}.bottom-dock{bottom:.8rem;left:46%;gap:.5rem}.colors{padding:.65rem .8rem;gap:.55rem}.colors #swatches{gap:.55rem}.new-clay{height:3rem;width:3rem;padding:0}.new-clay span{display:none}.history{left:5rem;bottom:.8rem}.history .icon-button{width:2.2rem;height:2.2rem}.view-controls{right:.6rem;bottom:.8rem}.view-controls .icon-button{width:2.1rem;height:2.2rem}.view-controls .zoom-reset{display:none}.view-controls .mini-divider{margin:0 .1rem}.swatch{width:1.55rem;height:1.55rem}.custom-color{width:1.55rem;height:1.55rem}}
@media(orientation:landscape) and (max-height:365px){.topbar{height:3.6rem}.tool-rail{flex-wrap:wrap;flex-direction:row;width:7.8rem;padding:.25rem;justify-content:center}.tool{height:3.45rem;width:3.4rem}.tool .icon{width:1.25rem}.rail-divider{display:none}.canvas-top{left:9rem}.brush-panel{width:9rem;top:2.8rem}.history{left:8.8rem;bottom:.7rem;flex-direction:column}.history .icon-button{height:2rem;width:2.1rem}.colors{padding:.55rem .65rem}.colors #swatches{gap:.42rem}.bottom-dock{left:50%;bottom:.7rem}.view-controls{flex-direction:column;bottom:.7rem}.view-controls .mini-divider{display:none}.view-controls .icon-button{height:2rem}.new-clay{height:2.7rem;width:2.7rem}.swatch{width:1.4rem;height:1.4rem}.custom-color{width:1.4rem;height:1.4rem}}
@media(max-width:620px) and (orientation:portrait){
  .project-name{min-width:0}.name-field{min-width:0}.name-field input{min-width:0;width:100%}
  .canvas-intro{display:none}.brush-panel{top:3.5rem;left:1rem;right:1rem;width:auto;display:flex;align-items:center;gap:.65rem;padding:.6rem .8rem;border-radius:1rem}
  .brush-heading{display:none}.range-label{gap:.5rem;flex-shrink:0;font-size:.63rem}.range-label output{display:none}
  .brush-panel input{margin:0;flex:1;width:0;min-width:2.7rem;height:2rem}
  .mirror-button{width:auto;flex-shrink:0;border-top:0;border-left:1px solid #e6e7de;padding:0 0 0 .7rem;font-size:.61rem;gap:.45rem}
  .mirror-button .icon{display:none}.mirror-button .toggle{margin-left:.15rem}
}
#spin[aria-pressed=true]{background:#fff0e6;box-shadow:inset 0 0 0 1px #f4c8ae}
.primitive-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.primitive-grid .shape-card[aria-pressed=true]{border-color:#e6ab88;background:#fff0e4;box-shadow:inset 0 0 0 1px #e6ab88}.primitive-blend{padding:1.2rem 1rem .4rem;background:#f0f2e8;border-radius:1rem;margin-top:1rem}.primitive-blend .range-label{font-size:.8rem}.primitive-blend input{margin-bottom:.2rem}
.starter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.starter-grid .shape-card{padding:1.2rem}.starter-grid .shape-card svg{width:7rem;height:7rem}.extra-grid{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}.extra-tool{display:flex;flex-direction:column;align-items:flex-start;gap:.8rem;border:1px solid #dfe3d3;border-radius:1.2rem;padding:1.2rem;background:#f0f2e8;text-align:left;min-height:8rem}.extra-tool>.icon{width:2rem;height:2rem;color:#79916d}.extra-tool:hover{background:#e9eddd}.extra-tool[aria-pressed=true]{background:#fff0e4;border-color:#e6ab88}.extra-tool strong,.sound-toggle strong{display:block;font-size:.9rem}.extra-tool small,.sound-toggle small{display:block;font-size:.7rem;line-height:1.6;color:#818a73;margin-top:.4rem;font-weight:400}.sound-options{display:grid;gap:.7rem}.sound-toggle.mirror-button{padding:1.2rem;border:1px solid #dfe3d3;background:#f0f2e8;border-radius:1.2rem;gap:1rem;text-align:left}.sound-toggle>.icon{width:1.8rem;height:1.8rem}.sound-toggle .toggle{flex-shrink:0}.view-controls [aria-pressed=true],#sound[aria-pressed=true]{background:#fff0e4;color:#c76b3e}#viewport[data-tool=move]{cursor:grab}#viewport[data-tool=move]:active{cursor:grabbing}
.tool-rail{gap:.15rem}.tool-rail .tool{height:3.9rem}
.tool.is-resetting{color:#d35d32;background:#fff0e6}.tool.is-resetting .icon{animation:reset-breathe .8s ease-in-out}
@keyframes reset-breathe{50%{transform:rotate(-150deg) scale(.85)}}
@media(max-width:620px) and (orientation:portrait){.tool-rail{width:calc(100% - 1.5rem);max-width:29rem;gap:.12rem}.tool-rail .tool{flex:1;min-width:0;width:auto;font-size:.59rem}.tool-rail .tool .icon{width:1.45rem;height:1.45rem}}
@media(max-width:620px){.primitive-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.primitive-grid .shape-card{padding:.6rem}.primitive-grid .shape-card svg{width:4.5rem;height:4.5rem}}
@media(max-width:620px) and (orientation:portrait){.view-controls{display:grid;grid-template-columns:repeat(2,2.5rem);top:8.4rem;gap:.1rem}.view-controls .icon-button{width:2.5rem;height:2.6rem}.view-controls .mini-divider{display:none}#move-object{order:0}#spin{order:1}#zoom-out{order:2}#zoom-in{order:3}.view-controls .zoom-reset{order:4;display:block;grid-column:1/-1;height:2.3rem}.history{top:8.4rem}.sound-toggle.mirror-button{width:100%;flex-shrink:1}.sound-toggle .toggle{margin-left:auto}.sound-toggle>.icon{display:block}.canvas-top .studio-tag{font-size:.42rem;letter-spacing:.045rem}.gesture-hint{padding:0 .8rem;text-align:center}.starter-grid .shape-card svg{width:6rem;height:6rem}}
@media(orientation:landscape) and (max-height:480px){.view-controls{display:grid;grid-template-columns:repeat(2,2.1rem);gap:.1rem}.view-controls .mini-divider{display:none}#move-object{order:0}#spin{order:1}#zoom-out{order:2}#zoom-in{order:3}.view-controls .zoom-reset{order:4;display:block;grid-column:1/-1;height:2rem;min-width:0}.extra-tool{min-height:6rem;padding:.8rem}.extra-tool small{font-size:.7rem}}
@media(max-width:365px) and (orientation:portrait){.tool-rail .tool{font-size:.53rem}.tool-rail .tool .icon{width:1.3rem;height:1.3rem}}
@media(max-height:660px) and (min-width:621px){.tool-rail .tool{height:3.25rem}}
@media(orientation:landscape) and (max-height:480px) and (min-height:366px){.tool-rail{gap:0;padding:.2rem}.tool-rail .tool{height:2.8rem}.tool-rail .rail-divider{margin:.1rem}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Compact drawers extend from their parent button. Tool selection is one row. */
[hidden]{display:none!important}
.tool-rail{width:5rem;padding:.6rem .35rem;gap:.25rem}
.tool-rail .tool{width:4.15rem;height:3.65rem;min-height:44px;font-size:.66rem;gap:.28rem}
.rail-caption{margin-bottom:.3rem}
.folder-notch{position:absolute;right:.35rem;bottom:.4rem;width:0;height:0;border-style:solid;border-width:0 0 5px 5px;border-color:transparent transparent currentColor transparent;opacity:.45;transition:transform .2s}
.tool[aria-expanded=true]{background:#e9ecdf;box-shadow:inset 0 0 0 1px #cbd3bb}
.tool[aria-expanded=true] .folder-notch{transform:rotate(-90deg)}
#cut-tools{--folder-color:#4d83a9}#finish-tools{--folder-color:#647f45}#paint-tools{--folder-color:#9a6caa}
.tool:not(.active):hover{color:var(--folder-color,#c35f35)}
.current-color{display:block;width:1.8rem;height:1.8rem;border-radius:50%;background:#ed8857;box-shadow:inset -3px -3px 5px #0002,inset 2px 2px 3px #fff7,0 0 0 2px #fff,0 0 0 3px #d7d8cf}
.tool-drawer{position:absolute;z-index:9;width:max-content;max-width:calc(100% - 20px);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#c9cebe transparent;padding:6px;border-radius:17px;background:#fffefb;box-shadow:0 5px 15px #34402b18,0 2px 0 #d3d6c5;transform-origin:left center;animation:drawer-pull .22s cubic-bezier(.2,.8,.3,1)}
.tool-drawer[data-direction=up]{transform-origin:center bottom;animation-name:drawer-pull-up}
.tool-drawer[data-direction=down]{transform-origin:center top;animation-name:drawer-pull-down}
@keyframes drawer-pull{from{opacity:.2;clip-path:inset(0 100% 0 0 round 17px);transform:translateX(-8px)}to{opacity:1;clip-path:inset(0 0 0 0 round 17px);transform:none}}
@keyframes drawer-pull-up{from{opacity:.2;clip-path:inset(100% 0 0 0 round 17px);transform:translateY(8px)}to{opacity:1;clip-path:inset(0 0 0 0 round 17px);transform:none}}
@keyframes drawer-pull-down{from{opacity:.2;clip-path:inset(0 0 100% 0 round 17px);transform:translateY(-8px)}to{opacity:1;clip-path:inset(0 0 0 0 round 17px);transform:none}}
#tool-drawer .folder-choices,#tool-drawer .shape-grid{display:flex;align-items:center;gap:4px;flex-wrap:nowrap}
#tool-drawer .folder-choice,#tool-drawer .shape-card{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:0 0 56px;gap:5px;width:56px;min-width:44px;min-height:58px;padding:6px 3px;border:1px solid transparent;border-radius:11px;background:transparent;box-shadow:none;font-size:10px;line-height:1.2;font-weight:650;text-align:center;white-space:nowrap;color:#68745a}
#tool-drawer .folder-choice .icon{width:24px;height:24px}
#tool-drawer .shape-card svg{width:29px;height:29px}
#tool-drawer .folder-choice:hover,#tool-drawer .shape-card:hover{background:#edf1e4;transform:translateY(-1px)}
#tool-drawer .folder-choice[aria-pressed=true],#tool-drawer .shape-card[aria-pressed=true]{background:#fff0e3;border-color:#eebc9b;color:#b4542b;box-shadow:0 1px 0 #e6c0a2}
#tool-drawer .drawer-swatches{display:flex;align-items:center;gap:9px;padding:7px 5px;flex-wrap:nowrap}
#tool-drawer .swatch,#tool-drawer .custom-color{flex:0 0 44px;width:44px;height:44px}
#tool-drawer:not(.selection-strip){width:284px;padding:8px 12px}
.setting-row{display:flex;align-items:center;gap:9px;min-height:42px;font-size:11px}
.setting-row label{min-width:40px;font-weight:650;color:#69765c}
.setting-row output{min-width:37px;text-align:right;font-size:10px;color:#7f8b73}
#tool-drawer input[type=range]{flex:1;min-width:0;width:0;height:40px;margin:0;touch-action:none}
.sound-volume{border-top:1px solid #e6e8dd;margin-top:5px;padding-top:4px}
.bottom-dock{bottom:4.6rem;gap:.5rem;width:auto}
.dock-tool,.new-clay{min-height:44px;height:44px;gap:.5rem;font-size:.75rem;padding:0 .9rem;width:auto;border-radius:1rem;background:#fffefbec}
.dock-tool .icon,.new-clay .icon{width:1.3rem;height:1.3rem}.new-clay span{display:inline}
#mirror[aria-pressed=true]{background:#fff0e3;border-color:#eebc9b;box-shadow:0 2px 0 #e6c0a2;color:#b4542b}
#size-button[aria-expanded=true]{background:#e9ecdf;border-color:#cbd3bb}
.gesture-hint{bottom:1.2rem}
.view-controls .icon-button,.view-controls .zoom-reset,.history .icon-button{min-width:44px;min-height:44px}
@media(max-width:620px) and (orientation:portrait){
  #app .tool-rail{top:auto;left:50%;bottom:1rem;transform:translateX(-50%);flex-direction:row;flex-wrap:nowrap;width:calc(100% - 1.2rem);max-width:29rem;padding:.35rem;gap:.1rem}
  #app .tool-rail .tool{flex:1;min-width:0;width:auto;height:50px;min-height:48px;font-size:.6rem;gap:4px}
  #app .tool-rail .tool .icon{width:21px;height:21px}
  .rail-caption{display:none}.folder-notch{bottom:.22rem;right:.2rem;border-width:0 0 4px 4px}
  .current-color{width:23px;height:23px}.tool.active:before{display:none}
  #app .bottom-dock{left:50%;bottom:6.1rem;width:auto;gap:6px;transform:translateX(-50%)}
  .dock-tool,.new-clay{font-size:10px;padding:0 11px;min-width:44px}
  #app .history{top:4.3rem;left:.65rem;bottom:auto;display:flex;flex-direction:column;padding:2px}
  #app .view-controls{right:.65rem;top:4.3rem;bottom:auto;display:grid;grid-template-columns:44px;padding:2px;gap:0}
  .view-controls .zoom-reset{display:block;grid-column:auto;min-width:44px;font-size:9px;height:32px;min-height:32px}
  .view-controls .mini-divider{display:none}.history .icon-button,.view-controls .icon-button{width:44px;height:44px}
  .gesture-hint{display:none}
}
@media(orientation:landscape) and (max-height:660px){
  #app .tool-rail{left:.7rem;top:50%;bottom:auto;transform:translateY(-50%);flex-direction:row;flex-wrap:wrap;justify-content:center;width:108px;padding:5px;gap:2px}
  #app .tool-rail .tool{height:48px;width:46px;font-size:9px;gap:3px;flex:none}
  #app .tool-rail .tool .icon{width:21px;height:21px}.tool.active:before,.rail-caption{display:none}
  .canvas-top{left:130px}.canvas-intro{display:none}
  #app .bottom-dock{left:130px;bottom:12px;transform:none;gap:6px;width:auto}
  .dock-tool,.new-clay{padding:0 10px;font-size:10px}
  #app .history{left:130px;top:56px;bottom:auto;flex-direction:row;padding:2px}
  #app .view-controls{right:10px;top:auto;bottom:12px;display:flex;flex-direction:row;padding:2px;gap:0}
  .view-controls .zoom-reset{display:block;min-width:44px}.view-controls .mini-divider{display:none}
  .gesture-hint{display:none}.current-color{width:23px;height:23px}
}
@media(orientation:landscape) and (max-height:480px){
  .canvas-top .studio-tag{display:none}.canvas-top{justify-content:flex-end}
  #app .view-controls{display:grid;grid-template-columns:44px 44px}.view-controls .zoom-reset{grid-column:1/-1;min-height:30px;height:30px}
  #app .history{top:12px}
}
@media(prefers-reduced-motion:reduce){.tool-drawer,.folder-notch{animation:none;transition:none}}