:root{color:#e7eef9;background:#07111f;font-family:Inter,ui-sans-serif,system-ui,sans-serif}*{box-sizing:border-box}body{margin:0;overflow:hidden}.canvas-shell{background:#07111f;grid-template-rows:58px minmax(0,1fr);height:100dvh;display:grid}.canvas-header{background:#0d1727;border-bottom:1px solid #2d3a4e;grid-template-columns:260px minmax(220px,1fr) auto;align-items:center;gap:12px;padding:8px 12px;display:grid}.canvas-brand,.canvas-header-actions,.canvas-title{align-items:center;gap:9px;display:flex}.canvas-brand img{border:1px solid #334155;border-radius:6px;width:36px;height:36px;padding:5px}.canvas-brand div,.canvas-title{display:grid}.canvas-brand span,.canvas-title span{color:#9fb0c7;font-size:12px}.canvas-title input{color:#e7eef9;background:0 0;border:0;max-width:320px;font:700 15px inherit}.canvas-header button,.canvas-header a,.canvas-rail button,.canvas-panel button{color:#e7eef9;font:inherit;cursor:pointer;background:#172235;border:1px solid #334155;border-radius:5px;padding:8px 10px;text-decoration:none}.canvas-body{grid-template-columns:86px 280px minmax(0,1fr);min-height:0;display:grid}.canvas-rail{border-right:1px solid #2d3a4e;align-content:start;gap:6px;padding:12px 8px;display:grid}.canvas-rail button{background:0 0;border-color:#0000}.canvas-rail button.active{background:#17314d;border-color:#4b78a8}.canvas-panel{background:#101a2a;border-right:1px solid #2d3a4e;min-width:0;padding:16px;overflow:auto}.canvas-panel h2{margin:0 0 16px;font-size:19px}.canvas-panel h3{margin:22px 0 9px;font-size:14px}.canvas-panel label{gap:6px;margin-bottom:12px;font-size:13px;font-weight:700;display:grid}.canvas-panel select,.canvas-panel textarea{color:#e7eef9;width:100%;font:inherit;background:#0b1524;border:1px solid #405068;border-radius:5px;padding:9px}.canvas-panel textarea{resize:vertical;min-height:105px}.canvas-panel .primary{background:#0f766e;border-color:#14b8a6;width:100%}.note-list,.version-list{gap:8px;margin-top:14px;display:grid}.note-list article{background:#131f31;border:1px solid #334155;padding:10px}.note-list p{white-space:pre-wrap;overflow-wrap:anywhere;margin:0 0 10px}.note-list article div{gap:6px;display:flex}.version-list button{text-align:left}.version-list p{color:#9fb0c7;font-size:13px}.canvas-stage{background:#f8fafc;min-width:0;min-height:0;position:relative}.canvas-stage:after{content:"";pointer-events:none;z-index:2;opacity:.18;position:absolute;inset:0}.canvas-stage.pattern-dots:after{background-image:radial-gradient(#334155 1px,#0000 1px);background-size:20px 20px}.canvas-stage.pattern-lines:after{background-image:linear-gradient(#64748b 1px,#0000 1px);background-size:100% 24px}.canvas-editor{z-index:1;position:absolute;inset:0}.code-preview{background:#fff;gap:10px;margin-top:16px;padding:10px;display:grid}.code-preview img{object-fit:contain;width:100%;max-height:240px;display:block}.code-preview button{color:#e7eef9}@media (width<=800px){body{overflow:auto}.canvas-shell{grid-template-rows:auto auto;height:auto;min-height:100dvh}.canvas-header{grid-template-columns:1fr;padding:10px}.canvas-header-actions{overflow-x:auto}.canvas-body{grid-template-rows:auto auto minmax(620px,75vh);grid-template-columns:1fr}.canvas-rail{border-bottom:1px solid #2d3a4e;border-right:0;display:flex;overflow-x:auto}.canvas-panel{border-bottom:1px solid #2d3a4e;border-right:0;max-height:320px}.canvas-stage{min-height:620px}}.canvas-access{background:#07111f;place-items:center;min-height:100dvh;padding:24px;display:grid}.canvas-access section{background:#101a2a;border:1px solid #334155;gap:14px;width:min(480px,100%);padding:24px;display:grid}.canvas-access img{width:52px}.canvas-access p,.canvas-access h1{margin:0}.canvas-access div{flex-wrap:wrap;gap:8px;display:flex}.canvas-access button,.canvas-access a{color:#e7eef9;font:inherit;cursor:pointer;background:#172235;border:1px solid #405068;border-radius:5px;padding:10px 12px;text-decoration:none}.canvas-header{grid-template-columns:260px minmax(220px,1fr) auto auto}.space-switch{background:#091321;border:1px solid #334155;border-radius:5px;padding:2px;display:flex}.space-switch button{color:#9fb0c7;cursor:pointer;background:0 0;border:0;border-radius:4px;padding:7px 10px}.space-switch button.active{color:#fff;background:#0f766e}.canvas-access .primary-link{text-align:center;background:#0f766e;border-color:#14b8a6}@media (width<=800px){.canvas-header{grid-template-columns:1fr}.space-switch{justify-self:start}}.canvas-body{grid-template-columns:var(--canvas-rail-width,86px) 6px var(--canvas-panel-width,280px) 6px minmax(0,1fr)}.canvas-resizer{z-index:4;cursor:col-resize;touch-action:none;background:#1f2b3d;border:0;border-radius:0;width:6px;min-width:6px;padding:0;position:relative}.canvas-resizer:after{content:"";opacity:0;background:#405068;transition:opacity .15s;position:absolute;inset:0 2px}.canvas-resizer:hover:after,.canvas-resizer:focus-visible:after,.canvas-resizer:active:after{opacity:1}@media (width<=800px){.canvas-body{grid-template-rows:auto auto minmax(620px,75vh);grid-template-columns:1fr}.canvas-resizer{display:none}}