:root{color-scheme:light;font:14px/1.4 system-ui,sans-serif;color:#252a2e;background:#f5f6f7;--line: #dce0e3;--accent: #087b69}*{box-sizing:border-box;letter-spacing:0}html{height:100%;overflow:hidden}body{margin:0;height:100dvh;overflow:hidden;display:grid;grid-template-rows:auto minmax(0,1fr)}button,input,select{font:inherit;color:inherit}button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:34px;height:34px;padding:0 9px;background:#fff;border:1px solid var(--line);border-radius:5px;cursor:pointer}button:hover{background:#eef3f2;border-color:#9babaa}button:disabled{opacity:.4;cursor:default}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}button svg,.brand>svg{width:17px;height:17px;flex-shrink:0}.primary{background:var(--accent);color:#fff;border-color:var(--accent)}.primary:hover{background:#066554}.topbar{min-height:68px;display:flex;align-items:center;justify-content:space-between;padding:12px 20px;gap:12px;border-bottom:1px solid var(--line);background:#fff}.brand,.actions,.toolbar,.modes,.object-actions{display:flex;align-items:center;gap:7px}.brand{flex-wrap:wrap}.brand>svg{color:var(--accent);width:23px;height:23px}h1{font-size:18px;margin:0;font-weight:650}h2{font-size:13px;font-weight:650;margin:0}.dimensions{color:#69747b;font-size:12px;margin-left:16px}.workspace{display:grid;grid-template-columns:232px minmax(0,1fr) minmax(260px,26%);grid-template-rows:minmax(0,1fr);min-height:0;overflow:hidden}.settings{background:#fff;padding:18px 16px;border-right:1px solid var(--line);min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}.settings h2{margin-bottom:10px}hr{border:0;border-top:1px solid var(--line);margin:18px 0}.palette{display:grid;gap:6px;margin-bottom:16px}.color-row{display:flex;align-items:center;gap:8px}.color-slot{flex:1;justify-content:flex-start;height:34px;font-size:12px}.color-slot[aria-pressed=true]{outline:2px solid var(--accent);outline-offset:-1px;background:#f1f8f6}.swatch{width:18px;height:18px;border-radius:50%;border:1px solid #0002;flex-shrink:0}input[type=color]{width:29px;height:29px;padding:0;border:0;background:none;cursor:pointer}input[type=checkbox]{accent-color:var(--accent);width:15px;height:15px;margin:0}.field{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:5px;font-size:12px;color:#59646b;margin-bottom:10px}.field>input:not([type=range]),.field>select{width:100%}input:not([type=color]):not([type=checkbox]):not([type=range]),select{min-width:0;height:32px;border:1px solid var(--line);border-radius:4px;padding:4px 7px;background:#fff}input[type=range]{width:100%;accent-color:var(--accent)}.input-unit{display:flex;align-items:center;gap:5px}.input-unit input{width:70px}.field-pair{display:grid;grid-template-columns:1fr 1fr;gap:9px}.wide{width:100%}fieldset{border:0;padding:0;margin:0;min-width:0}.object-actions{justify-content:space-between}.objects-heading{display:flex;justify-content:space-between;margin-top:20px}.objects-heading span{color:#69747b;font-weight:400}.objects{display:grid;gap:3px}.object-row{width:100%;border-color:transparent;justify-content:flex-start;font-size:12px}.object-row span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.object-row[aria-pressed=true]{background:#e8f3ef}.object-row .swatch{width:12px;height:12px}.editor-pane,.viewer-pane{display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden}.editor-pane{border-right:1px solid var(--line)}.pane-head{display:flex;flex-shrink:0;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:6px;min-height:62px;padding:12px 16px;border-bottom:1px solid var(--line);background:#fafbfc}.toolbar{gap:4px}.toolbar button{padding:0}.modes{gap:0;margin-right:6px}.modes button{border-radius:0}.modes button:first-child{border-radius:4px 0 0 4px}.modes button:last-child{border-radius:0 4px 4px 0}.modes button[aria-pressed=true]{background:#dcefe8;color:#056956;border-color:#95bcae}.surface-shell{display:grid;grid-template:minmax(0,1fr) / minmax(0,1fr);place-items:center;flex:1;min-height:0;background-color:#f0f2f4;background-image:linear-gradient(#dbe1e566 1px,transparent 1px),linear-gradient(90deg,#dbe1e566 1px,transparent 1px);background-size:20px 20px;overflow:hidden}.surface-shell,.surface-shell *{-webkit-user-select:none;user-select:none;-webkit-user-drag:none}#designSurface{width:100%;height:100%;min-height:0;touch-action:none;-webkit-user-select:none;user-select:none}.shutter-stroke{fill:none;stroke:#657178;stroke-width:.08;pointer-events:none}#selectionBox{fill:none;stroke:#056bca;stroke-width:1;stroke-dasharray:4 3;vector-effect:non-scaling-stroke;pointer-events:none}[hidden]{display:none!important}#viewer{position:relative;flex:1;min-height:0;background:#e4eaee;overflow:hidden}#viewer canvas{display:block;position:absolute;width:100%;height:100%;touch-action:none}.pane-foot{display:flex;flex-shrink:0;justify-content:space-between;gap:10px;padding:9px 16px;min-height:38px;background:#fff;border-top:1px solid var(--line);color:#647079;font-size:11px}#notice{position:fixed;bottom:18px;left:50%;transform:translate(-50%);padding:12px 18px;background:#fff;border:1px solid #c25442;border-radius:5px;box-shadow:0 3px 16px #0002;max-width:min(90%,640px);z-index:10}@media(max-width:1100px){.workspace{grid-template-columns:215px minmax(0,1fr) 260px}.settings{padding:16px 12px}.dimensions{display:none}.pane-head{padding:10px}}@media(min-width:651px)and (max-width:850px){.workspace{grid-template-columns:215px minmax(0,1fr);grid-template-rows:minmax(0,1.7fr) minmax(0,1fr)}.settings{grid-row:1 / 3}.viewer-pane{grid-column:2}.editor-pane{border-right:0}}@media(max-width:650px){.topbar{padding:10px 12px;flex-wrap:wrap}.brand{gap:5px}h1{font-size:16px}.actions{gap:4px}.primary{font-size:12px}.actions>button:not(.primary){min-width:29px;padding:0}.workspace{display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain}.settings{order:2;flex-shrink:0;max-height:60dvh;border:0;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:8px 16px}.settings>h2,.settings>hr,.settings>fieldset,.settings>.objects{grid-column:1 / -1}.settings>h2{margin:4px 0}.settings>hr{width:100%;margin:5px 0}.palette{margin:0}.editor-pane{flex:0 0 380px}.viewer-pane{order:1;flex:0 0 280px}.pane-head{padding:8px 12px;min-height:50px}}