:root{color:#1d2621;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;--canvas:#f1ede5;--surface:#fffdf9;--surface2:#f6f3ed;--ink:#1d2621;--muted:#69736d;--soft:#929b95;--border:#dcd6cc;--border2:#ebe6df;--moss:#426557;--moss-dark:#29483c;--moss-soft:#dfe9e2;--clay:#d96f4c;--error:#b54d40;--focus:#286fe3;background:#f1ede5;font-family:Inter,Avenir Next,Avenir,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html,body,#root{min-width:320px;min-height:100%;margin:0}body{min-height:100vh;overflow:hidden}button,input{font:inherit}button{color:inherit}button:focus-visible,input:focus-visible{outline:2px solid var(--focus);outline-offset:2px}::selection{color:var(--ink);background:#f2d9ad}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}.patchwork-app{background:var(--canvas);grid-template-rows:58px minmax(0,1fr) auto;height:100vh;display:grid;overflow:hidden}button{cursor:pointer;background:0 0;border:0}.topbar{z-index:30;border-bottom:1px solid var(--border);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#fffdf9f2;grid-template-columns:236px minmax(180px,1fr) auto auto;align-items:center;gap:18px;padding:0 12px 0 16px;display:grid;position:relative}.brand-lockup,.brand-lockup>.brand-copy,.project-title,.topbar-statuses,.topbar-actions,.section-heading,.section-heading>span,.starter-card,.file-select,.panel-header,.panel-header>div,.preview-actions,.runtime-state,.activity-summary,.activity-label,.latest-event,.activity-expand,.activity-panel header,.activity-panel header>div,.popover-head,.checkpoint-popover article,.checkpoint-popover article>span{align-items:center;display:flex}.brand-lockup{gap:10px}.brand-lockup>.brand-copy,.project-title,.checkpoint-popover article>span{flex-direction:column;align-items:flex-start;min-width:0}.brand-lockup strong{letter-spacing:-.02em;font-size:15px}.brand-lockup small,.project-title small{color:var(--soft);margin-top:1px;font-size:10px}.brand-mark{background:#233d32;border-radius:8px;grid-template-columns:repeat(2,1fr);gap:2px;width:27px;height:27px;padding:3px;display:grid;box-shadow:0 5px 15px #203f3024}.brand-mark i{background:#f0c67a;border-radius:2px 5px}.brand-mark i:nth-child(2){background:#d97957}.brand-mark i:nth-child(3){background:#eef1e6}.brand-mark i:nth-child(4){background:#8eb09c}.project-title{border-left:1px solid var(--border);padding-left:17px}.project-title span{font-size:12px;font-weight:650}.project-title small{text-overflow:ellipsis;white-space:nowrap;max-width:300px;overflow:hidden}.topbar-statuses,.topbar-actions{gap:7px}.save-status,.tools-status{color:var(--muted);border:1px solid var(--border2);background:var(--surface2);white-space:nowrap;border-radius:99px;align-items:center;gap:6px;padding:6px 9px;font-size:10px;display:inline-flex}.tools-status strong{font-size:10px}.save-status i{background:#71a07f;border-radius:50%;width:6px;height:6px;box-shadow:0 0 0 3px #dfece3}.tools-status.ready{color:var(--moss-dark);background:#e7efe9;border-color:#c8d9cf}.action-wrap{position:relative}.secondary-action,.primary-action,.icon-action{border-radius:9px;justify-content:center;align-items:center;gap:7px;height:34px;font-size:10px;font-weight:650;display:inline-flex}.secondary-action{border:1px solid var(--border);background:#fff;padding:0 11px}.icon-action{width:34px;color:var(--muted);border:1px solid var(--border);background:#fff}.primary-action{color:#fff;background:var(--moss-dark);padding:0 13px;box-shadow:0 6px 15px #29483c1f}.workspace-grid{grid-template-columns:236px minmax(360px,1fr) minmax(390px,43vw);gap:8px;min-height:0;padding:8px 8px 0;display:grid;overflow:hidden}.pane{min-width:0;min-height:0}.files-pane,.editor-pane,.preview-pane{border:1px solid var(--border);background:var(--surface);border-radius:13px;overflow:hidden;box-shadow:0 6px 22px #392e2010}.files-sidebar{flex-direction:column;height:100%;display:flex;overflow:hidden}.sidebar-section{padding:15px 12px 12px}.starters-section{border-bottom:1px solid var(--border2)}.section-heading{width:100%;color:var(--muted);letter-spacing:.055em;text-transform:uppercase;justify-content:space-between;padding:0 2px 10px;font-size:9px;font-weight:700}.section-heading>span{gap:7px}.section-heading.static{cursor:default}.quiet-icon{width:27px;height:27px;color:var(--muted);border-radius:7px;place-items:center;display:grid}.quiet-icon:hover{background:var(--surface2)}.starter-list{gap:5px;display:grid}.starter-card{text-align:left;border:1px solid #0000;border-radius:9px;gap:9px;width:100%;padding:8px 9px}.starter-card:hover{background:var(--surface2)}.starter-card.active{background:#eef3ef;border-color:#cedbd3}.starter-card>i{border-radius:4px;flex:none;width:8px;height:28px}.starter-card>span{flex:1;min-width:0}.starter-card strong,.starter-card small{display:block}.starter-card strong{font-size:11px}.starter-card small{color:var(--soft);text-overflow:ellipsis;white-space:nowrap;margin-top:3px;font-size:9px;overflow:hidden}.file-section{flex-direction:column;flex:1;min-height:0;display:flex}.file-list{min-height:0;overflow:auto}.file-row{border-radius:8px;align-items:center;min-height:40px;display:flex;position:relative}.file-row:hover{background:#f6f3ee}.file-row.active{background:#e8efea}.file-row.active:before{background:var(--moss);content:"";border-radius:3px;width:2px;position:absolute;inset:8px auto 8px 0}.file-row.changed{background:#f4e4c7;animation:1.4s ease-out 2 changed-file}.file-row.changed:after{color:#7a4a2f;content:"changed";background:#fff8eb;border-radius:99px;padding:2px 5px;font-size:8px;font-weight:750;position:absolute;top:8px;right:7px}.file-select{text-align:left;flex:1;gap:8px;min-width:0;padding:6px 7px}.file-select>svg{color:#9a7867;flex:none}.file-select span{min-width:0}.file-select strong,.file-select small{text-overflow:ellipsis;white-space:nowrap;display:block;overflow:hidden}.file-select strong{font-size:11px;font-weight:580}.file-select small{color:var(--soft);margin-top:2px;font-size:9px}.file-actions{align-items:center;padding-right:4px;display:none}.file-row:hover .file-actions,.file-row:focus-within .file-actions{display:flex}.file-actions button{width:24px;height:24px;color:var(--muted);border-radius:6px;place-items:center;display:grid}.file-actions button:hover{color:var(--error);background:#fff}.new-file-row{grid-template-columns:1fr 25px 25px;gap:3px;margin-bottom:7px;display:grid}.new-file-row input,.checkpoint-popover input{min-width:0;height:29px;color:var(--ink);background:#fff;border:1px solid #bccdc3;border-radius:7px;padding:0 8px;font-size:9px}.new-file-row button{background:var(--surface2);border-radius:6px;place-items:center;display:grid}.sidebar-footnote{color:var(--soft);align-items:center;gap:7px;margin:auto 14px 13px;font-size:9px;display:flex}.sidebar-footnote span{background:#76a585;border-radius:50%;width:6px;height:6px}.editor-pane,.preview-pane{grid-template-rows:42px minmax(0,1fr) 27px;display:grid}.preview-pane{grid-template-rows:42px minmax(230px,1fr) auto}.panel-header{border-bottom:1px solid var(--border2);background:#fffdf9f7;justify-content:space-between;min-width:0;padding:0 10px 0 13px}.panel-header>div{gap:7px;min-width:0}.panel-header span{font-size:11px;font-weight:650}.panel-header small{max-width:180px;color:var(--soft);text-overflow:ellipsis;white-space:nowrap;font-size:9px;overflow:hidden}.language-pill,.revision-pill{color:var(--muted);border:1px solid var(--border2);background:var(--surface2);border-radius:5px;padding:4px 7px;font-size:9px!important}.editor-canvas{background:#fbfaf7;min-height:0;overflow:hidden}.editor-canvas .sp-wrapper,.editor-canvas .sp-stack,.editor-canvas .sp-code-editor{height:100%}.editor-canvas .sp-wrapper,.preview-frame .sp-wrapper{--sp-layout-height:100%;border:0}.editor-canvas .sp-code-editor{background:#fbfaf7}.editor-canvas .cm-editor{height:100%;padding-top:7px;font-size:13px}.editor-canvas .cm-gutters{background:#f7f5f0!important;border-right-color:#ebe6df!important}.editor-canvas .cm-activeLine,.editor-canvas .cm-activeLineGutter{background:#edf2ed!important}.editor-footer{color:var(--soft);border-top:1px solid var(--border2);background:#faf8f3;justify-content:flex-end;align-items:center;gap:13px;padding:0 11px;font-size:9px;display:flex}.runtime-state{color:#557061;border-left:1px solid var(--border);margin-left:7px;padding-left:10px;gap:5px!important;font-size:9px!important;font-weight:500!important}.runtime-state.is-error{color:var(--error)}.preview-actions{gap:5px!important}.focus-preview-button.active{color:var(--moss-dark);background:var(--moss-soft)}.viewport-toggle{background:var(--surface2);border-radius:7px;padding:2px;display:flex}.viewport-toggle button{color:var(--soft);border-radius:5px;padding:4px 7px;font-size:7px}.viewport-toggle button.active{color:var(--ink);background:#fff;box-shadow:0 1px 4px #332a1f17}.preview-stage{background-color:#e7e3db;background-image:radial-gradient(#bdb8af .55px,#0000 .55px);background-size:10px 10px;place-items:stretch stretch;min-height:0;padding:10px;display:grid;overflow:hidden}.preview-stage.tablet{place-items:stretch center}.preview-frame{background:#fff;border:1px solid #cac5bc;border-radius:8px;min-width:0;min-height:0;transition:width .18s;overflow:hidden;box-shadow:0 8px 28px #3430281c}.preview-stage.tablet .preview-frame{width:min(76%,760px)}.preview-frame .sp-wrapper,.preview-frame .sp-stack,.preview-frame .sp-preview-container,.preview-frame .sp-preview{border:0;height:100%;min-height:100%}.preview-frame iframe{min-height:100%!important}.preview-frame.is-rendered .sp-loading{visibility:hidden!important;opacity:0!important;pointer-events:none!important}.diagnostics{border-top:1px solid var(--border2);background:#faf9f5}.diagnostics header{justify-content:space-between;align-items:center;min-height:32px;padding:0 12px;display:flex}.diagnostics header span{color:#52715e;align-items:center;gap:6px;display:flex}.diagnostics header strong{font-size:10px}.diagnostics header small{color:var(--soft);font-size:9px}.diagnostics p{max-height:62px;color:var(--error);margin:0;padding:0 12px 10px;font:9px/1.45 ui-monospace,monospace;overflow:auto}.diagnostics .healthy-message{display:none}.diagnostics.has-error{background:#fff6f3}.activity-dock{z-index:20;background:var(--canvas);padding:7px 8px 8px;position:relative}.activity-summary{text-align:left;border:1px solid var(--border);background:var(--surface);border-radius:10px;grid-template-columns:175px minmax(0,1fr) auto;gap:15px;width:100%;min-height:36px;padding:0 12px;display:grid}.activity-label,.latest-event,.activity-expand{gap:7px}.activity-label strong,.latest-event strong{font-size:10px}.activity-label i{min-width:17px;height:17px;color:var(--muted);background:var(--surface2);border-radius:5px;place-items:center;font-size:8px;font-style:normal;display:grid}.latest-event{color:#547360;min-width:0}.latest-event small{color:var(--soft);text-overflow:ellipsis;white-space:nowrap;font-size:9px;overflow:hidden}.activity-expand{color:var(--muted);font-size:9px}.activity-dock.open .activity-expand svg{transform:rotate(180deg)}.activity-dock>.activity-panel{border:1px solid var(--border);background:var(--surface);border-radius:12px;width:min(440px,100vw - 16px);max-height:310px;position:absolute;bottom:52px;right:8px;box-shadow:0 25px 65px #312a2230}.activity-panel{flex-direction:column;min-height:0;display:flex}.activity-panel>header{border-bottom:1px solid var(--border2);justify-content:space-between;padding:14px 15px}.activity-panel>header>div{gap:9px}.activity-panel>header span{flex-direction:column;display:flex}.activity-panel>header strong{font-size:11px}.activity-panel>header small{color:var(--soft);margin-top:2px;font-size:9px}.activity-list{min-height:0;padding:5px 13px;overflow:auto}.activity-list article{border-bottom:1px solid var(--border2);grid-template-columns:24px minmax(0,1fr) auto;align-items:center;gap:8px;padding:9px 0;display:grid}.activity-list article>i{color:#4f725e;background:#e6efe9;border-radius:7px;place-items:center;width:23px;height:23px;display:grid}.activity-list article>i.warning{color:#a4604c;background:#f7e7df}.activity-list article>span{min-width:0}.activity-list strong,.activity-list small{text-overflow:ellipsis;white-space:nowrap;display:block;overflow:hidden}.activity-list strong{font-size:10px}.activity-list small,.activity-list time{color:var(--soft);margin-top:2px;font-size:9px}.independence-note{color:var(--soft);border-top:1px solid var(--border2);margin:0;padding:9px 14px;font-size:9px}.agent-receipt{z-index:70;color:#f8f4eb;background:#29483cf5;border:1px solid #517264;border-radius:13px;grid-template-columns:34px minmax(0,1fr) 26px;align-items:center;gap:10px;width:min(390px,100vw - 36px);padding:12px;animation:.24s ease-out receipt-in;display:grid;position:fixed;top:70px;right:18px;box-shadow:0 20px 50px #243c343b}.agent-receipt-icon{background:#ffffff18;border-radius:10px;place-items:center;width:34px;height:34px;display:grid}.agent-receipt>span:nth-child(2){flex-direction:column;min-width:0;display:flex}.agent-receipt small{color:#c8d9cf;letter-spacing:.045em;text-transform:uppercase;font-size:9px;font-weight:700}.agent-receipt strong{margin-top:3px;font-size:12px}.agent-receipt em{color:#d9e5de;margin-top:3px;font-size:10px;font-style:normal}.agent-receipt button{color:#d9e5de;border-radius:7px;place-items:center;width:26px;height:26px;display:grid}.agent-receipt button:hover{background:#ffffff18}.popover{z-index:60;border:1px solid var(--border);background:var(--surface);border-radius:12px;width:340px;position:absolute;top:42px;right:0;overflow:hidden;box-shadow:0 24px 70px #30292033}.popover-head{border-bottom:1px solid var(--border2);justify-content:space-between;padding:14px}.popover-head>div{flex-direction:column;display:flex}.popover-head small{color:var(--soft);text-transform:uppercase;letter-spacing:.09em;font-size:7px}.popover-head strong{margin-top:3px;font-size:12px}.popover-head button{border-radius:7px;place-items:center;width:27px;height:27px;display:grid}.checkpoint-popover form{border-bottom:1px solid var(--border2);grid-template-columns:1fr auto;gap:6px;padding:10px 12px;display:grid}.checkpoint-popover form button,.checkpoint-popover article button{color:#fff;background:var(--moss-dark);border-radius:7px;align-items:center;gap:5px;padding:0 9px;font-size:8px;display:flex}.checkpoint-list{max-height:280px;padding:5px 12px;overflow:auto}.checkpoint-popover article{border-bottom:1px solid var(--border2);justify-content:space-between;gap:10px;padding:10px 0}.checkpoint-popover article>span{min-width:0}.checkpoint-popover article strong{text-overflow:ellipsis;white-space:nowrap;max-width:190px;font-size:9px;overflow:hidden}.checkpoint-popover article small{color:var(--soft);margin-top:3px;font-size:7px}.checkpoint-popover article button{height:27px;color:var(--moss-dark);background:#ecf2ee;border:1px solid #ccd9d1}.empty-mini{color:var(--soft);text-align:center;padding:30px 15px}.empty-mini p{color:var(--ink);margin:8px 0 2px;font-size:10px}.empty-mini small{font-size:8px}.mobile-tabs,.mobile-activity-pane{display:none}.workspace-grid.preview-focused{grid-template-columns:1fr}.workspace-grid.preview-focused>.files-pane,.workspace-grid.preview-focused>.editor-pane{display:none}.workspace-grid.preview-focused>.preview-pane{grid-column:1}@keyframes receipt-in{0%{opacity:0;transform:translateY(-8px)scale(.98)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes changed-file{0%,to{background:#f4e4c7}50%{background:#edc888}}@media (width<=1199px){.topbar{grid-template-columns:190px minmax(140px,1fr) auto auto}.workspace-grid{grid-template-columns:205px minmax(320px,1fr) minmax(350px,1fr)}.tools-status>span{display:none}}@media (width<=899px){.patchwork-app{grid-template-rows:56px 45px minmax(0,1fr)}.topbar{grid-template-columns:auto minmax(0,1fr) auto auto;gap:10px;padding:0 10px}.brand-lockup>.brand-copy,.project-title,.save-status,.secondary-action span,.primary-action span{display:none}.topbar-statuses{grid-column:3}.topbar-actions{grid-column:4}.secondary-action,.primary-action{width:34px;padding:0}.mobile-tabs{border-bottom:1px solid var(--border);background:var(--surface);grid-template-columns:repeat(4,1fr);padding:5px 8px;display:grid}.mobile-tabs button{color:var(--muted);border-radius:8px;justify-content:center;align-items:center;gap:6px;font-size:9px;display:flex}.mobile-tabs button.active{color:var(--moss-dark);background:var(--moss-soft);font-weight:700}.workspace-grid{padding:8px;display:block}.workspace-grid>.pane{height:100%;display:none}.workspace-grid>.pane.mobile-active{display:block}.workspace-grid.preview-focused>.preview-pane{display:grid}.editor-pane.mobile-active,.preview-pane.mobile-active{display:grid!important}.files-sidebar,.editor-pane,.preview-pane,.activity-panel{height:100%}.mobile-activity-pane.mobile-active{border:1px solid var(--border);background:var(--surface);border-radius:13px;overflow:hidden}.activity-dock{display:none}.file-actions{display:flex}.file-row{min-height:46px}}@media (width<=540px){.tools-status strong,.tools-status>span{display:none}.tools-status{justify-content:center;width:34px;padding:0}.topbar .icon-action{display:none}.popover{width:auto;position:fixed;top:62px;left:8px;right:8px}.panel-header small,.viewport-toggle,.editor-footer span:nth-child(-n+2){display:none}.preview-stage{padding:6px}.preview-stage.tablet .preview-frame{width:100%}}