:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--canvas-background:#fff;--pen-color:#f006;--gear-fill:#1f29332e;--gear-stroke:#1f2933b8;--panel-background:#fdfdfbed;--panel-border:#5a646c3d;--panel-text:#1d2329;--button-background:#ffffffe6;--button-border:#56606a42;--button-hover:#eaf3f1;--selected-border:#007f7a;--danger:#b43142;--desktop-toolbar-width:120px;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden}body{background:var(--canvas-background);color:var(--panel-text);overscroll-behavior:none;-webkit-user-select:none;user-select:none}input,textarea,[contenteditable]{-webkit-user-select:text;user-select:text}.app-variant.variant-inactive,html[data-active-variant=classic] [data-app-variant=simple],html[data-active-variant=simple] [data-app-variant=classic]{visibility:hidden;pointer-events:none}.variant-switcher{z-index:20;top:max(10px, env(safe-area-inset-top));color:var(--panel-text);background:var(--panel-background);border:1px solid var(--panel-border);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:7px;grid-template-columns:repeat(2,minmax(72px,1fr));padding:3px;display:grid;position:fixed;left:50%;transform:translate(-50%);box-shadow:0 5px 18px #00000026}.variant-switcher button{min-width:72px;min-height:34px;color:inherit;cursor:pointer;background:0 0;border:0;border-radius:5px;padding:0 12px}.variant-switcher button:hover{background:var(--button-hover)}.variant-switcher button.selected{color:#fff;background:var(--selected-border)}.global-settings-button,.global-about-button,.global-developer-button{z-index:20;top:max(10px, env(safe-area-inset-top));width:42px;height:42px;color:var(--panel-text);background:var(--panel-background);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);position:fixed;box-shadow:0 5px 18px #00000026}.global-settings-button{left:calc(50% + 88px)}.global-about-button{left:calc(50% + 136px)}.global-developer-button{left:calc(50% + 184px)}.global-developer-button[hidden]{display:none}.classic-variant{--classic-background:#fff;--classic-pen-color:#f006;--classic-grid-color:#1f29331a;--classic-grid-center-color:#1f293347;--panel-background:#f9faf8f5;--panel-border:#535d633d;--panel-text:#20272b;--button-background:#ffffffeb;--button-border:#4d595f47;--button-hover:#e7f0ed;--selected-border:#007f7a;color:var(--panel-text);background:#e6ebe8;position:fixed;inset:0}.classic-variant.dark{--classic-grid-color:#ffffff1a;--classic-grid-center-color:#ffffff47;--panel-background:#1d2022f5;--panel-border:#ebe8dc40;--panel-text:#f4f1e9;--button-background:#2c3031f0;--button-border:#e6e2d43d;--button-hover:#4a5e58d1;--selected-border:#f2c94c}.classic-layout{grid-template-columns:184px minmax(0, 1fr) 164px var(--desktop-toolbar-width);grid-template-rows:minmax(0,1fr);grid-template-areas:"library stage colors actions";min-width:0;min-height:0;padding-top:58px;display:grid;position:absolute;inset:0}.classic-library,.classic-colors,.classic-toolbar{background:var(--panel-background);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);min-width:0;min-height:0}.classic-library{border-right:1px solid var(--panel-border);grid-area:library;grid-template-rows:minmax(0,1fr);padding:12px 10px;display:grid;overflow:hidden}.classic-colors{border-left:1px solid var(--panel-border);grid-area:colors;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:12px 8px;display:grid;overflow:hidden}.classic-panel-section{grid-template-rows:20px minmax(0,1fr);gap:8px;min-width:0;min-height:0;display:grid;overflow:hidden}.classic-panel-section h2{text-align:center;text-overflow:ellipsis;text-transform:lowercase;white-space:nowrap;align-self:center;margin:0;font-size:.72rem;line-height:1;overflow:hidden}.classic-part-list{overscroll-behavior:contain;scrollbar-width:thin;grid-template-columns:repeat(2,68px);grid-auto-rows:68px;justify-content:center;gap:8px;min-height:0;padding:2px;display:grid;overflow:hidden auto}.classic-part-button{width:68px;height:68px;color:var(--panel-text);background:var(--button-background);border:1px solid var(--button-border);cursor:grab;touch-action:none;border-radius:7px;place-items:center;padding:0;display:grid;position:relative}.classic-part-button:hover,.classic-part-button.drag-pending{background:var(--button-hover)}.classic-part-button.drag-pending{border-color:var(--selected-border)}.classic-part-button.dragging{cursor:grabbing;opacity:.55}.classic-part-button svg{width:54px;height:54px}.classic-part-button span{text-align:center;text-overflow:ellipsis;white-space:nowrap;font-size:.6rem;font-weight:700;line-height:1;position:absolute;bottom:3px;left:3px;right:3px;overflow:hidden}.classic-part-button span.compact{font-size:.54rem}.classic-color-list{overscroll-behavior:contain;scrollbar-width:thin;grid-auto-rows:54px;justify-items:center;gap:7px;min-height:0;padding:2px;display:grid;overflow:hidden auto}.classic-color-list .color-button,.classic-color-list .native-color-picker,.classic-color-list .pen-tool-button{width:52px;height:52px}.classic-stage{grid-area:stage;place-items:safe center;min-width:0;min-height:0;padding:16px;display:grid;overflow:auto}.classic-board{width:min(100%,150vh - 135px);aspect-ratio:var(--classic-board-aspect-ratio,3 / 2);background-color:var(--classic-background);background-image:linear-gradient(to right, var(--classic-grid-color) 1px, transparent 1px), linear-gradient(to bottom, var(--classic-grid-color) 1px, transparent 1px);background-size:calc(100% / var(--classic-grid-columns,60)) calc(100% / var(--classic-grid-rows,40)), calc(100% / var(--classic-grid-columns,60)) calc(100% / var(--classic-grid-rows,40));border:1px solid var(--panel-border);touch-action:none;border-radius:4px;flex:none;position:relative;overflow:hidden;box-shadow:0 8px 28px #141c1e1f}.classic-variant.grid-hidden .classic-board{background-image:none}.classic-center-axes{z-index:3;pointer-events:none;position:absolute;inset:0}.classic-center-axes:before,.classic-center-axes:after{content:"";background:var(--classic-grid-center-color);position:absolute}.classic-center-axes:before{width:2px;top:0;bottom:0;left:calc(50% - 1px)}.classic-center-axes:after{height:2px;top:calc(50% - 1px);left:0;right:0}.classic-variant.grid-hidden .classic-center-axes{display:none}#classic-drawing-canvas,#classic-scene{width:100%;height:100%;display:block;position:absolute;inset:0}#classic-drawing-canvas{z-index:1;pointer-events:none}#classic-scene{z-index:2;cursor:grab;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.classic-stage.panning #classic-scene,.classic-stage.panning .classic-piece{cursor:grabbing}.classic-piece{cursor:grab;outline:none}.classic-piece.fixed{cursor:default}.classic-piece.dragging{cursor:grabbing}.classic-variant.gears-hidden .classic-piece{visibility:hidden;pointer-events:none}.classic-piece-path{fill:color-mix(in srgb, var(--panel-text), transparent 82%);fill-rule:evenodd;stroke:#111;stroke-width:2px;vector-effect:non-scaling-stroke}.classic-piece-hit-area{fill:#0000;pointer-events:all}.classic-piece:hover:not(.selected) .classic-piece-path,.classic-piece:focus-visible:not(.selected) .classic-piece-path{stroke:#1769aa;stroke-width:4px}.classic-piece.selected .classic-piece-path{stroke:#941f28;stroke-width:4px}.classic-piece.fixed .classic-piece-path{fill:color-mix(in srgb, var(--panel-text), transparent 72%)}.classic-piece.dragging:not(.invalid) .classic-piece-path{stroke:#16823a;stroke-width:5px}.classic-piece.invalid .classic-piece-path{fill:#f03a3e6b;stroke:#f03a3e;stroke-width:5px}.classic-part-label{fill:#111;stroke:#ffffffe0;stroke-width:3px;paint-order:stroke fill;dominant-baseline:middle;pointer-events:none;text-anchor:middle;vector-effect:non-scaling-stroke;font-family:system-ui,sans-serif;font-size:14px;font-weight:750}.classic-piece-state-icon{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:2.4px;vector-effect:non-scaling-stroke;overflow:visible}.classic-invalid-position-icon{fill:none;stroke:#f03a3e;stroke-linecap:round;stroke-linejoin:round;stroke-width:2.8px;pointer-events:none;vector-effect:non-scaling-stroke;display:none;overflow:visible}.classic-piece.invalid .classic-invalid-position-icon,.classic-drag-preview.invalid .classic-invalid-position-icon{display:block}.classic-piece.invalid .classic-part-label{fill:#f03a3e}.classic-piece.invalid .classic-piece-state-icon{color:#f03a3e}.classic-piece.invalid .classic-pen-hole{fill:#f03a3e59;stroke:#f03a3e}.classic-fixed-icon{color:var(--panel-text);pointer-events:none}.classic-driver-icon{color:#c8342f;pointer-events:none}.classic-pen-hole{fill:#0000;stroke:#0000;stroke-width:10px;cursor:pointer;pointer-events:all;vector-effect:non-scaling-stroke}.classic-pen-hole:hover,.classic-pen-hole.selected{fill:var(--classic-pen-color);stroke:var(--classic-background);stroke-width:2px}.classic-toolbar{border-left:1px solid var(--panel-border);overscroll-behavior:contain;scrollbar-width:thin;grid-area:actions;grid-template-columns:repeat(2,48px);grid-auto-rows:max-content;place-content:start center;gap:8px;padding:12px 8px;display:grid;overflow:hidden auto}.classic-toolbar .icon-button:disabled{opacity:.35;cursor:default}.classic-toolbar .icon-button[aria-pressed=true]{color:#fff;background:var(--selected-border);border-color:var(--selected-border)}.zoom-status{min-height:36px;color:color-mix(in srgb, var(--panel-text), transparent 18%);font-variant-numeric:tabular-nums;white-space:nowrap;grid-column:1/-1;grid-template-rows:repeat(2,auto);place-items:center;font-size:.68rem;font-weight:700;display:grid}.zoom-level{font-size:.76rem}.zoom-controls{grid-column:1/-1;grid-template-columns:repeat(2,48px);grid-auto-rows:52px;justify-content:center;gap:8px;display:grid}.zoom-button-pair{grid-column:1/-1;grid-template-columns:repeat(2,48px);justify-content:center;gap:8px;display:grid}.zoom-actual-button{font-variant-numeric:tabular-nums;padding:0 3px;font-size:.68rem;font-weight:750}.classic-drag-preview{z-index:30;width:92px;height:92px;color:var(--panel-text);pointer-events:none;filter:drop-shadow(0 8px 8px #0003);display:none;position:fixed;top:0;left:0}.classic-drag-preview.valid .classic-piece-path{stroke:#16823a;stroke-width:5px}.classic-drag-preview.invalid .classic-piece-path{fill:#f03a3e6b;stroke:#f03a3e;stroke-width:5px}.classic-drag-preview.visible{display:block}.classic-drag-preview svg{width:100%;height:100%}body.dark{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--gear-fill:#ffffff47;--gear-stroke:#f7f8f0db;--panel-background:#191b1fe6;--panel-border:#ebe8dc47;--panel-text:#f6f2e8;--button-background:#262a2eeb;--button-border:#e6e2d43d;--button-hover:#546862b8;--selected-border:#f2c94c}button,input{font:inherit}#surface{background:var(--canvas-background);touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;position:fixed;inset:0;overflow:hidden}#surface.pan-ready{cursor:grab}#surface.panning{cursor:grabbing}#drawing-canvas,#gear-svg{transform-origin:0 0;will-change:transform;width:100%;height:100%;position:absolute;inset:0}#drawing-canvas{z-index:1;pointer-events:none}#gear-svg{z-index:2;touch-action:none}#cursor-tracker{stroke:color-mix(in srgb, var(--pen-color), transparent 25%);stroke-width:2px;stroke-dasharray:7 9;opacity:0;pointer-events:none}#cursor-tracker.visible{opacity:1}.center-cross{color:color-mix(in srgb, var(--gear-stroke), transparent 12%);pointer-events:none}.center-cross-axis,.center-cross-marker{fill:none;stroke:currentColor;stroke-width:1.2px;stroke-dasharray:8 8;vector-effect:non-scaling-stroke}.center-cross-marker{stroke-width:1.4px;stroke-dasharray:4 5}.gear-path{fill:var(--gear-fill);fill-rule:evenodd;stroke:var(--gear-stroke);stroke-width:1.4px;vector-effect:non-scaling-stroke}.fixed-path{pointer-events:none}.rotating-gear{cursor:grab;pointer-events:auto}.rotating-gear.dragging{cursor:grabbing}.gear-hole{fill:#0000;stroke:#0000;stroke-width:12px;cursor:pointer;pointer-events:visiblePainted}.gear-hole:hover,.gear-hole.selected{fill:var(--pen-color);stroke:var(--pen-color)}.hidden{visibility:hidden}.app-rail,.toolbar,.menu-toggle-button{z-index:5;color:var(--panel-text);position:fixed}.app-rail{background:var(--panel-background);border-color:var(--panel-border);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);grid-template-columns:repeat(2,88px);gap:12px;min-height:0;padding:12px 10px;display:grid;top:0;bottom:0;overflow:hidden}.gear-rail{border-right:1px solid var(--panel-border);left:0}.color-rail{right:var(--desktop-toolbar-width);border-left:1px solid var(--panel-border)}.rail-section{grid-template-rows:20px minmax(0,1fr);gap:8px;min-width:0;min-height:0;display:grid;overflow:hidden}.rail-section h2{letter-spacing:0;text-align:center;text-overflow:ellipsis;text-transform:lowercase;white-space:nowrap;place-self:center;width:100%;min-width:0;margin:0;font-size:.72rem;font-weight:700;line-height:1;overflow:hidden}.color-rail .rail-section h2{transform:none}.option-list,.color-list{overscroll-behavior:contain;scrollbar-width:thin;-webkit-overflow-scrolling:touch;grid-auto-rows:64px;justify-items:center;gap:8px;min-height:0;max-height:100%;padding:2px;display:grid;overflow:hidden auto}.option-button,.color-button,.native-color-picker,.pen-tool-button,.pen-width-option,.icon-button,.dialog-actions button{border:1px solid var(--button-border);background:var(--button-background);color:var(--panel-text)}.option-button{cursor:pointer;border-radius:7px;place-items:center;width:64px;height:64px;padding:0;display:grid;position:relative}.option-button:hover,.icon-button:hover,.color-button:hover,.native-color-picker:hover,.pen-tool-button:hover,.pen-width-option:hover{background:var(--button-hover)}.option-button.selected,.color-button.selected{border-color:var(--selected-border);box-shadow:0 0 0 2px color-mix(in srgb, var(--selected-border), transparent 62%)}.option-button svg{width:52px;height:52px}.preview-path{fill:var(--gear-fill);fill-rule:evenodd;stroke:var(--gear-stroke);stroke-width:1.5px;vector-effect:non-scaling-stroke}.option-button span{color:var(--panel-text);text-align:center;text-overflow:ellipsis;white-space:nowrap;font-size:.62rem;font-weight:700;line-height:1;position:absolute;inset:auto 2px 2px;overflow:hidden}.color-button,.native-color-picker,.pen-tool-button{cursor:pointer;border-radius:7px;width:64px;height:64px}.pen-tool-button{place-items:center;padding:0;display:grid}.pen-width-dot{width:var(--pen-width-preview-size);height:var(--pen-width-preview-size);background:var(--pen-color);border:1px solid color-mix(in srgb, var(--pen-color), #1d2329 30%);border-radius:50%;flex:none;display:block}.classic-variant .pen-width-dot,.classic-pen-tools-popover .pen-width-dot{background:var(--classic-pen-color);border-color:color-mix(in srgb, var(--classic-pen-color), #1d2329 30%)}.pen-tools-popover{width:auto;color:var(--panel-text);background:var(--panel-background);border:1px solid var(--panel-border);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:7px;margin:0;padding:8px;inset:auto;box-shadow:0 10px 30px #00000038}.pen-tools-popover::backdrop{background:0 0}.pen-width-options{grid-template-columns:repeat(5,42px);gap:6px;display:grid}.pen-width-option{cursor:pointer;border-radius:6px;grid-template-rows:minmax(0,1fr) 12px;place-items:center;width:42px;height:46px;padding:4px 3px 3px;display:grid;position:relative}.pen-width-option>span:last-child{font-size:.62rem;font-weight:700;line-height:1}.pen-width-option.selected{color:#fff;background:var(--selected-border);border-color:var(--selected-border)}.color-button{background:linear-gradient(var(--swatch-color), var(--swatch-color)), var(--button-background)}.color-button.bordered{box-shadow:inset 0 0 0 2px #5a5a5a61}.native-color-picker{place-items:center;font-size:1.35rem;font-weight:600;display:grid;position:relative;overflow:hidden}.native-color-picker input{opacity:0;cursor:pointer;border:0;width:100%;height:100%;position:absolute;inset:0}.toolbar{width:var(--desktop-toolbar-width);background:var(--panel-background);border-left:1px solid var(--panel-border);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);overscroll-behavior:contain;scrollbar-width:thin;grid-template-columns:repeat(2,48px);grid-auto-rows:max-content;align-content:start;gap:12px;height:100%;min-height:0;padding:12px 8px;display:grid;top:0;right:0;overflow:hidden auto}.toolbar-group{grid-column:1/-1;grid-template-columns:repeat(2,48px);grid-auto-rows:52px;justify-content:center;gap:8px;display:grid}.icon-button{cursor:pointer;border-radius:7px;place-items:center;width:48px;height:48px;padding:0;display:grid}.icon-button svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.9px;width:24px;height:24px}:is(#move-back-ten-button,#move-back-one-button,#move-forward-one-button,#move-forward-ten-button,#classic-move-back-ten-button,#classic-move-back-one-button,#classic-move-forward-one-button,#classic-move-forward-ten-button) svg{width:30px;height:30px}.icon-button svg .icon-step-label{fill:currentColor;stroke:none;dominant-baseline:central;text-anchor:middle;font-family:system-ui,sans-serif;font-size:8px;font-weight:800}.icon-button svg .icon-step-label-ten{font-size:7px}.icon-button.danger:hover{color:#fff;background:var(--danger)}.menu-toggle-button{display:none}.app-dialog{width:min(520px,100vw - 32px);color:var(--panel-text);background:var(--panel-background);border:1px solid var(--panel-border);border-radius:8px;padding:0;box-shadow:0 22px 60px #00000042}.app-dialog::backdrop{background:#080c1052}.export-dialog{background:#fff}.app-dialog form{gap:16px;margin:0;padding:24px;display:grid;position:relative}.app-dialog h2{letter-spacing:0;margin:0;font-size:1.15rem}.app-dialog p{margin:0;line-height:1.5}.export-format{border:1px solid var(--panel-border);border-radius:7px;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;padding:4px;display:grid}.export-format button{min-height:38px;color:var(--panel-text);cursor:pointer;background:0 0;border:0;border-radius:5px}.export-format button[aria-pressed=true]{background:var(--selected-border);color:#fff}.export-format button:disabled{opacity:.5;cursor:not-allowed}.export-options{border:1px solid var(--panel-border);border-radius:6px;gap:12px;margin:0;padding:12px 14px 14px;display:grid}.export-options[hidden],.export-note[hidden]{display:none}.export-options legend{padding:0 4px;font-weight:600}.export-options label{align-items:center;gap:9px;display:flex}.export-options input{width:17px;height:17px;accent-color:var(--selected-border)}.export-note{font-size:.9rem}.busy-dialog{width:min(520px,100vw - 32px)}.busy-dialog-content{align-items:center;gap:14px;padding:22px 24px;display:flex}.project-gallery-dialog{width:min(1040px,100vw - 32px)}.project-gallery-dialog form{grid-template-rows:auto minmax(0,1fr);max-height:min(82vh,820px);overflow:hidden}.project-gallery-header{justify-content:space-between;align-items:baseline;gap:48px;padding-right:36px;display:flex}.project-gallery-header p{color:color-mix(in srgb, var(--panel-text), transparent 28%);flex:none;font-size:.78rem}.project-gallery-list{overscroll-behavior:contain;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));grid-auto-rows:max-content;align-content:start;gap:16px;min-height:150px;padding:2px;display:grid;overflow-y:auto}.project-gallery-item{min-width:0;color:var(--panel-text);text-align:left;background:var(--button-background);border:1px solid var(--button-border);cursor:pointer;border-radius:8px;align-self:start;gap:8px;padding:8px;display:grid;overflow:hidden}.project-gallery-item:hover,.project-gallery-item:focus-visible{background:var(--button-hover);border-color:var(--selected-border);outline:none}.project-gallery-preview{aspect-ratio:8/5;border:1px solid color-mix(in srgb, var(--panel-text), transparent 82%);background:#e6ebe8;border-radius:4px;width:100%;height:auto;display:block}.project-gallery-preview.placeholder{image-rendering:pixelated}.project-gallery-name,.project-gallery-metadata{text-overflow:ellipsis;white-space:nowrap;letter-spacing:0;min-width:0;overflow:hidden}.project-gallery-name{font-size:.84rem}.project-gallery-metadata{color:color-mix(in srgb, var(--panel-text), transparent 30%);font-size:.7rem}.project-gallery-empty{color:color-mix(in srgb, var(--panel-text), transparent 28%);place-self:center}.about-dialog{color:#f7fbff;background-color:#07152b;background-image:url(/spiroartist-background.png);background-position:50%;background-size:cover;border-color:#7ed3ff47;width:min(620px,100vw - 32px);max-height:none;overflow:hidden;box-shadow:0 24px 72px #0108187a}.about-dialog form{overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#7ed3ff7a transparent;background:#010818b8;gap:24px;max-height:min(82vh,760px);padding:32px clamp(24px,6vw,52px) 40px;overflow-y:auto}.about-dialog .dialog-close{z-index:1;color:#f7fbff}.about-dialog .dialog-close:hover,.about-dialog .dialog-close:focus-visible{color:#07152b;background:#7ed3ff;border-radius:7px;outline:none}.about-header{text-align:center;justify-items:center;display:grid}.about-logo{filter:drop-shadow(0 0 18px #00d3ff38);width:min(230px,58vw);height:auto;display:block}.about-logo-trigger{color:inherit;cursor:default;background:0 0;border:0;padding:0;display:block}.about-logo-trigger:focus-visible{outline-offset:6px;border-radius:7px;outline:2px solid #7ed3ff}.developer-dialog{width:min(420px,100vw - 32px)}.developer-confetti-layer:popover-open{pointer-events:none;background:0 0;border:0;width:100dvw;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;position:fixed;inset:0;overflow:hidden}.developer-confetti-layer canvas{width:100%;height:100%;display:block}.app-dialog .about-header h2{color:#f7fbff;text-shadow:0 0 20px #76cdff33;margin-top:18px;font-size:2.2rem;font-weight:350;line-height:1}.app-dialog .about-subtitle{color:#9ebbd2;letter-spacing:0;text-transform:uppercase;margin-top:12px;font-size:.86rem;font-weight:650}.about-copy{color:#d8e8f3;border-top:1px solid #7ed3ff38;gap:14px;padding-top:22px;display:grid}.about-copy p{line-height:1.65}.loading-spinner{border:3px solid color-mix(in srgb, var(--panel-text), transparent 78%);border-top-color:var(--selected-border);border-radius:50%;flex:none;width:24px;height:24px;animation:.7s linear infinite loading-spin}@keyframes loading-spin{to{transform:rotate(360deg)}}.settings-field{gap:7px;font-weight:650;display:grid}.settings-field select,.settings-field input{min-height:42px;color:var(--panel-text);background:var(--button-background);border:1px solid var(--button-border);border-radius:6px;padding:0 10px}.settings-group{border:0;gap:8px;min-width:0;margin:0;padding:0;display:grid}.settings-group legend{margin-bottom:8px;padding:0;font-weight:650}.settings-size-fields{grid-template-columns:repeat(2,minmax(0,1fr)) auto;align-items:end;gap:12px;display:grid}.settings-area-output{white-space:nowrap;align-items:center;min-width:70px;min-height:42px;padding-bottom:1px;font-weight:650;display:flex}.settings-reset-button{min-height:40px;color:var(--panel-text);background:var(--button-background);border:1px solid var(--button-border);cursor:pointer;border-radius:7px;justify-self:start;padding:0 14px}.settings-limit-status{color:color-mix(in srgb, var(--panel-text), transparent 28%);font-size:.78rem;line-height:1.35}.settings-reset-button:hover:not(:disabled){background:var(--button-hover)}.settings-reset-button:disabled{cursor:default;opacity:.5}.dialog-close{width:34px;height:34px;color:var(--panel-text);cursor:pointer;background:0 0;border:0;place-items:center;padding:0;display:grid;position:absolute;top:14px;right:14px}.dialog-close svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;width:22px;height:22px}.dialog-actions{justify-content:flex-end;gap:10px;display:flex}.dialog-actions button{cursor:pointer;border-radius:7px;min-width:92px;min-height:40px;padding:0 14px}.dialog-actions .danger-action{color:#fff;background:var(--danger);border-color:var(--danger)}.shortcut-list{gap:8px;margin:0;display:grid}.shortcut-list div{grid-template-columns:minmax(130px,.9fr) 1fr;align-items:baseline;gap:14px;display:grid}.shortcut-list dt,.shortcut-list dd{margin:0;line-height:1.35}.shortcut-list dt{font-weight:700}.shortcut-list dd{text-align:right}@media (width>=861px) and (width<=1100px){:root{--desktop-toolbar-width:106px}.app-rail{grid-template-columns:repeat(2,72px);gap:8px;padding:10px 8px}.color-rail{right:var(--desktop-toolbar-width)}.toolbar{width:var(--desktop-toolbar-width);grid-template-columns:repeat(2,44px);grid-auto-rows:48px;gap:10px;padding:10px 6px}.classic-toolbar{grid-template-columns:repeat(2,44px);grid-auto-rows:48px;gap:10px;padding:10px 6px}.toolbar-group{grid-template-columns:repeat(2,44px);grid-auto-rows:48px;gap:6px}.zoom-button-pair{grid-template-columns:repeat(2,44px);gap:6px}.zoom-controls{grid-template-columns:repeat(2,44px);grid-auto-rows:48px;gap:6px}.rail-section{grid-template-rows:18px minmax(0,1fr)}.option-list,.color-list{grid-auto-rows:56px;gap:6px}.option-button,.color-button,.native-color-picker,.pen-tool-button{width:56px;height:56px}.option-button svg{width:46px;height:46px}.icon-button{width:44px;height:44px}}@media (width<=860px){:root{--mobile-toolbar-height:56px;--mobile-color-rail-height:80px;--mobile-gear-rail-height:128px;--mobile-menu-height:calc(var(--mobile-toolbar-height) + var(--mobile-color-rail-height) + var(--mobile-gear-rail-height) + env(safe-area-inset-bottom))}#surface{inset:0 0 var(--mobile-menu-height) 0}body.menu-collapsed #surface{inset:0}.app-rail{width:auto;padding:8px max(10px, env(safe-area-inset-right)) 8px max(10px, env(safe-area-inset-left));border-left:0;border-right:0;border-top:1px solid var(--panel-border);grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;transition:transform .16s;display:grid;inset:auto 0}.gear-rail{height:var(--mobile-gear-rail-height);bottom:calc(var(--mobile-toolbar-height) + var(--mobile-color-rail-height) + env(safe-area-inset-bottom))}.color-rail{height:var(--mobile-color-rail-height);bottom:calc(var(--mobile-toolbar-height) + env(safe-area-inset-bottom))}.rail-section{grid-template-rows:16px minmax(0,1fr);grid-template-columns:minmax(0,1fr);align-items:stretch;gap:5px;min-width:0}.rail-section h2,.color-rail .rail-section h2{text-align:left;text-overflow:ellipsis;white-space:nowrap;justify-self:start;width:100%;min-width:0;max-width:100%;font-size:.72rem;overflow:hidden;transform:none}.option-list,.color-list{overscroll-behavior-x:contain;grid-template-rows:54px;grid-auto-rows:54px;grid-auto-columns:48px;grid-auto-flow:column;gap:6px;overflow:auto hidden}.option-button{grid-template-rows:minmax(0,1fr) 11px;gap:1px;width:48px;height:54px;padding:3px 2px 2px}.option-button svg{align-self:end;width:36px;height:36px}.option-button span{align-self:end;width:100%;font-size:.56rem;position:static;inset:auto}.color-button,.native-color-picker,.pen-tool-button{width:38px;height:38px}.toolbar{width:auto;min-height:0;height:calc(var(--mobile-toolbar-height) + env(safe-area-inset-bottom));padding:4px max(10px, env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));border-top:1px solid var(--panel-border);border-left:0;grid-template-columns:none;grid-auto-rows:48px;grid-auto-columns:max-content;grid-auto-flow:column;place-content:center start;gap:12px;transition:transform .16s;inset:auto 0 0;overflow:auto hidden}.toolbar .zoom-status,.classic-toolbar .zoom-status{grid-column:auto;width:58px;min-height:48px}.toolbar-group{grid-column:auto;grid-template-columns:none;grid-auto-rows:48px;grid-auto-columns:48px;grid-auto-flow:column;justify-content:start;gap:7px;width:max-content}.zoom-button-pair{display:contents}.icon-button{width:48px;height:48px}.menu-toggle-button{right:max(12px, env(safe-area-inset-right));bottom:calc(var(--mobile-menu-height) + 10px);z-index:6;background:var(--panel-background);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:bottom .16s;display:grid;box-shadow:0 6px 22px #0000002e}body.menu-collapsed .app-rail,body.menu-collapsed .toolbar{transform:translateY(var(--mobile-menu-height));pointer-events:none}body.menu-collapsed .menu-toggle-button{bottom:max(12px, env(safe-area-inset-bottom))}.classic-layout{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(100px, 1fr) 112px 78px calc(56px + env(safe-area-inset-bottom));grid-template-areas:"stage""library""colors""actions";padding-top:56px}.classic-stage{padding:10px}.classic-board{width:min(100%, max(120px, calc((100vh - 322px - env(safe-area-inset-bottom)) * 1.5)))}.classic-library{padding:7px max(10px, env(safe-area-inset-right)) 7px max(10px, env(safe-area-inset-left));border-top:1px solid var(--panel-border);border-right:0}.classic-panel-section{grid-template-rows:15px minmax(0,1fr);gap:5px}.classic-panel-section h2{text-align:left}.classic-part-list{grid-template-columns:none;grid-auto-rows:62px;grid-auto-columns:52px;grid-auto-flow:column;justify-content:start;gap:7px;overflow:auto hidden}.classic-part-button{width:52px;height:62px}.classic-part-button svg{width:42px;height:42px}.classic-colors{padding:6px max(10px, env(safe-area-inset-right)) 6px max(10px, env(safe-area-inset-left));border-top:1px solid var(--panel-border);border-left:0;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.classic-color-list{grid-auto-rows:38px;grid-auto-columns:38px;grid-auto-flow:column;justify-content:start;gap:6px;overflow:auto hidden}.classic-color-list .color-button,.classic-color-list .native-color-picker,.classic-color-list .pen-tool-button{width:38px;height:38px}.classic-toolbar{padding:4px max(10px, env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));border-top:1px solid var(--panel-border);border-left:0;grid-template-columns:none;grid-auto-rows:48px;grid-auto-columns:max-content;grid-auto-flow:column;place-content:center start;gap:12px;overflow:auto hidden}.shortcut-list div{grid-template-columns:1fr;gap:2px}.shortcut-list dd{text-align:left}}@media (width<=480px){.about-dialog form{max-height:86vh;padding:26px 22px 30px}.about-logo{width:min(180px,54vw)}.app-dialog .about-header h2{font-size:1.85rem}.project-gallery-dialog form{padding:18px}.project-gallery-list,.settings-size-fields{grid-template-columns:minmax(0,1fr)}.settings-area-output{min-height:24px}:root{--mobile-toolbar-height:54px;--mobile-color-rail-height:76px;--mobile-gear-rail-height:120px}.app-rail{gap:8px;padding-top:7px;padding-bottom:7px}.rail-section{grid-template-rows:15px minmax(0,1fr);grid-template-columns:minmax(0,1fr);gap:5px}.rail-section h2,.color-rail .rail-section h2{font-size:.66rem}.option-list,.color-list{grid-template-rows:52px;grid-auto-rows:52px;grid-auto-columns:46px}.option-button{width:46px;height:52px}.option-button svg{width:34px;height:34px}.color-button,.native-color-picker,.pen-tool-button{width:36px;height:36px}.icon-button{width:46px;height:46px}.variant-switcher{top:max(8px, env(safe-area-inset-top));grid-template-columns:repeat(2,minmax(64px,1fr));max-width:calc(100vw - 88px)}.variant-switcher button{min-width:64px;padding:0 9px}.global-settings-button,.global-about-button,.global-developer-button{top:max(8px, env(safe-area-inset-top));width:40px;height:40px;left:auto}.global-settings-button{right:52px}.global-about-button{right:6px}.global-developer-button{right:52px}html.developer-mode .global-settings-button{right:98px}html.developer-mode .variant-switcher{max-width:calc(100vw - 156px);left:6px;transform:none}.classic-layout{grid-template-rows:minmax(90px, 1fr) 106px 74px calc(54px + env(safe-area-inset-bottom));padding-top:54px}.classic-stage{padding:7px}.classic-board{width:min(100%, max(120px, calc((100vh - 302px - env(safe-area-inset-bottom)) * 1.5)))}.classic-part-list{grid-auto-rows:58px;grid-auto-columns:48px;gap:6px}.classic-part-button{width:48px;height:58px}.classic-part-button svg{width:38px;height:38px}}