:root{--panel:#121418c7;--panel-solid:#16181c;--stroke:#ffffff12;--text:#ecedef;--text-dim:#ecedef73;--accent:#e87d1e;--danger:#e0524d;font-family:-apple-system,SF Pro Text,Inter,Segoe UI,system-ui,sans-serif}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;color:var(--text);background:#17191d;overflow:hidden}#viewport{position:fixed;inset:0}#viewport canvas{display:block}#topbar,#palette,#settings,#rotate-pill,#help-card{background:var(--panel);border:1px solid var(--stroke);-webkit-backdrop-filter:blur(18px)saturate(1.3);box-shadow:0 8px 30px #00000059}#topbar{z-index:10;border-radius:14px;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;width:max-content;max-width:calc(100vw - 24px);padding:6px 8px;display:flex;position:fixed;top:14px;left:50%;transform:translate(-50%)}.logo{background:var(--accent);color:#fff;letter-spacing:.5px;border-radius:8px;margin-right:2px;padding:5px 8px;font-size:11px;font-weight:800}.seg{background:#ffffff0a;border-radius:10px;align-items:center;gap:2px;padding:2px;display:flex}button{color:var(--text-dim);cursor:pointer;white-space:nowrap;background:0 0;border:none;border-radius:8px;font-size:12.5px;font-weight:500;transition:background .12s,color .12s,transform 50ms}button:hover{color:var(--text);background:#ffffff14}button:active{transform:scale(.94)}.icon-btn{flex:none;justify-content:center;align-items:center;width:32px;height:32px;display:inline-flex}.icon-btn svg{fill:none;stroke:currentColor;stroke-width:1.5px;stroke-linecap:round;stroke-linejoin:round;width:16px;height:16px}.icon-btn svg .dot{fill:currentColor;stroke:none}.icon-btn.active,.tool.active{background:var(--accent);color:#fff}.icon-btn.accent{color:var(--accent)}.icon-btn.accent:hover{background:var(--accent);color:#fff}.icon-btn.danger:hover{background:var(--danger);color:#fff}#btn-export{background:var(--accent);color:#fff;border-radius:10px;padding:8px 14px;font-weight:600}#btn-export:hover{background:#f79036}select,input[type=text]{color:var(--text);background:0 0;border:none;border-radius:8px;outline:none;padding:7px 6px;font-size:12px}select:hover,input[type=text]:hover{background:#ffffff14}select option{background:var(--panel-solid)}input[type=text]{text-align:center;width:64px;color:var(--text-dim)}input[type=text]:focus{color:var(--text)}#palette{z-index:10;scrollbar-width:none;border-radius:16px;max-height:calc(100vh - 120px);padding:8px;position:fixed;top:50%;left:14px;overflow-y:auto;transform:translateY(-50%)}#palette::-webkit-scrollbar{display:none}#palette-grid{grid-template-columns:64px 64px;gap:4px;display:grid}.palette-label{letter-spacing:1.1px;text-transform:uppercase;color:var(--text-dim);grid-column:1/-1;padding:8px 4px 1px;font-size:8.5px;font-weight:600}.palette-label:first-child{padding-top:2px}.piece-btn{color:var(--text-dim);border-radius:10px;flex-direction:column;align-items:center;gap:2px;padding:9px 2px 7px;font-size:9.5px;font-weight:500;display:flex}.piece-btn img{object-fit:contain;filter:saturate(.15)brightness(1.05);pointer-events:none;width:46px;height:40px;transition:filter .12s,transform .12s}.piece-btn:hover{color:var(--text)}.piece-btn:hover img{filter:none;transform:scale(1.06)}.piece-btn.active{color:var(--accent);background:#e87d1e2e}.piece-btn.active img{filter:none}#settings{z-index:10;border-radius:16px;flex-direction:column;gap:8px;width:138px;padding:14px 12px;display:flex;position:fixed;top:50%;right:14px;transform:translateY(-50%)}.label{text-transform:uppercase;letter-spacing:1.2px;color:var(--text-dim);font-size:10px;font-weight:600}.label:not(:first-child){margin-top:6px}.swatch-row{flex-wrap:wrap;gap:6px;display:flex}.swatch{cursor:pointer;border:2px solid #0000;border-radius:6px;outline:1px solid #ffffff1f;width:22px;height:22px;padding:0;transition:transform .1s}.swatch:hover{transform:scale(1.12)}.swatch.active{border-color:#16181c;outline:2px solid #fff}input[type=color]{appearance:none;cursor:pointer;background:0 0;border:none;border-radius:6px;width:100%;height:22px;padding:0}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:1px solid #ffffff26;border-radius:6px}.size-row{gap:4px;margin-top:2px;display:flex}.size-btn{background:#ffffff0d;flex:1;padding:5px 0;font-size:11px;font-weight:600}.size-btn.active{background:var(--accent);color:#fff}.check-row{color:var(--text-dim);cursor:pointer;align-items:center;gap:7px;margin-top:6px;font-size:11px;display:flex}.check-row input{accent-color:var(--accent)}.stats{color:var(--text-dim);border-top:1px solid var(--stroke);margin-top:4px;padding-top:9px;font-size:10.5px}#rotate-pill{z-index:10;border-radius:12px;align-items:center;gap:2px;width:max-content;padding:4px;display:flex;position:fixed;bottom:18px;left:50%;transform:translate(-50%)}#rot-angle{font-variant-numeric:tabular-nums;color:var(--text-dim);text-align:center;min-width:38px;font-size:11.5px}#btn-help{background:var(--panel);border:1px solid var(--stroke);width:30px;height:30px;color:var(--text-dim);z-index:10;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-radius:50%;font-size:13px;font-weight:600;position:fixed;bottom:16px;right:16px}#btn-help:hover,#btn-help.active{color:var(--text);background:#ffffff1a}#help-card{z-index:10;color:var(--text-dim);border-radius:14px;padding:14px 16px;font-size:11.5px;line-height:2.1;position:fixed;bottom:56px;right:16px}#help-card kbd{border:1px solid var(--stroke);color:var(--text);background:#ffffff17;border-radius:5px;padding:1px 6px;font-family:inherit;font-size:10.5px}#tooltip{z-index:40;border:1px solid var(--stroke);color:var(--text);pointer-events:none;opacity:0;background:#23262c;border-radius:7px;max-width:230px;padding:5px 10px;font-size:11px;font-weight:500;line-height:1.35;transition:opacity .12s,transform .12s;position:fixed;transform:translateY(-2px);box-shadow:0 4px 16px #00000073}#tooltip.visible{opacity:1;transform:none}.toast{background:var(--panel);border:1px solid var(--stroke);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);width:max-content;color:var(--text);z-index:20;pointer-events:none;border-radius:10px;padding:9px 18px;font-size:12.5px;font-weight:500;animation:.2s toast-in,.3s 2.2s forwards toast-out;position:fixed;top:74px;left:50%;transform:translate(-50%)}@keyframes toast-in{0%{opacity:0;transform:translate(-50%,-6px)}}@keyframes toast-out{to{opacity:0;transform:translate(-50%,-6px)}}