@layer components{.desk{--bw:3px;--lift:4px;font-synthesis:none;background-color:var(--paper);background-image:linear-gradient(to right, var(--grid-line) 1px, transparent 1px), linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);background-size:24px 24px}@media (min-width:1024px){.desk{--lift:6px}}.ko-display{font-family:var(--font-display-ko);letter-spacing:-.01em;word-break:keep-all;font-weight:400}.num-display{font-family:var(--font-headline);letter-spacing:-.02em;font-variant-numeric:tabular-nums;font-weight:400}.ink-box{border:var(--bw) solid var(--ink);box-shadow:var(--lift) var(--lift) 0 0 var(--ink)}.ink-line{border:var(--bw) solid var(--ink)}.ink-shadow-sm{box-shadow:3px 3px 0 0 var(--ink)}.ink-btn{border:var(--bw) solid var(--ink);box-shadow:var(--lift) var(--lift) 0 0 var(--ink);transition:transform 70ms linear,box-shadow 70ms linear,background-color 70ms linear}.ink-btn:hover{box-shadow:calc(var(--lift) + 2px) calc(var(--lift) + 2px) 0 0 var(--ink);transform:translate(-2px,-2px)}.ink-btn:active,.ink-btn[aria-checked=true],.ink-btn[aria-pressed=true]{transform:translate(var(--lift), var(--lift));box-shadow:0 0 0 0 var(--ink)}.ink-btn:focus-visible,.ink-field:focus-visible{outline:var(--bw) dashed var(--ink);outline-offset:4px}.ink-chip{border:2px solid var(--ink);box-shadow:3px 3px 0 0 var(--ink);transition:transform 70ms linear,box-shadow 70ms linear}.ink-chip:hover{box-shadow:4px 4px 0 0 var(--ink);transform:translate(-1px,-1px)}.ink-chip:active,.ink-chip[aria-checked=true],.ink-chip[aria-pressed=true]{box-shadow:0 0 0 0 var(--ink);transform:translate(3px,3px)}.ink-chip:focus-visible{outline:2px dashed var(--ink);outline-offset:3px}.ink-field{border:var(--bw) solid var(--ink);background:var(--card);color:var(--card-foreground);transition:background-color 70ms linear}.ink-field:focus,.ink-field:focus-visible{background:color-mix(in oklch, var(--hl-yellow) 35%, var(--card))}.dark .ink-field:focus,.dark .ink-field:focus-visible{background:var(--muted)}.hl{background-image:linear-gradient(var(--hl-c,var(--hl-yellow)), var(--hl-c,var(--hl-yellow)));-webkit-box-decoration-break:clone;box-decoration-break:clone;background-position:0 88%;background-repeat:no-repeat;background-size:100% .62em;margin:0 -.04em;padding:0 .08em}.dark .hl{color:var(--on-hl);background-position:0 70%;background-size:100% .92em}.hl-pink{--hl-c:var(--hl-pink)}.hl-lime{--hl-c:var(--hl-lime)}.hl-full{background-position:0 0;background-size:100% 100%}@media (prefers-reduced-motion:no-preference){.hl-draw{animation:.42s steps(7,end) both hl-draw;animation-delay:var(--hl-delay,.25s)}}.lift-card{transition:transform 90ms linear,box-shadow 90ms linear}@media (hover:hover){.lift-card:hover{box-shadow:calc(var(--lift) + 3px) calc(var(--lift) + 3px) 0 0 var(--ink);transform:translate(-3px,-3px)}}@keyframes hl-draw{0%{background-size:0% .62em}}.dark .hl-draw{animation-name:hl-draw-dark}@keyframes hl-draw-dark{0%{background-size:0% .92em}}.sticker{border:var(--bw) solid var(--ink);box-shadow:3px 3px 0 0 var(--ink);color:var(--on-hl)}.sticker-round{border-radius:999px}@media (prefers-reduced-motion:no-preference){.sticker-slap{animation:.22s steps(4,end) both sticker-slap}.wobble:hover{animation:.26s steps(3,end) wobble}}@keyframes sticker-slap{0%{transform:translate(10px, -14px) rotate(var(--tilt,-6deg)) scale(1.25);box-shadow:10px 10px 0 0 var(--ink)}to{transform:rotate(var(--tilt,-6deg)) scale(1)}}@keyframes wobble{0%{transform:rotate(var(--tilt,0deg))}50%{transform:rotate(calc(var(--tilt,0deg) * -1))}to{transform:rotate(var(--tilt,0deg))}}.tilt{transform:rotate(var(--tilt,-3deg))}.flag{border:var(--bw) solid var(--ink);color:var(--on-hl);border-bottom:0}.book{border:var(--bw) solid var(--ink);color:var(--on-hl);box-shadow:var(--lift) var(--lift) 0 0 var(--ink);transform:translateX(var(--shift,0)) rotate(var(--tilt,0deg));transition:transform 90ms linear,box-shadow 90ms linear}.book:hover{transform:translateX(calc(var(--shift,0px) - 8px)) rotate(var(--tilt,0deg))}.book[aria-pressed=true]{transform:translateX(calc(var(--shift,0px) - 22px)) rotate(0deg);box-shadow:calc(var(--lift) + 6px) calc(var(--lift) + 6px) 0 0 var(--ink)}.book:focus-visible{outline:var(--bw) dashed var(--ink);outline-offset:4px}.book-pages{background-image:repeating-linear-gradient(to bottom, var(--card) 0 3px, var(--ink) 3px 4px);border-left:var(--bw) solid var(--ink)}.ticker{border-block:var(--bw) solid var(--ink);overflow:hidden}.ticker-track{width:max-content;display:flex}@media (prefers-reduced-motion:no-preference){.ticker-track{animation:38s linear infinite ticker}.ticker:hover .ticker-track{animation-play-state:paused}}@keyframes ticker{to{transform:translate(-50%)}}.tt-grid{border:var(--bw) solid var(--ink);background:var(--ink);gap:2px}.tt-cell{transition:background-color 60ms linear}@media (prefers-reduced-motion:no-preference){.tt-cell[aria-pressed=true]{animation:.16s steps(3,end) tt-pop}}@keyframes tt-pop{0%{transform:scale(.82)}}.slip-perf{border-top:var(--bw) dashed var(--ink)}.punch{background:var(--paper);border:var(--bw) solid var(--ink)}.photo-frame img{filter:grayscale()contrast(1.15);mix-blend-mode:multiply}.dark .photo-frame img{mix-blend-mode:normal}.card-row:focus-within{background:color-mix(in oklch, var(--hl-yellow) 30%, var(--card))}.dark .card-row:focus-within{background:var(--muted)}.hand{font-family:var(--font-hand);letter-spacing:0;font-weight:400}.spine-row{scrollbar-width:none}.spine{border:var(--bw) solid var(--ink);color:var(--on-hl);box-shadow:3px 3px 0 0 var(--ink);transition:transform 70ms linear,box-shadow 70ms linear}.spine.text-primary-foreground{color:var(--primary-foreground)}.spine[aria-selected=true]{box-shadow:0 0 0 0 var(--ink);outline:var(--bw) solid var(--ink);outline-offset:2px;transform:translate(3px,3px)}@media (min-width:1024px){.spine{box-shadow:none;border-bottom-width:0;transform:translateY(6px)}.spine:hover{transform:translateY(2px)}.spine[aria-selected=true]{box-shadow:4px 0 0 0 var(--ink);outline:0;transform:translateY(-8px)}}.spine:focus-visible{outline:var(--bw) dashed var(--ink);outline-offset:3px}.spread{--lift:8px}.page-left{border-bottom:var(--bw) solid var(--ink)}@media (min-width:1024px){.page-left{border-bottom:0;border-right:var(--bw) solid var(--ink);box-shadow:inset -14px 0 0 0 var(--muted)}.page-right{box-shadow:inset 14px 0 0 0 var(--muted)}}@media (prefers-reduced-motion:no-preference){.spread .page-right{transform-origin:0;animation:.24s steps(4,end) both page-turn}.spread .page-left{animation:.16s steps(2,end) both page-in}}@keyframes page-turn{0%{transform:perspective(1400px)rotateY(-70deg)}}@keyframes page-in{0%{opacity:.4}}.ruled{background-image:linear-gradient(to bottom, transparent calc(2.4rem - 1px), var(--grid-line) calc(2.4rem - 1px));background-size:100% 2.4rem}.page-hl{color:inherit;background-color:#0000;background-position:0 75%;background-size:100% .8em}.dark .page-hl{color:var(--on-hl);background-position:0 60%;background-size:100% 1.05em}.pen-underline{text-decoration-line:underline;text-decoration-style:wavy;-webkit-text-decoration-color:var(--primary);text-decoration-color:var(--primary);text-underline-offset:5px;text-decoration-thickness:2px}.margin-note{color:var(--primary);transform:rotate(-8deg)}.ring-mark{border:2.5px solid var(--primary);border-radius:50%}.stamp{border:var(--bw) solid var(--hl-pink);outline:2px solid var(--hl-pink);outline-offset:3px;color:var(--hl-pink);background:color-mix(in oklch, var(--hl-pink) 10%, var(--card));border-radius:999px}.postit{border:2px solid var(--ink);box-shadow:4px 4px 0 0 var(--ink);position:relative}.postit:before{content:"";background:color-mix(in oklch, var(--card) 70%, transparent);border:2px solid var(--ink);width:46px;height:16px;position:absolute;top:-10px;left:50%;translate:-50%;rotate:4deg}.grade-tab{border:var(--bw) solid var(--ink);box-shadow:3px 3px 0 0 var(--ink);color:var(--on-hl)}.grade-tab.text-primary-foreground{color:var(--primary-foreground)}.pocket{border:var(--bw) solid var(--background)}.checkout.ink-box{border-color:var(--background);box-shadow:10px 10px 0 0 var(--hl-pink)}.checkout-row{border-bottom:2px solid var(--ink);min-height:3.6rem}.grade-stamp{border:2.5px solid;border-radius:999px;rotate:-12deg}.step-tile{border:var(--bw) solid var(--background);box-shadow:4px 4px 0 0 var(--background)}.step-tile.text-on-hl{color:var(--on-hl)}.guide-card{border:var(--bw) solid var(--background);box-shadow:var(--lift) var(--lift) 0 0 var(--background)}}