*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{color:#e8e6e0;background:#1a1a1a;height:100%;font-family:system-ui,-apple-system,sans-serif}.app{grid-template-rows:auto 1fr;grid-template-columns:56px var(--editor-width,420px) 1fr;grid-template-areas:"toolbar toolbar toolbar""nav editor canvas";height:100%;transition:grid-template-columns .18s;display:grid;overflow:hidden}.toolbar{z-index:10;background:#111;border-bottom:1px solid #2a2a2a;grid-area:toolbar;align-items:center;gap:12px;padding:10px 16px;display:flex}.toolbar h1{letter-spacing:.04em;color:#e8e6e0;margin-right:auto;font-size:18px;font-weight:700}.toolbar h1 span{color:#6a9fb5}.btn{cursor:pointer;color:#ccc;white-space:nowrap;background:#2a2a2a;border:1px solid #444;border-radius:6px;align-items:center;gap:6px;padding:6px 12px;font-size:13px;font-weight:500;transition:background .15s,border-color .15s;display:inline-flex}.btn:hover{color:#fff;background:#333;border-color:#555}a.btn{text-decoration:none}.btn:active{background:#3a3a3a}.btn.primary{color:#c5e0f0;background:#2a4a5e;border-color:#4a7a9b}.btn.primary:hover{background:#325870}.btn:disabled{opacity:.45;cursor:not-allowed}.export-menu{position:relative}.export-chevron{opacity:.7;margin-left:2px;font-size:9px}.export-dropdown{z-index:100;background:#1e2a32;border:1px solid #3a5a72;border-radius:8px;min-width:160px;padding:4px;position:absolute;top:calc(100% + 6px);left:0;box-shadow:0 8px 24px #0006}.export-item{cursor:pointer;text-align:left;background:0 0;border:none;border-radius:5px;flex-direction:column;gap:2px;width:100%;padding:8px 12px;transition:background .12s;display:flex}.export-item:hover{background:#2a4a5e}.export-item-label{color:#c5e0f0;font-size:13px;font-weight:600}.export-item-desc{color:#6a9fb5;font-size:11px}.file-btn{position:relative;overflow:hidden}.file-btn input[type=file]{opacity:0;cursor:pointer;font-size:0;position:absolute;inset:0}.nav-sidebar{z-index:5;background:#141414;border-right:1px solid #2a2a2a;flex-direction:column;grid-area:nav;align-items:center;gap:4px;padding:10px 0;display:flex;overflow:hidden}.nav-item{color:#666;cursor:pointer;background:0 0;border:none;border-radius:8px;outline:none;flex-direction:column;align-items:center;gap:4px;width:48px;padding:10px 0 8px;transition:background .13s,color .13s;display:flex;position:relative}.nav-item:hover:not(:disabled){color:#bbb;background:#1e1e1e}.nav-item.active{color:#6a9fb5;background:#1e2a33}.nav-item:disabled{cursor:default}.nav-label{letter-spacing:.02em;text-align:center;white-space:nowrap;text-overflow:clip;max-width:46px;font-size:9px;font-weight:500;line-height:1.2;overflow:hidden}.soon-badge{letter-spacing:.03em;color:#6a9fb5;text-transform:uppercase;background:#1a2d3a;border:1px solid #2a4a5e;border-radius:3px;padding:0 3px;font-size:7px;font-weight:600;line-height:1.5;position:absolute;top:5px;right:4px}.editor-panel{background:#1e1e1e;border-right:1px solid #2a2a2a;grid-area:editor;min-width:0;position:relative;overflow:visible}.editor-panel.collapsed{border-right:none}.editor-inner{flex-direction:column;display:flex;position:absolute;inset:0;overflow:hidden}.editor-toggle{z-index:20;color:#666;cursor:pointer;background:#1e1e1e;border:1px solid #333;border-left:none;border-radius:0 6px 6px 0;justify-content:center;align-items:center;width:16px;height:44px;padding:0;transition:background .13s,color .13s,border-color .13s;display:flex;position:absolute;top:50%;right:-16px;transform:translateY(-50%)}.editor-toggle:hover{color:#aaa;background:#252525;border-color:#444}.editor-panel.collapsed .editor-toggle{background:#141414;border-color:#2a2a2a;border-left-style:solid;border-left-width:1px;border-radius:6px}.resize-handle{cursor:col-resize;z-index:15;background:0 0;width:5px;height:100%;transition:background .13s;position:absolute;top:0;right:0}.resize-handle:hover{background:#3a5a6e}.editor-wrap{flex:1;min-height:0;overflow:hidden}.editor-textarea{resize:none;color:#d4d0c8;caret-color:#6a9fb5;tab-size:2;box-sizing:border-box;background:#1e1e1e;border:none;outline:none;width:100%;height:100%;padding:12px 14px;font:13px/1.6 Menlo,Consolas,monospace}.editor-textarea::selection{background:#2a4a5e}.error-panel{background:#1a1010;border-top:1px solid #3a2020;flex-shrink:0;max-height:140px;padding:8px 12px;overflow-y:auto}.error-panel .error-title{color:#c0605a;text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px;font-size:11px;font-weight:600}.error-panel .error-item{color:#e07070;padding:1px 0;font:12px/1.5 Menlo,Consolas,monospace}.error-panel .error-item .line-ref{color:#a04040;margin-right:8px}.canvas-panel{background:#f0ede8;grid-area:canvas;position:relative;overflow:hidden}.canvas-placeholder{color:#999;text-align:center;justify-content:center;align-items:center;height:100%;padding:32px;font-size:14px;display:flex}.canvas-hint{color:#aaa;pointer-events:none;background:#00000026;border-radius:4px;padding:4px 10px;font-size:11px;position:absolute;bottom:12px;right:16px}.btn:focus-visible,.nav-item:focus-visible,.editor-toggle:focus-visible{outline-offset:2px;outline:2px solid #6a9fb5}@media (width<=860px){.app{grid-template:"toolbar toolbar""nav editor"45vh"nav canvas"1fr/56px 1fr}.editor-panel{border-bottom:1px solid #2a2a2a;border-right:none}.canvas-panel{min-height:0}.resize-handle{display:none}}@media (width<=480px){.toolbar h1{font-size:15px}.btn{padding:5px 9px;font-size:12px}.nav-label{display:none}}