:root{--paper:#f5f3ec;--ink:#20231f;--muted:#73766f;--line:#deddd4;--green:#315947;--lime:#d8f36c;--white:#fffef9;--pale:#e8ede5;--peach:#f0e4d5;--lavender:#e9e4f0;--shadow:0 20px 60px rgba(41,48,40,.08);color-scheme:light;font-family:Arial,Helvetica,sans-serif}
:root[data-theme="dark"]{--paper:#171b19;--ink:#f1f2e9;--muted:#a3aaa1;--line:#39413b;--green:#a6d1b3;--lime:#d8f36c;--white:#222925;--pale:#252e28;--peach:#352c26;--lavender:#302a37;--shadow:0 20px 60px rgba(0,0,0,.2);color-scheme:dark}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased;transition:background .25s,color .25s}a{color:inherit;text-decoration:none}button,input{font:inherit}button{color:inherit}::selection{background:var(--lime);color:#20231f}.wrap{width:min(1160px,calc(100% - 72px));margin-inline:auto}h1,h2,h3,p{margin-top:0}.label,.eyebrow,.footer-label,.collection-index,.section-kicker>span,.lesson-number,.lesson-category,.mistake-year,.values-grid article>span,.art-window>span,.art-note,.ticker{font-family:'Courier New',monospace;letter-spacing:.08em;text-transform:uppercase}
.topbar{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--paper) 91%,transparent);backdrop-filter:blur(16px);border-bottom:1px solid color-mix(in srgb,var(--ink) 8%,transparent)}.nav{min-height:82px;display:flex;align-items:center;justify-content:space-between}.brand{display:inline-flex;align-items:center;gap:12px}.brand-mark{display:grid;place-items:center;width:49px;height:49px;border-radius:16px;background:var(--green);color:var(--paper);font:bold 31px/1 Arial,sans-serif;letter-spacing:-.1em}.brand-type{font:bold 16px/1 Arial,sans-serif;letter-spacing:-.055em}.navlinks{display:flex;gap:25px;align-items:center;color:var(--muted);font-size:13px}.navlinks>a:not(.nav-cta){transition:color .2s}.navlinks>a:hover,.navlinks>a.current{color:var(--ink)}.nav-cta{border:1px solid var(--line);padding:10px 14px;border-radius:999px;color:var(--ink)!important}.nav-cta:hover{background:var(--green);border-color:var(--green);color:var(--paper)!important}.theme-toggle{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border:0;border-radius:999px;background:var(--ink);color:var(--paper);font-size:12px;font-weight:bold;cursor:pointer;transition:transform .2s,background .2s}.theme-toggle:hover{transform:translateY(-2px);background:var(--green)}.menu-toggle{display:none;border:1px solid var(--line);background:var(--white);border-radius:10px;font-size:21px;width:42px;height:42px;cursor:pointer}
.hero{display:grid;grid-template-columns:1.03fr .97fr;gap:55px;align-items:center;padding-top:85px;padding-bottom:84px;min-height:640px}.eyebrow,.label{font-size:10px;color:var(--muted)}.eyebrow{display:flex;align-items:center;gap:10px;margin-bottom:22px}.eyebrow-star{color:var(--green);font-size:17px}.hero h1,.page-intro h1{font:bold clamp(52px,7vw,88px)/.98 Arial,Helvetica,sans-serif;letter-spacing:-.078em;margin:0 0 23px}.hero h1 em,.page-intro h1 em{font:italic 400 1em Georgia,serif;color:var(--green);letter-spacing:-.075em}.hero-copy>p,.page-intro>p{font-size:16px;line-height:1.8;color:var(--muted);max-width:550px;margin:0 0 27px}.hero-actions{display:flex;gap:11px;flex-wrap:wrap}.button{display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:14px 19px;border-radius:999px;background:var(--green);color:#fff;font-size:13px;font-weight:bold;transition:transform .2s,background .2s}.button:hover{transform:translateY(-2px);background:color-mix(in srgb,var(--green) 82%,var(--ink))}.button.secondary{background:transparent;border:1px solid var(--line);color:var(--ink)}.button.secondary:hover{background:var(--white)}.hero-caption{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:11px;margin-top:32px}.status-dot{width:8px;height:8px;border-radius:50%;background:#7ca66d;box-shadow:0 0 0 4px color-mix(in srgb,#7ca66d 18%,transparent)}.hero-art{position:relative;width:min(100%,490px);justify-self:end;aspect-ratio:1.04}.art-sun{position:absolute;width:105px;height:105px;right:7%;top:1%;border-radius:50%;background:var(--lime)}.art-window{position:absolute;inset:8% 10% 7% 3%;overflow:hidden;border-radius:48% 48% 19px 19px;background:linear-gradient(143deg,#e1e8dc 0 39%,#d9a583 39% 57%,#315947 57% 100%);box-shadow:var(--shadow)}.art-window>span{position:absolute;z-index:3;top:20px;left:23px;color:#334d40;font-size:9px}.art-person{position:absolute;bottom:-9%;left:29%;width:45%;height:78%;border-radius:49% 49% 4% 4%;background:linear-gradient(95deg,#345643 0 26%,#b97657 26% 35%,#dea585 35% 75%,#a76c4f 75%);transform:rotate(-4deg)}.art-person i{position:absolute;top:8%;left:17%;width:66%;height:44%;border-radius:48% 48% 42% 42%;background:linear-gradient(90deg,#bd795b,#e6b191 53%,#b97355);box-shadow:0 -18px 0 7px #302820}.art-person b{position:absolute;width:28%;height:30%;top:29%;right:6%;background:#20231f;border-radius:50%;clip-path:polygon(0 0,100% 0,50% 100%)}.art-scribble{position:absolute;z-index:4;color:var(--paper);font:italic 18px Georgia,serif}.scribble-one{right:8%;top:46%;transform:rotate(9deg)}.scribble-two{left:12%;top:61%;font-size:28px;color:var(--lime)}.art-note{position:absolute;z-index:5;right:0;bottom:2%;padding:13px 16px;background:var(--white);border:1px solid var(--line);box-shadow:var(--shadow);font-size:9px;color:var(--muted);transform:rotate(4deg)}.art-note strong{display:block;color:var(--ink);font-size:11px;margin-top:4px}
.ticker{display:flex;align-items:center;justify-content:space-between;gap:14px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:17px 0;color:var(--muted);font-size:9px}.ticker i{font-style:normal;color:var(--green);font-size:15px}.section{padding-top:106px;padding-bottom:106px}.section-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:37px}.section-head h2{font:bold clamp(35px,5vw,58px)/1.03 Arial,sans-serif;letter-spacing:-.07em;margin:12px 0 0}.section-note{font-size:13px;line-height:1.7;color:var(--muted);max-width:245px;margin:0}.collection-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.collection-card{position:relative;min-height:340px;padding:24px;border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:transform .25s,box-shadow .25s}.collection-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}.collection-learn{background:var(--pale)}.collection-tools{background:var(--peach)}.collection-about{background:var(--lavender)}.collection-index{font-size:9px;color:var(--muted)}.collection-doodle{position:absolute;right:21px;top:27px;font-size:64px;line-height:1;color:color-mix(in srgb,var(--green) 28%,transparent);font-family:Georgia,serif}.collection-card h3{position:absolute;left:24px;right:18px;bottom:94px;font:bold 24px/1.1 Arial,sans-serif;letter-spacing:-.06em}.collection-card p{position:absolute;left:24px;right:24px;bottom:45px;color:var(--muted);font-size:12px;line-height:1.65;max-width:260px;margin:0}.collection-link{position:absolute;bottom:19px;left:24px;color:var(--green);font-size:11px;font-weight:bold}.quote-band{background:var(--green);color:#f5f3ec;padding:76px 0}.quote-inner{max-width:810px}.quote-band .label{color:#c2d4c6}.quote-inner blockquote{font:500 clamp(32px,5vw,56px)/1.12 Arial,sans-serif;letter-spacing:-.06em;margin:20px 0}.quote-inner blockquote em{font:italic 400 1em Georgia,serif;color:var(--lime)}.quote-byline{font-size:11px;color:#c2d4c6}.contact-strip{padding-top:75px;padding-bottom:75px;display:flex;align-items:center;justify-content:space-between;gap:20px}.contact-strip h2{font:bold clamp(28px,4vw,43px) Arial,sans-serif;letter-spacing:-.06em;margin:11px 0 0}
.page-intro{padding-top:93px;padding-bottom:63px}.page-intro h1{font-size:clamp(55px,7vw,83px);margin-bottom:20px}.page-intro>p{max-width:630px;margin-bottom:23px}.hero-stamp{display:inline-block;background:var(--lime);color:#263020;padding:9px 13px;border-radius:999px;font:9px 'Courier New',monospace;transform:rotate(-2deg)}.page-section{padding-top:20px;padding-bottom:96px}.section-kicker{display:grid;grid-template-columns:36px 1fr auto;align-items:baseline;gap:16px;border-bottom:1px solid var(--line);padding-bottom:18px;margin-bottom:12px}.section-kicker>span{font-size:10px;color:var(--green)}.section-kicker h2{font:bold clamp(23px,3vw,34px) Arial,sans-serif;letter-spacing:-.06em;margin:0}.section-kicker p{font-size:12px;color:var(--muted);margin:0}.lesson-row{display:grid;grid-template-columns:36px 1fr 36px;gap:16px;align-items:start;padding:27px 0;border-bottom:1px solid var(--line)}.lesson-number{font-size:10px;color:var(--muted);padding-top:8px}.lesson-category{font-size:9px;color:var(--green)}.lesson-main h3{font:bold clamp(21px,3vw,30px) Arial,sans-serif;letter-spacing:-.055em;margin:9px 0}.lesson-main p{max-width:710px;color:var(--muted);font-size:14px;line-height:1.75;margin:0}.lesson-star{color:var(--green);font-size:22px;text-align:right}.mistakes-section{background:var(--pale)}.mistakes-section .page-section{padding-top:72px;padding-bottom:80px}.mistake-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:26px}.mistake-card{padding:22px;background:var(--white);border:1px solid var(--line);border-radius:13px;min-height:210px}.mistake-year{font-size:9px;color:var(--muted)}.mistake-card h3{font:bold 20px/1.2 Arial,sans-serif;letter-spacing:-.045em;margin:32px 0 10px}.mistake-card p{font-size:12px;line-height:1.7;color:var(--muted);margin:0}.small-cta{padding-top:76px;padding-bottom:80px;display:flex;align-items:center;justify-content:space-between;gap:20px}.small-cta h2{font:bold clamp(30px,4vw,46px)/1.08 Arial,sans-serif;letter-spacing:-.065em;margin:13px 0 0}.small-cta h2 em{font:italic 400 1em Georgia,serif;color:var(--green)}
.resource-section{padding-bottom:90px}.resource-tools{display:flex;justify-content:space-between;gap:20px;align-items:center;border-top:1px solid var(--line);padding:22px 0;margin-bottom:18px}.filters{display:flex;flex-wrap:wrap;gap:8px}.filter{border:1px solid var(--line);background:transparent;color:var(--muted);padding:9px 14px;border-radius:999px;font-size:11px;cursor:pointer;transition:.2s}.filter:hover,.filter.selected{background:var(--ink);border-color:var(--ink);color:var(--paper)}.search-wrap{display:flex;align-items:center;gap:8px;width:min(265px,100%);border:1px solid var(--line);background:var(--white);color:var(--muted);padding:0 13px;border-radius:999px}.search-wrap:focus-within{border-color:var(--green)}.search{width:100%;border:0;background:transparent;color:var(--ink);padding:11px 0;font-size:12px;outline:none}.count{font:9px 'Courier New',monospace;color:var(--muted);margin-bottom:15px}.tool-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.tool-card{background:var(--white);border:1px solid var(--line);border-radius:15px;padding:23px;display:flex;flex-direction:column;min-height:280px;transition:transform .2s,border-color .2s,box-shadow .2s}.tool-card:hover{transform:translateY(-3px);border-color:var(--green);box-shadow:var(--shadow)}.card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:15px;margin-bottom:18px}.tool-mark{width:42px;height:42px;flex:none;border-radius:13px;display:grid;place-items:center;font:bold 17px Arial,sans-serif;letter-spacing:-.06em}.tool-mark.mint{background:#dce9de;color:#2b664e}.tool-mark.peach{background:#f4e3c5;color:#875f2f}.tool-mark.lilac{background:#e9def1;color:#684889}.tool-mark.sage{background:#dfe9df;color:#3c7355}.tool-mark.butter{background:#f5e5b9;color:#886421}.tool-mark.ink{background:#232323;color:#fff}.tool-mark.rose{background:#f0dde0;color:#9c5365}.category{font:9px 'Courier New',monospace;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);border:1px solid var(--line);padding:7px 9px;border-radius:999px}.tool-card h2{font:bold 22px Arial,sans-serif;letter-spacing:-.055em;margin:0 0 8px}.desc{font-size:12px;line-height:1.7;color:var(--muted);margin:0 0 16px}.usage{border-left:2px solid var(--lime);padding:2px 0 2px 12px;font-size:12px;line-height:1.65;color:var(--ink);margin-bottom:19px}.usage b{font:9px 'Courier New',monospace;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:4px}.card-bottom{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:auto;padding-top:14px;border-top:1px solid var(--line)}.access{font-size:9px;color:var(--muted)}.official{font-size:11px;font-weight:bold;color:var(--green);display:inline-flex;gap:7px;align-items:center;white-space:nowrap}.official:hover{gap:11px}.empty-state{grid-column:1/-1;padding:36px;border:1px dashed var(--line);border-radius:12px;color:var(--muted);text-align:center;font-size:14px}.note{background:var(--green);color:#f5f4ee;padding:56px 0}.note-inner{display:grid;grid-template-columns:.7fr 1.3fr;gap:70px;align-items:start}.note .label{color:#c2d4c6}.note h2{font:bold clamp(31px,4vw,45px)/1.08 Arial,sans-serif;letter-spacing:-.06em;margin:11px 0}.note-copy{font-size:13px;line-height:1.85;color:#d0ddd4}.note-copy strong{color:white}.back{display:inline-block;margin-top:10px;border-bottom:1px solid #9ab3a3;padding-bottom:5px;color:var(--lime);font-size:12px}
.about-page{display:grid;grid-template-columns:.82fr 1.18fr;gap:90px;align-items:center;padding-top:5px;padding-bottom:105px}.about-visual{position:relative;display:grid;place-items:center;min-height:380px;border-radius:18px;background:var(--pale);overflow:hidden}.about-visual:before,.about-visual:after{content:'';position:absolute;border:1px solid color-mix(in srgb,var(--green) 24%,transparent);border-radius:50%;width:290px;height:290px}.about-visual:after{width:220px;height:220px}.about-circle{position:relative;z-index:1;display:grid;place-items:center;width:155px;height:155px;border-radius:50%;background:var(--green);color:var(--paper);font:bold 76px Arial,sans-serif;letter-spacing:-.1em}.about-circle span{position:absolute;right:3px;top:8px;color:var(--lime);font:27px Georgia}.about-visual>p{position:absolute;bottom:18px;left:20px;font:9px/1.7 'Courier New',monospace;letter-spacing:.08em;color:var(--muted);margin:0}.about-text h2{font:bold clamp(30px,4vw,46px)/1.06 Arial,sans-serif;letter-spacing:-.07em;margin:13px 0 20px}.about-text>p{font-size:14px;line-height:1.85;color:var(--muted);margin-bottom:16px}.text-link{display:inline-flex;align-items:center;gap:9px;border-bottom:1px solid var(--line);padding-bottom:6px;color:var(--green);font-size:12px;font-weight:bold;margin-top:5px}.text-link:hover{gap:14px}.about-values{background:var(--pale);padding:55px 0}.values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}.values-grid article>span{font-size:9px;color:var(--green)}.values-grid h3{font:bold 19px Arial,sans-serif;letter-spacing:-.04em;margin:16px 0 6px}.values-grid p{font-size:12px;line-height:1.7;color:var(--muted);margin:0;max-width:275px}
.footer{border-top:1px solid var(--line);padding:40px 0 20px}.footer-top{display:flex;justify-content:space-between;gap:30px;padding-bottom:35px}.footer-brand .brand-mark{width:43px;height:43px;font-size:28px;border-radius:14px}.footer-brand .brand-type{font-size:15px}.footer-top>div:first-child>p{color:var(--muted);font-size:13px;margin:14px 0 0}.footer-links{display:flex;gap:68px}.footer-links>div{display:flex;flex-direction:column;gap:12px;font-size:14px;color:var(--muted)}.footer-label{font-size:11px;color:var(--ink);margin-bottom:5px}.footer-links a:hover,.footer-bottom a:hover{color:var(--green)}.footer-bottom{display:flex;justify-content:space-between;gap:15px;border-top:1px solid var(--line);padding-top:16px;color:var(--muted);font-size:11px}
@media(max-width:900px){.wrap{width:min(100% - 48px,1160px)}.navlinks{gap:16px}.hero{gap:32px;min-height:560px}.hero h1{font-size:clamp(49px,7.5vw,70px)}.collection-card{min-height:320px;padding:19px}.collection-card h3{left:19px;bottom:100px;font-size:21px}.collection-card p{left:19px;right:15px;bottom:49px;font-size:11px}.collection-link{left:19px}.about-page{gap:45px}.section-kicker{grid-template-columns:28px 1fr}.section-kicker p{grid-column:2}}
@media(max-width:680px){html{scroll-padding-top:72px}.wrap{width:calc(100% - 40px)}.nav{min-height:68px}.brand-mark{width:44px;height:44px;font-size:28px;border-radius:14px}.brand-type{font-size:15px}.menu-toggle{display:grid;place-items:center}.navlinks{display:none;position:absolute;top:67px;left:0;right:0;padding:10px 20px 20px;background:var(--paper);border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;gap:0}.navlinks.open{display:flex}.navlinks>a:not(.nav-cta){padding:13px 0}.navlinks .nav-cta{text-align:center;margin-top:8px}.navlinks .theme-toggle{justify-content:center;margin-top:12px}.hero{grid-template-columns:1fr;padding-top:56px;padding-bottom:45px;gap:38px;min-height:0}.hero h1,.page-intro h1{font-size:clamp(49px,13vw,72px)}.hero-copy>p,.page-intro>p{font-size:14px;line-height:1.75}.hero-art{justify-self:center;width:min(92%,400px)}.hero-caption{margin-top:23px}.ticker{justify-content:center;flex-wrap:wrap;row-gap:9px;font-size:8px}.ticker span:last-child,.ticker i:last-of-type{display:none}.section{padding-top:72px;padding-bottom:72px}.section-head{display:block;margin-bottom:25px}.section-head h2{font-size:39px}.section-note{margin-top:14px}.collection-grid{grid-template-columns:1fr;gap:11px}.collection-card{min-height:265px;padding:22px}.collection-card h3{left:22px;bottom:88px}.collection-card p{left:22px;bottom:38px;max-width:300px}.collection-link{left:22px;bottom:17px}.collection-doodle{font-size:56px}.quote-band{padding:55px 0}.quote-inner blockquote{font-size:35px}.contact-strip{padding-top:55px;padding-bottom:55px;display:block}.contact-strip h2{font-size:30px;margin-bottom:20px}.page-intro{padding-top:59px;padding-bottom:43px}.page-intro h1{margin-bottom:17px}.page-section{padding-top:15px;padding-bottom:66px}.section-kicker{gap:10px;padding-bottom:15px}.section-kicker h2{font-size:23px}.section-kicker p{font-size:11px;line-height:1.5}.lesson-row{grid-template-columns:26px 1fr 24px;gap:10px;padding:22px 0}.lesson-main h3{font-size:22px}.lesson-main p{font-size:12px}.mistakes-section .page-section{padding-top:50px;padding-bottom:55px}.mistake-grid{grid-template-columns:1fr;gap:10px}.mistake-card{min-height:0;padding:19px}.mistake-card h3{margin-top:20px}.small-cta{padding-top:55px;padding-bottom:58px;display:block}.small-cta h2{font-size:35px;margin-bottom:20px}.resource-tools{align-items:stretch;flex-direction:column}.search-wrap{width:100%}.filters{gap:6px}.filter{padding:8px 11px;font-size:10px}.resource-section{padding-bottom:58px}.tool-grid{grid-template-columns:1fr}.tool-card{min-height:0;padding:20px}.note{padding:43px 0}.note-inner{grid-template-columns:1fr;gap:10px}.about-page{grid-template-columns:1fr;gap:30px;padding-bottom:65px}.about-visual{min-height:280px}.about-visual:before{width:240px;height:240px}.about-visual:after{width:180px;height:180px}.about-circle{width:130px;height:130px;font-size:66px}.about-values{padding:42px 0}.values-grid{grid-template-columns:1fr;gap:25px}.values-grid h3{margin:10px 0 5px}.footer{padding-top:30px}.footer-top{display:block;padding-bottom:24px}.footer-links{margin-top:30px;gap:25px;justify-content:space-between}.footer-links>div{gap:11px;font-size:13px}.footer-label{font-size:10px}.footer-bottom{font-size:10px;align-items:flex-start}}
@media(max-width:380px){.wrap{width:calc(100% - 32px)}.hero h1,.page-intro h1{font-size:47px}.hero-actions .button{font-size:11px;padding:12px 13px}.footer-links{gap:14px}.footer-links>div{font-size:10px}.card-bottom{align-items:flex-start;flex-direction:column}.official{align-self:flex-end}}
:where([hidden]){display:none!important}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}
:root[data-theme="dark"] .quote-band,:root[data-theme="dark"] .note{background:#315947;color:#f5f3ec}
:root[data-theme="dark"] .button:not(.secondary){color:#17221a}
:root[data-theme="dark"] .next-page{color:#17221a}

/* Center the monogram on its tile; keep the punctuation as a small accent. */
.brand-mark{position:relative;display:block;text-align:center;line-height:49px;letter-spacing:-.06em}
.footer-brand .brand-mark{line-height:43px}
@media(max-width:680px){.brand-mark{line-height:44px}}

/* Eight-page, swipeable build journal. */
.book-intro{padding-top:70px;padding-bottom:34px}
.book-intro h1{font:bold clamp(48px,7vw,78px)/.98 Arial,sans-serif;letter-spacing:-.075em;margin:12px 0 17px}
.book-intro h1 em{font:italic 400 1em Georgia,serif;color:var(--green)}
.book-intro>p{max-width:610px;color:var(--muted);font-size:15px;line-height:1.7;margin:0 0 19px}
.book-section{padding-bottom:54px}
.book-toolbar{max-width:1000px;margin:0 auto 12px;display:flex;align-items:center;justify-content:space-between;color:var(--muted)}
.book-series{font:10px 'Courier New',monospace;letter-spacing:.1em}
.sound-toggle{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--muted);padding:8px 12px;font-size:11px;cursor:pointer}
.sound-toggle[aria-pressed="false"]{opacity:.68}
.book-stage{position:relative;isolation:isolate;width:min(100%,1000px);margin:0 auto;aspect-ratio:1.68;perspective:1800px;outline:none;touch-action:pan-y}
.book-stage:focus-visible{outline:2px solid var(--green);outline-offset:6px;border-radius:14px}
.book-pages-edge{position:absolute;inset:8px -8px -8px 8px;border-radius:7px 14px 14px 7px;background:repeating-linear-gradient(0deg,#d8d3c7 0 2px,#f3f0e8 2px 4px);box-shadow:0 20px 50px rgba(30,38,31,.15)}
.book-page{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;overflow:hidden;border-radius:7px 13px 13px 7px;background:var(--white);box-shadow:0 13px 40px rgba(30,38,31,.1);transform-origin:left center;backface-visibility:hidden}
.book-page:after{content:"";position:absolute;z-index:2;left:50%;top:0;bottom:0;width:20px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,rgba(36,43,36,.08) 48%,rgba(255,255,255,.5) 55%,transparent);pointer-events:none}
.book-page.active{z-index:1}
.book-page.under-flip{z-index:2}
.page-words{position:relative;display:flex;flex-direction:column;justify-content:center;padding:clamp(28px,5vw,64px);padding-right:clamp(28px,4.5vw,56px);min-width:0}
.page-kicker{font:9px 'Courier New',monospace;letter-spacing:.11em;color:var(--green)}
.page-words h2{font:bold clamp(27px,4vw,48px)/1.03 Arial,sans-serif;letter-spacing:-.065em;margin:17px 0 16px}
.page-words h2 em{font:italic 400 1em Georgia,serif;color:var(--green)}
.page-words p{font-size:clamp(11px,1.25vw,14px);line-height:1.8;color:var(--muted);margin:0 0 12px;max-width:390px}
.margin-note{margin-top:13px;border-left:2px solid var(--lime);padding:8px 0 8px 12px;color:var(--green);font:italic 12px/1.6 Georgia,serif}
.page-visual{position:relative;display:grid;place-items:center;min-width:0;overflow:hidden;background:#e6ebdf}
.page-visual:before,.page-visual:after{content:"";position:absolute;border:1px solid rgba(49,89,71,.15);border-radius:50%;width:68%;aspect-ratio:1}
.page-visual:after{width:48%}
.visual-caption{position:absolute;left:24px;right:24px;bottom:17px;text-align:center;color:var(--muted);font:8px 'Courier New',monospace;letter-spacing:.08em}
.page-corner{position:absolute;right:19px;bottom:16px;z-index:3;color:var(--muted);font:9px 'Courier New',monospace}
.book-cover{background:#254b3b;color:#f8f4e8}
.book-cover:after{left:50%;background:linear-gradient(90deg,transparent,rgba(0,0,0,.17),rgba(255,255,255,.08),transparent)}
.cover-copy{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:center;padding:clamp(30px,5vw,66px);padding-right:clamp(26px,4vw,50px)}
.cover-copy .page-kicker{color:#d7ed9a}
.cover-copy h2{font:bold clamp(37px,5.2vw,68px)/.94 Arial,sans-serif;letter-spacing:-.075em;margin:22px 0 17px}
.cover-copy h2 em{font:italic 400 1em Georgia,serif;color:#d8f36c}
.cover-copy p{font-size:13px;line-height:1.7;color:#d7e4d9;max-width:290px}
.cover-author{margin-top:27px;font:9px 'Courier New',monospace;letter-spacing:.1em;color:#d7ed9a}
.cover-author i{font-style:normal;padding:0 6px}
.cover-visual{position:relative;display:grid;place-items:center;overflow:hidden;background:linear-gradient(145deg,#d9a583 0 40%,#315947 40% 100%)}
.cover-orbit{position:absolute;width:73%;aspect-ratio:1;border:1px solid rgba(245,243,236,.45);border-radius:50%}
.orbit-b{width:55%;border-style:dashed;transform:rotate(25deg)}
.cover-sun{position:absolute;right:10%;top:13%;width:24%;aspect-ratio:1;background:#d8f36c;border-radius:50%}
.cover-sheet{position:relative;z-index:1;width:53%;aspect-ratio:.72;padding:18px;background:#f8f5ec;border-radius:4px;box-shadow:14px 18px 0 rgba(21,41,32,.25);transform:rotate(-8deg);display:flex;flex-direction:column;justify-content:space-around}
.cover-sheet span{font:bold clamp(17px,2.5vw,29px) Arial,sans-serif;letter-spacing:-.06em;color:#315947;border-bottom:1px solid #d8d7cc;padding-bottom:8px}
.cover-sheet span:nth-child(2){color:#bd795b}.cover-sheet span:nth-child(3){color:#77739a}
.cover-ribbon{position:absolute;z-index:2;bottom:21%;right:5%;padding:9px 12px;background:#d8f36c;color:#263020;font:8px 'Courier New',monospace;transform:rotate(4deg)}
.cover-footnote{position:absolute;bottom:8%;right:8%;color:#edf1e6;font:italic 10px Georgia,serif}
.book-cover .page-corner{color:#d7ed9a}
.idea-visual{background:#f0e4d5}
.idea-sun{position:absolute;z-index:1;top:16%;left:39%;width:92px;height:92px;border-radius:50%;display:grid;place-items:center;background:#d8f36c;color:#263020;font:10px 'Courier New',monospace;letter-spacing:.08em}
.idea-loop{position:absolute;top:34%;left:49%;font-size:34px;color:var(--green);transform:rotate(20deg)}
.idea-note{position:absolute;z-index:1;width:110px;height:90px;display:grid;place-content:center;background:#fffdf5;box-shadow:5px 8px 0 rgba(32,35,31,.09);font:italic 16px/1.1 Georgia,serif;color:#315947;text-align:center;transform:rotate(-8deg)}
.note-one{left:12%;top:49%}.note-two{right:12%;top:51%;transform:rotate(7deg);background:#dce8d8}.note-three{left:36%;bottom:15%;transform:rotate(2deg);background:#e9def1}
.files-visual{background:#e7ebdf}
.file-window{position:relative;z-index:1;width:74%;padding:18px;background:var(--white);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);transform:rotate(-3deg)}
.window-dots{display:flex;gap:5px;padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:8px}.window-dots i,.browser-head i{width:7px;height:7px;border-radius:50%;background:#dba28a}.window-dots i:nth-child(2){background:#e3cc76}.window-dots i:nth-child(3){background:#86aa7a}
.file-row{display:flex;align-items:center;gap:10px;padding:8px 4px;border-bottom:1px solid color-mix(in srgb,var(--line) 60%,transparent);font:11px 'Courier New',monospace;color:var(--ink)}
.file-row b{color:var(--green);font-size:14px}.file-row small{margin-left:auto;color:var(--muted);font-size:7px}.file-css b{color:#a56552}.file-js b{color:#8171a2}
.html-visual{background:#e5e9f0}
.browser-card{position:relative;z-index:1;width:82%;border:1px solid #d2d3d0;border-radius:9px;overflow:hidden;background:#fffdf7;box-shadow:var(--shadow);transform:rotate(2deg)}
.browser-head{height:27px;display:flex;align-items:center;gap:4px;padding:0 10px;background:#f5f3ec;border-bottom:1px solid #e5e3da}.browser-head i{width:5px;height:5px}.browser-head i:nth-child(2){background:#e3cc76}.browser-head i:nth-child(3){background:#86aa7a}.browser-head span{margin:auto;font:7px 'Courier New',monospace;color:#82847d}
.browser-nav{height:33px;display:flex;align-items:center;gap:10px;padding:0 11px;border-bottom:1px solid #eee}.browser-nav b{margin-right:auto;color:#315947;font:bold 14px Arial}.browser-nav i{width:23px;height:3px;border-radius:4px;background:#d9dad3}
.browser-hero{padding:26px 20px 18px}.browser-hero small{display:block;font:6px 'Courier New',monospace;color:#81877c;letter-spacing:.08em}.browser-hero strong{display:block;margin-top:11px;font:bold clamp(19px,2.4vw,29px)/.98 Arial,sans-serif;letter-spacing:-.06em;color:#20231f}.browser-hero em{display:block;margin-top:9px;color:#777;font:italic 8px Georgia,serif}.browser-cta{width:48px;height:14px;margin-top:12px;border-radius:99px;background:#315947}.browser-cards{display:flex;gap:6px;padding:0 20px 18px}.browser-cards i{height:30px;flex:1;border-radius:3px;background:#e2e8df}.browser-cards i:nth-child(2){background:#f0e4d5}.browser-cards i:nth-child(3){background:#e9e4f0}
.palette-visual{background:#eee9dd}
.palette-card{position:relative;z-index:1;width:78%;padding:20px;background:var(--white);border-radius:6px;box-shadow:var(--shadow);transform:rotate(-2deg)}
.palette-card>span{font:8px 'Courier New',monospace;letter-spacing:.1em;color:var(--muted)}
.swatches{display:flex;gap:7px;margin:15px 0 18px}.swatches i{flex:1;font-style:normal}.swatches b{display:block;height:54px;border-radius:4px;background:#f5f3ec;border:1px solid #e2dfd2}.swatches i:nth-child(2) b{background:#315947}.swatches i:nth-child(3) b{background:#d8f36c}.swatches i:nth-child(4) b{background:#d9a583}.swatches small{display:block;margin-top:5px;font:6px 'Courier New',monospace;color:var(--muted)}
.type-sample{font:bold 34px Arial,sans-serif;letter-spacing:-.09em;color:#20231f}.type-sample span{display:block;margin-top:2px;font:italic 12px Georgia,serif;color:#315947;letter-spacing:0}.ruler{display:flex;gap:5px;align-items:end;height:23px;margin-top:13px}.ruler i{width:7px;border-radius:4px;background:#d8f36c}.ruler i:nth-child(1){height:8px}.ruler i:nth-child(2){height:12px}.ruler i:nth-child(3){height:17px}.ruler i:nth-child(4){height:20px}.ruler i:nth-child(5){height:12px}
.js-visual{background:#e6e1eb}
.code-card{position:relative;z-index:1;width:80%;background:#202522;color:#e9eee4;border-radius:8px;overflow:hidden;box-shadow:var(--shadow);transform:rotate(2deg)}
.code-title{display:flex;justify-content:space-between;padding:11px 14px;border-bottom:1px solid #444b46;color:#c4d0c6;font:8px 'Courier New',monospace}.code-title i{color:#d8f36c;font-style:normal}
.code-card code{display:block;padding:17px 14px 20px;font:clamp(8px,1vw,11px)/1.9 'Courier New',monospace;color:#eee}.code-card code b{color:#d9a583}.code-card code em{color:#a8d1b2;font-style:normal}.code-card code u{color:#d8f36c;text-decoration:none}.code-comment{color:#9ba69d}
.js-spark{position:absolute;right:9%;top:13%;color:#a28bc2;font-size:38px;transform:rotate(12deg)}
.devices-visual{background:#e5ebdf}
.device{position:absolute;z-index:1;bottom:25%;padding:8px;background:#202522;border-radius:7px;box-shadow:var(--shadow)}.device>span{position:absolute;bottom:-19px;left:0;right:0;text-align:center;color:var(--muted);font:7px 'Courier New',monospace}.device-screen{width:100%;height:100%;border-radius:3px;background:#fbfaf5;padding:7px}.device-screen>div{height:36%;border-radius:2px;background:linear-gradient(135deg,#dce8d8,#d9a583 58%,#315947 58%)}.device-screen i{display:block;width:76%;height:4px;margin-top:5px;border-radius:5px;background:#dedfd8}.device-screen i:last-child{width:50%}.desktop-device{left:10%;width:48%;height:122px}.tablet-device{left:46%;width:28%;height:145px;bottom:19%}.phone-device{right:8%;width:18%;height:156px;bottom:16%}.publish-stamp{position:absolute;right:9%;top:11%;z-index:2;padding:10px;background:#d8f36c;color:#283328;font:8px/1.6 'Courier New',monospace;text-align:center;transform:rotate(8deg)}
.book-ending .page-visual{background:#f0e4d5}.ending-sun{position:absolute;top:16%;right:15%;width:95px;height:95px;border-radius:50%;background:#d8f36c}.ending-book{position:relative;z-index:1;display:flex;align-items:center;gap:10px;padding:20px;background:#fffdf7;box-shadow:var(--shadow);transform:rotate(-7deg);font:10px 'Courier New',monospace;color:#315947}.ending-book b{font-size:24px;color:#d19a78}.ending-scribble{position:absolute;left:12%;bottom:20%;font:italic 23px/1.1 Georgia,serif;color:#315947;transform:rotate(-9deg)}
.book-finish-link{display:inline-flex;align-self:flex-start;margin-top:15px;padding:11px 14px;border-radius:999px;background:var(--green);color:#fff;font-size:11px;font-weight:bold}
.book-controls{display:flex;align-items:center;justify-content:space-between;width:min(100%,1000px);margin:21px auto 0}.page-button{display:inline-flex;align-items:center;gap:8px;min-width:112px;justify-content:center;padding:11px 14px;border:1px solid var(--line);border-radius:999px;background:var(--white);color:var(--ink);font-size:11px;cursor:pointer}.page-button:disabled{opacity:.42;cursor:not-allowed}.page-button:not(:disabled):hover{border-color:var(--green);color:var(--green)}.next-page{background:var(--green);border-color:var(--green);color:#fff}.next-page:hover{color:#fff!important;filter:brightness(1.08)}.book-progress{display:flex;align-items:center;gap:13px;width:min(330px,42%)}.progress-track{height:3px;flex:1;border-radius:4px;background:var(--line);overflow:hidden}.progress-track span{display:block;width:12.5%;height:100%;background:var(--green);transition:width .3s}.page-count{white-space:nowrap;color:var(--muted);font:10px 'Courier New',monospace}.page-count b{color:var(--ink)}.book-hint{text-align:center;color:var(--muted);font-size:10px;margin:15px 0 0}.book-hint span{color:var(--green);padding:0 4px}.book-after{display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid var(--line);padding-top:26px;padding-bottom:60px}.book-after h2{font:bold 19px/1.2 Arial,sans-serif;letter-spacing:-.04em;margin:8px 0}.book-after p{max-width:640px;margin:0;color:var(--muted);font-size:12px;line-height:1.7}.book-after .text-link{white-space:nowrap}
.book-page.turning-forward{animation:turn-forward .52s cubic-bezier(.2,.72,.25,1) forwards;z-index:3}.book-page.turning-back{animation:turn-back .52s cubic-bezier(.2,.72,.25,1) forwards;z-index:3}.book-page.arriving-forward{animation:arrive-forward .34s ease-out both}.book-page.arriving-back{animation:arrive-back .34s ease-out both}
@keyframes turn-forward{to{transform:rotateY(-88deg);filter:brightness(.88)}}@keyframes turn-back{to{transform:rotateY(88deg);filter:brightness(.88)}}@keyframes arrive-forward{from{transform:translateX(20px);opacity:.75}to{transform:translateX(0);opacity:1}}@keyframes arrive-back{from{transform:translateX(-20px);opacity:.75}to{transform:translateX(0);opacity:1}}
@media(max-width:760px){.book-intro{padding-top:54px;padding-bottom:26px}.book-stage{aspect-ratio:.83}.book-page{grid-template-columns:1fr;grid-template-rows:1.06fr .94fr}.book-page:after{display:none}.page-words{padding:26px 27px 22px;justify-content:center}.page-words h2{font-size:clamp(26px,7vw,36px);margin:12px 0}.page-words p{font-size:11px;line-height:1.58;margin-bottom:8px}.margin-note{display:none}.page-visual{min-height:0}.cover-copy{padding:28px}.cover-copy h2{font-size:clamp(39px,10vw,55px);margin:15px 0 11px}.cover-copy p{font-size:11px}.cover-author{margin-top:13px}.cover-sheet{width:45%;padding:12px}.cover-ribbon{font-size:7px}.visual-caption{font-size:7px;bottom:10px}.page-corner{bottom:9px;right:10px}.book-pages-edge{inset:5px -5px -5px 5px}.book-stage{perspective:1000px}.book-page.turning-forward{animation:turn-forward-mobile .45s ease-in forwards}.book-page.turning-back{animation:turn-back-mobile .45s ease-in forwards}@keyframes turn-forward-mobile{to{transform:rotateY(-65deg) translateX(-20px);opacity:.55}}@keyframes turn-back-mobile{to{transform:rotateY(65deg) translateX(20px);opacity:.55}}.book-controls{margin-top:17px}.page-button{min-width:94px;padding:10px 11px}.book-progress{width:34%;gap:8px}.book-hint{font-size:9px}.book-after{display:block;padding-top:22px;padding-bottom:45px}.book-after p{margin:9px 0}.book-after .text-link{font-size:11px}}
@media(max-width:420px){.book-intro h1{font-size:47px}.book-stage{aspect-ratio:.65}.page-words{padding:21px}.page-words p{font-size:10.5px}.book-cover .cover-copy{padding:22px}.cover-copy h2{font-size:38px}.book-controls{gap:6px}.page-button{min-width:0;padding:10px}.page-button span{display:none}.book-progress{flex:1}.book-hint{line-height:1.6}}
