:root{--paper:#fbf3df;--paper-2:#fffaf0;--ink:#2b2724;--ink-soft:#5b534c;--line:#cdbfa0;--rule:#d9e6f2;--crayon-red:#ff5a5f;--crayon-blue:#3aa0ff;--crayon-yellow:#ffd23f;--crayon-green:#4cc38a;--crayon-grape:#9b6cf0;--tape:#ffde788c;--blue-ink:#1668c4;--red-ink:#d3303a;--display:"Gloria Hallelujah", "Comic Sans MS", cursive;--body:"Shantell Sans", "Comic Sans MS", cursive;--doodle:255px 12px 225px 15px / 15px 225px 18px 255px;--doodle-2:18px 240px 16px 230px / 230px 16px 240px 14px;--rail-w:clamp(148px, 19vw, 236px)}*{box-sizing:border-box}html,body{margin:0;padding:0}body{font-family:var(--body);color:var(--ink);background-color:var(--paper);background-image:repeating-linear-gradient(to bottom, transparent 0 31px, var(--rule) 31px 32px), radial-gradient(120% 80% at 50% -10%, #fff9, transparent 60%), radial-gradient(140% 120% at 50% 120%, #785a281f, transparent 55%);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;background-attachment:fixed}.paper-grain{pointer-events:none;z-index:0;opacity:.5;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");position:fixed;inset:0}button{color:inherit;cursor:pointer;font-family:inherit}code{background:#0000000f;border-radius:5px;padding:.05em .35em;font-family:Shantell Sans,monospace}.stage{z-index:1;min-height:100vh;padding:clamp(18px,3vw,44px);position:relative}.wall{width:100%}.reading-layout{align-items:flex-start;gap:clamp(16px,3vw,40px);width:100%;display:flex}.rail{flex:0 0 var(--rail-w);scrollbar-width:thin;min-width:0;height:calc(100vh - 2*clamp(18px,3vw,44px));padding:0 6px;position:sticky;top:clamp(18px,3vw,44px);overflow:hidden auto}.masthead{-webkit-user-select:none;user-select:none;margin:0 0 clamp(18px,3vw,38px)}.stage.is-reading .masthead{cursor:pointer;margin-bottom:18px}.masthead__title{font-family:var(--display);color:var(--ink);text-shadow:3px 3px 0 var(--crayon-yellow), 6px 6px 0 #00000014;margin:0;font-size:clamp(2.4rem,7vw,5.2rem);font-weight:400;line-height:.95;transition:font-size .4s,transform .4s;position:relative;transform:rotate(-2deg)}.stage.is-reading .masthead__title{text-shadow:2px 2px 0 var(--crayon-yellow);font-size:clamp(1.3rem,2vw,1.7rem)}.ink-blob{background:var(--crayon-red);vertical-align:baseline;border-radius:64% 36% 57% 43%/43% 58% 42% 57%;width:.55em;height:.55em;margin-right:.18em;display:inline-block;transform:rotate(8deg)}.masthead__tag{font-family:var(--body);color:var(--ink-soft);margin:.5em 0 0 .3em;font-size:clamp(.95rem,1.6vw,1.2rem);font-style:italic;transform:rotate(-1deg)}.stage.is-reading .masthead__tag{display:none}.shelf__series{margin-bottom:clamp(22px,3vw,40px)}.shelf__heading{font-family:var(--display);color:var(--blue-ink);align-items:center;gap:.6em;margin:0 0 .5em;font-size:clamp(1.1rem,2.4vw,1.7rem);font-weight:400;transition:font-size .35s,gap .35s;display:flex}.stage.is-reading .shelf__heading{gap:.4em;font-size:.95rem}.shelf__rule{background:repeating-linear-gradient(90deg, var(--line) 0 10px, transparent 10px 16px);border-radius:3px;flex:1;height:3px}.shelf__blurb{color:var(--ink-soft);max-width:46ch;margin:-.2em 0 .9em .2em;font-style:italic}.stage.is-reading .shelf__blurb{display:none}.cards{grid-template-columns:repeat(auto-fit,minmax(170px,210px));justify-content:center;gap:clamp(18px,2.4vw,34px);margin:0;padding:0;list-style:none;display:grid}.stage.is-reading .cards{flex-direction:column;gap:14px;display:flex}.card-slot{list-style:none}.card{background:var(--paper-2);border-radius:var(--doodle);outline:2.5px solid var(--ink);outline-offset:-2px;width:100%;transform:rotate(var(--tilt,0deg));border:none;padding:12px 12px 14px;transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .3s;display:block;position:relative;box-shadow:0 1px #0000000a,2px 6px 14px #46321429}@media (hover:hover){.card:hover{outline-color:var(--crayon-red);z-index:3;transform:rotate(0)translateY(-6px)scale(1.035);box-shadow:4px 12px 26px #46321442}}.card:focus-visible{outline-color:var(--crayon-red);box-shadow:0 0 0 3px var(--paper), 0 0 0 6px var(--blue-ink);z-index:3;transform:rotate(0)translateY(-4px)scale(1.03)}.stage.is-reading .card{border-radius:var(--doodle-2);align-items:center;gap:9px;padding:7px 8px 8px;display:flex;transform:rotate(0)}@media (hover:hover){.stage.is-reading .card:hover{transform:translate(3px)}}.card-slot.is-active .card{outline-color:var(--crayon-red);background:#fff;box-shadow:3px 6px 16px #ff5a5f4d}.card__tape{background:var(--tape);border-left:1px dashed #0000001f;border-right:1px dashed #0000001f;width:58px;height:22px;position:absolute;top:-11px;left:50%;transform:translate(-50%)rotate(-4deg);box-shadow:0 1px 3px #0000001f}.stage.is-reading .card__tape{display:none}.card__frame{border-radius:var(--doodle-2);outline:2px solid var(--ink);outline-offset:-2px;aspect-ratio:4/5;background:#fff;display:block;overflow:hidden}.stage.is-reading .card__frame{aspect-ratio:1;border-radius:10px 14px 10px 16px/14px 10px 16px;flex:0 0 42px;width:42px;height:42px}.card__cover{object-fit:cover;width:100%;height:100%;display:block}.card__label{text-align:center;min-width:0;margin-top:9px;display:block}.stage.is-reading .card__label{text-align:left;flex:1;margin-top:0}.card__title{font-family:var(--display);color:var(--ink);font-size:.95rem;line-height:1.15;transition:font-size .3s;display:block}.stage.is-reading .card__title{white-space:nowrap;text-overflow:ellipsis;font-size:.78rem;overflow:hidden}.card__meta{color:var(--ink-soft);margin-top:2px;font-size:.75rem;display:block}.stage.is-reading .card__meta{font-size:.65rem}.empty{color:var(--ink-soft);max-width:40ch;font-size:1.1rem}.reader-wrap{flex:auto;align-self:stretch;min-width:0}.reader{scrollbar-width:thin;height:calc(100vh - 2*clamp(18px,3vw,44px));padding:4px clamp(8px,3vw,48px) 60px;overflow-y:auto}.reader__back{border:2.5px solid var(--ink);background:var(--crayon-yellow);font-family:var(--display);border-radius:14px 6px 16px 8px/8px 16px 6px 14px;padding:7px 16px;font-size:.85rem;transition:transform .15s,box-shadow .15s;box-shadow:2px 3px #0000002e}.reader__back:hover{transform:translate(-1px,-1px);box-shadow:3px 4px #0003}.reader__back:active{transform:translate(1px,2px);box-shadow:1px 1px #0003}.reader__back:focus-visible,.masthead[role=button]:focus-visible{outline:3px dashed var(--ink);outline-offset:4px}.reader__head{text-align:center;margin:22px 0 30px}.reader__title{font-family:var(--display);color:var(--ink);text-shadow:2px 2px 0 var(--crayon-blue);margin:0;font-size:clamp(1.9rem,4.5vw,3.4rem);font-weight:400;line-height:1;transform:rotate(-1.2deg)}.reader__byline{color:var(--ink-soft);justify-content:center;align-items:center;gap:14px;margin:16px 0 0;font-size:.92rem;display:flex}.reader__count{background:var(--crayon-green);color:var(--ink);outline:2px solid var(--ink);outline-offset:-2px;border-radius:999px;padding:2px 12px}.reader__desc{max-width:52ch;color:var(--ink-soft);margin:16px auto 0;font-size:1.05rem;font-style:italic;line-height:1.5}.pages{flex-direction:column;align-items:center;gap:clamp(26px,4vw,56px);margin-top:10px;display:flex}.page{border-radius:var(--doodle);outline:3px solid var(--ink);outline-offset:-3px;background:#fff;width:100%;max-width:760px;margin:0;padding:clamp(10px,1.6vw,18px);position:relative;box-shadow:0 2px #0000000d,6px 14px 30px #46321438}.page:nth-child(odd){transform:rotate(-.5deg)}.page:nth-child(2n){transform:rotate(.5deg)}.page__img{border-radius:6px;width:100%;height:auto;display:block}.page__num{background:var(--red-ink);color:#fff;width:38px;height:38px;font-family:var(--display);outline:2.5px solid var(--ink);outline-offset:-2px;border-radius:60% 40% 55% 45%/45% 55%;place-items:center;font-size:.95rem;display:grid;position:absolute;bottom:-14px;right:-10px;transform:rotate(6deg)}.reader__end{text-align:center;flex-direction:column;align-items:center;gap:22px;margin-top:clamp(36px,6vw,70px);display:flex}.reader__end-mark{font-family:var(--display);color:var(--crayon-grape);text-shadow:2px 2px #0000001a;font-size:clamp(1.6rem,4vw,2.6rem);transform:rotate(-3deg)}.reader__back--bottom{background:var(--blue-ink);color:#fff}@media (width<=720px){.reading-layout{flex-direction:column}.rail{flex:none;width:100%;height:auto;padding:0;position:static;overflow:visible}.stage.is-reading .cards{-webkit-overflow-scrolling:touch;flex-flow:row;gap:12px;margin:-10px -6px -18px;padding:10px 6px 18px;overflow-x:auto}.stage.is-reading .card{flex:none;width:auto}.stage.is-reading .card__title{max-width:130px}.reader{height:auto;overflow:visible}}@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation-duration:.01ms!important}}