:root{color-scheme:dark;--canvas: #08080b;--surface: #18181d;--raised: #222229;--hovered: #2c2c35;--edge: #30303a;--sunken: #101014;--text: #e2e3e9;--muted: #8a8c98;--accent: #78beff;--page-accent: var(--accent);--t-heading: 15px;--t-body: 13px;--t-small: 11px;--radius: 6px;--gap: 6px;--touch: 40px;--column: 248px;--narrow: 620px;--sheet: 62vh}*{box-sizing:border-box}html,body,#root{height:100%;overflow:hidden}body{margin:0;background:var(--canvas);color:var(--text);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;font-size:var(--t-body);touch-action:none;overscroll-behavior:none}:where(button,input,select,a):focus-visible{outline:2px solid var(--accent);outline-offset:1px}.shell{display:grid;grid-template-columns:1fr var(--column);grid-template-rows:minmax(0,1fr);height:100%}.stage{position:relative;min-width:0;background:var(--canvas)}.stage canvas{display:block;width:100%;height:100%;image-rendering:auto}.stage canvas.pixelated{image-rendering:pixelated}.stage canvas.positioned{position:absolute;top:0;left:0;width:auto;height:auto;transform-origin:0 0}.stage{overflow:hidden;touch-action:none;cursor:crosshair}.tabs{display:flex;flex-wrap:wrap;gap:3px;margin-bottom:8px}.tabs button{padding:3px 7px;border-radius:4px;font-size:var(--t-small)}.elements{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px;max-height:300px;overflow-y:auto;scrollbar-gutter:stable}button.element{display:flex;align-items:center;gap:6px;padding:4px 6px;text-align:left;overflow:hidden}.element-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.button-like{display:inline-flex;align-items:center;padding:5px 9px;border:1px solid var(--edge);border-radius:var(--radius);background:var(--raised);cursor:pointer}.button-like:hover{background:var(--hovered)}.button-like input[type=file]{display:none}.home{position:absolute;top:8px;left:10px;z-index:2;padding:4px 8px;border-radius:var(--radius);background:#08080b99;color:var(--muted);font-size:var(--t-small);line-height:1;text-decoration:none}.home:hover,.home:focus-visible{color:var(--text)}.panel{display:flex;flex-direction:column;min-height:0;background:var(--surface);border-left:1px solid var(--edge)}.panel-bar{display:flex;flex-wrap:wrap;gap:var(--gap);padding:10px;border-bottom:1px solid var(--edge)}.panel-body{flex:1;min-height:0;padding:10px;overflow-y:scroll;scrollbar-gutter:stable}@media(max-width:620px){.shell{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto}.panel{border-left:none;border-top:1px solid var(--edge);max-height:var(--sheet)}.panel[data-open=false] .panel-body{display:none}.panel-bar button{min-height:var(--touch)}}button{padding:5px 9px;border:1px solid var(--edge);border-radius:var(--radius);background:var(--raised);color:var(--text);font:inherit;line-height:1.2;cursor:pointer}button:hover{background:var(--hovered);border-color:color-mix(in srgb,var(--accent) 50%,transparent)}button[aria-pressed=true]{background:color-mix(in srgb,var(--accent) 22%,var(--raised));border-color:var(--accent)}.row{display:flex;align-items:center;gap:var(--gap)}.wrap{display:flex;flex-wrap:wrap;gap:var(--gap);align-items:center}.section>summary{display:flex;align-items:center;gap:6px;margin:8px 0 6px;color:var(--muted);font-size:var(--t-small);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;list-style:none;user-select:none}.section>summary::-webkit-details-marker{display:none}.section>summary:before{content:"";width:0;height:0;border-left:4px solid currentColor;border-top:3.5px solid transparent;border-bottom:3.5px solid transparent;transition:transform .12s}.section[open]>summary:before{transform:rotate(90deg)}.section>summary:hover{color:var(--text)}.field{display:grid;grid-template-columns:1fr 62px;align-items:center;gap:var(--gap);margin-bottom:var(--gap)}.field>label{grid-column:1 / -1;color:var(--muted);font-size:var(--t-small)}input[type=range]{width:100%;height:18px;margin:0;background:transparent;accent-color:var(--accent);cursor:pointer}input[type=number],input[type=text]{width:100%;padding:3px 5px;border:1px solid var(--edge);border-radius:4px;background:var(--sunken);color:var(--text);font:inherit;font-variant-numeric:tabular-nums}input[type=number]{appearance:textfield;-moz-appearance:textfield}input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{appearance:none;margin:0}input[type=color]{width:26px;height:22px;padding:0;border:1px solid var(--edge);border-radius:4px;background:none;cursor:pointer}.hint{margin:6px 0 0;color:var(--muted);font-size:var(--t-small);line-height:1.5}.error-text{margin:6px 0 0;color:#e66;font-size:var(--t-small);line-height:1.4}textarea{width:100%;min-height:90px;padding:5px;border:1px solid var(--edge);border-radius:4px;background:var(--sunken);color:var(--text);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--t-small);line-height:1.45;resize:vertical}button:disabled{opacity:.4;cursor:default}button:disabled:hover{background:var(--raised);border-color:var(--edge)}.readout{margin-top:10px;padding-top:10px;border-top:1px solid var(--edge);color:var(--muted);font-size:var(--t-small);font-variant-numeric:tabular-nums}.matrix{display:grid;gap:2px;margin-top:6px}.matrix-cell{aspect-ratio:1;min-width:16px;border:1px solid transparent;border-radius:3px;cursor:ns-resize;touch-action:none}.matrix-cell[data-selected=true]{border-color:var(--accent)}.swatch{width:10px;height:10px;border-radius:50%;flex:none}@media(prefers-reduced-motion:reduce){*{transition-duration:.01ms!important}}.loading{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:1.25rem;background:var(--canvas);text-align:center}.loading p{margin:0;color:var(--muted);letter-spacing:.02em}.loading .error{color:#ff8b8b}.spinner{width:2.25rem;height:2.25rem;border:2px solid #2a2a33;border-top-color:var(--page-accent);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.spinner{animation-duration:3s}}