:root{--sans:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--app-bg:#dfe6e8;--panel:#f2f6f7;--line:#cdd8dc;--text:#344248;--text-muted:#67777f;--text-strong:#10171b;font-family:var(--sans);color:var(--text);background:var(--app-bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}html,body,#root{min-width:320px;min-height:100%;margin:0}body{min-height:100svh;overflow:hidden}svg{flex:none}.app-shell{background:var(--app-bg);height:100svh;color:var(--text);grid-template-rows:58px minmax(0,1fr) 34px;grid-template-columns:58px minmax(0,1fr);display:grid;overflow:hidden}.topbar{border-bottom:1px solid var(--line);background:var(--panel);grid-column:1/-1;justify-content:space-between;align-items:center;gap:18px;min-width:0;padding:0 18px;display:flex}.brand{align-items:center;gap:11px;min-width:0;display:flex}.brand-mark{color:#006b80;background:#e9f4f6;border:1px solid #b9ced4;border-radius:8px;justify-content:center;align-items:center;width:34px;height:34px;display:inline-flex}.brand h1{color:var(--text-strong);margin:0;font-size:16px;font-weight:720;line-height:1.1}.brand p{color:var(--text-muted);margin:2px 0 0;font-size:12px;line-height:1.2}.format-strip{min-width:0;color:var(--text-muted);white-space:nowrap;align-items:center;gap:10px;font-size:12px;display:flex}.format-strip strong{color:#006b80;font-weight:760}.format-strip span{border-left:1px solid var(--line);padding-left:10px}.tool-rail{background:#20282d;border-right:1px solid #334149;flex-direction:column;grid-row:2/3;align-items:center;gap:8px;padding:12px 9px;display:flex}.tool-rail button{color:#b9c6cc;cursor:pointer;background:0 0;border:1px solid #0000;border-radius:8px;justify-content:center;align-items:center;width:38px;height:38px;display:inline-flex}.tool-rail button:hover,.tool-rail button.active{color:#7ce8ff;background:#123844;border-color:#4ccce5}.workspace{grid-area:2/2/3/3;grid-template-columns:minmax(0,1fr) 352px;min-width:0;min-height:0;display:grid;overflow:hidden}.viewport-shell{background:linear-gradient(#4ed8ff0f,#0000 31%),#11171b;min-width:0;min-height:0;position:relative;overflow:hidden}.simulator-canvas{cursor:crosshair;width:100%;height:100%;display:block}.viewport-reticle{pointer-events:none;border:1px solid #77e7ffa6;border-radius:50%;width:22px;height:22px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.viewport-reticle:before,.viewport-reticle:after{content:"";background:#77e7ffa6;position:absolute}.viewport-reticle:before{width:1px;height:34px;top:-7px;left:50%}.viewport-reticle:after{width:34px;height:1px;top:50%;left:-7px}.viewport-help{pointer-events:none;flex-wrap:wrap;gap:8px;max-width:calc(100% - 32px);display:flex;position:absolute;bottom:14px;left:16px}.viewport-help span{color:#d5e3e7;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#0d1215bd;border:1px solid #afc4cd3d;border-radius:8px;padding:5px 8px;font-size:11px;line-height:1.2}.inspector{border-left:1px solid var(--line);background:var(--panel);min-height:0;color:var(--text);overflow-y:auto}.panel-section{border-bottom:1px solid var(--line);padding:14px 14px 16px}.section-title{color:var(--text-strong);text-transform:uppercase;align-items:center;gap:8px;margin-bottom:12px;font-size:12px;font-weight:760;line-height:1.2;display:flex}.file-input{display:none}.button-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;display:grid}.mode-grid{grid-template-columns:repeat(3,minmax(0,1fr))}button{min-height:34px;color:var(--text-strong);font:700 12px/1 var(--sans);cursor:pointer;background:#fff;border:1px solid #c7d2d6;border-radius:8px;justify-content:center;align-items:center;gap:7px;display:inline-flex}button:hover{color:#006b80;border-color:#5fc8dc}button:focus-visible,input:focus-visible,select:focus-visible{outline-offset:2px;outline:2px solid #1ca9c4}button.primary{color:#fff;background:#0f6f82;border-color:#0f6f82}button.primary.secondary{background:#266f5e;border-color:#266f5e}button[aria-pressed=true]{color:#9a4700;background:#fff0e6;border-color:#ff8a33}.wide-toggle{justify-content:flex-start;width:100%;margin-top:12px;padding:0 10px}.microcopy{color:var(--text-muted);margin:10px 0 0;font-size:11px;line-height:1.45}.control-field{margin-top:12px;display:block}.field-label,.control-field>span{color:var(--text-muted);justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:7px;font-size:11px;line-height:1.2;display:flex}.control-field strong,.field-label strong{color:var(--text-strong);white-space:nowrap;font-size:11px;font-weight:760}.slider-row{grid-template-columns:minmax(0,1fr) 66px;align-items:center;gap:9px;display:grid}input[type=range]{accent-color:#0f94ab;width:100%}.number-input{width:66px;height:28px;color:var(--text-strong);font:700 11px/1 var(--sans);background:#fff;border:1px solid #c7d2d6;border-radius:7px;padding:0 5px}.color-field{grid-template-columns:minmax(0,1fr) 44px;align-items:center;gap:10px;display:grid}.color-field span{margin:0}input[type=color]{background:#fff;border:1px solid #c7d2d6;border-radius:7px;width:44px;height:28px;padding:2px}.select-field select{width:100%;height:34px;color:var(--text-strong);font:700 12px/1 var(--sans);background:#fff;border:1px solid #c7d2d6;border-radius:8px;padding:0 9px}.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0;display:grid}.stats-grid div{background:#f8fbfb;border:1px solid #d7e0e3;border-radius:8px;padding:8px}.stats-grid dt{color:var(--text-muted);margin:0 0 4px;font-size:10px;line-height:1.1}.stats-grid dd{color:var(--text-strong);margin:0;font-size:13px;font-weight:760;line-height:1.1}.statusbar{border-top:1px solid var(--line);color:#d5e3e7;background:#20282d;grid-area:3/1/4/-1;align-items:center;gap:0;min-width:0;font-size:11px;display:flex;overflow:hidden}.statusbar span{text-overflow:ellipsis;white-space:nowrap;border-right:1px solid #334149;min-width:0;padding:0 12px;overflow:hidden}.toast{z-index:20;color:#7a3000;background:#fff4eb;border:1px solid #f0b38a;border-radius:8px;max-width:min(420px,100vw - 36px);padding:12px 14px;font-size:12px;line-height:1.4;position:fixed;bottom:48px;right:18px;box-shadow:0 16px 42px #181e222e}@media (width<=1040px){.app-shell{grid-template-columns:48px minmax(0,1fr)}.workspace{grid-template-rows:minmax(360px,1fr) 390px;grid-template-columns:minmax(0,1fr)}.inspector{border-left:0;border-top:1px solid var(--line)}}@media (width<=720px){.app-shell{grid-template-rows:auto 48px minmax(0,1fr) 34px;grid-template-columns:minmax(0,1fr)}.topbar{flex-direction:column;justify-content:center;align-items:flex-start;gap:6px;min-height:58px;padding:10px 12px}.format-strip{width:100%;overflow-x:auto}.tool-rail{border-bottom:1px solid #334149;border-right:0;flex-direction:row;grid-row:2/3;justify-content:center;padding:5px 8px}.workspace{grid-area:3/1/4/2;grid-template-rows:minmax(320px,52svh) 430px}.statusbar{grid-row:4/5}.viewport-help{bottom:10px;left:10px}}