:root{--ink-900: #0b0a09;--ink-850: #100e0d;--ink-800: #161412;--ink-700: #1e1b19;--ink-600: #2a2522;--ink-500: #3a3430;--paper: #e9e3d8;--paper-dim: #a89f92;--paper-faint: #6d655c;--vermilion: #c9452c;--vermilion-bright: #e05a3f;--vermilion-deep: #8a2d1c;--font-mincho: "Shippori Mincho B1", serif;--font-gothic: "Zen Kaku Gothic New", sans-serif;--font-serif: "Instrument Serif", serif;--rail: 84px;--gutter: 28px}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}body{background:var(--ink-900);color:var(--paper);font-family:var(--font-gothic);font-size:15px;line-height:1.7;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;pointer-events:none;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E")}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}input,textarea{font:inherit;color:inherit}.shell{position:relative;z-index:1;display:grid;grid-template-columns:var(--rail) 1fr;min-height:100dvh}.rail{position:sticky;top:0;height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:26px 0;border-right:1px solid var(--ink-700);background:linear-gradient(180deg,var(--ink-850),var(--ink-900))}.rail__brand{writing-mode:vertical-rl;font-family:var(--font-mincho);font-weight:800;font-size:21px;letter-spacing:.42em;color:var(--paper)}.rail__brand span{color:var(--vermilion)}.rail__nav{display:flex;flex-direction:column;gap:30px;align-items:center}.rail__link{writing-mode:vertical-rl;font-family:var(--font-mincho);font-size:15px;letter-spacing:.3em;color:var(--paper-faint);padding:4px 6px;transition:color .25s ease;position:relative}.rail__link:hover{color:var(--paper-dim)}.rail__link--on{color:var(--paper)}.rail__link--on:before{content:"";position:absolute;inset:0 auto 0 -7px;width:2px;background:var(--vermilion)}.rail__foot{writing-mode:vertical-rl;font-family:var(--font-serif);font-style:italic;font-size:13px;letter-spacing:.14em;color:var(--ink-500)}.main{padding:46px var(--gutter) 96px;max-width:1240px}.head{margin-bottom:34px;display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap}.head__title{font-family:var(--font-mincho);font-weight:800;font-size:clamp(30px,4.4vw,46px);letter-spacing:.06em;line-height:1.15}.head__sub{font-family:var(--font-serif);font-style:italic;font-size:19px;color:var(--paper-faint);letter-spacing:.05em;padding-bottom:6px}.head__count{margin-left:auto;font-family:var(--font-serif);font-size:15px;color:var(--paper-faint);padding-bottom:8px}.head__count b{font-size:25px;color:var(--paper);font-weight:400}.shelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:30px 22px}.disc{position:relative;animation:rise .6s cubic-bezier(.2,.7,.2,1) backwards}@keyframes rise{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}.disc__frame{position:relative}.disc__art{position:relative;aspect-ratio:1;border-radius:3px;overflow:hidden;background:var(--ink-700);cursor:pointer;box-shadow:0 14px 30px -14px #000000f2;transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s ease}.disc__art img{width:100%;height:100%;object-fit:cover;display:block}.disc__art:hover{transform:translateY(-5px);box-shadow:0 22px 44px -16px #000}.disc__glow{position:absolute;inset:auto 16% -8px 16%;height:26px;filter:blur(19px);opacity:.34;z-index:-1;border-radius:50%}.disc__meta{margin-top:12px}.disc__title{font-family:var(--font-mincho);font-weight:600;font-size:14.5px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}.disc__artist{font-size:12px;color:var(--paper-faint);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.disc__foot{display:flex;align-items:center;gap:9px;margin-top:7px;min-height:17px}.disc__plays{font-family:var(--font-serif);font-size:12.5px;color:var(--ink-500);letter-spacing:.04em}.disc__unmarked{font-size:10.5px;letter-spacing:.16em;color:var(--ink-500);border:1px solid var(--ink-600);border-radius:2px;padding:1px 6px}.disc__note{font-family:var(--font-mincho);font-size:12.5px;color:var(--paper-dim);margin-top:6px;line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.stars{display:inline-flex;gap:2px}.stars svg{display:block}.stars--lg svg{width:30px;height:30px}.stars--sm svg{width:13px;height:13px}.stars--input svg{cursor:pointer}.stars--input{gap:3px}.star__bg{fill:var(--ink-600)}.star__fg{fill:var(--vermilion)}.stars--input:hover .star__fg{fill:var(--vermilion-bright)}.sheet-bg{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;background:#060505d1;-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);display:flex;align-items:center;justify-content:center;padding:22px;animation:fade .25s ease}@keyframes fade{0%{opacity:0}to{opacity:1}}.sheet{width:min(600px,100%);max-height:88dvh;overflow-y:auto;background:var(--ink-850);border:1px solid var(--ink-700);border-radius:4px;padding:30px;animation:sheet .35s cubic-bezier(.2,.7,.2,1);box-shadow:0 34px 70px -24px #000}@keyframes sheet{0%{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}.sheet__head{display:flex;gap:18px;margin-bottom:24px}.sheet__art{width:104px;height:104px;border-radius:3px;flex-shrink:0;object-fit:cover;background:var(--ink-700)}.sheet__title{font-family:var(--font-mincho);font-weight:800;font-size:21px;line-height:1.4}.sheet__artist{color:var(--paper-faint);font-size:13px;margin-top:5px}.sheet__year{font-family:var(--font-serif);font-size:14px;color:var(--ink-500);margin-top:3px}.field{margin-bottom:22px}.field__label{font-family:var(--font-mincho);font-size:12.5px;letter-spacing:.22em;color:var(--paper-faint);margin-bottom:11px}.field__note{font-family:var(--font-serif);font-size:20px;color:var(--paper);margin-left:12px}textarea.field__input{width:100%;min-height:112px;resize:vertical;background:var(--ink-800);border:1px solid var(--ink-600);border-radius:3px;padding:13px 15px;font-family:var(--font-mincho);font-size:14.5px;line-height:1.85;transition:border-color .2s ease}input.field__input{width:100%;background:var(--ink-800);border:1px solid var(--ink-600);border-radius:3px;padding:11px 14px;font-size:14px;transition:border-color .2s ease}.field__input:focus{outline:none;border-color:var(--vermilion-deep)}.field__input::placeholder{color:var(--ink-500)}.sheet__actions{display:flex;gap:11px;align-items:center;margin-top:26px}.btn{padding:11px 24px;border-radius:3px;font-family:var(--font-mincho);font-size:14px;letter-spacing:.16em;transition:background .2s ease,border-color .2s ease,opacity .2s ease}.btn--primary{background:var(--vermilion);color:#fff}.btn--primary:hover{background:var(--vermilion-bright)}.btn--ghost{border:1px solid var(--ink-600);color:var(--paper-dim)}.btn--ghost:hover{border-color:var(--ink-500);color:var(--paper)}.btn--danger{color:var(--vermilion);margin-left:auto;font-size:13px;letter-spacing:.1em}.btn:disabled{opacity:.4;cursor:not-allowed}.cards{display:grid;gap:16px;max-width:660px}.card{border:1px solid var(--ink-700);border-radius:4px;padding:24px;background:linear-gradient(160deg,var(--ink-850),var(--ink-900))}.card__top{display:flex;align-items:center;gap:12px;margin-bottom:8px}.card__name{font-family:var(--font-mincho);font-weight:600;font-size:17px;letter-spacing:.06em}.pill{font-size:10.5px;letter-spacing:.14em;padding:2px 9px;border-radius:2px;border:1px solid currentColor}.pill--on{color:#79a87a}.pill--off{color:#6a625a}.pill--bad{color:var(--vermilion-bright)}.card__desc{font-size:13px;color:var(--paper-faint);line-height:1.8;margin-bottom:16px}.card__row{display:flex;gap:10px;align-items:center}.card__err{font-size:12px;color:var(--vermilion-bright);margin-top:10px;padding:9px 12px;border-left:2px solid var(--vermilion-deep);background:#8a2d1c1a;line-height:1.7}.empty{padding:76px 0;text-align:center}.empty__mark{font-family:var(--font-serif);font-style:italic;font-size:62px;color:var(--ink-600);line-height:1;margin-bottom:22px}.empty__text{font-family:var(--font-mincho);font-size:15px;color:var(--paper-faint);line-height:2}.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%);z-index:80;background:var(--ink-700);border:1px solid var(--ink-600);border-radius:3px;padding:11px 20px;font-size:13px;animation:rise .3s ease;box-shadow:0 12px 30px -10px #000000e6;max-width:min(560px,calc(100vw - 40px))}@media(max-width:720px){.shell{grid-template-columns:1fr}.rail{position:fixed;inset:auto 0 0 0;height:auto;flex-direction:row;padding:0 16px env(safe-area-inset-bottom,0px);border-right:none;border-top:1px solid var(--ink-700);z-index:40;background:var(--ink-850)}.rail__brand,.rail__foot{display:none}.rail__nav{flex-direction:row;gap:4px;width:100%;justify-content:space-around}.rail__link{writing-mode:horizontal-tb;padding:15px 12px;letter-spacing:.14em}.rail__link--on:before{inset:0 0 auto 0;width:auto;height:2px}.main{padding:28px 18px calc(104px + env(safe-area-inset-bottom,0px))}.head{gap:12px;margin-bottom:24px}.head__sub{display:none}.head__count{padding-bottom:2px}.head .btn{margin-left:0!important;padding:8px 16px;font-size:13px}.shelf{grid-template-columns:repeat(auto-fill,minmax(136px,1fr));gap:24px 14px}.sheet{padding:22px}}