:root{color-scheme:light;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}*{box-sizing:border-box}body{margin:0;height:100vh}#app{height:100vh;display:flex;flex-direction:column}.topbar{display:flex;justify-content:space-between;gap:8px;padding:8px;border-bottom:1px solid #ddd}.topbar__left,.topbar__center,.topbar__right{display:flex;gap:8px;align-items:center}.topbar__presets{display:flex;gap:6px;align-items:center}.preset{display:inline-flex;align-items:center;padding:4px 8px;border:1px solid #ccc;border-radius:6px;background:#fff}.preset[aria-pressed=true]{border-color:#333}.tabs{border-bottom:1px solid #ddd;padding:6px 8px}.tabs__list{display:flex;gap:6px;align-items:center;overflow-x:auto}.tab{display:inline-flex;gap:6px;align-items:center;padding:4px 8px;border:1px solid #ccc;border-radius:6px;background:#fff}.tab[aria-selected=true]{border-color:#333}.tab__close{border:none;background:transparent;cursor:pointer;font-size:14px}.layout{flex:1;display:grid;grid-template-columns:120px 1fr 240px;min-height:0;min-width:0}.layout.layout--propsHidden{grid-template-columns:120px 1fr 0px}.tools{border-right:1px solid #ddd;padding:8px;display:flex;flex-direction:column;gap:6px;min-width:0}.tool{text-align:left;padding:6px 8px}.canvas{position:relative;min-height:0;min-width:0}.canvas__inner{width:100%;height:100%;overflow:hidden;min-width:0;background-color:#f7f7f7;background-image:linear-gradient(45deg,#eaeaea 25%,transparent 25%),linear-gradient(-45deg,#eaeaea 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#eaeaea 75%),linear-gradient(-45deg,transparent 75%,#eaeaea 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0px}#c{width:100%;height:100%;display:block}.message{position:absolute;left:8px;bottom:8px;padding:6px 8px;border:1px solid #ccc;border-radius:6px;background:#ffffffe6;max-width:70ch;display:none}.message[data-show=true]{display:block}.props{border-left:1px solid #ddd;padding:8px;min-width:0}.props__title{font-weight:600;margin-bottom:10px}.field{display:grid;gap:6px;margin-bottom:10px}.btnRow{display:flex;gap:6px;flex-wrap:wrap}button:focus-visible{outline:2px solid #000;outline-offset:2px}