:root{--paper:#f1efea;--ink:#1c1a16;--muted:#5f594e;--accent:#c41e2f;--line:#d0cbc2;--yellow:#e8dcc4;--clay:#a31827}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.6 'Avenir Next',Avenir,'Segoe UI',sans-serif}a{color:inherit;text-underline-offset:5px}button{font:inherit;cursor:pointer}a,button{touch-action:manipulation}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--clay);outline-offset:5px}.wrap{max-width:1180px;margin:auto;padding:0 36px}nav{display:flex;justify-content:space-between;align-items:center;padding:27px 0;gap:24px}nav .links{display:flex;align-items:center;gap:29px;font-size:15px}nav a{text-decoration:none}.brand{font-size:28px;font-weight:750;letter-spacing:-1.3px;display:flex;align-items:center;gap:10px}.brand svg{width:32px;height:32px}.button{display:inline-flex;align-items:center;justify-content:center;gap:18px;background:var(--accent);color:white;padding:13px 23px;border-radius:8px;font-size:15px;font-weight:600;border:1px solid var(--accent);text-decoration:none}.button:hover{background:#a31827}.button.secondary{background:transparent;color:var(--ink)}.button.secondary:hover{background:#e8e5df}.hero{display:grid;grid-template-columns:1fr 1.04fr;gap:55px;align-items:center;padding:57px 0 66px}.eyebrow{font-size:14px;font-weight:650;margin:0 0 22px;letter-spacing:.035em}.eyebrow::before{content:'';display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--clay);margin-right:10px}h1,h2,h3,p{margin-top:0}h1,h2{font-family:'Newsreader',Georgia,serif;font-weight:400}h1{font-size:clamp(44px,5vw,67px);line-height:1.08;letter-spacing:-2.9px;margin-bottom:25px}h1 em{font-weight:400;color:var(--clay)}.intro{color:var(--muted);max-width:440px;font-size:18px;line-height:1.65;margin-bottom:28px}.actions{display:flex;gap:13px;flex-wrap:wrap}.small{font-size:13px;color:var(--muted)}.reassure{margin:17px 0 0}.workbench{position:relative;padding:20px 7px 26px}.workbook{background:#f7f5f1;border:1px solid #b5afa3;border-radius:12px;transform:rotate(1.3deg);overflow:hidden}.workbook-head{border-bottom:1px solid var(--line);padding:16px 21px;display:flex;justify-content:space-between;font-size:13px}.workbook-head strong{font-size:15px}.exercise{padding:26px 25px 24px}.exercise h2{font-size:33px;line-height:1.2;letter-spacing:-1px;margin-bottom:7px}.exercise>p{font-size:14px;color:var(--muted);margin-bottom:20px}.creature-stage{height:209px;display:flex;align-items:center;justify-content:center;background:#e8e5df;border-radius:80px 80px 12px 12px;position:relative;overflow:hidden}.creature{width:126px;height:134px;background:#4f6b3b;border:2px solid #1c1a16;border-radius:47% 47% 40% 40%;position:relative;transform:rotate(-7deg);transition:background .2s,transform .2s}.creature:before,.creature:after{content:'';position:absolute;width:22px;height:34px;top:-20px;background:inherit;border:2px solid #1c1a16;border-bottom:0;border-radius:80% 80% 0 0}.creature:before{left:14px;transform:rotate(-22deg)}.creature:after{right:14px;transform:rotate(22deg)}.eyes{display:flex;gap:17px;position:absolute;top:42px;left:28px}.eye{background:#f7f5f1;width:24px;height:29px;border-radius:50%;border:1px solid #1c1a16;position:relative}.eye:after{content:'';background:#1c1a16;width:8px;height:11px;border-radius:50%;position:absolute;top:10px;left:8px}.mouth{width:27px;height:14px;border:2px solid #1c1a16;border-top:0;position:absolute;top:85px;left:48px;border-radius:0 0 30px 30px}.foot{position:absolute;width:40px;height:16px;border-radius:50%;background:#1c1a16;bottom:-8px}.foot.left{left:-5px}.foot.right{right:-5px}.scribble{font:italic 20px 'Newsreader',Georgia,serif;position:absolute;right:16px;bottom:12px;transform:rotate(-8deg);color:#4e483f}.code-line{font:14px/1.6 ui-monospace,monospace;padding:15px 0 11px;margin:0;color:#4e483f}.palette{display:flex;gap:9px;align-items:center}.palette span{font-size:13px;margin-right:4px}.swatch{width:29px;height:29px;border:2px solid transparent;border-radius:50%;padding:0;background:var(--swatch)}.swatch[aria-pressed=true]{outline:1.5px solid var(--ink);outline-offset:3px}.swatch:hover{transform:scale(1.12)}.sticky{background:var(--yellow);position:absolute;bottom:0;right:-13px;padding:12px 19px;font:italic 18px/1.3 'Newsreader',Georgia,serif;transform:rotate(-5deg)}.trustline{border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:30px;padding:20px 0;color:var(--muted);font-size:14px}.trustline strong{color:var(--ink);font-weight:600}.section{padding:76px 0}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:35px;margin-bottom:37px}.section-heading h2{font-size:43px;line-height:1.14;letter-spacing:-1.4px;max-width:570px;margin:0}.section-heading p{margin:0;max-width:310px;color:var(--muted);font-size:16px}.tabs{display:flex;gap:6px;margin-bottom:30px}.tabs button{background:none;color:var(--muted);border:1px solid var(--line);border-radius:30px;padding:9px 20px;font-size:15px}.tabs button[aria-selected=true]{background:var(--accent);border-color:var(--accent);color:#fff}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:39px}.step{border-top:1px solid var(--line);padding-top:24px}.number{font:italic 26px 'Newsreader',Georgia,serif;color:var(--clay);margin-bottom:13px}.step h3{font-size:20px;line-height:1.4;margin-bottom:10px;letter-spacing:-.4px}.step p{color:var(--muted);font-size:16px;margin:0}.lesson{background:#e8e5df;border-radius:16px;display:grid;grid-template-columns:1fr 1fr;gap:55px;align-items:center;padding:45px;margin-bottom:75px}.lesson h2{font-size:39px;line-height:1.13;letter-spacing:-1px;margin-bottom:16px}.lesson p{font-size:16px;color:var(--muted)}.sheet{background:#f7f5f1;border:1px solid #b5afa3;padding:28px;transform:rotate(-2deg);position:relative}.sheet:before{content:'';position:absolute;width:74px;height:23px;background:#dcd8d0cc;top:-11px;left:calc(50% - 37px);transform:rotate(4deg)}.sheet-top{font-size:12px;letter-spacing:.06em;border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:20px}.sheet h3{font:28px/1.2 'Newsreader',Georgia,serif;margin-bottom:18px}.lesson-row{display:flex;justify-content:space-between;border-top:1px solid var(--line);font-size:14px;padding:11px 0;gap:15px}.lesson-row:last-child{padding-bottom:0}.lesson-row span{color:var(--muted)}.closing{display:flex;align-items:center;justify-content:space-between;gap:35px;border-top:1px solid var(--line);padding:43px 0 55px}.closing h2{font-size:35px;letter-spacing:-1px;margin-bottom:8px}.closing p{margin:0;color:var(--muted);font-size:15px}footer{border-top:1px solid var(--line);padding:23px 0;font-size:13px;color:var(--muted)}footer .wrap{display:flex;justify-content:space-between;gap:20px} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}@media(max-width:850px){.hero{gap:25px}h1{font-size:49px}.wrap{padding:0 24px}nav .links{gap:18px}nav .links>a:not(.button){display:none}.sticky{right:0}.lesson{gap:30px;padding:30px}.trustline{flex-wrap:wrap;gap:10px 25px}}@media(max-width:640px){.hero{grid-template-columns:1fr;padding:30px 0 45px;gap:30px}h1{font-size:53px;max-width:380px}.intro{font-size:17px}.workbench{max-width:440px;width:100%;margin:auto}.section{padding:50px 0}.section-heading{display:block}.section-heading h2{font-size:36px;margin-bottom:16px}.steps{grid-template-columns:1fr;gap:24px}.section-heading p{max-width:none}.step{padding-top:18px}.number{float:left;width:45px;margin-top:0}.step h3,.step p{margin-left:45px}.lesson{grid-template-columns:1fr;padding:27px 23px;margin-bottom:45px;gap:35px}.lesson h2{font-size:34px}.closing{display:block}.closing .button{margin-top:23px}footer .wrap{flex-wrap:wrap}nav{padding:23px 0}.brand{font-size:25px}nav .button{padding:9px 14px}.trustline{display:grid;gap:9px}.eyebrow{margin-bottom:17px}}

.brand-family{display:flex;align-items:center;gap:17px;flex-shrink:0}.luna-brand{display:flex}.luna-brand img{width:77px;height:auto;filter:brightness(0) saturate(100%);opacity:.85}.brand-divider{height:31px;width:1px;background:var(--line)}.brand svg{width:148px;height:auto}nav .links{gap:21px}.editor-section{border-top:1px solid var(--line)}.editor-layout{display:grid;grid-template-columns:.73fr 1.27fr;gap:40px;align-items:center}.editor-copy h3{font:32px/1.2 'Newsreader',Georgia,serif;letter-spacing:-.7px;margin-bottom:17px}.editor-copy p{color:var(--muted);font-size:16px}.editor-figure{margin:0;min-width:0}.editor-figure img{display:block;width:100%;border:1px solid #b5afa3;border-radius:10px}.editor-figure figcaption{margin-top:11px;font-size:13px;color:var(--muted)}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);column-gap:35px;margin-top:44px}.feature{padding:24px 0;border-top:1px solid var(--line)}.feature h3{font-size:19px;margin-bottom:9px;line-height:1.4}.feature p{font-size:15px;color:var(--muted);margin:0}.plan-label{font-size:12px;display:inline-block;vertical-align:middle;border:1px solid #b5afa3;border-radius:5px;padding:1px 6px;margin-left:5px;color:var(--accent);white-space:nowrap}.pricing-section{padding-top:0}.price-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}.price-card{border:1px solid #d0cbc2;border-radius:14px;padding:33px;display:flex;flex-direction:column;background:#f7f5f1}.price-card.pro{background:#e8e5df}.price-top{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:15px}.price-top h3{font:37px 'Newsreader',Georgia,serif;margin:0}.amount{font:40px 'Newsreader',Georgia,serif;letter-spacing:-1px;white-space:nowrap}.amount span{font:14px 'Avenir Next',Avenir,'Segoe UI',sans-serif;color:var(--muted);letter-spacing:0}.price-card>p{font-size:16px;color:var(--muted)}.price-card .eyebrow{color:var(--ink);font-size:13px;margin-bottom:15px}.benefits{list-style:none;padding:0;margin:8px 0 26px}.benefits li{position:relative;padding:11px 0 11px 24px;border-top:1px solid var(--line);font-size:16px}.benefits li:before{content:'✓';position:absolute;left:0;color:var(--accent)}.benefits small{display:block;font-size:14px;color:var(--muted);line-height:1.6;margin-top:2px}.price-card>.button{margin-top:auto;align-self:stretch}.price-more{margin:-8px 0 27px;font-size:15px}.price-more summary{cursor:pointer;text-decoration:underline;text-underline-offset:5px}.price-more .benefits{margin-top:16px;margin-bottom:0}.school-note{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 0;border-bottom:1px solid var(--line);font-size:16px}.school-note p{margin:0}.footer-links{display:flex;gap:18px;flex-wrap:wrap}
@media(max-width:1100px){nav{flex-wrap:wrap}nav .links{gap:18px}.brand svg{width:135px}.editor-layout{grid-template-columns:1fr 1.2fr;gap:26px}}
@media(max-width:850px){nav .links>a:not(.button){display:inline}.editor-layout{grid-template-columns:1fr}.editor-copy{max-width:600px}.feature-grid{grid-template-columns:1fr 1fr}.price-card{padding:25px}.school-note{align-items:start}}
@media(max-width:640px){nav{gap:20px}.brand-family{gap:14px}.brand svg{width:144px}.luna-brand img{width:72px}nav .links{width:100%;flex-wrap:wrap;gap:13px 20px;font-size:14px}nav .links>.button{margin-left:auto}.feature-grid{grid-template-columns:1fr;gap:0;margin-top:25px}.price-grid{grid-template-columns:1fr}.school-note{display:block}.school-note a{display:inline-block;margin-top:12px}.pricing-section{padding-top:0}.price-top h3{font-size:34px}.amount{font-size:37px}.editor-copy h3{font-size:29px}footer .wrap{display:block}footer .wrap>span{display:block;margin-bottom:15px}}

/* Syntax string green connects the playful experiment to the editor. */
#color-name{color:#4f6b3b}.plan-label{color:#4e483f}.benefits li:before{color:#4f6b3b}

.hero{grid-template-columns:minmax(0,.85fr) minmax(0,1.2fr);gap:38px}.hero h1{font-size:clamp(44px,4.3vw,59px)}.hero-editor{margin:0;min-width:0;border:1px solid var(--line);border-radius:12px;background:#e8e5df;overflow:hidden}.hero-editor-heading{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:15px 18px;font-size:13px}.hero-editor-heading span{font-weight:650}.hero-editor-heading a{text-decoration:none}.hero-editor-image{display:block;line-height:0;cursor:zoom-in}.hero-editor-image img{width:100%;height:auto;display:block}.hero-editor figcaption{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 15px;padding:14px 18px;font-size:12px;color:var(--muted)}
@media(max-width:950px){.hero{grid-template-columns:1fr;gap:30px}.hero>div:first-child{max-width:660px}.hero h1{font-size:56px}.hero-editor{width:100%}.hero .intro{max-width:530px}}
@media(max-width:640px){.hero h1{font-size:49px}.hero-editor-heading{padding:12px;font-size:12px}.hero-editor figcaption{padding:12px}}

/* Newsreader headings with the approved Avenir Next sans-serif. */
h1,h2{font-optical-sizing:auto}.icon{display:inline-block;width:19px;height:19px;flex:0 0 auto;vertical-align:middle}.button{gap:10px}.button-arrow{width:16px;height:16px;margin-left:4px}.feature-icon{width:29px;height:29px;color:var(--accent);margin-bottom:17px}.step-icon{float:right;width:24px;height:24px;color:var(--muted)}.tabs button{display:inline-flex;align-items:center;gap:9px}.price-top h3{display:flex;gap:12px;align-items:center}.price-top h3 .icon{width:25px;height:25px;color:var(--accent)}.benefits li:before{content:none}.benefit-icon{position:absolute;left:0;top:15px;width:16px;height:16px;color:#4f6b3b}.school-note strong .icon{margin-right:9px}.hero h1{line-height:1.08;letter-spacing:-1.7px}.section-heading h2{letter-spacing:-.9px}.hero-editor-heading,.hero-editor figcaption{font-family:'Avenir Next',Avenir,'Segoe UI',sans-serif}
@media(max-width:640px){.button{padding:12px 16px}.button-arrow{display:none}}
.hero .button{padding:13px 16px;font-size:14px}
/* Align the visible icon artwork, compensating for the SVG inset. */
.feature-icon{display:block;margin-left:-3.6px;margin-bottom:17px}
.feature h3{font-family:'Newsreader',Georgia,serif;font-size:26px;font-weight:500;line-height:1.2;letter-spacing:-.25px;margin-bottom:12px}
.feature .plan-label{font-family:'Avenir Next',Avenir,'Segoe UI',sans-serif;font-weight:500;letter-spacing:0}
/* Restore the original sans-serif with a lighter, quieter hierarchy. */
body{font-weight:400}
.button,.tabs button,.hero-editor-heading span,.eyebrow,.benefits strong,.trustline strong,.lesson-row strong,.school-note strong{font-weight:500}
.feature .plan-label{font-weight:400}

.feature-bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:20px}.feature-bento>.feature{border:1px solid var(--line);border-radius:13px;padding:29px;background:#f7f5f1;min-width:0}.feature-bento .feature-icon{margin-bottom:18px}.bento-snapshots{grid-column:span 7}.feature-bento>.bento-cloud{grid-column:span 5;background:#e8e5df}.bento-preview,.bento-directions,.bento-errors{grid-column:span 4}.feature-bento>.bento-small{grid-column:1/-1;background:transparent}.feature-bento .feature-kicker{font-size:13px;color:var(--crimson,var(--accent));font-weight:500;margin-bottom:15px}.bento-snapshots h3,.bento-cloud h3{font-size:36px;line-height:1.12;margin-bottom:17px}.feature-bento .feature p{font-size:16px}.snapshot-flow{list-style:none;display:flex;gap:17px;margin:29px 0;padding:0}.snapshot-flow li{flex:1;font-size:14px;line-height:1.4;border-top:1px solid var(--line);padding-top:12px}.snapshot-flow span{display:block;font-size:12px;color:var(--accent);margin-bottom:5px}.snapshot-example{display:flex;justify-content:space-between;gap:15px;align-items:center;padding:16px 18px;background:#e8e5df;border-radius:8px;text-decoration:none}.snapshot-example:hover{background:#dcd8d0}.snapshot-example strong{font-weight:500;font-size:16px}.snapshot-example small{display:block;font-size:13px;color:var(--muted);margin-top:4px}.storage-note{border-top:1px solid #b5afa3;margin:27px 0 20px;padding-top:20px}.storage-note strong{font-size:15px;font-weight:500}.feature-bento .storage-note p{font-size:14px;margin-top:5px}.feature-text-link{font-size:15px}.feature-bento p.feature-footnote{font-size:14px;border-top:1px solid var(--line);padding-top:13px;margin-top:17px}.small-features-heading{display:flex;justify-content:space-between;gap:30px;margin-bottom:29px;align-items:baseline}.small-features-heading h3{margin:0}.feature-bento .small-features-heading p{font-size:15px;max-width:345px}.small-features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:29px 35px}.small-features .feature-icon{width:22px;height:22px;margin-bottom:12px;margin-left:-2.75px}.small-features h4{font-family:'Avenir Next',Avenir,'Segoe UI',sans-serif;font-size:16px;font-weight:500;margin:0 0 7px}.feature-bento .small-features p{font-size:14px}.small-features .plan-label{font-size:12px}
@media(max-width:850px){.bento-snapshots,.feature-bento>.bento-cloud{grid-column:span 6}.bento-preview,.bento-directions,.bento-errors{grid-column:1/-1}.small-features{grid-template-columns:repeat(2,minmax(0,1fr))}.small-features-heading{display:block}.small-features-heading h3{margin-bottom:10px}.snapshot-flow{gap:10px}}
@media(max-width:640px){.feature-bento{grid-template-columns:1fr;gap:16px}.feature-bento>.feature{grid-column:1;padding:24px}.bento-snapshots h3,.bento-cloud h3{font-size:32px}.small-features{grid-template-columns:1fr;gap:22px}.small-features>div{border-top:1px solid var(--line);padding-top:20px}.snapshot-flow li{font-size:13px}}
/* Keep the pricing eyebrow separate from the heading below it. */
.pricing-section .section-heading .eyebrow{margin:0 0 18px;line-height:1.5}
.pricing-section .section-heading h2{margin:0;line-height:1.12}

/* A single clear editor action in the navigation. */
nav .links .nav-editor-button{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:44px;padding:10px 17px;background:var(--accent);color:#fff;border:1px solid var(--accent);border-radius:8px;font-size:14px;font-weight:500;line-height:1.4;text-decoration:none;white-space:nowrap}
nav .links .nav-editor-button .icon{width:17px;height:17px}
nav .links .nav-editor-button:hover{background:#a31827;border-color:#a31827}
@media(max-width:640px){nav .links .nav-editor-button{margin-left:auto}}