:root{color-scheme:dark;font-family:IBM Plex Sans,Segoe UI,sans-serif;--ui-base: #29292e;--ui-panel: #323238;--ui-panel-soft: #2d2d33;--ui-border: rgba(255, 255, 255, .08);--ui-text: #ececf1;--ui-text-muted: #a8a8b3;--ui-text-dim: #8b8b96;--ui-field: #222228;--ui-chip: #303038;--ui-primary: #d7d7de;--ui-primary-ink: #151519;background:var(--ui-base);color:var(--ui-text)}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:radial-gradient(circle at top left,rgba(255,255,255,.03),transparent 28%),radial-gradient(circle at bottom right,rgba(255,255,255,.02),transparent 20%),linear-gradient(180deg,#2c2c31,#232328)}button,input,select,textarea{font:inherit}#app{min-height:100vh}.app-shell{display:grid;grid-template-columns:minmax(0,1fr) 320px;height:100vh;overflow:hidden}.sidebar{grid-column:2;grid-row:1;height:100vh;overflow-y:auto;border-left:1px solid var(--ui-border);border-right:0;background:#29292ef0;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);padding:24px 18px}.sidebar__header{margin-bottom:18px}.sidebar__eyebrow{margin:0 0 6px;color:var(--ui-text-dim);font-size:12px;letter-spacing:.14em}.sidebar h1{margin:0 0 8px;font-size:26px;font-weight:600}.sidebar__subcopy{margin:0;color:var(--ui-text-muted);line-height:1.5;font-size:13px}.panel-stack{display:grid;gap:12px}.panel{border:1px solid var(--ui-border);background:#323238d1;border-radius:3px;padding:6px 10px;transition:opacity .16s ease,border-color .16s ease,transform .16s ease}.panel--inactive{opacity:.52}.panel__head{display:flex;align-items:center;justify-content:space-between;gap:12px}.panel__toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:1;min-width:0;padding:0;border:0;background:transparent;color:inherit;cursor:pointer;text-align:left}.panel__toggle:focus-visible{outline:2px solid rgba(255,255,255,.32);outline-offset:4px;border-radius:8px}.panel h2{margin:0;font-size:12px;letter-spacing:.12em;color:var(--ui-text-muted)}.panel__toggle-icon{width:10px;height:10px;flex:0 0 auto;border-right:1.5px solid var(--ui-text-dim);border-bottom:1.5px solid var(--ui-text-dim);transform:rotate(45deg);transition:transform .14s ease,opacity .14s ease;opacity:.9}.panel[data-collapsed=true] .panel__toggle-icon{transform:rotate(-45deg)}.panel__body[hidden]{display:none}.panel h3{margin:0 0 10px;font-size:11px;letter-spacing:.12em;color:var(--ui-text-dim)}.panel-block+.panel-block{margin-top:14px;padding-top:14px;border-top:1px solid var(--ui-border)}.control{display:grid;gap:8px;margin-bottom:10px}.control:last-child{margin-bottom:0}.control--inline{grid-template-columns:1fr auto;align-items:center}.control--locked{opacity:.48}.control--locked .control__label{color:var(--ui-text-dim)}.control--locked input[type=checkbox]{cursor:not-allowed}.control__label{color:#d4d4dc;font-size:13px;display:flex;justify-content:space-between;gap:12px}.control__label strong{color:#f5f5f8;font-weight:600;font-variant-numeric:tabular-nums}.control-group{padding:10px;margin-top:10px;border-radius:12px;border:1px solid var(--ui-border);background:#222228ad}.color-swatch-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.color-swatch{width:100%;aspect-ratio:1 / 1;border-radius:8px;border:1px solid rgba(255,255,255,.14);background:var(--swatch-color);cursor:pointer;padding:0;box-shadow:inset 0 0 0 1px #00000024}.color-swatch--active{outline:2px solid #f5f7fa;outline-offset:1px}.readout-grid{display:grid;gap:8px}.readout-grid div{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px}.readout-grid span{color:var(--ui-text-dim);text-transform:uppercase;letter-spacing:.08em}.readout-grid strong{color:var(--ui-text)}input[type=file],input[type=text],input[type=number],input[type=range],select{width:100%}input[type=text],input[type=number],select,input[type=file]{border:1px solid var(--ui-border);border-radius:10px;background:var(--ui-field);color:var(--ui-text);padding:10px 12px}input[type=range]{accent-color:var(--ui-primary)}input[type=checkbox]{width:18px;height:18px;accent-color:var(--ui-primary)}.ghost-button,.primary-button{border-radius:3px;padding:3px 12px 5px;border:1px solid var(--ui-border);background:#222228eb;color:var(--ui-text);cursor:pointer}.primary-button{background:linear-gradient(135deg,var(--ui-primary),#b9b9c4);color:var(--ui-primary-ink);border-color:transparent;font-weight:600}.ghost-button:disabled,.primary-button:disabled{cursor:not-allowed;opacity:.45}.button-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}.workspace{grid-column:1;grid-row:1;min-width:0;height:100vh;overflow:hidden;padding:18px 28px 28px;display:grid;grid-template-rows:1fr}.workspace__status{display:none}.status-chip{display:inline-flex;align-items:center;min-height:38px;padding:0 14px;border-radius:999px;background:#303038f0;border:1px solid var(--ui-border);color:var(--ui-text);font-size:13px}.status-chip--danger{border-color:#d26e5647;color:#ffc0ae}.preview-stage{display:grid;justify-items:center;align-items:start;position:relative;min-height:0;height:100%;width:100%;justify-self:center;overflow:hidden;padding:8px 44px 112px;background:transparent}.preview-stage--pannable{cursor:grab}.preview-stage--dragging{cursor:grabbing}.preview-stage__canvas{display:block;max-width:none;max-height:none;border-radius:0;border:0;image-rendering:pixelated;box-shadow:none}.preview-stage__canvas--active{border:0;box-shadow:none}.preview-stage__frame{position:absolute;border:0;box-shadow:none;overflow:hidden;pointer-events:none}.preview-stage__frame-image{position:absolute;border:0;background:transparent}.preview-stage__placeholder{display:grid;place-items:center;position:absolute;inset:20px;border-radius:18px;color:var(--ui-text-dim);text-transform:uppercase;letter-spacing:.18em;font-size:12px}.preview-stage__placeholder p{margin:0}.preview-stage__zoom-controls{position:absolute;left:8px;bottom:6px;z-index:3;display:grid;gap:8px;width:min(370px,calc(100% - 32px));padding:0;border:0;border-radius:0;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}.preview-stage__zoom-head{display:flex;align-items:center;justify-content:flex-start;gap:12px;font-size:12px;width:50%}.preview-stage__zoom-label{color:var(--ui-text-dim);letter-spacing:.08em;text-transform:uppercase}.preview-stage__zoom-head strong{color:var(--ui-text);font-variant-numeric:tabular-nums;margin-left:auto}.preview-stage__zoom-reset{justify-self:start;padding:0;border:0;background:transparent;color:var(--ui-text-muted);border-radius:0;min-height:auto;text-transform:uppercase;letter-spacing:.08em}.preview-stage__zoom-controls input[type=range]{width:50%}@media(max-width:960px){.app-shell{grid-template-columns:1fr;height:auto;overflow:visible}.sidebar{grid-column:auto;grid-row:auto;height:auto;overflow-y:visible;order:2;border-left:0;border-right:0;border-bottom:1px solid var(--ui-border)}.workspace{grid-column:auto;grid-row:auto;height:auto;overflow:visible;padding:16px 20px 20px;order:1}.preview-stage{min-height:60vh;height:auto;width:100%;padding:32px 12px 96px}.preview-stage__canvas{max-width:none;max-height:none}}