@font-face{font-family:Geist Mono Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/geist-mono-latin-wght-normal-XN7g48iV.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}:root{--surface-chrome: #ffffff;--surface-page: var(--surface-chrome);--surface-stage: #fafafa;--surface-panel: #ffffff;--surface-selected: #f1f8f0;--border-subtle: #dcdcda;--border-panel: #0a0a0a;--border-panel-width: 1px;--border-strong: #0a0a0a;--border-width: 1px;--text-primary: #0a0a0a;--text-muted: #737370;--text-on-accent: #0a0a0a;--text-danger: #b3372a;--text-warning: #8a6d1f;--accent: #12ad38;--focus-ring: rgba(18, 173, 56, .22);--disabled-opacity: .4;--focus-ring-width: 2px;--radius-panel: 0px;--radius-preview: 0px;--radius-chip: 0px;--ring-width: 2px;--grid-dot: #b5b5b2;--grid-editor-width: 50%;--grid-editor-max: 300px;--app-max: 1200px;--control-row-width: 252px ;--font-ui: "Geist Mono Variable", "Geist Mono", ui-monospace, "SF Mono", monospace;--font-display: "Geist Mono Variable", "Geist Mono", ui-monospace, "SF Mono", monospace;--label-size: 12px;--label-tracking: .12em;--label-transform: uppercase;--weight-label: 400;--weight-action: 600;--weight-cell: 600;--name-size: 17px;--weight-name: 600;--section-size: 15px;--weight-section: 700;--section-tracking: .12em;--note-size: 12px;--selected-bg: var(--surface-selected);--selected-fg: var(--text-primary);--selected-border: var(--accent);--selected-ring-width: 1px;--action-bg: #0a0a0a;--action-fg: #ffffff;--action-border: #0a0a0a;--action-bg-hover: #262626;--invert-bg: #0a0a0a;--invert-fg: #ffffff;--backdrop-dialog: rgba(0, 0, 0, .68);--selected-block: var(--accent);--selected-block-fg: #ffffff;--selected-outline: var(--accent);--toggle-on-bg: var(--surface-selected);--toggle-on-fg: var(--text-primary);--toggle-on-border: var(--accent);--spring-geo: cubic-bezier(.3, 1.45, .35, 1);--panel-slide: cubic-bezier(.3, 1.1, .4, 1);--dialog-pop: cubic-bezier(.3, 1.3, .4, 1);--exit-ease: cubic-bezier(.2, .6, .3, 1);--page-texture: none;--stage-texture: radial-gradient(circle, #d8d8d4 1px, transparent 1px);--stage-texture-size: 14px 14px}[data-theme=dark]{--surface-chrome: #000000;--surface-page: var(--surface-chrome);--surface-stage: #000000;--surface-panel: #000000;--surface-selected: #0f120f;--border-subtle: #2a2a26;--border-panel: #3c3c36;--border-panel-width: 1px;--border-strong: #3c3c36;--border-width: 1px;--text-primary: #f2f2ec;--text-muted: #7d7d75;--text-on-accent: #000000;--text-danger: #e0685a;--text-warning: #d9a521;--accent: #3fe06b;--focus-ring: rgba(63, 224, 107, .28);--disabled-opacity: .4;--focus-ring-width: 2px;--radius-panel: 0px;--radius-preview: 0px;--radius-chip: 0px;--ring-width: 2px;--grid-dot: #4a4a44;--grid-editor-width: 50%;--grid-editor-max: 300px;--app-max: 1200px;--control-row-width: 252px ;--font-ui: "Geist Mono Variable", "Geist Mono", ui-monospace, "SF Mono", monospace;--font-display: "Geist Mono Variable", "Geist Mono", ui-monospace, "SF Mono", monospace;--label-size: 12px;--label-tracking: .12em;--label-transform: uppercase;--weight-label: 400;--weight-action: 600;--weight-cell: 600;--name-size: 17px;--weight-name: 600;--section-size: 15px;--weight-section: 700;--section-tracking: .12em;--note-size: 12px;--selected-bg: var(--surface-selected);--selected-fg: var(--text-primary);--selected-border: var(--accent);--selected-ring-width: 1px;--action-bg: #66f892;--action-fg: #000000;--action-border: #66f892;--action-bg-hover: #8dfaad;--invert-bg: #f2f2ec;--invert-fg: #000000;--backdrop-dialog: rgba(0, 0, 0, .72);--selected-block: var(--accent);--selected-block-fg: #000000;--selected-outline: var(--accent);--toggle-on-bg: #1c201c;--toggle-on-fg: #f2f2ec;--toggle-on-border: var(--accent);--spring-geo: cubic-bezier(.3, 1.45, .35, 1);--panel-slide: cubic-bezier(.3, 1.1, .4, 1);--dialog-pop: cubic-bezier(.3, 1.3, .4, 1);--exit-ease: cubic-bezier(.2, .6, .3, 1);--page-texture: none;--stage-texture: radial-gradient(circle, #1e1e1b 1px, transparent 1px);--stage-texture-size: 14px 14px}.dialog-light{--surface-panel: #ffffff;--surface-stage: #fafafa;--surface-selected: #f1f8f0;--border-subtle: #dcdcda;--border-panel: #0a0a0a;--text-primary: #0a0a0a;--text-muted: #737370;--accent: #12ad38;--action-bg: #0a0a0a;--action-fg: #ffffff;--action-bg-hover: #262626;--focus-ring: rgba(18, 173, 56, .22)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-ui);background:var(--surface-page);overflow-x:clip;background-image:var(--page-texture);color:var(--text-primary);-webkit-font-smoothing:antialiased}button{font:inherit;color:inherit;cursor:pointer}.app{max-width:var(--app-max);margin:0 auto;min-height:100vh;display:grid;grid-template-columns:minmax(300px,2fr) minmax(0,3fr);grid-template-rows:auto auto 1fr;grid-template-areas:"head     actions" "editor   stage" "controls stage";column-gap:0;row-gap:0}.region{min-width:0}.region--head,.region--actions,.region--editor,.region--controls{background:var(--surface-chrome)}.region--head{grid-area:head;padding:20px 28px;border-bottom:var(--border-panel-width) solid var(--border-panel);position:relative;display:flex;flex-direction:row;align-items:center;gap:20px}@media not (max-width:1200px){.region--editor,.region--controls{border-left:var(--border-panel-width) solid var(--border-panel)}.region--stage{border-right:var(--border-panel-width) solid var(--border-panel)}}.region--head:after{content:"";position:absolute;left:calc(-.5*(100vw - min(100vw,var(--app-max))));width:100vw;bottom:calc(-1 * var(--border-panel-width));height:var(--border-panel-width);background:var(--border-panel);pointer-events:none}.region--head p{min-width:0}.logo{height:40px;width:auto;color:var(--accent);display:block;flex-shrink:0;overflow:visible}.head__text{display:flex;flex-direction:column;gap:2px;min-width:0}.region--head h1{font-family:var(--font-display);font-size:var(--name-size);font-weight:var(--weight-name);line-height:1.2;color:var(--text-primary)}.region--head p{font-size:13px;color:var(--text-muted)}.region--actions{grid-area:actions;padding:20px 28px;border-bottom:var(--border-panel-width) solid var(--border-panel);display:flex;flex-direction:column;justify-content:center;align-items:flex-end;gap:6px}.icon-btn.menu-btn{display:none}.actions__row{display:flex;align-items:center;gap:12px}@keyframes theme-ripple{0%{transform:scale(.001);opacity:1}78%{opacity:1}to{transform:scale(1);opacity:0}}.theme-ripple{position:fixed;z-index:9998;border-radius:50%;pointer-events:none;animation:theme-ripple 1.56s var(--exit-ease) forwards}.region--head,.region--actions,.region--editor,.region--controls,.region--stage,.icon-btn,.chip,.toggle,.swatch,.grid-editor__box,.grid-cell,.export__btn{transition:background-color .8s ease,border-color .8s ease,color .8s ease}.toggle--square .control__caption,.toggle--square .ctrl-icon,.toggle--square .ctrl-icon *{transition:fill .26s ease,stroke .26s ease,color .26s ease}.ctrl-icon .ctrl-icon__tile,.ctrl-icon .ctrl-icon__shadow,.ctrl-icon .ctrl-icon__ghost,.ctrl-icon .ctrl-icon__step{transform-box:fill-box;transform-origin:center;transition:transform .42s var(--spring-geo),fill .26s ease,stroke .26s ease}.ctrl-icon .ctrl-icon__shadow{transform-origin:top left}.ctrl-icon .ctrl-icon__step{transform:translateY(0)}.ctrl-icon .ctrl-icon__step--back{transform:translateY(16px)}.ctrl-icon .ctrl-icon__step--mid{transform:translateY(8px)}.ctrl-icon .ctrl-icon__step--back.ctrl-icon__step--on,.ctrl-icon .ctrl-icon__step--mid.ctrl-icon__step--on{transform:translateY(0)}.ctrl-icon .ctrl-icon__step--mid.ctrl-icon__step--on{transition-delay:40ms}.ctrl-icon .ctrl-icon__step--back.ctrl-icon__step--on{transition-delay:80ms}.ctrl-icon .ctrl-icon__tile{transform:translate(0)}.ctrl-icon .ctrl-icon__shadow{transform:scale(0)}.ctrl-icon .ctrl-icon__ghost{transform:scale(.85)}.ctrl-icon--apart .ctrl-icon__tile--left{transform:translate(-3px)}.ctrl-icon--apart .ctrl-icon__tile--right{transform:translate(3px)}.ctrl-icon .ctrl-icon__shadow--on,.ctrl-icon .ctrl-icon__ghost--on{transform:scale(1)}@media(prefers-reduced-motion:reduce){.ctrl-icon .ctrl-icon__tile,.ctrl-icon .ctrl-icon__shadow,.ctrl-icon .ctrl-icon__ghost,.ctrl-icon .ctrl-icon__step{transition:none}}@keyframes icon-morph-in{0%{opacity:0;transform:rotate(-90deg) scale(.4)}to{opacity:1;transform:none}}.icon-btn__icon{transform-origin:center;animation:icon-morph-in .55s cubic-bezier(.3,1.3,.4,1)}@media(prefers-reduced-motion:reduce){.theme-ripple,.icon-btn__icon{animation:none}}.logo__cube,.logo__letter{transform-box:fill-box;transform-origin:center}@keyframes logo-assemble-left{0%{transform:translateY(-36px);opacity:0}to{transform:none;opacity:1}}@keyframes logo-assemble-right{0%{transform:translateY(-52px);opacity:0}to{transform:none;opacity:1}}@keyframes logo-letters-in{0%{opacity:0}to{opacity:1}}.logo__cube--left{animation:logo-assemble-left .55s cubic-bezier(.3,1.45,.35,1) backwards}.logo__cube--right{animation:logo-assemble-right .55s cubic-bezier(.3,1.45,.35,1) .1s backwards}.logo:hover .logo__cube--left{transform:translate(-3px,2px) rotate(-2.5deg)}.logo:hover .logo__cube--right{transform:translate(3px,-2px) rotate(2.5deg)}.logo__cube{transition:transform .55s cubic-bezier(.3,1.45,.35,1)}@keyframes logo-letter-flip{0%,90%,to{transform:none}93%{transform:scaleX(.12)}96%{transform:scaleX(1)}}.logo__letter{animation:logo-letters-in .4s ease .5s backwards,logo-letter-flip 8s linear infinite}.logo__letter--c{animation-delay:.5s,3s}.logo__letter--u{animation-delay:.5s,3.2s}.logo__letter--b{animation-delay:.5s,3.4s}.logo__letter--e{animation-delay:.5s,3.6s}@media(prefers-reduced-motion:reduce){.logo__cube,.logo__letter{animation:none;transition:none}.logo:hover .logo__cube--left,.logo:hover .logo__cube--right{transform:none}}.icon-btn{width:44px;height:44px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;padding:0;border:none;border-radius:var(--radius-panel);background:none;color:var(--text-primary)}.icon-btn:focus-visible{outline:none;box-shadow:0 0 0 var(--focus-ring-width) var(--focus-ring)}.icon-btn__icon{width:17px;height:17px}.region--editor{grid-area:editor;padding:28px}.region--controls{grid-area:controls;padding:0 0 32px}.region--stage{grid-area:stage;border-left:var(--border-panel-width) solid var(--border-panel);padding:32px;display:flex;align-items:center;justify-content:center;background-color:var(--surface-stage);background-image:var(--stage-texture);background-size:var(--stage-texture-size)}.link-btn{height:44px;padding:0 4px;flex-shrink:0;border:none;border-radius:var(--radius-panel);background:none;font-size:13px;color:var(--text-primary)}.link-btn:hover{color:var(--accent)}.link-btn:focus-visible{outline:none;box-shadow:0 0 0 var(--focus-ring-width) var(--focus-ring)}@keyframes about-fade-in{0%{opacity:0}to{opacity:1}}@keyframes about-fade-out{0%{opacity:1}to{opacity:0}}@keyframes about-slide-in{0%{opacity:0;transform:translate(100%)}80%{opacity:1}90%{transform:translate(-4px)}to{opacity:1;transform:translate(0)}}@keyframes about-slide-out{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(100%)}}.about__backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:9990;background:#0a0a0a66;animation:about-fade-in .32s var(--exit-ease)}.about__backdrop[data-state=closed]{animation:about-fade-out .24s var(--exit-ease)}.about__positioner{position:fixed;top:0;right:0;bottom:0;left:0;z-index:9991;display:flex;justify-content:flex-end;pointer-events:none}.about{pointer-events:auto;width:clamp(320px,32vw,440px);max-width:100%;height:100%;overflow-y:auto;overscroll-behavior:contain;padding:28px;background:var(--surface-panel);border-left:var(--border-panel-width) solid var(--border-panel);border-radius:var(--radius-panel);display:flex;flex-direction:column;align-items:flex-start;gap:16px;animation:about-slide-in .32s var(--panel-slide)}.about[data-state=closed]{animation:about-slide-out .24s var(--exit-ease)}.about__close{align-self:flex-end;margin:-8px -8px 0 0}.about .logo{height:32px}.about__title{font-family:var(--font-display);font-size:var(--name-size);font-weight:var(--weight-name);color:var(--text-primary)}.about__para{font-size:13px;line-height:1.65;color:var(--text-muted)}.about__rule{width:100%;height:0;border:none;border-top:var(--border-width) solid var(--border-subtle);margin:4px 0}.about__links{list-style:none;display:flex;flex-direction:column;gap:8px}.about__link{font-size:13px;color:var(--text-primary);text-decoration-color:var(--border-subtle);text-underline-offset:3px}.about__link:hover{color:var(--accent);text-decoration-color:var(--accent)}.about__link:focus-visible{outline:none;box-shadow:0 0 0 var(--focus-ring-width) var(--focus-ring)}.about__meta{margin-top:auto;padding-top:16px;font-size:var(--label-size);letter-spacing:var(--label-tracking);color:var(--text-muted)}@media(prefers-reduced-motion:reduce){.about{animation:about-fade-in .16s linear}.about[data-state=closed]{animation:about-fade-out .16s linear}.about__backdrop{animation:about-fade-in .16s linear}.about__backdrop[data-state=closed]{animation:about-fade-out .16s linear}}@media(max-width:900px){.app{min-height:0;grid-template-columns:1fr auto;grid-template-rows:auto;grid-template-areas:"head     actions" "editor   editor" "controls controls" "stage    stage"}.region--stage{border-left:none;border-top:var(--border-width) solid var(--border-subtle)}}.control h2{font-family:var(--font-display);font-size:var(--section-size);font-weight:var(--weight-section);letter-spacing:var(--section-tracking);text-transform:var(--label-transform);color:var(--text-primary);margin-bottom:14px}.control__row{display:flex;flex-wrap:wrap;gap:8px}.controls{display:flex;flex-direction:column;gap:0;padding-left:0;padding-right:0}.controls>.control{padding:28px}.control+.control,.region--controls{border-top:var(--border-panel-width) solid var(--border-panel)}.grid-editor{width:100%}.grid-editor__hint{display:block;margin-bottom:12px;font-size:12px;line-height:1.4;color:var(--text-muted)}.grid-editor__box{--grid-cell-target: 25px;width:max(var(--grid-editor-width),min(100%,calc(var(--grid-cols, 8) * var(--grid-cell-target) + 2 * var(--border-width))));max-width:var(--grid-editor-max);position:relative;display:grid;grid-template-columns:repeat(var(--grid-cols, 8),1fr);background:var(--surface-panel);border:var(--border-width) solid var(--border-subtle);border-radius:var(--radius-panel);overflow:hidden}.grid-editor__input{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;padding:0;border:none;outline:none;resize:none;overflow:hidden;background:transparent;color:transparent;caret-color:transparent;font-size:16px}.grid-editor__box:focus-within{box-shadow:0 0 0 var(--focus-ring-width) var(--focus-ring)}.grid-cell{aspect-ratio:1;font-size:14px;font-weight:var(--weight-cell);line-height:1;display:flex;align-items:center;justify-content:center;cursor:text;-webkit-user-select:none;user-select:none}@keyframes caret-blink{0%,45%{opacity:1}55%,to{opacity:0}}.grid-dot{width:3px;height:3px;background:var(--grid-dot)}.grid-caret{width:.7em;height:1.4em;background:var(--accent);animation:caret-blink 1.1s step-end infinite}@media(prefers-reduced-motion:reduce){.grid-caret{animation:none}}.grid-cell--active{background:var(--surface-selected)}.chip,.toggle{padding:6px 12px;border:var(--border-width) solid var(--border-subtle);border-radius:var(--radius-chip);background:var(--surface-panel);font-size:13px}.chip{display:inline-flex;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none}.chip[data-state=checked]{background:var(--selected-bg);border-color:var(--selected-border);color:var(--selected-fg);box-shadow:inset 0 0 0 var(--selected-ring-width) var(--selected-border)}.chip[data-focus-visible]{box-shadow:0 0 0 var(--focus-ring-width) var(--focus-ring)}.chip[data-state=checked][data-focus-visible]{box-shadow:inset 0 0 0 var(--selected-ring-width) var(--selected-border),0 0 0 var(--focus-ring-width) var(--focus-ring)}.toggle[data-state=on]:focus-visible{box-shadow:inset 0 0 0 var(--selected-ring-width) var(--selected-border),0 0 0 var(--focus-ring-width) var(--focus-ring)}.chip--icon{padding:5px;line-height:0}.chip--icon{border:none;padding:0;background:none}.chip--icon:hover{box-shadow:inset 0 0 0 var(--border-width) var(--border-panel)}.chip--icon[data-state=checked][data-focus-visible]{box-shadow:0 0 0 var(--focus-ring-width) var(--focus-ring)}.control__squares{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.toggle--square{position:relative;aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:4px;background:var(--surface-panel);border:var(--border-width) solid var(--border-subtle);border-radius:var(--radius-chip);color:var(--text-primary);cursor:pointer;transition:border-color .26s ease,background .26s ease,transform .42s var(--spring-geo)}.toggle--square .ctrl-icon{width:32px;height:32px}.toggle--square .control__caption{font-size:9px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;line-height:1.2;text-align:center}.toggle__dot{position:absolute;top:5px;right:5px;width:6px;height:6px;background:var(--accent);opacity:0;transition:opacity .26s ease}.toggle--square[data-state=on]{background:var(--toggle-on-bg);border-color:var(--toggle-on-border);color:var(--toggle-on-fg)}.toggle--square[data-state=on] .toggle__dot{opacity:1}.toggle--square:hover:not(:disabled){border-color:var(--border-panel)}.toggle--square:active:not(:disabled){transform:scale(.94)}.toggle--square:focus-visible{outline:var(--focus-ring-width) solid var(--accent);outline-offset:2px}.toggle--square:disabled{opacity:var(--disabled-opacity);cursor:not-allowed}@media(max-width:640px),(orientation:landscape)and (max-height:560px)and (min-width:640px){.control__squares{gap:8px}}@media(prefers-reduced-motion:reduce){.toggle--square{transition:border-color .16s ease,background .16s ease}.toggle--square:active:not(:disabled){transform:none}}.control__caption{font-family:var(--font-display);font-size:var(--label-size);font-weight:var(--weight-label);letter-spacing:var(--label-tracking);text-transform:var(--label-transform);line-height:1.2;color:var(--text-primary)}.control__note,.control__value{margin-top:10px;font-size:var(--note-size);line-height:1.5;color:var(--text-muted)}.cube-icon{display:block}.chip [data-part=item-control]{display:none}.toggle[data-state=on]{background:var(--selected-bg);border-color:var(--selected-border);color:var(--selected-fg);box-shadow:inset 0 0 0 var(--selected-ring-width) var(--selected-border)}.toggle:focus-visible{outline:none;box-shadow:0 0 0 var(--focus-ring-width) var(--focus-ring)}.swatch{border-radius:var(--radius-panel);display:flex;align-items:center;justify-content:center;padding:0;overflow:hidden;border:none;box-shadow:inset 0 0 0 var(--border-width) var(--border-subtle)}.swatch:hover:not([data-state=checked]){outline:var(--border-width) solid var(--border-panel);outline-offset:calc(-1 * var(--border-width))}.swatch[data-state=checked]{box-shadow:0 0 0 var(--ring-width) var(--border-strong)}.swatch[data-focus-visible]{box-shadow:inset 0 0 0 var(--border-width) var(--border-subtle),0 0 0 var(--focus-ring-width) var(--focus-ring)}.swatch[data-state=checked][data-focus-visible]{box-shadow:0 0 0 var(--ring-width) var(--border-strong),0 0 0 calc(var(--ring-width) + var(--focus-ring-width)) var(--focus-ring)}.swatch{cursor:pointer;-webkit-user-select:none;user-select:none}.swatch [data-part=item-control]{display:none}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.preview{border:var(--border-width) solid var(--border-subtle);border-radius:var(--radius-preview);max-width:100%;height:auto;position:relative;z-index:1}.export__btn{padding:10px 28px;border:var(--border-width) solid var(--action-border);border-radius:var(--radius-panel);background:var(--action-bg);color:var(--action-fg);font-family:var(--font-display);font-size:13px;font-weight:var(--weight-action);display:inline-flex;align-items:center;gap:8px}.preview__area{display:flex;align-items:flex-start;justify-content:center;width:100%;flex:1 1 auto;min-height:0;min-width:0}.preview__wrap{position:relative;flex-shrink:0;transform-style:preserve-3d}.region--stage{perspective:900px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:12px}@media(prefers-reduced-motion:reduce){.preview__wrap{transition:none;transform:none!important}}@keyframes shutter-flash{0%{opacity:0}10%{opacity:.85}to{opacity:0}}.preview__flash{position:absolute;top:0;right:0;bottom:0;left:0;background:#fff;border-radius:var(--radius-preview);pointer-events:none;animation:shutter-flash .5s ease-out forwards}@keyframes export-progress{0%{transform:scaleX(0)}to{transform:scaleX(1)}}.export__btn{position:relative;overflow:hidden}.export__bar{position:absolute;left:0;bottom:0;width:100%;height:3px;background:currentColor;opacity:.55;transform-origin:left center;animation:export-progress .75s linear forwards}.export__btn--done{background:var(--action-fg);color:var(--action-bg);border-color:var(--action-fg);transition:background .2s ease,color .2s ease,border-color .2s ease}.export__icon{width:16px;height:16px;flex-shrink:0}.export__btn:disabled{opacity:var(--disabled-opacity);cursor:not-allowed}.export__note{font-size:12px;color:var(--text-muted)}.export__error{font-size:13px;color:var(--text-danger)}.grid-editor__hint--warn{color:var(--text-warning)}@media(max-width:640px){.app{grid-template-areas:"head     actions" "stage    stage" "editor   editor" "controls controls"}.preview__area{width:50%;aspect-ratio:1;flex:none;margin:0 auto}.actions__row{display:none}.icon-btn.menu-btn{display:flex}.region--actions{display:flex;align-items:center;justify-content:flex-end}.about{width:100%;border-left:none}.region--head,.region--actions{padding:14px 16px}.region--head p{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.app{grid-template-columns:minmax(0,1fr) auto}.region--editor{padding:20px 16px}.app{--grid-editor-width: 100%;--grid-editor-max: none}.region--controls{padding:0 0 40px}.controls>.control{padding:20px 16px}.region--stage{position:sticky;top:0;z-index:1;background-color:var(--surface-stage);border-left:none;border-top:none;border-bottom:var(--border-width) solid var(--border-subtle);padding:16px 16px 12px}}.menu__list{align-self:stretch;display:flex;flex-direction:column;gap:4px;margin-top:8px}.menu__item{display:block;width:100%;min-height:52px;padding:12px 4px;border:none;border-bottom:var(--border-width) solid var(--border-subtle);border-radius:0;background:none;color:var(--text-primary);font-size:17px;text-align:left}.menu__item:hover{color:var(--accent)}.menu__item:focus-visible{outline:none;box-shadow:0 0 0 var(--focus-ring-width) var(--focus-ring)}.menu__item:disabled{opacity:var(--disabled-opacity)}.menu__item--action{margin-top:12px;border:var(--border-width) solid var(--action-border);background:var(--action-bg);color:var(--action-fg);text-align:center;font-weight:var(--weight-action);letter-spacing:var(--label-tracking);text-transform:var(--label-transform);font-size:13px}.share__backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:9990;background:var(--backdrop-dialog);animation:about-fade-in .26s ease}.share__backdrop[data-state=closed]{animation:about-fade-out .26s ease}.share__positioner{position:fixed;top:0;right:0;bottom:0;left:0;z-index:9991;display:flex;align-items:center;justify-content:center;pointer-events:none}@keyframes share-pop-in{0%{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}@keyframes share-pop-out{0%{opacity:1;transform:none}to{opacity:0;transform:translateY(14px) scale(.97)}}.share{pointer-events:auto;width:340px;max-width:calc(100vw - 32px);display:flex;flex-direction:column;background:var(--surface-panel);border:var(--border-panel-width) solid var(--border-panel);border-radius:var(--radius-panel);box-shadow:none;animation:share-pop-in .32s var(--dialog-pop)}.share[data-state=closed]{animation:share-pop-out .26s ease}.share__thumb{position:relative;border-bottom:var(--border-panel-width) solid var(--border-panel);line-height:0}.share__badge{position:absolute;left:14px;top:12px;font-family:var(--font-display);font-size:13px;font-weight:var(--weight-section);letter-spacing:var(--section-tracking);text-transform:uppercase;line-height:1}.share__close{position:absolute;right:10px;top:8px;font-size:16px;line-height:1;padding:2px 6px;background:none;border:none;cursor:pointer;transition:transform .26s var(--spring-geo)}.share__close:hover{transform:scale(1.06)}.share__close:focus-visible{outline:var(--focus-ring-width) solid var(--accent)}.share__body{display:flex;flex-direction:column;gap:10px;padding:16px}.share__row{display:flex;gap:8px}.share__url{flex:1;min-width:0;padding:0 10px;font-family:var(--font-ui);font-size:11px;color:var(--text-muted);background:var(--surface-stage);border:var(--border-width) solid var(--border-subtle);border-radius:var(--radius-chip);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.share__url:focus-visible{outline:var(--focus-ring-width) solid var(--accent);outline-offset:-1px}.share__copy{flex:none;padding:10px 14px;font-family:var(--font-ui);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--action-fg);background:var(--action-bg);border:none;border-radius:var(--radius-chip);cursor:pointer;transition:background .26s ease}.share__copy:hover{background:var(--action-bg-hover)}.share__copy:active{transform:translateY(1px)}.share__copy:focus-visible{outline:var(--focus-ring-width) solid var(--accent);outline-offset:2px}.share__copy[data-copied]{background:var(--accent);color:#fff}.share__note{font-size:10px;line-height:1.5;color:var(--text-muted)}@media(prefers-reduced-motion:reduce){.share{animation:about-fade-in .16s ease}.share[data-state=closed]{animation:about-fade-out .16s ease}.share__close:hover{transform:none}}.link-btn:disabled{opacity:var(--disabled-opacity);cursor:default}.link-btn:disabled:hover{color:var(--text-primary)}.preview__empty{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:24px;text-align:center;border-radius:var(--radius-preview);pointer-events:none}.preview__empty-title{font-size:13px;font-weight:var(--weight-action);color:var(--text-primary)}.preview__empty-body{max-width:26em;font-size:13px;line-height:1.5;color:var(--text-muted)}.preview__empty-action{pointer-events:auto;display:flex;align-items:center;gap:8px;min-height:44px;margin-top:4px;padding:8px 16px;border:var(--border-width) solid var(--border-strong);border-radius:var(--radius-panel);background:var(--surface-panel);color:var(--text-primary);font-size:var(--label-size);font-weight:var(--weight-action);letter-spacing:var(--label-tracking);text-transform:var(--label-transform)}.preview__empty-action:hover{border-color:var(--accent);color:var(--accent)}.preview__empty-action:focus-visible{outline:none;box-shadow:0 0 0 var(--focus-ring-width) var(--focus-ring)}@keyframes poster-bob{0%,to{transform:translateY(0)}45%{transform:translateY(-3px)}}.poster--bob{animation:poster-bob .8s var(--exit-ease)}.export-ghost{position:fixed;z-index:60;pointer-events:none;animation:export-print .52s var(--dialog-pop) forwards}@keyframes export-print{0%{opacity:0;transform:translateY(12px) scale(.86)}18%{opacity:1;transform:translate(0) scale(1)}to{opacity:0;transform:translate(var(--fly-dx),var(--fly-dy)) scale(.12)}}.preview__empty-caret{display:inline-block;width:.55em;height:1em;margin-left:2px;vertical-align:text-bottom;background:currentColor;animation:caret-blink 1.1s step-end infinite}@keyframes empty-action-pop{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}.preview__empty-action[data-typed]{animation:empty-action-pop .32s var(--dialog-pop)}@media(prefers-reduced-motion:reduce){.preview__empty-caret{animation:none}.preview__empty-action[data-typed]{animation:about-fade-in .16s ease}}.preview__empty-dice{width:18px;height:18px;flex-shrink:0}.stage-bar-group{display:flex;flex-direction:column;align-items:center;gap:6px;flex-shrink:0}.stage-bar{display:flex;align-items:center;gap:8px;padding:6px 8px;background:var(--surface-panel);border:var(--border-width) solid var(--border-subtle);border-radius:var(--radius-chip);flex-shrink:0;flex-wrap:wrap;justify-content:center}.stage-bar__rule{width:1px;height:28px;background:var(--border-subtle);flex:none;margin-left:auto}.stage-bar__caption{margin:0;font-size:12px;line-height:1.4;color:var(--text-muted)}.aspect{display:flex;justify-content:center;flex-shrink:0}.aspect__row{display:flex;gap:8px}.aspect__item{display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:var(--border-width) solid transparent;border-radius:var(--radius-panel);background:none;color:var(--text-muted);cursor:pointer}.aspect__item:hover{background:var(--surface-stage);color:var(--text-primary)}.aspect__item:active:not(:disabled){background:var(--surface-stage)}.aspect__item[data-state=checked]{color:var(--selected-block-fg);background:none}.aspect__item[data-state=checked]:hover{background:none;color:var(--selected-block-fg)}.aspect__item[data-focus-visible],.stage-bar__bg:focus-visible{outline:none;box-shadow:0 0 0 var(--focus-ring-width) var(--focus-ring)}.aspect__item:disabled{opacity:var(--disabled-opacity);cursor:not-allowed}.aspect__item [data-part=item-control]{display:none}.stage-bar__bg[data-state=on]{background:var(--toggle-on-bg);border-color:var(--toggle-on-border);color:var(--toggle-on-fg)}.control__row--slide .aspect__item{position:relative;z-index:1}.aspect__icon{width:24px;height:24px;flex-shrink:0;--icon-face: var(--surface-chrome)}.aspect__icon--bg{width:32px;height:32px}.bg-icon__ground{fill:none;stroke:var(--text-muted);transition:fill .26s ease,stroke .26s ease}.bg-icon__ground--on{fill:var(--accent);stroke:var(--accent)}.input-surface__head{display:flex;align-items:baseline;justify-content:space-between;gap:8px}.input-surface__tabs{display:flex;border:var(--border-panel-width) solid var(--border-panel)}.input-tab{padding:6px 12px;font-family:var(--font-ui);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-primary);background:transparent;border:none;cursor:pointer;transition:background .26s ease,color .26s ease}.input-tab+.input-tab{border-left:var(--border-panel-width) solid var(--border-panel)}.input-tab:hover{color:var(--accent)}.input-tab[data-selected]{background:var(--invert-bg);color:var(--invert-fg)}.input-tab[data-selected]:hover{color:var(--invert-fg)}.input-tab:focus-visible{outline:var(--focus-ring-width) solid var(--accent);outline-offset:-2px}.input-surface__panel[hidden]{display:none}.text-input{display:flex;flex-direction:column;gap:8px}.text-input__field{width:var(--control-row-width);max-width:100%;height:calc(5.25em + 26px);padding:12px;border:var(--border-width) solid var(--border-subtle);border-radius:var(--radius-panel);background:var(--surface-panel);color:var(--text-primary);font-family:var(--font-ui);font-size:16px;line-height:1.5;resize:vertical}.text-input__field::placeholder{color:var(--text-muted)}.text-input__field:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 var(--focus-ring-width) var(--focus-ring)}@media(max-width:640px),(orientation:landscape)and (max-height:560px)and (min-width:640px){.text-input__field{width:100%}}.examples__head{display:flex;align-items:baseline;justify-content:space-between;gap:8px}.examples__all{height:auto;font-size:var(--label-size);letter-spacing:var(--label-tracking);text-transform:var(--label-transform);color:var(--text-muted)}.examples__all:hover{color:var(--accent)}.examples__row{display:flex;gap:8px;overflow-x:auto;min-width:0;scroll-snap-type:x proximity;padding:3px;margin:-3px;scrollbar-width:none}.examples__row::-webkit-scrollbar{display:none}.example{position:relative;flex-shrink:0;scroll-snap-align:start;display:flex;align-items:center;justify-content:center;padding:0;border:none;border-radius:var(--radius-panel);background:none;overflow:hidden;outline:var(--border-width) solid var(--border-subtle);outline-offset:calc(-1 * var(--border-width))}.example:hover{outline-color:var(--border-panel)}.example[aria-current=true]{outline:var(--ring-width) solid var(--accent);outline-offset:calc(-1 * var(--ring-width))}.example:focus-visible{box-shadow:0 0 0 var(--focus-ring-width) var(--focus-ring)}.example{width:52px;height:52px}.example--dice{color:var(--text-primary)}.examples-panel{padding:0;gap:0;overflow:hidden}.examples-panel__bar{flex:none;display:flex;align-items:center;justify-content:space-between;width:100%;padding:14px 20px;background:var(--invert-bg);color:var(--invert-fg)}.examples-panel__title{font-family:var(--font-display);font-size:var(--section-size);font-weight:var(--weight-section);letter-spacing:var(--section-tracking);text-transform:uppercase;color:var(--invert-fg)}.examples-panel__close{font-size:16px;line-height:1;padding:2px 6px;background:none;border:none;color:var(--invert-fg);cursor:pointer;transition:color .26s ease}.examples-panel__close:hover{color:var(--accent)}.examples-panel__close:focus-visible{outline:var(--focus-ring-width) solid var(--accent)}.examples-panel__surprise{flex:none;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:44px;font-family:var(--font-ui);font-size:12px;font-weight:600;letter-spacing:var(--section-tracking);text-transform:uppercase;color:var(--text-primary);background:var(--surface-panel);border:none;border-bottom:var(--border-panel-width) solid var(--border-panel);cursor:pointer;transition:background .26s ease,color .26s ease}.examples-panel__surprise:hover{color:var(--accent)}.dice__body{transform-box:fill-box;transform-origin:center;transition:transform .3s var(--spring-geo)}@keyframes dice-spin{to{transform:rotate(360deg)}}@keyframes dice-roll{0%{transform:rotate(0)}33%{transform:rotate(120deg)}66%{transform:rotate(240deg)}to{transform:rotate(360deg)}}.examples__dice--spin .dice__body{animation:dice-spin .64s var(--exit-ease)}.examples__dice--roll .dice__body{animation:dice-roll .36s steps(1,end)}.examples-panel__surprise:hover .dice__body,.example--dice:hover .dice__body{transform:rotate(180deg)}@media(prefers-reduced-motion:reduce){.examples-panel__surprise:hover .dice__body,.example--dice:hover .dice__body{transform:none}.dice__body{transition-duration:.16s}}.examples-panel__surprise:focus-visible{outline:var(--focus-ring-width) solid var(--accent);outline-offset:-2px}.examples__dice{width:20px;height:20px;flex-shrink:0}.examples-panel__surprise .examples__dice{width:28px;height:28px}.examples-panel__list{flex:1;width:100%;list-style:none;margin:0;padding:0;overflow-y:auto;overscroll-behavior:contain}.preview__handle{position:absolute;z-index:3;width:7px;height:7px;background:var(--text-primary);pointer-events:none;transition:background-color .8s ease}.preview__handle--tl{top:-4px;left:-4px}.preview__handle--tr{top:-4px;right:-4px}.preview__handle--bl{bottom:-4px;left:-4px}.preview__handle--br{bottom:-4px;right:-4px}.preview__corners{position:absolute;top:-6px;right:-6px;bottom:-6px;left:-6px;z-index:2;pointer-events:none;background:linear-gradient(var(--accent),var(--accent)) 0 0 / 14px 1px no-repeat,linear-gradient(var(--accent),var(--accent)) 0 0 / 1px 14px no-repeat,linear-gradient(var(--accent),var(--accent)) 100% 0 / 14px 1px no-repeat,linear-gradient(var(--accent),var(--accent)) 100% 0 / 1px 14px no-repeat,linear-gradient(var(--accent),var(--accent)) 0 100% / 14px 1px no-repeat,linear-gradient(var(--accent),var(--accent)) 0 100% / 1px 14px no-repeat,linear-gradient(var(--accent),var(--accent)) 100% 100% / 14px 1px no-repeat,linear-gradient(var(--accent),var(--accent)) 100% 100% / 1px 14px no-repeat;animation:corners-flash .5s var(--exit-ease) forwards}@keyframes corners-flash{0%{opacity:0}20%{opacity:1}to{opacity:0}}.preview__ghost-frame{position:absolute;z-index:2;pointer-events:none;border:1px dashed var(--accent);border-radius:var(--radius-preview);animation:about-fade-in .12s ease}@media(prefers-reduced-motion:reduce){.preview__corners{animation-duration:.16s}}@keyframes poster-ring{0%{box-shadow:inset 0 0 0 2px var(--accent)}to{box-shadow:inset 0 0 0 1px var(--accent)}}.poster:active{animation:poster-ring .12s ease}@keyframes poster-in{0%{opacity:0;transform:translate(24px)}to{opacity:1;transform:none}}.examples-panel__list li:nth-child(-n+6) .poster{animation:poster-in .32s var(--panel-slide) backwards;animation-delay:calc(var(--i, 0) * 35ms)}@media(prefers-reduced-motion:no-preference){@supports (animation-timeline: view()){@keyframes poster-scroll-in{0%{opacity:.4;transform:translateY(8px)}to{opacity:1;transform:none}}.poster-slot{animation:poster-scroll-in linear both;animation-timeline:view();animation-range:entry 0% entry 60%}}}@media(prefers-reduced-motion:reduce){.examples-panel__list li:nth-child(-n+6) .poster{animation:about-fade-in .16s ease backwards;animation-delay:0ms}}.poster{position:relative;display:block;width:100%;padding:0;background:none;border:none;border-bottom:var(--border-panel-width) solid var(--border-panel);cursor:pointer;transition:transform .26s var(--spring-geo),box-shadow .26s ease}.poster:hover{transform:scale(1.02);box-shadow:inset 0 0 0 1px var(--accent)}.poster:active{transform:scale(.99)}.poster:focus-visible{outline:var(--focus-ring-width) solid var(--accent);outline-offset:-2px}.poster .cube-icon{display:block}.poster__name{position:absolute;left:14px;bottom:10px;font-size:12px;font-weight:600}.poster__go{position:absolute;right:14px;bottom:10px;font-size:12px;font-weight:600;opacity:.55}@media(prefers-reduced-motion:reduce){.examples-panel__surprise{transition-duration:.16s}.poster{transition:box-shadow .16s ease}.poster:hover,.poster:active{transform:none}}@media(max-width:640px),(orientation:landscape)and (max-height:560px)and (min-width:640px){.export__btn,.chip,.toggle,.link-btn{min-height:44px}.swatch,.example{min-width:44px;min-height:44px}.examples__all{position:relative}.examples__all:after{content:"";position:absolute;left:0;right:0;top:50%;min-height:44px;transform:translateY(-50%)}}@media(orientation:landscape)and (max-height:560px)and (min-width:640px){.app{min-height:0;grid-template-columns:minmax(280px,360px) minmax(0,1fr);grid-template-rows:auto auto 1fr;grid-template-areas:"head    actions" "editor  stage" "controls stage"}.region--stage{position:static;top:auto;z-index:auto;background-color:var(--surface-stage);border-top:none;border-bottom:none;border-right:none;border-left:var(--border-panel-width) solid var(--border-panel);padding:16px;align-items:flex-start}.region--head,.region--actions{padding:12px 20px}.region--editor{padding:16px 20px}.region--controls{padding:0 0 24px}.controls>.control{padding:16px 20px}}.ctrl-icon{display:block;width:44px;height:44px;color:var(--text-primary);--icon-face: var(--surface-chrome)}.chip--icon[data-state=checked] .ctrl-icon{color:var(--selected-block-fg);--icon-face: var(--selected-block)}.toggle--square[data-state=on] .ctrl-icon{color:var(--toggle-on-fg);--icon-face: var(--toggle-on-bg)}.chip--icon[data-state=checked]{background:var(--selected-block)}.toggle--square[data-state=on] .ctrl-icon__tile,.toggle--square[data-state=on] .ctrl-icon__shadow{fill:var(--accent)}.toggle--square[data-state=on] .ctrl-icon__ghost{stroke:var(--accent)}.toggle--square[data-state=on] .ctrl-icon__step--back{fill:var(--accent)}.toggle--square[data-state=on] .control__caption{color:var(--toggle-on-fg)}.chip--icon[data-state=checked]{border-color:transparent;box-shadow:none}.control__row--slide{position:relative}.slider{position:absolute;z-index:0;background:var(--selected-block);top:var(--top);width:var(--width);height:var(--height);--transition-timing-function: cubic-bezier(.3, 1.3, .4, 1);transition-property:left,top,width,height!important;transition-duration:.35s!important}.control__row--slide .chip,.control__row--slide .swatch{position:relative;z-index:1}.slider--outline{background:none;outline:var(--ring-width) solid var(--selected-outline);outline-offset:0}.control__row--slide .swatch[data-state=checked]{box-shadow:inset 0 0 0 var(--border-width) var(--border-subtle)}.control__row--slide .chip--icon[data-state=checked]{background:none}.chip--icon:active{scale:.94}.chip--icon{transition:scale .12s ease-out}@media(prefers-reduced-motion:reduce){.slider,.chip--icon{transition:none}}