:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--link-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.5.5l3-3a5 5 0 0 0-7-7l-1.7 1.7'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.5-.5l-3 3a5 5 0 0 0 7 7l1.7-1.7'/%3E%3C/svg%3E");--bg:#14161a;--panel:#1b1e24;--panel-2:#23272f;--line:#31363f;--text:#e6e9ef;--muted:#98a1b0;--accent:#f5b301;--warn:#ffb454}*{box-sizing:border-box}html,body{height:100%;margin:0}body{background:var(--bg);color:var(--text);font:13px/1.45 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}#app{grid-template-columns:var(--panel-width,320px) 1fr;height:100vh;display:grid}#app.collapsed{grid-template-columns:0 1fr}#app.collapsed .panel{display:none}.panel{background:var(--panel);border-right:1px solid var(--line);grid-template-rows:auto minmax(0,1fr) auto;min-height:0;display:grid;position:relative}.panel-head{border-bottom:1px solid var(--line);padding:14px 16px 12px}.title-row{justify-content:space-between;align-items:flex-start;gap:8px;display:flex}.panel-head h1{letter-spacing:.02em;margin:0;font-size:15px}.panel-head p{color:var(--muted);margin:3px 0 0;font-size:11px}.head-actions{flex:none;gap:4px;display:flex}.panes{min-height:0;overflow-y:auto}.panel-foot{border-top:1px solid var(--line);background:var(--panel);align-items:stretch;gap:8px;padding:10px 16px;display:flex;container-type:inline-size}.panel-foot .primary{white-space:nowrap;flex:auto;min-width:0;margin:0}.panel-foot #copyLink{white-space:nowrap;cursor:pointer;flex:none;width:auto}.panel-foot #copyLink:hover{border-color:var(--accent)}.panel-foot button.icon{flex:0 0 34px;align-self:stretch;width:34px;height:auto}@container (width<=250px){.panel-foot #copyLink{width:34px;padding:0;font-size:0}.panel-foot #copyLink:after{content:"";width:15px;height:15px;-webkit-mask:var(--link-icon) center / contain no-repeat;mask:var(--link-icon) center / contain no-repeat;-webkit-mask:var(--link-icon) center / contain no-repeat;background:currentColor;margin:0 auto;display:block}}.pane{border-bottom:1px solid var(--line)}.pane>summary{cursor:pointer;-webkit-user-select:none;user-select:none;justify-content:space-between;align-items:baseline;gap:8px;padding:11px 16px;list-style:none;display:flex}.pane>summary::-webkit-details-marker{display:none}.pane>summary:hover{background:var(--panel-2)}.pane-name{text-transform:uppercase;letter-spacing:.09em;color:var(--muted);font-size:11px}.pane[open]>summary .pane-name{color:var(--text)}.pane-sum{color:var(--muted);text-align:right;text-overflow:ellipsis;white-space:nowrap;font-size:11px;overflow:hidden}.pane[open]>summary .pane-sum{opacity:0}.pane-body{padding:2px 16px 16px}label{flex-direction:column;gap:4px;min-width:0;display:flex}label>span{color:var(--muted);font-size:11px}label>span.with-count{justify-content:space-between;align-items:baseline;gap:8px;display:flex}label.wide{margin-bottom:10px}label.spacer{display:none}.grid{grid-template-columns:1fr 1fr;gap:8px 10px;display:grid}input,select,textarea,button{font:inherit;color:var(--text);background:var(--panel-2);border:1px solid var(--line);border-radius:5px;width:100%;min-width:0;padding:6px 8px}textarea{resize:vertical;font-family:inherit}input:focus,select:focus,textarea:focus{border-color:var(--accent);outline:none}input[type=color]{cursor:pointer;height:30px;padding:2px}input[type=file]{padding:4px;font-size:11px}input[type=checkbox]{width:auto;accent-color:var(--accent);margin:0}label.check{flex-direction:row;align-items:center;gap:8px;margin:4px 0 10px}label.check span{color:var(--text);font-size:12px}.row{justify-content:space-between;align-items:center;gap:8px;margin:-4px 0 10px;display:flex}.hint{color:var(--muted);margin:8px 0 0;font-size:11px}button.link{width:auto;color:var(--muted);cursor:pointer;background:0 0;border:none;padding:0;font-size:11px;text-decoration:underline}button.link:hover{color:var(--text)}button.primary{background:var(--accent);border-color:var(--accent);color:#171717;cursor:pointer;padding:9px;font-weight:600}button.primary:hover{filter:brightness(1.08)}button.primary:disabled{opacity:.5;cursor:not-allowed}.stage{min-width:0;position:relative}#viewport{position:absolute;inset:0}#viewport canvas{display:block}.overlay{pointer-events:none;flex-direction:column;gap:8px;display:flex;position:absolute;bottom:16px;left:16px;right:16px}.stats{color:var(--muted);font-variant-numeric:tabular-nums;font-size:11px}.messages{flex-direction:column;gap:6px;display:flex}.messages p{border:1px solid var(--warn);color:var(--warn);background:#28200ce6;border-radius:5px;max-width:460px;margin:0;padding:6px 9px;font-size:11px}.messages p.error{color:#ff9b9b;background:#301414eb;border-color:#ff6b6b}@media (max-width:820px){#app{grid-template-rows:44vh 1fr;grid-template-columns:1fr}.panel{border-right:none;border-bottom:1px solid var(--line);order:2}.stage{order:1}.view-controls{flex-direction:row;top:auto;bottom:12px;right:12px}}input[type=range]{appearance:none;cursor:pointer;background:0 0;border:none;height:20px;padding:0}input[type=range]::-webkit-slider-runnable-track{background:var(--panel-2);border:1px solid var(--line);border-radius:2px;height:4px}input[type=range]::-moz-range-track{background:var(--panel-2);border:1px solid var(--line);border-radius:2px;height:4px}input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--accent);border:none;border-radius:50%;width:14px;height:14px;margin-top:-6px}input[type=range]::-moz-range-thumb{background:var(--accent);border:none;border-radius:50%;width:14px;height:14px}label>span{display:block}input:disabled,select:disabled{opacity:.45;cursor:not-allowed}.picker{border:1px solid var(--line);background:var(--panel-2);border-radius:5px;max-height:196px;overflow-y:auto}.picker ul{margin:0;padding:2px;list-style:none}.picker li{cursor:pointer;border-radius:4px;justify-content:space-between;align-items:baseline;gap:8px;padding:5px 8px;display:flex}.picker li:hover{background:var(--line)}.picker li[aria-selected=true]{background:var(--accent);color:#171717}.picker li[aria-selected=true] em{color:#4a3c05}.picker li em{color:var(--muted);white-space:nowrap;font-size:10px;font-style:normal}.picker p{color:var(--muted);margin:0;padding:8px;font-size:11px}button#copyLink{cursor:pointer;background:var(--panel-2)}button#copyLink:hover{border-color:var(--accent)}[hidden]{display:none!important}.dual{align-items:center;gap:8px;display:flex}.dual input[type=range]{flex:auto;min-width:0}.dual input[type=number]{text-align:right;font-variant-numeric:tabular-nums;flex:0 0 62px;width:62px;padding:4px 5px}.grid .dual input[type=number]{flex-basis:52px;width:52px}.icons{border:1px solid var(--line);background:var(--panel-2);border-radius:5px;grid-template-columns:repeat(auto-fill,minmax(34px,1fr));gap:4px;max-height:132px;margin-bottom:10px;padding:4px;display:grid;overflow-y:auto}.icons:empty{display:none}.icons button{aspect-ratio:1;cursor:pointer;background:0 0;border:1px solid #0000;border-radius:4px;place-items:center;width:auto;padding:3px;display:grid}.icons button:hover,.icons button[aria-pressed=true]{border-color:var(--accent);background:var(--line)}.icons img{width:20px;height:20px}.icons p{color:var(--muted);grid-column:1/-1;margin:0;padding:6px 4px;font-size:11px}button.icon{cursor:pointer;background:var(--panel-2);place-items:center;width:28px;height:28px;padding:0;display:grid}button.icon svg{fill:none;stroke:currentColor;stroke-width:1.9px;stroke-linecap:round;stroke-linejoin:round;width:15px;height:15px}button.icon:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}button.icon:disabled{opacity:.35;cursor:default}button.icon[aria-pressed=true]{border-color:var(--accent);color:var(--accent)}.presets{flex-wrap:wrap;gap:4px;margin-top:10px;display:flex}.presets button{cursor:pointer;background:var(--panel-2);width:auto;color:var(--muted);border-radius:99px;padding:3px 8px;font-size:11px}.presets button:hover{border-color:var(--accent);color:var(--text)}.view-controls{flex-direction:column;gap:6px;display:flex;position:absolute;top:16px;right:16px}.view-controls button.icon{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#1b1e24d9;width:32px;height:32px}.busy{color:var(--muted);border:1px solid var(--line);background:#1b1e24d9;border-radius:5px;padding:4px 9px;font-size:11px;position:absolute;top:18px;left:16px}.busy[hidden]{display:none!important}button.chosen{text-align:left;cursor:pointer;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:10px;display:flex}button.chosen:hover{border-color:var(--accent)}button.chosen[aria-expanded=true]{border-color:var(--accent);margin-bottom:6px}button.chosen em{color:var(--muted);flex:none;font-size:10px;font-style:normal}button.chosen span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.drawer{margin-bottom:10px}.drawer input[type=search]{margin-bottom:6px}.drawer[hidden]{display:none!important}.panel-foot{position:relative}.share-menu{background:var(--panel-2);border:1px solid var(--line);z-index:5;border-radius:6px;flex-direction:column;min-width:150px;padding:4px;display:flex;position:absolute;bottom:calc(100% + 6px);right:16px;box-shadow:0 8px 24px #00000073}.share-menu[hidden]{display:none!important}.share-menu a,.share-menu button{text-align:left;width:100%;color:var(--text);cursor:pointer;background:0 0;border:none;border-radius:4px;padding:6px 9px;font-size:12px;text-decoration:none}.share-menu a:hover,.share-menu button:hover{background:var(--line)}.hint a{color:var(--accent)}.hint code{background:var(--panel-2);border:1px solid var(--line);border-radius:3px;padding:0 3px;font-size:10px}.dual button{cursor:pointer;background:var(--panel-2);flex:none;width:auto;padding:6px 10px}.dual button:hover{border-color:var(--accent)}.resizer{cursor:col-resize;z-index:4;width:6px;height:100%;position:absolute;top:0;right:-3px}.resizer:hover,.resizer:focus-visible,.resizer.dragging{background:var(--accent);outline:none}button.icon.expand{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:3;background:#1b1e24d9;width:32px;height:32px;position:absolute;top:16px;left:16px}button.icon.expand[hidden]{display:none!important}body.resizing{cursor:col-resize;-webkit-user-select:none;user-select:none}@media (max-width:820px){#app{grid-template-columns:1fr!important}.resizer{display:none}}#alerts{pointer-events:auto}#alerts .alert{border:1px solid var(--line);background:#1b1e24f2;border-radius:5px;align-items:center;gap:8px;max-width:520px;padding:7px 9px;display:flex}#alerts .alert.error{border-color:#ff6b6b}#alerts .alert p{color:var(--text);background:0 0;border:none;margin:0;padding:0}#alerts .alert.error p{color:#ff9b9b}#alerts .alert input{flex:auto;min-width:0;padding:4px 6px;font-size:11px}#alerts .alert button{cursor:pointer;background:var(--panel-2);flex:none;width:auto;padding:4px 8px;font-size:11px}#alerts .alert button:hover{border-color:var(--accent)}a.icon{border:1px solid var(--line);background:var(--panel-2);width:28px;height:28px;color:var(--text);border-radius:5px;place-items:center;display:grid}a.icon:hover{border-color:var(--accent);color:var(--accent)}a.icon svg{fill:none;stroke:currentColor;stroke-width:1.9px;stroke-linecap:round;stroke-linejoin:round;width:15px;height:15px}svg.brand{fill:currentColor;stroke:none;width:16px;height:16px}.repo-links{flex-direction:column;gap:2px;display:flex}.repo-links a{color:var(--text);border-radius:5px;align-items:center;gap:8px;margin:0 -8px;padding:6px 8px;font-size:12px;text-decoration:none;display:flex}.repo-links a:hover{background:var(--panel-2);color:var(--accent)}.repo-links svg{fill:none;stroke:currentColor;stroke-width:1.8px;stroke-linecap:round;stroke-linejoin:round;flex:none;width:15px;height:15px}