.shelf{--paper:oklch(98.6% .006 85);--paper-thermal:oklch(97.4% .003 95);--paper-pink:oklch(88.5% .055 12);--paper-manila:oklch(87% .068 84);--paper-kraft:oklch(70% .07 66);--paper-greenbar:oklch(93.5% .035 152);--ink:oklch(22% .012 60);--ink-soft:oklch(22% .012 60/.62);--ink-faint:oklch(22% .012 60/.32);--ink-red:oklch(54% .19 28);--ink-blue:oklch(39% .13 262);--highlighter:oklch(92% .15 105/.85);--board:oklch(19% .006 60);--flap:oklch(25% .006 60);--flap-ink:oklch(94% .01 85);--flap-amber:oklch(82% .15 72);--flap-green:oklch(80% .13 150);--desk:color-mix(in oklab, var(--background), var(--foreground) 5%);--shadow-ink:oklch(30% .03 60);--lx:1;--ly:.72}@property --lift{syntax:"<number>";inherits:true;initial-value:1}.shelf-item,.shelf-lifts{--obj-shadow:calc(var(--lx) * var(--lift) * .8px) calc(var(--ly) * var(--lift) * .8px) 2.5px color-mix(in oklab, var(--shadow-ink) 13%, transparent), calc(var(--lx) * var(--lift) * 3.3px) calc(var(--ly) * var(--lift) * 3.3px) 4px color-mix(in oklab, var(--shadow-ink) 10%, transparent), calc(var(--lx) * var(--lift) * 7.4px) calc(var(--ly) * var(--lift) * 7.4px) 6px color-mix(in oklab, var(--shadow-ink) 6%, transparent), calc(var(--lx) * var(--lift) * 13px) calc(var(--ly) * var(--lift) * 13px) 10px color-mix(in oklab, var(--shadow-ink) 3%, transparent), calc(var(--lx) * var(--lift) * 22px) calc(var(--ly) * var(--lift) * 22px) 18px color-mix(in oklab, var(--shadow-ink) 2%, transparent);--obj-drop:drop-shadow(calc(var(--lx) * var(--lift) * .8px) calc(var(--ly) * var(--lift) * .8px) 1.2px color-mix(in oklab, var(--shadow-ink) 16%, transparent)) drop-shadow(calc(var(--lx) * var(--lift) * 5px) calc(var(--ly) * var(--lift) * 5px) 5px color-mix(in oklab, var(--shadow-ink) 9%, transparent)) drop-shadow(calc(var(--lx) * var(--lift) * 16px) calc(var(--ly) * var(--lift) * 16px) 12px color-mix(in oklab, var(--shadow-ink) 4%, transparent))}:where(.dark) .shelf{--desk:var(--background);--shadow-ink:black}:where(.dark) :is(.shelf-item,.shelf-lifts){--obj-shadow:calc(var(--lx) * var(--lift) * .8px) calc(var(--ly) * var(--lift) * .8px) 2.5px #00000080, calc(var(--lx) * var(--lift) * 3.3px) calc(var(--ly) * var(--lift) * 3.3px) 5px #00000059, calc(var(--lx) * var(--lift) * 8px) calc(var(--ly) * var(--lift) * 8px) 10px #00000040, calc(var(--lx) * var(--lift) * 16px) calc(var(--ly) * var(--lift) * 16px) 18px #0000002e, calc(var(--lx) * var(--lift) * 28px) calc(var(--ly) * var(--lift) * 28px) 30px #0000001f;--obj-drop:drop-shadow(calc(var(--lx) * var(--lift) * 1px) calc(var(--ly) * var(--lift) * 1px) 1.5px #00000080) drop-shadow(calc(var(--lx) * var(--lift) * 6px) calc(var(--ly) * var(--lift) * 6px) 7px #00000059) drop-shadow(calc(var(--lx) * var(--lift) * 20px) calc(var(--ly) * var(--lift) * 20px) 18px #0003)}.mat{background-color:var(--mat-color,var(--paper));background-image:var(--mat-texture,url(/_astro/paper.DDzDKn_5.jpg));background-size:var(--mat-size,420px);background-blend-mode:multiply;color:var(--ink);position:relative}.mat--kraft{--mat-color:var(--paper-kraft);--mat-texture:url(/_astro/kraft.Dusi0Ans.jpg);--mat-size:360px}.mat--manila{--mat-color:var(--paper-manila);--mat-texture:url(/_astro/manila.BHXvda4s.jpg);--mat-size:300px}.mat--thermal{--mat-color:var(--paper-thermal);--mat-texture:url(/_astro/thermal.C_W7lFLa.jpg);--mat-size:300px}.mat:after{content:"";pointer-events:none;border-radius:inherit;background:linear-gradient(calc(135deg + (var(--lx) - 1) * 40deg), #ffffff2e, transparent 45%, #3c28140f);mix-blend-mode:soft-light;position:absolute;inset:0}.mat--creased:before{content:"";pointer-events:none;border-radius:inherit;mix-blend-mode:multiply;opacity:.55;background:url(/_astro/crumple.BZ9VtiLX.jpg) 50%/cover;position:absolute;inset:0}.ink-mono{font-family:var(--font-mono);font-variant-ligatures:none}.ink-serif{font-family:var(--font-serif);font-weight:400}.ink-print{text-shadow:0 0 .4px}.shelf[data-js] [data-shelf-item]:not([data-live]) :is(*){animation-play-state:paused!important}@media (prefers-reduced-motion:reduce){.shelf *,.shelf :before,.shelf :after{transition-duration:0s!important;animation-duration:0s!important;animation-delay:0s!important}}.shelf-item{left:calc(var(--x) * 1px);bottom:calc(var(--y) * 1px);width:calc(var(--w) * 1px);height:calc(var(--h) * 1px);z-index:var(--z,auto);transition:--lift .6s cubic-bezier(.34, 1.4, .64, 1), translate 1.5s cubic-bezier(.16, 1, .3, 1) calc(var(--i) * 70ms + .45s);position:absolute}.shelf[data-intro=pending] .shelf-item{translate:0 calc(420px + var(--i) * 12px);transition:none}.shelf-item__body{rotate:calc(var(--r,0) * 1deg);translate:calc(var(--px,0) * var(--depth,1) * 4px) calc(var(--py,0) * var(--depth,1) * 3px);transition:rotate .6s cubic-bezier(.34,1.4,.64,1),scale .6s cubic-bezier(.34,1.4,.64,1);position:absolute;inset:0}.shelf-item:hover{--lift:1.7;z-index:20}.shelf-item:hover .shelf-item__body{rotate:calc(var(--r,0) * .4deg);scale:1.02}.shelf-item__label{white-space:nowrap;letter-spacing:.02em;color:var(--muted);opacity:0;pointer-events:none;gap:10px;font-size:11px;transition:opacity .3s,translate .4s cubic-bezier(.16,1,.3,1);display:flex;position:absolute;top:calc(100% + 18px);left:0;translate:0 -4px}.shelf-item__label b{font-family:var(--font-mono);color:var(--foreground);font-weight:450}.shelf-item[data-label-top] .shelf-item__label{top:auto;bottom:calc(100% + 14px)}.shelf-item:hover .shelf-item__label{opacity:1;translate:0}.shelf-caret{vertical-align:-.12em;opacity:.7;background:currentColor;width:.55em;height:1em;margin-left:1px;animation:.9s steps(2,jump-none) infinite shelf-caret;display:inline-block}@keyframes shelf-caret{50%{opacity:0}}
