:root{--paper:#f6f4ef;--ink:#3b3834;--ink-soft:#7a756d;--line:#e2ded6;--line-strong:#cfc9bf;--paint-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .3 0 0 0 0 .27 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");--paint-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cfilter id='r' x='-10%25' y='-10%25' width='120%25' height='120%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.09' numOctaves='3' seed='4'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='6'/%3E%3C/filter%3E%3Ccircle cx='50' cy='50' r='45' fill='%23000' filter='url(%23r)'/%3E%3C/svg%3E");--paper-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .3 0 0 0 0 .27 0 0 0 .08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");--page:#faf8f4;--paper-mottle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='520'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .02' numOctaves='4' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .4 0 0 0 0 .33 0 0 0 .1 -.02'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E");--dab-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cfilter id='d' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.05 .09' numOctaves='3' seed='11'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='13'/%3E%3C/filter%3E%3Cellipse cx='50' cy='50' rx='43' ry='40' transform='rotate(-14 50 50)' fill='%23000' filter='url(%23d)'/%3E%3C/svg%3E");--dab-streak:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.035 .7' numOctaves='2' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1.3 0 0 0 -.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");--tile:#eeebe6;--tile-hover:#e7e3dd;--card:#fffdf9;--radius:12px;--panel-w:400px;--ui:"Gaegu", system-ui, -apple-system, sans-serif;--hand:"Patrick Hand", "Comic Sans MS", cursive}*{box-sizing:border-box}html{background:var(--paper-grain), var(--paper-mottle), var(--page)}html,body{color:var(--ink);font-family:var(--ui);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;margin:0}button{font:inherit;color:inherit}svg path,svg rect,svg circle,svg ellipse,svg line,svg polyline{fill:none;stroke:currentColor;stroke-width:1.8px;stroke-linecap:round;stroke-linejoin:round}.app{grid-template-columns:1fr var(--panel-w);min-height:100dvh;display:grid}.stage{min-width:0;padding:24px 0 24px 24px}.canvas-wrap{touch-action:none;cursor:grab;width:100%;height:calc(100dvh - 48px)}.canvas-wrap:active{cursor:grabbing}#scene{-webkit-user-select:none;user-select:none;width:100%;height:100%;display:block}.panel{--inset:calc(.045 * min(100vw - var(--panel-w) - 24px, 100dvh - 48px));height:100dvh;padding:calc(24px + var(--inset) + 12px) 24px;flex-direction:column;align-items:center;display:flex;position:sticky;top:0;overflow-y:auto}.title{letter-spacing:-.2px;margin:0;font-size:28px;font-weight:400;line-height:1.2}.groups{flex-direction:column;gap:20px;margin:0 0 40px;display:flex}.group-label{letter-spacing:.6px;text-transform:uppercase;color:var(--ink);align-items:center;gap:8px;margin:0 0 8px;font-size:14px;font-weight:500;display:flex}.group-options{grid-template-columns:repeat(3,44px);gap:8px;display:grid}.opt{cursor:pointer;width:44px;height:44px;color:var(--ink);background:0 0;border:0;border-radius:50%;place-items:center;padding:0;transition:transform .2s cubic-bezier(.3,1.6,.5,1);display:grid;position:relative}.opt:before{content:"";background:var(--paint-grain), var(--tile);-webkit-mask:var(--paint-mask) center / 100% 100% no-repeat;-webkit-mask:var(--paint-mask) center / 100% 100% no-repeat;mask:var(--paint-mask) center / 100% 100% no-repeat;opacity:0;transition:opacity .18s,transform .25s cubic-bezier(.3,1.5,.5,1);position:absolute;inset:0;transform:scale(.86)}.opt>*{position:relative}.opt svg{width:28px;height:28px}button svg>*{filter:url(#pencil)}button svg[viewBox="0 0 24 24"]>*{filter:url(#pencil-sm)}.opt[aria-pressed=true]:before{opacity:1;transform:scale(1)}.opt:active{transform:scale(.93)}.opt:focus-visible{outline:2px solid var(--ink);outline-offset:2px}.opt.placeholder{cursor:default;opacity:.6}.opt.placeholder:before{opacity:.7;transform:scale(1)}.opt svg [style*="opacity:.35"],.opt svg [style*="opacity:.5"],.tile-face svg [style*="opacity:.35"],.tile-face svg [style*="opacity:.5"]{opacity:1!important}.opt[data-tip]{position:relative}@media (hover:hover){.opt[data-tip]:after{content:attr(data-tip);z-index:5;background:var(--ink);color:var(--paper);white-space:nowrap;pointer-events:none;opacity:0;border-radius:6px;padding:3px 7px;font-size:13px;line-height:1.3;transition:opacity .15s,transform .15s;position:absolute;bottom:calc(100% + 6px);left:50%;transform:translate(-50%,3px)}.opt[data-tip]:hover:after{opacity:1;transition-delay:.2s;transform:translate(-50%)}}.opt.placeholder:active{transform:none}.swatch-dot{width:26px;height:26px;-webkit-mask:var(--dab-mask) center / 100% 100% no-repeat;-webkit-mask:var(--dab-mask) center / 100% 100% no-repeat;mask:var(--dab-mask) center / 100% 100% no-repeat;position:relative}.swatch-dot:before,.swatch-dot:after{content:"";pointer-events:none;position:absolute;inset:0}.swatch-dot:before{background:radial-gradient(55% 40% at 34% 30%,#ffffff80,#fff0 70%),radial-gradient(circle,#0000 52%,#3c2d2824 100%)}.swatch-dot:after{background:var(--dab-streak) center / 30px 30px, var(--paint-grain);opacity:.55;transform:rotate(-14deg)scale(1.3)}.actions{flex-direction:column;gap:8px;width:148px;margin-bottom:auto;display:flex}.pill{cursor:pointer;background:0 0;border:0;border-radius:999px;justify-content:center;align-items:center;gap:5px;height:32px;padding:0 12px;font-size:15px;display:inline-flex;position:relative}.pill:before{content:"";border:1.5px solid var(--line-strong);border-radius:inherit;filter:url(#pencil-line);pointer-events:none;transition:border-color .2s;position:absolute;inset:0}.pill svg{width:14px;height:14px}.pill:hover:before{border-color:#bfb8ad}.pill:active{transform:translateY(1px)}.credit{color:var(--ink-soft);align-items:center;gap:5px;margin:32px 0 0;font-size:16px;font-weight:400;display:inline-flex}.credit a{color:inherit;text-decoration:none;transition:color .2s}.credit a:hover{color:var(--ink)}.visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;margin:-1px;overflow:hidden;position:absolute!important}.tiles,.tray,.backdrop{display:none}@media (width<=760px),(orientation:portrait) and (width<=1100px){.app{flex-direction:column;align-items:center;display:flex}.panel{display:contents}.title{order:0;margin:28px 0 0;font-size:26px}.stage{flex:1;order:1;place-items:center;width:100%;padding:16px;display:grid}.canvas-wrap{aspect-ratio:1;width:max(min(100vw - 32px,100dvh - 330px),240px);height:auto}.groups{display:none}.tiles{order:2;gap:20px;margin-top:8px;display:flex}.tile{cursor:pointer;letter-spacing:.6px;text-transform:uppercase;background:0 0;border:0;flex-direction:column;align-items:center;gap:8px;padding:0;font-size:14px;font-weight:500;display:flex}.tile-face{width:60px;height:60px;color:var(--ink);background:0 0;border-radius:50%;place-items:center;transition:transform .2s cubic-bezier(.3,1.6,.5,1);display:grid;position:relative}.tile-face:before{content:"";background:var(--paint-grain), var(--tile);-webkit-mask:var(--paint-mask) center / 100% 100% no-repeat;-webkit-mask:var(--paint-mask) center / 100% 100% no-repeat;mask:var(--paint-mask) center / 100% 100% no-repeat;transition:background-color .18s;position:absolute;inset:0}.tile-face>*{position:relative}.tile-face svg{width:34px;height:34px}.tile:active .tile-face{transform:scale(.94)}.tile[aria-expanded=true] .tile-face:before{background:var(--paint-grain), #e4dfd6}.actions{flex-direction:row;order:3;width:auto;margin:28px 0 0}.credit{margin:28px 0 calc(20px + env(safe-area-inset-bottom));order:4}.tray{z-index:20;padding:10px 20px calc(24px + env(safe-area-inset-bottom));background:var(--paper-grain), var(--paper-mottle), var(--card);border-radius:22px 22px 0 0;animation:.28s cubic-bezier(.2,1,.3,1) sheet-in;display:block;position:fixed;bottom:0;left:0;right:0;box-shadow:0 -12px 40px -12px #3c322840}.tray[hidden]{display:none}.tray:before{content:"";background:var(--line-strong);filter:url(#pencil-line);border-radius:2px;width:40px;height:4px;margin:0 auto 12px;display:block}.tray:after{content:"";border-top:1.5px solid var(--line-strong);border-radius:inherit;filter:url(#pencil-line);pointer-events:none;height:30px;position:absolute;top:0;left:0;right:0}@keyframes sheet-in{0%{transform:translateY(100%)}}.tray-head{justify-content:space-between;align-items:center;margin-bottom:14px;display:flex}.tray-title{letter-spacing:.6px;text-transform:uppercase;font-size:15px;font-weight:500}.tray-close{cursor:pointer;color:var(--ink-soft);background:0 0;border:0;border-radius:8px;padding:4px;display:grid}.tray-options{grid-template-columns:repeat(3,1fr);justify-items:center;gap:16px 12px;display:grid}.tray-options .opt{width:68px;height:68px}.tray-options .opt svg{width:38px;height:38px}.tray-options .swatch-dot{width:40px;height:40px}.tray-options .opt-wrap{color:var(--ink-soft);flex-direction:column;align-items:center;gap:6px;font-size:15px;display:flex}.backdrop{z-index:15;background:#28231e1f;display:block;position:fixed;inset:0}.backdrop[hidden]{display:none}}@media (prefers-reduced-motion:reduce){.tray,.opt,.tile-face{transition:none;animation:none}}