@import "https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap";:root{--ink:#152031;--muted:#7c8798;--faint:#aab3c0;--line:#e6e9ed;--paper:#fff;--canvas:#f7f8fa;--accent:#f2633d;--accent-deep:#d95132;--navy:#111b2c;--shadow:0 20px 60px #18263d17, 0 3px 12px #18263d0a}*{box-sizing:border-box}html{background:var(--canvas);min-width:320px}body{color:var(--ink);background:var(--canvas);-webkit-font-smoothing:antialiased;margin:0;font-family:DM Sans,sans-serif}button,input,select,textarea{font:inherit}button,select{cursor:pointer}button{border:0}.app-shell{max-width:1440px;min-height:100vh;margin:0 auto;padding:0 56px}.topbar{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;height:88px;display:flex}.brand{color:var(--navy);letter-spacing:-.8px;align-items:center;gap:11px;font:700 21px Space Grotesk,sans-serif;text-decoration:none;display:inline-flex}.brand-accent{color:var(--accent)}.brand-mark{width:29px;height:29px;color:var(--accent);background:#fff0eb;border-radius:9px;place-items:center;display:grid}.brand-mark svg{width:21px;height:21px}.topbar-actions,.toolbar-actions,.preview-tools{align-items:center;gap:16px;display:flex}.engine-pill{color:#687486;border:1px solid var(--line);letter-spacing:-.3px;border-radius:99px;align-items:center;gap:8px;padding:8px 13px;font:500 11px DM Mono,monospace;display:flex}.pulse-dot,.status-dot{background:#60bc87;border-radius:50%;width:6px;height:6px;display:inline-block;box-shadow:0 0 0 3px #60bc8724}.icon-button,.avatar{color:#7a8695;background:0 0;border-radius:9px;place-items:center;width:34px;height:34px;display:grid}.icon-button:hover{color:var(--ink);background:#eef0f3}.icon-button svg{width:19px;height:19px}.avatar{color:#fff;background:var(--navy);font:600 12px DM Sans,sans-serif}main{padding:58px 0 34px}.hero-row{justify-content:space-between;align-items:flex-end;margin:0 6px 36px;display:flex}.eyebrow{color:var(--accent);letter-spacing:1.7px;align-items:center;gap:9px;margin:0 0 14px;font:500 10px DM Mono,monospace;display:flex}.eyebrow.small{letter-spacing:1.4px;margin-bottom:9px;font-size:9px}.eyebrow-line{background:var(--accent);width:22px;height:1px}h1,h2,p{margin-top:0}h1{color:var(--navy);letter-spacing:-2.4px;margin-bottom:10px;font:700 clamp(34px,4vw,52px)/1.03 Space Grotesk,sans-serif}h1 em,h2 em{color:var(--accent);font-style:normal}.hero-copy{color:var(--muted);margin:0;font-size:15px}.hero-meta{flex-direction:column;align-items:flex-end;gap:8px;padding-bottom:5px;display:flex}.meta-label{color:#a2aab6;letter-spacing:1.3px;font:500 9px DM Mono,monospace}.meta-value{color:#697687;align-items:center;gap:8px;font:500 11px DM Mono,monospace;display:flex}.workspace-card,.settings-card,.tip-card{background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:15px;overflow:hidden}.workspace-toolbar{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;min-height:78px;padding:0 23px;display:flex}.file-info{align-items:center;gap:12px;display:flex}.file-icon{width:34px;height:34px;color:var(--accent);background:#fff3ef;border-radius:8px;place-items:center;display:grid}.file-icon svg{width:20px;height:20px}.file-info strong{color:var(--navy);font:600 12px DM Sans,sans-serif;display:block}.file-info span:not(.file-icon){color:#a3abb6;margin-top:3px;font:10px DM Mono,monospace;display:block}.rename-button{color:#a4acb8;background:0 0;margin-left:3px;font-size:20px;line-height:1;transform:rotate(-45deg)}.rename-button:hover{color:var(--accent)}.autosave{color:#8b96a3;align-items:center;gap:8px;font:10px DM Mono,monospace;display:inline-flex}.collab-status{color:#9aa4b0;white-space:nowrap;align-items:center;gap:8px;font:10px DM Mono,monospace;display:inline-flex}.collab-status.live{color:#3a9d68}.collab-status.live .status-dot{background:#3fb477;box-shadow:0 0 0 3px #3fb47724}.collab-status.connecting .status-dot{background:#e5ad54;box-shadow:0 0 0 3px #e5ad5424}.share-button{color:#da5a3a;background:#fff2ed;border:1px solid #ffe0d5;border-radius:7px;justify-content:center;align-items:center;gap:7px;height:36px;padding:0 13px;font-size:11px;font-weight:600;transition:background .15s,transform .15s;display:inline-flex}.share-button:hover{background:#ffe8df;transform:translateY(-1px)}.share-button svg{width:15px;height:15px}.secondary-button,.primary-button{border-radius:7px;justify-content:center;align-items:center;gap:8px;height:36px;padding:0 14px;font-size:11px;font-weight:600;transition:transform .15s,background .15s;display:inline-flex}.secondary-button{color:#667384;background:#f4f5f7}.secondary-button:hover{background:#eceef1}.primary-button{color:#fff;background:var(--accent);box-shadow:0 6px 15px #f2633d38}.primary-button:hover{background:var(--accent-deep);transform:translateY(-1px)}.secondary-button svg,.primary-button svg{width:16px;height:16px}.editor-grid{grid-template-columns:minmax(0,1fr) 1px minmax(0,1fr);min-height:508px;display:grid}.editor-pane,.preview-pane{flex-direction:column;min-width:0;display:flex}.splitter{background:var(--line);position:relative}.splitter span{border:1px solid var(--line);background:#fff;border-radius:6px;width:11px;height:25px;position:absolute;top:48%;left:-5px}.pane-heading{border-bottom:1px solid #f0f1f3;justify-content:space-between;align-items:center;height:53px;padding:0 22px;display:flex}.pane-title{color:#8a95a3;letter-spacing:1px;align-items:center;gap:10px;font:500 10px DM Mono,monospace;display:flex}.pane-number{color:var(--accent);font-size:9px}.keyboard-hint{color:#b0b7c1;font:10px DM Mono,monospace}kbd{color:#8c97a5;background:#f4f5f7;border:1px solid #e5e7ea;border-radius:3px;place-items:center;min-width:16px;height:17px;margin-right:3px;font:9px DM Mono,monospace;display:inline-grid}.editor-wrap{background:#fbfcfd;flex:1;min-height:0;display:flex;position:relative}.line-numbers{color:#c2c8d0;text-align:right;-webkit-user-select:none;user-select:none;white-space:pre;border-right:1px solid #f0f1f3;flex:0 0 53px;width:53px;padding:22px 17px 22px 0;font:12px/1.8 DM Mono,monospace}textarea{resize:none;color:#334155;-moz-tab-size:2;tab-size:2;background:0 0;border:0;outline:0;width:100%;height:100%;min-height:400px;padding:22px 24px;font:13px/1.8 DM Mono,monospace}textarea::selection{color:var(--navy);background:#ffe0d5}.pane-footer{color:#abb2bd;border-top:1px solid #f0f1f3;justify-content:space-between;align-items:center;min-height:39px;padding:0 22px;font:9px DM Mono,monospace;display:flex}.live-dot{vertical-align:1px;background:#5cbd87;border-radius:50%;width:5px;height:5px;margin-right:6px;display:inline-block}.preview-tools{gap:5px}.zoom-value{color:#a8b0ba;text-align:center;min-width:35px;margin-right:4px;font:9px DM Mono,monospace}.zoom-button{color:#9aa4b0;background:#f7f8fa;border:1px solid #eceef1;border-radius:5px;width:24px;height:24px;font-size:17px;line-height:18px}.zoom-button:hover{color:var(--accent);border-color:#ffd6c9}.preview-stage{background:#f5f6f8;flex:1;justify-content:center;min-height:0;padding:23px;display:flex;overflow:auto}.paper{color:#273447;transform-origin:top;background:#fff;width:100%;max-width:455px;height:max-content;min-height:390px;padding:34px 38px;transition:transform .15s;box-shadow:0 4px 15px #1b2a4214}.paper h1{color:#172235;letter-spacing:-1.1px;margin:0 0 16px;font:700 26px/1.16 Space Grotesk,sans-serif}.paper h2{color:#172235;margin:25px 0 9px;font:700 16px/1.25 Space Grotesk,sans-serif}.paper h3{color:#172235;margin:20px 0 7px;font:700 13px/1.3 Space Grotesk,sans-serif}.paper p{color:#556274;margin:0 0 13px;font-size:11px;line-height:1.65}.paper strong{color:#2b3b50;font-weight:700}.paper em{color:#556274}.paper a{color:var(--accent-deep);text-decoration:none}.paper hr{border:0;border-top:1px solid #ebedf0;margin:21px 0}.paper blockquote{color:#788597;border-left:2px solid #f4ad95;margin:17px 0;padding:4px 0 4px 13px;font-size:11px;font-style:italic;line-height:1.6}.paper ul,.paper ol{color:#556274;margin:8px 0 15px;padding-left:20px;font-size:11px;line-height:1.8}.paper code{color:#be4e32;background:#fff0ec;border-radius:3px;padding:2px 4px;font:10px DM Mono,monospace}.paper pre{color:#e8edf5;background:#172235;border-radius:5px;margin:16px 0;padding:12px;font:10px/1.6 DM Mono,monospace;overflow:auto}.paper pre code{color:inherit;background:0 0;padding:0}.paper img{max-width:100%}.bottom-grid{grid-template-columns:minmax(0,1.65fr) minmax(250px,.85fr);gap:18px;margin-top:21px;display:grid}.settings-card{box-shadow:none;padding:24px 26px 19px}.card-heading{justify-content:space-between;align-items:flex-start;display:flex}h2{color:var(--navy);letter-spacing:-.5px;margin:0;font:700 18px Space Grotesk,sans-serif}.settings-icon{color:#aeb7c2;font-size:19px}.settings-fields{grid-template-columns:repeat(4,1fr);gap:14px;margin:22px 0 20px;display:grid}label{color:#99a2af;letter-spacing:.4px;flex-direction:column;gap:7px;font:9px DM Mono,monospace;display:flex}select,input{color:#4b586b;background:#fafbfc;border:1px solid #e7e9ed;border-radius:5px;outline:none;width:100%;height:35px;padding:0 10px;font:10px DM Mono,monospace}select:focus,input:focus{border-color:#f4a68f;box-shadow:0 0 0 3px #f2633d17}.input-with-suffix{position:relative}.input-with-suffix input{padding-right:36px}.input-with-suffix span{color:#b4bbc4;font:10px DM Mono,monospace;position:absolute;top:10px;right:10px}.command-preview{color:#95a0ae;background:#f8f9fa;border:1px solid #edf0f2;border-radius:5px;justify-content:space-between;align-items:center;gap:12px;min-height:37px;padding:0 10px;display:flex}.command-preview>div{align-items:center;gap:4px;min-width:0;display:flex;overflow:hidden}.terminal-dot{background:#f28c78;border-radius:50%;flex:none;width:5px;height:5px;margin-right:2px}.terminal-dot.yellow{background:#e9bf68}.terminal-dot.green{background:#6dc08e}.command-preview code{color:#8894a4;text-overflow:ellipsis;white-space:nowrap;margin-left:7px;font:9px DM Mono,monospace;overflow:hidden}.command-preview button{color:var(--accent-deep);background:0 0;flex:none;padding:5px 8px;font:500 9px DM Mono,monospace}.command-preview button:hover{background:#fff0eb;border-radius:4px}.tip-card{color:#d9dfeb;background:var(--navy);border-color:var(--navy);box-shadow:none;padding:25px 27px;position:relative}.tip-card .eyebrow{color:#f79a7d}.tip-card h2{color:#fff;font-size:22px;line-height:1.12}.tip-card p:not(.eyebrow){color:#9caabc;max-width:250px;margin:15px 0 19px;font-size:11px;line-height:1.65}.tip-card a{color:#f79a7d;font:500 10px DM Mono,monospace;text-decoration:none}.tip-card a span{margin-left:6px}.tip-spark{color:#f27d5d;font-size:20px;position:absolute;top:22px;right:26px}.footer{color:#a3acb8;justify-content:space-between;padding:25px 5px 30px;font:9px DM Mono,monospace;display:flex}.muted{color:#d0d4da;margin:0 7px}.heart{color:var(--accent)}.toast{z-index:5;color:#fff;background:var(--navy);opacity:0;pointer-events:none;border-radius:7px;padding:11px 15px;font-size:11px;transition:opacity .2s,transform .2s;position:fixed;bottom:22px;right:24px;transform:translateY(8px);box-shadow:0 10px 30px #111b2c38}.toast.visible{opacity:1;transform:translateY(0)}.share-backdrop{z-index:10;-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);background:#111b2c6b;place-items:center;padding:20px;display:grid;position:fixed;top:0;bottom:0;left:0;right:0}.share-backdrop[hidden]{display:none}.share-modal{background:#fff;border:1px solid #ffffffb3;border-radius:15px;width:min(100%,490px);padding:31px 32px 25px;position:relative;box-shadow:0 25px 80px #111b2c3d}.modal-close{color:#9ca6b2;background:0 0;border-radius:6px;width:28px;height:28px;font-size:24px;line-height:20px;position:absolute;top:14px;right:17px}.modal-close:hover{color:var(--navy);background:#f3f4f6}.share-modal h2{letter-spacing:-1px;margin-bottom:10px;font-size:25px}.modal-copy{color:#778394;max-width:390px;margin-bottom:22px;font-size:12px;line-height:1.6}.collab-name-label{margin-bottom:13px}.collab-name-label input{background:#fbfcfd;height:38px}.share-link-row{gap:8px;display:flex}.share-link-row input{color:#607084;text-overflow:ellipsis;white-space:nowrap;min-width:0;height:38px;padding-right:9px;overflow:hidden}.share-link-row .primary-button{flex:none;height:38px}.room-info{color:#8d98a6;background:#f7f8fa;border:1px solid #edf0f2;border-radius:6px;justify-content:space-between;align-items:center;margin-top:15px;padding:11px 12px;font:10px DM Mono,monospace;display:flex}.room-info>span:first-child{color:#4e6073;align-items:center;gap:7px;display:inline-flex}.room-info strong{font-weight:500}.modal-actions{justify-content:flex-end;margin-top:18px;display:flex}.modal-note{color:#a8b0ba;margin:16px 0 0;font:9px DM Mono,monospace}.modal-note code{color:#d66547}.print-sheet{display:none}@media (max-width:980px){.app-shell{padding:0 28px}.workspace-toolbar{flex-direction:column;align-items:flex-start;gap:15px;padding:18px 20px}.toolbar-actions{justify-content:flex-end;width:100%}.editor-grid{grid-template-columns:1fr;min-height:700px}.splitter{display:none}.preview-pane{border-top:1px solid var(--line);min-height:430px}.settings-fields{grid-template-columns:repeat(2,1fr)}}@media (max-width:620px){.app-shell{padding:0 15px}.topbar{height:70px}.engine-pill,.icon-button{display:none}.hero-row{margin:40px 3px 28px;display:block}.hero-meta{align-items:flex-start;margin-top:22px}.hero-copy{max-width:290px;line-height:1.5}.workspace-toolbar{padding:15px}.toolbar-actions{flex-wrap:wrap;justify-content:flex-start;gap:8px}.autosave{margin-right:auto}.collab-status{order:3;width:100%}.pane-heading{padding:0 15px}.keyboard-hint{display:none}.preview-stage{padding:15px}.paper{padding:27px 25px}.line-numbers{flex-basis:40px;width:40px;padding-right:10px}textarea{padding:20px 15px;font-size:11px}.settings-card,.tip-card{padding:20px 18px}.settings-fields{gap:11px;margin-top:20px}.footer{line-height:2.2;display:block}.footer span:last-child{display:block}.secondary-button,.primary-button{padding:0 11px}.share-modal{padding:28px 20px 21px}.share-link-row{display:block}.share-link-row input{margin-bottom:8px}.share-link-row .primary-button{width:100%}}@media print{@page{size:auto;margin:0}body{background:#fff}.app-shell,.toast{display:none!important}.print-sheet{min-height:100vh;padding:var(--print-margin,18mm);display:block}.print-sheet .paper{max-width:none;min-height:0;box-shadow:none;padding:0;transform:none!important}}