:root{--ink:#1e2029;--ink-2:#292c38;--paper:#f4efe4;--paper-2:#e9e1d4;--white:#fffaf1;--orange:#e55b3f;--blue:#677be3;--gold:#e4b65d;--muted:#a5a4a4;--body:#4c4a4d;--line:rgba(30,32,41,.15);--serif:Georgia,'Times New Roman',serif;--sans:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}.site-header{height:76px;background:var(--ink);color:var(--white);display:flex;align-items:center;justify-content:space-between;padding:0 clamp(22px,5.5vw,88px);position:relative;z-index:2;border-bottom:1px solid rgba(255,255,255,.09)}.brand{display:flex;align-items:center;gap:12px;font-size:10px;letter-spacing:.15em;font-weight:800;white-space:nowrap}.brand b{font-weight:500;color:#c4c3c3}.brand-mark{display:flex;gap:2px;align-items:flex-end;width:21px;height:21px}.brand-mark i{display:block;width:5px;border-radius:2px;background:var(--orange);height:10px}.brand-mark i:nth-child(2){height:16px;background:var(--gold)}.brand-mark i:nth-child(3){height:21px;background:var(--blue)}.site-header nav{display:flex;gap:32px;color:#c1c0c1;font-size:12px}.site-header nav a:hover,.text-cta:hover{color:var(--gold)}.header-cta{border:1px solid rgba(255,250,241,.3);padding:12px 16px;font-size:12px;border-radius:2px;transition:.2s}.header-cta span{padding-left:18px;color:var(--gold)}.header-cta:hover{border-color:var(--orange);background:rgba(229,91,63,.1)}.hero{position:relative;overflow:hidden;background:var(--ink);color:var(--white);min-height:680px;padding:76px clamp(22px,9vw,145px) 64px;display:grid;grid-template-columns:1fr 1.03fr;gap:3.3vw;align-items:center}.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:52px 52px;mask-image:linear-gradient(90deg,transparent,black 35%,black)}.hero-copy{position:relative;z-index:1;max-width:600px}.eyebrow{font-size:10px;font-weight:800;letter-spacing:.18em;color:#c3c0bc;text-transform:uppercase;display:flex;align-items:center;gap:10px}.eyebrow-dot{width:7px;height:7px;background:var(--orange);border-radius:50%;box-shadow:0 0 0 5px rgba(229,91,63,.12)}.hero h1{font-family:var(--serif);font-size:clamp(56px,6.1vw,92px);line-height:.96;letter-spacing:-.055em;font-weight:400;margin:36px 0 26px}.hero h1 em,.intro-copy h2 em,.workflow h2 em,.principles h2 em{font-weight:400;color:var(--gold)}.hero h1 span{color:var(--orange)}.hero-deck{font-size:15px;line-height:1.85;color:#b9b8bb;max-width:420px}.hero-actions{display:flex;gap:27px;align-items:center;margin-top:36px;flex-wrap:wrap}.primary-cta{background:var(--orange);color:white;padding:16px 18px;font-size:12px;font-weight:800;box-shadow:5px 5px 0 rgba(229,91,63,.16);transition:transform .2s,box-shadow .2s}.primary-cta span{margin-left:30px;font-size:16px}.primary-cta:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 rgba(229,91,63,.23)}.text-cta{font-size:12px;color:#d0cdd0}.text-cta span{color:var(--gold);margin-left:10px}.hero-meta{display:flex;gap:24px;flex-wrap:wrap;margin-top:54px;color:#8d8e96;font-size:9px;letter-spacing:.08em}.hero-meta b{color:var(--gold);padding-right:7px}.hero-art{position:relative;z-index:1;height:478px;min-width:0}.orbit{position:absolute;border:1px solid rgba(255,255,255,.11);border-radius:50%;transform:rotate(-18deg)}.orbit-one{width:510px;height:330px;left:0;top:65px}.orbit-two{width:445px;height:385px;left:36px;top:36px;transform:rotate(40deg)}.editor-window{position:absolute;top:52px;left:3%;width:78%;height:335px;background:#272a35;border:1px solid rgba(255,255,255,.2);box-shadow:0 26px 70px rgba(0,0,0,.35);transform:rotate(-3deg);overflow:hidden}.window-top{height:43px;background:#20222c;border-bottom:1px solid rgba(255,255,255,.08);display:flex;align-items:center;padding:0 13px;gap:12px;color:#b6b6bb;font-size:9px}.window-dots{display:flex;gap:4px}.window-dots i{width:6px;height:6px;border-radius:50%;background:#6b6c74}.window-dots i:first-child{background:var(--orange)}.window-dots i:nth-child(2){background:var(--gold)}.window-dots i:nth-child(3){background:#6b7bdb}.window-save{margin-left:auto;color:#c1b3a0;font-size:7px;letter-spacing:.13em}.window-body{display:flex;height:250px;padding:19px 17px;gap:18px}.mini-gutter{color:#777a87;font:10px/1.8 ui-monospace,SFMono-Regular,monospace;text-align:right}.mini-code{font:11px/1.8 ui-monospace,SFMono-Regular,monospace;color:#d3d2d2}.mini-comment{color:#f0bc79}.m-blue{color:#9dacff}.mini-orange{color:#f08068}.mini-bullet{color:#c5c9df}.window-bottom{height:40px;border-top:1px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:space-between;padding:0 15px;color:#858894;font-size:8px}.window-bottom b{color:var(--gold);font-weight:600}.preview-sheet{position:absolute;right:1%;top:133px;width:44%;height:331px;background:#fff9ed;color:var(--ink);box-shadow:0 22px 50px rgba(0,0,0,.36);transform:rotate(4deg);padding:0 19px 18px;z-index:2}.preview-top{display:flex;justify-content:space-between;padding:16px 0 12px;border-bottom:1px solid #e4ddd0;font-size:7px;letter-spacing:.13em;font-weight:800;color:#797571}.preview-top span+span{font-size:12px;color:var(--orange)}.preview-eyebrow{font-size:7px;letter-spacing:.16em;color:#b1a79b;margin-top:23px}.preview-sheet h3{font:normal 32px/.97 var(--serif);letter-spacing:-.04em;margin:9px 0 12px}.preview-rule{height:3px;width:36px;background:var(--orange)}.preview-sheet p{font:10px/1.7 var(--serif);color:#615e5b;margin:14px 0}.preview-list{font-size:8px;padding:8px 0;border-bottom:1px solid #e7e0d5}.preview-list span{color:var(--orange);font-size:7px;font-weight:800;margin-right:10px}.preview-sign{font:italic 9px var(--serif);margin-top:14px;color:#918476}.floating-note{position:absolute;background:#3b3e4a;border:1px solid rgba(255,255,255,.11);box-shadow:0 12px 28px rgba(0,0,0,.25)}.note-back{width:110px;height:125px;right:8%;top:7px;transform:rotate(9deg);padding:14px}.note-label{font-size:6px;color:#b9a68d;letter-spacing:.14em}.note-line{display:block;height:3px;background:#777b89;margin-top:12px;width:100%;opacity:.5}.note-line.short{width:61%;margin-top:8px}.note-line.tiny{width:40%;margin-top:8px}.round-stamp{position:absolute;left:0;bottom:27px;width:88px;height:88px;border:1px solid var(--gold);border-radius:50%;display:flex;flex-direction:column;justify-content:center;align-items:center;color:var(--gold);transform:rotate(-12deg);background:var(--ink);z-index:3}.round-stamp span{font-size:8px;letter-spacing:.12em;line-height:1.4;text-align:center;font-weight:800}.round-stamp b{font-size:17px;position:absolute;top:7px;right:16px;color:var(--orange)}.hero-footnote{position:absolute;bottom:22px;left:clamp(22px,9vw,145px);right:clamp(22px,9vw,145px);padding-top:17px;border-top:1px solid rgba(255,255,255,.13);display:flex;justify-content:space-between;color:#85858d;font-size:8px;letter-spacing:.16em}.intro-band{padding:106px clamp(22px,10vw,160px) 86px;display:grid;grid-template-columns:160px 1fr 230px;gap:35px;align-items:start}.section-index{font-size:10px;font-weight:800;letter-spacing:.15em;padding-top:13px;white-space:nowrap}.section-index span{color:var(--orange);padding:0 8px}.intro-copy h2,.workflow h2,.principles h2,.specs h2{font:normal clamp(40px,4vw,60px)/1.01 var(--serif);letter-spacing:-.045em;margin:0 0 22px}.intro-copy h2 em,.workflow h2 em,.principles h2 em{color:var(--orange)}.intro-copy p{font-size:14px;line-height:1.9;color:var(--body);max-width:520px;margin:0}.intro-side{border-left:1px solid var(--line);padding:9px 0 9px 28px;margin-top:28px}.side-mark{font-size:33px;color:var(--orange)}.intro-side p{font:italic 16px/1.55 var(--serif);color:#77706a;margin:10px 0 0}.feature-section{padding:0 clamp(22px,10vw,160px) 100px}.feature{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(35px,6vw,88px);align-items:center;position:relative;padding:56px 0 75px;border-top:1px solid var(--line)}.feature-reverse{grid-template-columns:.92fr 1.08fr}.feature-reverse .feature-visual{order:2}.feature-number{position:absolute;top:25px;left:0;font-size:9px;letter-spacing:.16em;color:#968b7f;font-weight:800}.feature-visual{height:350px;position:relative;overflow:hidden;background:#e2dbcf}.library-visual{background:#dfd9cd;padding:32px 10%}.lib-window{width:100%;max-width:430px;height:292px;background:#fffaf1;box-shadow:0 14px 38px rgba(40,31,20,.12);border:1px solid #d9d0c1;padding:15px 18px}.lib-heading{display:flex;justify-content:space-between;font-size:8px;font-weight:800;letter-spacing:.15em}.lib-heading span{font-size:15px;color:var(--orange);font-weight:400}.lib-search{margin:17px 0 9px;background:#eee8de;padding:10px;font-size:9px;color:#8c857e}.lib-item{display:flex;align-items:center;gap:9px;border-bottom:1px solid #eee8df;padding:10px 5px}.lib-item.active{background:#f7e5d8;border-left:2px solid var(--orange);padding-left:7px}.file-glyph{font-style:normal;font-size:8px;color:var(--orange);font-weight:800;border:1px solid #e3b8a7;padding:7px 4px}.lib-item span{display:flex;flex-direction:column;gap:4px;font-size:9px}.lib-item b{font-weight:700}.lib-item small{color:#91877e;font-size:8px}.lib-item em{margin-left:auto;color:var(--orange);font-style:normal}.lib-footer{display:flex;justify-content:space-between;margin-top:14px;font-size:7px;letter-spacing:.13em;color:#9a8d7e}.lib-footer span{color:#b3a89d}.feature-text{padding:10px 0}.dark-eyebrow{color:#a27f6f}.feature-text h3{font:normal clamp(35px,3.5vw,49px)/1.06 var(--serif);letter-spacing:-.04em;margin:19px 0}.feature-text>p:not(.eyebrow){max-width:420px;font-size:13px;line-height:1.9;color:var(--body)}.feature-text ul{list-style:none;padding:0;margin:25px 0 0;display:grid;gap:12px;font-size:11px;color:#555158}.feature-text li:before{content:'↗';color:var(--orange);padding-right:11px;font-size:13px}.preview-visual{background:#20232d;padding:44px 6%;display:flex;align-items:center}.split-demo{display:grid;grid-template-columns:1fr 1fr;width:100%;height:260px;box-shadow:0 16px 30px rgba(0,0,0,.25);overflow:hidden}.split-source{background:#2b2e3a;padding:18px 14px;color:#d1d0cd;font:9px/1.9 ui-monospace,monospace}.split-source b{color:var(--orange)}.demo-label{font:7px var(--sans);letter-spacing:.16em;color:#8f9098;display:block;margin-bottom:20px}.split-render{background:#fff9ee;padding:18px 15px;color:var(--ink)}.split-render h4{font:normal 23px var(--serif);margin:0 0 12px}.split-render h5{font:normal 12px var(--sans);margin:0 0 8px}.split-render p{font:9px/1.6 var(--serif);color:#67615b}.demo-check{font-size:8px;margin-top:9px}.demo-check:first-letter{color:var(--orange)}.split-render code{display:block;margin-top:12px;font:8px ui-monospace,monospace;background:#eee6d8;padding:7px}.feature-last{padding-bottom:5px}.export-visual{background:#e7dfd1;display:flex;align-items:center;justify-content:center}.export-stack{position:relative;width:210px;height:230px}.export-doc{position:absolute;width:148px;height:192px;background:#fffaf1;box-shadow:0 14px 30px rgba(48,35,22,.14);padding:18px;font:normal 34px var(--serif);display:flex;align-items:flex-start;justify-content:space-between;border-top:5px solid var(--blue)}.export-doc span{font:normal 15px var(--sans);color:var(--orange)}.export-back{left:44px;top:5px;transform:rotate(11deg);background:#f8e1d6;border-top-color:var(--orange)}.export-mid{left:20px;top:13px;transform:rotate(-6deg);background:#e8eaff;border-top-color:var(--blue)}.export-front{left:0;top:29px;transform:rotate(-1deg);display:block;border-top-color:var(--orange)}.export-front i{font:800 15px var(--sans);display:block;color:var(--orange);font-style:normal}.export-front span{font:normal 45px var(--serif);display:block;color:var(--ink);margin-top:9px}.export-front b{position:absolute;bottom:17px;left:18px;font:800 6px var(--sans);letter-spacing:.15em;color:#9b8c7e}.export-label{font-size:8px;line-height:1.8;letter-spacing:.14em;font-weight:800;color:#948575;position:absolute;right:8%;bottom:39px}.workflow{background:#e7dfd1;padding:90px clamp(22px,10vw,160px) 98px}.workflow h2{margin:28px 0 58px}.workflow-steps{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #cfc5b4}.workflow-steps article{padding:25px 30px 0 0;border-right:1px solid #cfc5b4;min-height:170px}.workflow-steps article+article{padding-left:30px}.workflow-steps article:last-child{border-right:0}.workflow-steps article>span{font-size:10px;color:var(--orange);font-weight:800;letter-spacing:.1em}.workflow-steps h3{font:normal 22px var(--serif);margin:18px 0 9px}.workflow-steps p{font-size:12px;line-height:1.8;color:#71695f;max-width:280px;margin:0}.principles{background:var(--ink);color:var(--white);padding:90px clamp(22px,10vw,160px);display:grid;grid-template-columns:90px 1fr 1fr;gap:34px;align-items:start}.principles-mark{font:800 20px var(--sans);color:var(--orange);border:1px solid rgba(255,255,255,.2);width:62px;height:62px;display:grid;place-items:center;transform:rotate(-4deg)}.principles .eyebrow{color:#9a9ba3}.principles h2{margin-top:23px}.principles h2 em{color:var(--gold)}.principles-copy{padding-top:33px}.principles-copy p{max-width:450px;color:#b9b8bb;font-size:13px;line-height:1.9}.dark-cta{display:inline-block;margin-top:19px;border:1px solid rgba(255,255,255,.25);padding:14px 16px;font-size:11px}.dark-cta span{padding-left:26px;color:var(--gold)}.dark-cta:hover{border-color:var(--orange)}.specs{padding:92px clamp(22px,10vw,160px) 105px}.specs-head{display:grid;grid-template-columns:1fr 1fr;align-items:start}.specs-head .eyebrow{color:#a17c6c}.specs h2{font-size:clamp(36px,3.5vw,49px)}.spec-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:42px;border-top:1px solid var(--line);padding-top:22px}.spec-grid>div{display:flex;flex-direction:column;gap:13px}.spec-grid span{font-size:9px;letter-spacing:.15em;color:var(--orange);font-weight:800}.spec-grid b{font:normal 18px var(--serif)}.spec-grid p{margin:0;color:#706b68;font-size:11px;line-height:1.8}.site-footer{border-top:1px solid var(--line);padding:27px clamp(22px,5.5vw,88px);display:flex;align-items:center;justify-content:space-between;gap:20px}.site-footer .brand{color:var(--ink)}.site-footer .brand b{color:#77716c}.site-footer>span{font:italic 13px var(--serif);color:#81776f}.site-footer>a:last-child{font-size:11px;color:var(--orange);font-weight:700}
@media(max-width:1100px){.hero{grid-template-columns:1fr 1fr;padding-left:5vw;padding-right:5vw}.hero-art{transform:scale(.94);transform-origin:center}.intro-band{grid-template-columns:100px 1fr 170px;padding-left:6vw;padding-right:6vw}.feature-section,.workflow,.principles,.specs{padding-left:6vw;padding-right:6vw}.feature{gap:42px}.feature-visual{height:315px}.site-header{padding:0 4vw}.site-header nav{gap:18px}}
@media(max-width:820px){.site-header nav{display:none}.hero{grid-template-columns:1fr;min-height:unset;padding-top:70px;padding-bottom:96px}.hero-copy{max-width:700px}.hero-art{width:min(100%,600px);margin:0 auto;height:420px;transform:none}.hero-footnote{gap:12px;font-size:7px}.intro-band{grid-template-columns:90px 1fr}.intro-side{display:none}.feature,.feature-reverse{grid-template-columns:1fr;gap:26px}.feature-reverse .feature-visual{order:0}.feature-visual{height:340px}.feature-text{padding:0 5px}.principles{grid-template-columns:70px 1fr}.principles-copy{grid-column:2;padding-top:0}.spec-grid{grid-template-columns:repeat(2,1fr);row-gap:32px}}
@media(max-width:540px){.site-header{height:64px;padding:0 17px}.brand{font-size:8px;letter-spacing:.11em;gap:8px}.brand-mark{transform:scale(.86);transform-origin:left center}.header-cta{font-size:10px;padding:10px}.header-cta span{padding-left:8px}.hero{padding:58px 20px 90px}.hero h1{font-size:clamp(52px,14vw,76px);margin-top:30px}.hero-deck{font-size:13px}.hero-meta{margin-top:36px;gap:13px}.hero-art{height:360px;margin-top:10px;transform:scale(.95);transform-origin:top center;width:105%;margin-left:-2.5%}.editor-window{top:50px;left:0;width:87%;height:305px}.window-body{height:220px}.preview-sheet{right:0;top:128px;width:45%;height:306px;padding:0 12px}.preview-sheet h3{font-size:27px}.round-stamp{width:70px;height:70px;bottom:4px}.round-stamp span{font-size:7px}.note-back{right:2%;top:5px}.hero-footnote{left:20px;right:20px;display:grid;grid-template-columns:1fr 1fr;font-size:6px}.hero-footnote span:last-child{display:none}.intro-band{padding:68px 22px 62px;grid-template-columns:1fr;gap:20px}.section-index{padding:0}.intro-copy h2,.workflow h2,.principles h2{font-size:44px}.intro-copy p{font-size:13px}.feature-section{padding:0 22px 66px}.feature{padding:52px 0 51px;gap:18px}.feature-visual{height:285px}.library-visual{padding:22px 5%}.lib-window{padding:13px;height:250px}.lib-item{padding:7px 3px}.lib-footer{margin-top:9px}.feature-text h3{font-size:39px;margin:15px 0}.feature-text>p:not(.eyebrow){font-size:12px}.preview-visual{padding:34px 4%}.split-demo{height:228px}.split-source{font-size:7px;padding:15px 8px}.split-render{padding:15px 9px}.split-render h4{font-size:19px}.workflow{padding:67px 22px}.workflow h2{margin:24px 0 38px}.workflow-steps{grid-template-columns:1fr}.workflow-steps article,.workflow-steps article+article{padding:22px 0;border-right:0;border-bottom:1px solid #cfc5b4;min-height:0}.workflow-steps article:last-child{border-bottom:0}.workflow-steps p{max-width:unset}.principles{padding:65px 22px;grid-template-columns:1fr;gap:23px}.principles-mark{width:55px;height:55px}.principles-copy{grid-column:1;padding:0}.specs{padding:67px 22px}.specs-head{grid-template-columns:1fr;gap:18px}.specs-head h2{font-size:40px}.spec-grid{gap:27px 17px;margin-top:26px}.spec-grid b{font-size:16px}.spec-grid p{font-size:10px}.site-footer{padding:25px 20px;flex-wrap:wrap}.site-footer>span{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}


/* Dark-only editorial palette: preserve the warm ink-and-copper identity without light-theme surfaces. */
:root { --ink:#181a22; --ink-2:#22242e; --paper:#181a22; --paper-2:#22242d; --white:#f3e8d9; --orange:#f08068; --blue:#93a0f5; --gold:#e2b96c; --muted:#aaa3a0; --body:#c3b8aa; --line:rgba(239,226,210,.14); }
html,body { background:#181a22; color:#f0e6d8; }
.intro-band,.feature-section,.specs { background:#181a22; color:#eee4d6; }
.intro-copy h2,.feature-text h3,.workflow h2,.specs h2,.workflow-steps h3 { color:#f4e9da; }
.intro-copy p,.feature-text>p:not(.eyebrow),.feature-text ul,.workflow-steps p,.spec-grid p { color:#c0b4a5; }
.intro-side { border-color:#41434e; }
.intro-side p,.site-footer>span { color:#b0a495; }
.feature { border-color:#41434e; }
.feature-visual,.library-visual,.export-visual { background:#22242d; }
.lib-window { background:#292b35; border-color:#494b56; box-shadow:0 16px 38px rgba(0,0,0,.34); color:#eee3d5; }
.lib-heading { color:#f2e7d8; }
.lib-search { background:#20222b; color:#c0b4a5; }
.lib-item { border-color:#41434d; }
.lib-item.active { background:#38323a; border-left-color:#f08068; }
.file-glyph { border-color:#68504e; }
.lib-item b { color:#f1e6d8; }
.lib-item small,.lib-footer { color:#aa9e8f; }
.lib-footer span { color:#8f877f; }
.preview-visual { background:#1e2029; }
.split-source { background:#252731; color:#e6ded1; }
.split-render { background:#2d2f39; color:#eee4d7; border-left:1px solid #454751; }
.split-render h4,.split-render h5 { color:#f4e9db; }
.split-render p { color:#c8bdae; }
.split-render code { background:#393640; color:#f0a08a; }
.export-doc { background:#292b35; color:#f1e6d8; box-shadow:0 14px 30px rgba(0,0,0,.3); }
.export-back { background:#342c31; }
.export-mid { background:#292c3c; }
.export-front b { color:#b3a490; }
.export-label { color:#b8a993; }
.workflow { background:#22242d; color:#eee4d6; }
.workflow-steps { border-color:#41434e; }
.workflow-steps article { border-color:#41434e; }
.workflow-steps p { color:#c0b5a7; }
.principles { background:#181a22; border-top:1px solid #41434e; border-bottom:1px solid #41434e; }
.principles-copy p { color:#c4b8aa; }
.dark-cta { border-color:rgba(244,233,219,.28); color:#f0e6d8; }
.spec-grid { border-color:#41434e; }
.spec-grid b { color:#f0e6d8; }
.site-footer { background:#181a22; border-color:#41434e; }
.site-footer .brand { color:#f1e7d9; }
.site-footer .brand b { color:#b4a99d; }
.preview-sheet { background:#292b35; color:#f1e7da; border:1px solid #494b56; box-shadow:0 22px 50px rgba(0,0,0,.5); }
.preview-top { border-color:#474953; color:#b9ad9e; }
.preview-eyebrow { color:#c6b39a; }
.preview-sheet h3 { color:#f3e8da; }
.preview-sheet p { color:#cbc0b1; }
.preview-list { border-color:#454751; color:#e1d7c9; }
.preview-sign { color:#b7a795; }
.round-stamp { background:#20222b; }
.hero-footnote { border-color:rgba(255,255,255,.17); color:#aaa4a1; }
.site-header { background:#181a22; }
.header-cta { color:#f1e7d8; }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }

/* Fixed dark appearance: native controls and system scrollbars follow the product palette. */
html { color-scheme: dark; }

/* Marketing preview illustrations: keep the mock document aligned and legible. */
.preview-sheet {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-width: 360px;
  overflow: hidden;
  padding: 0 clamp(12px, 1.6vw, 19px) 16px;
  transform: rotate(2deg);
  transform-origin: center center;
}
.preview-top { flex: 0 0 auto; min-width: 0; align-items: center; gap: 8px; padding: 14px 0 10px; }
.preview-top span:first-child { overflow: hidden; text-overflow: ellipsis; }
.preview-top span+span { display: inline-grid; place-items: center; width: 22px; height: 22px; flex: 0 0 22px; line-height: 1; }
.preview-eyebrow { margin-top: clamp(12px, 1.4vw, 20px); line-height: 1.4; }
.preview-sheet h3 { max-width: 100%; font-size: clamp(21px, 2.3vw, 30px); line-height: 1.02; overflow-wrap: anywhere; }
.preview-sheet p { margin: 9px 0; line-height: 1.55; overflow-wrap: anywhere; }
.preview-list { display: flex; align-items: baseline; gap: 6px; padding: 6px 0; line-height: 1.4; overflow-wrap: anywhere; }
.preview-list span { flex: 0 0 auto; margin-right: 3px; }
.preview-sign { margin-top: auto; padding-top: 9px; line-height: 1.5; }
.preview-visual { min-width: 0; }
.split-demo { min-width: 0; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.split-source, .split-render { min-width: 0; overflow: hidden; overflow-wrap: anywhere; }
.split-source p, .split-render p { overflow-wrap: anywhere; }
.split-render { display: flex; flex-direction: column; }
.split-render code { max-width: 100%; overflow-wrap: anywhere; white-space: normal; }
@media (max-width: 820px) {
  .preview-sheet { transform: rotate(2deg); }
  .preview-sheet h3 { font-size: clamp(22px, 4vw, 29px); }
}
@media (max-width: 540px) {
  .hero-art { overflow: visible; }
  .preview-sheet { top: 120px; right: 0; width: 46%; height: 285px; padding: 0 10px 12px; transform: rotate(1.5deg); }
  .preview-top { padding: 10px 0 8px; font-size: 6px; }
  .preview-top span+span { width: 17px; height: 17px; flex-basis: 17px; font-size: 10px; }
  .preview-eyebrow { margin-top: 13px; font-size: 6px; }
  .preview-sheet h3 { font-size: clamp(19px, 6vw, 24px); margin: 6px 0 8px; }
  .preview-rule { flex: 0 0 2px; height: 2px; }
  .preview-sheet p { font-size: 8px; line-height: 1.45; margin: 8px 0; }
  .preview-list { font-size: 7px; padding: 5px 0; gap: 3px; }
  .preview-list span { font-size: 6px; }
  .preview-sign { padding-top: 7px; font-size: 7px; }
  .preview-visual { padding: 28px 4%; }
  .split-demo { height: 228px; }
  .split-source { font-size: 7px; line-height: 1.7; padding: 13px 8px; }
  .split-render { padding: 13px 9px; }
  .split-render h4 { font-size: 18px; line-height: 1.05; }
  .split-render h5 { font-size: 10px; }
  .split-render p { font-size: 8px; }
}


/* Southbridge project navigation and account menu, shared visually with the tools hub. */
.home-header-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex:0 0 auto;min-width:0}
.site-header .desktop-nav{display:flex;align-items:center;gap:28px;margin-left:auto}
.site-header .desktop-nav a{display:inline-flex;align-items:center;min-height:42px;color:#c1c0c1;font-size:12px;font-weight:650;transition:color .18s ease}
.site-header .desktop-nav a:hover{color:var(--gold)}
.sb-account{position:relative;flex:0 0 auto;font-family:var(--sans);letter-spacing:normal;text-transform:none}
.sb-account-trigger{display:inline-flex;align-items:center;gap:9px;min-height:43px;max-width:240px;padding:4px 9px 4px 5px;border:1px solid #41434e;border-radius:12px;background:rgba(255,255,255,.025);color:#f0e6d8;text-align:left;cursor:pointer;transition:background .18s,border-color .18s}
.sb-account-trigger:hover,.sb-account-trigger[aria-expanded="true"]{border-color:#62636f;background:rgba(255,255,255,.055)}
.sb-account-avatar{width:32px;height:32px;flex:0 0 32px;display:grid;place-items:center;border-radius:9px;background:rgba(120,216,196,.13);color:#9be9d8;font-size:10px;font-weight:850;letter-spacing:.02em}
.sb-account-trigger-copy{display:flex;flex-direction:column;gap:1px;min-width:0}
.sb-account-trigger-copy strong{max-width:136px;overflow:hidden;color:#f0e6d8;font-size:11px;font-weight:750;text-overflow:ellipsis;white-space:nowrap}
.sb-account-trigger-copy small{max-width:136px;overflow:hidden;color:#a99e94;font-size:9px;text-overflow:ellipsis;white-space:nowrap}
.sb-account-chevron{width:14px;height:14px;flex:0 0 auto;fill:none;stroke:#aaa49d;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s}
.sb-account-trigger[aria-expanded="true"] .sb-account-chevron{transform:rotate(180deg)}
.sb-account-menu{position:absolute;z-index:40;top:calc(100% + 9px);right:0;width:min(320px,calc(100vw - 28px));padding:9px;border:1px solid #454752;border-radius:15px;background:#22242d;box-shadow:0 20px 55px rgba(0,0,0,.45)}
.sb-account-menu[hidden]{display:none}
.sb-account-summary{padding:12px 12px 14px}
.sb-account-summary strong{display:block;color:#f1e7da;font-size:13px;font-weight:750;overflow-wrap:anywhere}
.sb-account-summary p{margin:5px 0 0;color:#b0a497;font-size:11px;line-height:1.65}
.sb-account-actions{display:grid;gap:4px;padding:7px 0 2px;border-top:1px solid rgba(239,226,210,.1)}
.sb-account-action{width:100%;display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:41px;padding:9px 11px;border:1px solid transparent;border-radius:9px;background:transparent;color:#e4dacf;font-size:12px;font-weight:650;text-align:left;cursor:pointer}
.sb-account-action:hover{border-color:rgba(120,216,196,.18);background:rgba(120,216,196,.07)}
.sb-account-action span:last-child{color:#9d968c;font-size:15px}
.sb-account-action:disabled{opacity:.6;cursor:wait}
.sb-account-feedback{margin:9px 5px 4px;color:#b0a497;font-size:11px;line-height:1.6}
.sb-account-feedback[hidden]{display:none}
.menu-toggle{width:42px;height:42px;flex:0 0 42px;display:none;align-items:center;justify-content:center;flex-direction:column;gap:5px;padding:0;border:1px solid #41434e;border-radius:12px;background:rgba(255,255,255,.025);color:#f0e6d8;cursor:pointer}
.menu-toggle:hover,.menu-toggle[aria-expanded="true"]{border-color:#62636f;background:rgba(255,255,255,.055)}
.menu-toggle span{width:17px;height:1.5px;border-radius:999px;background:currentColor;transition:transform .18s,opacity .18s}
.menu-toggle[aria-expanded="true"] span:first-child{transform:translateY(6.5px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-toggle[aria-expanded="true"] span:last-child{transform:translateY(-6.5px) rotate(-45deg)}
.home-mobile-nav{display:grid;gap:4px;margin:9px clamp(17px,5vw,80px) 0 auto;width:min(360px,calc(100vw - 28px));padding:9px;border:1px solid #41434e;border-radius:15px;background:rgba(34,36,45,.98);box-shadow:0 18px 40px rgba(0,0,0,.28);position:absolute;z-index:30;right:clamp(14px,5.5vw,88px)}
.home-mobile-nav[hidden]{display:none}
.home-mobile-nav a{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:43px;padding:10px 12px;border-radius:9px;color:#c0b5a8;font-size:12px;font-weight:650}
.home-mobile-nav a:hover{background:rgba(120,216,196,.07);color:#9be9d8}
@media(max-width:820px){.site-header .desktop-nav{display:none}.home-header-actions .header-cta{display:none}.home-header-actions{gap:7px}.menu-toggle{display:inline-flex}.sb-account-trigger{min-height:42px;gap:7px;padding:4px 7px 4px 4px}.home-mobile-nav{position:absolute;top:76px;right:0;margin:9px 14px 0 0}}
@media(max-width:540px){.site-header{gap:10px}.home-header-actions{gap:6px}.site-header .brand{font-size:8px;letter-spacing:.11em;gap:8px}.sb-account-trigger-copy,.sb-account-chevron{display:none}.sb-account-trigger{width:42px;height:42px;justify-content:center;padding:4px}.sb-account-avatar{width:32px;height:32px;flex-basis:32px}.sb-account-menu{right:-48px}.home-mobile-nav{top:64px}}

.home-mobile-nav:not([hidden]){position:fixed;top:76px;right:clamp(14px,5.5vw,88px);margin:0;max-height:calc(100dvh - 90px);overflow:auto}
@media(max-width:540px){.home-mobile-nav:not([hidden]){top:64px;right:10px}}

/* Markdown Studio: align project/account navigation with the product palette. */
.sb-account-trigger{border-color:rgba(255,250,241,.16);background:#252731;color:var(--white);box-shadow:inset 0 1px 0 rgba(255,255,255,.025)}
.sb-account-trigger:hover,.sb-account-trigger[aria-expanded="true"]{border-color:rgba(219,179,93,.62);background:#30323c;box-shadow:0 0 0 3px rgba(219,179,93,.07)}
.sb-account-avatar{border:1px solid rgba(219,179,93,.28);background:linear-gradient(140deg,rgba(223,88,61,.22),rgba(219,179,93,.13));color:#f4bd83}
.sb-account-trigger-copy strong{color:#fffaf1}
.sb-account-trigger-copy small{color:#b4aa9d}
.sb-account-chevron{stroke:#dbb35d}
.sb-account-menu{isolation:isolate;border-color:rgba(219,179,93,.3);background:linear-gradient(155deg,#2d303b 0%,#22242d 72%);box-shadow:0 22px 60px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.035)}
.sb-account-menu::before{content:"";position:absolute;z-index:-1;top:0;left:12px;right:12px;height:2px;border-radius:0 0 3px 3px;background:linear-gradient(90deg,#df583d 0%,#dbb35d 52%,#687be0 100%)}
.sb-account-summary strong{color:#fffaf1}
.sb-account-summary p,.sb-account-feedback{color:#c2b6a7}
.sb-account-actions{border-top-color:rgba(219,179,93,.18)}
.sb-account-action{color:#eee3d4}
.sb-account-action:hover{border-color:rgba(223,88,61,.34);background:rgba(223,88,61,.12);color:#fffaf1}
.sb-account-action:focus-visible{outline:2px solid #687be0;outline-offset:1px}
.sb-account-action span:last-child{color:#dbb35d}
.menu-toggle{border-color:rgba(255,250,241,.16);background:#252731;color:#f4ecdf}
.menu-toggle:hover,.menu-toggle[aria-expanded="true"]{border-color:rgba(219,179,93,.62);background:#30323c;color:#fffaf1}
.home-mobile-nav{border-color:rgba(219,179,93,.3);background:linear-gradient(155deg,rgba(45,48,59,.99),rgba(31,33,43,.99));box-shadow:0 22px 55px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.035)}
.home-mobile-nav a{color:#e5dacc}
.home-mobile-nav a span:last-child{color:#dbb35d}
.home-mobile-nav a:hover,.home-mobile-nav a:focus-visible{background:rgba(223,88,61,.12);color:#fffaf1;outline-color:#687be0}


/* Final release polish: balanced account badge and menu toggle spacing. */
.home-header-actions { gap: 12px; }
.home-header-actions .sb-account-trigger,
.home-header-actions .menu-toggle { box-sizing: border-box; }
.home-header-actions .sb-account-trigger { min-height: 44px; border-radius: 11px; }
.home-header-actions .sb-account-avatar { width: 32px; height: 32px; flex-basis: 32px; border-radius: 9px; }
.home-header-actions .menu-toggle { width: 44px; height: 44px; flex-basis: 44px; border-radius: 11px; }
@media(max-width:820px) {
  .home-header-actions { gap: 12px; }
}
@media(max-width:540px) {
  .home-header-actions { gap: 10px; }
  .home-header-actions .sb-account-trigger { width: 44px; height: 44px; min-height: 44px; padding: 5px; }
  .home-header-actions .sb-account-avatar { width: 32px; height: 32px; flex-basis: 32px; }
  .home-header-actions .menu-toggle { width: 44px; height: 44px; flex-basis: 44px; }
  .sb-account-menu { right: -2px; }
}


/* Final homepage navigation and hero polish. Keep the account badge and menu toggle visually balanced. */
.site-header { gap: 18px; }
.site-header .desktop-nav { margin-left: auto; margin-right: clamp(18px, 2.8vw, 36px); }
.home-header-actions { gap: 14px; }
.home-header-actions .sb-account,
.home-header-actions .menu-toggle { flex: 0 0 auto; }
.home-header-actions .sb-account-trigger { display: inline-flex; align-items: center; justify-content: center; }
/* The hamburger is a mobile-only control; desktop uses the visible inline links. */
.home-header-actions .menu-toggle { display: none; align-items: center; justify-content: center; }
.home-header-actions .sb-account-trigger { min-width: 44px; }
.home-header-actions .menu-toggle { margin: 0; }
.hero-actions { gap: 18px 24px; align-items: center; }
.hero-actions .text-cta { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; }
.hero-actions .primary-cta { display: inline-flex; align-items: center; justify-content: space-between; gap: 22px; min-height: 48px; }
.hero-actions .primary-cta span { margin-left: 0; flex: 0 0 auto; }
@media (max-width: 820px) {
  .site-header { gap: 14px; }
  .home-header-actions { gap: 12px; }
  .home-header-actions .menu-toggle { display: inline-flex; }
  .hero-actions { gap: 12px 20px; }
}
@media (max-width: 540px) {
  .site-header { gap: 12px; padding-inline: 16px; }
  .site-header .brand { min-width: 0; flex: 1 1 auto; overflow: hidden; }
  .site-header .brand > span:last-child { overflow: hidden; text-overflow: ellipsis; }
  .site-header .brand b { display: none; }
  .home-header-actions { flex: 0 0 auto; gap: 12px; }
  .home-header-actions .sb-account-trigger,
  .home-header-actions .menu-toggle { width: 42px; height: 42px; min-width: 42px; min-height: 42px; flex-basis: 42px; }
  .home-header-actions .sb-account-trigger { padding: 4px; }
  .home-header-actions .menu-toggle { padding: 0; }
  .sb-account-menu { right: -54px; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 9px; margin-top: 28px; }
  .hero-actions .primary-cta { min-height: 48px; }
  .hero-actions .text-cta { min-height: 38px; padding: 0 2px; }
}
@media (max-width: 360px) {
  .site-header { padding-inline: 12px; gap: 9px; }
  .home-header-actions { gap: 9px; }
  .home-header-actions .sb-account-trigger,
  .home-header-actions .menu-toggle { width: 40px; height: 40px; min-width: 40px; min-height: 40px; flex-basis: 40px; }
  .sb-account-menu { right: -50px; }
}