:root{--paper:#f7f0dc;--paper-2:#fbf7ec;--paper-ink:#2b2620;--paper-muted:#5c5349;--paper-faint:#6b6156;--stamp-red:#b3342a;--stamp-blue:#36428c}.shelf{--row:226px;--plank:13px;--wood:#b78857;--wood-top:#d4a876;--wood-edge:#8b6239;--wall:color-mix(in oklab, var(--surface-2) 88%, #b78857);border:9px solid var(--wood);border-radius:var(--r-s) var(--r-s) var(--r-xs) var(--r-xs);background:repeating-linear-gradient(to bottom, #00000017 0, transparent 12px, transparent calc(var(--row) - var(--plank)), var(--wood-top) calc(var(--row) - var(--plank)), var(--wood-top) calc(var(--row) - var(--plank) + 3px), var(--wood) calc(var(--row) - var(--plank) + 3px), var(--wood) calc(var(--row) - 2px), var(--wood-edge) calc(var(--row) - 2px), var(--wood-edge) var(--row)), var(--wall);border-bottom:0;flex-wrap:wrap;align-content:flex-start;align-items:flex-end;padding:0 24px 0 10px;display:flex;box-shadow:inset 0 2px 6px #00000014,0 10px 22px -16px #00000080}:root[data-theme=dark] .shelf{--wood:#6a4c33;--wood-top:#81603f;--wood-edge:#4d3524;--wall:#232220}.shelf-slot{height:var(--row);padding-bottom:var(--plank);align-items:flex-end;margin-right:1px;display:flex}.spine{--gold:#e6c67f;width:var(--w);height:var(--h);border-radius:var(--r-xs) var(--r-xs) var(--r-2xs) var(--r-2xs);color:#f6eedd;background:linear-gradient(90deg, #00000052, #ffffff0d 14%, #ffffff2b 28%, #fff0 54%, #0000001a 80%, #0000005c), var(--cloth);transition:translate var(--dur-3) var(--spring), filter var(--dur-2);animation:spine-in var(--dur-3) var(--spring) calc(min(var(--k), 30) * 20ms) backwards;flex-direction:column;align-items:center;gap:6px;padding:8px 0 6px;display:flex;position:relative;box-shadow:inset 0 1px #ffffff24,1px 0 #00000038}.spine.on-light{--gold:#8d6b2c;color:var(--paper-ink)}.spine.is-dnf{filter:saturate(.5)brightness(.94)}@media (hover:hover){.spine:hover{translate:0 -8px}}.spine:active{transition-duration:var(--dur-0);translate:0 -14px}.spine:focus-visible{outline:2px solid var(--ink);outline-offset:2px}@keyframes spine-in{0%{opacity:0;translate:0 16px}}.spine-band{border-block:1.5px solid var(--gold);opacity:.8;flex:none;width:100%;height:6px}.spine-title{writing-mode:vertical-rl;max-width:100%;min-height:0;font:var(--w-bold) var(--text-s)/1.1 var(--serif);letter-spacing:.01em;text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}.spine-dots{flex-wrap:wrap;justify-content:center;gap:2px;max-width:calc(100% - 6px);display:flex}.spine-dots i{border-radius:var(--r-pill);background:var(--gold);width:3px;height:3px;display:block}.spine-label{border-radius:var(--r-2xs);background:var(--paper-2);width:calc(100% - 8px);max-width:30px;color:var(--paper-ink);font:var(--w-bold) 7.5px/1 var(--mono);letter-spacing:.03em;text-align:center;flex:none;padding:3px 0 2px;overflow:hidden;box-shadow:0 0 0 .5px #00000040}.spine-mark{border-radius:var(--r-2xs) var(--r-2xs) 0 0;background:var(--accent,var(--emo-anger));width:7px;height:11px;position:absolute;top:-10px;right:18%;box-shadow:inset -1px 0 #00000026}.due{isolation:isolate;margin-top:20px;position:relative}.due-card{--ink-blue:var(--stamp-blue);--rule:#4664a552;--margin:#c43c328c;z-index:1;border-radius:var(--r-xs);background:var(--paper);color:var(--paper-ink);font-family:var(--mono);animation:card-out var(--dur-5) var(--spring) .15s backwards;margin:0 16px;padding:14px 16px 62px;position:relative;box-shadow:0 1px 2px #0000001f,0 10px 24px -14px #0006}@keyframes card-out{0%{translate:0 54px}}.due-head{font:var(--w-bold) var(--text-xs)/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--stamp-red);justify-content:space-between;gap:10px;display:flex}.due-book{border-bottom:1.5px solid var(--paper-ink);gap:3px;margin:12px 0 10px;padding-bottom:8px;display:grid}.due-title{font-weight:var(--w-bold);font-size:var(--text-base);line-height:1.25}.due-author{font-size:var(--text-m);color:var(--paper-muted)}.due-cols,.due-rows li{grid-template-columns:124px minmax(0,1fr);align-items:center;display:grid}.due-cols{border-bottom:1px solid var(--rule);font:var(--w-bold) var(--text-2xs)/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--paper-faint);padding-bottom:5px}.due-cols span+span,.due-what{padding-left:10px}.due-rows{margin:0;padding:0;list-style:none}.due-rows li{border-bottom:1px solid var(--rule);min-height:36px}.due-rows li>:first-child{border-right:1px solid var(--margin);align-self:stretch;align-items:center;display:flex}.due-date{min-width:0}.due-rows li.due-pages{grid-template-columns:minmax(0,1fr) auto}.due-rows li.due-pages>:first-child{border-right:0;padding-left:0}.due-what{min-width:0;font-size:var(--text-m);font-weight:var(--w-bold);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.due-note{color:inherit;text-underline-offset:3px;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;text-decoration-thickness:1px}.due-hint .due-what{font-weight:var(--w-regular);font-style:italic;font-size:var(--text-s);color:var(--paper-faint);white-space:normal;padding-block:6px;line-height:1.3}.due-input{border:0;border-bottom:1.5px dotted var(--paper-muted);width:54px;font:inherit;color:var(--ink-blue);text-align:center;appearance:textfield;background:0 0;border-radius:0;margin:0 6px;padding:0 2px}.due-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.due-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.due-input:focus{border-bottom-style:solid;outline:none}.stamp{border-radius:var(--r-xs);color:var(--ink-blue);opacity:.86;mix-blend-mode:multiply;font:var(--w-bold) var(--text-s)/1.15 var(--mono);letter-spacing:.05em;white-space:nowrap;border:1.5px solid;padding:2px 5px 1px;display:inline-block}.stamp.red{color:var(--stamp-red)}.stamp.faint{opacity:.62}.stamp-field{cursor:pointer;position:relative}.stamp-field input{opacity:0;cursor:pointer;width:100%;height:100%;position:absolute;inset:0}.stamp-field.is-empty .stamp{opacity:.45;border-style:dashed}.stamp-field:focus-within .stamp{outline:2px solid var(--ink-blue);outline-offset:2px}.due-pocket{z-index:2;border-radius:var(--r-xs);color:#6b4f2a;height:76px;font:var(--w-bold) var(--text-xs)/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;background:linear-gradient(#e6cf9f,#dcc28e);align-content:center;justify-items:center;gap:4px;margin-top:-60px;padding-top:8px;display:grid;position:relative;-webkit-mask:radial-gradient(34px 18px at 50% 0,#0000 97%,#000 100%);mask:radial-gradient(34px 18px at 50% 0,#0000 97%,#000 100%)}.due-pocket small{font:var(--w-bold) var(--text-xs)/1.2 var(--mono);letter-spacing:.02em;text-transform:none}:root[data-theme=dark] :is(.due-card,.due-pocket){filter:brightness(.8)}.record{--s:64px;width:calc(var(--s) * 1.4);height:var(--s);flex:none;display:block;position:relative}.record-sleeve{z-index:1;width:var(--s);height:var(--s);border-radius:var(--r-xs);background:var(--surface-3);color:var(--ink-3);justify-content:center;align-items:center;display:flex;position:absolute;top:0;left:0;overflow:hidden;box-shadow:0 1px 2px #0003,3px 0 7px -3px #0006}.record-cover{object-fit:cover;width:100%;height:100%;display:block}.record-disc{left:calc(var(--s) * .03);top:calc(var(--s) * .03);width:calc(var(--s) * .94);height:calc(var(--s) * .94);translate:calc(var(--s) * .3) 0;transition:translate var(--dur-4) var(--spring);background:#121212;border-radius:50%;position:absolute;box-shadow:0 1px 4px #00000073}.record-disc:after{content:"";pointer-events:none;background:conic-gradient(from 25deg, transparent 0 7%, #ffffff29 12%, transparent 18% 50%, #ffffff1f 57%, transparent 63%);border-radius:50%;position:absolute;inset:0}.record-spin{background:radial-gradient(circle,#0000 0 40%,#ffffff0f 41%,#0000 43%),repeating-radial-gradient(circle,#141414 0 1px,#252525 1.4px 2.1px);border-radius:50%;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.record-label{border-radius:50%;width:38%;height:38%;position:relative;overflow:hidden;box-shadow:0 0 0 1px #00000080}.record-label:after{content:"";background:#0c0c0c;border-radius:50%;width:3px;height:3px;position:absolute;top:50%;left:50%;translate:-50% -50%}.record-art{object-fit:cover;width:100%;height:100%;display:block}.no-art{background:linear-gradient(135deg,#e0634a,#f0b04c);width:100%;height:100%;display:block}.cassette{--s:64px;width:calc(var(--s) * 1.4);height:calc(var(--s) * .9);margin-block:calc(var(--s) * .05);padding:calc(var(--s) * .07) calc(var(--s) * .08) 0;border-radius:calc(var(--s) * .08);background:radial-gradient(circle at 5% 9%,#8d8b93 0 1.2px,#0000 1.8px),radial-gradient(circle at 95% 9%,#8d8b93 0 1.2px,#0000 1.8px),radial-gradient(circle at 5% 91%,#8d8b93 0 1.2px,#0000 1.8px),radial-gradient(circle at 95% 91%,#8d8b93 0 1.2px,#0000 1.8px),linear-gradient(#47464d,#2a292e);flex:none;display:block;position:relative;box-shadow:inset 0 1px #ffffff24,0 1px 3px #00000059}.cassette-label{border-radius:calc(var(--s) * .04);background:linear-gradient(#f4ecd8 0 33%,#e8623f 33% 40%,#f4ecd8 40% 44%,#2e8b8b 44% 51%,#f4ecd8 51%);height:68%;display:block;position:relative;overflow:hidden}.cassette-art{width:calc(var(--s) * .17);height:calc(var(--s) * .17);border-radius:var(--r-2xs);object-fit:cover;position:absolute;top:6%;left:5%}.cassette-lines{left:calc(5% + var(--s) * .22);background:repeating-linear-gradient(#0000 0 38%,#0003 38% 52%);height:20%;position:absolute;top:8%;right:7%}.cassette-window{border-radius:var(--r-pill);background:#1d1c20;justify-content:space-between;align-items:center;gap:3%;width:64%;height:32%;padding:0 6%;display:flex;position:absolute;bottom:9%;left:50%;translate:-50%;box-shadow:inset 0 1px 2px #000000b3}.cassette-tape{border-radius:var(--r-2xs);background:linear-gradient(#5d3e2c,#392418);flex:1;height:42%}.reel{width:calc(var(--s) * .17);height:calc(var(--s) * .17);background:radial-gradient(circle, #1d1c20 0 24%, transparent 26%), conic-gradient(#f1ece2 0 12%, #98938a 12% 33%, #f1ece2 33% 45%, #98938a 45% 66%, #f1ece2 66% 78%, #98938a 78%);border-radius:50%;flex:none}.cassette-foot{clip-path:polygon(10% 0,90% 0,100% 100%,0 100%);background:#222126;height:18%;position:absolute;bottom:0;left:24%;right:24%}.record{transition:width var(--dur-4) var(--spring)}@media (hover:hover){:is(.deck-main,.track,.mx-item,.mx-row,.song-thing):hover .record-disc{translate:calc(var(--s) * .36) 0}}:is(.is-on,.is-repeat,.track[aria-pressed=true]) .record{width:calc(var(--s) * 1.74)}:is(.is-on,.is-repeat,.track[aria-pressed=true]) .record-disc{translate:calc(var(--s) * .76) 0}:is(.is-on,.track[aria-pressed=true]) :is(.record-spin,.reel){animation:1.8s linear infinite turn}:is(.is-on,.track[aria-pressed=true]) .reel{animation-duration:1.3s}.is-repeat :is(.record-spin,.reel){animation:6s linear infinite turn}@keyframes turn{to{rotate:360deg}}.deck{border-radius:var(--r-l);background:var(--surface);border:1px solid var(--line)}.deck-main{text-align:left;border-radius:inherit;align-items:center;gap:14px;width:100%;padding:10px 12px 10px 10px;display:flex}.deck-main .track-title{font:var(--w-bold) var(--text-l)/1.3 var(--serif)}.deck-button{width:var(--h-s);height:var(--h-s);border-radius:var(--r-pill);background:var(--surface-2);color:var(--ink);transition:background-color var(--dur-2), color var(--dur-2);flex:none;justify-content:center;align-items:center;display:inline-flex}.deck.is-on .deck-button{background:var(--ink);color:var(--on-ink)}.deck-player{animation:fade-in var(--dur-2) ease-out;gap:10px;padding:0 10px 10px;display:grid}.track-thing{flex:none;align-items:center;display:flex}.mini-record{background:repeating-radial-gradient(circle,#151515 0 .7px,#2c2c2c 1px 1.5px);border-radius:50%;flex:none;justify-content:center;align-items:center;width:15px;height:15px;display:inline-flex}.mini-record img{object-fit:cover;border-radius:50%;width:6px;height:6px}.mini-tape{border-radius:var(--r-2xs);background:#3d3c42;flex:none;justify-content:space-around;align-items:center;width:18px;height:12px;padding:0 2px;display:inline-flex}.mini-tape i{background:#efe9dc;border-radius:50%;width:4px;height:4px}.mini-keep{background:var(--ink);width:30px;height:30px;color:var(--on-ink);transition:scale var(--dur-3) var(--spring);border-radius:50%;flex:none;justify-content:center;align-items:center;display:inline-flex}.mini-keep:active{transition-duration:var(--dur-0);scale:.88}.section-title>svg{vertical-align:-3px;margin-right:4px}.song-row .record,.song-row .cassette{flex:none}.song-head{text-align:center;justify-items:center;margin-top:8px;display:grid}.song-thing{border-radius:var(--r-m);justify-content:center;padding:6px;display:flex}.song-thing :is(.record,.cassette){--s:150px}.song-thing:focus-visible{outline:2px solid var(--ink);outline-offset:2px}.song-title{font:var(--w-medium) clamp(24px, 6.6vw, 30px)/1.15 var(--serif);letter-spacing:-.015em;text-wrap:balance;margin-top:16px}.song-sub{color:var(--ink-3);font-size:var(--text-base);margin-top:4px}.song-head .stars.is-input{margin-left:0}.song-actions{flex-wrap:wrap;justify-content:center;margin-top:12px}.song-actions .btn[aria-pressed=true]{background:var(--ink);color:var(--on-ink)}.song-player{animation:fade-in var(--dur-2) ease-out;margin-top:16px}@media (prefers-reduced-motion:reduce){.spine,.due-card{animation:none}.record-spin,.reel{animation:none!important}}.journal-top.media-top{margin-bottom:2px;padding-bottom:14px}.media-top .page-head{margin-bottom:12px}.media-top :is(.seg,.stat){background:color-mix(in oklab, var(--surface-2) 60%, var(--bg))}.media-top .search{animation:rise-in var(--dur-3) var(--ease-emph) backwards;margin:10px 0 0}.media-panel{animation:fade-in var(--dur-2) ease-out}.journal-top.media-head{margin-bottom:18px;padding-bottom:14px}.journal-top.media-head .page-head{margin-bottom:12px}.media-head :is(.seg,.search){background:color-mix(in oklab, var(--surface-2) 60%, var(--bg))}.media-bar{gap:10px;display:grid}.media-bar>.seg.tabs{margin:0}.media-bar>.search{animation:rise-in var(--dur-3) var(--ease-emph) backwards;margin:0}.cloud-title span{animation:cloud-letter var(--dur-4) var(--ease-emph) calc(var(--i) * 25ms) backwards;display:inline-block}@keyframes cloud-letter{0%{opacity:0;filter:blur(6px);translate:0 .4em}}.media-stats{gap:6px;margin-bottom:8px;display:flex}.media-stats>.stat{box-shadow:0 8px 22px -16px color-mix(in oklab, var(--sky) 70%, transparent);flex:1 1 0}.chips.media-filters{gap:6px;margin-block:10px 0}.chips.media-filters .chip{height:var(--h-s);font-size:var(--text-m);padding:0 11px}.media-panel .section{margin-top:14px}.media-panel .section-title{margin-bottom:6px}.media-panel .hint{margin:-2px 0 10px}@media (prefers-reduced-motion:reduce){.cloud-title span,.stat{animation:none}.mini-keep{transition:none}}
