@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600&family=Patrick+Hand&display=swap');
:root{color-scheme:light;--ink:#242337;--pink:#d9167c;--hand:'Patrick Hand','Chalkboard SE','Comic Sans MS',cursive;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:#fff;font-size:16px}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 0 40%,#fff2f8 0,transparent 33%),radial-gradient(ellipse at 100% 65%,#edfaff 0,transparent 32%),#fff}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #007eab;outline-offset:7px}button{color:inherit}.masthead{max-width:1480px;margin:auto;padding:24px 40px;display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid #eeedf2}.brand{color:var(--ink);text-decoration:none;font-family:var(--hand);font-size:clamp(21px,2.3vw,32px);display:flex;gap:10px;align-items:center}.brand-note{color:var(--pink);font-size:40px}.quiet-button{border:1px solid #d9d8e1;border-radius:30px;padding:12px 18px;background:#fff;font-size:14px;min-height:46px}.quiet-button:hover{background:#f5f4f9}.library{max-width:1440px;margin:auto;padding:0 48px 28px}.intro{text-align:center;position:relative;padding:36px 30px 40px}.eyebrow{font-size:12px;letter-spacing:.2em;font-weight:700;color:#676376;margin:0 0 16px}h1{font-family:var(--hand);font-weight:400;font-size:clamp(32px,3.6vw,54px);line-height:1.13;margin:0}h1 span{color:#087f8c}.invitation{font-size:16px;color:#676376;line-height:1.5;margin:18px 0 0}.floating{position:absolute;font-family:Georgia,serif;font-size:60px;animation:float 4s ease-in-out infinite;pointer-events:none}.note-one{left:6%;top:38%;color:#00a2e3;transform:rotate(-15deg)}.note-two{right:5%;top:32%;color:#18a84e;animation-delay:-2s}.books{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}.book{padding:0;border:0;background:none;text-align:left;min-width:0;perspective:1000px;animation:arrive .8s both}.book:nth-child(2){animation-delay:.1s}.book:nth-child(3){animation-delay:.2s}.book:nth-child(4){animation-delay:.3s}.cover{display:block;position:relative;border-radius:5px 13px 13px 5px;background:#fff;box-shadow:5px 5px 0 #efedf0,8px 8px 0 #fff,10px 10px 0 #e6e3e8,0 17px 30px #29203219;transform:rotate(var(--tilt));transition:transform .35s,box-shadow .35s;transform-origin:left center}.cover:after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:inset 5px 0 7px #25203a14;pointer-events:none}.cover img{display:block;width:100%;height:auto;border-radius:inherit}.book-caption{padding:27px 0 14px;display:flex;align-items:center;justify-content:space-between;gap:8px}.book-caption small{display:block;font-size:12px;font-weight:700;color:var(--accent);letter-spacing:.12em;margin-bottom:6px}.book-caption strong{font-family:var(--hand);font-size:29px;font-weight:400}.open-icon{border:1px solid #dfdde5;border-radius:50%;width:42px;height:42px;display:grid;place-items:center;font-size:22px;background:#fff}.book:hover .cover,.book:focus-visible .cover{transform:translateY(-9px) rotate(0);box-shadow:5px 5px 0 #efedf0,8px 8px 0 #fff,10px 10px 0 #e6e3e8,0 26px 36px #29203225}.book:hover .open-icon{background:var(--accent);color:#fff;border-color:var(--accent)}footer{display:flex;align-items:center;justify-content:center;gap:20px;padding:26px 24px 32px;font-size:14px;color:#6f6a7a}.footer-line{height:1px;background:#dedbe5;width:70px}dialog{border:0;border-radius:16px;padding:0;width:min(1000px,94vw);max-height:94dvh;box-shadow:0 20px 100px #15102950;background:#fff}dialog::backdrop{background:#201b36b8;backdrop-filter:blur(5px)}.reader-toolbar{padding:16px 24px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e6e2e9;gap:16px}.reader-toolbar h2{font:400 28px var(--hand);margin:0}.reader-toolbar button span{font-size:24px;margin-left:12px}.spread{display:grid;grid-template-columns:1fr 1fr;min-height:480px;padding:24px;background:#f2eff4}.inside-cover{background:#fff;display:flex;justify-content:center;box-shadow:2px 0 8px #0002;z-index:1}.inside-cover img{max-height:65dvh;max-width:100%;object-fit:contain}.paper{background:linear-gradient(90deg,#e5e0d9 0,#fffdf8 5%,#fffdf8);padding:40px 36px;display:flex;flex-direction:column;justify-content:center;text-align:center;align-items:center;box-shadow:3px 5px 10px #0001}.paper-course{font-size:12px;letter-spacing:.16em;color:#716575;font-weight:bold}.paper-note{font-size:60px;color:var(--pink);margin-top:20px}.paper h3{font:400 clamp(30px,3vw,42px)/1.15 var(--hand);margin:10px 0 20px}.paper p{font-size:17px;line-height:1.65;max-width:280px;margin:0 0 12px;color:#665f70}.paper-signature{font:24px var(--hand);margin-top:28px}dialog[open] .spread{animation:open-book .45s ease-out}body:has(dialog[open]){overflow:hidden}@keyframes float{50%{translate:0 -12px;rotate:8deg}}@keyframes arrive{from{opacity:0;translate:0 20px}to{opacity:1;translate:0 0}}@keyframes open-book{from{opacity:0;transform:perspective(1600px) rotateY(-12deg)}to{opacity:1;transform:none}}.motion-off *,.motion-off *:before,.motion-off *:after{animation:none!important;transition:none!important}.motion-off .book:hover .cover{transform:none}
@media(min-width:1700px){.library{max-width:1680px}.masthead{max-width:1720px}.quiet-button{font-size:18px;min-height:52px}.book-caption strong{font-size:36px}.invitation{font-size:20px}}
@media(max-width:1000px){.books{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px}.library{max-width:820px;padding:0 36px 20px}.floating{font-size:40px}.note-one{left:0}.note-two{right:0}.masthead{padding:18px 24px}.intro{padding-top:32px}}
@media(max-width:600px){.masthead{padding:14px 16px;flex-wrap:wrap;gap:10px}.brand{font-size:25px}.brand-note{font-size:30px}.quiet-button{font-size:14px;padding:10px 14px}.library{padding:0 28px 12px}.intro{padding:32px 0}.eyebrow{font-size:11px;letter-spacing:.12em}h1{font-size:34px}.invitation{font-size:16px;max-width:250px;margin:16px auto 0}.floating{display:none}.books{grid-template-columns:1fr;gap:28px;max-width:340px;margin:auto}.book-caption{padding-top:22px}.book-caption strong{font-size:32px}footer{font-size:12px;gap:10px}.footer-line{width:24px}dialog{width:94vw;max-height:94dvh}.reader-toolbar{padding:14px}.reader-toolbar h2{font-size:24px}.spread{display:block;padding:14px}.inside-cover{display:none}.paper{min-height:420px;padding:32px 24px;background:#fffdf8}.paper h3{font-size:36px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
/* A little magic around each book, with gentle, staggered light. */
.cover-magic{position:absolute;inset:-12px;pointer-events:none;z-index:2;overflow:visible}.cover-magic>span{position:absolute;display:block;line-height:1;animation-delay:var(--delay);font-family:Georgia,serif}.magic-note{font-size:32px;color:var(--accent);text-shadow:0 2px 0 #fff,0 5px 10px #ffffffbd;animation:note-drift 6s ease-in-out infinite}.magic-star{font-size:29px;color:#e9af00;text-shadow:0 0 7px #fff,0 0 16px #ffda6490;animation:star-glow 4.8s ease-in-out infinite}.particle-0{left:-3px;top:23%}.particle-1{right:-4px;top:69%}.particle-2{right:8px;top:6%}.particle-3{left:8px;top:79%;font-size:24px}.particle-4{right:8px;top:44%;font-size:20px}@keyframes note-drift{0%,100%{transform:translateY(4px) rotate(-8deg);opacity:.65}50%{transform:translateY(-13px) rotate(9deg);opacity:1}}@keyframes star-glow{0%,100%{transform:scale(.65) rotate(-12deg);opacity:.25}50%{transform:scale(1.15) rotate(12deg);opacity:.95}}.motion-off .cover-magic .magic-star{opacity:.65}.motion-off .cover-magic .magic-note{opacity:.8}@media(max-width:600px){.magic-note{font-size:35px}.magic-star{font-size:30px}}@media(prefers-reduced-motion:reduce){.cover-magic>span{animation:none!important}}