/* Readable, expandable tools and independently adjustable preview width. */
body .app{--rail-size:86px;--library-size:252px;--inspector-size:264px;grid-template-columns:var(--rail-size) var(--library-size) minmax(220px,1fr) var(--inspector-size)}
body.menu-expanded .app{--rail-size:204px}
body .app>.rail{align-items:center;padding:12px 7px;gap:8px}
.rail .menu-toggle{display:flex;align-items:center;justify-content:center;gap:10px;width:68px;min-height:36px;flex-shrink:0;padding:8px;border:1px solid #7c849b77;border-radius:9px;background:#30384f;color:#f5f7ff;font:600 12px 'Segoe UI',sans-serif;box-shadow:0 2px 0 #111726}
.menu-toggle svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;flex-shrink:0}.menu-toggle .menu-toggle-label{display:none}
body .rail button[data-tab]{width:68px;min-height:66px;gap:6px}
body .rail button[data-tab] small{font-size:10px;line-height:1.35;color:#e0e5f3;font-weight:500;letter-spacing:0;text-shadow:0 1px 1px #111827}
body .rail button[data-tab].active small{color:#fff;font-weight:650}
body .rail button[data-tab] .nav-orb{width:30px;height:28px;flex-shrink:0}
body .rail button[data-tab] .nav-led{right:6px;top:7px}
body.menu-expanded .rail button[data-tab]{width:184px;min-height:49px;flex-direction:row;justify-content:flex-start;gap:13px;padding:8px 12px;transform-style:flat}
body.menu-expanded .rail button[data-tab] small{font-size:13px;text-align:left;transform:none}
body.menu-expanded .rail button[data-tab] .nav-orb{transform:none;width:30px;height:30px}
body.menu-expanded .rail button[data-tab]:hover .nav-orb{transform:translateY(-1px)}
body.menu-expanded .rail button[data-tab] .nav-led{right:9px;top:22px}
body.menu-expanded .rail .menu-toggle{width:184px;justify-content:flex-start;padding-left:15px;min-height:39px;background:#394158}
body.menu-expanded .menu-toggle .menu-toggle-label{display:inline;font-size:12px}
body.menu-expanded .railbottom{margin-right:auto;margin-left:12px;margin-top:auto}
.view-controls{height:43px;display:flex;align-items:center;gap:9px;padding:0 20px;border-bottom:1px solid var(--line);background:var(--surface);color:var(--sub);flex-shrink:0;font-size:11px}
.view-controls label{margin:0;font-size:11px;color:var(--sub);white-space:nowrap}
.view-controls input[type=range]{width:110px;min-width:65px;padding:0;height:20px;border:0;background:transparent;accent-color:#8868e7;cursor:pointer}
.view-controls output{min-width:32px;color:var(--ink);font-size:11px;font-variant-numeric:tabular-nums}
.view-controls button{font-size:10px;padding:6px 9px;color:var(--sub);background:var(--surface);white-space:nowrap}
.view-controls .properties-button{margin-left:auto}
body .canvas{width:min(var(--preview-size,100%),calc(100% - 32px))!important;max-width:calc(100% - 24px)!important;min-width:0;margin-top:18px}
body .app>#library,body .app>#inspector{min-width:0}
body .app #library .help,body .app #inspector .help{font-size:12px}
body .app>#library h2,body .app>#inspector h2{font-size:17px}
body .app>#library .tile{font-size:12px}
body .app>#library .wide,body .app>#library .productrow b{font-size:12px}
body .app>#library .productrow small{font-size:11px;line-height:1.5}
body .app>#inspector label{font-size:12px}
body .app>#inspector input,body .app>#inspector textarea,body .app>#inspector select{font-size:12px}
body .app>#library .section-label{font-size:10px!important}
body.properties-hidden .app{grid-template-columns:var(--rail-size) var(--library-size) minmax(220px,1fr)}
body.properties-hidden .app>#inspector{display:none}
body.focus-mode .app{grid-template-columns:minmax(0,1fr)}
body.focus-mode .app>.rail{display:none}
body .toolbar>div:first-child{max-width:none;flex:1}
body .toolbar .devices{margin-left:0}
@media(min-width:1600px){body .app{--library-size:280px;--inspector-size:290px}}
@media(max-width:1350px){body .app{--library-size:230px;--inspector-size:240px}body .app,body.properties-hidden .app{grid-template-columns:var(--rail-size) var(--library-size) minmax(220px,1fr)}body .app>#inspector{position:fixed;z-index:8;right:16px;bottom:35px;width:280px;max-height:calc(100vh - 180px);overflow:auto;box-shadow:0 15px 60px #23305140;border:1px solid var(--line);border-radius:12px;display:none}body .app>#inspector.drawer-open{display:block}body.properties-hidden .app>#inspector{display:none}body .inspector-toggle{display:grid!important}}
@media(max-width:850px){body .app{--library-size:200px}body.menu-expanded .app{--rail-size:184px}body.menu-expanded .rail button[data-tab],body.menu-expanded .rail .menu-toggle{width:164px}body.menu-expanded .rail button[data-tab] small{font-size:12px}body .app>#library{padding-inline:13px}.view-controls{padding-inline:12px;gap:6px}.view-controls label{font-size:10px}.view-controls input[type=range]{width:80px}.view-controls .reset-view{display:none}body .toolbar{padding-inline:12px}body .toolbar .devices button{padding-inline:7px}}
@media(max-width:650px){body .app{--library-size:180px;grid-template-columns:var(--rail-size) minmax(0,1fr)}body .app>#library{grid-column:2;grid-row:1;max-height:none}body .app>main{grid-column:1/3;grid-row:2;height:650px;min-width:0}body .app>.rail{grid-row:1;max-height:580px}body .app{height:calc(100vh - 112px);overflow:auto;grid-template-rows:580px 650px}body.menu-expanded .app{--rail-size:184px}body .app #library .library-grid{grid-template-columns:1fr 1fr}body .app #library .tile{font-size:11px}body.focus-mode .app{display:block}body.focus-mode .app>main{height:calc(100vh - 112px)}body.properties-hidden .app{grid-template-columns:var(--rail-size) minmax(0,1fr)}body .app>#inspector{right:10px;bottom:20px}body .workspacebar .crumb{max-width:130px;overflow:hidden;white-space:nowrap}.view-controls .properties-button{font-size:10px}}
body.menu-expanded .rail .menu-toggle{flex-direction:row;gap:10px}.view-controls{flex-wrap:wrap;min-height:43px;height:auto;padding-top:7px;padding-bottom:7px}.panel-resizer{position:fixed;z-index:7;width:9px;cursor:col-resize;touch-action:none;background:transparent;outline-offset:0}.panel-resizer:after{content:"";position:absolute;left:3px;top:45%;height:48px;width:3px;background:#c6bbdf;border:1px solid #ffffff70;border-radius:5px;transition:height .15s,background .15s}.panel-resizer:hover:after,.panel-resizer:focus:after,body.resizing-panels .panel-resizer:after{height:65px;background:#9d7ad9}.panel-resizer:focus-visible{outline:2px solid #a68add}body.resizing-panels{cursor:col-resize;user-select:none}body.resizing-panels iframe{pointer-events:none}@media(max-width:650px){.panel-resizer{display:none}}