:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--backdrop:#d8e0e6;--panel:#f7f9fa;--ink:#1c2630;--muted:#5d6b78;--rule:#cbd5dc;--accent:#1d5f8a;--accent-ink:#fff;--btn:#fff;--btn-hover:#eaf0f4;--danger:#b3372b;--shadow:0 1px 2px #141e281f;--scrollbar-thumb:color-mix(in srgb,var(--muted) 45%,transparent);--scrollbar-thumb-hover:var(--muted);--scrollbar-track:transparent}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--backdrop:#161c22;--panel:#1f272e;--ink:#e6ecf0;--muted:#93a1ad;--rule:#33404a;--accent:#5fa8d6;--accent-ink:#0d1a24;--btn:#27313a;--btn-hover:#303c47;--danger:#ef7a6c;--scrollbar-thumb:color-mix(in srgb,var(--muted) 45%,transparent);--scrollbar-thumb-hover:var(--muted);--scrollbar-track:transparent}}:root[data-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--backdrop:#161c22;--panel:#1f272e;--ink:#e6ecf0;--muted:#93a1ad;--rule:#33404a;--accent:#5fa8d6;--accent-ink:#0d1a24;--btn:#27313a;--btn-hover:#303c47;--danger:#ef7a6c;--scrollbar-thumb:color-mix(in srgb,var(--muted) 45%,transparent);--scrollbar-thumb-hover:var(--muted);--scrollbar-track:transparent}html{scroll-padding-top:env(safe-area-inset-top,0px);height:100%}*,:before,:after{box-sizing:inherit}body{background:var(--backdrop);height:100%;color:var(--ink);margin:0;font:14px/1.4 IBM Plex Sans,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;overflow:hidden}button,select,input{font:inherit;color:inherit}select{background:var(--btn);color:var(--ink);border:1px solid var(--rule);border-radius:6px;padding:5px 6px}select:hover{border-color:var(--accent)}option{background:var(--panel);color:var(--ink)}button{background:var(--btn);border:1px solid var(--rule);cursor:pointer;white-space:nowrap;border-radius:6px;padding:6px 10px}button:hover:not(:disabled){background:var(--btn-hover)}button:disabled{opacity:.4;cursor:default}button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}button.on,button.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}button.danger{color:var(--danger)}#app{height:100%;display:flex}#rail{background:var(--panel);border-right:1px solid var(--rule);flex-direction:column;flex:none;width:272px;height:100%;display:flex;overflow-y:auto}#bar{border-bottom:1px solid var(--rule);flex-direction:column;flex:none;gap:12px;padding:14px 12px;display:flex}.brand{letter-spacing:.01em;padding-bottom:2px;font-size:15px;font-weight:600}.group{border-bottom:1px solid var(--rule);flex-direction:column;flex:none;gap:4px;padding-bottom:10px;display:flex}.group:last-of-type{border-bottom:0;padding-bottom:0}#bar button{text-align:left;width:100%}.group.pair{flex-direction:row}.group.pair button{text-align:center;flex:1}#stage{background:var(--backdrop);touch-action:none;flex:1;min-width:0;height:100%;position:relative}#cv{touch-action:none;width:100%;height:100%;display:block;position:absolute;inset:0}#hint{background:var(--panel);border:1px solid var(--rule);color:var(--muted);box-shadow:var(--shadow);pointer-events:none;border-radius:6px;max-width:calc(100% - 100px);padding:4px 9px;font-size:12.5px;position:absolute;top:10px;left:12px}#zoom{flex-direction:column;gap:4px;display:flex;position:absolute;top:10px;right:12px}#zoom button{width:34px;height:34px;box-shadow:var(--shadow);padding:0;font-size:18px;line-height:1}#fin{background:var(--panel);border:1px solid var(--rule);box-shadow:var(--shadow);border-radius:8px;gap:6px;padding:6px;display:flex;position:absolute;bottom:16px;left:50%;transform:translate(-50%)}#selbar{background:var(--panel);border:1px solid var(--rule);box-shadow:var(--shadow);border-radius:8px;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;max-width:calc(100% - 24px);padding:6px 10px;display:flex;position:absolute;bottom:16px;left:50%;transform:translate(-50%)}#toast{background:var(--ink);color:var(--panel);text-align:center;pointer-events:none;border-radius:6px;max-width:90%;padding:6px 12px;font-size:13px;position:absolute;top:52px;left:50%;transform:translate(-50%)}.switch{cursor:pointer;align-items:center;display:inline-flex;position:relative}.switch input{opacity:0;width:1px;height:1px;position:absolute}.switch .track{background:var(--rule);border-radius:999px;width:36px;height:20px;transition:background .15s;position:relative}.switch .thumb{background:var(--panel);border-radius:50%;width:16px;height:16px;transition:transform .15s;position:absolute;top:2px;left:2px;box-shadow:0 1px 2px #00000059}.switch input:checked+.track{background:var(--accent)}.switch input:checked+.track .thumb{transform:translate(16px)}.switch input:focus-visible+.track{outline:2px solid var(--accent);outline-offset:2px}.secBlock{border-bottom:1px solid var(--rule);padding-bottom:10px}.secHead{cursor:pointer;text-align:left;background:0 0;border:0;align-items:center;gap:6px;width:100%;padding:2px 0;display:flex}.secHead h2{margin:0;font-size:13px;font-weight:600}.secHead .chev{color:var(--muted);font-size:11px;transition:transform .15s;display:inline-flex}.secHead[aria-expanded=false] .chev{transform:rotate(-90deg)}.secBody[hidden]{display:none}#tools.icon{grid-template-columns:1fr 1fr;gap:6px;display:grid}#tools.icon button{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:4px;padding:8px 4px;display:flex}#tools.icon button svg{stroke:currentColor;fill:none;stroke-width:1.8px;stroke-linecap:round;stroke-linejoin:round;width:20px;height:20px}#tools.icon button span{font-size:11px;line-height:1}#layers{min-width:0}.layer{border-radius:6px;align-items:center;gap:5px;min-width:0;padding:6px;display:flex;position:relative}.layer>input[type=radio]{flex:none;margin:0}#layers .nameInput{background:var(--btn);border:1px solid var(--rule);border-radius:6px;flex:1;min-width:0;padding:5px 6px;font-size:12.5px}#layers .nameInput:hover,#layers .nameInput:focus-visible{border-color:var(--accent)}#layers .swatch{border:1px solid var(--rule);cursor:pointer;border-radius:4px;flex:none;width:20px;height:20px;padding:0}#layers .styleBtn{flex:none;justify-content:center;align-items:center;width:32px;height:26px;padding:0;display:inline-flex}#layers .dashPreview{pointer-events:none;flex:none;display:block}#layers .eyeBtn,#layers .del{border-radius:6px;flex:none;justify-content:center;align-items:center;width:24px;height:24px;padding:0;display:inline-flex}.layer.active{background:color-mix(in srgb,var(--accent) 10%,transparent)}.popover{z-index:20;background:var(--panel);border:1px solid var(--rule);width:184px;box-shadow:var(--shadow);border-radius:8px;flex-direction:column;gap:2px;margin-top:4px;padding:6px;display:flex;position:absolute;top:100%;right:0}#layers .popover .opt{text-align:left;background:0 0;border:0;border-radius:6px;flex:none;align-items:center;gap:8px;width:100%;padding:6px 8px;display:flex}#layers .popover .opt:hover{background:var(--btn-hover)}#layers .popover .opt.sel{background:color-mix(in srgb,var(--accent) 14%,transparent)}.stylePop{width:200px;margin-top:0;margin-bottom:6px;position:absolute;inset:auto auto 100% 50%;transform:translate(-50%)}.colorPop{width:172px}.colorPop .swGrid{grid-template-columns:repeat(6,1fr);gap:6px;margin-bottom:8px;display:grid}#layers .colorPop .swGrid button{border:1px solid var(--rule);cursor:pointer;border-radius:50%;flex:none;width:22px;height:22px;padding:0}.colorPop .hexRow{align-items:center;gap:6px;display:flex}.colorPop input[type=color]{border:1px solid var(--rule);cursor:pointer;background:0 0;border-radius:6px;flex:none;width:26px;height:26px;padding:0}.colorPop input[type=text]{background:var(--btn);border:1px solid var(--rule);border-radius:6px;flex:1;min-width:0;padding:5px 6px;font-size:12.5px}#layers .colorPop .fmtBtn{flex:none;width:auto;padding:4px 6px;font-size:11px}.colorPop .fmtBtn{flex:none;padding:4px 6px;font-size:11px}#marquee{border:1.5px solid var(--accent);background:color-mix(in srgb,var(--accent) 16%,transparent);pointer-events:none;border-radius:2px;display:none;position:absolute}#drop{border:2px dashed var(--accent);color:var(--accent);background:color-mix(in srgb,var(--backdrop) 80%,transparent);pointer-events:none;border-radius:10px;justify-content:center;align-items:center;font-size:16px;display:flex;position:absolute;inset:8px}#side{background:var(--panel);flex-direction:column;gap:16px;width:auto;padding:12px;display:flex}#side h2{margin:0 0 6px;font-size:13px;font-weight:600}.muted{color:var(--muted);font-size:12.5px}.row{flex-wrap:wrap;align-items:center;gap:6px;display:flex}label.chk{cursor:pointer;align-items:center;gap:6px;display:flex}#modal{z-index:10;background:#0a101680;justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0}#modal[hidden],#drop[hidden],#fin[hidden],#selbar[hidden],#toast[hidden],#bLayers[hidden]{display:none}#modal .card{background:var(--panel);border:1px solid var(--rule);border-radius:10px;flex-direction:column;gap:12px;width:min(360px,100%);padding:16px;display:flex}#modal h3{margin:0;font-size:15px;font-weight:600}#modal input,#modal select{background:var(--btn);border:1px solid var(--rule);border-radius:6px;padding:7px 8px}#modal input{flex:1;min-width:0}.end{justify-content:flex-end}.onlySmall{display:none}#historyPanel,#shortcutsPanel{z-index:10;background:#0a101680;justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0}#historyPanel[hidden],#shortcutsPanel[hidden]{display:none}.hcard{background:var(--panel);border:1px solid var(--rule);border-radius:10px;flex-direction:column;gap:16px;width:min(480px,100%);max-height:85vh;padding:18px;display:flex;overflow-y:auto}.hhead{justify-content:space-between;align-items:center;display:flex}.hhead h3{margin:0;font-size:16px;font-weight:600}.hhead button{cursor:pointer;background:0 0;border:0;padding:2px 6px;font-size:18px}.hnote{margin:-8px 0 0}.hcard h4{color:var(--muted);text-transform:uppercase;letter-spacing:.03em;margin:0 0 8px;font-size:12.5px;font-weight:600}.hsketches{flex-direction:column;gap:6px;display:flex}.hsketch{border:1px solid var(--rule);border-radius:8px;align-items:center;gap:10px;padding:8px;display:flex}.hsketch.active{border-color:var(--accent)}.hthumb{background:var(--rule);border-radius:6px;flex:none;width:40px;height:40px}.hact{flex:none}.hmeta{flex:1;min-width:0}.hname{font-size:13.5px;font-weight:500}.hbadge{color:var(--accent);font-size:11px;font-weight:600}.hversions{flex-direction:column;gap:2px;margin:0;padding:0;list-style:none;display:flex}.hversions li{border-bottom:1px solid var(--rule);justify-content:space-between;align-items:center;gap:10px;padding:9px 4px;font-size:13px;display:flex}.hversions li:last-child{border-bottom:0}.kbd{border:1px solid var(--rule);background:var(--btn);text-align:center;white-space:nowrap;border-radius:5px;min-width:1.6em;padding:2px 7px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11.5px;display:inline-block}*{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb) var(--scrollbar-track)}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:var(--scrollbar-track)}::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);background-clip:padding-box;border:2px solid #0000;border-radius:999px}::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover);background-clip:padding-box}::-webkit-scrollbar-corner{background:0 0}#app{position:relative}#rail{width:var(--rail-width,272px)}.railHead{align-items:center;gap:6px;display:flex}.railHead .brand{flex:1;min-width:0;padding-bottom:0}#bar .railHead button{width:auto}.collapseBtn{flex:none;justify-content:center;align-items:center;width:28px;height:28px;padding:0;display:inline-flex}.accountMenu{flex:none;display:flex}.avatar{background:var(--btn);border:1px solid var(--rule);width:28px;height:28px;color:var(--muted);border-radius:50%;justify-content:center;align-items:center;padding:0;display:inline-flex}.avatar:hover{color:var(--ink)}.popover.accountPop{z-index:30;gap:4px;width:auto;min-width:184px;margin-top:0;padding:10px 12px;position:fixed;right:auto}#railResizer{top:0;bottom:0;left:calc(var(--rail-width,272px) - 3px);cursor:col-resize;z-index:6;touch-action:none;width:6px;position:absolute}#railResizer:hover,#railResizer:focus-visible,#app.resizing #railResizer{background:linear-gradient(to right,transparent 2px,var(--accent) 2px,var(--accent) 4px,transparent 4px);outline:none}#app.resizing{cursor:col-resize;-webkit-user-select:none;user-select:none}#app[data-collapsed] #rail{width:56px}#app[data-collapsed] #bar{align-items:center;gap:10px;padding:12px 8px}#app[data-collapsed] .railHead{flex-direction:column;gap:8px}#app[data-collapsed] .railHead .brand{text-align:center;font-size:11px}#app[data-collapsed] .group.pair button{flex:none}#app[data-collapsed] .group.pair{border-bottom:1px solid var(--rule);flex-direction:column;padding-bottom:10px}#app[data-collapsed] #bar button{justify-content:center;align-items:center;width:38px;height:34px;padding:0;display:inline-flex}#app[data-collapsed] #tools.icon{grid-template-columns:1fr;gap:4px}#app[data-collapsed] #tools.icon span{display:none}.railFoot{flex:none;justify-content:flex-end;margin-top:auto;padding:8px 12px;display:flex}.versionBtn{color:var(--muted);background:0 0;border:0;padding:2px 4px;font-size:11.5px;-webkit-text-decoration:underline #0000;text-decoration:underline #0000}.versionBtn:hover:not(:disabled){color:var(--ink);background:0 0;text-decoration-color:currentColor}#app[data-collapsed] .railFoot{justify-content:center;padding:8px 0}#app[data-collapsed] .versionBtn{font-size:10.5px}#changelogPanel{z-index:10;background:#0a101680;justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0}#layers .expandBtn{width:18px;height:24px;color:var(--muted);background:0 0;border:0;flex:none;justify-content:center;align-items:center;padding:0;display:inline-flex}#layers .expandBtn .chev{font-size:11px;transition:transform .15s}#layers .expandBtn[aria-expanded=false] .chev{transform:rotate(-90deg)}.layerItems{flex-direction:column;gap:1px;margin:0 0 4px 30px;padding:0;font-size:12.5px;list-style:none;display:flex}p.layerItems{padding:2px 6px}.layerItems button{text-align:left;background:0 0;border:0;border-radius:6px;align-items:center;gap:6px;width:100%;padding:4px 6px;font-size:12.5px;display:flex}.layerItems button:hover:not(:disabled){background:var(--btn-hover)}.layerItems button.sel{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--ink)}.layerItems .swatchDot{border-radius:50%;flex:none;width:8px;height:8px}.layerItems .itemText{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}@media (width<=760px){.railFoot,#railResizer,.collapseBtn{display:none}#app{flex-direction:column}.onlySmall{display:inline-block}#rail{border-right:0;flex-direction:column;flex:none;width:auto;height:auto;overflow:visible}#bar{border-bottom:1px solid var(--rule);flex-direction:row;align-items:center;gap:14px;padding:8px 12px;overflow-x:auto}.group{border-bottom:0;border-right:1px solid var(--rule);flex-direction:row;gap:4px;padding-bottom:0;padding-right:14px}.group:last-of-type{border-right:0;padding-right:0}#bar button{text-align:center;white-space:nowrap;width:auto}#tools.icon{flex-direction:row;display:flex}#tools.icon button{flex-direction:row;padding:6px 8px}#tools.icon button svg{width:16px;height:16px}.secBlock{border-bottom:0;padding-bottom:0}#side{border-top:1px solid var(--rule);z-index:5;width:auto;max-height:55%;display:none;position:fixed;bottom:0;left:0;right:0;box-shadow:0 -4px 16px #0000002e}#side.open{display:flex}#hint{max-width:calc(100% - 64px)}}#root{position:fixed;inset:0}
