:root{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#e8ede7;background:#10211f;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:#10211f}button,input,select,textarea{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #f5a524;outline-offset:2px}.app-shell{min-height:100vh;display:grid;grid-template-rows:auto 1fr;background:radial-gradient(circle at 85% -10%,#23584e 0,transparent 34rem),#10211f}.topbar{min-height:78px;padding:14px 22px;display:flex;align-items:center;gap:28px;border-bottom:1px solid #34534d;background:#0b1d1bdb;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.brand{font-family:Arial Rounded MT Bold,-apple-system,sans-serif;font-size:20px;white-space:nowrap;display:flex;align-items:center;gap:8px;letter-spacing:-.04em}.brand b{color:#6ee7c7}.brand em{color:#9caeaa;font:500 10px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;border:1px solid #47655e;padding:3px 5px;border-radius:3px}.brand-mark{display:grid;place-items:center;width:29px;height:29px;color:#10211f;background:#f5a524;border-radius:4px}.title-input{width:min(310px,28vw)}.title-input label,.field-label{display:block;font:500 10px ui-monospace,SFMono-Regular,Menlo,monospace;color:#93aaa3;text-transform:uppercase;letter-spacing:.1em;margin-bottom:5px}.title-input input{width:100%;border:0;color:#fff;background:transparent;font:600 15px -apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;padding:2px 0;border-bottom:1px solid #49655e}.header-actions{display:flex;align-items:center;gap:8px;margin-left:auto}button{border:1px solid #46635b;color:#edf2ed;background:#17332f;border-radius:5px;padding:8px 11px;font-size:12px;font-weight:700;transition:background .16s,color .16s,border-color .16s,transform .16s}button:hover:not(:disabled){background:#244b43;border-color:#6ee7c7}button:active:not(:disabled){transform:translateY(1px)}button:disabled{cursor:not-allowed;opacity:.45}.primary{color:#10211f;border-color:#f5a524;background:#f5a524}.primary:hover:not(:disabled){background:#ffd06c;border-color:#ffd06c}.ghost{background:transparent}.text-button{padding:0;border:0;background:transparent;color:#9fd8c9}.text-button:hover{background:transparent}.workspace{display:grid;grid-template-columns:230px minmax(280px,.78fr) minmax(450px,1.32fr);min-height:0}.sidebar{min-height:calc(100vh - 78px);padding:24px 17px;overflow:auto;background:#0c1b19;border-right:1px solid #34534d}.sidebar section{padding:0 0 23px;margin-bottom:21px;border-bottom:1px solid #29433e}.sidebar section:last-child{border:0}.eyebrow{margin:0 0 9px;color:#84a69d;font:500 10px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.13em;text-transform:uppercase}.sidebar select{width:100%}.sidebar select,.sidebar input{color:#f5f8f5;border:1px solid #46635b;background:#142c28;border-radius:4px;padding:8px;font-size:12px}.tiny-note,.empty-copy{color:#8fa69f;font-size:11px;line-height:1.55}.section-heading{display:flex;align-items:baseline;justify-content:space-between}.section-heading span{color:#78948c;font:10px ui-monospace,SFMono-Regular,Menlo,monospace}.saved-list{margin:0;padding:0;list-style:none}.saved-list li{display:flex;gap:4px;margin-bottom:4px}.saved-list li button:first-child,.history-item{overflow:hidden;flex:1;border:0;background:transparent;text-align:left;padding:6px 5px;color:#d6e4de;white-space:nowrap;text-overflow:ellipsis;font-size:11px}.saved-list li button:first-child:hover,.history-item:hover{background:#18342f}.icon-button{border:0;padding:3px 7px;background:transparent;color:#8ea59e}.history-item{display:block;width:100%}.history-item small{display:block;color:#78948c;font:9px ui-monospace,SFMono-Regular,Menlo,monospace;margin-top:3px}.editor-pane,.preview-pane{min-height:calc(100vh - 78px);padding:24px;display:flex;flex-direction:column;min-width:0}.editor-pane{background:#122622;border-right:1px solid #34534d}.preview-pane{position:relative;background:#f0f3eb;color:#10211f}.pane-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:16px}.pane-heading h1{margin:0;font:700 21px Arial Rounded MT Bold,-apple-system,sans-serif;letter-spacing:-.045em}.editor-pane .pane-heading h1{color:#f1f7f1}.status{max-width:48%;overflow:hidden;color:#31574e;border:1px solid #97b8aa;background:#dcece1;border-radius:999px;padding:5px 9px;font:10px ui-monospace,SFMono-Regular,Menlo,monospace;text-overflow:ellipsis;white-space:nowrap}.editor-pane .status{background:#173c35;border-color:#3c6e61;color:#9be6d0}.status.error{color:#7f2518;background:#ffe0d4;border-color:#e89982}textarea{flex:1;min-height:400px;resize:none;padding:17px;color:#d8f1e6;border:1px solid #34534d;border-radius:5px;background:#0b1917;font:13px/1.7 ui-monospace,SFMono-Regular,Menlo,monospace;tab-size:2}.editor-footer{display:flex;justify-content:space-between;gap:10px;padding-top:10px;color:#8ba39c;font:10px ui-monospace,SFMono-Regular,Menlo,monospace}.preview-controls,.sequence-controls,.export-bar{display:flex;align-items:center;justify-content:space-between;gap:8px}.preview-controls{margin-bottom:13px}.zoom-controls,.canvas-actions{display:flex;align-items:center;gap:5px}.zoom-controls button,.canvas-actions button{padding:6px 8px;font-size:11px}.zoom-controls span{min-width:37px;text-align:center;font:10px ui-monospace,SFMono-Regular,Menlo,monospace}.canvas-actions .active{color:#10211f;background:#6ee7c7;border-color:#6ee7c7}.editor-banner{margin:0 0 11px;color:#754b00;background:#fff1ca;border-left:3px solid #f5a524;padding:8px 10px;font-size:11px}.sequence-controls{margin:0 0 11px;padding:7px 9px;border:1px solid #b9ccc1;background:#e2ede5;font:10px ui-monospace,SFMono-Regular,Menlo,monospace}.sequence-controls input{flex:1;accent-color:#16715e}.canvas-scroll{position:relative;flex:1;min-height:390px;overflow:auto;border:1px solid #b5c8bc;background-color:#fafbf7;background-image:radial-gradient(#c9d6ce 1px,transparent 1px);background-size:18px 18px}.diagram-stage{width:max-content;min-width:100%;min-height:100%;display:grid;place-items:center;padding:50px;transform-origin:center center}.diagram-stage svg{max-width:min(100%,1100px);height:auto;color:#142e29}.render-error{position:absolute;inset:140px 40px auto;display:grid;gap:7px;padding:16px;color:#7d2416;border:1px solid #e8aa91;background:#ffede7;border-radius:6px;font-size:12px}.export-bar{padding-top:13px;justify-content:flex-end}.preview-pane:fullscreen{padding:34px;background:#f0f3eb}.preview-pane:fullscreen .canvas-scroll{min-height:0}.demo-list{display:grid;gap:6px;margin-top:12px}.demo-list button{width:100%;padding:8px;text-align:left;background:#142c28}@media(max-width:1050px){.workspace{grid-template-columns:210px 1fr}.preview-pane{grid-column:2;min-height:720px}.editor-pane{min-height:580px}.topbar{flex-wrap:wrap;gap:12px}.header-actions{margin-left:0}.title-input{width:260px}}@media(max-width:700px){.workspace{display:block}.sidebar,.editor-pane,.preview-pane{min-height:auto}.sidebar{border-right:0}.editor-pane{height:560px}.preview-pane{height:650px;padding:18px 12px}.topbar{padding:12px}.header-actions{width:100%}.header-actions button{flex:1}.title-input{flex:1;min-width:0}.preview-controls{align-items:flex-start;flex-direction:column}.canvas-actions{flex-wrap:wrap}.diagram-stage{width:100%;padding:18px}.editor-footer span{overflow-wrap:anywhere}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}