:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--bg:#f4f5f7;--panel:#fff;--ink:#14171f;--muted:#667085;--line:#d8dde6;--accent:#26d;--accent-dark:#174fb2}*{box-sizing:border-box}html,body{width:100%;height:100%}body{touch-action:manipulation;background:var(--bg);color:var(--ink);margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;overflow:clip auto}button,input{font:inherit}.app-shell{box-sizing:border-box;grid-template-rows:auto minmax(55vh,1fr);grid-template-columns:minmax(0,1fr);gap:12px;width:100%;max-width:100%;height:auto;min-height:100dvh;padding:12px;display:grid}body.is-file-source{overflow:hidden}body.is-file-source .app-shell{grid-template-rows:minmax(0,auto) minmax(0,1fr);height:100dvh;min-height:0}body.is-file-source .controls{max-height:45dvh;overflow:clip auto}.controls{border:1px solid var(--line);background:var(--panel);border-radius:8px;flex-direction:column;gap:14px;width:100%;min-width:0;max-width:100%;padding:14px;display:flex;overflow-x:clip}.tabs{background:#eef1f6;border-radius:8px;grid-template-columns:1fr 1fr;gap:4px;padding:4px;display:grid}.tab{min-height:36px;color:var(--muted);cursor:pointer;background:0 0;border:0;border-radius:6px}.tab.is-active{color:var(--ink);background:#fff;box-shadow:0 1px 3px #1018281f}.panel{flex-direction:column;gap:10px;min-width:0;max-width:100%;display:flex}.file-picker{min-width:0;max-width:100%;color:var(--muted);flex-direction:column;gap:8px;font-size:14px;display:flex;position:relative}.texture-picker-row{flex-direction:column;gap:10px;min-width:0;max-width:100%;display:flex}.texture-file-input{clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;opacity:0;border:0;width:1px;height:1px;margin:0;padding:0;position:fixed;top:0;left:-10000px;overflow:hidden}.texture-picker-card{border:1px solid var(--line);background:#fff;border-radius:8px;width:100%;min-width:0;min-height:50px;display:flex;overflow:hidden}.texture-picker-preview{text-align:left;flex:1;align-items:center;gap:8px;min-width:0;padding:5px;display:flex}.texture-picker-actions{border-left:1px solid var(--line);flex-direction:column;flex:0 0 36px;width:36px;display:flex}.texture-picker-action{min-width:0;min-height:0;color:var(--muted);cursor:pointer;background:#fff;border:0;flex:1;place-items:center;padding:0;display:grid}.texture-picker-action--paste{border-bottom:1px solid var(--line);justify-content:center;align-items:center;gap:4px;display:flex}.texture-picker-action--corner-tr{border-top-right-radius:7px}.texture-picker-action--corner-br{border-bottom-right-radius:7px;flex:1}.texture-picker-action:hover,.texture-picker-action:focus-visible{color:var(--ink);background:#eef1f6;outline:none}.texture-picker-preview span{min-width:0;color:var(--muted);overflow-wrap:anywhere;font-size:12px;line-height:1.2}.texture-picker-preview img{object-fit:cover;border-radius:6px;flex:none;width:38px;height:38px;display:block}.file-picker:focus-within .texture-picker-card{border-color:var(--accent);box-shadow:0 0 0 3px #2266dd1f}.draw-tools{grid-template-columns:minmax(0,96px) minmax(0,1fr) auto;align-items:end;gap:10px;min-width:0;max-width:100%;display:grid}.draw-tool-group{align-items:flex-end;gap:8px;min-height:44px;display:flex}.draw-tool-color-input{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.draw-tool-btn{cursor:pointer;background:0 0;border:0;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:44px;height:44px;padding:0;display:flex}.draw-tool-btn.is-active{box-shadow:0 0 0 2px var(--accent), 0 0 0 4px #2266dd38;background:#2266dd1a}.draw-tool-brush{pointer-events:none;background:conic-gradient(from 90deg,#ff2d2d,#ffb400,#faff00,#2dff6a,#2dccff,#6b5bff,#ff2dff,#ff2d2d);border-radius:50%;flex-shrink:0;width:44px;height:44px;padding:3px;display:flex}.draw-tool-brush-well{background:var(--panel);border-radius:50%;justify-content:center;align-items:center;width:100%;height:100%;display:flex}.draw-tool-brush-inner{pointer-events:none;border-radius:50%}.draw-tool-eraser{border:2px dashed var(--muted);pointer-events:none;border-radius:50%;flex-shrink:0;display:block}.draw-tools label,.size-row label{min-width:0;color:var(--muted);flex-direction:column;gap:6px;font-size:13px;display:flex}.source-canvas-wrap{position:relative}.source-canvas-wrap canvas{aspect-ratio:1;border:1px solid var(--line);touch-action:none;background-color:#0000;background-image:linear-gradient(45deg,#eef1f6 25%,#0000 25%),linear-gradient(-45deg,#eef1f6 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#eef1f6 75%),linear-gradient(-45deg,#0000 75%,#eef1f6 75%);background-position:0 0,0 8px,8px -8px,-8px 0;background-repeat:repeat,repeat,repeat,repeat;background-size:16px 16px;background-attachment:scroll,scroll,scroll,scroll;background-origin:padding-box,padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box,border-box;border-radius:8px;width:100%;display:block}.hex-guide{pointer-events:none;width:100%;height:100%;position:absolute;inset:0;overflow:visible}.hex-guide polygon{fill:none;stroke:#7b8494;stroke-width:1.5px;stroke-dasharray:3 3;vector-effect:non-scaling-stroke}.hex-guide-notch{stroke:#7b8494;stroke-linecap:round;stroke-width:1.25px;vector-effect:non-scaling-stroke}.option-row{justify-content:space-between;align-items:center;gap:12px;display:flex}.check{color:var(--muted);align-items:center;gap:8px;font-size:14px;display:flex}.size-row{justify-content:space-between;align-items:end;gap:12px;display:flex}output{color:var(--muted);white-space:nowrap;font-size:13px}input[type=range]{width:100%}.primary,.ghost{cursor:pointer;border-radius:8px;min-height:36px}.primary{color:var(--accent);background:#2266dd1a;border:1px solid #2266dd3d;font-weight:600}.primary:hover{background:#2266dd29;border-color:#2266dd57}.ghost{border:1px solid var(--line);color:var(--ink);background:#fff;padding:0 12px}.mosaic-wrap{border:1px solid var(--line);touch-action:none;background:#fff;border-radius:8px;width:100%;min-width:0;max-width:100%;min-height:0;position:relative;overflow:hidden}.mosaic-wrap.is-perspective,.mosaic-wrap.is-zoomed{cursor:grab}.mosaic-wrap.is-zoomed:active{cursor:grabbing}.mosaic-wrap.is-over-tile{cursor:pointer}.mosaic-wrap canvas{width:100%;height:100%;display:block}.view-toggle{z-index:3;width:48px;height:48px;color:var(--ink);cursor:pointer;background:#ffffffe0;border:none;border-radius:8px;place-items:center;display:grid;position:absolute;bottom:14px;right:14px;box-shadow:0 8px 24px #10182829}.view-toggle:hover,.view-toggle:focus-visible{background:#fff;border-color:#2266dd57}.view-toggle.is-active{color:var(--accent-dark);border-color:#2266dd6b}.perspective-slider{z-index:3;--rail-top:9px;--rail-bottom:9px;--thumb-size:26px;--slider-travel:90px;width:34px;height:108px;position:absolute;bottom:76px;right:17px}.perspective-slider input{z-index:2;appearance:none;cursor:pointer;opacity:0;transform-origin:50%;background:0 0;width:104px;height:38px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)rotate(-90deg)}.perspective-slider-rail{top:var(--rail-top);bottom:var(--rail-bottom);background:#ffffffe0;border:2px solid #14171fad;border-radius:999px;width:10px;position:absolute;left:50%;transform:translate(-50%);box-shadow:0 6px 18px #10182824}.perspective-slider-thumb{left:50%;bottom:calc(var(--rail-bottom) + var(--slider-travel) * var(--perspective-progress));z-index:1;width:var(--thumb-size);height:var(--thumb-size);background:#fffffff0;border:2px solid #14171fad;border-radius:50%;position:absolute;transform:translate(-50%,50%);box-shadow:0 6px 18px #1018282e}.perspective-slider-thumb:after{content:"";border:2px solid #14171f6b;border-radius:50%;position:absolute;inset:7px}.view-toggle-icon{letter-spacing:0;border:2px solid;border-radius:5px;place-items:center;width:30px;height:24px;font-size:11px;font-weight:800;line-height:1;display:grid;transform:skew(-12deg)rotate(-6deg)}.view-toggle-icon.is-perspective{transform:none}@media (min-width:761px){body{overflow:hidden}.app-shell{grid-template-rows:none;grid-template-columns:min(486px,100vw - 24px) minmax(0,1fr);height:100dvh;min-height:0}body.is-file-source .app-shell{grid-template-rows:none}.controls{overflow:clip auto}body.is-file-source .controls{max-height:none}}@media (max-width:760px){.texture-picker-row{grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.draw-tools{grid-template-columns:minmax(0,96px) minmax(0,1fr)}.draw-tools .ghost{grid-column:1/-1}.view-toggle-icon{width:24px;height:18px}.perspective-slider{--thumb-size:22px;--slider-travel:78px;width:30px;height:96px;bottom:72px}}body.is-tutorial{width:100%;position:fixed;overflow:hidden}.tutorial-overlay{z-index:2147483000;pointer-events:none;position:fixed;inset:0}.tutorial-spotlight-svg{pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.tutorial-spotlight-svg--animated .tutorial-spotlight-hole{transition:x .45s cubic-bezier(.22,1,.36,1),y .45s cubic-bezier(.22,1,.36,1),width .45s cubic-bezier(.22,1,.36,1),height .45s cubic-bezier(.22,1,.36,1),rx .45s cubic-bezier(.22,1,.36,1),ry .45s cubic-bezier(.22,1,.36,1)}.tutorial-card{z-index:2147483001;right:16px;bottom:max(16px, env(safe-area-inset-bottom));border:1px solid var(--line);background:var(--panel);pointer-events:auto;border-radius:12px;padding:16px;transition:top .45s cubic-bezier(.22,1,.36,1),right .45s cubic-bezier(.22,1,.36,1),bottom .45s cubic-bezier(.22,1,.36,1);position:fixed;left:16px;box-shadow:0 16px 40px #10182833}.tutorial-card[data-raised=true]{bottom:auto}@media (min-width:761px){.tutorial-card{border:1px solid var(--line);border-radius:12px;width:min(360px,100vw - 40px);padding-bottom:16px;bottom:20px;left:auto;right:20px;box-shadow:0 16px 40px #10182833}.tutorial-card[data-raised=true]{width:min(360px,100vw - 40px);left:auto;right:20px}}.tutorial-step-label{color:var(--muted);letter-spacing:.04em;text-transform:uppercase;margin:0 0 6px;font-size:12px;font-weight:600}.tutorial-title{margin:0 0 8px;font-size:18px;font-weight:600}.tutorial-body{color:var(--muted);margin:0 0 14px;font-size:14px;line-height:1.45}.tutorial-actions{justify-content:space-between;align-items:center;gap:10px;display:flex}.tutorial-skip{color:var(--muted);cursor:pointer;background:0 0;border:0;font-size:13px}.tutorial-skip:hover,.tutorial-skip:focus-visible{color:var(--ink);outline:none}.tutorial-nav{gap:8px;display:flex}.tutorial-back,.tutorial-next{min-height:36px;padding-inline:14px}