:root{--ink:#242420;--paper:#f8f7f0;--lime:#c6f564;--lilac:#d9c8f8;background:var(--paper);color:var(--ink)}
html{scroll-behavior:smooth;scroll-padding-top:24px}
.skip-link{position:absolute;left:16px;top:-80px;z-index:10;padding:14px;background:var(--lime);color:var(--ink)}.skip-link:focus{top:12px}
header{height:90px;background:var(--paper);border-bottom:1.5px solid var(--ink);padding:0 max(5%,calc((100vw - 1280px)/2));gap:20px}
.brand{font-size:29px;font-weight:900;letter-spacing:-1.6px;color:var(--ink);gap:7px;white-space:nowrap}.brand img{width:47px;height:51px;object-fit:contain}.brand span:last-child{color:var(--ink)}
.brand-nav{display:flex;align-items:center;gap:22px}.brand-nav a{color:var(--ink);font-size:14px;font-weight:700;text-decoration:none}.brand-nav a:hover{text-decoration:underline}.brand-nav button{background:transparent;border:0;font-size:13px;padding:8px}
.brand-nav .nav-studio{background:var(--ink);color:var(--paper);padding:12px 17px;border-radius:8px;text-decoration:none}.nav-studio:hover{background:#45453b}
.landing{max-width:1400px;margin:auto;padding:65px 5% 0}.landing-hero{display:grid;grid-template-columns:1.08fr 1fr;align-items:center;gap:55px;padding:0 0 62px}
.kicker{display:inline-flex;align-items:center;gap:9px;font:700 11px ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:1.4px;text-transform:uppercase}.kicker-dot{width:8px;height:8px;background:var(--ink);border-radius:50%}
.landing h1{font-size:clamp(46px,5.1vw,76px);line-height:1.02;letter-spacing:-3.8px;margin:23px 0}.landing h1 em{font-style:normal;background:linear-gradient(transparent 12%,var(--lime) 12%,var(--lime) 91%,transparent 91%);box-shadow:none}
.hero-copy>p{font-size:17px;line-height:1.65;max-width:470px;color:#53544d;margin:24px 0}.hero-actions{display:flex;gap:20px;align-items:center;flex-wrap:wrap;margin-top:27px}.lore-cta{display:inline-flex;align-items:center;justify-content:space-between;gap:32px;background:var(--ink);color:var(--paper);text-decoration:none;border:1.5px solid var(--ink);border-radius:9px;padding:16px 23px;font-size:15px;font-weight:750;box-shadow:4px 4px 0 var(--lime);transition:transform .15s}.lore-cta:hover{transform:translateY(-2px)}.quiet-link{font-size:14px;color:var(--ink);text-underline-offset:5px;font-weight:650}.hero-copy .hero-footnote{font-size:12px;margin:21px 0 0;color:#68685f}
.meme-example{position:relative;padding:22px 0 12px;min-width:0}.example-stamp{position:absolute;top:0;right:13px;z-index:2;background:var(--lime);border:1.5px solid var(--ink);border-radius:4px;padding:8px 12px;transform:rotate(7deg);font:700 11px ui-monospace,monospace;letter-spacing:1px}
.meme-card{border:1.5px solid var(--ink);border-radius:14px;background:#fffefa;box-shadow:7px 7px 0 var(--ink);overflow:hidden;transform:rotate(-1.5deg)}
.meme-original{padding:25px 29px 24px;border-bottom:1.5px solid var(--ink)}.meme-label{font:700 10px ui-monospace,monospace;letter-spacing:1.3px;display:flex;align-items:center;gap:8px}.meme-label span{font-size:15px;letter-spacing:0}.meme-original p{font-family:Georgia,serif;font-size:21px;line-height:1.5;color:#626159;margin:16px 0 0;max-width:370px}
.meme-drop{background:var(--lilac);padding:25px 29px 30px;position:relative;min-height:244px}.meme-drop h2{font-size:clamp(24px,2.5vw,35px);line-height:1.15;letter-spacing:-1.2px;margin:19px 88px 20px 0;max-width:330px}.meme-drop img{position:absolute;width:120px;height:140px;object-fit:contain;right:10px;top:64px;transform:rotate(11deg)}.example-equation{display:inline-block;background:var(--paper);border:1.5px solid var(--ink);border-radius:6px;padding:10px 14px;font:700 17px ui-monospace,monospace;margin:0 0 8px}.example-caption{font-size:11px;line-height:1.5;max-width:290px;margin:18px 0 0;color:#49404f}.example-note{font-size:11px;color:#68685f;text-align:center;margin:20px 10px 0}
.brand-principle{border-top:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);display:flex;align-items:center;justify-content:space-between;gap:25px;padding:21px 0}.brand-principle strong{font-size:18px;letter-spacing:-.5px;white-space:nowrap}.brand-principle p{font-size:13px;color:#5e5e54;max-width:670px;margin:0}.brand-principle .asterisk{font-size:35px;line-height:1;color:#74568d;margin-right:8px;vertical-align:middle}
.landing-features{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;padding:40px 0 46px}.landing-feature{min-width:0}.feature-index{font:600 11px ui-monospace,monospace;color:#66675e;letter-spacing:1px}.landing-feature h2{font-size:20px;letter-spacing:-.6px;margin:12px 0 9px}.landing-feature p{font-size:14px;line-height:1.65;margin:0;color:#626259;max-width:340px}
main{border-top:1.5px solid var(--ink);background:#eeece4;padding-top:31px;scroll-margin-top:0}.intro{align-items:center;margin:7px 0 28px}.intro h2{font-size:31px;letter-spacing:-1.4px;margin:8px 0}.intro .eyebrow{font:700 10px ui-monospace,monospace;color:#626259;letter-spacing:1.5px}.intro p{font-size:14px;color:#66665d}.intro #new{background:var(--lime);border:1px solid var(--ink);color:var(--ink)}
.connection{margin-bottom:15px;background:var(--paper);font-size:12px}.panel{border-color:#d1cfc3;box-shadow:0 4px 0 #dbd8cb;border-radius:17px}.step{background:var(--lime);color:var(--ink)}.step.pink{background:var(--lilac)}.record-box{background:#f1eafb}.record{background:var(--ink);border-color:var(--ink)}.record:hover{background:#45453b}.primary{background:var(--lime);border-color:#b4d875;color:var(--ink)}.primary:hover{background:#b6e453}button,input:not([type=checkbox]),textarea,select{color:var(--ink)}.record{color:white}.record.active{background:#a53869;color:white}.hint,.privacy{color:#66665d}.tone-explainer{font-size:13px}.notes{background:#fffefa}.saved{border-color:#d2cfc3}.study-tools{max-width:calc(1260px - 10%);margin:35px auto}.lore-footer{max-width:1260px;margin:40px auto 0;padding:26px 5% 35px;border-top:1px solid #cccabf;display:flex;align-items:center;justify-content:space-between;gap:20px;color:#68685f}.footer-wordmark{font-size:20px;letter-spacing:-1px;font-weight:850;color:var(--ink);text-decoration:none}.lore-footer p{margin:0;font-size:12px}
@media(min-width:1400px){.study-tools{max-width:1260px}}
@media(max-width:900px){.landing{padding-top:42px}.landing-hero{gap:30px}.landing h1{font-size:54px}.meme-drop h2{font-size:26px;margin-right:85px}.meme-drop img{width:90px;height:105px;right:3px;top:60px}.meme-original,.meme-drop{padding-left:21px;padding-right:21px}.brand-principle{align-items:flex-start}.brand-principle strong{white-space:normal;min-width:190px}}
@media(max-width:700px){header{height:75px;padding:0 5%;gap:10px}.brand{font-size:25px}.brand img{width:36px;height:43px}.brand-nav{gap:9px}.brand-nav .nav-how{display:none}.brand-nav button{font-size:0;padding:8px}.brand-nav button::before{content:'⚙';font-size:21px}.brand-nav .nav-studio{font-size:12px;padding:10px 12px}.landing-hero{grid-template-columns:1fr;padding-bottom:35px;gap:32px}.landing h1{font-size:clamp(45px,10.5vw,67px);letter-spacing:-2.5px;max-width:550px}.hero-copy>p{font-size:16px}.hero-copy .hero-footnote{font-size:11px}.meme-example{max-width:490px;width:100%;margin:auto}.meme-original p{font-size:20px}.meme-drop h2{font-size:32px;max-width:320px;margin-right:92px}.meme-drop img{width:112px;height:130px;right:10px;top:60px}.brand-principle{display:block;padding:22px 0}.brand-principle p{margin-top:10px}.landing-features{grid-template-columns:1fr;gap:23px;padding:28px 0}.landing-feature{display:grid;grid-template-columns:30px 1fr;column-gap:12px}.feature-index{padding-top:5px}.landing-feature h2{margin:0 0 7px}.landing-feature p{grid-column:2;max-width:none}.intro h2{font-size:27px}.study-tools{max-width:none;margin:25px 5%}.lore-footer{flex-direction:column;align-items:flex-start;gap:7px}.meme-card{box-shadow:5px 5px 0 var(--ink)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.lore-cta{transition:none}}
