*{box-sizing:border-box}body{margin:0;min-width:320px;color:#17202a;background:#f2f5f7;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}button{min-height:40px;border:1px solid #bdc7d1;border-radius:6px;padding:0 14px;color:#17202a;background:#fff;font:inherit;cursor:pointer}button:hover:not(:disabled){border-color:#6f7f8f}button:disabled{cursor:default;opacity:.45}button.primary{border-color:#1662a8;color:#fff;background:#1662a8}.app-shell{width:min(100%,1640px);margin:0 auto;padding:24px}.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}.title{margin:0;font-size:24px;font-weight:720}.toolbar,.slider-controls{display:flex;align-items:center;flex-wrap:wrap;gap:10px}.workspace{display:grid;grid-template-columns:repeat(2,minmax(320px,1fr));gap:16px}.viewport{min-width:0}.viewport-header{display:flex;align-items:center;justify-content:space-between;min-height:34px;font-weight:680}.canvas-frame{overflow:hidden;border:1px solid #ccd5df;border-radius:8px;width:760px;height:460;background:linear-gradient(45deg,#e8edf2 25%,transparent 25%),linear-gradient(-45deg,#e8edf2 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e8edf2 75%),linear-gradient(-45deg,transparent 75%,#e8edf2 75%);background-color:#fff;background-position:0 0,0 10px,10px -10px,-10px 0;background-size:20px 20px}canvas{display:block;width:100%;aspect-ratio:760 / 460}.counter{min-width:72px;text-align:center;font-variant-numeric:tabular-nums}.status{min-height:24px;margin-top:14px;color:#506070}@media (max-width: 900px){.app-shell{padding:16px}.topbar{align-items:flex-start;flex-direction:column}.workspace{grid-template-columns:1fr}}