.board{--slate:#1e2b26;--slate-deep:#17221e;--wood:#6b4a2e;--wood-dark:#4a321e;--chalk:#eef1ea;--chalk-dim:#b9c2ba;--chalk-faint:#7f8c84;--chalk-yellow:#f4dd6a;--chalk-green:#9ee6b2;--chalk-pink:#f7a9c1;--chalk-blue:#a9cdf7;--chalk-orange:#f8bf85;--paper:#fffdf6;--rule:#dce7f3;--margin:#f2a7ae;--paper-ink:#1d2238;--pencil:#626a7e;--pen:#2b4fd8;--redpen:#d2283a;--tape:#ffd678b3;--note-yellow:#fff4b3;--note-blue:#ddebff;--note-green:#ddf7e5;--note-pink:#ffe0ea;isolation:isolate;min-height:100%;font-family:var(--font-read), system-ui, sans-serif;color:var(--chalk);background-color:var(--slate);background-image:radial-gradient(ellipse 60% 30% at 18% 12%, #ffffff0b, transparent 70%), radial-gradient(ellipse 45% 25% at 82% 45%, #ffffff09, transparent 70%), radial-gradient(ellipse 70% 20% at 50% 90%, #ffffff08, transparent 70%), radial-gradient(circle at 50% 0%, #22322c, var(--slate-deep) 85%);font-size:18px;line-height:1.55;position:relative}@media (max-width:600px){.board{font-size:16px}}.board a,.board a:hover{color:inherit}.board :focus-visible{outline:2px dashed var(--chalk-yellow);outline-offset:3px}.board-wrap{max-width:1060px;margin:0 auto;padding:0 24px}@media (max-width:600px){.board-wrap{padding:0 16px}}.board-frame{background:linear-gradient(var(--wood), var(--wood-dark));height:14px;box-shadow:0 2px 6px #0006}.board .chalk{text-shadow:0 0 1px #eef1ea8c,0 0 6px #eef1ea1f}.board-nav{justify-content:space-between;align-items:center;gap:16px;padding:18px 0;display:flex}.board-brand{font-family:var(--font-chalk), cursive;align-items:center;gap:10px;font-size:1.45rem;text-decoration:none;display:flex}.board-links{font-family:var(--font-hand), cursive;align-items:center;gap:22px;font-size:1.02rem;display:flex}.board-links>a{color:var(--chalk-dim);text-decoration:none}.board-links>a:hover{color:var(--chalk)}.board-links a.text-sm,.board-links button.text-sm{color:var(--chalk-dim);font-size:1.02rem}@media (max-width:720px){.board-links .hide-sm{display:none}}.board-brand,.board-links>*{white-space:nowrap}@media (max-width:480px){.board-links{gap:16px}.board-nav:has(.board-links button) .board-brand-text{display:none}}.board-hero{grid-template-columns:1.15fr .85fr;align-items:center;gap:48px;padding:48px 0 64px;display:grid}@media (max-width:860px){.board-hero{grid-template-columns:1fr;gap:40px;padding:28px 0 44px}}.board-hero h1{font-family:var(--font-chalk), cursive;margin:0 0 22px;font-size:clamp(2.6rem,6vw,4.4rem);font-weight:400;line-height:1.05}.board-word{white-space:nowrap;position:relative}.board-word svg{width:104%;height:.32em;position:absolute;bottom:-.12em;left:-2%;overflow:visible}.board-hero p{color:#dce2da;max-width:34ch;margin:0 0 30px;font-size:1.3rem}.board-hero p b{color:var(--chalk)}.board-write{clip-path:inset(-.15em 100% -.45em -.1em);animation:1.1s ease-out forwards board-write;display:inline-block}.board-write.second{animation-delay:.9s}.board-draw path{stroke-dasharray:260;stroke-dashoffset:260px;animation:.8s ease-out 1.9s forwards board-draw}@keyframes board-write{to{clip-path:inset(-.15em -.1em -.45em)}}.board-headline{display:grid}.board-headline-line{visibility:hidden;grid-area:1/1}.board-headline-line.is-active{visibility:visible}.board-headline-line.is-erasing{animation:.55s ease-in forwards board-erase}@keyframes board-erase{0%{clip-path:inset(-.15em -.1em -.45em);opacity:1}to{clip-path:inset(-.15em -.1em -.45em 100%);opacity:.3}}@keyframes board-draw{to{stroke-dashoffset:0}}.board-btns{flex-wrap:wrap;gap:14px;display:flex}.board-btn{min-height:48px;font-family:var(--font-hand), cursive;border-radius:10px 14px 9px 13px/13px 9px 14px 10px;align-items:center;padding:0 22px;font-size:1.1rem;font-weight:700;text-decoration:none;display:inline-flex}.board .board-btn-solid{background:var(--chalk-yellow);color:var(--slate-deep);box-shadow:2px 3px #00000059}.board .board-btn-solid:hover{color:var(--slate-deep);transform:translateY(-1px)}.board .board-btn-line{border:2px solid var(--chalk-dim);color:var(--chalk)}.board .board-btn-line:hover{border-color:var(--chalk)}.board-doodle svg{width:100%;height:auto;display:block}.board-doodle text{font-family:var(--font-chalk), cursive;fill:var(--chalk);font-size:21px}.board-hero{position:relative;overflow-x:clip}.board-demos{display:grid}.board-demo{visibility:hidden;grid-area:1/1}.board-demo.is-active{visibility:visible}.board-demo.is-erasing{animation:.55s ease-in .3s forwards board-erase}.board-hero .board-hero-labels{color:var(--chalk-orange);margin:0 0 12px;font-size:1.05rem;display:grid}.board-hero-label{visibility:hidden;grid-area:1/1}.board-hero-label.is-active{visibility:visible}.board-hero-label.is-erasing{animation:.55s ease-in forwards board-erase}.board-hero-label .board-write{animation-duration:.5s}.board-doodle .dim{fill:var(--chalk-dim)}.board-doodle .hl-yellow{fill:var(--chalk-yellow)}.board-doodle .hl-orange{fill:var(--chalk-orange)}.board-doodle .hl-blue{fill:var(--chalk-blue)}.board-doodle .draw{fill:none;stroke:var(--chalk);stroke-width:2.4px;stroke-linecap:round;stroke-linejoin:round}.board-doodle .draw.thin{stroke:var(--chalk-faint);stroke-width:1.8px}.board-doodle .draw.faint{stroke:var(--chalk-faint);stroke-width:2px}.board-doodle .draw.strong{stroke:var(--chalk-yellow);stroke-width:3.4px}.board-doodle .draw.orange{stroke:var(--chalk-orange)}.board-doodle .draw.blue{stroke:var(--chalk-blue)}.board-doodle .blackbox{fill:#17221e;stroke:var(--chalk);stroke-width:2.4px}.board-doodle .draw{stroke-dasharray:1;stroke-dashoffset:1px;animation:board-dash var(--t,.7s) ease-out var(--d,0s) forwards}.board-doodle .write{clip-path:inset(-.5em 100% -.6em -.3em);animation:board-chalk var(--t,.6s) ease-out var(--d,0s) forwards}.board-doodle .sweep{fill:#f4dd6a47;transform-box:fill-box;transform-origin:0;animation:board-grow var(--t,.8s) ease-out var(--d,0s) forwards;transform:scaleX(0)}.board-doodle .rub{animation:board-rub .6s ease-in var(--r,0s) forwards}@keyframes board-dash{to{stroke-dashoffset:0}}@keyframes board-chalk{to{clip-path:inset(-.5em -.3em -.6em)}}@keyframes board-rub{0%{clip-path:inset(-20px)}to{clip-path:inset(-20px -20px -20px 100%);opacity:.1}}.board-duster{z-index:2;pointer-events:none;background:linear-gradient(#8a6040 0 55%,#4a4f55 55% 100%);border-radius:7px;width:120px;height:38px;animation:.85s ease-in-out forwards board-duster;position:absolute;top:42%;left:-140px;transform:rotate(-4deg);box-shadow:0 6px 14px #00000073}@keyframes board-duster{to{left:calc(100% + 20px)}}.board-demo-dots{gap:12px;margin-top:12px;display:flex}.board-demo-dots button{border:2px solid var(--chalk-dim);cursor:pointer;background:0 0;border-radius:50% 46% 52% 48%;width:14px;height:14px;padding:0}.board-demo-dots button[aria-pressed=true]{background:var(--chalk-yellow);border-color:var(--chalk-yellow)}@keyframes board-grow{to{transform:scaleX(1)}}.board-section{padding:52px 0;scroll-margin-top:16px}.board-label{font-family:var(--font-hand), cursive;color:var(--chalk-orange);margin:0 0 6px;font-size:1.05rem}.board-section h2{font-family:var(--font-chalk), cursive;margin:0 0 30px;font-size:clamp(2rem,4vw,2.7rem);font-weight:400;line-height:1.1}.board-u{background:linear-gradient(#0000 70%,#f4dd6a73 70% 92%,#0000 92%);padding:0 4px}.board-steps{grid-template-columns:repeat(3,1fr);gap:56px;margin:0;padding:0;list-style:none;display:grid}.board-steps li{position:relative}.board-steps li:not(:last-child):after{content:"→";font-family:var(--font-chalk), cursive;color:var(--chalk-faint);font-size:2rem;position:absolute;top:18px;right:-44px}.board-step-doodle{fill:none;stroke:currentColor;stroke-width:2.2px;stroke-linecap:round;stroke-linejoin:round;width:58px;height:48px;margin-bottom:8px;display:block}.board-steps h3{font-family:var(--font-chalk), cursive;margin:0 0 6px;font-size:1.9rem;font-weight:400}.board-steps p{color:var(--chalk-dim);margin:0}.board .board-step-link{font-family:var(--font-hand), cursive;color:currentColor;border-bottom:2px dashed;margin-top:10px;text-decoration:none;display:inline-block}.board-steps li.is-next{opacity:.75}.board-steps li.is-next .board-step-doodle{stroke-dasharray:4 5}@media (max-width:760px){.board-steps{grid-template-columns:1fr;gap:40px}.board-steps li:not(:last-child):after{content:"↓";font-size:1.6rem;inset:auto auto -38px 8px}}.board-support{font-family:var(--font-hand), cursive;color:var(--chalk-dim);margin:30px 0 0;font-size:1.05rem}.board .board-support a{color:var(--chalk-yellow);border-bottom:2px dashed;text-decoration:none}.board-notes{grid-template-columns:repeat(2,1fr);gap:28px;max-width:720px;display:grid}@media (max-width:480px){.board-notes{grid-template-columns:1fr}}.board-note{min-height:190px;color:var(--paper-ink);flex-direction:column;padding:26px 18px 18px;text-decoration:none;transition:transform .2s;display:flex;position:relative;box-shadow:0 8px 18px #0006}.board-note:nth-child(4n+1){background:var(--note-yellow);transform:rotate(-1.6deg)}.board-note:nth-child(4n+2){background:var(--note-blue);transform:rotate(1.2deg)}.board-note:nth-child(4n+3){background:var(--note-green);transform:rotate(-.8deg)}.board-note:nth-child(4n+4){background:var(--note-pink);transform:rotate(1.8deg)}.board a.board-note{color:var(--paper-ink)}.board a.board-note:hover{color:var(--paper-ink);transform:rotate(0)translateY(-4px)}.board-pin{background:var(--redpen);border-radius:50%;width:14px;height:14px;position:absolute;top:8px;left:50%;transform:translate(-50%);box-shadow:0 2px 2px #0006}.board-note h3{font-family:var(--font-chalk), cursive;margin:6px 0;font-size:1.45rem;font-weight:400;line-height:1.15}.board-note p{color:var(--pencil);flex:1;margin:0 0 12px;font-size:.9rem}.board-note .go{font-family:var(--font-hand), cursive;color:var(--pen);font-weight:700}.board-tray{background:linear-gradient(var(--wood), var(--wood-dark));height:22px;margin-top:40px;position:relative;box-shadow:0 -2px 6px #00000059}.board-tray span{border-radius:5px;height:9px;position:absolute;top:-8px}.board-tray .s1{background:var(--chalk);width:46px;left:18%}.board-tray .s2{background:var(--chalk-yellow);width:30px;left:24%;transform:rotate(-4deg)}.board-tray .s3{background:var(--chalk-pink);width:38px;left:70%}.board-tray .eraser{background:#3a3a44;border-top:6px solid #a9845b;border-radius:3px;width:86px;height:18px;top:-16px;right:12%}.board-footer{background:var(--wood-dark);color:#e9d9c4;font-size:.9rem}.board-footer .board-wrap{flex-wrap:wrap;justify-content:space-between;gap:12px 24px;padding-top:18px;padding-bottom:22px;display:flex}.board-footer nav{flex-wrap:wrap;gap:6px 18px;display:flex}.board .board-footer a{color:#e9d9c4;text-decoration:none}.board .board-footer a:hover{color:#fff}@media (prefers-reduced-motion:reduce){.board-write{clip-path:none;animation:none}.board-draw path,.board-doodle .draw{stroke-dashoffset:0;animation:none}.board-doodle .write{clip-path:none;animation:none}.board-doodle .sweep{animation:none;transform:none}.board-doodle .rub{opacity:0;animation:none}.board-duster{display:none}.board-note{transition:none}}.board-top{padding:0 24px;position:relative}.board-top .board-nav{padding:12px 0 16px}.board-top-line{width:100%;height:12px;position:absolute;bottom:0;left:0}.board-top-scribbles{pointer-events:none;width:470px;height:40px;position:absolute;top:50%;left:50%;transform:translate(-50%,-58%)}@media (min-width:1240px){.board-top{padding:0 36px 0 112px}}@media (max-width:1399px){.board-top-scribbles{display:none}}@media (max-width:600px){.board-top{padding:0 16px}}.board-margin-left{pointer-events:none;z-index:-1;width:96px;position:absolute;top:14px;bottom:0;left:0;overflow:hidden}:is(.board-top-line,.board-top-scribbles,.board-margin-left svg){color:var(--chalk-faint);opacity:.6}:is(.board-top,.board-margin-left) text{fill:currentColor;font-family:var(--font-chalk), cursive;font-size:19px}:is(.board-top,.board-margin-left) text.small{font-size:14px}:is(.board-top,.board-margin-left) .line{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round}:is(.board-top,.board-margin-left) circle{fill:none;stroke:currentColor;stroke-width:2px}@media (max-width:1239px){.board-margin-left{display:none}}.board-page{padding-top:36px}.board .board-sheet{color:var(--ink);border-radius:2px;flex:none;margin:12px 0 0;padding:40px 28px 36px;display:block;position:relative;box-shadow:0 14px 30px #00000073}.board .board-sheet:after{content:"";background:var(--tape);pointer-events:none;width:110px;height:24px;margin-left:-55px;position:absolute;top:-11px;left:50%;transform:rotate(-2deg)}@media (min-width:760px){.board .board-sheet{padding:48px 48px 44px 92px}}.board-sheet-doc{max-width:820px;transform:rotate(-.3deg);margin-left:auto!important;margin-right:auto!important}.board .board-sheet a{color:var(--pen)}.board-support-page{max-width:760px;padding-top:12px}.board-support-page h1{font-family:var(--font-chalk), cursive;margin:0 0 22px;font-size:clamp(2.3rem,5vw,3.4rem);font-weight:400;line-height:1.1}.board-support-page>p:not(.board-label){color:#dce2da;max-width:60ch;margin:0 0 16px}.board .board-sheet-form{margin-top:36px;padding:36px 24px 28px;transform:rotate(.3deg)}.board .board-sheet-form:before{display:none}@media (min-width:760px){.board .board-sheet-form{padding:40px 36px 32px}}body:has(.board-page){background:#4a321e}
