:root{--gold:#ffcb0f;--gold-soft:#ffe066;--amber:#ffc93c;--orange:#ff7a1a;--orange-soft:#ff9a4d;--coral:#ff6b6b;--mint:#1f9d8c;--sky:#2f8fe0;--ok:#2fae55;--cream:#fff4d6;--cream-deep:#ffe9a8;--surface:#ffffff;--surface-warm:#fffaf0;--navy-900:#0a1a33;--navy-800:#0e2244;--navy-700:#123057;--navy-600:#1b3f6e;--ink:#1c2b45;--ink-dim:#5a6b88;--color-success:var(--mint);--color-success-bg:rgba(31,157,138,0.12);--color-error:var(--coral);--color-error-bg:rgba(255,107,107,0.12);--color-error-text:#c93f3f;--radius:16px;--shadow:0 10px 30px rgba(230,150,20,0.18);--focus-ring:0 0 0 3px rgba(255,122,26,0.35)}[data-theme=focus]{--cream:#f4f6fa;--cream-deep:#e8edf5;--surface:#ffffff;--surface-warm:#f8fafc;--ink:#1c2b45;--ink-dim:#56617a;--shadow:0 8px 24px rgba(20,30,50,0.1)}[data-theme=focus] .about-char-img,[data-theme=focus] .about-hero-img,[data-theme=focus] .hero-char{display:none}[data-theme=focus] .btn-mix{animation:none}[data-theme=focus] .timer{color:var(--navy-800)}[data-theme=focus] .timer.danger{color:var(--color-error-text);animation:none}[data-theme=focus] body{background:radial-gradient(900px 500px at 15% -5%,rgba(255,122,26,.1),transparent 60%),radial-gradient(800px 460px at 100% 20%,rgba(22,56,107,.1),transparent 55%),var(--cream)}[data-theme=focus] .hero .accent{color:var(--navy-800)}[data-theme=focus] .series-tag{color:var(--navy-800);background:rgba(22,56,107,.08);font-weight:700}[data-theme=focus] .btn-mix,[data-theme=focus] .btn-primary{background:var(--navy-800);color:#ffffff;box-shadow:0 6px 16px rgba(20,30,50,.25)}[data-theme=focus] .btn-mix:hover,[data-theme=focus] .btn-primary:hover{filter:none;background:var(--navy-900)}[data-theme=focus] .mode-btn.active{background:rgba(22,56,107,.08);border-color:var(--navy-800);color:var(--ink)}[data-theme=focus] .genre-card.selected{border-color:var(--navy-800);background:rgba(22,56,107,.06);box-shadow:0 0 0 1px var(--navy-800) inset}[data-theme=focus] .genre-card:hover{border-color:var(--navy-800);box-shadow:none}[data-theme=focus] .genre-card:hover .genre-card-arrow{color:var(--navy-800)}[data-theme=focus] .cat-head .msym,[data-theme=focus] .genre-emoji .msym{color:var(--navy-700)}[data-theme=focus] .genre-best{color:var(--navy-800)}[data-theme=focus] .chip.active,[data-theme=focus] .tab.active{color:var(--navy-800)}[data-theme=focus] .chip.active,[data-theme=focus] .lb-row.me,[data-theme=focus] .tab.active{background:rgba(22,56,107,.08);border-color:rgba(22,56,107,.24)}[data-theme=focus] .lb-rank,[data-theme=focus] .result-time{color:var(--navy-800)}[data-theme=focus] .result-time .unit{color:var(--navy-700)}[data-theme=focus] .badge-best{background:var(--navy-800);color:#ffffff}[data-theme=focus] .about-h .msym,[data-theme=focus] .about-principle .msym,[data-theme=focus] .about-reason .msym,[data-theme=focus] .cat-head{color:var(--navy-800);border-color:var(--navy-800)}[data-theme=focus] .progress-fill{background:var(--navy-700)}.theme-switch{display:inline-flex;align-items:center;gap:6px;cursor:pointer;background:none;border:none;padding:0}.theme-switch .track{position:relative;width:46px;height:26px;border-radius:999px;background:rgba(22,56,107,.14);transition:background .2s ease}.theme-switch .knob{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#ffffff;box-shadow:0 2px 6px rgba(20,30,50,.3);display:flex;align-items:center;justify-content:center;transition:transform .2s ease}.theme-switch .knob .msym{font-size:13px;color:var(--ink-dim)}.theme-switch[aria-pressed=true] .track{background:var(--navy-800)}.theme-switch[aria-pressed=true] .knob{transform:translateX(20px)}.theme-switch[aria-pressed=true] .knob .msym{color:var(--navy-800)}.theme-switch:focus-visible .track{box-shadow:var(--focus-ring)}[data-theme=focus] .card,[data-theme=focus] .genre-card,[data-theme=focus] .question-card,[data-theme=focus] .result-card{position:relative;background:rgba(255,255,255,.46);border:1px solid rgba(255,255,255,.7);box-shadow:0 16px 40px rgba(20,30,50,.16),0 2px 10px rgba(20,30,50,.08),inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(20,30,50,.05);overflow:hidden}[data-theme=focus] .card:before,[data-theme=focus] .genre-card:before,[data-theme=focus] .question-card:before,[data-theme=focus] .result-card:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(135deg,rgba(255,255,255,.55),transparent 40%,transparent 70%,rgba(255,255,255,.18))}[data-theme=focus] .card:after,[data-theme=focus] .genre-card:after,[data-theme=focus] .question-card:after,[data-theme=focus] .result-card:after{content:"";position:absolute;top:-30%;left:-20%;width:60%;height:60%;pointer-events:none;background:radial-gradient(circle,rgba(255,255,255,.5),transparent 70%)}@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))) or (-webkit-backdrop-filter:blur(1px)){[data-theme=focus] .card,[data-theme=focus] .genre-card,[data-theme=focus] .question-card,[data-theme=focus] .result-card{backdrop-filter:blur(30px) saturate(180%) brightness(1.05);-webkit-backdrop-filter:blur(30px) saturate(180%) brightness(1.05)}}[data-theme=focus] .brandbar{position:relative;position:-webkit-sticky;position:sticky;top:12px;z-index:30;padding:12px 18px;border-radius:999px;background:rgba(244,246,250,.5);border:1px solid rgba(255,255,255,.7);box-shadow:0 10px 28px rgba(20,30,50,.12),inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(20,30,50,.04)}[data-theme=focus] .brandbar:before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(120deg,rgba(255,255,255,.5),transparent 50%)}[data-theme=focus] .brandbar>*{position:relative;z-index:1}@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))) or (-webkit-backdrop-filter:blur(1px)){[data-theme=focus] .brandbar{backdrop-filter:blur(24px) saturate(180%) brightness(1.05);-webkit-backdrop-filter:blur(24px) saturate(180%) brightness(1.05)}}@media (prefers-reduced-transparency:reduce){[data-theme=focus] .brandbar{background:var(--surface)}}*{box-sizing:border-box}.msym{font-family:Material Symbols Rounded;font-weight:400;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;display:inline-flex;white-space:nowrap;word-wrap:normal;direction:ltr;font-feature-settings:"liga";-webkit-font-feature-settings:"liga";-webkit-font-smoothing:antialiased;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;user-select:none}.btn .msym{margin-right:2px}.cat-head .msym,.genre-emoji .msym{color:var(--orange)}.cat-head .msym{margin-right:2px}.chip .msym,.free-badge .msym,.mode-sub .msym,.streak-chip .msym,.tab .msym{vertical-align:-2px}body,html{margin:0;padding:0}body{background:radial-gradient(1200px 600px at 50% -10%,var(--cream-deep),transparent 60%),var(--cream);color:var(--ink);font-family:system-ui,-apple-system,Hiragino Sans,Yu Gothic,Noto Sans JP,sans-serif;min-height:100vh;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}.container{max-width:1080px;margin:0 auto;padding:20px 18px 64px}.brandbar{display:flex;align-items:center;justify-content:space-between;gap:12px;position:-webkit-sticky;position:sticky;top:12px;z-index:30;margin-bottom:16px;padding:12px 18px;border-radius:999px;background:var(--surface);border:1px solid rgba(22,56,107,.08);box-shadow:var(--shadow)}@media (max-width:600px){.brandbar{top:8px}}.brandbar .logo{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.02em}.brandbar .logo .dot{width:12px;height:12px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 4px rgba(255,122,26,.18)}.nav-auth{position:relative;display:flex;align-items:center;gap:8px}.nav-link{display:inline-flex;align-items:center;gap:4px;font-size:13px;color:var(--ink-dim);padding:6px 10px;border-radius:999px}.nav-link:hover{color:var(--ink);background:rgba(22,56,107,.06)}.nav-login-btn{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:800;color:var(--ink);background:none;border:1px solid rgba(22,56,107,.24);border-radius:999px;padding:6px 13px;cursor:pointer}.nav-login-btn:hover{background:rgba(22,56,107,.06);border-color:rgba(22,56,107,.36)}.nav-account{position:relative}.account-chip{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--ink);background:rgba(22,56,107,.06);border:1px solid rgba(22,56,107,.16);border-radius:999px;padding:5px 8px 5px 10px;cursor:pointer;max-width:170px}.account-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:96px}.account-menu{position:absolute;right:0;top:118%;z-index:50;min-width:210px;background:var(--surface);border:1px solid rgba(22,56,107,.16);border-radius:12px;box-shadow:var(--shadow);padding:6px}.account-menu-head{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--ink-dim);padding:6px 8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.account-item{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:none;border:none;color:var(--ink);font-size:13px;padding:9px 8px;border-radius:8px;cursor:pointer}.account-item:hover{background:rgba(22,56,107,.06)}.account-item.active{color:#a06400;font-weight:800}.account-item.add{color:var(--orange)}.account-sep{height:1px;background:rgba(22,56,107,.1);margin:4px 2px}.app-switcher{position:relative}.app-switcher-btn{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-width:34px;height:34px;padding:0 10px;border-radius:999px;background:none;border:1px solid rgba(22,56,107,.16);color:var(--ink-dim);font-size:13px;font-weight:700;cursor:pointer}.app-switcher-btn:hover{background:rgba(22,56,107,.06);color:var(--ink)}.app-switcher-menu{position:absolute;right:0;top:118%;z-index:50;min-width:240px;background:var(--surface);border:1px solid rgba(22,56,107,.16);border-radius:14px;box-shadow:var(--shadow);padding:8px}.app-switcher-head{font-size:11px;font-weight:800;color:var(--ink-dim);padding:6px 8px;letter-spacing:.04em}.app-switcher-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;white-space:nowrap;background:none;border:none;color:var(--ink);font-size:13px;font-weight:700;padding:9px 8px;border-radius:10px;cursor:pointer}.app-switcher-item .msym{color:var(--ink-dim)}.app-switcher-item:hover{background:rgba(22,56,107,.06)}.app-switcher-item.current{background:rgba(255,122,26,.1);color:var(--orange);cursor:default}.app-switcher-item.current .msym{color:var(--orange)}.app-switcher-soon{margin-left:auto;font-size:10px;font-weight:800;color:var(--ink-dim);background:rgba(22,56,107,.08);padding:2px 8px;border-radius:999px;white-space:nowrap}.app-footer-links{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 16px;margin:24px 0 6px;padding-top:18px;border-top:1px solid rgba(22,56,107,.08)}.app-footer-links a{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;font-weight:700;color:var(--ink-dim)}.app-footer-links a:hover{color:var(--orange)}.app-footer-links a.current{color:var(--ink);cursor:default}.bottom-nav{display:none}@media (max-width:600px){.bottom-nav{display:flex;position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom, 0px));z-index:40;justify-content:space-around;align-items:center;padding:8px 4px;border-radius:999px;background:var(--surface);border:1px solid rgba(22,56,107,.08);box-shadow:0 10px 28px rgba(20,30,50,.16)}.container{padding-bottom:calc(88px + env(safe-area-inset-bottom, 0px))}}.bottom-nav-item{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;flex:1 1;padding:6px 4px;border-radius:14px;background:none;border:none;color:var(--ink-dim);font-size:10.5px;font-weight:700;cursor:pointer;transition:background .15s ease,color .15s ease}.bottom-nav-item .msym{font-size:22px}.bottom-nav-item.active{color:var(--orange);background:rgba(255,122,26,.1)}.bottom-nav-item.active .msym{color:var(--orange)}.bottom-nav-item .nav-badge{position:absolute;top:2px;right:14px;min-width:15px;height:15px;padding:0 3px;border-radius:999px;background:var(--orange);color:#fff;font-size:9px;font-weight:800;line-height:15px;text-align:center}[data-theme=focus] .bottom-nav-item.active,[data-theme=focus] .bottom-nav-item.active .msym{color:var(--navy-800)}[data-theme=focus] .bottom-nav-item.active{background:rgba(22,56,107,.08)}[data-theme=focus] .bottom-nav{background:rgba(244,246,250,.7);border:1px solid rgba(255,255,255,.7)}@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))) or (-webkit-backdrop-filter:blur(1px)){[data-theme=focus] .bottom-nav{backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%)}}.nav-toast{position:absolute;right:0;top:120%;z-index:60;background:var(--surface);border:1px solid rgba(255,122,26,.4);color:var(--ink);font-size:12px;padding:8px 12px;border-radius:10px;box-shadow:var(--shadow)}@media (max-width:600px){.nav-label{display:none}.account-name{max-width:64px}.brandbar{flex-wrap:nowrap}.brandbar .logo{font-size:15px;white-space:nowrap}.brandbar nav{gap:4px!important}.nav-link,.nav-login-btn{padding:6px 8px}.brandbar .nav-link{display:none}}.hero-top{display:flex;align-items:center;gap:14px;margin:0 0 12px}.hero-copy{flex:1 1 auto;min-width:0}.hero-char{flex:0 0 auto;width:clamp(84px,24vw,124px);aspect-ratio:71/100;object-fit:cover;object-position:left center;border-radius:14px;display:block}.about-char-img,.about-hero-img{width:100%;max-width:440px;display:block;margin:16px auto 0;border-radius:14px}.result-char{margin:6px 0 2px}.result-char img{width:160px;max-width:60%;display:block;margin:0 auto;border-radius:12px}.about-h{display:flex;align-items:center;gap:8px;font-size:18px;margin:0 0 10px}.about-h .msym{color:var(--orange)}.about-p{font-size:14px;line-height:1.85;color:var(--ink);margin:0;max-width:680px}.about-reasons{display:flex;flex-direction:column;gap:12px;margin-top:12px}.about-reason{display:flex;gap:10px;align-items:flex-start}.about-reason .msym{color:var(--orange);margin-top:2px}.about-reason b{font-size:14px}.about-reason p{margin:2px 0 0;font-size:13px;color:var(--ink-dim);line-height:1.6}.about-principle{display:flex;gap:10px;align-items:flex-start;padding:11px 0;border-bottom:1px solid rgba(22,56,107,.08)}.about-principle:last-child{border-bottom:none}.about-principle .msym{color:var(--orange);margin-top:2px}.about-principle b{font-size:14px}.about-principle p{margin:2px 0 0;font-size:13px;color:var(--ink-dim);line-height:1.6}.about-principle-num{flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,var(--amber),var(--orange));color:#3a1500;font-weight:900;font-size:13px;display:flex;align-items:center;justify-content:center}.about-series{display:grid;grid-template-columns:repeat(2,1fr);grid-gap:8px;gap:8px;margin-top:12px}.about-series-item{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;padding:10px;border-radius:10px;background:rgba(22,56,107,.05)}.about-series-item .msym{color:var(--ink-dim)}.about-series-item.current{background:rgba(255,122,26,.14);border:1px solid rgba(255,122,26,.4)}.about-series-item.current .msym{color:var(--orange)}.about-series-item.link{cursor:pointer;transition:transform .06s ease,border-color .15s ease,background .15s ease}.about-series-item.link:hover{border-color:var(--orange);background:rgba(255,122,26,.1)}.about-series-item.link:active{transform:translateY(1px)}.about-series-badge{margin-left:auto;font-size:10px;font-weight:800;padding:2px 8px;border-radius:999px;white-space:nowrap}.about-series-badge.soon{color:var(--ink-dim);background:rgba(22,56,107,.08)}.about-series-badge.live{color:#1d8a4a;background:rgba(47,174,85,.12)}.avatar{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:40px;height:40px;border-radius:50%;font-weight:800;font-size:16px;color:#ffffff}.avatar.lg{width:56px;height:56px;font-size:22px}.avatar.a1{background:var(--navy-800)}.avatar.a2{background:var(--orange)}.avatar.a3{background:var(--mint)}.avatar.a4{background:var(--sky)}.avatar.a5{background:var(--coral)}.avatar.a6{background:var(--navy-600)}.avatar.a7{background:#8a5cf6}.avatar.a8{background:#1d8a4a}.lb-row.rank-1 .lb-rank,.lb-row.rank-2 .lb-rank,.lb-row.rank-3 .lb-rank{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;font-size:12px}.lb-row.rank-1 .lb-rank{background:var(--gold);color:var(--navy-900)}.lb-row.rank-2 .lb-rank{background:#d7dee8;color:var(--navy-900)}.lb-row.rank-3 .lb-rank{background:#e3b189;color:var(--navy-900)}.avatar-grid{display:flex;flex-wrap:wrap;gap:8px}.avatar-grid .avatar{cursor:pointer;border:2px solid transparent}.avatar-grid .avatar.sel{border-color:var(--orange);box-shadow:0 0 0 2px rgba(255,122,26,.18)}.share-card{position:relative;overflow:hidden;aspect-ratio:4/5;border-radius:20px;padding:24px;display:flex;flex-direction:column;justify-content:space-between;color:#ffffff}.share-card.record{background:linear-gradient(160deg,var(--navy-900),var(--navy-700))}.share-card.pop{background:linear-gradient(160deg,var(--orange),var(--amber) 70%,var(--gold));color:#3a1500}.share-card-brand{font-size:12px;font-weight:800;letter-spacing:.04em;opacity:.85}.share-card-time{font-size:clamp(34px,10vw,52px);font-weight:900;line-height:1;margin:16px 0 4px;white-space:nowrap;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.share-card-time .unit{font-size:40%;font-weight:800;margin-left:4px}.share-card-delta{font-size:13px;font-weight:700;opacity:.9}.share-card-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;opacity:.9}.share-card-foot .avatar{width:28px;height:28px;font-size:12px}.share-style-picker{display:flex;gap:8px;margin-bottom:12px}.card{background:linear-gradient(180deg,var(--surface),var(--surface-warm));border:1px solid rgba(22,56,107,.08);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px}.hero h1{font-size:clamp(28px,6vw,40px);margin:4px 0 8px;line-height:1.15}.hero .accent{color:var(--orange)}.hero p.lead{color:var(--ink-dim);margin:0 0 8px;font-size:15px;max-width:640px}.series-tag{gap:6px;font-size:12px;color:var(--navy-900);background:var(--gold);padding:4px 10px;border-radius:999px}.btn,.series-tag{display:inline-flex;align-items:center;font-weight:800}.btn{justify-content:center;gap:8px;border:none;cursor:pointer;border-radius:14px;padding:14px 20px;font-size:16px;transition:transform .06s ease,filter .15s ease,box-shadow .15s ease}.btn:active{transform:translateY(1px)}.btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}.btn.disabled,.btn:disabled{opacity:.45;cursor:not-allowed;filter:none;box-shadow:none;transform:none}.btn-primary{background:linear-gradient(135deg,var(--amber),var(--orange));color:#3a1500;box-shadow:0 6px 18px rgba(255,122,26,.35)}.btn-primary:hover{filter:brightness(1.06)}.btn-ghost{background:var(--surface);color:var(--ink);border:1px solid rgba(22,56,107,.24)}.btn-ghost:hover{background:rgba(22,56,107,.06);border-color:rgba(22,56,107,.36)}.btn-block{width:100%}.mix-dur-select{display:grid;grid-template-columns:1fr 1fr;grid-gap:8px;gap:8px;margin-top:14px}.mix-dur-btn{display:flex;flex-direction:column;align-items:center;gap:1px;padding:9px 8px;border-radius:12px;background:rgba(22,56,107,.05);color:var(--ink-dim);border:2px solid transparent;cursor:pointer;transition:border-color .15s ease,background .15s ease,color .15s ease}.mix-dur-btn .mix-dur-main{font-weight:800;font-size:14px}.mix-dur-btn .mix-dur-sub{font-size:11px;opacity:.8}.mix-dur-btn.active{background:linear-gradient(135deg,rgba(255,122,26,.16),rgba(255,201,60,.16));border-color:var(--orange);color:var(--ink)}.mix-cta-dur{display:inline-block;margin-left:8px;padding:2px 9px;border-radius:999px;font-size:13px;font-weight:800;background:rgba(58,21,0,.16)}.btn-mix{width:100%;margin-top:8px;font-size:18px;padding:18px 20px;color:#3a1500;background:linear-gradient(135deg,#ffd23f,#ff7a1a 70%,#ff5e3a);box-shadow:0 8px 26px rgba(255,122,26,.5);border:2px solid rgba(255,255,255,.5);animation:mixGlow 2.4s ease-in-out infinite}.btn-mix:hover{filter:brightness(1.05)}@keyframes mixGlow{50%{box-shadow:0 8px 34px rgba(255,122,26,.75)}}.free-badge{display:inline-block;margin:2px 0 8px;font-size:13px;color:#1d8a4a;background:rgba(47,174,85,.12);border:1px solid rgba(47,174,85,.4);padding:5px 12px}.free-badge,.streak-chip{font-weight:800;border-radius:999px}.streak-chip{display:inline-flex;align-items:center;gap:4px;margin:4px 0;font-size:14px;color:#3a1500;background:linear-gradient(135deg,var(--amber),var(--orange));padding:6px 14px}.streak-chip.frozen{background:linear-gradient(135deg,var(--sky),#8fd3ff);color:var(--navy-900)}.streak-freeze-count{display:inline-flex;align-items:center;margin-left:2px;padding:1px 8px;border-radius:999px;background:rgba(255,255,255,.55);font-size:11px;font-weight:800}.short-cta{border:1px dashed rgba(255,122,26,.55)}.level-tag,.short-cta{color:var(--orange);font-weight:800}.level-tag{margin-left:6px;font-size:10px;border:1px solid rgba(255,122,26,.5);border-radius:999px;padding:1px 6px;vertical-align:middle}.modal-backdrop{position:fixed;inset:0;background:rgba(10,20,36,.6);display:flex;align-items:center;justify-content:center;padding:20px;z-index:50}.modal-card{background:linear-gradient(180deg,var(--surface),var(--surface-warm));border:1px solid rgba(22,56,107,.1);border-radius:16px;box-shadow:var(--shadow);padding:22px;width:100%;max-width:380px}.profile-switch{position:relative}.profile-chip{font-size:12px;font-weight:700;color:var(--ink);background:rgba(22,56,107,.06);border:1px solid rgba(22,56,107,.14);border-radius:999px;padding:6px 10px;cursor:pointer;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.profile-menu{position:absolute;right:0;top:110%;z-index:40;min-width:180px;background:var(--surface);border:1px solid rgba(22,56,107,.16);border-radius:12px;box-shadow:var(--shadow);padding:6px}.profile-menu-title{font-size:11px;color:var(--ink-dim);padding:4px 8px}.profile-menu-item{display:block;width:100%;text-align:left;background:none;border:none;color:var(--ink);font-size:13px;padding:8px;border-radius:8px;cursor:pointer}.profile-menu-item:hover{background:rgba(22,56,107,.06)}.profile-menu-item.active{color:var(--orange);font-weight:800}.profile-menu-item.add{color:var(--orange);border-top:1px solid rgba(22,56,107,.1);margin-top:4px}.level-row{gap:12px}.level-badge,.level-row{display:flex;align-items:center}.level-badge{flex:0 0 auto;width:58px;height:58px;border-radius:50%;justify-content:center;font-weight:900;font-size:15px;color:#3a1500;background:linear-gradient(135deg,var(--amber),var(--orange));box-shadow:0 4px 12px rgba(255,122,26,.4)}.lvbar-track{height:8px;background:rgba(22,56,107,.1);border-radius:999px;margin:6px 0 3px;overflow:hidden}.lvbar-fill{height:100%;background:linear-gradient(90deg,var(--orange),var(--amber))}.badge-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));grid-gap:8px;gap:8px;margin-top:14px}.badge-cell{text-align:center;padding:10px 4px;border-radius:12px;background:rgba(22,56,107,.04);border:1px solid rgba(22,56,107,.08);opacity:.5}.badge-cell.earned{opacity:1;border-color:rgba(255,122,26,.4);background:rgba(255,203,15,.14)}.badge-emoji{display:block;font-size:26px}.badge-name{display:block;font-size:11px;margin-top:3px;color:var(--ink-dim)}.badge-cell.earned .badge-name{color:var(--ink);font-weight:700}.cat-head{font-size:15px;margin:20px 4px 8px;padding-left:8px;border-left:4px solid var(--orange)}.mix-note{margin-top:12px;padding:12px 14px;border-radius:12px;background:linear-gradient(135deg,rgba(255,122,26,.14),rgba(255,201,60,.14));border:1px solid rgba(255,122,26,.4);font-size:13px;line-height:1.6}.row{display:flex;gap:12px;flex-wrap:wrap}.muted{color:var(--ink-dim)}.center{text-align:center}.play-wrap{min-height:60vh;display:flex;flex-direction:column;gap:18px}.play-top{display:flex;justify-content:space-between;align-items:baseline;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.timer{font-size:34px;font-weight:800;color:var(--orange);font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.progress-track{height:8px;background:rgba(22,56,107,.1);border-radius:999px;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,var(--orange),var(--amber));transition:width .15s ease}.progress-track.ta .progress-fill{background:linear-gradient(90deg,var(--amber),var(--orange))}.timer.danger{color:var(--coral);animation:pulse .6s ease-in-out infinite}@keyframes pulse{50%{opacity:.55}}.play-shake{animation:shake .18s ease}@keyframes shake{0%,to{transform:translateX(0)}25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}.hint{text-align:center}.hint,.progress-counter{color:var(--ink-dim);font-size:13px}.progress-counter{font-weight:700;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.progress-counter b{color:var(--ink);font-size:15px}.question-card{min-height:140px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:clamp(28px,7vw,44px);font-weight:800;border-radius:var(--radius);transition:background .15s ease,box-shadow .15s ease}.question-card.correct{background:var(--color-success-bg);box-shadow:0 0 0 2px var(--color-success) inset;animation:feedbackPop .2s ease}.question-card.incorrect{background:var(--color-error-bg);box-shadow:0 0 0 2px var(--color-error) inset;animation:shake .18s ease}@keyframes feedbackPop{0%{transform:scale(.97)}60%{transform:scale(1.01)}to{transform:scale(1)}}.feedback-chip{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:800;padding:5px 12px;border-radius:999px}.feedback-chip.correct{color:#0d7a68;background:var(--color-success-bg)}.feedback-chip.incorrect{color:var(--color-error-text);background:var(--color-error-bg)}.result-time{font-size:56px;font-weight:800;color:var(--orange);text-align:center;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:10px;gap:10px;margin-top:14px}.stat{background:rgba(22,56,107,.05);border-radius:12px;padding:12px;text-align:center}.stat .v{display:block;margin-bottom:2px;font-size:22px;font-weight:800;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.stat .l{display:block;font-size:12px;color:var(--ink-dim)}.badge-best{display:inline-block;background:var(--gold);color:var(--navy-900);font-weight:800;border-radius:999px;padding:6px 14px;margin:12px auto 0}.tabs{display:flex;gap:8px;margin:6px 0 14px}.tab{flex:1 1;text-align:center;padding:10px;border-radius:12px;background:rgba(22,56,107,.05);color:var(--ink-dim);cursor:pointer;font-weight:700;border:1px solid transparent}.tab.active{background:rgba(255,203,15,.2);color:#a06400;border-color:rgba(255,203,15,.6)}.lb-row{display:grid;grid-template-columns:44px 1fr auto;align-items:center;grid-gap:10px;gap:10px;padding:11px 12px;border-radius:10px}.lb-row+.lb-row{margin-top:4px}.lb-row.me{background:rgba(255,203,15,.2);border:1px solid rgba(255,203,15,.6)}.lb-rank{font-weight:800;color:var(--orange);font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.lb-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lb-val{font-weight:800;font-feature-settings:"tnum";font-variant-numeric:tabular-nums;display:flex;flex-direction:column;align-items:flex-end}.lb-date{font-size:10.5px;font-weight:600;color:var(--ink-dim);font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.source-badge{font-size:11px;color:var(--ink-dim);border:1px solid rgba(22,56,107,.16);border-radius:999px;padding:3px 8px}label.field{display:block;margin:14px 0 6px;font-size:13px;color:var(--ink-dim)}input.text{width:100%;padding:12px 14px;border-radius:12px;border:1px solid rgba(22,56,107,.16);background:var(--surface);color:var(--ink);font-size:16px;transition:border-color .15s ease,box-shadow .15s ease}input.text:focus{outline:none;border-color:var(--orange);box-shadow:var(--focus-ring)}input.text.error{border-color:var(--color-error);background:var(--color-error-bg)}input.text:disabled{opacity:.5;cursor:not-allowed}.field-error{font-weight:700;color:var(--color-error-text)}.field-error,.field-hint{display:block;margin-top:4px;font-size:12px}.field-hint{color:var(--ink-dim)}.flag-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(46px,1fr));grid-gap:8px;gap:8px;margin-top:6px}.flag-opt{font-size:24px;text-align:center;padding:8px 0;border-radius:10px;background:rgba(22,56,107,.05);cursor:pointer;border:2px solid transparent}.flag-opt.sel{border-color:var(--orange);background:rgba(255,203,15,.2)}.list-link{display:flex;align-items:center;justify-content:space-between;padding:14px 4px;border-bottom:1px solid rgba(22,56,107,.1)}.genre-grid{display:grid;grid-template-columns:repeat(2,1fr);grid-gap:12px;gap:12px}@media (min-width:620px){.genre-grid{grid-template-columns:repeat(4,1fr)}}.genre-card{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;cursor:pointer;background:linear-gradient(180deg,var(--surface),var(--surface-warm));border:1px solid rgba(22,56,107,.1);border-radius:14px;padding:16px 14px;color:var(--ink);transition:transform .06s ease,border-color .15s ease}.genre-card:hover{border-color:var(--orange);box-shadow:0 6px 18px rgba(255,122,26,.22)}.genre-card:active{transform:translateY(1px)}.genre-card.selected{border-color:var(--orange);background:linear-gradient(180deg,rgba(255,122,26,.08),rgba(255,201,60,.06));box-shadow:0 0 0 1px var(--orange) inset}.genre-card-top{display:flex;align-items:center;justify-content:space-between;width:100%}.genre-card-arrow{color:var(--ink-dim);transition:transform .15s ease}.genre-card:hover .genre-card-arrow{color:var(--orange);transform:translateX(2px)}.genre-emoji{font-size:28px}.genre-title{font-weight:800;font-size:15px}.genre-desc{font-size:12.5px;color:var(--ink-dim);line-height:1.4}.genre-best{margin-top:6px;font-size:12px;font-weight:700;color:var(--orange);font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.genre-best.empty{color:var(--ink-dim);font-weight:500}.genre-chips{display:flex;gap:6px;overflow-x:auto;padding:10px 0 4px;-webkit-overflow-scrolling:touch;scrollbar-width:none}.genre-chips::-webkit-scrollbar{display:none}.chip{flex:0 0 auto;cursor:pointer;font-size:13px;font-weight:700;padding:7px 12px;border-radius:999px;background:rgba(22,56,107,.05);color:var(--ink-dim);border:1px solid transparent;white-space:nowrap}.chip.active{background:rgba(255,203,15,.2);color:#a06400;border-color:rgba(255,203,15,.6)}.mode-select{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:8px;gap:8px;margin-top:10px}.mode-select.compact{grid-template-columns:repeat(2,1fr)}.mode-btn{display:flex;flex-direction:column;gap:2px;align-items:center;cursor:pointer;padding:12px 8px;border-radius:14px;background:rgba(22,56,107,.05);color:var(--ink-dim);border:2px solid transparent;transition:transform .06s ease,border-color .15s ease,background .15s ease}.mode-btn:active{transform:translateY(1px)}.mode-btn.active{background:linear-gradient(135deg,rgba(255,122,26,.18),rgba(255,201,60,.18));border-color:var(--orange);color:var(--ink)}.mode-label{font-weight:800;font-size:14px}.mode-sub{font-size:11px;color:var(--ink-dim);text-align:center;line-height:1.25}.combo-badge{position:absolute;top:-14px;right:14px;font-weight:900;font-size:18px;color:#3a1500;background:linear-gradient(135deg,var(--amber),var(--orange));padding:6px 14px;border-radius:999px;box-shadow:0 6px 16px rgba(255,122,26,.45);animation:comboPop .18s ease}@keyframes comboPop{0%{transform:scale(.7) rotate(-6deg)}70%{transform:scale(1.15) rotate(3deg)}to{transform:scale(1) rotate(0)}}.play-card{position:relative}.countdown-overlay{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;background:rgba(10,20,36,.72);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);pointer-events:none}.countdown-num{font-weight:900;line-height:1;font-size:clamp(72px,24vw,168px);color:var(--gold);text-shadow:0 10px 34px rgba(255,122,26,.55);animation:countPop .65s ease forwards}.countdown-num.go{display:inline-flex;align-items:center;gap:10px;font-size:clamp(36px,11vw,84px);color:var(--gold-soft)}.countdown-num.go .msym{color:var(--orange)}@keyframes countPop{0%{transform:scale(.45);opacity:0}28%{transform:scale(1.14);opacity:1}70%{transform:scale(1);opacity:1}to{transform:scale(.82);opacity:0}}@media (prefers-reduced-motion:reduce){.countdown-num{animation:countFade .65s ease forwards}@keyframes countFade{0%{opacity:0}20%{opacity:1}80%{opacity:1}to{opacity:0}}.badge-best,.btn-mix,.combo-badge,.play-shake,.question-card.correct,.question-card.incorrect,.result-card.celebrate,.result-time.pop,.streak-celebrate,.timer.danger{animation:none!important}.badge-best:after,.particle{display:none}}.result-time .unit{font-size:26px;color:var(--orange);margin-left:4px}.result-card{position:relative;overflow:hidden}.result-card.celebrate{border-color:rgba(255,122,26,.7);box-shadow:0 0 0 2px rgba(255,203,15,.45),var(--shadow);animation:bestPop .5s cubic-bezier(.22,1.4,.4,1) 1,bestGlow .9s ease-in-out 3}@keyframes bestPop{0%{transform:scale(.94)}55%{transform:scale(1.025)}to{transform:scale(1)}}@keyframes bestGlow{50%{box-shadow:0 0 0 3px rgba(255,203,15,.55),0 0 46px rgba(255,122,26,.55),var(--shadow)}}.result-time.pop{animation:numberPop .62s cubic-bezier(.18,1.5,.35,1) both}@keyframes numberPop{0%{transform:scale(.3);opacity:0}45%{transform:scale(1.28);opacity:1}70%{transform:scale(.94)}to{transform:scale(1)}}.badge-best{position:relative;overflow:hidden;animation:comboPop .34s ease backwards}.badge-best:after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.75) 50%,transparent 70%);transform:translateX(-120%);animation:badgeShine .9s ease .25s 1}@keyframes badgeShine{to{transform:translateX(120%)}}.streak-celebrate{display:inline-flex;align-items:center;gap:7px;margin:12px auto 0;padding:7px 16px;border-radius:999px;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--orange),var(--amber));box-shadow:0 6px 18px rgba(255,122,26,.4);animation:comboPop .4s ease backwards,streakGlow 1s ease-in-out 3}.streak-celebrate b{font-size:1.15em}.streak-celebrate .msym{color:#fff3d6}@keyframes streakGlow{50%{box-shadow:0 6px 26px rgba(255,122,26,.75)}}.particles{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1}.particle{position:absolute;top:16%;left:50%;width:var(--sz,9px);height:var(--sz,9px);border-radius:var(--rad,2px);opacity:0;animation:burst var(--dur,1.1s) cubic-bezier(.15,.7,.3,1) var(--delay,0s) forwards}.particle.p0{background:var(--orange)}.particle.p1{background:var(--amber)}.particle.p2{background:var(--gold)}.particle.p3{background:var(--orange-soft)}.particle.p4{background:var(--amber)}.particle.p5{background:var(--orange)}.particle.p6{background:var(--gold-soft)}@keyframes burst{0%{transform:translate(-50%) rotate(0);opacity:1}12%{opacity:1}to{transform:translate(calc(-50% + var(--dx, 0px)),var(--dy,300px)) rotate(var(--rot,540deg));opacity:0}}.today-chip{display:inline-flex;align-items:center;gap:4px;margin:10px 0 2px;font-size:12.5px;font-weight:800;color:var(--navy-900);background:linear-gradient(135deg,#ffe08a,var(--amber));padding:5px 12px;border-radius:999px}.today-chip .msym{color:inherit}.metric-notice{display:flex;align-items:flex-start;gap:8px;margin-top:10px;padding:10px 12px;font-size:12.5px;line-height:1.5;color:var(--ink);background:rgba(31,157,138,.1);border:1px solid rgba(31,157,138,.35);border-radius:12px}.metric-notice b{color:#a06400}.metric-notice .msym:first-child{color:var(--mint);flex-shrink:0;margin-top:1px}.metric-notice-x{flex-shrink:0;background:none;border:none;color:var(--ink-dim);cursor:pointer;padding:0;line-height:1}.short-today{background:rgba(255,201,60,.1);border:1px solid rgba(255,201,60,.35);border-radius:12px;padding:10px 12px;text-align:left}.short-today-best{display:flex;align-items:center;gap:5px;flex-wrap:wrap;font-size:14px;font-weight:700;color:var(--ink)}.short-today-best b{color:#a06400;font-size:16px}.short-today-best .muted{font-size:12px;font-weight:600}.short-today-delta{display:flex;align-items:center;gap:4px;margin-top:6px;font-size:12.5px;color:var(--ink-dim)}.short-today-delta b{color:#a06400}.short-today-delta.up,.short-today-delta.up b{color:var(--ok)}.replay-hint{display:flex;align-items:center;gap:6px;margin:8px 0 2px;font-size:12.5px;font-weight:700;color:var(--ink);background:rgba(255,201,60,.12);border:1px solid rgba(255,201,60,.4);padding:7px 12px;border-radius:12px}.replay-hint b{color:#a06400}.play-player{display:inline-block;background:rgba(22,56,107,.06);border-radius:999px;padding:2px 10px;margin-right:8px;color:var(--ink);font-weight:700}.misskey-row{display:flex;flex-wrap:wrap;gap:8px}.misskey{display:flex;flex-direction:column;align-items:center;min-width:46px;padding:8px 6px;border-radius:10px;background:rgba(255,107,107,.12);border:1px solid rgba(255,107,107,.4)}.misskey-ch{font-family:ui-monospace,Menlo,monospace;font-weight:900;font-size:20px;text-transform:uppercase}.misskey-rate{font-size:11px;color:#d94848;font-weight:700}.share-pickers{margin-bottom:8px}.share-swatches{display:flex;gap:8px;margin-bottom:6px}.swatch{width:30px;height:30px;border-radius:8px;border:2px solid transparent;cursor:pointer}.swatch.sel{border-color:var(--navy-800)}.sw-navy{background:linear-gradient(135deg,#16386b,#ffc93c)}.sw-sunset{background:linear-gradient(135deg,#b5471a,#ffd23f)}.sw-mint{background:linear-gradient(135deg,#0d4a45,#7ee081)}.sw-grape{background:linear-gradient(135deg,#3a1a5e,#c58cff)}.share-avatars{display:flex;flex-wrap:wrap;gap:4px}.avatar-btn{font-size:20px;width:36px;height:36px;border-radius:8px;background:rgba(22,56,107,.05);border:2px solid transparent;cursor:pointer}.avatar-btn.sel{border-color:var(--orange);background:rgba(255,122,26,.14)}.en-ja.big{font-size:18px;color:var(--ink);font-weight:700}.memo-hidden{text-align:center;color:var(--ink-dim);font-size:14px;padding:22px 0 10px}.memo-toggle{align-self:center;margin-top:6px;font-size:13px;padding:8px 14px}.memo-toggle.on{border-color:var(--orange);color:var(--orange)}.mobile-input-wrap{margin-top:6px}.mobile-input{width:100%;padding:14px;font-size:18px;border-radius:12px;border:2px solid var(--orange);background:var(--surface);color:var(--ink);text-align:center}.mobile-advisory{display:flex;align-items:flex-start;gap:8px;font-size:12px;line-height:1.6;background:rgba(255,122,26,.1);border:1px solid rgba(255,122,26,.35);border-radius:12px;padding:10px 12px;margin-bottom:8px}.mobile-advisory-close{background:none;border:none;color:var(--ink-dim);cursor:pointer;font-size:14px;padding:0 2px}.kana-display{font-size:clamp(32px,8vw,56px);font-weight:800;text-align:center;letter-spacing:.06em;padding:18px 0 6px}.romaji-line{text-align:center;font-size:clamp(15px,4.4vw,30px);letter-spacing:.08em;font-feature-settings:"tnum";font-variant-numeric:tabular-nums;font-family:ui-monospace,SF Mono,Menlo,monospace;word-break:break-all;overflow-wrap:anywhere;line-height:1.5}.romaji-typed{color:var(--orange)}.romaji-rest{color:var(--ink-dim)}.play-card{padding:24px 20px}.sentence-display{font-size:clamp(22px,5.2vw,32px);font-weight:800;text-align:center;line-height:1.4}.sentence-note{text-align:center;color:var(--mint);font-size:14px;margin-top:8px}.kana-line{text-align:center;font-size:clamp(14px,3.6vw,22px);letter-spacing:.03em;margin-top:16px;word-break:break-all;overflow-wrap:anywhere;line-height:1.5}.kana-done{color:var(--orange)}.kana-rest{color:var(--ink-dim)}.en-line{font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:clamp(17px,4vw,30px);line-height:1.6;letter-spacing:.01em;text-align:center;word-break:break-word;overflow-wrap:anywhere}.en-done{color:var(--orange)}.en-rest{color:var(--ink-dim)}.en-ja{text-align:center;color:var(--mint);font-size:14px;margin-top:14px}.en-done.hit,.romaji-typed.hit{animation:hitpop .12s ease}@keyframes hitpop{0%{text-shadow:0 0 0 rgba(255,122,26,0)}50%{text-shadow:0 0 14px rgba(255,122,26,.7)}}.brandbar-tools{display:flex;align-items:center;gap:8px}.lang-switch{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:26px;padding:0 10px;border:1px solid var(--line,rgba(22,56,107,.18));border-radius:999px;background:var(--surface);color:var(--ink-dim);font-size:12px;font-weight:700;cursor:pointer;transition:color .15s ease,border-color .15s ease,background .15s ease}.lang-switch:hover{color:var(--ink);border-color:var(--orange)}.lang-switch:focus-visible{outline:2px solid var(--orange);outline-offset:2px}[data-theme=focus] .lang-switch{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.22);color:var(--ink-dim)}[data-theme=focus] .lang-switch:hover{color:var(--ink);border-color:var(--navy-600)}@media (max-width:480px){.brandbar-tools{gap:6px}.lang-switch{min-width:40px;height:24px;padding:0 8px;font-size:11px}}.lb-name .lb-date{display:block;font-size:11px;font-weight:500;color:var(--ink-dim);margin-top:1px}@media (max-width:520px){.brandbar-tools{gap:5px;min-width:0}.brandbar .logo{font-size:15px;white-space:nowrap}.account-name,.nav-login-btn span{display:none}.nav-auth{gap:4px}.lang-switch{min-width:34px;height:24px;padding:0 6px;font-size:11px}}