.style-page{background:var(--paper)}
.guide-anchor-nav{
position:sticky;
top:72px;
z-index:40;
display:flex;
gap:7px;
align-items:center;
overflow-x:auto;
padding:10px clamp(18px,5vw,70px);
background:rgba(255,254,251,.97);
border-bottom:1px solid #ded6c8;
box-shadow:0 5px 14px rgba(45,42,49,.06);
scrollbar-width:none
}
.guide-anchor-nav::-webkit-scrollbar{display:none}
.guide-anchor-nav a{flex:0 0 auto;text-decoration:none;color:var(--ink);font-size:11px;font-weight:900;letter-spacing:.9px;text-transform:uppercase;border:1px solid #ded6c8;border-radius:999px;padding:7px 10px;background:#fff}
.guide-anchor-nav a:hover,.guide-anchor-nav a:focus{background:#f2e9fb;border-color:var(--purple);color:var(--purple)}
.guide-hero{min-height:680px;padding:88px clamp(24px,7vw,110px);display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:center;background:linear-gradient(135deg,#fffefb 0 52%,#f2e9fb 52%)}
.guide-overline,.guide-kicker{font-size:11px;font-weight:900;letter-spacing:2.4px;color:var(--deep-green);margin:0 0 16px}.guide-hero h1,.guide-content h2,.guide-finale h2{font-family:ui-rounded, "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif,sans-serif}.guide-hero h1{font-size:clamp(62px,7vw,110px);line-height:.88;letter-spacing:-4px;margin:0}.guide-hero h1 span{color:var(--purple)}.guide-intro{max-width:700px;font-size:20px;font-weight:650;margin:30px 0 24px}.guide-tags{display:flex;gap:9px;flex-wrap:wrap}.guide-tags span{border:1.5px solid var(--ink);border-radius:999px;padding:8px 12px;font-size:12px;font-weight:900;background:#fff}
.guide-poster{min-height:450px;background:var(--sky);border:3px solid var(--ink);border-radius:28px;box-shadow:12px 12px 0 var(--ink);position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;transform:rotate(1deg)}.guide-poster:after{content:"";position:absolute;left:-10%;right:-10%;bottom:-80px;height:230px;background:var(--grass);border-radius:50% 50% 0 0}.poster-lockup{z-index:2;font:700 clamp(38px,5vw,70px) ui-rounded, "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;display:flex;gap:12px;flex-wrap:wrap;justify-content:center;line-height:.9}.poster-lockup span{color:var(--purple)}.poster-lockup strong{color:var(--pink)}.guide-poster p{z-index:2;font-size:12px;letter-spacing:1.8px;font-weight:900}.poster-sun{position:absolute;right:11%;top:8%;font-size:75px;color:var(--yellow)}.poster-heart{position:absolute;left:10%;top:15%;font:700 80px ui-rounded, "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;color:var(--pink);transform:rotate(-12deg)}.poster-mountains{position:absolute;z-index:1;bottom:22%;left:10%;font:700 145px ui-rounded, "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;color:#6c8d8f;letter-spacing:-44px}
.guide-section{display:grid;grid-template-columns:140px 1fr;gap:50px;padding:92px clamp(24px,7vw,110px);border-top:1px solid #e9e3d8}.soft-section{background:var(--cream)}.guide-index{padding-top:7px}.guide-index span{font:700 46px ui-rounded, "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;color:var(--pink)}.guide-index p{font-size:11px;font-weight:900;letter-spacing:1.7px;text-transform:uppercase}.guide-content{max-width:1160px}.guide-content h2{font-size:clamp(42px,5vw,70px);line-height:.98;letter-spacing:-2px;margin:0 0 18px}.guide-lede{font-size:19px;max-width:850px;margin-bottom:40px}.subhead{font:700 30px ui-rounded, "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;margin:50px 0 18px}
.brand-lockups{display:grid;grid-template-columns:1fr 1fr .75fr;gap:18px;margin:36px 0}.lockup{min-height:180px;border:2px solid var(--ink);border-radius:22px;display:flex;align-items:center;justify-content:center;font:700 clamp(28px,4vw,50px) ui-rounded, "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif}.lockup span{color:var(--purple);margin-right:10px}.lockup strong{color:var(--pink)}.lockup.dark{background:var(--ink)}.lockup.compact{flex-direction:column;background:var(--yellow)}.lockup.compact strong{font-size:56px;color:var(--purple)}.lockup.compact small{font:800 12px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;margin-top:6px}.rule-pair{display:grid;grid-template-columns:1fr 1fr;gap:18px}.rule-pair>div{padding:25px;border-radius:18px;background:#fff;border:1px solid #ddd4c6}.rule-pair h3{font:700 25px ui-rounded, "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;margin:0 0 7px}.rule-pair p{margin:0}
.swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.swatches article{background:#fff;border:1px solid #dfd8cc;border-radius:18px;padding:12px}.swatches article>div{height:125px;background:var(--swatch);border-radius:12px;border:1px solid rgba(45,42,49,.15)}.swatches h3{font:700 18px ui-rounded, "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;margin:12px 0 2px}.swatches code{font-size:12px}.swatches p{font-size:13px;margin:8px 0}.color-rule{margin-top:24px;border-left:7px solid var(--purple);background:#fff;padding:20px 22px}.color-rule p{margin:4px 0 0}
.font-specimens{display:grid;grid-template-columns:1fr 1fr;gap:20px}.font-card{border:2px solid var(--ink);border-radius:22px;padding:30px;background:#fff}.font-label{font-size:10px;font-weight:900;letter-spacing:2px}.giant{font:700 clamp(55px,6vw,90px)/.88 ui-rounded, "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;letter-spacing:-3px;color:var(--purple);margin:30px 0}.body-sample{font:800 clamp(26px,3vw,40px)/1.25 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;max-width:610px;margin:55px 0}.type-scale{margin-top:30px;border-top:1px solid #ddd}.type-scale>div{display:grid;grid-template-columns:90px 1fr 220px;align-items:center;padding:22px 0;border-bottom:1px solid #ddd;gap:20px}.type-scale span,.type-scale code{font-size:12px}.t-display,.t-h1,.t-h2{font-family:ui-rounded, "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif}.t-display{font-size:54px}.t-h1{font-size:42px}.t-h2{font-size:31px}.t-body{font-size:18px}.t-label{font-size:12px;letter-spacing:1.5px}
.token-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.token-grid>div{min-height:170px;background:#fff;border:1px solid #ded7cb;border-radius:15px;padding:22px;display:flex;flex-direction:column;justify-content:space-between}.radius-demo{height:90px;background:#eadcf7;border:2px solid var(--ink);display:block}.r12{border-radius:12px}.r20{border-radius:20px}.pill{border-radius:999px}.shadow-token span{height:78px;background:var(--pink);border:2px solid var(--ink);border-radius:18px;box-shadow:7px 7px 0 var(--ink)}.spacing-scale{display:flex;align-items:end;gap:20px;flex-wrap:wrap}.spacing-scale i{width:var(--s);height:var(--s);min-width:8px;min-height:8px;background:var(--purple);display:grid;place-items:center;font-style:normal;font-size:10px;color:#fff}.spacing-scale i:nth-child(n+5){color:var(--ink)}
.component-block{margin:32px 0;padding-top:25px;border-top:1px solid #ded7cb}.component-block>h3{font:700 25px ui-rounded, "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;margin:0 0 16px}.component-row{display:flex;gap:14px;align-items:center;flex-wrap:wrap}.fp-badge{padding:7px 10px;border:1.5px solid var(--ink);border-radius:999px;font-size:10px;font-weight:900;letter-spacing:1px}.fp-badge.vegan{background:#dff1d2}.fp-badge.budget{background:#fff0b9}.fp-badge.amc{background:#dceef8}.fp-badge.leftovers{background:#eadcf7}.sample-meal-card{max-width:470px;background:#fff;border:2px solid var(--ink);border-radius:20px;box-shadow:5px 5px 0 #ddd4c7;padding:22px}.sample-day{display:flex;justify-content:space-between;align-items:center}.sample-day span{font:700 32px ui-rounded, "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;color:var(--purple)}.sample-day strong{font-size:12px}.sample-meal-card h4{font:700 28px ui-rounded, "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;margin:4px 0}.sample-dessert{border-top:1px dashed #bbb;margin-top:15px;padding-top:12px}.sample-dessert span{font-size:10px;font-weight:900;letter-spacing:1.4px;color:var(--pink);margin-right:8px}.component-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.sample-note{max-width:430px;background:var(--yellow);padding:35px 28px 24px;position:relative;transform:rotate(-1deg);box-shadow:7px 8px 0 rgba(45,42,49,.13)}.sample-note strong{font:700 22px ui-rounded, "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif}.sample-note p{font:600 20px ui-rounded, "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif}.sample-note b{position:absolute;right:20px;bottom:8px;color:var(--pink);font-size:35px}.budget-note{max-width:470px;border:2px solid var(--ink);border-radius:18px;background:#dff1d2;padding:20px;display:flex;gap:18px}.budget-note>span{background:var(--deep-green);color:#fff;width:46px;height:46px;display:grid;place-items:center;border-radius:50%;font:700 22px ui-rounded, "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif}.budget-note p{margin:4px 0}.sample-checks{display:grid;gap:10px;max-width:580px}.sample-checks label{background:#fff;border:1px solid #ddd;padding:13px 15px;border-radius:12px;font-weight:800}.sample-checks input{accent-color:var(--purple);width:18px;height:18px;vertical-align:middle;margin-right:7px}.sample-checks input:checked+span{text-decoration:line-through;opacity:.55}
.doodle-strip{display:flex;align-items:center;justify-content:space-around;gap:18px;flex-wrap:wrap;background:var(--sky);border:2px solid var(--ink);border-radius:24px;padding:35px;font-size:48px}.doodle-strip span:nth-child(odd){transform:rotate(-7deg)}.doodle-strip span:nth-child(even){transform:rotate(6deg)}.mountain-mark{font:700 70px ui-rounded, "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;letter-spacing:-22px;color:#667f82}.illustration-rules{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:25px}.illustration-rules>div{padding:22px;background:#fff;border:1px solid #ddd;border-radius:18px}.illustration-rules strong{font:700 23px ui-rounded, "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif}
.photo-principles,.voice-principles{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.photo-principles article,.voice-principles>div{padding:26px;background:var(--cream);border-radius:20px;border:1px solid #e1d9cc}.photo-principles span{font:700 14px ui-rounded, "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;color:var(--pink)}.photo-principles h3,.voice-principles strong{font:700 25px ui-rounded, "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;display:block;margin:8px 0}.voice-section{background:#f2e9fb}.copy-table{margin-top:35px;background:#fff;border:2px solid var(--ink);border-radius:18px;overflow:hidden}.copy-table>div{display:grid;grid-template-columns:1fr 1fr}.copy-table>div>*{padding:16px 20px;margin:0}.copy-table>div>*+*{border-left:1px solid #ddd}.copy-table>div+div{border-top:1px solid #ddd}.copy-head{background:var(--ink);color:#fff;font-weight:900}.copy-head span:first-child{color:#bfe5aa}.copy-head span:last-child{color:#ffb0c9}
#tokens .guide-content{max-width:980px}
#tokens .guide-lede,#tokens p{color:var(--ink)}
.code-card{background:#211f24;color:#fffefb;border:3px solid var(--ink);border-radius:20px;padding:30px 32px;overflow:auto;font:600 16px/1.8 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;box-shadow:8px 8px 0 var(--purple);white-space:pre}
.code-card code{color:#fffefb;text-shadow:none}
#tokens .guide-kicker{color:var(--deep-green)}
#tokens .guide-index span{color:#c5447f}
#tokens .guide-index p,#tokens .guide-content h2{color:var(--ink)}.guide-finale{padding:110px clamp(24px,10vw,170px);background:var(--sky);text-align:center}.guide-finale>p:first-child{font-size:11px;font-weight:900;letter-spacing:2px}.guide-finale h2{font-size:clamp(48px,6vw,86px);line-height:.95;max-width:1000px;margin:12px auto 20px}.guide-finale>p:nth-of-type(2){font-size:20px;margin-bottom:28px}
@media(max-width:1000px){.guide-anchor-nav{top:70px}.guide-hero{grid-template-columns:1fr}.guide-poster{min-height:380px}.guide-section{grid-template-columns:1fr}.guide-index{display:flex;gap:15px;align-items:baseline;padding:0}.guide-index span{font-size:30px}.brand-lockups,.swatches,.token-grid{grid-template-columns:repeat(2,1fr)}.font-specimens,.component-grid{grid-template-columns:1fr}.photo-principles,.voice-principles{grid-template-columns:1fr}.type-scale>div{grid-template-columns:70px 1fr}.type-scale code{display:none}}
@media(max-width:620px){.guide-anchor-nav{top:64px;padding:8px 14px}.guide-anchor-nav a{font-size:10px;padding:6px 9px}.guide-hero{padding:62px 6vw}.guide-hero h1{font-size:58px;letter-spacing:-2.5px}.guide-section{padding:65px 6vw}.brand-lockups,.swatches,.token-grid,.rule-pair,.illustration-rules{grid-template-columns:1fr}.lockup{min-height:135px}.guide-content h2{font-size:45px}.guide-poster{min-height:330px;box-shadow:7px 7px 0 var(--ink)}.poster-lockup{font-size:43px}.type-scale>div{grid-template-columns:1fr}.type-scale span{font-weight:900;color:var(--pink)}.copy-table>div{grid-template-columns:1fr}.copy-table>div>*+*{border-left:0;border-top:1px solid #ddd}.copy-head{display:none!important}.t-display{font-size:43px}}