.opfs-mock{--bg:#141719;--raised:#1b1f21;--soft:#202527;--line:#303638;--text:#e3e8e5;--muted:#929e97;--accent:#c0ef8f;--accent-ink:#1c3010;--selection:#273329;color:var(--text);font:13px/1.5 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}.opfs-mock[data-theme=light]{--bg:#fafbf8;--raised:#f0f3ed;--soft:#e9eee5;--line:#d6ded1;--text:#283329;--muted:#687562;--accent:#43672b;--accent-ink:#fff;--selection:#e2edd8}.opfs-mock *,.opfs-mock :before,.opfs-mock :after{box-sizing:border-box}.opfs-mock button,.opfs-mock input,.opfs-mock select,.opfs-mock textarea{font:inherit}.opfs-mock button{color:inherit;cursor:pointer;white-space:nowrap;background:0 0;border:1px solid #0000;border-radius:5px;justify-content:center;align-items:center;gap:7px;padding:7px 10px;display:inline-flex}.opfs-mock button:hover:not(:disabled):not([data-disabled]){background:var(--soft)}.opfs-mock button:disabled,.opfs-mock button[data-disabled]{opacity:.4;cursor:not-allowed}.opfs-mock :focus-visible{outline:2px solid var(--accent);outline-offset:2px}.opfs-mock svg{flex-shrink:0}.opfs-mock input,.opfs-mock select,.opfs-mock textarea{color:var(--text);background:var(--bg);border:1px solid var(--line);border-radius:5px;min-width:0}.opfs-mock option{background:var(--bg);color:var(--text)}.opfs-mock .primary{color:var(--accent-ink);background:var(--accent);font-weight:600}.opfs-mock .primary:hover:not(:disabled){background:var(--accent);filter:brightness(.93)}.opfs-mock .danger{color:#fff;background:#bf473e}.opfs-mock kbd{color:var(--muted);font:10px ui-monospace,monospace}.mock-host{color:#24332b;background:#f4f3ed;min-height:100vh;font-family:Inter,ui-sans-serif,system-ui,sans-serif}.host-header{border-bottom:1px solid #dde0d6;justify-content:space-between;align-items:center;gap:15px;height:82px;padding:0 5%;display:flex}.host-brand{letter-spacing:-.7px;align-items:center;gap:10px;font-size:19px;font-weight:650;display:flex}.host-mark{color:#e5f0db;background:#344c3a;border-radius:9px;place-items:center;width:31px;height:31px;font-family:Georgia,serif;font-size:26px;font-style:italic;display:grid}.host-tag{color:#7e887b;letter-spacing:0;border-left:1px solid #c9d0c3;margin-left:12px;padding-left:20px;font-size:12px;font-weight:400}.mock-label{color:#777f73;letter-spacing:1.2px;font-size:10px}.mock-host button{color:#4f604c;background:#fafbf7;border-color:#d4dbce}.mock-host button:hover:not(:disabled){background:#e8eddf}.mock-host :focus-visible{outline-color:#43672b}.host-main{max-width:1100px;margin:auto;padding:65px 38px 45px}.host-kicker{color:#6e7f64;letter-spacing:1.3px;font:10px/1.5 ui-monospace,monospace}.host-main h1{letter-spacing:-2px;margin:15px 0;font:57px/1.07 Georgia,Times New Roman,serif}.host-main>p{color:#778072;max-width:425px;margin-bottom:35px;font-size:14px;line-height:1.8}.host-cards{grid-template-columns:repeat(3,1fr);gap:15px;display:grid}.host-cards article{background:#fafaf5;border:1px solid #dce1d5;border-radius:10px;padding:26px}.host-cards svg{color:#7f9471}.host-cards h2{margin:20px 0 7px;font-size:16px}.host-cards p,.host-cards span{color:#86907f;font-size:12px}.host-cards span{margin-top:29px;font-size:11px;display:block}.scenario-box{border-top:1px solid #d4dccd;margin-top:36px;padding-top:24px}.scenario-box h2{margin:6px 0 14px;font-size:16px;font-weight:500}.scenario-box p{color:#7b8673;max-width:750px;font-size:12px}.scenario-actions{flex-wrap:wrap;gap:8px;display:flex}.host-footer{color:#90998a;border-top:1px solid #dce1d5;justify-content:space-between;padding:18px 5%;font-size:11px;display:flex}.opfs-launcher{touch-action:none;-webkit-user-select:none;user-select:none;z-index:10000;-webkit-backdrop-filter:blur(12px);letter-spacing:1px;transition:left .18s ease-out,top .18s ease-out,transform .18s ease-out;position:fixed;box-shadow:0 8px 25px #0003;background:color-mix(in srgb, var(--bg) 80%, transparent)!important;color:var(--accent)!important;border:1px solid #56624e!important;border-radius:12px!important;gap:10px!important;padding:12px 15px!important;font:600 12px ui-monospace,monospace!important}.opfs-launcher[data-dragging=true]{cursor:grabbing;transition:none}@media (prefers-reduced-motion:reduce){.opfs-launcher{transition:none}}.launcher-dot,.status-dot{background:var(--accent);border-radius:50%;width:5px;height:5px;display:inline-block}.debug-panel{z-index:10001;background:var(--bg);color:var(--text);border:1px solid #485047;border-radius:12px;flex-direction:column;min-width:0;display:flex;position:fixed;overflow:hidden;box-shadow:0 24px 100px #0005,0 3px 15px #0004}.debug-panel:focus{outline:none}.panel-titlebar{cursor:grab;touch-action:none;border-bottom:1px solid var(--line);background:var(--raised);flex-shrink:0;justify-content:space-between;align-items:center;gap:8px;min-height:49px;padding:0 10px;display:flex}.drag-title{align-items:center;gap:8px;min-width:0;padding:6px;display:flex}.panel-titlebar:active{cursor:grabbing}.drag-title>svg:first-child{color:#68746b}.drag-title>svg:nth-child(2){color:var(--accent)}.drag-title h2{white-space:nowrap;letter-spacing:.1px;margin:0;font-size:12px;font-weight:650}.drag-title h2 span{color:var(--muted);font-weight:400}.prototype-chip{color:var(--muted);border:1px solid var(--line);border-radius:3px;margin-left:6px;padding:2px 4px;font:9px ui-monospace,monospace}.title-actions,.dock-controls{align-items:center;gap:1px;display:flex}.title-actions button{color:var(--muted);padding:5px}.dock-controls{border-right:1px solid var(--line);margin-right:4px;padding-right:5px}.dock-controls button[aria-pressed=true]{color:var(--accent);background:var(--selection)}.volume-toolbar{border-bottom:1px solid var(--line);flex-wrap:wrap;flex-shrink:0;align-items:center;gap:13px;min-height:59px;padding:11px 17px;display:flex}.volume-picker{color:var(--muted);align-items:center;gap:9px;min-width:0;max-width:100%;display:flex}.opfs-mock .volume-select-trigger{text-align:left;color:var(--text);border-color:var(--line);background:var(--bg);cursor:pointer;justify-content:space-between;min-width:0;max-width:265px;padding:6px 9px;font:12px ui-monospace,monospace}.volume-select-trigger>span:first-child{text-overflow:ellipsis;overflow:hidden}.volume-select-menu{box-sizing:border-box;width:max(260px, var(--anchor-width));max-width:calc(100vw - 24px);max-height:min(320px, var(--available-height));border:1px solid var(--line);background:var(--raised);border-radius:7px;flex-direction:column;padding:5px;font-size:12px;display:flex;overflow:hidden;box-shadow:0 10px 40px #0005}.volume-select-positioner,.file-action-menu-positioner{z-index:10010}.volume-select-list{min-height:0;overflow:auto}.volume-select-item{cursor:pointer;overflow-wrap:anywhere;border-radius:4px;outline:none;padding:8px 10px 8px 28px;position:relative}.volume-select-item[data-highlighted]{background:var(--selection);color:var(--accent)}.volume-select-item:focus-visible{outline-offset:-2px}.volume-select-item small{color:var(--muted);font-size:10px;display:block}.volume-select-check{position:absolute;top:10px;left:8px}.volume-select-scroll{color:var(--muted);justify-content:center;padding:3px;display:flex}.connection-badge{color:var(--muted);align-items:center;gap:6px;font-size:10px;display:flex}.connection-badge>span{background:#a39476;border-radius:50%;width:5px;height:5px}.connection-badge.online>span{background:var(--accent)}.volume-actions{align-items:center;gap:2px;margin-left:auto;display:flex}.volume-actions button{color:var(--muted);padding:6px 8px;font-size:11px}.volume-actions button:first-child{border-color:var(--line);color:var(--text);margin-right:4px}.volume-access{border-bottom:1px solid var(--line);background:var(--raised);flex-wrap:wrap;flex-shrink:0;justify-content:space-between;align-items:center;gap:8px 16px;padding:9px 17px;font-size:11px;display:flex}.volume-access>div{flex:1;min-width:180px}.volume-access strong{font-weight:600;display:block}.volume-access span{color:var(--muted)}.opfs-mock .access-toggle{border-color:var(--accent);color:var(--accent);font-size:11px}.panel-workspace{flex-direction:column;flex:1;min-height:0;display:flex}.file-workspace{grid-template-columns:minmax(0, var(--explorer-width)) 5px minmax(0, 1fr);flex:1;min-height:0;display:grid}.explorer-pane,.preview-pane,.terminal-pane{flex-direction:column;min-width:0;min-height:0;display:flex}.pane-heading{border-bottom:1px solid var(--line);flex-shrink:0;justify-content:space-between;align-items:center;min-height:38px;padding:0 15px;display:flex}.pane-heading>span{letter-spacing:1px;color:var(--muted);align-items:center;gap:8px;font:10px ui-monospace,monospace;display:flex}.pane-heading small{letter-spacing:0;color:#77857b;font:10px ui-monospace,monospace}.opfs-mock .text-action{color:var(--muted);padding:3px 6px;font-size:10px}.opfs-mock .text-action[aria-pressed=true]{color:var(--accent);background:var(--selection)}.file-search{border:1px solid var(--line);color:var(--muted);border-radius:5px;align-items:center;gap:8px;margin:12px 13px 9px;padding:7px 9px;display:flex}.file-search input{outline-offset:4px;background:0 0;border:0;width:100%;font-size:11px}.explorer-path{color:var(--muted);align-items:center;gap:7px;padding:2px 16px 11px;font-size:10px;display:flex}.explorer-path select{background:0 0;border:0;max-width:122px;margin-left:auto;padding:3px 2px;font-size:10px}.file-table-scroll{flex:1;min-height:0;overflow:auto}.file-table{border-collapse:collapse;text-align:left;white-space:nowrap;width:100%;font:11px ui-monospace,monospace}.file-table th{color:var(--muted);background:var(--raised);border-bottom:1px solid var(--line);text-align:right;font:400 10px/29px ui-sans-serif,system-ui,sans-serif;position:sticky;top:0}.file-table th:first-child{text-align:left;padding-left:17px}.file-table td{text-align:right;height:33px;color:var(--muted);border-bottom:1px solid color-mix(in srgb, var(--line) 35%, transparent);padding:0 10px}.file-table td:first-child{text-align:left;width:100%;padding:0}.file-table td:last-child,.file-table th:last-child{padding-right:16px}.file-table button{width:100%;color:var(--text);border-radius:0;justify-content:flex-start;padding:9px 16px;font-size:11px}.file-table button svg{color:#788c7f}.file-table tr[data-selected=true]{background:var(--selection)}.file-table tr[data-selected=true] td:first-child{box-shadow:inset 2px 0 var(--accent)}.file-table tr[data-selected=true] button{color:var(--accent)}.explorer-foot{color:var(--muted);border-top:1px solid var(--line);justify-content:space-between;gap:10px;padding:8px 15px;font-size:9px;display:flex}.explorer-foot span{color:#718074}.inner-divider{background:var(--line);touch-action:none;flex-shrink:0}.inner-divider:hover,.inner-divider:focus{background:var(--accent)}.inner-divider.vertical{cursor:col-resize;width:5px}.inner-divider.horizontal{cursor:row-resize;height:5px}.preview-path{color:var(--muted);border-bottom:1px solid var(--line);align-items:center;gap:7px;padding:9px 16px;font:10px ui-monospace,monospace;display:flex}.preview-path span{margin-left:auto}.source-editor{flex-direction:column;flex:1;min-height:0;display:flex}.preview-content{flex-direction:column;flex:1;min-height:0;display:flex;overflow:hidden}.preview-heading{gap:8px;padding:5px 12px}.preview-tabs{border:1px solid var(--line);background:var(--raised);border-radius:6px;padding:2px;display:inline-flex}.preview-tabs button{color:var(--muted);border-radius:3px;padding:3px 10px;font-size:11px}.preview-tabs button[data-active]{background:var(--selection);color:var(--accent)}.preview-heading .save-status{font:inherit;letter-spacing:0;color:var(--muted);font-size:10px}.preview-heading .preview-save{border-color:var(--accent);color:var(--accent);padding:3px 9px;font-size:11px}.terminal-pane{height:var(--terminal-height);background:color-mix(in srgb, var(--bg) 95%, #000);flex-shrink:0}.terminal-pane .pane-heading{min-height:34px}.terminal-output{white-space:pre-wrap;color:var(--muted);flex:1;min-height:0;margin:0;padding:13px 18px;font:11px/1.7 ui-monospace,SFMono-Regular,monospace;overflow:auto}.terminal-command{border-top:1px solid var(--line);align-items:center;gap:9px;padding:6px 12px 7px 18px;font:11px ui-monospace,monospace;display:flex}.terminal-command>span{color:var(--accent);text-overflow:ellipsis;white-space:nowrap;max-width:45%;overflow:hidden}.terminal-command input{background:0 0;border:0;flex:1;padding:6px 0}.terminal-command button{border-color:var(--line);padding:5px 10px;font:10px ui-monospace,monospace}.panel-footer{border-top:1px solid var(--line);color:var(--muted);background:var(--raised);flex-shrink:0;align-items:center;gap:12px;min-height:31px;padding:8px 15px;font-size:9px;display:flex}.panel-footer>span{white-space:nowrap}.panel-footer .footer-note{white-space:normal;-webkit-line-clamp:1;-webkit-box-orient:vertical;min-width:0;max-width:65%;margin-left:auto;display:-webkit-box;overflow:hidden}.memory-only{color:#72826f}.outer-resize{cursor:nwse-resize;touch-action:none;width:18px;height:18px;position:absolute;bottom:0;right:0}.outer-resize[data-dock=floating]{background:linear-gradient(135deg, transparent 60%, var(--muted) 61%, var(--muted) 65%, transparent 66%, transparent 78%, var(--muted) 79%, var(--muted) 83%, transparent 84%)}.outer-resize[data-dock=left]{cursor:col-resize;width:5px;height:auto;top:0;bottom:0;right:0}.outer-resize[data-dock=right]{cursor:col-resize;width:5px;height:auto;inset:0 auto 0 0}.outer-resize[data-dock=top]{cursor:row-resize;width:auto;height:5px;left:0;right:0}.outer-resize[data-dock=bottom]{cursor:row-resize;width:auto;height:5px;inset:0 0 auto}.outer-resize:hover,.outer-resize:focus{background:var(--accent)}.mobile-tabs{display:none}.connection-empty{text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:12px;min-height:0;padding:30px;display:flex;overflow:auto}.connection-empty>svg{color:var(--muted)}.connection-empty h3{margin:0;font-size:18px}.connection-empty p{color:var(--muted);max-width:440px;margin:0 0 8px;font-size:12px}.connection-empty button{border-color:var(--line)}.pane-empty{color:var(--muted);text-align:center;margin:auto;padding:25px;font-size:11px}.job-row{border-top:1px solid var(--line);align-items:center;gap:12px;padding:8px 15px;font-size:11px;display:flex}.job-row progress{accent-color:var(--accent);flex:1;min-width:50px}.job-row button{border-color:var(--line);font-size:10px}.debug-modal{background:var(--bg);color:var(--text);border:1px solid #526049;border-radius:12px;width:460px;max-width:calc(100vw - 32px);max-height:calc(100vh - 32px);padding:25px;box-shadow:0 18px 80px #0007}.debug-modal::backdrop{backdrop-filter:blur(3px);background:#11181480}.modal-heading{color:var(--accent);justify-content:space-between;align-items:center;display:flex}.modal-heading button{color:var(--muted)}.debug-modal h2{letter-spacing:-.4px;margin:12px 0 5px;font-size:21px;font-weight:600}.modal-subtitle{color:var(--muted);margin-bottom:22px;font-size:11px}.debug-modal label{flex-direction:column;gap:8px;margin:16px 0;font-size:11px;display:flex}.debug-modal input,.debug-modal select{width:100%;padding:10px}.debug-modal small{color:var(--muted);font-size:10px}.info-box{border:1px solid var(--line);border-left:2px solid var(--accent);color:var(--muted);border-radius:5px;margin:17px 0;padding:12px;font-size:11px;line-height:1.7}.modal-footer{justify-content:flex-end;gap:8px;margin-top:23px;display:flex}.modal-footer>button{border-color:var(--line)}.archive-fixture{border:1px dashed var(--line);color:var(--muted);border-radius:6px;align-items:center;gap:13px;padding:16px;display:flex}.archive-fixture strong{color:var(--text);font-size:12px;display:block}.archive-fixture span{margin-top:3px;font-size:10px;display:block}.dialog-error{color:#ec9b8f;font-size:12px}.volume-details{grid-template-columns:140px 1fr;gap:12px 8px;font-size:11px;display:grid}.volume-details dt{color:var(--muted)}.volume-details dd{margin:0}.details-tabs{border-bottom:1px solid var(--line);gap:5px;margin-bottom:14px;padding-bottom:8px;font-size:11px;display:flex}.details-tabs button[aria-pressed=true]{color:var(--accent);background:var(--selection)}.volume-list>div{border-bottom:1px solid var(--line);align-items:center;gap:10px;padding:12px 0;display:flex}.volume-list>div>span{flex:1}.volume-list strong{font:11px ui-monospace,monospace;display:block}.volume-list small{margin-top:4px;display:block}.debug-panel[data-narrow=true] .drag-title h2 span,.debug-panel[data-narrow=true] .prototype-chip,.debug-panel[data-narrow=true] .connection-badge{display:none}.debug-panel[data-narrow=true] .panel-titlebar{flex-wrap:wrap;gap:2px;padding:6px 9px}.debug-panel[data-narrow=true] .title-actions{margin-left:auto}.debug-panel[data-narrow=true] .volume-toolbar{gap:4px;padding:8px 11px}.debug-panel[data-narrow=true] .volume-picker{width:100%}.debug-panel[data-narrow=true] .volume-select-trigger{flex:1;max-width:100%;font-size:11px}.debug-panel[data-narrow=true] .volume-actions{margin-left:0}.debug-panel[data-narrow=true] .mobile-tabs{border-bottom:1px solid var(--line);flex-shrink:0;gap:5px;padding:5px 11px;display:flex}.mobile-tabs button{text-transform:capitalize;font-size:11px}.mobile-tabs button[aria-pressed=true]{color:var(--accent);background:var(--selection)}.debug-panel[data-narrow=true] .file-workspace{display:flex}.debug-panel[data-narrow=true] .explorer-pane,.debug-panel[data-narrow=true] .preview-pane,.debug-panel[data-narrow=true] .terminal-pane{flex:1;display:none}.debug-panel[data-narrow=true] .inner-divider{display:none}.debug-panel[data-narrow=true][data-tab=files] .explorer-pane,.debug-panel[data-narrow=true][data-tab=preview] .preview-pane,.debug-panel[data-narrow=true][data-tab=terminal] .terminal-pane{display:flex}.debug-panel[data-narrow=true][data-tab=terminal] .file-workspace{display:none}.debug-panel[data-narrow=true] .panel-footer{flex-wrap:wrap;gap:8px}.debug-panel[data-narrow=true] .memory-only{margin-left:auto}.debug-panel[data-narrow=true] .footer-note{order:1;min-width:100%;max-width:100%}@media (width<=600px){.mock-label,.host-tag{display:none}.host-header{height:70px;padding:0 20px}.host-main{padding:35px 22px}.host-main h1{font-size:42px}.host-cards{grid-template-columns:1fr}.host-cards article:not(:first-child){display:none}.host-footer{gap:25px}.debug-panel{border-radius:9px}}@media (forced-colors:active){.debug-panel,.opfs-launcher,.debug-modal{border:1px solid canvastext}.file-table tr[data-selected=true]{outline:1px solid highlight}}.palette-example{padding:24px;font-size:12px;overflow:auto}.palette-example>div{align-items:center;gap:12px;margin:12px 0;display:flex}.palette-example span{border:1px solid var(--line);border-radius:8px;width:40px;height:40px}.file-entry-actions{align-items:center;width:100%;display:flex}.file-entry-actions>button:first-child{flex:1;min-width:0}.file-table .file-more{opacity:.55;flex:none;width:24px;padding:4px}.file-action-menu{border:1px solid var(--line);background:var(--raised);min-width:180px;color:var(--text);border-radius:7px;padding:5px;font:12px system-ui,sans-serif;box-shadow:0 10px 40px #0005}.file-action-menu [role=menuitem]{cursor:pointer;border-radius:4px;outline:none;padding:7px 12px}.file-action-menu [data-highlighted]{background:var(--soft);color:var(--accent)}.file-action-menu [data-disabled]{opacity:.35;cursor:default}.file-create-actions{gap:5px;display:flex}main:where(.astro-qwtnmmvq){padding:1rem}header:where(.astro-qwtnmmvq){flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem;margin-bottom:1rem;display:flex}h1:where(.astro-qwtnmmvq){margin:0;font-size:1.1rem}main:where(.astro-qwtnmmvq) p{overflow-wrap:anywhere;font-size:.8rem;line-height:1.5}main:where(.astro-qwtnmmvq) .demo-actions{flex-wrap:wrap;gap:.5rem;display:flex}main:where(.astro-qwtnmmvq) .button{padding:.6rem .8rem;font-size:.8rem}