@import "https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT,WONK@0,9..144,300..700,0..100,0..1;1,9..144,300..700,0..100,0..1&family=Geist:wght@300..700&family=Geist+Mono:wght@400..600&display=swap";:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg-deep:#05060b;--bg-base:#0a0b12;--bg-elevated:#12131c;--surface:#ffffff09;--surface-hover:#fff1;--surface-active:#ad8d6324;--foreground:#f1ece0;--foreground-soft:#c9c4b8;--foreground-muted:#8a8479;--foreground-dim:#5a564d;--accent:#c9a86a;--accent-strong:#a8894d;--accent-glow:#c9a86a2e;--highlight:#f6b03b;--highlight-soft:#f6b03b2e;--highlight-text:#1a120a;--border:#f1ece012;--border-strong:#f1ece024;--radius-sm:6px;--radius-md:10px;--radius-lg:14px;--radius-xl:20px;--easing:cubic-bezier(.16, 1, .3, 1);--dur-fast:.16s;--dur-mid:.24s;--font-display:"Fraunces", "Iowan Old Style", Georgia, serif;--font-ui:"Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--font-mono:"Geist Mono", ui-monospace, Menlo, monospace;font-family:var(--font-ui);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizelegibility;font-size:15px}body{color:var(--foreground);background:var(--bg-deep);background-image:radial-gradient(at 12% 8%,#c9a86a1a 0%,#0000 40%),radial-gradient(at 88% 92%,#5c47361f 0%,#0000 45%),radial-gradient(#1e191473 0%,#0000 60%);background-attachment:fixed;min-height:100vh;margin:0;position:relative}body:before{content:"";pointer-events:none;z-index:0;opacity:.22;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.8 0 0 0 0 0.8 0 0 0 0 0.8 0 0 0 0.35 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");position:fixed;inset:0}body:after{content:"";pointer-events:none;z-index:0;background-image:linear-gradient(90deg,#f1ece006 1px,#0000 1px);background-size:72px 100%;position:fixed;inset:0;-webkit-mask-image:linear-gradient(#000,#0000 70%);mask-image:linear-gradient(#000,#0000 70%)}#root{z-index:1;position:relative}*,:before,:after{box-sizing:border-box}:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}::-webkit-scrollbar{width:9px;height:9px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{transition:background .16s var(--easing);background:#f1ece014 padding-box padding-box;border:2px solid #0000;border-radius:999px}::-webkit-scrollbar-thumb:hover{background:#f1ece033 padding-box padding-box;border:2px solid #0000}::selection{background:var(--accent-glow);color:var(--foreground)}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}.app{grid-template-columns:320px 1fr;gap:18px;height:100vh;padding:18px;display:grid}.auth-page{place-items:center;min-height:100vh;padding:24px;display:grid}.auth-card{border-radius:var(--radius-lg);border:1px solid var(--border);background:linear-gradient(#14120eb3 0%,#0a0907bf 100%);flex-direction:column;gap:12px;width:min(420px,100%);padding:24px;display:flex;box-shadow:inset 0 1px #ffffff0a,0 30px 60px -30px #0009}.auth-card h1{font-family:var(--font-display);margin:0;font-size:34px;font-weight:500}.auth-card p{color:var(--foreground-muted);margin:0}.auth-field{color:var(--foreground-soft);flex-direction:column;gap:6px;font-size:13px;display:flex}.auth-field input{border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--foreground);font:inherit;background:#f1ece00a;padding:10px 12px}.auth-field input:focus{border-color:var(--accent);outline:none}.auth-submit{border-radius:var(--radius-sm);color:var(--foreground);font:inherit;cursor:pointer;background:#c9a86a29;border:1px solid #c9a86a59;margin-top:4px;padding:10px 14px;font-weight:600}.auth-submit:hover{border-color:var(--accent);background:#c9a86a3d}.auth-error{font-size:13px;color:#ff8e8e!important}.sidebar{-webkit-backdrop-filter:blur(24px)saturate(130%);border:1px solid var(--border);border-radius:var(--radius-lg);background:linear-gradient(#14120e9e 0%,#0a09079e 100%);flex-direction:column;min-height:0;display:flex;overflow:hidden;box-shadow:inset 0 1px #ffffff0a,0 30px 60px -30px #0009}.sidebar-backdrop{display:none}.sidebar-header{border-bottom:1px solid var(--border);padding:22px 20px 18px;position:relative}.sidebar-header:after{content:"";background:var(--accent);width:6px;height:6px;box-shadow:0 0 12px var(--accent-glow);animation:pulse 2.4s var(--easing) infinite;border-radius:50%;position:absolute;top:28px;right:20px}@keyframes pulse{0%,to{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.15)}}.sidebar-header h1{font-family:var(--font-display);font-variation-settings:"opsz" 144, "SOFT" 40;letter-spacing:-.3px;color:var(--foreground);margin:0;font-size:24px;font-style:italic;font-weight:400;line-height:1}.sidebar-header h1 em{color:var(--accent);font-style:normal}.collections{border-bottom:1px solid var(--border);flex-direction:column;gap:4px;padding:12px 10px;display:flex}.collection-btn{color:var(--foreground-soft);border-radius:var(--radius-sm);cursor:pointer;text-align:left;min-height:36px;font:inherit;letter-spacing:-.1px;transition:background var(--dur-fast) var(--easing), color var(--dur-fast) var(--easing), border-color var(--dur-fast) var(--easing), padding-left var(--dur-fast) var(--easing);background:0 0;border:1px solid #0000;justify-content:space-between;align-items:center;gap:8px;padding:10px 12px;font-size:13px;font-weight:500;display:flex}.collection-btn:hover{background:var(--surface-hover);color:var(--foreground);padding-left:14px}.collection-btn.active{background:var(--surface-active);color:var(--foreground);box-shadow:inset 2px 0 0 0 var(--accent);border-color:#c9a86a4d}.c-title{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.c-count{font-family:var(--font-mono);color:#b8b1a5;font-variant-numeric:tabular-nums;letter-spacing:-.3px;background:#f1ece00a;border-radius:999px;flex-shrink:0;padding:2px 8px;font-size:11px;font-weight:500}.collection-btn.active .c-count{color:var(--accent);background:#c9a86a24}.items-panel{flex-direction:column;flex:1;gap:14px;min-height:0;padding:12px;display:flex}.search{color:var(--foreground);border:1px solid var(--border);border-radius:var(--radius-sm);font:inherit;transition:border-color var(--dur-fast) var(--easing), background var(--dur-fast) var(--easing);background:#f1ece009;outline:none;padding:9px 12px;font-size:13px}.search::placeholder{color:#8f897e}.search:focus{border-color:var(--accent);background:#f1ece00e}.items{scrollbar-gutter:stable;flex:1;min-height:0;margin:0;padding:0;list-style:none;overflow-y:auto}.items li{margin:0}.item-btn{width:100%;color:var(--foreground-soft);border-radius:var(--radius-sm);cursor:pointer;min-height:36px;font:inherit;text-align:left;transition:background var(--dur-fast) var(--easing), color var(--dur-fast) var(--easing);background:0 0;border:none;grid-template-columns:14px 30px 1fr;align-items:center;gap:10px;padding:9px 10px;font-size:13px;display:grid;position:relative}.item-mark{color:#0000;justify-content:center;align-items:center;display:inline-flex}.item-mark svg{width:12px;height:12px}.item-btn.studied .item-mark{color:var(--accent)}.item-btn.studied .item-title{color:var(--foreground-muted)}.item-btn:hover{background:var(--surface-hover);color:var(--foreground)}.item-btn.active{background:var(--surface-active);color:var(--foreground);box-shadow:inset 0 0 0 1px #c9a86a38}.item-btn.active:before{content:"";background:var(--accent);border-radius:2px;width:2px;position:absolute;top:8px;bottom:8px;left:0}.item-btn.no-audio{opacity:.45}.item-id{font-family:var(--font-mono);color:var(--foreground-dim);font-variant-numeric:tabular-nums;letter-spacing:-.3px;min-width:30px;font-size:11px;font-weight:500}.item-btn.active .item-id{color:var(--accent)}.item-title{white-space:nowrap;text-overflow:ellipsis;flex:1;overflow:hidden}.viewer{min-width:0;max-width:100%;padding:6px 28px 48px;overflow-y:auto}.mobile-menu-btn,.mobile-bottom-nav,.mobile-items-header{display:none}.empty,.loading{color:var(--foreground-muted);text-align:center;font-size:14px;font-family:var(--font-display);padding:100px 40px;font-size:18px;font-style:italic}.viewer-header{border-bottom:1px solid var(--border);z-index:30;-webkit-backdrop-filter:blur(8px);background:linear-gradient(#080705fa 0%,#080705e6 72%,#08070500 100%);grid-template-columns:1fr auto;align-items:end;gap:24px;margin:0 0 28px;padding:24px 0 20px;display:grid;position:sticky;top:0}.viewer-header:after{content:"";background:var(--accent);width:72px;height:1px;position:absolute;bottom:-1px;left:0}.breadcrumb{color:var(--foreground-muted);font-family:var(--font-mono);text-transform:uppercase;letter-spacing:2.4px;align-items:center;gap:10px;font-size:11px;font-weight:500;display:flex}.breadcrumb:before{content:"§";color:var(--accent);font-family:var(--font-display);text-transform:none;letter-spacing:0;font-size:14px;font-style:italic}.viewer-header h2{font-family:var(--font-display);font-variation-settings:"opsz" 144, "SOFT" 20, "WONK" 1;letter-spacing:-.8px;color:var(--foreground);max-width:28ch;margin:10px 0 0;font-size:38px;font-weight:500;line-height:1.08}.viewer-header h2 .item-num{font-family:var(--font-mono);color:var(--foreground-dim);letter-spacing:-.5px;vertical-align:4px;margin-right:14px;font-size:24px;font-style:normal;font-weight:400}.nav-buttons{flex-shrink:0;gap:10px;display:flex}.nav-buttons button{background:var(--surface);color:var(--foreground-soft);border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;min-height:36px;font:inherit;letter-spacing:.2px;transition:background var(--dur-fast) var(--easing), border-color var(--dur-fast) var(--easing), color var(--dur-fast) var(--easing), transform var(--dur-fast) var(--easing);align-items:center;gap:6px;padding:9px 14px;font-size:12px;font-weight:500;display:inline-flex}.nav-buttons button svg{width:13px;height:13px}.nav-buttons button:hover:not(:disabled){background:var(--surface-hover);border-color:var(--border-strong);color:var(--foreground)}.nav-buttons button:active:not(:disabled){transform:translateY(1px)}.nav-buttons button:disabled{opacity:.3;cursor:not-allowed}.nav-buttons .study-btn svg{width:14px;height:14px}.nav-buttons .study-btn.done{color:var(--accent);background:#c9a86a24;border-color:#c9a86a66}.nav-buttons .study-btn.done:hover:not(:disabled){border-color:var(--accent);color:var(--foreground);background:#c9a86a33}.player-controls{-webkit-backdrop-filter:blur(22px)saturate(130%);border:1px solid var(--border);border-radius:var(--radius-lg);z-index:25;background:linear-gradient(#14120e9e 0%,#0e0d0a9e 100%);flex-wrap:wrap;align-items:center;gap:18px;margin-bottom:36px;padding:16px 18px;display:flex;position:sticky;top:148px;box-shadow:inset 0 1px #ffffff0a,0 20px 40px -20px #00000080}.player-controls audio{border-radius:var(--radius-md);filter:invert(.9)hue-rotate(180deg)saturate(1.1);flex:1;min-width:280px;height:40px}.settings-floating{z-index:60;flex-direction:column;align-items:flex-end;gap:8px;display:flex;position:fixed;bottom:16px;right:16px}.settings-fab{border:1px solid var(--border);width:44px;height:44px;color:var(--foreground-soft);cursor:pointer;-webkit-backdrop-filter:blur(8px);transition:transform var(--dur-fast) var(--easing), box-shadow var(--dur-fast) var(--easing), border-color var(--dur-fast) var(--easing), color var(--dur-fast) var(--easing);background:#0a0907eb;border-radius:50%;font-size:18px;line-height:1;animation:2.2s ease-in-out infinite settings-fab-pulse;box-shadow:0 10px 24px -12px #000c,inset 0 0 0 1px #ffffff0a}@keyframes settings-fab-pulse{0%,to{box-shadow:0 10px 24px -12px #000c,0 0 #c9a86a00}50%{box-shadow:0 14px 30px -14px #000000e6,0 0 0 8px #c9a86a2e}}.settings-fab:hover{transform:translateY(-1px);box-shadow:0 16px 30px -14px #000000e6,inset 0 0 0 1px #ffffff0f}.settings-fab.open{color:var(--accent);border-color:#c9a86a80;animation:none;box-shadow:0 14px 30px -14px #c9a86a8c,inset 0 0 0 1px #c9a86a33}.settings-panel{border:1px solid var(--border);border-radius:var(--radius-md);-webkit-backdrop-filter:blur(10px);opacity:0;pointer-events:none;width:min(260px,100vw - 32px);transition:opacity var(--dur-fast) var(--easing), transform var(--dur-fast) var(--easing);background:#0a0907f2;gap:8px;padding:10px;display:grid;transform:translateY(6px)scale(.98);box-shadow:0 16px 34px -20px #000000b3}.settings-panel.open{opacity:1;pointer-events:auto;transform:translateY(0)scale(1)}.settings-panel h4{text-transform:uppercase;letter-spacing:1.2px;color:var(--foreground-muted);margin:0;padding:2px 4px 6px;font-size:11px}.settings-row{border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--foreground-soft);justify-content:space-between;align-items:center;gap:12px;padding:8px 10px;font-size:12px;display:flex}.settings-row select{border:1px solid var(--border);min-height:30px;color:var(--foreground);font:inherit;background:#f1ece00a;border-radius:6px;padding:2px 6px}.settings-row input[type=checkbox]{accent-color:var(--accent);width:16px;height:16px}.no-audio{background:var(--surface);border:1px dashed var(--border);border-radius:var(--radius-md);color:var(--foreground-muted);font-size:13px;font-style:italic;font-family:var(--font-display);z-index:25;margin-bottom:36px;padding:16px 18px;position:sticky;top:148px}.bilingual{animation:reveal .48s var(--easing) both;grid-template-columns:1fr 1fr;gap:52px;display:grid}@keyframes reveal{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.column{min-width:0}.column h3{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:2.4px;color:var(--foreground-muted);align-items:center;gap:10px;margin:0 0 18px;font-size:10.5px;font-weight:600;display:flex}.column h3:before{content:"";background:var(--accent);width:16px;height:1px;display:inline-block}.column:first-child .text{font-family:var(--font-display);font-variation-settings:"opsz" 14, "SOFT" 30;letter-spacing:-.1px;color:var(--foreground);max-width:62ch;font-size:18px;font-weight:400;line-height:1.82}.column:last-child .text{font-family:var(--font-ui);color:#c9c1b4;letter-spacing:-.1px;max-width:62ch;font-size:15px;font-weight:400;line-height:1.82}.text p{border-radius:8px;margin:0 0 14px;padding:2px 6px}.text p:nth-child(odd){background:#ffffff05}.text p:hover{background:#c9a86a14}.collection-btn:focus-visible,.item-btn:focus-visible,.nav-buttons button:focus-visible,.search:focus-visible,.settings-fab:focus-visible,.settings-row select:focus-visible,.auth-field input:focus-visible,.auth-submit:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.text p:last-child{margin-bottom:0}.word{transition:background-color .2s var(--easing), color .2s var(--easing), box-shadow .2s var(--easing), text-shadow .2s var(--easing);border-radius:3px;margin:0 -.5px;padding:1px 1.5px}.word.past{color:var(--foreground-dim)}.word.active{background:var(--highlight);color:var(--highlight-text);box-shadow:0 0 0 3px var(--highlight-soft), 0 0 24px -2px #f6b03b80;font-weight:600}.player.no-highlight .word,.player.no-highlight .word.past,.player.no-highlight .word.active{color:inherit;box-shadow:none;font-weight:inherit;background:0 0}@media (width<=900px){.app{grid-template-columns:1fr;gap:12px;height:auto;min-height:100vh;padding:12px}.sidebar{z-index:50;width:min(86vw,360px);height:auto;transition:transform var(--dur-mid) var(--easing);position:fixed;top:12px;bottom:12px;left:12px;transform:translate(calc(-100% - 20px))}.sidebar.open{transform:translate(0)}.sidebar-backdrop{-webkit-backdrop-filter:blur(2px);opacity:0;pointer-events:none;z-index:45;transition:opacity var(--dur-fast) var(--easing);background:#00000073;border:0;display:block;position:fixed;inset:0}.sidebar-backdrop.open{opacity:1;pointer-events:auto}.sidebar.step-collections .items-panel,.sidebar.step-items .collections{display:none}.collections{border-bottom:none;flex:1;min-height:0;padding:12px;overflow-y:auto}.items-panel{flex:1;min-height:0;padding:12px}.mobile-items-header{justify-content:space-between;gap:8px;display:flex}.mobile-back-btn,.mobile-close-btn{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);min-height:40px;color:var(--foreground-soft);font:inherit;padding:8px 10px;font-size:12px;font-weight:600}.items{max-height:none;padding-bottom:10px}.collection-btn,.item-btn{min-height:44px;font-size:14px}.collection-btn.active{background:#c9a86a33;border-color:#c9a86a7a}.item-btn.active{box-shadow:inset 0 0 0 1px #c9a86a59,0 8px 18px -12px #c9a86abf}.search{min-height:44px;font-size:14px}.bilingual{grid-template-columns:1fr;gap:28px}.viewer{padding:4px 4px 40px}.viewer-header{grid-template-columns:1fr;gap:16px;margin:0 0 20px;padding:16px 0 14px;top:0}.mobile-menu-btn{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);min-height:36px;color:var(--foreground-soft);font:inherit;letter-spacing:.3px;text-transform:uppercase;justify-content:center;align-items:center;margin-bottom:10px;padding:8px 12px;font-size:12px;font-weight:600;display:inline-flex}.nav-buttons{display:none}.player-controls,.no-audio{top:144px}.viewer-header h2{font-size:28px}.viewer-header h2 .item-num{font-size:18px}.nav-buttons button{min-height:44px;padding:10px 14px;font-size:13px}.column:first-child .text{font-size:17px}.mobile-bottom-nav{border:1px solid var(--border);border-radius:var(--radius-md);-webkit-backdrop-filter:blur(8px);z-index:35;background:#0a0907eb;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:18px;padding:8px;display:grid;position:sticky;bottom:8px}.mobile-bottom-nav button{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);min-height:44px;color:var(--foreground-soft);font:inherit;letter-spacing:.2px;padding:10px 8px;font-size:12px;font-weight:600}.mobile-bottom-nav button:disabled{opacity:.35}.mobile-bottom-nav .study-btn.done{color:var(--accent);background:#c9a86a24;border-color:#c9a86a66}.settings-floating{bottom:68px;right:12px}.settings-fab{width:40px;height:40px;font-size:16px}.settings-panel{width:min(230px,100vw - 24px)}}