@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@500;600;700&display=swap');
.texture-wrap.hidden{display:none}
:root{--ink:#201e2a;--panel:#fbfaf7;--line:#e5e2dd;--lime:#cbff47;--purple:#7159f4;--muted:#85828d}*{box-sizing:border-box}body{margin:0;background:#f1f0ed;color:var(--ink);font-family:'Space Grotesk',sans-serif}.topbar{height:72px;background:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 28px;border-bottom:1px solid var(--line)}.brand{display:flex;gap:10px;align-items:center;color:var(--ink);font-weight:700;text-decoration:none;letter-spacing:-1px;font-size:21px}.brand>span:last-child span{color:var(--purple)}.cube{color:var(--purple);font-size:27px;transform:rotate(45deg)}button,.file-button{font:600 13px 'Space Grotesk',sans-serif;cursor:pointer;border:0}.top-actions{display:flex;gap:10px;align-items:center}.ghost{background:#fff;border:1px solid var(--line);padding:11px 15px;border-radius:8px;color:var(--ink)}.file-button input{display:none}.download{background:var(--ink);color:white;padding:12px 17px;border-radius:8px}.workspace{height:calc(100vh - 72px);min-height:620px;display:grid;grid-template-columns:224px minmax(420px,1fr) 280px}.tools-panel,.color-panel{background:var(--panel);padding:25px 20px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:27px}.color-panel{border-right:0;border-left:1px solid var(--line);gap:24px}.eyebrow{font:500 10px 'DM Mono',monospace;color:#85818c;letter-spacing:1px;margin:0 0 13px}.tool-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.tool{height:72px;border:1px solid var(--line);background:#fff;border-radius:8px;position:relative;text-align:left;padding:10px;color:#615e68}.tool b{display:block;font-size:20px;height:29px;color:var(--ink)}.tool span{font-size:11px}.tool kbd{display:none}.tool.active{border-color:var(--purple);background:#f2efff;color:var(--purple);box-shadow:inset 0 0 0 1px var(--purple)}.tool.active b{color:var(--purple)}.history-actions{display:flex;gap:7px}.history-actions button{width:50%;height:36px;border:1px solid var(--line);background:#fff;border-radius:7px;font-size:20px}.view-buttons{display:grid;grid-template-columns:1fr 1fr;gap:6px}.view-buttons button{padding:8px;background:#fff;border:1px solid var(--line);border-radius:6px;font-size:11px}.view-buttons .selected{background:var(--ink);color:#fff;border-color:var(--ink)}.hint{font:11px 'DM Mono',monospace;line-height:1.5;color:#9a979e;margin:11px 0 0}.layers label{font-size:12px;display:flex;gap:8px;align-items:center}.layers input{accent-color:var(--purple)}.stage{position:relative;min-width:0;background:radial-gradient(circle at 55% 45%,#fff 0,#f5f4f1 48%,#ebeae6 100%);overflow:hidden}.stage-header{position:absolute;z-index:1;top:23px;left:29px;right:29px;display:flex;justify-content:space-between;font:11px 'DM Mono',monospace;color:#88848d}.status-dot{background:var(--lime);height:7px;width:7px;border-radius:50%;display:inline-block;margin-right:5px}.stage-header>span{color:#aaa6ae}#viewer{width:100%;height:100%;cursor:crosshair}.viewer-tip{position:absolute;bottom:23px;left:50%;transform:translateX(-50%);background:#282631;color:white;padding:8px 13px;border-radius:99px;font:10px 'DM Mono',monospace;white-space:nowrap;pointer-events:none}.active-color{display:flex;align-items:center;gap:12px}.active-color input{padding:0;width:48px;height:48px;border:2px solid white;border-radius:9px;box-shadow:0 0 0 1px var(--line);cursor:pointer;background:none}.active-color strong{font:500 13px 'DM Mono',monospace;display:block}.active-color span{font:10px 'DM Mono',monospace;color:#99949e;margin-top:5px;display:block}.swatches{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}.swatch{aspect-ratio:1;border-radius:6px;border:2px solid white;box-shadow:0 0 0 1px #ddd;cursor:pointer}.texture-title{display:flex;justify-content:space-between;align-items:start}.texture-title button{font-size:18px;background:none;color:#888}.texture-wrap{padding:8px;background:#e8e5df;border-radius:8px;position:relative}.texture-wrap canvas{width:100%;display:block;image-rendering:pixelated;background:repeating-conic-gradient(#ddd 0 25%,#eee 0 50%) 50%/8px 8px}.texture-labels{display:flex;justify-content:space-between;margin-top:5px;font:9px 'DM Mono',monospace;color:#888}footer{margin-top:auto;font:9px 'DM Mono',monospace;line-height:1.5;color:#aaa5ad;border-top:1px solid var(--line);padding-top:17px}@media(max-width:850px){.workspace{grid-template-columns:185px 1fr}.color-panel{display:none}.topbar{padding:0 16px}.top-actions .ghost{display:none}}@media(max-width:580px){.workspace{grid-template-columns:1fr;min-height:700px}.tools-panel{display:none}.stage{height:calc(100vh - 72px)}.download{padding:10px}.brand{font-size:17px}}