:root{font-family:Inter,"Segoe UI",Arial,sans-serif;color:#26232c;background:#f8f7f4;font-synthesis:none;--plum:#715079;--border:#e9e5e3;--muted:#8a858d;--paper:#fdfcfb}
*{box-sizing:border-box}body{margin:0;overflow:hidden}button,input,textarea{font:inherit}button{cursor:pointer;border:1px solid var(--border);background:#fffdfb;border-radius:7px;color:inherit;padding:9px 13px;font-size:12px;transition:background .15s,box-shadow .15s}button:hover{background:#f0eaf1}button:focus-visible,a:focus-visible{outline:2px solid #96729d;outline-offset:3px}button:disabled{opacity:.5;cursor:default}button.primary{background:var(--plum);border-color:var(--plum);color:#fff}button.primary:hover{background:#5e4066}[hidden]{display:none!important}.topbar{height:67px;display:flex;border-bottom:1px solid var(--border);align-items:center;background:var(--paper);position:relative;z-index:4}.wordmark{width:205px;flex-shrink:0;padding-left:27px;color:#22212a;font-size:29px;letter-spacing:-1.5px;font-weight:650;text-decoration:none;display:flex;align-items:center;gap:8px}.wordmark span{font-size:22px;color:var(--plum);margin-top:4px}.project-heading{height:32px;border-left:1px solid var(--border);padding-left:24px;display:flex;align-items:center;gap:12px;font-size:13px;font-weight:550}.project-icon{font-size:20px;color:#928295}.chevron{margin:0 8px;color:#8d8790}.tag{font-size:8px;letter-spacing:1px;border:1px solid var(--border);padding:5px 7px;border-radius:4px;color:#938996}.top-actions{margin-left:auto;display:flex;align-items:center;gap:15px;padding-right:22px}.save-state{font-size:10px;color:#7f7c80;display:flex;gap:6px;align-items:center}.save-state i,.connect i,.pair-status i{width:6px;height:6px;border-radius:50%;background:#91aa8f;display:inline-block}.connect{display:flex;gap:8px;align-items:center;font-size:11px;background:#f8f8f3}.connect i{background:#b4a6bb}.connect i.connected{background:#739c77}.workspace{display:grid;grid-template-columns:205px minmax(300px,1fr) 286px;height:calc(100dvh - 67px)}.sidebar{border-right:1px solid var(--border);padding:26px 16px 0;display:flex;flex-direction:column;background:var(--paper);overflow:auto}.workspace-label{font-size:9px;letter-spacing:1.7px;color:#9a939d;font-weight:600;padding:0 11px;margin-bottom:14px}.nav-item{display:flex;align-items:center;width:100%;gap:12px;border:0;background:transparent;text-align:left;font-size:12px;padding:12px 11px;margin:3px 0}.nav-item>span:first-child{font-size:19px;width:20px;line-height:18px;color:#7d7281}.nav-item.active{color:#6d4776;background:#f1eaf2}.nav-count{margin-left:auto;font-size:10px;border-radius:4px;padding:2px 5px;background:#e8ddeb}.shortcut{margin-left:auto;color:#a69aa9}.sidebar-divider{height:1px;flex-shrink:0;background:var(--border);margin:23px 7px}.outline-label{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px}.outline-label button{border:0;padding:0;background:none;font-size:20px;color:#9a939d}.outline-item{border:0;text-align:left;display:flex;align-items:center;gap:9px;background:transparent;width:100%;font-size:11px;color:#716974;padding:10px 11px;margin:3px 0}.outline-item.selected{background:#f0e9f0;color:#6c4776}.outline-item span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.outline-item span:first-child{font-size:16px;color:#9a8f9e}.sidebar-bottom{margin-top:auto;padding-top:25px}.local-card{border:1px solid #eae5e7;border-radius:9px;padding:16px 13px;background:linear-gradient(140deg,#fcfbf8,#f6f0f6)}.local-icon{display:block;font-size:24px;color:#926d9a;margin-bottom:7px}.local-card strong{font-size:11px;font-weight:550}.local-card p{font-size:10px;color:#918793;line-height:1.7;margin:8px 0 12px}.local-card button{font-size:10px;padding:0;background:none;border:0;color:#775181}.local-card small{display:block;color:#918793;font-size:9px;margin-top:8px;overflow-wrap:anywhere}.version-label{font-size:9px;color:#a29ba4;display:flex;justify-content:space-between;margin:24px 5px 18px}.canvas-shell{min-width:0;position:relative;display:flex;flex-direction:column;background:#f8f7f4}.canvas-top{padding:31px 30px 24px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ede9e5;z-index:2;background:linear-gradient(100deg,#faf9f6,#f7f5f3)}.eyebrow{font-size:8px;letter-spacing:2px;color:#9b8d9f;font-weight:650}.canvas-top h1{font:normal 27px Georgia,serif;letter-spacing:-.7px;margin:9px 0 8px;color:#3e3442}.canvas-top p{font-size:11px;margin:0;color:#9b919c}.add-button{font-size:11px;background:#fffdfb}.canvas-top>div{min-width:0}#canvas{flex:1;position:relative;overflow:hidden;touch-action:none;background-image:radial-gradient(#dcd5d9 .7px,transparent .7px);background-size:19px 19px;outline:none}#world{position:absolute;transform-origin:0 0;width:1px;height:1px}#edges{position:absolute;pointer-events:none;overflow:visible}#edges path{fill:none;stroke:#c1adc4;stroke-width:1.4}#edges circle{fill:#98779f}#nodes{position:absolute;left:0;top:0}.artifact{position:absolute;width:340px;border-radius:10px;background:#fffdfb;border:1px solid #e6e0e2;box-shadow:0 3px 8px #46374705;overflow:hidden;transition:box-shadow .15s,border-color .15s}.artifact.selected{border:1.5px solid #9974a1;box-shadow:0 0 0 3px #9d7ba00d,0 8px 20px #5c3d6409}.artifact-header{height:51px;padding:0 17px;display:flex;align-items:center;gap:10px;border-bottom:1px solid #eee9eb;cursor:grab}.artifact-header:active{cursor:grabbing}.artifact-header>span{color:#8b7093;font-size:19px}.artifact-header h2{font-size:13px;font-weight:550;margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.artifact-header .more{margin-left:auto;border:0;padding:2px 5px;background:none;color:#a49ba8;letter-spacing:2px}.note-content{padding:23px 23px 28px;white-space:pre-wrap;font-size:13px;color:#756a7a;line-height:1.9;min-height:235px;max-height:460px;overflow:auto}.note-content:first-line{font-size:19px;font-family:Georgia,serif;line-height:1.4;color:#49394e}.artifact-footer{height:36px;border-top:1px solid #efe9ed;display:flex;align-items:center;justify-content:space-between;padding:0 15px;font-size:9px;color:#a69aab}.artifact-footer span:first-child{display:flex;align-items:center;gap:5px}.artifact-footer i{width:5px;height:5px;background:#a6b39a;border-radius:50%}.html-cover{height:370px;position:relative;overflow:hidden;background:radial-gradient(ellipse at 80% 80%,#485490,#152e66 60%,#0c1e49);color:#fff;padding:28px 25px}.html-cover .cover-brand{font-size:12px;letter-spacing:2px;color:#c5d0e8}.html-cover h3{font:40px/1.08 Georgia,serif;font-weight:400;letter-spacing:-1px;position:relative;z-index:1;margin:42px 0 17px;max-width:230px;overflow-wrap:anywhere}.html-cover p{font-size:11px;color:#d2d8e9;position:relative;line-height:1.7}.orb{width:200px;height:200px;position:absolute;right:-35px;top:54px;border-radius:50%;background:radial-gradient(circle at 30% 25%,#ffe5b2,#ff9850 15%,#fa4624 38%,#902b59 65%,#ffb16c 88%);box-shadow:inset -24px -15px 25px #371c6544,inset 12px 5px 15px #fff6,0 18px 55px #fa5e4733;transform:rotate(-25deg)}.orb:after{content:"";position:absolute;inset:28px -7px;border:10px solid #ffc57d88;border-radius:50%;transform:rotate(45deg)}.open-live{position:absolute;bottom:23px;left:24px;border:1px solid #ffffff45;background:#ffffff14;color:#fff;border-radius:20px;font-size:10px;padding:9px 16px;backdrop-filter:blur(8px)}.open-live:hover{background:#ffffff30}.image-cover{height:300px;width:100%;object-fit:contain;background:#f3f0f3;display:block}.canvas-hint{position:absolute;bottom:23px;left:24px;font-size:9px;color:#ab9eae;pointer-events:none}.canvas-hint span{padding:0 7px}.canvas-controls{position:absolute;bottom:15px;right:20px;border:1px solid #e6e0e3;background:#fffdfa;display:flex;align-items:center;padding:3px;border-radius:8px;box-shadow:0 2px 10px #5d445508}.canvas-controls button{border:0;background:none;font-size:18px;width:32px;padding:5px}.canvas-controls>span{height:15px;width:1px;background:var(--border);margin:0 4px}.canvas-controls output{font-size:10px;width:38px;text-align:center;color:#786c7c}.activity-bar{height:66px;flex-shrink:0;border-top:1px solid var(--border);background:#fdfbf9;display:flex;align-items:center;padding:12px 24px;gap:12px}.activity-star{border-radius:50%;width:31px;height:31px;background:#f0e8f2;color:#8a6293;display:grid;place-items:center;font-size:22px}.activity-bar strong{display:block;font-size:10px;font-weight:550;margin-bottom:5px;color:#605167}.activity-bar div>span{font-size:10px;color:#a396a7}.activity-bar>span:last-child{margin-left:auto;font-size:8px;letter-spacing:1px;color:#ad9eae}.inspector{border-left:1px solid var(--border);padding:25px 22px;background:#fdfcfb;overflow:auto}.inspector-heading{font-size:9px;letter-spacing:1.5px;color:#9d93a1;display:flex;justify-content:space-between;padding-bottom:24px;border-bottom:1px solid var(--border)}.inspector-heading span:last-child{letter-spacing:1px;font-size:8px;background:#f3eef4;padding:3px 5px;color:#997e9f;border-radius:3px}.selected-heading{display:flex;align-items:center;gap:10px;margin:23px 0}.selected-heading>span{font-size:21px;color:#8d6c95}.selected-heading h2{font-size:15px;font-weight:550;margin:0;overflow-wrap:anywhere}.inspector label{font-size:10px;color:#84738b;display:block;margin-bottom:8px;margin-top:18px}.inspector input,.inspector textarea{width:100%;border:1px solid #e8e1e9;border-radius:6px;background:#fffdfa;padding:11px;font-size:11px;color:#5c4e64;outline:none}.inspector input:focus,.inspector textarea:focus{border-color:#ac8bb4;box-shadow:0 0 0 2px #a98aaf12}.inspector textarea{height:190px;resize:vertical;line-height:1.8}.inspector textarea.code{font-family:Consolas,monospace;font-size:10px}.inspector-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:15px}.inspector-actions button{font-size:10px;flex:1;white-space:nowrap;padding:10px}.field-hint{font-size:9px;color:#a89aaf;line-height:1.7;margin-bottom:22px}.detail-row{display:flex;justify-content:space-between;padding:12px 0;border-top:1px solid #f0ebf1;font-size:9px;color:#a596ad}.detail-row code,.detail-row span:last-child{color:#887590;font-size:9px}.delete-button{border:0;background:transparent;color:#a17f8d;font-size:10px;padding:9px 0}.recent-activity{border-top:1px solid var(--border);margin-top:24px;padding-top:23px}.recent-activity>.workspace-label{padding:0}.event{position:relative;margin:15px 0;padding-left:13px;font-size:10px;color:#837189;line-height:1.5}.event:before{position:absolute;left:0;top:5px;width:4px;height:4px;border-radius:50%;background:#b7a7bc;content:""}.event small{display:block;font-size:9px;color:#b4a9b8;margin-top:3px}#inspector-empty{font-size:12px;color:#998ba0;line-height:1.8}#inspector-empty h2{font:23px Georgia,serif;color:#614b69}dialog{border:1px solid #e7dfe9;border-radius:16px;padding:35px;background:#fffcfa;color:#4a3951;width:520px;box-shadow:0 30px 90px #28122d30}dialog::backdrop{background:#2e233b55;backdrop-filter:blur(5px)}.dialog-close{position:absolute;right:17px;top:14px;border:0;font-size:23px;background:none;color:#a08da7}.dialog-symbol{font-size:35px;color:#9a73a5;margin-bottom:20px}dialog h2{font:31px/1.15 Georgia,serif;letter-spacing:-.5px;margin:15px 0}dialog p{font-size:12px;line-height:1.8;color:#98869f}.pair-command{background:#f1ebf3;padding:15px;border-radius:7px;margin:20px 0;display:flex;align-items:center;gap:10px}.pair-command code{font:11px/1.7 Consolas,monospace;overflow-wrap:anywhere;flex:1}.pair-command button{font-size:10px}.pair-status{display:flex;gap:8px;align-items:center;font-size:11px;color:#7f6889}.dialog-note{font-size:10px!important}.preview-heading{display:flex;align-items:center;justify-content:space-between}.preview-heading button{border:0;background:none;font-size:25px}#preview-dialog{width:min(900px,92vw);padding:18px}#preview-container iframe{border:1px solid var(--border);border-radius:6px;width:100%;height:min(600px,70vh);background:white;display:block}#preview-dialog>p{font-size:10px;margin-bottom:0;text-align:center}#preview-container img{max-width:100%;max-height:70vh;display:block;margin:auto}#toast{position:fixed;bottom:85px;left:50%;transform:translateX(-50%);padding:13px 20px;border:1px solid #d8c8dd;border-radius:8px;background:#fffafc;box-shadow:0 6px 25px #43244915;z-index:20;font-size:12px;max-width:550px;color:#705379}#image-details{font-size:11px;color:#9a88a2;line-height:1.7}
@media(min-width:1600px){.workspace{grid-template-columns:220px minmax(300px,1fr) 310px}.wordmark{width:220px}.canvas-top{padding:35px 38px}.inspector{padding:27px}.canvas-top h1{font-size:31px}}
@media(max-width:1100px){.workspace{grid-template-columns:165px minmax(250px,1fr) 250px}.wordmark{width:165px}.sidebar{padding-left:10px;padding-right:10px}.save-state,.tag{display:none}.top-actions{gap:8px}.project-heading{padding-left:17px}.canvas-top{padding:23px 20px}.canvas-top h1{font-size:23px}.inspector{padding:20px 16px}}
@media(max-width:780px){.workspace{grid-template-columns:55px 1fr 230px}.sidebar{padding:20px 5px}.sidebar .workspace-label,.sidebar-divider,.sidebar-bottom,#outline,.nav-item:not(.active){display:none}.nav-item{font-size:0}.nav-item .nav-count{display:none}.wordmark{width:115px;font-size:24px;padding-left:14px}.project-heading{font-size:11px}.project-heading .project-icon,.chevron{display:none}.top-actions{padding-right:10px}.top-actions button{font-size:10px;padding:8px}.canvas-top h1{font-size:20px}.canvas-top p,.eyebrow,.canvas-hint{display:none}.canvas-top{padding:17px 14px}.add-button{padding:6px;font-size:10px}.activity-bar{padding:10px}.activity-bar div>span{display:none}}
@media(max-width:570px){.workspace{grid-template-columns:1fr;grid-template-rows:minmax(300px,60%) 1fr;overflow:auto}.sidebar{display:none}.inspector{border-top:1px solid var(--border)}.topbar .project-heading{display:none}.top-actions{margin-left:auto}.canvas-top{padding:14px}.recent-activity{display:none}.activity-bar{height:45px}.canvas-controls{bottom:9px;right:10px}}
.html-cover{padding:0}.html-cover>iframe{width:100%;height:100%;border:0;pointer-events:none;display:block}.html-cover>.open-live{left:auto;right:16px;bottom:15px;background:#182b4de8;border-color:#ffffff60;z-index:2}
#pair-dialog{width:min(620px,94vw);max-height:90dvh;overflow:auto}#pair-dialog label{display:block;font-size:11px;margin:18px 0 8px}.connect-steps{font-size:12px;line-height:1.9;padding-left:20px;color:#7f6889}#connection-prompt{display:block;width:100%;height:190px;resize:vertical;border:1px solid #dfd2e3;border-radius:8px;padding:12px;background:#f8f3f9;color:#58425f;font:11px/1.65 Consolas,monospace;margin-bottom:12px}.connection-advanced{margin:18px 0;font-size:11px;color:#7f6889}.connection-advanced summary{cursor:pointer}.connection-advanced .pair-command{margin:10px 0}.pair-status{margin-top:18px}
.relay-setup{padding:0 15px 14px;border:1px solid var(--border);border-radius:9px;background:#f8f4f8;margin:20px 0}.relay-address{display:flex;gap:8px}.relay-address input{min-width:0;flex:1;border:1px solid var(--border);border-radius:5px;padding:9px;font-size:12px}.relay-setup p{font-size:11px;margin:10px 0}.relay-setup summary{font-size:11px;cursor:pointer}.relay-setup code{display:block;overflow-wrap:anywhere;white-space:pre-wrap;font-size:11px;background:white;padding:9px;border-radius:5px}#folder-options{margin-top:12px}#folder-options label{font-size:10px;color:#7f6889}#media-mode{width:100%;font-size:10px;padding:7px 3px;border:1px solid var(--border);border-radius:5px;background:white;color:#705379;margin:6px 0 10px}#folder-options button{display:block;margin:8px 0}#folder-status{line-height:1.6;overflow-wrap:anywhere}@media(max-width:570px){.relay-address{flex-direction:column}#pair-dialog{padding:24px}}
.wizard-progress{display:flex;gap:8px;list-style:none;padding:0;margin:24px 0;font-size:11px;color:#99879f}.wizard-progress li{flex:1;padding:10px 6px;border-bottom:2px solid #e9e1ec}.wizard-progress [aria-current="step"]{color:#6c4776;border-color:#8f6799;font-weight:650}#pair-dialog h3{font-size:17px;font-weight:550;margin-top:25px}#agent-tool{width:100%;padding:12px;border:1px solid var(--border);border-radius:7px;background:white;color:inherit}.wizard-actions{display:flex;justify-content:space-between;gap:12px;margin-top:24px}#pair-dialog .wizard-confirm{display:flex;align-items:flex-start;gap:10px;line-height:1.6;padding:14px;background:#f3edf5;border-radius:8px}.wizard-confirm input{margin-top:3px}#wizard-folder-status,#wizard-session-summary,#wizard-folder-name{overflow-wrap:anywhere}#pair-dialog section[hidden]{display:none}