:root{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--topbar-h:64px;--page-bg:#181820;--page-bg-secondary:#1c1c28;--text-box:#1f1f28;--expl-box:#282831;--expl-box1:#2b2b36;--glass-bg:rgba(24,24,32,.94);--accent-a:#c956ff;--accent-a1:#4f8cff;--accent-a2:#1de9b6;--accent-b:#ff834e;--accent-b1:#fc79b8;--accent-b2:#ffd600;--gradient:linear-gradient(90deg,var(--accent-a),var(--accent-b));--gradient1:linear-gradient(90deg,var(--accent-a1),var(--accent-b1));--gradient2:linear-gradient(90deg,var(--accent-a2),var(--accent-b2));--text:#fff;--text-secondary:#ccc;--text-tertiary:#9e9e9e;--text-divider:rgba(255,255,255,.25);--text-original:#fff;--text-romanized:#aaa;--text-english:var(--accent-b1);--link:var(--accent-a);--theme-transition:.3s;--section-a-width:1100px;--section-b-width:900px}html,body,h1,h2,h3,h4,h5,h6{scroll-behavior:auto;scroll-padding-top:43px;font-family:Raleway,sans-serif}@media (min-width:1001px){html{overflow-y:scroll}}body{background-color:var(--page-bg);color:var(--text);transition:background-color var(--theme-transition)ease,color var(--theme-transition)ease;margin:0}::-webkit-scrollbar{background:var(--page-bg);width:12px}::-webkit-scrollbar-thumb{background:var(--expl-box);border-radius:6px}html{scrollbar-color:var(--expl-box)var(--page-bg);scrollbar-width:thin}
.topbar{height:var(--topbar-h);z-index:1000;background:var(--page-bg);position:fixed;top:0;left:0;right:0}.topbar-inner{align-items:center;gap:8px;max-width:1200px;height:100%;margin:0 auto;padding:0 16px;display:flex}.brand{color:var(--text);letter-spacing:.14em;text-transform:uppercase;z-index:21;align-items:center;gap:8px;font-size:18px;font-weight:800;text-decoration:none;display:flex}.primary-nav{z-index:21;gap:2px;margin-left:8px;display:flex}.primary-nav a{color:var(--text-secondary);z-index:21;padding:6px;font-size:14px;text-decoration:none}.primary-nav a:hover{color:var(--text)}.primary-nav .hide{display:none}.auth{gap:8px;display:flex}.btn{z-index:21;border-radius:999px;justify-content:center;align-items:center;height:36px;padding:0 14px;font-size:14px;text-decoration:none;display:inline-flex}.btn-ghost{color:var(--text);border:1px solid rgba(255,255,255,.25)}.btn-ghost:hover{border-color:rgba(255,255,255,.45)}.btn-cta{color:var(--text);background:var(--gradient);border:0;box-shadow:0 6px 16px rgba(0,0,0,.12)}.btn-cta:hover{filter:brightness(1.06)}.bar-btn{cursor:pointer;z-index:21;background:0 0;border:none;padding:4px}.bar-btn.menu{display:none}.bar-btn.search{margin-left:auto}.bar-btn i{color:var(--text);font-size:20px}.bar-btn.open i{color:var(--text)}@media (min-width:1001px){.menu-overlay{display:none}}@media (max-width:1000px){.bar-btn.menu{display:block}.primary-nav{z-index:21;flex-direction:column;align-items:flex-start;gap:0;margin-left:0;padding:0 0 16px 24px;display:none;position:absolute;top:100%;left:0;right:0}.primary-nav.open{background:var(--page-bg);display:flex}.primary-nav .hide{display:inline}.primary-nav a{width:auto;padding:8px;font-size:13px;display:inline}.auth{display:none}}
.hero-section{padding-top:var(--topbar-h);padding-bottom:var(--topbar-h);height:calc(100vh - 2*var(--topbar-h));justify-content:center;align-items:center;display:flex}.hero-section.darkest{background:var(--page-bg)}.hero-section.darker{background:var(--page-bg-secondary)}.hero-container{justify-content:space-between;padding:0 16px;display:flex}.hero-container.text-icon{width:100%;max-width:1100px}.hero-container.text-box{text-align:center;max-width:900px}.hero-container .text{z-index:2;flex-direction:column;justify-content:center;display:flex}.hero-container .text.left{text-align:left;align-items:flex-start;margin-left:25px}.hero-container .text.right{text-align:right;align-items:flex-start;margin-right:25px}.hero-container .text.center{text-align:center}.hero-container .text h1{color:var(--text);font-size:3rem;font-weight:800}.hero-container.text-icon .text h1{min-height:56px;margin-bottom:12px;line-height:1.1}.hero-container.text-box .text h1{margin-bottom:32px}.hero-container .text p{color:var(--text-secondary)}.hero-container.text-icon .text p{max-width:450px;margin-top:0;font-size:1.3rem}.hero-container .buttons{margin-top:12px}.hero-container .buttons button{background:var(--gradient);color:var(--text);cursor:pointer;border:none;border-radius:999px;padding:12px 32px;font-size:1rem}.hero-container .text a{color:var(--link)}.hero-container .text .buttons a{font-size:1rem;text-decoration:underline}.hero-container .box{background:var(--text-box);color:var(--text-secondary);border-radius:32px;margin-bottom:24px;padding:16px;font-size:1.1rem;line-height:1.7;box-shadow:0 2px 16px rgba(0,0,0,.04)}@media (max-width:1000px){.hero-container{justify-content:center!important;align-items:center!important}.hero-container.direction-normal{flex-direction:column!important}.hero-container.direction-reverse{flex-direction:column-reverse!important}.hero-container .text{text-align:center!important;align-items:center!important;margin-left:0!important;margin-right:0!important}}@media (max-width:500px){.hero-container .text h1{font-size:2.3rem!important}.hero-container.text-icon .text h1{margin-bottom:0!important}.hero-container.text-box .text h1{margin-bottom:20px!important}.hero-container .text p{margin-top:0!important;font-size:1rem!important}.hero-container.text-box .text p{margin-bottom:0!important;font-size:.9rem!important}.hero-container .text button{padding:10px 24px!important;font-size:1rem!important}.hero-container .text .buttons a{font-size:1rem!important}.hero-container .icon{width:300px!important;height:300px!important;margin-bottom:24px!important}}@media (max-width:400px){.hero-container .text h1{min-height:40px!important;font-size:1.8rem!important;line-height:.8!important}.hero-container.text-box .text h1{margin-bottom:6px!important}.hero-container .text p{font-size:.8rem!important}.hero-container.text-box .text p{font-size:.75rem!important}.hero-container .text button{padding:8px 20px!important;font-size:.8rem!important}.hero-container .text .buttons a{font-size:.8rem!important}.hero-container .icon{width:250px!important;height:250px!important}}
.song-container{text-align:center;margin:0 auto;padding-top:64px}.song-container h1{margin-top:4px}.song-toolbar{flex-wrap:wrap;align-items:center;max-width:792px;margin:22px auto 5px;padding:0 4px 3px;display:flex}.toolbar-left{flex-wrap:wrap;gap:12px;display:flex}.toolbar-right{align-items:center;margin-left:auto;display:flex}.settings-btn{color:var(--text-secondary);cursor:pointer;background:0 0;border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:8px 18px;font-size:1.1rem}.settings-btn:hover{color:#fff;background:rgba(255,255,255,.1)}.lyrics-container{text-align:left;max-width:800px;margin:0 auto}.lyrics-divider{background:var(--text-divider);will-change:transform;border:0;height:1px;margin:16px 4px;transform:translateZ(0)}.lyrics-text{cursor:pointer;width:-moz-fit-content;width:fit-content;margin:5px 3px;padding:3px 5px;font-size:1.1rem;display:block}.lyrics-text:hover{border-radius:6px}.lyrics-text .original{color:var(--text-original)}.lyrics-text .romanized{color:var(--text-romanized)}.lyrics-text .english{color:var(--text-english)}@media (hover:hover) and (pointer:fine){.no-hover-background-after-click:hover{background:rgba(255,255,255,.07)}}.no-hover-background-after-click:active{background:0 0!important}.no-hover-background-after-click.touch-active{background:rgba(255,255,255,.07)}.explanation-table-wrapper{margin:12px 0;padding:0 12px}.explanation-table{border-collapse:collapse;background:0 0;width:100%;max-width:700px;margin:0 auto}.explanation-table th,.explanation-table td{border:1px solid var(--expl-box);padding:7px 11px}.explanation-table th{background:var(--expl-box);color:var(--text-secondary);letter-spacing:.03em;font-size:1rem}.explanation-table td{color:var(--text-tertiary);font-size:.95rem}.explanation-table tbody tr:hover{background:rgba(255,255,255,.04)}.info-section,.test-section{text-align:left;max-width:800px;padding:0 8px}.info-section h3{margin-bottom:0}.info-section p{margin-top:12px;margin-bottom:20px}.lt-test-title{margin-bottom:12px}.lt-test-card{border:1px solid var(--expl-box);border-radius:12px;padding:14px}.lt-test-sentence{color:var(--text-original);margin-bottom:12px;font-size:1.1rem;line-height:1.6}.lt-highlight{border:1px solid var(--accent-b1);background:rgba(255,110,199,.1);border-radius:6px;margin:0 2px;padding:0 4px}.lt-test-options{grid-template-columns:1fr;gap:8px;margin:8px 0 0;padding:0;list-style:none;display:grid}.lt-option-button{text-align:left;width:100%;color:var(--text);cursor:pointer;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.18);border-radius:10px;padding:10px 12px;transition:transform 50ms,border-color .15s}.lt-option-button:hover{background:rgba(255,255,255,.08)}.lt-option-button.disabled{cursor:default;opacity:.9}.lt-option-button.disabled:hover{background:rgba(255,255,255,.04)}.lt-option-button.correct{background:rgba(46,125,50,.2);border-color:#2e7d32}.lt-option-button.correct:hover{background:rgba(46,125,50,.28)}.lt-option-button.incorrect{background:rgba(198,40,40,.18);border-color:#c62828}.lt-option-button.incorrect:hover{background:rgba(198,40,40,.26)}.lt-test-actions{justify-content:flex-end;margin-top:12px;display:flex}.lt-next-btn{color:var(--text-secondary);cursor:pointer;background:0 0;border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:8px 16px}.lt-next-btn:hover{background:rgba(255,255,255,.08)}.lt-hint{margin:10px 0 12px}.lt-hint-inner{border:1px solid var(--expl-box);border-radius:10px;padding:10px 12px;position:relative}.lt-hint-inner[data-covered=true] .lt-hint-line{filter:blur(5px);-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none}.lt-hint-cover{color:var(--text);letter-spacing:.02em;cursor:pointer;background:rgba(24,24,32,.55);border:1px solid rgba(255,255,255,.12);border-radius:10px;justify-content:center;align-items:center;font-weight:700;display:flex;position:absolute;top:0;bottom:0;left:0;right:0}.lt-hint-cover:hover{background:rgba(255,255,255,.02)}.lt-hint-romanized{color:var(--text-romanized)}.lt-hint-english{color:var(--text-english)}@media (max-width:600px){.song-container h1{margin-bottom:17px;font-size:1.8rem}.song-container h2{font-size:1.35rem}.song-toolbar{margin:18px auto 10px}.toolbar-left{gap:8px}.lyrics-divider{margin:12px 4px}.lyrics-text{font-size:1rem}.explanation-table-wrapper{margin:10px 0;padding:0 12px}.explanation-table th,.explanation-table td{padding:6px 10px}.explanation-table th{letter-spacing:.02em;font-size:.9rem}.explanation-table td{font-size:.85rem}.lt-test-card{padding:12px}.lt-test-sentence{font-size:1.05rem}}@media (max-width:400px){.toolbar-left{gap:6px}}
.search-box{padding:calc(var(--topbar-h) + 4px)16px;color:var(--text-secondary);border-radius:16px;max-width:900px;margin:0 auto;line-height:1.5}.search-bar-row{justify-content:center;margin-bottom:18px;display:flex}.search-input{color:#fff;background:0 0;border:1px solid rgba(255,255,255,.25);border-radius:999px;width:100%;max-width:340px;padding:12px 18px;font-size:1rem;box-shadow:0 2px 8px rgba(0,0,0,.07)}.search-input::placeholder{color:#aaa;opacity:.5}.filter-row{flex-wrap:wrap;justify-content:center;gap:12px;margin-bottom:24px;display:flex}.songs-list{width:100%;margin:0;padding:0;list-style:none;overflow-y:auto}.songs-list p{text-align:center}.song-item{cursor:pointer;background:rgba(255,255,255,.04);border-radius:12px;margin-bottom:10px}.song-item:hover{background:rgba(255,255,255,.08)}.song-item strong{color:var(--accent-a)}.song-link{color:#fff;padding:14px 18px;text-decoration:none;display:flex}.song-album{color:var(--accent-b);text-align:right;margin-left:auto}@media (max-width:600px){.search-input{max-width:305px;padding:11px 17px;font-size:.95rem}.search-bar-row{margin-bottom:14px}.filter-row{gap:10px;margin-bottom:18px}.song-item{margin-bottom:8px}.song-link{padding:12px 16px;font-size:.95rem}}@media (max-width:400px){.search-input{max-width:250px;padding:10px 16px;font-size:.85rem}.search-bar-row{margin-bottom:12px}.filter-row{gap:8px;margin-bottom:15px}.song-item{margin-bottom:7px}.song-link{padding:10px 14px;font-size:.85rem}}
.filter-pill{color:var(--text-secondary);cursor:pointer;background:0 0;border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:8px 22px;font-size:.85rem}.filter-pill.active{border:1px solid var(--page-bg);color:#fff;background:var(--gradient)!important}.filter-pill.active:hover{opacity:1}.filter-pill:hover{color:#fff;background:rgba(255,255,255,.1)}@media (max-width:600px){.filter-pill{padding:7px 19px;font-size:.8rem}}@media (max-width:400px){.filter-pill{padding:6px 15px;font-size:.7rem}}