:root{--orange-50:#fdf1ea;--orange-100:#fbe0d1;--orange-200:#f6bf9f;--orange-400:#f07a3e;--orange-500:#e2672b;--orange-600:#c4521a;--orange-700:#ad4615;--navy-50:#eef0f5;--navy-200:#b8bfcf;--navy-300:#8a91a3;--navy-400:#7d8496;--navy-500:#5f6677;--navy-600:#4a5265;--navy-700:#2f3546;--navy-800:#232837;--navy-850:#1b2233;--navy-900:#1b1f29;--navy-950:#14171f;--sand-50:#fbfaf7;--sand-100:#f3f0ea;--sand-200:#ece8e0;--sand-300:#d9d3c7;--white:#fff;--green-700:#27743e;--green-400:#4fb46d;--red-700:#b3261e;--red-400:#ef6b62;--blue-600:#2f6fe4;--space-0-5:2px;--space-1:4px;--space-1-5:6px;--space-2:8px;--space-2-5:10px;--space-3:12px;--space-3-5:14px;--space-4:16px;--space-5:20px;--space-6:24px;--space-7:28px;--space-8:32px;--space-10:40px;--space-12:48px;--space-14:56px;--space-16:64px;--space-18:72px;--radius-xs:3px;--radius-sm:6px;--radius-md:8px;--radius-lg:10px;--radius-xl:14px;--radius-2xl:18px;--radius-3xl:24px;--radius-pill:999px;--radius-round:50%;--text-2xs:12px;--text-xs:12px;--text-sm:13px;--text-md:14px;--text-base:15px;--text-lg:16px;--text-xl:18px;--text-2xl:20px;--text-3xl:22px;--text-display:clamp(36px, 5.4vw, 60px);--font-sans:"IBM Plex Sans Thai", system-ui, sans-serif;--font-mono:"IBM Plex Mono", ui-monospace, monospace;--shadow-hairline:inset 0 0 0 1px #00000026;--shadow-xs:0 1px 2px #0000000f;--shadow-sm:0 6px 20px #0000001a;--shadow-md:0 10px 30px #0000001f;--shadow-warm-sm:0 8px 20px -10px #1e190f73;--shadow-warm-md:0 18px 36px -22px #1e190f73;--shadow-warm-lg:0 22px 40px -22px #1e190f8c;--bg:var(--sand-100);--surface:var(--sand-50);--surface-2:var(--sand-200);--ink:var(--navy-850);--ink-2:var(--navy-600);--ink-3:var(--navy-500);--line:var(--sand-300);--accent:var(--orange-500);--accent-strong:var(--orange-600);--accent-text:var(--orange-700);--accent-ink:var(--white);--success:var(--green-700);--focus:var(--blue-600);--danger:var(--red-700);--radius:var(--radius-xl);--font:var(--font-sans);--mono:var(--font-mono);color-scheme:light}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:var(--navy-950);--surface:var(--navy-900);--surface-2:var(--navy-800);--ink:var(--navy-50);--ink-2:var(--navy-200);--ink-3:var(--navy-300);--line:var(--navy-700);--accent:var(--orange-400);--accent-text:var(--orange-400);--success:var(--green-400);--danger:var(--red-400);color-scheme:dark}}:root[data-theme=dark]{--bg:var(--navy-950);--surface:var(--navy-900);--surface-2:var(--navy-800);--ink:var(--navy-50);--ink-2:var(--navy-200);--ink-3:var(--navy-300);--line:var(--navy-700);--accent:var(--orange-400);--accent-text:var(--orange-400);--success:var(--green-400);--danger:var(--red-400);color-scheme:dark}:root{--btn-radius:var(--radius-pill);--btn-pad-y:var(--space-3);--btn-pad-x:var(--space-5);--btn-bg:var(--accent-strong);--btn-ink:var(--accent-ink);--card-radius:var(--radius-2xl);--card-bg:var(--surface);--card-border:var(--line);--card-shadow-hover:var(--shadow-warm-md);--control-radius:var(--radius-lg);--chip-radius:var(--radius-pill);--chip-pad:var(--space-1-5) var(--space-4);--popover-shadow:var(--shadow-md)}*,:before,:after{box-sizing:border-box}html,body{background:var(--bg);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased;margin:0;line-height:1.5}a{color:inherit}:focus-visible{outline:2px solid var(--focus);outline-offset:2px}.brand{align-items:center;gap:var(--space-2-5);letter-spacing:-.01em;font-weight:700;text-decoration:none;display:inline-flex}.brand-mark{flex:none;width:28px;height:28px;display:block}.brand small{font-weight:400;font-size:var(--text-xs);color:var(--ink-3);line-height:1.2;display:block}.btn{appearance:none;border-radius:var(--btn-radius);padding:var(--btn-pad-y) var(--btn-pad-x);font:inherit;cursor:pointer;background:var(--btn-bg);color:var(--btn-ink);justify-content:center;align-items:center;gap:var(--space-2);border:0;font-weight:600;transition:transform .12s,filter .12s;display:inline-flex}.btn:hover{filter:brightness(1.06)}.btn:active{transform:translateY(1px)}.btn[disabled]{opacity:.5;cursor:not-allowed}.btn-ghost{color:var(--ink);border:1px solid var(--line);background:0 0}.mono{font-family:var(--mono)}[hidden]{display:none!important}.visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.studio{grid-template-rows:auto minmax(0,1fr);grid-template-columns:360px minmax(0,1fr);height:100dvh;display:grid}.studio-bar{justify-content:space-between;align-items:center;gap:var(--space-4);padding:var(--space-3) var(--space-5);border-bottom:1px solid var(--line);background:var(--surface);grid-column:1/-1;display:flex}.studio-bar h1{font-size:var(--text-base);color:var(--ink-2);margin:0;font-weight:600}.panel{border-right:1px solid var(--line);background:var(--bg);flex-direction:column;display:flex;overflow-y:auto}.panel-body{align-content:start;gap:var(--space-3);padding:var(--space-3-5);counter-reset:section;flex:1;display:grid}.panel-body>section{padding:var(--space-4);border:1px solid var(--line);border-radius:var(--radius-xl);background:var(--surface)}.group{gap:var(--space-3);display:grid}.group-title{align-items:center;gap:var(--space-2-5);font-family:var(--font);font-size:var(--text-lg);color:var(--ink);margin:0;font-weight:700;line-height:1.3;display:flex}.group-title:before{content:"";border-radius:var(--radius-xs);background:var(--accent);flex:none;width:4px;height:18px}.panel-body>section>.group-title:before{counter-increment:section;content:counter(section, decimal-leading-zero);width:auto;height:auto;padding:var(--space-0-5) var(--space-2);border-radius:var(--radius-sm);background:color-mix(in srgb, var(--accent) 14%, transparent);color:var(--accent-text);font-family:var(--mono);font-size:var(--text-xs);font-weight:500}.studio-nav{gap:var(--space-1);min-width:0;display:flex}.studio-nav-menu{position:relative}.studio-nav-btn{align-items:center;gap:var(--space-1-5);padding:var(--space-2) var(--space-3);border-radius:var(--radius-lg);color:var(--ink-2);font:inherit;font-size:var(--text-md);white-space:nowrap;cursor:pointer;background:0 0;border:0;font-weight:500;display:inline-flex}.studio-nav-btn:hover,.studio-nav-btn[aria-expanded=true]{background:var(--surface-2);color:var(--ink)}.studio-nav-btn.is-current{background:var(--ink);color:var(--surface)}.studio-nav-caret{font-size:var(--text-xs);transition:transform .15s}.studio-nav-btn[aria-expanded=true] .studio-nav-caret{transform:rotate(180deg)}.studio-nav-panel{top:calc(100% + var(--space-2));z-index:50;gap:var(--space-0-5);min-width:200px;max-height:min(70vh,480px);padding:var(--space-2);border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--popover-shadow);margin:0;list-style:none;display:grid;position:absolute;left:0;overflow-y:auto}.studio-nav-panel[hidden]{display:none}.studio-nav a{padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);color:var(--ink);font-size:var(--text-md);white-space:nowrap;text-decoration:none;display:block}.studio-nav a:hover,.studio-nav a:focus-visible{background:var(--surface-2)}.studio-nav a[aria-current=page]{background:color-mix(in srgb, var(--accent) 14%, transparent);color:var(--accent-text);font-weight:600}@media (width<=720px){.studio-nav-btn{padding:var(--space-2)}.studio-nav-menu:nth-last-child(-n+2) .studio-nav-panel{left:auto;right:0}}.field{gap:var(--space-1-5);font-size:var(--text-md);display:grid}.field-head{font-size:var(--text-md);color:var(--ink);justify-content:space-between;font-weight:500;display:flex}.field-head output{font-family:var(--mono);font-size:var(--text-sm);color:var(--ink)}.text-input{resize:vertical;min-height:52px;line-height:1.4}.text-input,.text-field,select{width:100%;font:inherit;font-size:var(--text-xl);padding:var(--space-2-5) var(--space-3);border-radius:var(--radius-lg);border:1px solid var(--line);background:var(--bg);color:var(--ink)}.text-field,select{font-size:var(--text-base)}input[type=range]{width:100%;accent-color:var(--accent)}.segmented{border:1px solid var(--line);border-radius:var(--radius-lg);grid-template-columns:repeat(4,1fr);display:grid;overflow:hidden}.segmented-5{grid-template-columns:repeat(5,1fr)}.segmented-5 label{font-size:var(--text-xs);padding:var(--space-2) var(--space-0-5)}.preset-grid{gap:var(--space-2);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.preset{align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-2-5);border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--bg);color:var(--ink);font:inherit;font-size:var(--text-sm);text-align:left;cursor:pointer;display:flex}.preset:hover{border-color:var(--accent)}.preset-dots{flex:none;display:flex}.preset-dots i{border-radius:var(--radius-round);width:14px;height:14px;margin-left:calc(-1 * var(--space-1));box-shadow:0 0 0 1.5px var(--bg), var(--shadow-hairline)}.preset-dots i:first-child{margin-left:0}.emoji-palette{gap:var(--space-1);grid-template-columns:repeat(8,minmax(0,1fr));display:grid}.emoji-btn{aspect-ratio:1;border-radius:var(--radius-md);background:var(--bg);min-width:0;font-size:var(--text-2xl);cursor:pointer;border:1px solid #0000;padding:0;line-height:1}.emoji-btn:hover:not(:disabled){border-color:var(--accent)}.emoji-btn:disabled{opacity:.35;cursor:not-allowed}.emoji-input{min-width:0;font:inherit;font-size:var(--text-base);padding:var(--space-1-5) var(--space-2-5);border-radius:var(--radius-md);border:1px solid var(--line);background:var(--bg);color:var(--ink);flex:1}.sticker-row{gap:var(--space-2);padding:var(--space-2-5);border:1px solid var(--line);border-radius:var(--radius-lg);display:grid}.sticker-top{align-items:center;gap:var(--space-2);display:flex}.sticker-top .btn{margin-left:auto}.sticker-glyph{font-size:var(--text-3xl);line-height:1}.segmented-3{grid-template-columns:repeat(3,1fr)}.segmented-4{grid-template-columns:repeat(4,1fr)}.layer-list{gap:var(--space-2);display:grid}.layer-row{gap:var(--space-1-5);padding:var(--space-2-5);border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);display:grid}.layer-head{align-items:center;gap:var(--space-2);font-size:var(--text-sm);display:flex}.layer-head b{white-space:nowrap;flex:none;min-width:18px}.layer-head select{min-width:0;padding:var(--space-1) var(--space-1-5);border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface);color:var(--ink);font:inherit;font-size:var(--text-sm);flex:1}.layer-color{border:1px solid var(--line);border-radius:var(--radius-round);cursor:pointer;background:0 0;width:28px;height:28px;padding:0}.layer-tools{gap:var(--space-0-5);display:flex}.layer-tools button{border-radius:var(--radius-sm);width:24px;height:24px;color:var(--ink-2);cursor:pointer;background:0 0;border:none}.layer-tools button:hover:not(:disabled){background:var(--surface-2)}.layer-tools button:disabled{opacity:.3;cursor:default}.layer-slider{align-items:center;gap:var(--space-2);font-size:var(--text-xs);color:var(--ink-3);grid-template-columns:56px 1fr 52px;display:grid}.layer-slider output{font-family:var(--mono);text-align:right}.segmented-2{grid-template-columns:repeat(2,1fr)}.hint{font-size:var(--text-xs);color:var(--ink-3);margin:0}.hint:empty{display:none}.hint.warn{color:var(--accent-text)}.file-pick{padding:var(--space-3);border:1px dashed var(--ink-3);border-radius:var(--radius-lg);text-align:center;font-size:var(--text-md);color:var(--ink-2);cursor:pointer;display:block;position:relative}.file-pick:hover{border-color:var(--accent);color:var(--ink)}.file-pick:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:2px}.file-pick input{opacity:0;width:1px;height:1px;position:absolute}.logo-row{justify-content:space-between;align-items:center;gap:var(--space-2);display:flex}.logo-name{font-size:var(--text-sm);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.edge-grid{gap:var(--space-1);grid-template-columns:repeat(3,1fr);grid-template-areas:".top.""left.right"".bottom.";justify-items:center;display:grid}.edge-grid label:first-child{grid-area:top}.edge-grid label:nth-child(2){grid-area:left}.edge-grid label:nth-child(3){grid-area:right}.edge-grid label:nth-child(4){grid-area:bottom}.line-head{align-items:center;gap:var(--space-2)}.line-head output{margin-left:auto}.line-color{border:2px solid var(--surface);border-radius:var(--radius-round);outline:1px solid var(--line);cursor:pointer;flex:none;width:22px;height:22px;padding:0}.line-color::-webkit-color-swatch-wrapper{padding:0}.line-color::-webkit-color-swatch{border-radius:var(--radius-round);border:none}.line-color.following{outline-style:dashed;outline-color:var(--ink-3)}.line-follow{color:var(--ink-3);cursor:pointer;font-size:var(--text-md);padding:0 var(--space-0-5);background:0 0;border:none}.line-name{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.btn-sm{padding:var(--space-1-5) var(--space-3);font-size:var(--text-xs)}.toggle{gap:var(--space-2-5);font-size:var(--text-md);cursor:pointer;align-items:flex-start;display:flex}.toggle input{margin-top:var(--space-1);width:18px;height:18px;accent-color:var(--accent)}.toggle small{font-size:var(--text-xs);color:var(--ink-3);display:block}.segmented label{text-align:center;padding:var(--space-2) var(--space-1);font-size:var(--text-sm);cursor:pointer;color:var(--ink-2);position:relative}.segmented label+label{border-left:1px solid var(--line)}.segmented input{opacity:0;pointer-events:none;position:absolute}.segmented label:has(input:checked){background:var(--ink);color:var(--bg)}.segmented label:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:-2px}.swatches{gap:var(--space-2);flex-wrap:wrap;align-items:center;display:flex}.swatch{border-radius:var(--radius-round);width:28px;height:28px;box-shadow:var(--shadow-hairline);cursor:pointer;border:2px solid #0000;padding:0}.swatch[aria-pressed=true]{border-color:var(--surface);outline:2px solid var(--ink)}.swatch-link{height:28px;padding:0 var(--space-3);border-radius:var(--radius-pill);border:1px solid var(--line);color:var(--ink-2);font:inherit;font-size:var(--text-xs);cursor:pointer;background:0 0}.swatch-link[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--bg)}.swatch-custom{border:1px dashed var(--ink-3);border-radius:var(--radius-round);cursor:pointer;background:0 0;width:28px;height:28px;padding:0}.panel-foot{padding:var(--space-3) var(--space-4);border-top:1px solid var(--line);background:var(--surface);gap:var(--space-2);display:grid;position:sticky;bottom:0}.panel-foot .printer-field{align-items:center;gap:var(--space-2-5);grid-template-columns:auto minmax(0,1fr)}.panel-foot .printer-field select{padding:var(--space-1-5) var(--space-2-5);font-size:var(--text-sm)}.font-select-fallback{display:none}.font-picker{gap:var(--space-2);display:grid}.font-search{width:100%;padding:var(--space-2-5) var(--space-3);border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);color:var(--ink);font:inherit;font-size:var(--text-md)}.font-chips{gap:var(--space-1-5);flex-wrap:wrap;display:flex}.chip{padding:var(--space-1) var(--space-3);border:1px solid var(--line);border-radius:var(--radius-pill);background:var(--surface);color:var(--ink-2);font:inherit;font-size:var(--text-sm);cursor:pointer}.chip.on{background:var(--ink);border-color:var(--ink);color:var(--surface)}.font-grid{gap:var(--space-1-5);max-height:264px;padding:var(--space-0-5);overscroll-behavior:contain;grid-template-columns:repeat(2,minmax(0,1fr));display:grid;overflow-y:auto}.font-card{gap:var(--space-0-5);min-width:0;padding:var(--space-2) var(--space-2-5);border-radius:var(--radius-lg);background:var(--surface-2);color:var(--ink);text-align:left;cursor:pointer;border:1.5px solid #0000;display:grid}.font-card:hover{border-color:var(--line)}.font-card.on{border-color:var(--accent);background:var(--surface)}.font-sample{font-size:var(--text-2xl);white-space:nowrap;text-overflow:ellipsis;line-height:1.35;overflow:hidden}.font-name{font-size:var(--text-xs);color:var(--ink-3);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.font-upload{font:inherit;font-size:var(--text-sm);color:var(--ink-2);text-align:center;grid-column:1/-1}.font-current{margin:0}.theme-picker,.letter-painter{gap:var(--space-2);display:grid}.theme-pairs{gap:var(--space-2);flex-wrap:wrap;display:flex}.theme-pair{border:1px solid var(--line);border-radius:var(--radius-round);background:linear-gradient(135deg, var(--a) 50%, var(--b) 50%);cursor:pointer;width:34px;height:34px}.theme-pair:hover{transform:scale(1.08)}.letter-strip{gap:var(--space-1-5);flex-wrap:wrap;display:flex}.letter-chip{min-width:36px;height:40px;padding:0 var(--space-2);border:1.5px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);color:var(--c);font:inherit;font-size:var(--text-2xl);text-shadow:0 0 1px var(--ink-3);cursor:pointer;font-weight:700;line-height:1}.line-chip{width:100%;font-size:var(--text-lg);text-align:left;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.letter-chip.own{border-color:var(--c)}.letter-chip.on{outline:2px solid var(--accent);outline-offset:1px}.letter-swatches.disabled{opacity:.4;pointer-events:none}.keypad-thumb{flex:none;width:34px;height:26px}.keypad-thumb rect{stroke:var(--ink-3);stroke-width:.4px}.emoji-row{gap:var(--space-1);flex-wrap:wrap;display:flex}.emoji-chip{border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface);min-width:36px;height:36px;font-size:var(--text-lg);cursor:pointer}.emoji-chip:hover{border-color:var(--accent)}.emoji-tabs{gap:var(--space-1);flex-wrap:wrap;display:flex}.emoji-tab[aria-selected=true]{background:var(--ink);border-color:var(--ink);color:var(--surface)}.key-strip{grid-template-columns:repeat(var(--cols), minmax(0, 1fr));gap:var(--space-1-5);max-width:320px;display:grid}.side-inputs{gap:var(--space-2);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.side-chip{width:auto;max-width:100%;font-size:var(--text-md)}.key-cell{min-width:0;height:44px;padding:0 var(--space-1);border:1.5px solid var(--line);border-radius:var(--radius-lg);background:var(--c);color:var(--t);font:inherit;font-size:var(--text-md);text-align:center;font-weight:700}.key-cell::placeholder{color:var(--t);opacity:.45}.key-cell.on{outline:2px solid var(--accent);outline-offset:1px}.key-editor{gap:var(--space-2)}.key-tools{justify-content:space-between;align-items:center;gap:var(--space-2);font-size:var(--text-sm);color:var(--ink-2);display:flex}.key-width{align-items:center;gap:var(--space-1);display:inline-flex}.key-width .btn{min-width:36px;font-size:var(--text-lg)}.key-text summary{cursor:pointer;font-size:var(--text-sm);color:var(--ink-2)}.key-text[open] summary{margin-bottom:var(--space-2)}.letter-painter .btn{justify-self:start}.size-presets{gap:var(--space-1-5);grid-template-columns:repeat(4,minmax(0,1fr));display:grid}.size-preset{gap:var(--space-0-5);padding:var(--space-2) var(--space-1);border:1.5px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);color:var(--ink-3);font:inherit;font-size:var(--text-2xs);cursor:pointer;display:grid}.size-preset b{font-size:var(--text-base);color:var(--ink)}.size-preset.on{border-color:var(--accent)}.icon-btn svg,.sticker-glyph svg{width:20px;height:20px;margin:auto;display:block}.palette-break{font-size:var(--text-xs);color:var(--ink-3);flex-basis:100%;grid-column:1/-1}.usage-rows{gap:var(--space-2);display:grid}.usage-row{align-items:center;gap:var(--space-2-5);font-size:var(--text-md);grid-template-columns:18px minmax(0,1fr) auto;display:grid}.usage-dot{border:1px solid var(--line);border-radius:var(--radius-sm);width:18px;height:18px}.usage-name{min-width:0;display:grid}.usage-name small{font-size:var(--text-xs);color:var(--ink-3)}.usage-row b,.usage-total b{font-family:var(--mono);font-weight:600}.usage-total{align-items:baseline;gap:var(--space-2-5);padding-top:var(--space-2-5);border-top:1px dashed var(--line);font-size:var(--text-md);display:flex}.usage-total b{font-size:var(--text-xl);color:var(--accent-text);margin-left:auto}.usage-total small{font-size:var(--text-xs);color:var(--ink-3)}.reset-link{padding:var(--space-1) var(--space-0-5);color:var(--ink-2);font:inherit;font-size:var(--text-sm);text-underline-offset:3px;cursor:pointer;background:0 0;border:none;justify-self:start;text-decoration:underline}.num-wrap{align-items:center;gap:var(--space-1-5);white-space:nowrap;margin-left:auto;display:inline-flex}.num-box{width:68px;padding:var(--space-1) var(--space-1-5) var(--space-1) var(--space-2-5);border:1px solid var(--line);border-radius:var(--radius-md);background:var(--bg);color:var(--ink);font-family:var(--mono);font-size:var(--text-sm);text-align:right}.num-box:focus{outline:2px solid var(--focus);outline-offset:0}.num-unit{min-width:18px;font-size:var(--text-xs);color:var(--ink-3)}.preview-switch{z-index:2;gap:var(--space-1);padding:var(--space-1);border:1px solid var(--line);border-radius:var(--radius-xl);background:var(--surface);box-shadow:var(--shadow-sm);display:flex;position:absolute;bottom:18px;left:50%;transform:translate(-50%)}.preview-switch[hidden]{display:none}.preview-switch button{padding:var(--space-2) var(--space-5);border-radius:var(--radius-lg);color:var(--ink-2);font:inherit;font-size:var(--text-md);cursor:pointer;background:0 0;border:none}.preview-switch button[aria-pressed=true]{background:var(--ink);color:var(--surface)}.tips{gap:var(--space-1-5);padding:var(--space-3) var(--space-3-5) var(--space-3) var(--space-8);border-radius:var(--radius-lg);background:var(--surface-2);font-size:var(--text-sm);color:var(--ink-2);margin:0;display:grid}.sticker-pop{z-index:2;gap:var(--space-2-5);width:min(280px,100% - 28px);padding:var(--space-3-5);border:1px solid var(--line);border-radius:var(--radius-xl);background:var(--surface);box-shadow:var(--popover-shadow);display:grid;position:absolute;top:14px;left:14px}.sticker-pop[hidden]{display:none}.pop-head{align-items:center;gap:var(--space-2);font-size:var(--text-md);display:flex}.pop-head b{flex:1}.pop-link{color:var(--danger);font:inherit;font-size:var(--text-sm);cursor:pointer;background:0 0;border:none;text-decoration:underline}.pop-x{border-radius:var(--radius-md);background:var(--surface-2);width:26px;height:26px;color:var(--ink-2);font-size:var(--text-lg);cursor:pointer;border:none;line-height:1}.pop-field{align-items:center;gap:var(--space-2);font-size:var(--text-sm);color:var(--ink-3);grid-template-columns:40px 1fr 54px;display:grid}.pop-field output{font-family:var(--mono);text-align:right;color:var(--ink)}.pop-colors{gap:var(--space-1-5);flex-wrap:wrap;display:flex}.pop-colors .swatch{width:22px;height:22px}.pop-actions{gap:var(--space-2);grid-template-columns:1fr 1fr;display:grid}.export-more{gap:var(--space-1-5);margin-top:calc(-1 * var(--space-1));flex-wrap:wrap;display:flex}.export-more .btn{flex:auto}.custom-bed{align-items:center;gap:var(--space-2);font-size:var(--text-sm);color:var(--ink-3);display:flex}.custom-bed input{width:80px;font:inherit;font-family:var(--mono);padding:var(--space-1-5) var(--space-2);border-radius:var(--radius-md);border:1px solid var(--line);background:var(--bg);color:var(--ink)}.stats{gap:var(--space-2);font-size:var(--text-2xs);white-space:nowrap;color:var(--ink-3);grid-template-columns:1.4fr 1fr 1fr .7fr;display:grid}.stats b{white-space:nowrap;font-family:var(--mono);font-size:var(--text-sm);color:var(--ink);font-weight:500;display:block}.status{min-height:1.4em;font-size:var(--text-xs);color:var(--ink-3);margin:0}.status.warn{color:var(--accent-text)}.status.error{color:var(--danger)}.stage{background:radial-gradient(ellipse at 50% 40%, var(--surface) 0%, var(--bg) 70%);min-height:0;position:relative;overflow:hidden}.stage canvas{width:100%;height:100%;display:block}.stage-hint{font-size:var(--text-xs);color:var(--ink-3);pointer-events:none;position:absolute;bottom:14px;left:16px}.stage-tools{position:absolute;top:14px;right:14px}.stage-tools .btn{padding:var(--space-2) var(--space-3-5);font-size:var(--text-sm);background:var(--surface)}@media (width<=820px){.studio{grid-template-rows:auto 48dvh auto;grid-template-columns:1fr;height:auto}.stage{grid-row:2}.panel{border-right:0;border-top:1px solid var(--line);grid-row:3;overflow:visible}.studio-bar{padding:var(--space-2-5) var(--space-4)}.panel-body>section,.panel-foot{padding-inline:var(--space-4)}}.align-grid{gap:var(--space-1);margin:var(--space-1) 0 var(--space-2);grid-template-columns:repeat(3,36px);display:grid}.align-grid button{border:1px solid var(--line);border-radius:var(--radius-md);background:var(--bg);height:32px;color:var(--ink);font-size:var(--text-base);cursor:pointer;line-height:1}.align-grid button:hover{border-color:var(--accent)}.icon-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.icon-grid label{align-items:center;gap:var(--space-1);font-size:var(--text-xs);padding:var(--space-2) var(--space-0-5);flex-direction:column;display:flex}.icon-art{place-items:center;width:100%;height:26px;display:grid}.icon-art svg{max-width:80%;height:100%}.icon-art[data-icon=none]:before{content:"∅";font-size:var(--text-xl);opacity:.6}.icon-grid label{border-top:1px solid var(--line);margin-top:calc(-1 * var(--space-0-5))}.save-tools{align-items:center;gap:var(--space-2-5);flex:none;display:flex;position:relative}.mine-link{color:var(--ink-2);font-size:var(--text-md);white-space:nowrap}.save-btn{white-space:nowrap}.save-toast{font-size:var(--text-sm);color:var(--accent-text);opacity:0;white-space:nowrap;transition:opacity .2s}.save-toast.on{opacity:1}.save-pop{z-index:5;gap:var(--space-2-5);width:300px;padding:var(--space-3-5);border:1px solid var(--line);border-radius:var(--radius-xl);background:var(--surface);box-shadow:var(--popover-shadow);display:grid;position:absolute;top:calc(100% + 10px);right:0}.save-pop[hidden]{display:none}.account{font-size:var(--text-sm);color:var(--ink-2);white-space:nowrap;align-items:center;display:inline-flex;position:relative}.account-btn{align-items:center;gap:var(--space-2);padding:var(--space-1) var(--space-2-5) var(--space-1) var(--space-1);border:1px solid var(--line);border-radius:var(--radius-pill);background:var(--surface);color:var(--ink);font:inherit;cursor:pointer;display:inline-flex}.account-btn:hover,.account-btn[aria-expanded=true]{background:var(--surface-2)}.account-pic{border-radius:var(--radius-round);object-fit:cover;place-items:center;width:26px;height:26px;display:grid}.account-initial{background:var(--accent-strong);color:var(--accent-ink);font-weight:600}.account-name{text-overflow:ellipsis;max-width:12ch;overflow:hidden}.account-caret{font-size:var(--text-2xs);color:var(--ink-3)}.account-menu{z-index:6;min-width:230px;padding:var(--space-1-5);border:1px solid var(--line);border-radius:var(--radius-xl);background:var(--surface);box-shadow:var(--popover-shadow);display:grid;position:absolute;top:calc(100% + 8px);right:0}.account-menu[hidden]{display:none}.account-head{gap:var(--space-0-5);padding:var(--space-2) var(--space-2-5) var(--space-2-5);margin-bottom:var(--space-1);border-bottom:1px solid var(--line);white-space:normal;overflow-wrap:anywhere;display:grid}.account-head .text-input{width:100%}.account-item{padding:var(--space-2) var(--space-2-5);border-radius:var(--radius-md);color:var(--ink);font:inherit;text-align:left;cursor:pointer;background:0 0;border:0}.account-item:hover,.account-item:focus-visible{background:var(--surface-2)}.shape-grid{gap:var(--space-1-5);grid-template-columns:repeat(auto-fill,minmax(66px,1fr));display:grid}.shape-tile{justify-items:center;gap:var(--space-1);padding:var(--space-2) var(--space-1) var(--space-1-5);border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);color:var(--ink-2);font-size:var(--text-xs);text-align:center;cursor:pointer;line-height:1.2;display:grid;position:relative}.shape-tile input{opacity:0;cursor:pointer;margin:0;position:absolute;inset:0}.shape-tile svg{fill:none;stroke:currentColor;stroke-width:1.6px;stroke-linejoin:round;stroke-linecap:round;width:24px;height:24px}.shape-tile:hover{background:var(--surface-2)}.shape-tile:has(input:checked){border-color:var(--accent);background:color-mix(in srgb, var(--accent) 9%, var(--surface));color:var(--accent-text)}.shape-tile:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}.color-plan{font-size:var(--text-sm);color:var(--ink-2);margin:0;line-height:1.7}.color-plan .usage-dot{width:12px;height:12px;margin:0 var(--space-1);border-radius:var(--radius-xs);vertical-align:-1px;display:inline-block}.thin-note{align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-2-5);border:1px solid var(--line);border-radius:var(--radius-lg);font-size:var(--text-sm);color:var(--ink-2);flex-wrap:wrap;display:flex}.thin-note.warn{border-color:color-mix(in srgb, var(--accent) 45%, var(--line));background:color-mix(in srgb, var(--accent) 7%, var(--surface));color:var(--ink)}.thin-note[hidden]{display:none}.thin-note span{flex:180px}.view-tools{user-select:none;z-index:3;justify-items:center;gap:var(--space-2-5);display:grid;position:absolute;bottom:14px;right:14px}.explode-wrap{position:relative}.explode-options{top:50%;right:calc(100% + var(--space-2));gap:var(--space-2);padding:var(--space-2) var(--space-2-5);border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--popover-shadow);white-space:nowrap;display:grid;position:absolute;transform:translateY(-50%)}.explode-options[hidden]{display:none}.explode-by{gap:var(--space-1);display:flex}.explode-far{align-items:center;gap:var(--space-2);font-size:var(--text-xs);color:var(--ink-2);display:flex}.explode-far input{width:96px}.view-group{gap:var(--space-1-5);display:grid}.view-group button{min-width:46px;padding:var(--space-2) var(--space-2);border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);color:var(--ink-2);font:inherit;font-size:var(--text-sm);cursor:pointer;box-shadow:var(--shadow-xs)}.view-group button:hover{background:var(--surface-2)}.view-group button[aria-pressed=true]{border-color:var(--accent);color:var(--accent-text)}.band{width:24px;height:190px;position:relative}.band:before,.band-fill{content:"";width:6px;margin-left:calc(-1 * var(--space-1));border-radius:var(--radius-xs);position:absolute;left:50%}.band:before{background:var(--line);top:0;bottom:0}.band-fill{background:color-mix(in srgb, var(--accent) 55%, transparent);top:0;bottom:0}.band input{writing-mode:vertical-lr;appearance:none;pointer-events:none;direction:rtl;background:0 0;width:24px;height:100%;margin:0;position:absolute;inset:0}.band input::-webkit-slider-runnable-track{background:0 0}.band input::-webkit-slider-thumb{border:2px solid var(--accent);border-radius:var(--radius-round);background:var(--surface);appearance:none;pointer-events:auto;cursor:ns-resize;width:18px;height:18px}.band input::-moz-range-thumb{border:2px solid var(--accent);border-radius:var(--radius-round);background:var(--surface);pointer-events:auto;cursor:ns-resize;width:14px;height:14px}.band-tip{padding:var(--space-1) var(--space-2);border-radius:var(--radius-md);background:var(--ink);color:var(--surface);font-size:var(--text-xs);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s;position:absolute;top:50%;right:30px;translate:0 -50%}.band.on .band-tip,.band:hover .band-tip{opacity:1}@media (width<=900px){.band{height:120px}}@media (pointer:coarse){.btn,.chip,.preset,.segmented label,.view-group button,.studio-nav a,.studio-nav-btn,.account-btn,.num-box,.mine-link{min-height:44px}.segmented label,.mine-link{justify-content:center;align-items:center;display:inline-flex}.swatch,.swatch-custom,.theme-pair{width:40px;height:40px}.emoji-btn,.letter-chip{min-width:44px;min-height:44px}}