:root{--void:#060709;--void-light:#0f1115;--void-mid:#1b1d22;--text:#ebebeb;--text-dim:#737b8c;--highlight-cold:#93bfec;--highlight-warm:#edb95e;--accent:#5379c6;--nebula-1:#2c1f4726;--nebula-2:#132d391a;--font-serif:"Noto Serif SC", serif;--font-sans:"Space Grotesk", system-ui, sans-serif}*{box-sizing:border-box;margin:0;padding:0}html,body{background:var(--void);width:100%;height:100%;color:var(--text);font-family:var(--font-sans);overflow:hidden}#app{width:100%;height:100%;position:relative}.hidden{display:none!important}.starfield{pointer-events:none;z-index:0;position:absolute;inset:0;overflow:hidden}.starfield canvas{width:100%;height:100%}.intro{background:var(--void);z-index:100;flex-direction:column;justify-content:center;align-items:center;animation:1.5s ease-out fadeIn;display:flex;position:absolute;inset:0}.intro-title{font-family:var(--font-serif);letter-spacing:.1em;opacity:.9;text-shadow:0 0 40px #5c99d64d;margin-bottom:.3em;font-size:clamp(2.5rem,6vw,5rem);font-weight:700}.intro-subtitle{font-family:var(--font-sans);letter-spacing:.3em;text-transform:uppercase;color:var(--text-dim);margin-bottom:3rem;font-size:clamp(.9rem,2vw,1.2rem);font-weight:300}.btn-enter{font-family:var(--font-sans);letter-spacing:.15em;color:var(--text);cursor:pointer;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#1f334733;border:1px solid #5c99d64d;border-radius:20px;padding:.8em 2.5em;font-size:.9rem;transition:all .4s}.btn-enter:hover{background:#264d734d;border-color:#85b3e080;box-shadow:0 0 20px #3380cc33}.player{background:radial-gradient(ellipse at 20% 50%, var(--nebula-1) 0%, transparent 50%), radial-gradient(ellipse at 80% 30%, var(--nebula-2) 0%, transparent 50%), radial-gradient(ellipse at 50% 80%, #321b3214 0%, transparent 40%), var(--void);flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:0;overflow:hidden}.month-label{font-family:var(--font-sans);letter-spacing:.3em;color:var(--text-dim);text-transform:uppercase;-webkit-backdrop-filter:blur(4px);background:#10131899;border:1px solid #3d668f26;border-radius:2px;padding:.5em 1.5em;font-size:clamp(.7rem,1.5vw,.85rem);font-weight:400;transition:opacity .8s;position:absolute;top:5vh;left:50%;transform:translate(-50%)}.hud-stats{font-family:var(--font-sans);letter-spacing:.1em;color:var(--text-dim);opacity:.6;text-align:right;flex-direction:column;gap:.3rem;font-size:.7rem;display:flex;position:absolute;top:5vh;right:3vw}.stage{z-index:2;justify-content:center;align-items:center;gap:2rem;min-height:320px;padding:2rem;display:flex;position:relative}.stage-fade-out{animation:.4s forwards stageFadeOut}.stage-fade-in{animation:.6s forwards stageFadeIn}.stage:before{content:"";pointer-events:none;border:1px solid #3d668f14;border-radius:50%;width:360px;height:360px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.stage:after{content:"";pointer-events:none;border:1px solid #3d668f0a;border-radius:50%;width:500px;height:500px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.book-item{opacity:0;cursor:pointer;flex-direction:column;align-items:center;gap:.8rem;transition:transform .3s;animation:.8s forwards bookFadeIn;display:flex}.book-item:hover{transform:translateY(-4px)}.book-item.book-primary{transform:scale(1.15)}.book-item.book-primary:hover{transform:scale(1.2)translateY(-4px)}.book-item.book-primary .book-cover{box-shadow:0 0 40px #33669940,0 0 80px #2e4d6b1a,0 4px 24px #0009}.book-item.book-satellite{opacity:0;animation:.8s .2s forwards bookFadeIn;transform:scale(.85)}.book-item.book-satellite:hover{transform:scale(.9)translateY(-4px)}.book-cover{object-fit:cover;border-radius:4px;width:120px;height:160px;transition:transform .3s,box-shadow .3s;box-shadow:0 4px 24px #0009,0 0 30px #3d668f1a}.book-item:hover .book-cover{box-shadow:0 8px 32px #000000b3,0 0 40px #4080bf33}.book-title{font-family:var(--font-serif);color:var(--text-dim);text-align:center;text-overflow:ellipsis;white-space:nowrap;max-width:140px;font-size:.8rem;overflow:hidden}.book-author{color:#ffffff4d;font-size:.7rem}.danmaku{pointer-events:none;z-index:1;position:absolute;inset:0;overflow:hidden}.danmaku-item{white-space:nowrap;pointer-events:auto;cursor:pointer;opacity:0;will-change:transform, opacity;text-overflow:ellipsis;border-radius:20px;max-width:50vw;padding:.5em 1.2em;font-size:clamp(.75rem,1.2vw,.9rem);transition:box-shadow .2s,opacity .2s;animation:linear forwards danmakuFly;position:absolute;overflow:hidden}.danmaku-item:hover{z-index:20;box-shadow:0 0 16px #5c99d666}.danmaku-highlight{color:var(--highlight-cold);font-family:var(--font-serif);-webkit-backdrop-filter:blur(6px);background:#19334d59;border:1px solid #4080bf26;box-shadow:0 2px 12px #264d7333}.danmaku-reflection{color:var(--highlight-warm);font-family:var(--font-sans);-webkit-backdrop-filter:blur(6px);background:#362a1759;border:1px solid #99743326;font-weight:400;box-shadow:0 2px 12px #47381f33}.danmaku.paused .danmaku-item{animation-play-state:paused}.card{background:var(--void-light);z-index:50;-webkit-backdrop-filter:blur(12px);border:1px solid #ffffff1a;border-radius:8px;width:90%;max-width:500px;padding:2rem;animation:.3s fadeIn;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.card-close{color:var(--text-dim);cursor:pointer;background:0 0;border:none;font-size:1.2rem;position:absolute;top:1rem;right:1rem}.card-text{font-family:var(--font-serif);margin-bottom:1rem;font-size:1.1rem;line-height:1.8}.card-quote{color:var(--text-dim);border-left:2px solid var(--highlight-cold);margin-bottom:1rem;padding-left:1rem;font-size:.85rem}.card-meta{color:var(--text-dim);font-size:.75rem}.controls{z-index:15;background:linear-gradient(#0000,#060709f2);align-items:center;gap:1rem;padding:1.5rem 2rem;display:flex;position:absolute;bottom:0;left:0;right:0}.btn-ctrl{color:var(--text);cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;width:2rem;height:2rem;font-size:1.2rem;transition:background .2s;display:flex}.btn-ctrl:hover{background:#ffffff1a}.timeline{flex-direction:column;flex:1;gap:.4rem;display:flex}.timeline-track{cursor:pointer;background:#ffffff14;border-radius:2px;height:4px;position:relative}.timeline-progress{background:linear-gradient(90deg, var(--accent), #86cc);border-radius:2px;width:0%;height:100%;transition:width .3s linear;position:absolute;top:0;left:0}.timeline-thumb{background:var(--text);cursor:grab;border-radius:50%;width:12px;height:12px;transition:left .3s linear;position:absolute;top:50%;left:0%;transform:translate(-50%,-50%);box-shadow:0 0 8px #5c99d666}.timeline-labels{color:var(--text-dim);letter-spacing:.05em;justify-content:space-between;font-size:.65rem;display:flex}.month-counter{color:var(--text-dim);white-space:nowrap;text-align:right;min-width:5rem;font-size:.75rem}.drawer-overlay{z-index:60;-webkit-backdrop-filter:blur(4px);background:#060709b3;animation:.2s fadeIn;position:absolute;inset:0}.drawer{z-index:70;-webkit-backdrop-filter:blur(16px);background:#0d0e12f2;border-left:1px solid #3d668f1a;flex-direction:column;width:min(420px,85vw);transition:transform .3s;display:flex;position:absolute;top:0;bottom:0;right:0;overflow:hidden;transform:translate(100%)}.drawer.open{transform:translate(0)}.drawer-close{color:var(--text-dim);cursor:pointer;z-index:2;background:0 0;border:none;font-size:1.3rem;position:absolute;top:1rem;right:1rem}.drawer-close:hover{color:var(--text)}.drawer-header{border-bottom:1px solid #ffffff0f;align-items:center;gap:1.2rem;padding:2rem 2rem 1rem;display:flex}.drawer-header .drawer-cover{object-fit:cover;border-radius:3px;width:60px;height:80px;box-shadow:0 2px 12px #00000080}.drawer-header .drawer-meta{flex-direction:column;gap:.3rem;display:flex}.drawer-header .drawer-title{font-family:var(--font-serif);color:var(--text);font-size:1rem;font-weight:700}.drawer-header .drawer-author{color:var(--text-dim);font-size:.8rem}.drawer-header .drawer-stats{color:var(--text-dim);margin-top:.3rem;font-size:.7rem}.drawer-content{flex:1;padding:1.5rem 2rem 2rem;overflow-y:auto}.drawer-section-title{font-family:var(--font-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);margin-top:1.5rem;margin-bottom:.8rem;font-size:.75rem;font-weight:500}.drawer-section-title:first-child{margin-top:0}.drawer-note{border-left:2px solid var(--highlight-warm);background:#ffffff08;border-radius:6px;margin-bottom:.6rem;padding:.8rem 1rem}.drawer-note.is-highlight{border-left-color:var(--highlight-cold)}.drawer-note-text{font-family:var(--font-serif);color:var(--text);font-size:.9rem;line-height:1.7}.drawer-note-quote{color:var(--text-dim);border-left:1px solid #ffffff1a;margin-top:.5rem;padding-left:.8rem;font-size:.8rem;font-style:italic}.drawer-note-meta{color:var(--text-dim);margin-top:.4rem;font-size:.7rem}.drawer-empty{color:var(--text-dim);text-align:center;padding:2rem 1rem;font-size:.85rem;line-height:1.6}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes stageFadeOut{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.96)}}@keyframes stageFadeIn{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}@keyframes bookFadeIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes danmakuFly{0%{opacity:0;transform:translate(100vw)}3%{opacity:.8}92%{opacity:.8}to{opacity:0;transform:translate(-100%)}}