:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--page-bg:oklch(94% .005 90);--shell-bg:oklch(99% .003 90);--shell-border:oklch(88% .01 90);--shell-shadow:0 20px 60px #0000001f;--shell-radius:16px;--header-border:oklch(90% .01 90);--tab-bar-bg:oklch(97% .004 90);--preview-bg:oklch(22% .006 90);--sidebar-bg:oklch(98% .004 90);--sidebar-width:340px;--card-bg:#fff;--card-border:oklch(90% .01 90);--card-radius:12px;--accent:oklch(50% .1 165);--accent-text:oklch(45% .12 165);--ink:oklch(20% .01 90);--muted:oklch(50% .01 90);--label:oklch(35% .01 90);--section-label:oklch(45% .01 90);--pill-track:oklch(92% .006 90);--tab-inactive-bg:oklch(90% .008 90);--tab-inactive-fg:oklch(40% .006 90);--line:oklch(88% .01 90);--button-border:oklch(85% .01 90);--radius-sm:7px;--radius-md:8px;--radius-lg:10px}*{box-sizing:border-box}html{height:100%;overflow:hidden}body{background:var(--shell-bg);height:100%;color:var(--ink);margin:0;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;overflow:hidden}button,input,select{font:inherit}input[type=range]{appearance:none;touch-action:none;background:0 0;width:100%;height:28px;margin:0}input[type=range]::-webkit-slider-runnable-track{background:oklch(82% .012 90);border-radius:3px;height:6px}input[type=range]::-moz-range-track{background:oklch(82% .012 90);border-radius:3px;height:6px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;cursor:pointer;background:currentColor;border:2px solid #fff;border-radius:50%;width:20px;height:20px;margin-top:-7px;box-shadow:0 1px 4px #00000059}input[type=range]::-moz-range-thumb{cursor:pointer;background:currentColor;border:2px solid #fff;border-radius:50%;width:20px;height:20px;box-shadow:0 1px 4px #00000059}@media (pointer:coarse){input[type=range]{height:44px}input[type=range]::-webkit-slider-runnable-track{border-radius:4px;height:8px}input[type=range]::-moz-range-track{border-radius:4px;height:8px}input[type=range]::-webkit-slider-thumb{border-width:3px;width:28px;height:28px;margin-top:-10px}input[type=range]::-moz-range-thumb{border-width:3px;width:28px;height:28px}}.app{background:var(--shell-bg);grid-template-rows:auto auto minmax(0,1fr);max-width:100vw;height:100dvh;display:grid;overflow:hidden}.toolbar{border-bottom:1px solid var(--header-border);background:var(--shell-bg);justify-content:space-between;align-items:center;padding:16px 28px;display:flex}.toolbar-left{align-items:center;gap:20px;display:flex}.brand{color:var(--ink);align-items:center;gap:10px;font-size:17px;font-weight:700;display:inline-flex}.mark{border-radius:var(--radius-md);background:linear-gradient(135deg,oklch(70% .13 280),oklch(75% .15 20));width:30px;height:30px}.toolbar-divider{background:var(--line);width:1px;height:22px}.toolbar-actions,.actions{align-items:center;gap:8px;display:flex}#imageInput,#projectInput{opacity:0;pointer-events:none;block-size:1px;inline-size:1px;position:absolute}button,.file-button{border-radius:var(--radius-md);border:1px solid var(--button-border);color:oklch(30% .01 90);cursor:pointer;background:#fff;justify-content:center;align-items:center;gap:7px;padding:9px 14px;font-size:14px;font-weight:600;display:inline-flex}button:hover,.file-button:hover{border-color:oklch(75% .01 90)}button:disabled{opacity:.45;cursor:not-allowed}#exportButton{background:var(--accent);color:#fff;border:none;padding:9px 18px;font-weight:700}#exportButton:hover{filter:brightness(1.05)}#exportPackButton{border:1px solid var(--button-border);background:#fff;padding:9px 14px;font-weight:600}#exportPackButton:hover:not(:disabled){border-color:oklch(75% .01 90)}#exportPackButton:disabled{opacity:.55;cursor:wait}.preview-tab-bar{background:var(--tab-bar-bg);border-bottom:1px solid var(--header-border);justify-content:space-between;align-items:flex-end;padding:10px 24px 0;display:flex}.preview-tabs{align-items:flex-end;gap:2px;display:flex}.preview-tab{cursor:pointer;background:var(--tab-inactive-bg);color:var(--tab-inactive-fg);z-index:1;border:none;border-radius:10px 10px 0 0;padding:9px 20px 10px;font-size:14px;font-weight:600;position:relative}.preview-tab.active{background:var(--preview-bg);color:#fff;z-index:2;padding:11px 20px 12px}#status{color:var(--muted);white-space:nowrap;padding-bottom:10px;font-size:13px}.workspace{grid-template-columns:minmax(0, 1fr) var(--sidebar-width);grid-template-rows:minmax(0,1fr);min-height:0;display:grid}.preview-area{background:var(--preview-bg);justify-content:stretch;align-items:stretch;min-width:0;min-height:0;display:flex}.preview-stage{flex:1;min-height:0;position:relative}.preview-stage canvas{touch-action:none;width:100%;height:100%;display:block;position:absolute;inset:0}#previewGL{background:var(--preview-bg)}#previewCanvas{background:0 0}.controls{border-left:1px solid var(--header-border);background:var(--sidebar-bg);flex-direction:column;gap:18px;min-height:0;padding:24px;display:flex;overflow:auto}.pill-switch{background:var(--pill-track);border-radius:var(--radius-lg);gap:4px;padding:4px;display:flex}.pill-switch button{border-radius:var(--radius-sm);color:var(--muted);cursor:pointer;background:0 0;border:none;flex:1;padding:9px;font-size:14px;font-weight:600}.pill-switch button.active{color:var(--ink);background:#fff;font-weight:700;box-shadow:0 1px 3px #0000001a}.pill-switch--compact button{padding:7px;font-size:13px}.control-card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--card-radius);flex-direction:column;gap:14px;padding:18px;display:flex}.control-card__title{letter-spacing:.04em;text-transform:uppercase;color:var(--section-label);font-size:12px;font-weight:700}.control-panel{flex-direction:column;gap:18px;display:none}.control-panel.active{display:flex}.range-row{color:var(--label);-webkit-user-select:none;user-select:none;align-items:center;gap:14px;margin:0;font-size:14px;display:flex}.range-row>span:first-child{flex-shrink:0;width:64px}.range-row input[type=range]{accent-color:var(--accent);color:var(--accent);flex:1}.range-row output{text-align:right;width:44px;color:var(--ink);font-variant-numeric:tabular-nums;flex-shrink:0;font-weight:700}.color-row{color:var(--label);justify-content:space-between;align-items:center;gap:14px;margin:0;font-size:14px;display:flex}.color-row input[type=color]{border:1px solid var(--button-border);border-radius:var(--radius-sm);cursor:pointer;background:#fff;width:120px;height:30px;padding:2px}.toggles{color:var(--label);flex-direction:column;gap:12px;font-size:14px;display:flex}.toggles label{cursor:pointer;align-items:center;gap:9px;display:flex}.toggles input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent)}.radio-group{color:var(--label);gap:14px;font-size:14px;display:flex}.radio-group label{cursor:pointer;align-items:center;gap:4px;display:inline-flex}.radio-group input{accent-color:var(--accent)}.hint{color:var(--muted);margin:0;font-size:12px;line-height:1.5}.ai-generate{border-radius:var(--radius-lg);border:1.5px solid var(--accent);width:100%;color:var(--accent-text);cursor:pointer;background:#fff;padding:12px;font-size:14px;font-weight:700}.ai-generate:hover:not(:disabled){background:oklch(97% .02 165)}.ai-generate:disabled{opacity:.6;cursor:default}.ai-generate-wrap{flex-direction:column;gap:8px;display:flex}@media (width<=960px){.toolbar{flex-wrap:wrap;align-items:center;gap:10px;padding:10px 14px}.toolbar-left{flex-wrap:wrap;flex:auto;gap:10px;min-width:0}.toolbar-divider{display:none}.actions{flex:none}button,.file-button{padding:8px 12px;font-size:13px}#exportButton{padding:8px 14px}#exportPackButton{padding:8px 12px}.preview-tab-bar{flex-direction:column;align-items:stretch;gap:6px;min-width:0;padding:8px 12px}.preview-tabs{-webkit-overflow-scrolling:touch;scrollbar-width:thin;flex-wrap:nowrap;max-width:100%;overflow:auto hidden}.preview-tab{flex:none;padding:8px 14px 9px;font-size:13px}.preview-tab.active{padding:9px 14px 10px}#status{text-overflow:ellipsis;padding-bottom:0;overflow:hidden}.workspace{grid-template-rows:minmax(0,1fr) minmax(160px,42%);grid-template-columns:minmax(0,1fr);overflow:hidden}.preview-area,.preview-stage{min-width:0;min-height:0;overflow:hidden}.controls{border-left:0;border-top:1px solid var(--header-border);-webkit-overflow-scrolling:touch;overscroll-behavior:contain;gap:14px;padding:14px;overflow:auto}.control-card{padding:14px}.range-row{grid-template-rows:auto auto;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 10px;display:grid}.range-row>span:first-child{grid-area:1/1;width:auto;font-size:13px}.range-row output{grid-area:1/2;width:auto;min-width:2.5ch}.range-row input[type=range]{grid-area:2/1/auto/-1;width:100%;min-height:44px}.color-row input[type=color]{width:min(120px,40vw)}}@media (width<=480px){.toolbar{padding:8px 10px}.brand{font-size:15px}.mark{width:26px;height:26px}.workspace{grid-template-rows:minmax(0,1fr) minmax(140px,48%)}.preview-tab{padding:7px 11px 8px;font-size:12px}.preview-tab.active{padding:8px 11px 9px}}