.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.studio-section{padding-block:clamp(4rem,8vw,7rem);background:var(--page)}.studio-section.is-standalone{height:100dvh;padding:0;background:var(--studio-workspace)}.studio-intro{margin-bottom:2.5rem;text-align:center}.studio-intro .section-copy{margin-inline:auto}.studio-shell{--studio-panel:#f7f7f9;--studio-raised:#fff;--studio-workspace:#eceef2;--studio-bar:#fff;--studio-text:#18191d;--studio-secondary:#5f626c;--studio-tertiary:#7f828c;--studio-line:rgb(24 25 29/12%);--studio-hover:#ececf0;--studio-accent:#5e55e7;position:relative;width:min(100% - 2rem,94rem);margin-inline:auto;overflow:hidden;color:var(--studio-text);background:var(--studio-workspace);border:1px solid var(--studio-line);border-radius:.5rem;box-shadow:0 30px 80px #2523401f}html[data-theme=dark] .studio-shell{--studio-panel:#151619;--studio-raised:#1e2024;--studio-workspace:#0d0e10;--studio-bar:#151619;--studio-text:#f4f4f5;--studio-secondary:#c4c5ca;--studio-tertiary:#9698a1;--studio-line:rgb(255 255 255/13%);--studio-hover:#282a30;--studio-accent:#8d82ff;box-shadow:0 30px 90px #00000059}.is-standalone .studio-shell{width:100%;height:100dvh;border:0;border-radius:0;box-shadow:none}.studio-workspace{height:48rem;min-height:42rem;display:grid;grid-template-columns:21rem minmax(0,1fr);grid-template-areas:"panel canvas"}.is-standalone .studio-workspace{height:100dvh;min-height:36rem}.control-panel{grid-area:panel;min-width:0;min-height:0;border-inline-end:1px solid var(--studio-line);background:var(--studio-panel)}.mobile-panel-toggle{display:none}.panel-scroll{height:100%;overflow-y:auto;scrollbar-color:color-mix(in srgb,var(--studio-tertiary) 45%,transparent) transparent;scrollbar-width:thin;overscroll-behavior:contain}.panel-top{min-height:4rem;display:grid;grid-template-columns:2.75rem minmax(0,1fr);align-items:center;gap:.65rem;padding:.55rem .8rem;border-block-end:1px solid var(--studio-line);background:var(--studio-panel)}.studio-home{width:2.75rem;height:2.75rem;display:grid;place-items:center;border-radius:.5rem}.studio-home>span{position:relative;width:1.8rem;height:1.8rem;overflow:hidden;border-radius:.5rem;background:#282632}.studio-home i{position:absolute;width:1.25rem;height:1.25rem;border-radius:50%;filter:blur(1px)}.studio-home i:nth-child(1){inset:-.15rem auto auto -.1rem;background:#ffbd6c}.studio-home i:nth-child(2){inset:.45rem -.15rem auto auto;background:#ee5ca1}.studio-home i:nth-child(3){inset:auto auto -.25rem .15rem;background:#7061ff}.document-title{min-width:0;display:grid;gap:.12rem}.document-title strong,.document-title small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.document-title strong{font-size:.82rem;font-weight:690}.document-title small{color:var(--studio-tertiary);font-size:.68rem}.control-group{border-block-end:1px solid var(--studio-line)}.control-group>summary{min-height:3.4rem;display:grid;grid-template-columns:minmax(0,1fr) auto 1rem;align-items:center;gap:.55rem;padding:.55rem 1rem;color:var(--studio-text);cursor:pointer;list-style:none}.control-group>summary::-webkit-details-marker{display:none}.control-group>summary strong{min-width:0;font-size:.76rem;font-weight:740;text-transform:uppercase}.control-group>summary span{color:var(--studio-tertiary);font-size:.7rem;font-weight:570;font-variant-numeric:tabular-nums}.control-group>summary .disclosure-icon{width:1rem;height:1rem;color:var(--studio-tertiary);stroke-width:2;transition:transform .16s ease}.control-group[open]>summary .disclosure-icon{transform:rotate(90deg)}.group-body{padding:0 1rem 1rem}.palette-preset-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem .5rem}.palette-preset{min-width:0;padding:0;color:var(--studio-secondary);text-align:center;border:0;background:transparent}.palette-preset .preset-preview{width:100%;height:3.2rem;display:block;margin-block-end:.35rem;border:1px solid var(--studio-line);border-radius:.38rem;box-shadow:inset 0 1px #ffffff2e}.palette-preset small{display:block;overflow:hidden;color:inherit;font-size:.62rem;line-height:1.2;text-overflow:ellipsis;white-space:nowrap}.palette-preset[aria-pressed=true]{color:var(--studio-accent)}.palette-preset[aria-pressed=true] .preset-preview{outline:2px solid var(--studio-accent);outline-offset:2px}.browse-button,.add-point{width:100%;min-height:2.75rem;display:flex;align-items:center;justify-content:center;gap:.5rem;margin-block-start:.9rem;padding-inline:.75rem;color:var(--studio-accent);border:1px solid color-mix(in srgb,var(--studio-accent) 25%,transparent);border-radius:.5rem;background:color-mix(in srgb,var(--studio-accent) 7%,transparent);font-size:.72rem;font-weight:660}.browse-button{justify-content:space-between}.browse-button svg,.add-point svg{width:1rem;height:1rem;stroke-width:2}.composition-picker{min-height:4rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.65rem 1rem;border-block-end:1px solid var(--studio-line);background:var(--studio-raised)}.composition-picker>div{display:grid;gap:.15rem}.composition-picker span{color:var(--studio-tertiary);font-size:.64rem;text-transform:uppercase}.composition-picker strong{font-size:.82rem}.composition-picker button{min-height:2.75rem;display:flex;align-items:center;gap:.3rem;padding:0 .45rem;color:var(--studio-secondary);border:0;border-radius:.45rem;background:transparent;font-size:.7rem;font-weight:640}.composition-picker svg{width:1rem;height:1rem;stroke-width:2}.palette-points{display:grid;gap:.5rem}.palette-row{--point:var(--studio-accent);min-height:3.35rem;display:grid;grid-template-columns:1.8rem 4.75rem minmax(3.5rem,1fr) 2.75rem;align-items:center;gap:.45rem;padding:.25rem .25rem .25rem .45rem;border:1px solid var(--studio-line);border-radius:.5rem;background:var(--studio-raised);transition:border-color .14s ease,background .14s ease}.palette-row.is-active{border-color:color-mix(in srgb,var(--point) 64%,var(--studio-line));background:color-mix(in srgb,var(--point) 7%,var(--studio-raised))}.palette-row .point-color-label{width:1.8rem;height:1.8rem;overflow:hidden;border:1px solid color-mix(in srgb,var(--studio-text) 60%,transparent);border-radius:.38rem;box-shadow:0 2px 7px #00000029}.palette-row input[type=color]{width:2.6rem;height:2.6rem;margin:-.4rem;padding:0;border:0}.palette-row .point-hex{min-width:0;overflow:hidden;color:var(--studio-secondary);font:500 .69rem/1.2 Consolas,Cascadia Mono,monospace;text-overflow:ellipsis}.point-reach{min-width:0;height:2.75rem;display:flex;align-items:center}.point-reach input{height:2.75rem;accent-color:var(--point)}.palette-row button{width:2.75rem;height:2.75rem;color:var(--studio-tertiary);border:0;border-radius:.42rem;background:transparent;font-size:1rem}.palette-row button:disabled{cursor:not-allowed;opacity:.28}.range-stack{display:grid;gap:1rem}.range-field{display:grid;gap:.55rem;margin-block-end:1rem}.range-stack .range-field{margin:0}.range-field>span{display:flex;justify-content:space-between;gap:1rem;color:var(--studio-secondary);font-size:.72rem}.range-field output{color:var(--studio-tertiary);font-variant-numeric:tabular-nums}input[type=range]{width:100%;height:1.4rem;margin:0;accent-color:var(--studio-accent)}.select-field{display:grid;gap:.45rem;margin-block-end:1rem;color:var(--studio-secondary);font-size:.72rem}.select-field select{width:100%;min-height:2.75rem;padding-inline:.65rem;color:var(--studio-text);border:1px solid var(--studio-line);border-radius:.5rem;background:var(--studio-raised)}.color-field{min-height:2.75rem;display:grid;grid-template-columns:1fr 1.8rem auto;align-items:center;gap:.55rem;margin-block-start:.8rem;color:var(--studio-secondary);font-size:.72rem}.color-field input{width:1.8rem;height:1.8rem;padding:0;overflow:hidden;border:1px solid var(--studio-line);border-radius:.38rem;background:transparent}.color-field output{color:var(--studio-tertiary);font:500 .7rem/1.2 Consolas,Cascadia Mono,monospace}.switch{display:inline-flex;align-items:center;gap:.5rem;color:var(--studio-secondary);font-size:.7rem}.switch input{position:absolute;opacity:0}.switch>span{position:relative;width:2rem;height:1.15rem;border-radius:1rem;background:color-mix(in srgb,var(--studio-tertiary) 52%,transparent)}.switch>span:after{content:"";position:absolute;width:.85rem;height:.85rem;inset:.15rem auto auto .15rem;border-radius:50%;background:var(--studio-raised);box-shadow:0 1px 3px #0000002e;transition:transform .16s ease}.switch input:checked+span{background:var(--studio-accent)}.switch input:checked+span:after{background:#fff;transform:translate(.85rem)}.switch b{font-weight:590}.text-switch{min-height:2.75rem;margin-block-start:.65rem}.canvas-settings-body{display:grid;gap:.9rem}.dimension-fields{display:grid;grid-template-columns:1fr 1fr;gap:.65rem}.dimension-fields label{display:grid;gap:.4rem;color:var(--studio-secondary);font-size:.7rem}.dimension-fields input{width:100%;min-height:2.75rem;padding:0 .65rem;color:var(--studio-text);border:1px solid var(--studio-line);border-radius:.5rem;background:var(--studio-raised);font-size:.9rem;font-variant-numeric:tabular-nums}.ratio-lock{min-height:2.75rem;display:flex;align-items:center;gap:.55rem;color:var(--studio-secondary);font-size:.7rem}.ratio-lock input{width:1.1rem;height:1.1rem;accent-color:var(--studio-accent)}.ratio-lock b{font-weight:580}.size-preset-select{margin:0}.size-tool-row{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;padding-block:.85rem;border-block:1px solid var(--studio-line)}.size-tool-row>div{display:grid;gap:.5rem}.size-tool-row>div>span,.ratio-presets>div:first-child{color:var(--studio-tertiary);font-size:.65rem;font-weight:680;text-transform:uppercase}.size-button-group{display:grid;grid-template-columns:1fr 1fr;gap:.4rem}.size-button-group button,.ratio-preset-grid button{min-height:2.75rem;color:var(--studio-secondary);border:1px solid var(--studio-line);border-radius:.45rem;background:var(--studio-raised);font-size:.7rem}.size-button-group svg{width:1.05rem;height:1.05rem;margin:auto;stroke-width:1.8}.size-button-group .portrait-icon{transform:rotate(90deg)}.size-button-group button[aria-pressed=true],.ratio-preset-grid button[aria-pressed=true]{color:var(--studio-accent);border-color:color-mix(in srgb,var(--studio-accent) 48%,var(--studio-line));background:color-mix(in srgb,var(--studio-accent) 10%,var(--studio-raised))}.ratio-presets{display:grid;gap:.65rem}.ratio-presets>div:first-child{display:flex;align-items:center;justify-content:space-between}.ratio-presets output{color:var(--studio-secondary);font-size:.7rem;font-variant-numeric:tabular-nums}.ratio-preset-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.45rem}.canvas-workbench{grid-area:canvas;min-width:0;min-height:0;display:grid;grid-template-rows:4rem minmax(0,1fr)}.studio-topbar{min-width:0;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto auto auto;align-items:center;gap:.55rem;padding:.55rem .9rem;border-block-end:1px solid var(--studio-line);background:var(--studio-bar)}.history-actions{display:flex;gap:.2rem}.icon-button{width:2.75rem;height:2.75rem;display:grid;place-items:center;padding:0;color:var(--studio-secondary);border:0;border-radius:.5rem;background:transparent}.icon-button svg,.studio-topbar svg,.canvas-actionbar svg{width:1.05rem;height:1.05rem;stroke-width:1.9}.workbench-title{min-width:0;overflow:hidden;color:var(--studio-tertiary);font-size:.72rem;text-overflow:ellipsis;white-space:nowrap}.canvas-size-summary{min-height:2.75rem;display:flex;align-items:center;gap:.45rem;padding-inline:.7rem;color:var(--studio-secondary);border:1px solid var(--studio-line);border-radius:.5rem;background:var(--studio-raised);font-size:.72rem;font-variant-numeric:tabular-nums}.canvas-size-summary svg:last-child{width:.85rem;height:.85rem;color:var(--studio-tertiary)}.export-trigger{min-height:2.75rem;display:inline-flex;align-items:center;justify-content:center;gap:.45rem;padding-inline:.85rem;color:#fff;border:1px solid var(--studio-accent);border-radius:.5rem;background:var(--studio-accent);font-size:.72rem;font-weight:690}.studio-language{position:relative;width:3.9rem;min-height:2.75rem;display:flex;align-items:center;color:var(--studio-secondary);border:1px solid var(--studio-line);border-radius:.5rem;background:var(--studio-raised)}.studio-language>svg{position:absolute;inset-inline-start:.48rem;width:.95rem;height:.95rem;pointer-events:none}.studio-language select{width:100%;min-height:2.75rem;padding:0 .25rem 0 1.55rem;color:inherit;border:0;border-radius:inherit;background:transparent;font-size:.68rem;font-weight:680;cursor:pointer}.canvas-region{min-width:0;min-height:0;display:grid;grid-template-rows:minmax(0,1fr) auto auto;padding:1rem clamp(1rem,2vw,1.5rem) .75rem;background:var(--studio-workspace)}.canvas-stage{min-width:0;min-height:0;display:flex;align-items:center;justify-content:center}.canvas-frame{--canvas-aspect:1.6;position:relative;width:min(100%,calc((100dvh - 10.5rem)*var(--canvas-aspect)));max-height:calc(100dvh - 10.5rem);overflow:hidden;border:1px solid color-mix(in srgb,var(--studio-text) 20%,transparent);border-radius:.45rem;background:#171522;box-shadow:0 20px 50px #13121f38;touch-action:none}.canvas-frame canvas,.point-layer{position:absolute;inset:0;width:100%;height:100%}.canvas-frame canvas{object-fit:fill}.point-layer{z-index:3}.canvas-point{position:absolute;z-index:4;width:1.8rem;height:1.8rem;padding:0;border:1.5px solid #fff;border-radius:50%;background:#1414191f;box-shadow:0 2px 10px #0000004d,0 0 0 1px #00000047;transform:translate(-50%,-50%);touch-action:none;cursor:grab;user-select:none;transition:box-shadow .14s ease,scale .14s ease}.canvas-point:after{content:"";width:.44rem;height:.44rem;display:block;margin:auto;border-radius:50%;background:var(--point);box-shadow:0 0 0 1px #ffffffb3}.canvas-point.is-active{z-index:5;scale:1.18;box-shadow:0 4px 18px #00000061,0 0 0 4px color-mix(in srgb,var(--point) 42%,transparent),0 0 0 1px #00000047}.canvas-point.is-dragging{z-index:6;cursor:grabbing;scale:1.18;box-shadow:0 5px 20px #0000006b,0 0 0 4px #fff3}.preview-copy{position:absolute;z-index:2;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.55rem;padding:2rem;color:#fff;text-align:center;text-shadow:0 2px 18px rgb(0 0 0/35%);pointer-events:none}.preview-copy[hidden]{display:none}.preview-copy span{font-size:clamp(.52rem,1vw,.72rem);font-weight:720}.preview-copy strong{max-width:20ch;font-size:clamp(1.4rem,3vw,3rem);line-height:1.02}.canvas-help{min-height:1.5rem;margin:.4rem 0 0;color:var(--studio-tertiary);font-size:.68rem;text-align:center}.canvas-actionbar{min-height:3.25rem;display:flex;align-items:center;justify-content:center;gap:.4rem}.canvas-actionbar button{min-height:2.75rem;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;padding-inline:.75rem;color:var(--studio-secondary);border:1px solid var(--studio-line);border-radius:.5rem;background:var(--studio-raised);font-size:.7rem;font-weight:650}.canvas-actionbar svg[hidden]{display:none}.canvas-actionbar .new-gradient-action{color:#fff;border-color:var(--studio-accent);background:var(--studio-accent)}.export-menu{position:absolute;z-index:35;inset:4.5rem 1rem auto auto;width:min(22rem,calc(100% - 1.5rem));padding:.6rem;border:1px solid var(--studio-line);border-radius:.5rem;background:var(--studio-raised);box-shadow:0 18px 50px #00000040}.export-menu[hidden]{display:none}.export-menu header{min-height:2.75rem;display:flex;align-items:center;justify-content:space-between;padding:0 .45rem .35rem}.export-menu header strong{font-size:.8rem}.export-menu header button{width:2.75rem;height:2.75rem;color:var(--studio-tertiary);border:0;background:transparent;font-size:1rem}.export-menu>button{width:100%;min-height:3.7rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.55rem .7rem;color:var(--studio-text);text-align:left;border:0;border-block-start:1px solid var(--studio-line);background:transparent}.export-menu>button>span:first-child{display:grid;gap:.1rem}.export-menu b{font-size:.74rem}.export-menu small,.export-menu>button>span:last-child{color:var(--studio-tertiary);font-size:.64rem}.preset-drawer{position:absolute;z-index:30;inset:0 auto 0 0;width:min(34rem,92vw);display:flex;flex-direction:column;border-inline-end:1px solid var(--studio-line);background:var(--studio-panel);box-shadow:18px 0 50px #00000038}.preset-drawer[hidden],.drawer-scrim[hidden]{display:none}.preset-drawer header{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem;border-block-end:1px solid var(--studio-line)}.preset-drawer header p{margin:0 0 .2rem;color:var(--studio-accent);font-size:.66rem;font-weight:720;text-transform:uppercase}.preset-drawer h2{margin:0;font-size:1.1rem}.preset-drawer header button{width:2.75rem;height:2.75rem;color:var(--studio-secondary);border:1px solid var(--studio-line);border-radius:.5rem;background:var(--studio-raised);font-size:1rem}.drawer-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;padding:1rem;overflow-y:auto}.drawer-preset{min-width:0;padding:0;color:var(--studio-text);text-align:start;border:0;background:transparent}.drawer-preset .preset-preview{width:100%;height:5.4rem;display:block;margin-block-end:.42rem;border:1px solid var(--studio-line);border-radius:.45rem}.drawer-preset>span:nth-child(2){display:block;overflow:hidden;font-size:.72rem;font-weight:650;text-overflow:ellipsis;white-space:nowrap}.drawer-preset small{display:-webkit-box;margin-block-start:.2rem;overflow:hidden;color:var(--studio-tertiary);font-size:.62rem;line-height:1.35;-webkit-box-orient:vertical;-webkit-line-clamp:2}.drawer-preset[aria-pressed=true] .preset-preview{outline:2px solid var(--studio-accent);outline-offset:2px}.composition-drawer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.composition-drawer .drawer-preset .preset-preview{height:8rem}.drawer-scrim{position:absolute;z-index:29;inset:0;border:0;background:#08090c7a}.studio-status{position:absolute;z-index:40;inset:4.5rem 1rem auto auto;padding:.7rem .85rem;color:#fff;border:1px solid rgb(255 255 255/15%);border-radius:.5rem;background:#303138;box-shadow:0 10px 30px #00000040;opacity:0;transform:translateY(-.5rem);pointer-events:none;transition:opacity .16s ease,transform .16s ease}.studio-status.is-visible{opacity:1;transform:translateY(0)}.export-dialog{width:min(calc(100% - 2rem),48rem);max-width:none;max-height:min(90dvh,52rem);margin:auto;padding:0;overflow:visible;color:var(--studio-text);border:0;border-radius:.65rem;background:transparent}.export-dialog [hidden]{display:none!important}.export-dialog::backdrop{background:#08090ca3;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.export-dialog__surface{max-height:min(90dvh,52rem);display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--studio-line);border-radius:.65rem;background:var(--studio-panel);box-shadow:0 28px 80px #0000006b}.export-dialog__header{min-height:4.5rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem 1rem;border-block-end:1px solid var(--studio-line);background:var(--studio-panel)}.export-dialog__header h2{margin:0;font-size:1rem;line-height:1.2;text-transform:uppercase}.export-dialog__header p{margin:.2rem 0 0;color:var(--studio-tertiary);font-size:.68rem}.export-dialog__close{width:2.75rem;height:2.75rem;display:grid;flex:none;place-items:center;padding:0;color:var(--studio-secondary);border:1px solid var(--studio-line);border-radius:.5rem;background:var(--studio-raised)}.export-dialog__close svg{width:1.1rem;height:1.1rem}.export-tabs{display:flex;gap:.4rem;padding:.65rem 1rem;border-block-end:1px solid var(--studio-line);background:var(--studio-panel)}.export-tabs button{min-height:2.75rem;display:inline-flex;align-items:center;justify-content:center;gap:.45rem;padding:0 .85rem;color:var(--studio-secondary);border:1px solid transparent;border-radius:.5rem;background:var(--studio-hover);font-size:.74rem;font-weight:680}.export-tabs svg{width:1rem;height:1rem}.export-tabs button[aria-selected=true]{color:var(--studio-text);border-color:var(--studio-line);background:var(--studio-raised);box-shadow:0 2px 8px #00000014}.export-dialog__body{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:1rem;scrollbar-width:thin}.export-panel[hidden]{display:none}.export-fieldset{min-width:0;margin:0 0 1.15rem;padding:0;border:0}.export-fieldset:last-child{margin-bottom:0}.export-fieldset legend{width:100%;margin:0 0 .55rem;padding:0;color:var(--studio-tertiary);font-size:.64rem;font-weight:720;text-transform:uppercase}.export-segment{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.45rem}.export-segment--two{grid-template-columns:repeat(2,minmax(0,1fr))}.export-segment button,.export-size-list button{min-height:3.25rem;color:var(--studio-secondary);border:1px solid var(--studio-line);border-radius:.5rem;background:var(--studio-raised)}.export-segment button{display:grid;place-content:center;gap:.12rem;padding:.5rem;text-align:center}.export-segment strong{font-size:.74rem}.export-segment small,.export-size-list small{color:var(--studio-tertiary);font-size:.62rem}.export-segment button[aria-pressed=true],.export-size-list button[aria-pressed=true]{color:var(--studio-text);border-color:color-mix(in srgb,var(--studio-accent) 65%,var(--studio-line));background:color-mix(in srgb,var(--studio-accent) 11%,var(--studio-raised));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--studio-accent) 20%,transparent)}.export-size-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem}.export-size-list button{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.5rem .7rem;text-align:start}.export-size-list button span{min-width:0;overflow-wrap:anywhere;font-size:.72rem;font-weight:620}.export-size-list small{flex:none;font-variant-numeric:tabular-nums}.export-custom-size{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:end;gap:.55rem}.export-custom-size>span{padding-block-end:.85rem;color:var(--studio-tertiary)}.export-custom-size label{display:grid;gap:.35rem;color:var(--studio-secondary);font-size:.68rem}.export-custom-size input{width:100%;min-height:2.75rem;padding:0 .65rem;color:var(--studio-text);border:1px solid var(--studio-line);border-radius:.5rem;background:var(--studio-raised);font-variant-numeric:tabular-nums}.export-panel--code{min-height:25rem}.code-format-tabs{display:flex;gap:.35rem;padding-block-end:.75rem;overflow-x:auto;scrollbar-width:none}.code-format-tabs::-webkit-scrollbar{display:none}.code-format-tabs button{min-height:2.75rem;flex:none;padding:0 .75rem;color:var(--studio-secondary);border:1px solid var(--studio-line);border-radius:.5rem;background:var(--studio-raised);font-size:.68rem;font-weight:650}.code-format-tabs button[aria-selected=true]{color:#fff;border-color:var(--studio-accent);background:var(--studio-accent)}.export-code{min-height:21rem;margin:0;padding:1rem;overflow:auto;color:#d9f7e8;border:1px solid rgb(255 255 255/12%);border-radius:.5rem;background:#0d0f11;font:500 .72rem/1.65 Consolas,Cascadia Mono,monospace;tab-size:2;white-space:pre}.export-dialog__footer{min-height:4.8rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem 1rem;border-block-start:1px solid var(--studio-line);background:var(--studio-panel);box-shadow:0 -10px 28px #0000000a}.export-dialog__summary{min-width:0;display:grid;gap:.15rem}.export-dialog__summary strong,.export-dialog__summary small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.export-dialog__summary strong{font-size:.72rem}.export-dialog__summary small{color:var(--studio-tertiary);font-size:.62rem}.export-dialog__summary progress{width:min(14rem,100%);height:.35rem;margin-top:.3rem;accent-color:var(--studio-accent)}.export-dialog__actions{display:flex;flex:none;gap:.45rem}.export-dialog__actions button{min-height:2.75rem;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;padding:0 .9rem;border-radius:1.375rem;font-size:.7rem;font-weight:720}.export-dialog__actions svg{width:1rem;height:1rem}.export-secondary-action{color:var(--studio-secondary);border:1px solid var(--studio-line);background:var(--studio-raised)}.export-primary-action{color:#fff;border:1px solid var(--studio-accent);background:var(--studio-accent)}.export-primary-action:disabled{cursor:not-allowed;opacity:.45}.export-primary-action [data-export-action-icon]{display:inline-flex}.export-primary-action [data-export-action-icon][hidden]{display:none}@media(hover:hover){.icon-button:hover,.composition-picker button:hover,.canvas-size-summary:hover,.canvas-actionbar button:hover,.export-menu button:hover,.palette-row button:hover:not(:disabled),.size-button-group button:hover,.ratio-preset-grid button:hover{color:var(--studio-text);background:var(--studio-hover)}.palette-preset:hover .preset-preview,.drawer-preset:hover .preset-preview{border-color:color-mix(in srgb,var(--studio-text) 42%,transparent)}.browse-button:hover,.add-point:hover{background:color-mix(in srgb,var(--studio-accent) 13%,transparent)}.export-trigger:hover,.canvas-actionbar .new-gradient-action:hover{color:#fff;background:color-mix(in srgb,var(--studio-accent) 86%,#000)}}@media(max-width:1000px)and (min-width:761px){.studio-workspace{grid-template-columns:18.5rem minmax(0,1fr)}.workbench-title{display:none}.studio-topbar{grid-template-columns:auto minmax(0,1fr) auto auto auto}.palette-row{grid-template-columns:1.75rem 4.2rem minmax(3rem,1fr) 2.75rem;gap:.35rem}}@media(max-width:760px){.studio-section.is-standalone,.is-standalone .studio-shell{height:100dvh;min-height:0}.studio-shell{width:calc(100% - 1rem)}.is-standalone .studio-shell{width:100%}.studio-workspace{height:58rem;min-height:0;grid-template-columns:1fr;grid-template-rows:27rem minmax(0,1fr);grid-template-areas:"canvas" "panel"}.is-standalone .studio-workspace{height:calc(100dvh - 3.75rem - env(safe-area-inset-bottom));grid-template-rows:minmax(17rem,42dvh) minmax(0,1fr)}.is-standalone .studio-shell.is-panel-collapsed .studio-workspace{grid-template-rows:minmax(0,1fr) 3.25rem}.canvas-workbench{grid-template-rows:3.5rem minmax(0,1fr)}.studio-topbar{grid-template-columns:auto minmax(0,1fr) auto auto;gap:.3rem;padding:.35rem .5rem}.workbench-title{display:none}.history-actions{gap:0}.studio-topbar .icon-button{width:2.75rem;height:2.75rem}.theme-button{display:none}.canvas-size-summary{min-width:0;padding-inline:.55rem}.canvas-size-summary span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.export-trigger{width:2.75rem;padding:0}.export-trigger span{display:none}.canvas-region{grid-template-rows:minmax(0,1fr) auto auto;padding:.5rem .75rem .35rem;overflow:hidden}.is-standalone .canvas-region{grid-template-rows:minmax(0,1fr) auto;padding-block-end:.25rem}.canvas-frame{width:min(100%,calc((42dvh - 6.5rem)*var(--canvas-aspect)));max-height:calc(42dvh - 6.5rem)}.is-standalone .studio-shell.is-panel-collapsed .canvas-frame{width:min(100%,calc((100dvh - 13rem)*var(--canvas-aspect)));max-height:calc(100dvh - 13rem)}.canvas-help{margin-block-start:.25rem;font-size:.69rem}.canvas-actionbar{min-width:0;min-height:3.25rem}.canvas-actionbar button span{display:none}.is-standalone .canvas-actionbar{position:fixed;z-index:25;inset:auto 0 0;min-height:calc(3.75rem + env(safe-area-inset-bottom));padding:.35rem .5rem calc(.35rem + env(safe-area-inset-bottom));border-block-start:1px solid var(--studio-line);background:color-mix(in srgb,var(--studio-bar) 92%,transparent);backdrop-filter:blur(18px) saturate(1.12);-webkit-backdrop-filter:blur(18px) saturate(1.12)}.canvas-actionbar button{min-width:2.75rem;min-height:2.75rem;padding-inline:.65rem}.is-standalone .canvas-actionbar button{flex:0 1 3.5rem;padding:0}.is-standalone .canvas-actionbar button span{display:none}.is-standalone .canvas-actionbar .new-gradient-action{flex-basis:3.75rem}.control-panel{display:grid;grid-template-rows:3.25rem minmax(0,1fr);border-block-start:1px solid var(--studio-line);border-inline-end:0;overflow:hidden}.mobile-panel-toggle{width:100%;min-height:3.25rem;display:flex;align-items:center;justify-content:space-between;padding-inline:1rem;color:var(--studio-text);border:0;border-block-end:1px solid var(--studio-line);background:var(--studio-panel);font-size:.82rem;font-weight:690}.mobile-panel-toggle svg{width:1.1rem;height:1.1rem;color:var(--studio-tertiary);stroke-width:2;transition:transform .16s ease}.is-panel-collapsed .mobile-panel-toggle svg{transform:rotate(180deg)}.is-panel-collapsed .panel-scroll{display:none}.panel-scroll{min-height:0;height:auto;overflow-y:auto;overscroll-behavior:contain}.panel-top{position:sticky;z-index:8;inset-block-start:0;min-height:3.75rem;background:var(--studio-panel)}.control-group>summary{min-height:3.5rem;padding-inline:1rem}.control-group>summary strong{font-size:.82rem}.control-group>summary span{font-size:.76rem}.group-body{padding:0 1rem 1rem}.palette-preset-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:.7rem .45rem}.palette-preset .preset-preview{height:3.25rem}.palette-preset small{font-size:.68rem}.composition-picker{min-height:4rem}.composition-picker span{font-size:.68rem}.composition-picker strong{font-size:.86rem}.composition-picker button{font-size:.76rem}.select-field,.range-field>span,.dimension-fields label,.ratio-lock,.switch,.color-field{font-size:.78rem}.select-field select,.dimension-fields input{font-size:1rem}.canvas-point{width:2.75rem;height:2.75rem}.preset-drawer{position:fixed;inset:0 0 calc(3.75rem + env(safe-area-inset-bottom));width:100%;border-inline-end:0}.drawer-scrim{position:fixed;inset:0 0 calc(3.75rem + env(safe-area-inset-bottom))}.drawer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.composition-drawer .drawer-preset .preset-preview{height:6rem}.export-menu{position:fixed;inset:auto .5rem calc(4.25rem + env(safe-area-inset-bottom));width:auto}.studio-status{position:fixed;inset:auto .75rem calc(4.5rem + env(safe-area-inset-bottom)) auto}.export-dialog{width:100%;max-height:92dvh;margin:auto 0 0;border-radius:.7rem .7rem 0 0}.export-dialog__surface{max-height:92dvh;border-radius:.7rem .7rem 0 0}.export-dialog__header{min-height:4rem}.export-tabs{padding:.55rem .75rem}.export-tabs button{flex:1;padding-inline:.45rem}.export-dialog__body{padding:.8rem}.export-size-list{grid-template-columns:1fr}.export-dialog__footer{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.6rem;padding:.65rem .8rem calc(.65rem + env(safe-area-inset-bottom))}.export-dialog__actions button{padding-inline:.8rem}.export-secondary-action span{display:none}.export-panel--code{min-height:22rem}.export-code{min-height:18rem}}@media(max-width:380px){.studio-topbar{gap:.2rem;padding-inline:.35rem}.canvas-size-summary{font-size:.68rem}.canvas-region{padding-inline:.55rem}.is-standalone .studio-workspace{grid-template-rows:minmax(16rem,40dvh) minmax(0,1fr)}.canvas-frame{width:min(100%,calc((40dvh - 6.5rem)*var(--canvas-aspect)));max-height:calc(40dvh - 6.5rem)}.palette-preset-grid{gap:.6rem .35rem}.group-body{padding-inline:.85rem}.palette-row{grid-template-columns:1.75rem 4.35rem minmax(3rem,1fr) 2.75rem;gap:.3rem}.dimension-fields,.size-tool-row{grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){.control-group>summary .disclosure-icon,.mobile-panel-toggle svg,.canvas-point,.studio-status{transition:none}}@media(prefers-reduced-transparency:reduce){.is-standalone .canvas-actionbar{background:var(--studio-bar);backdrop-filter:none;-webkit-backdrop-filter:none}}@media(prefers-contrast:more){.studio-shell{--studio-line:rgb(24 25 29/28%)}html[data-theme=dark] .studio-shell{--studio-line:rgb(255 255 255/28%)}}@media(forced-colors:active){.studio-shell,.canvas-frame,.canvas-actionbar,.preset-drawer{box-shadow:none}.studio-home>span{forced-color-adjust:none}}