:root{--paper:#f7f4ef;--ink:#2b2b2b;--muted:#746859;--line:#dad7ce;--blue:#4a7cff;--blue-light:#ecf2f8;--otter-dark:#4b3a2e;--otter-mid:#81664d;--otter-sand:#b89572;--otter-cream:#e9dec9;--ease:cubic-bezier(.2,.75,.25,1);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none;color-scheme:light}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit}a{color:inherit;text-decoration:none}button{color:inherit}button,a,summary{touch-action:manipulation}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--blue);outline-offset:6px}button{cursor:pointer}::selection{background:#d6e0ff}h1,h2,h3,p{margin:0}button{border:0}.header{max-width:1512px;margin:auto;padding:29px 5%;display:flex;align-items:center;justify-content:space-between}.wordmark{font-size:2.1875rem;letter-spacing:-2px;font-weight:750}.brand-period{color:var(--blue)}.header nav{display:flex;align-items:center;gap:34px;font-size:0.875rem;font-weight:520}.header nav>a{padding:10px 0}.header .nav-try{background:var(--ink);color:white;border-radius:99px;padding:13px 21px;display:flex;gap:23px}.header nav a:hover{color:var(--blue)}.header nav .nav-try:hover{background:var(--blue);color:white}.hero{max-width:1512px;margin:auto;display:grid;grid-template-columns:.85fr 1.15fr;gap:5.5%;align-items:center;padding:68px 5% 76px;min-height:735px}.eyebrow{font-size:0.75rem;font-weight:650;letter-spacing:1.3px;display:flex;gap:12px;align-items:center}.tiny-line{width:23px;height:1px;background:var(--blue)}h1{font-size:clamp(62px,6.6vw,106px);letter-spacing:-.067em;line-height:1.05;font-weight:650;margin:32px 0 34px}.thought{position:relative;display:inline-block;font-family:Georgia,serif;font-weight:400;font-style:italic;letter-spacing:-.08em;color:var(--blue);padding:0 .09em 0 0}.thought svg{position:absolute;width:134%;height:128%;left:-16%;top:-5%;fill:none;stroke:var(--blue);stroke-width:1.7;overflow:visible;transform:rotate(-4deg);pointer-events:none}.hero-description{font-size:1.3125rem;line-height:1.55;letter-spacing:-.02em}.primary-button{margin-top:30px;display:inline-flex;align-items:center;justify-content:center;gap:28px;padding:17px 22px;color:white;background:var(--blue);border-radius:99px;font-size:0.9375rem;font-weight:550;transition:transform .2s var(--ease),background .2s}.primary-button:hover{background:#2346c2;transform:translateY(-2px)}.primary-button:active{transform:scale(.97)}.primary-button span{font-size:1.25rem;line-height:1}.hero-note{font-size:0.75rem;color:var(--muted);margin-top:19px;max-width:310px;line-height:1.6}.demo-wrap{min-width:0;scroll-margin-top:28px}.demo-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px;font-size:0.875rem}.demo-label{font-size:0.75rem;letter-spacing:1.25px;color:var(--muted)}.notebook{border:1px solid #d6d7cf;border-radius:15px;background:#fffefa;box-shadow:0 30px 65px -28px #33352735,0 3px 0 #ecebe5,0 4px 0 #d6d7cf;overflow:hidden;transform:rotate(-1.3deg);transition:transform .55s var(--ease)}.notebook:hover,.notebook:focus-within{transform:rotate(0)}.notebook-top{height:54px;padding:0 24px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e6e6df;font-size:0.75rem;color:var(--muted);background:#fffefa}.notebook-breadcrumb{display:flex;align-items:center;gap:12px}.notebook-breadcrumb strong{color:var(--ink);font-weight:550}.page-number{font-variant-numeric:tabular-nums;letter-spacing:1px}.paper{position:relative;min-height:465px;background-image:linear-gradient(#ddded44f 1px,transparent 1px),linear-gradient(90deg,#ddded44f 1px,transparent 1px);background-size:23px 23px;padding:29px 35px 72px}.note-date{font-size:0.75rem;letter-spacing:1.5px;color:#767970;margin-bottom:17px}.note-content h2{font-size:1.5rem;line-height:1.2;font-family:Georgia,serif;font-weight:400;letter-spacing:-.6px}.handwriting{font-family:"Bradley Hand","Segoe Print","Comic Sans MS",cursive;font-weight:400}.note-line{font-size:1.125rem;line-height:1.55;max-width:100%;margin-top:23px;color:#505b50}.question-area{width:80%;height:130px;position:relative;margin:2px 0 0 -9px;touch-action:none}.question{background:transparent;font-size:2.875rem;width:100%;height:100%;position:relative;z-index:2;transform:rotate(-3deg);padding:0 15px;line-height:1.15}.question:hover{color:var(--blue)}.ink-layer{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:var(--blue);stroke-width:2;pointer-events:none;z-index:3}.finished-circle{stroke-dasharray:1100;stroke-dashoffset:1100;transition:stroke-dashoffset .7s var(--ease)}.revealed .finished-circle{stroke-dashoffset:0}.small-note{font-size:1rem;margin-top:2px;color:#5e655b;transition:opacity .3s}.demo-invitation{display:flex;align-items:center;gap:10px;justify-content:flex-end;margin:21px 6px 0 0;font-family:"Bradley Hand","Segoe Print",cursive;font-size:1.125rem;line-height:1.25;color:var(--blue);transform:rotate(-5deg);transition:opacity .2s}.invitation-arrow{font-family:Georgia,serif;font-size:2.625rem;align-self:flex-start}.demo-toolbar{display:flex;align-items:center;gap:20px;position:absolute;bottom:19px;left:50%;transform:translateX(-50%);border:1px solid #e4e5df;background:#fffffff0;box-shadow:0 5px 15px #28301409;border-radius:99px;padding:8px;white-space:nowrap;font-size:0.75rem}.tool-name{display:flex;align-items:center;gap:7px;color:var(--blue);background:var(--blue-light);border-radius:99px;padding:9px 12px}.tool-name svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}.demo-toolbar button{background:none;padding:8px 12px 8px 0;color:var(--muted)}.demo-toolbar button:hover{color:var(--blue)}.demo-toolbar button span{font-size:1.125rem;vertical-align:middle;margin-right:4px}.demo-bottom{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:25px}.examples{display:flex;gap:4px;padding:4px;background:#eaeae4;border-radius:99px}.examples button{font-size:0.75rem;padding:9px 13px;border-radius:99px;background:transparent;transition:background .2s,color .2s}.examples button[aria-pressed=true]{color:var(--blue);background:white;box-shadow:0 1px 4px #0000000d}.demo-disclaimer{font-size:0.75rem;color:var(--muted);text-align:right}.answer{position:absolute;z-index:4;right:21px;top:228px;width:61%;background:white;border:1px solid #cbd5fa;border-radius:12px;padding:17px 19px 0;box-shadow:0 9px 28px #223d801c;transform-origin:0 20%;animation:card-appear .6s var(--ease) both}.answer[hidden]{display:none}.answer-top{display:flex;align-items:center;justify-content:space-between;color:var(--blue);font-size:0.75rem;letter-spacing:1.05px;font-weight:600;position:relative}.answer-mark{font-size:1.1875rem}.answer h3{font-size:0.9375rem;line-height:1.3;letter-spacing:-.3px;margin-top:8px;position:relative}.answer p{font-size:0.75rem;line-height:1.6;margin-top:8px;position:relative}.answer-example{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 11px;background:#f1f4ff;border-radius:5px;margin-top:12px;font-size:0.75rem;color:#304fbd}.answer-footer{border-top:1px solid #ebedf1;margin:13px -19px 0;padding:9px 19px;font-size:0.75rem;color:#777d88}.answer-otter{position:absolute;width:66px;height:auto;top:-59px;right:15px;z-index:-1}.connector{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:var(--blue);stroke-width:1.5;opacity:0;pointer-events:none}.connector circle{fill:#fffefa}.revealed .connector{opacity:1;transition:opacity .3s .3s}.revealed .demo-invitation{opacity:0;visibility:hidden}.revealed .small-note{opacity:0}.revealed .paper{min-height:525px}.paper{transition:min-height .55s var(--ease)}.revealed .answer{top:227px}.chapter-divider{max-width:1360px;margin:0 auto;padding:23px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;font-size:0.75rem;letter-spacing:1px;color:var(--muted)}.chapter-divider a{display:flex;align-items:center;gap:20px}.chapter-divider a span{font-size:1.125rem;color:var(--blue)}.section-pad{max-width:1512px;margin:auto;padding:100px 5%}.section-kicker{display:flex;justify-content:space-between;font-size:0.75rem;letter-spacing:1px;color:var(--muted)}.section-kicker span:last-child{letter-spacing:0;font-size:0.8125rem}.idea-intro{display:grid;grid-template-columns:1.3fr 1fr;gap:13%;align-items:end;margin-top:36px}.idea h2,.faq h2{font-size:clamp(32px,3.4vw,52px);letter-spacing:-.055em;line-height:1.13;font-weight:550}.idea-intro>p{font-size:1.0625rem;line-height:1.65;color:var(--muted);max-width:380px}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:7%;margin-top:67px}.steps article{border-top:1px solid var(--line);padding-top:25px}.step-number{font-size:0.8125rem;color:var(--blue);position:relative;display:inline-block}.circle-number:after{content:"";position:absolute;border:1px solid var(--blue);inset:-7px -10px;border-radius:50%;transform:rotate(-12deg)}.steps h3{font-size:1.3125rem;font-weight:550;letter-spacing:-.5px;margin:23px 0 13px}.steps p{font-size:0.9375rem;line-height:1.75;color:var(--muted)}.otter-section{background:#e9edfb;display:grid;grid-template-columns:1fr 1fr;align-items:center;overflow:hidden;padding-top:73px;padding-bottom:0;border-radius:18px;max-width:calc(100% - 10%)}.otter-intro{padding-bottom:70px;position:relative;z-index:1}.otter-intro .eyebrow{color:#455a9d}.otter-intro h2{font-size:clamp(38px,4.8vw,72px);line-height:1.05;letter-spacing:-.055em;font-weight:500;margin:26px 0}.otter-intro>p:not(.eyebrow){font-size:1rem;line-height:1.7;color:#515d7a;max-width:330px}.text-link{display:inline-flex;gap:20px;font-size:0.875rem;font-weight:550;border-bottom:1px solid #a1aecf;padding-bottom:8px;margin-top:25px;color:#2e4aac}.otter-portrait{align-self:end;position:relative;display:flex;justify-content:center}.otter-portrait img{width:100%;height:auto;max-width:420px;transform:translateY(19%);transition:transform .8s var(--ease);filter:drop-shadow(0 12px 18px #3c41681a)}.otter-section:hover .otter-portrait img{transform:translateY(14%) rotate(-3deg)}.otter-aside{position:absolute;right:0;top:0;font-family:"Bradley Hand","Segoe Print",cursive;color:#485c99;font-size:1.5rem;line-height:1.2;transform:rotate(8deg);z-index:1}.faq{display:grid;grid-template-columns:.85fr 1.15fr;gap:9%;padding-top:110px;padding-bottom:100px}.faq .eyebrow{color:var(--muted);margin-bottom:29px}.faq-list{border-top:1px solid var(--line)}details{border-bottom:1px solid var(--line)}summary{cursor:pointer;list-style:none;padding:23px 0;display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:1.0625rem;line-height:1.4}summary::-webkit-details-marker{display:none}summary span{font-size:1.5rem;font-weight:300;color:var(--blue);transition:transform .2s}details[open] summary span{transform:rotate(45deg)}details p{font-size:0.9375rem;line-height:1.75;color:var(--muted);max-width:95%;padding-bottom:25px}details p a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}.closing{text-align:center;padding:77px 5% 88px;background:#242821;color:white}.closing>p{font-size:0.75rem;letter-spacing:1.4px;color:#b8c2b2}.closing h2{font-size:clamp(45px,6.8vw,98px);font-weight:450;letter-spacing:-.055em;line-height:1.12;margin-top:27px}.closing em{font-family:Georgia,serif;font-weight:400;color:#bbcdfd}.closing .primary-button{background:#c6d3fd;color:#243b88;margin-top:31px}.closing>span{display:block;font-size:0.75rem;color:#bdc4b9;margin-top:23px}.footer{max-width:1512px;display:flex;align-items:center;justify-content:space-between;gap:24px;margin:auto;padding:34px 5%}.footer .wordmark{font-size:1.6875rem}.footer>span{font-size:0.75rem;color:var(--muted);margin-right:auto}.footer nav{display:flex;gap:23px;font-size:0.75rem}.footer nav a{padding-block:10px}.footer nav a:hover{color:var(--blue)}.skip-link{position:absolute;left:20px;top:-100px;background:white;padding:14px;z-index:20}.skip-link:focus{top:10px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@keyframes card-appear{from{opacity:0;transform:translate(-12px,-7px) scale(.93)}to{opacity:1;transform:translate(0) scale(1)}}
@media(min-width:1512px){.chapter-divider{width:90%}.otter-section{max-width:1360px}}@media(max-width:1300px){.hero{gap:4%;padding-top:52px;min-height:680px}.paper{padding-inline:26px}.note-content h2{font-size:1.375rem}.note-line{font-size:1rem}.question{font-size:2.625rem}.chapter-divider{margin-inline:5%}.answer{width:65%;right:15px}.demo-disclaimer{max-width:92px;line-height:1.4}.hero-note{max-width:280px}.answer p{font-size:0.75rem}.demo-heading{font-size:0.8125rem}}
@media(max-width:1000px){.header{padding-block:23px}.hero{grid-template-columns:1fr 1.15fr;padding-top:45px;padding-bottom:55px;gap:4%}h1{font-size:clamp(49px,7.1vw,72px)}.hero-description{font-size:1.125rem}.eyebrow{font-size:0.75rem;letter-spacing:1px}.primary-button{font-size:0.8125rem;padding:16px 18px;gap:17px}.hero-note{font-size:0.75rem;max-width:250px}.paper{padding:25px 20px 73px;min-height:420px}.notebook-top{padding-inline:18px}.note-content h2{font-size:1.25rem}.note-line{font-size:0.9375rem}.question-area{height:112px;width:92%}.question{font-size:2.25rem}.small-note{font-size:0.875rem}.demo-invitation{font-size:1.0625rem;margin-top:25px}.demo-label{font-size:0.75rem;letter-spacing:.6px}.demo-bottom{gap:5px}.examples button{font-size:0.75rem;padding:8px 11px}.demo-disclaimer{font-size:0.75rem}.answer{width:77%;top:217px!important}.answer h3{font-size:0.875rem}.revealed .paper{min-height:515px}.answer p{font-size:0.75rem}.section-pad{padding-top:75px;padding-bottom:75px}.steps{gap:5%;margin-top:45px}.steps h3{font-size:1.125rem}.steps p{font-size:0.875rem}.idea-intro{gap:8%}.idea-intro>p{font-size:0.9375rem}.otter-section{padding-bottom:0;padding-top:60px}.otter-intro{padding-bottom:50px}.otter-aside{font-size:1.1875rem;top:-10px}.faq{gap:7%}.faq h2{font-size:2.1875rem}summary{font-size:0.9375rem}}
@media(max-width:760px){html{scroll-padding-top:25px}.header{padding:21px 6%}.wordmark{font-size:1.875rem}.header nav{gap:22px}.header nav .nav-faq{display:none}.header .nav-try{font-size:0.75rem;padding:11px 15px;gap:17px}.header .nav-story{font-size:0.75rem}.hero{grid-template-columns:1fr;padding:46px 6% 43px;gap:47px;min-height:auto}.hero-copy{max-width:550px}h1{font-size:clamp(62px,12vw,86px);margin-top:25px;margin-bottom:26px;line-height:1.01}.eyebrow{font-size:0.75rem}.hero-description{font-size:1.1875rem}.hero-description br:first-of-type{display:none}.hero-description br:first-of-type:after{content:" "}.primary-button{font-size:0.875rem;margin-top:24px}.hero-note{font-size:0.75rem;max-width:none}.demo-wrap{max-width:580px;width:100%;margin:auto}.demo-heading{font-size:0.8125rem}.demo-label{font-size:0.75rem;letter-spacing:.7px}.paper{min-height:444px;padding:29px 27px 72px}.note-content h2{font-size:1.5625rem}.note-line{font-size:1.125rem}.question-area{width:85%;height:128px}.question{font-size:2.75rem}.small-note{font-size:1.0625rem}.demo-invitation{font-size:1.25rem}.demo-bottom{margin-top:22px}.examples button{font-size:0.75rem;padding:10px 14px}.demo-disclaimer{font-size:0.75rem;max-width:130px}.notebook{transform:rotate(-.8deg)}.answer{top:239px!important;width:70%;padding-top:16px;right:17px}.answer h3{font-size:0.9375rem}.answer p{font-size:0.8125rem}.answer-top{font-size:0.75rem}.answer-footer{font-size:0.75rem}.answer-example{font-size:0.75rem}.revealed .paper{min-height:566px}.chapter-divider{margin:0 6%;font-size:0.75rem;letter-spacing:.7px;gap:30px;line-height:1.6}.chapter-divider>span{max-width:195px}.chapter-divider a{white-space:nowrap;gap:13px}.section-pad{padding:65px 6%}.section-kicker{font-size:0.75rem}.section-kicker span:last-child{font-size:0.75rem}.idea-intro{grid-template-columns:1fr;gap:24px;margin-top:29px}.idea h2{font-size:2.375rem}.idea-intro>p{font-size:1rem;max-width:460px}.steps{grid-template-columns:1fr;gap:28px;margin-top:41px}.steps article{position:relative;padding:23px 0 0 48px}.step-number{position:absolute;left:5px;top:28px}.steps h3{font-size:1.3125rem;margin:0 0 10px}.steps p{font-size:0.9375rem;max-width:470px}.otter-section{max-width:88%;padding:40px 8% 0;grid-template-columns:1fr;border-radius:13px}.otter-intro{padding:0}.otter-intro h2{font-size:3rem;margin:23px 0}.otter-intro>p:not(.eyebrow){max-width:none;font-size:1rem}.otter-portrait{max-width:340px;width:100%;margin:25px auto 0}.otter-portrait img{width:85%;transform:translateY(14%)}.otter-aside{top:25px;font-size:1.25rem;right:-9px}.faq{grid-template-columns:1fr;gap:32px}.faq h2{font-size:2.375rem}.faq .eyebrow{margin-bottom:20px}summary{font-size:1rem;padding:23px 0}details p{font-size:0.9375rem}.closing{padding:60px 6%}.closing h2{font-size:3.375rem;max-width:460px;margin:24px auto 0}.closing>p{font-size:0.75rem;letter-spacing:1px}.closing .primary-button{margin-top:27px}.footer{flex-wrap:wrap;padding:27px 6%;gap:18px}.footer>span{font-size:0.75rem}.footer nav{width:100%;gap:25px;font-size:0.75rem}.footer .wordmark{font-size:1.75rem}}
@media(max-width:390px){.header nav{gap:13px}.hero{padding-top:38px}h1{font-size:3.8125rem}.hero-description{font-size:1.125rem}.paper{padding-inline:20px}.note-content h2{font-size:1.375rem}.note-line{font-size:1rem}.question{font-size:2.375rem}.small-note{font-size:0.9375rem}.demo-label{font-size:0.75rem}.demo-heading{font-size:0.75rem}.answer{width:78%;right:12px}.demo-disclaimer{max-width:85px;font-size:0.75rem}.examples button{padding:9px 11px;font-size:0.75rem}.idea h2{font-size:2.0625rem}.closing h2{font-size:2.9375rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.notebook,.notebook:hover,.notebook:focus-within{transform:none}.otter-section:hover .otter-portrait img{transform:translateY(14%)}.primary-button:hover{transform:none}}

/* Readable controls and explanation copy at every viewport. */
.note-line, .steps p, .faq-list p { font-size: 1rem; }
.demo-label, .demo-disclaimer, .note-date, .answer-top, .answer-footer { font-size: .75rem; }
.demo-toolbar, .examples button, .notebook-top { font-size: .875rem; }
.answer h3 { font-size: 1.125rem; }
.answer p, .answer-example { font-size: .875rem; }
.answer-top { letter-spacing: .5px; }
.answer-top .answer-mark { font-size: 1.25rem; }
.revealed .paper { min-height: 610px; }
.question[data-kind="german"] { font-size: 2.1rem; }
.question[data-kind="english"] { font-size: 1.9rem; }
.question-area { user-select: none; -webkit-user-select: none; cursor: crosshair; }
.question { cursor: crosshair; }
.freehand .finished-circle { visibility: hidden; }
.demo-invitation { max-width: 90%; margin-left: auto; }
.answer-otter { z-index: 0; }
.demo-heading { gap: 12px; }
.demo-label { text-align: right; }
.demo-bottom { align-items: center; gap: 14px; }
.demo-disclaimer { max-width: 145px; line-height: 1.4; }
.primary-button { min-height: 48px; }
.examples button { min-height: 40px; }
.demo-toolbar button { min-height: 38px; }
@media (min-width: 761px) and (max-width: 1100px) {
  .hero { grid-template-columns: 1fr; max-width: 820px; gap: 52px; }
  .hero-copy { max-width: 650px; }
  h1 { font-size: 6rem; }
  .demo-wrap { width: 100%; max-width: 680px; }
  .answer { width: 62%; }
  .hero-description br:first-of-type { display: none; }
}
@media (max-width: 760px) {
  .demo-bottom { align-items: flex-start; flex-wrap: wrap; gap: 12px; }
  .demo-disclaimer { max-width: none; }
  .demo-toolbar { gap: 10px; }
  .notebook-top { padding-inline: 16px; }
  .notebook-breadcrumb { gap: 8px; }
  .note-date { font-size: .75rem; }
  .note-content h2 { font-size: 1.4rem; }
  .answer { width: 80%; }
  .answer h3 { font-size: 1.05rem; }
  .answer-otter { width: 60px; top: -53px; }
  .revealed .paper { min-height: 640px; }
  .demo-heading { align-items: flex-start; }
  .demo-heading>span { max-width: 50%; }
  .demo-label { max-width: 100px!important; line-height: 1.5; }
  .question[data-kind="german"] { font-size: 1.8rem; }
  .question[data-kind="english"] { font-size: 1.6rem; }
}
@media (max-width: 360px) {
  h1 { font-size: 3.45rem; }
  .header nav .nav-story { display: none; }
  .notebook-top { font-size: .75rem; }
  .question[data-kind="english"] { font-size: 1.4rem; }
  .answer { width: 85%; }
  .closing h2 { font-size: 2.65rem; }
}
/* The explanation follows its source in normal flow, including enlarged text. */
.answer, .revealed .answer { position: relative; top: auto!important; right: auto; margin: 34px 0 8px auto; }
.revealed .paper { min-height: 0; }
.revealed .demo-invitation { display: none; }
.revealed .small-note { display: none; }
.revealed .paper { padding-bottom: 98px; }

/* Otriva app palette: Style.swift / Ink. Blue marks the pencil interaction. */
.wordmark { font-family: "Bradley Hand", "Segoe Print", cursive; font-weight: 700; font-size: 2.4rem; letter-spacing: -.06em; color: var(--otter-dark); }
.brand-period { color: var(--otter-mid); }
.hero-copy { position: relative; }
h1 { font-family: Georgia, "Times New Roman", serif; font-weight: 400; color: var(--otter-dark); font-size: clamp(5rem,7.2vw,7rem); letter-spacing: -.055em; line-height: 1.02; margin: 28px 0 34px; }
.otter-title { font-style: italic; }
.hero-otter { position: absolute; width: 43%; max-width: 215px; height: auto; right: -8px; top: 123px; pointer-events: none; transform: rotate(-5deg); }
.hero-description { max-width: 420px; }
.hero .eyebrow { color: var(--otter-mid); }
.tiny-line { background: var(--otter-sand); }
.header .nav-try, .primary-button { background: var(--otter-dark); color: #fffaf1; }
.header nav .nav-try:hover, .primary-button:hover { background: var(--otter-mid); }
.header nav a:hover { color: var(--otter-mid); }
.primary-button { box-shadow: 0 4px 8px #4b3a2e0d; }
.notebook { background: #fffdf9; border-color: #d9d0c2; box-shadow: 0 30px 65px -28px #4b3a2e3d,0 3px 0 #eee7db,0 4px 0 #d9d0c2; }
.notebook-top { background: #fbfaf6; border-color: #e9e3d8; }
.paper { background-color: #fefdf9; }
.note-content h2 { color: var(--otter-dark); }
.note-line, .small-note { color: #6a6257; }
.answer { background: #fffdfa; border-color: #e5ddd0; box-shadow: 0 8px 24px #4b3a2e16; }
.answer-top { color: var(--otter-mid); }
.answer h3 { color: var(--otter-dark); }
.answer-example { background: #f5f0e7; color: var(--otter-dark); }
.answer-footer { color: #857867; border-color: #ece6dc; }
.examples { background: #eae3d8; }
.examples button[aria-pressed=true] { color: var(--otter-dark); background: #fffdf9; }
.demo-toolbar { background: #fffdf9f5; border-color: #e5ddd0; }
.tool-name { color: #345fbd; }
.demo-invitation { color: var(--otter-mid); }
.chapter-divider a span, .step-number { color: var(--otter-mid); }
.circle-number:after { border-color: var(--otter-sand); }
.idea h2, .faq h2, .steps h3 { color: var(--otter-dark); }
.idea h2, .faq h2 { font-family: Georgia, "Times New Roman", serif; font-weight: 400; letter-spacing: -.045em; }
.otter-section { background: var(--otter-cream); }
.otter-intro .eyebrow, .otter-aside { color: var(--otter-mid); }
.otter-intro h2 { color: var(--otter-dark); font-family: Georgia, "Times New Roman", serif; font-weight: 400; }
.otter-intro>p:not(.eyebrow) { color: #6e5d4d; }
.text-link { color: var(--otter-dark); border-color: #baa386; }
summary span, details p a, .footer nav a:hover { color: var(--otter-mid); }
.closing { background: var(--otter-dark); }
.closing>p, .closing>span { color: #dacbb6; }
.closing h2 { font-family: Georgia, "Times New Roman", serif; }
.closing em { color: #ead9bc; }
.closing .primary-button { color: var(--otter-dark); background: #e9dec9; }
.closing .primary-button:hover { background: #f7f4ef; }
@media(min-width:761px) and (max-width:1100px) {
  h1 { font-size: 7rem; }
  .hero-otter { right: 7%; top: 107px; width: 220px; max-width: none; }
}
@media(max-width:760px) {
  h1 { font-size: clamp(4.9rem,16vw,6.6rem); margin-bottom: 34px; }
  .hero-otter { width: 44%; max-width: 190px; top: 114px; right: -4px; }
  .hero .eyebrow { font-size: .75rem; letter-spacing: .8px; }
  .hero-description { max-width: 90%; padding-top: 9px; }
  .hero-copy { padding-bottom: 0; }
  .wordmark { font-size: 2.1rem; }
}
@media(max-width:390px) {
  h1 { font-size: 4.7rem; }
  .hero-otter { top: 112px; right: -2px; width: 44%; }
  .hero .eyebrow { font-size: .75rem; letter-spacing: .4px; }
}
@media(max-width:340px) {
  h1 { font-size: 4.15rem; }
  .hero-otter { top: 112px; width: 41%; }
  .hero .eyebrow { max-width: 260px; font-size: .75rem; }
}
@media(max-width:760px) {
  .hero-otter { width: 36%; max-width: 140px; top: 110px; }
}
@media(min-width:761px) and (max-width:1100px) {
  .hero-description { max-width: 350px; }
}