@font-face{font-family:Noah;src:url(/fonts/Noah-Regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Noah;src:url(/fonts/Noah-Bold.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}@font-face{font-family:Noah;src:url(/fonts/Noah-ExtraBold.woff2) format("woff2");font-weight:800;font-style:normal;font-display:swap}:root{font-family:Noah,Segoe UI,sans-serif;color:#000}*{box-sizing:border-box}html,body{margin:0;height:100%}body{display:grid;grid-template-columns:300px 1fr}.panel{padding:28px 24px;background:#fff;border-right:1px solid #ececec;display:flex;flex-direction:column;gap:16px;overflow:auto}h1{margin:0;font-size:1.85rem;font-weight:800;line-height:1.1;letter-spacing:-.02em}p{margin:0;font-size:.95rem;font-weight:400;line-height:1.45}label{display:flex;flex-direction:column;gap:4px;font-size:.82rem;font-weight:700}label.row{flex-direction:row;align-items:center;justify-content:space-between}select,button{font:inherit;padding:6px 8px}button{cursor:pointer}.picker{display:flex;flex-direction:column;gap:4px;font-size:.82rem;font-weight:700}.picker-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.picker-head.is-off{color:#9aa0a6}.color-swatch{width:1.7rem;height:1.25rem;padding:0;border:1px solid #000000;border-radius:0;background:#583927}input[type=color]{position:fixed;left:0;top:0;width:1px;height:1px;opacity:0}.step-btn{width:2.2rem;height:2.2rem;padding:0;border:none;appearance:none;background:transparent url(/icons/brick.svg) center / 1.35rem no-repeat;filter:drop-shadow(0 1px 1px rgb(0 0 0 / .22)) drop-shadow(0 2px 3px rgb(0 0 0 / .16));transition:transform .12s ease}.step-prev{transform:rotate(-90deg)}.step-prev:active{transform:translate(-3px) rotate(-90deg)}.step-next{transform:rotate(90deg)}.step-next:active{transform:translate(3px) rotate(90deg)}.grid-btn{width:2.2rem;height:2.2rem;padding:0;border:none;appearance:none;align-self:center;background:transparent url(/icons/grid.svg) center / 1.15rem no-repeat;filter:drop-shadow(0 1px 1px rgb(0 0 0 / .22)) drop-shadow(0 2px 3px rgb(0 0 0 / .16));transform:rotate(-18deg)}.picker-row{display:grid;grid-template-columns:2.2rem 1fr 2.2rem 2.2rem;gap:6px;align-items:center}.picker-row span{overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap;font-weight:400}.stage{position:relative;min-width:0;height:100%}#viewport{min-width:0;height:100%}.clip-bar{position:absolute;left:50%;bottom:34px;transform:translate(-50%);display:flex;gap:9px}.clip-btn{width:50px;height:50px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:#ffffff80;color:#33383f;cursor:pointer;transition:background .12s ease,color .12s ease}.clip-btn svg{width:26px;height:26px}.clip-btn:hover{background:#ffffffe6}.clip-btn[aria-pressed=true]{background:#33383f;color:#fff}.theme-bar{position:absolute;top:50%;right:34px;z-index:2;display:flex;flex-direction:column;gap:9px;transform:translateY(-50%)}.theme-bar .clip-btn{position:relative;opacity:.35}.theme-bar .clip-btn svg{width:34px;height:34px}.theme-bar #theme-fantasy svg{transform:rotate(-45deg)}.theme-bar .clip-btn:after{content:"";position:absolute;left:12px;right:12px;top:50%;height:2px;background:currentColor;transform:rotate(-28deg)}.theme-bar .clip-btn[aria-pressed=true]{opacity:1;background:#ffffff80;color:#33383f}.theme-bar .clip-btn[aria-pressed=true]:after{content:none}.wheel-btn{position:absolute;right:34px;bottom:34px;z-index:2}.wheel-btn:disabled{cursor:pointer}.wheel{width:29px;height:29px;border-radius:50%;background:conic-gradient(#e0533f 0turn .125turn,#f2b134 .125turn .25turn,#4f9d69 .25turn .375turn,#3d7ea6 .375turn .5turn,#7a5ea6 .5turn .625turn,#e0533f .625turn .75turn,#f2b134 .75turn .875turn,#4f9d69 .875turn 1turn);box-shadow:inset 0 0 0 2px #ffffffe6;transition:transform 1s cubic-bezier(.2,.85,.2,1)}.wheel-pin{position:absolute;top:4px;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:6px solid #33383f}#viewport canvas{display:block;width:100%;height:100%}.part-grid[open]{inset:0 16px 0 316px;width:min(960px,100%);height:min(840px,calc(100vh - 24px));max-width:none;max-height:none;margin:auto;border:none;border-radius:8px;padding:0;background:#fff;color:inherit;display:flex;flex-direction:column}.part-grid::backdrop{background:#1b2a348c}.part-grid-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px}.part-grid-bar h2{margin:0;font-size:1.35rem;font-weight:800;letter-spacing:-.02em}.part-grid-cells{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:4px;padding:8px 16px 16px;overflow:auto;flex:1}.part-cell{display:block;padding:0;border:none;background:transparent}.part-cell canvas{display:block;width:100%;aspect-ratio:1;height:auto;background:transparent}.color-grid-cells{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:6px;padding:8px 16px 16px;overflow:auto;flex:1}.color-cell{display:flex;flex-direction:column;gap:4px;padding:0;border:none;background:transparent}.color-cell-swatch{display:block;width:100%;aspect-ratio:1;border:1px solid #000000}.color-cell[aria-current=true] .color-cell-swatch{outline:2px solid #000000;outline-offset:2px}.color-cell-more{background:conic-gradient(#e0533f,#f2b134,#4f9d69,#3d7ea6,#7a5ea6,#e0533f)}.color-cell-name{font-size:.62rem;font-weight:700;line-height:1.2;text-align:center}.auth-gate{position:fixed;inset:0;z-index:40;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:36px;background:#fff}.auth-gate[hidden]{display:none}.auth-logo{width:min(400px,72vw)}.auth-logo svg{display:block;width:100%;height:auto}.gsi-button{display:flex;align-items:center;gap:10px;height:40px;padding:0 16px;border:1px solid #747775;border-radius:20px;background:#fff;color:#1f1f1f;font-family:Roboto,Segoe UI,sans-serif;font-size:14px;font-weight:500}.gsi-button svg{width:18px;height:18px}.gsi-button:hover{background:#f8fafd;box-shadow:0 1px 2px #3c40434d}.auth-note{color:#c0392b;font-weight:700}.auth-row{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:.78rem}.auth-row button{border:1px solid #000000;border-radius:0;background:#fff;padding:4px 10px;font-size:.78rem;font-weight:700}
