:root{--bg:#0d0b14;--bg-2:#15121f;--card-border:#ffffff1a;--text:#f4f1fa;--muted:#a39bb5;--accent:#c084fc;--spotify:#1db954;--sans:"Noto Sans JP", system-ui, sans-serif;--display:"Poppins", "Noto Sans JP", system-ui, sans-serif;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body{background:var(--bg);color:var(--text);font-family:var(--sans);-webkit-font-smoothing:antialiased;margin:0}#root{min-height:100svh}a{color:var(--accent)}.page{max-width:980px;margin:0 auto;padding:24px 20px 64px}.center{place-items:center;min-height:60svh;display:grid}.pad{padding:48px 0}.badge{font-family:var(--display);letter-spacing:.5px;color:#fff;background:linear-gradient(120deg,#7c3aed,#db2777);border-radius:999px;padding:6px 12px;font-size:15px;font-weight:800;display:inline-block}.error{color:#fda4af;background:#f43f5e1f;border:1px solid #f43f5e4d;border-radius:10px;margin:12px 0;padding:10px 14px;font-size:14px}.note{color:var(--muted);margin-top:16px;font-size:12.5px}.btn{cursor:pointer;font-family:var(--sans);border:none;border-radius:12px;padding:13px 22px;font-size:15px;font-weight:700;transition:transform 80ms,opacity .15s}.btn:active{transform:scale(.97)}.btn:disabled{opacity:.5;cursor:default}.btn-spotify{background:var(--spotify);color:#06210f;padding:16px 32px;font-size:17px}.btn-primary{color:#fff;background:linear-gradient(120deg,#8b5cf6,#ec4899);width:100%;margin-top:16px;padding:15px;font-size:16px}.btn-ghost{color:var(--muted);background:#ffffff0f;padding:9px 16px;font-size:13px}.setup h1{font-family:var(--display)}.setup-steps{color:var(--muted);line-height:2}.setup code{color:var(--text);background:#ffffff14;border-radius:6px;padding:2px 7px;font-size:13px}.landing{text-align:center;background:radial-gradient(60% 50% at 50% 0,#7c3aed59,#0000 70%),radial-gradient(50% 40% at 80% 90%,#db277740,#0000 70%);place-items:center;min-height:100svh;display:grid;position:relative}.landing-inner{max-width:560px;padding:24px}.landing-title{font-family:var(--display);margin:22px 0 16px;font-size:clamp(32px,7vw,52px);font-weight:800;line-height:1.25}.grad{background:linear-gradient(120deg,#c084fc,#f472b6,#fb923c);color:#0000;-webkit-background-clip:text;background-clip:text}.landing-sub{color:var(--muted);margin-bottom:30px;font-size:15.5px;line-height:1.8}.topbar{justify-content:space-between;align-items:center;margin-bottom:22px;display:flex}.topbar-right{align-items:center;gap:8px;display:flex}.sel-sm{padding:8px 10px;font-size:13px}.landing-lang{position:absolute;top:16px;right:16px}.controls{flex-wrap:wrap;gap:10px;margin-bottom:14px;display:flex}.seg{border:1px solid var(--card-border);background:#ffffff0d;border-radius:12px;gap:2px;padding:4px;display:inline-flex}.seg button{color:var(--muted);font-family:var(--sans);cursor:pointer;background:0 0;border:none;border-radius:9px;padding:8px 14px;font-size:13.5px;font-weight:700}.seg button.on{color:#fff;background:linear-gradient(120deg,#8b5cf6,#ec4899)}.name-row{margin-bottom:18px}.name-input{border:1px solid var(--card-border);width:100%;color:var(--text);font-family:var(--sans);background:#ffffff0d;border-radius:12px;padding:12px 14px;font-size:15px}.name-input::placeholder{color:var(--muted)}.field{flex-direction:column;gap:4px;display:inline-flex}.field-label{color:var(--muted);font-size:12px;font-weight:700}.select{border:1px solid var(--card-border);color:var(--text);font-family:var(--sans);cursor:pointer;background:#ffffff0d;border-radius:11px;padding:9px 12px;font-size:14px;font-weight:700}.theme-row{align-items:center;gap:12px;margin-bottom:16px;display:flex}.swatches{flex-wrap:wrap;gap:8px;display:flex}.swatch{cursor:pointer;border:2px solid #0000;border-radius:50%;width:34px;height:34px;padding:0;transition:transform 80ms;box-shadow:0 2px 8px #0006}.swatch:active{transform:scale(.92)}.swatch.on{box-shadow:0 0 0 2px var(--accent);border-color:#fff}.layout{grid-template-columns:340px 1fr;align-items:start;gap:28px;display:grid}@media (width<=720px){.layout{grid-template-columns:1fr}.preview{justify-self:center}}.preview-frame{border-radius:24px;width:324px;height:576px;overflow:hidden;box-shadow:0 20px 60px #00000080}.card-scaler{transform-origin:0 0;transform:scale(.3)}.rank-list{flex-direction:column;gap:4px;margin:0;padding:0;list-style:none;display:flex}.rank-item{border-radius:12px;align-items:center;gap:14px;padding:8px;display:flex}.rank-item:hover{background:#ffffff0a}.rank-num{text-align:center;width:26px;font-family:var(--display);color:var(--muted);font-weight:800}.rank-art{object-fit:cover;background:#ffffff14;border-radius:8px;flex:none;width:48px;height:48px}.rank-meta{min-width:0}.rank-name{white-space:nowrap;text-overflow:ellipsis;font-size:15px;font-weight:700;overflow:hidden}.rank-sub{color:var(--muted);white-space:nowrap;text-overflow:ellipsis;font-size:13px;overflow:hidden}.crash{text-align:center;max-width:420px;padding:24px}.crash h2{margin:0 0 12px}.crash-msg{color:#fda4af;word-break:break-word;background:#f43f5e1f;border:1px solid #f43f5e4d;border-radius:10px;margin-bottom:18px;padding:12px 14px;font-size:13px}.spinner{border:3px solid #ffffff26;border-top-color:var(--accent);border-radius:50%;width:34px;height:34px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.card{color:#fff;width:1080px;height:1920px;font-family:var(--display);background:linear-gradient(160deg,#221a4d 0%,#5b1d8f 48%,#c0246b 100%);flex-direction:column;padding:120px 96px;display:flex;position:relative;overflow:hidden}.card-glow{filter:blur(120px);opacity:.55;border-radius:50%;position:absolute}.card-glow-1{background:var(--g1,#f472b6);width:700px;height:700px;top:-160px;right:-160px}.card-glow-2{background:var(--g2,#818cf8);width:620px;height:620px;bottom:-180px;left:-160px}.card-head{position:relative}.card-eyebrow{letter-spacing:6px;opacity:.85;font-size:32px;font-weight:700}.card-title{margin:26px 0 0;font-family:inherit;font-size:104px;font-weight:900;line-height:1.08}.card-title-en{letter-spacing:4px;background:linear-gradient(120deg,#fde68a,#fb923c);color:#0000;-webkit-background-clip:text;background-clip:text;margin-top:14px;font-family:inherit;font-size:44px;font-weight:800;display:block}.card-user{opacity:.9;margin-top:26px;font-size:38px;font-weight:700}.card-list{flex-direction:column;gap:36px;margin:auto 0;padding:0;list-style:none;display:flex;position:relative}.card-row{align-items:center;gap:40px;display:flex}.card-rank{text-align:center;width:96px;font-family:var(--display);background:linear-gradient(#fff,#ffffff8c);color:#0000;-webkit-background-clip:text;background-clip:text;flex:none;font-size:96px;font-weight:800;line-height:1}.card-art{object-fit:cover;border-radius:24px;flex:none;width:170px;height:170px;box-shadow:0 16px 40px #00000073}.card-art-empty{background:#ffffff26}.card-meta{min-width:0}.card-name{-webkit-line-clamp:2;-webkit-box-orient:vertical;font-family:inherit;font-size:50px;font-weight:900;line-height:1.15;display:-webkit-box;overflow:hidden}.card-sub{opacity:.78;white-space:nowrap;text-overflow:ellipsis;margin-top:8px;font-size:36px;font-weight:600;overflow:hidden}.card-foot{letter-spacing:1px;opacity:.95;align-items:center;gap:18px;font-size:40px;font-weight:800;display:flex;position:relative}.card-foot-dot{background:#1db954;border-radius:50%;width:26px;height:26px}.card.is-dense{padding:96px 96px 100px}.card.is-dense .card-title{font-size:88px}.card.is-dense .card-list{gap:18px}.card.is-dense .card-rank{width:76px;font-size:64px}.card.is-dense .card-art{border-radius:18px;width:104px;height:104px}.card.is-dense .card-name{font-size:40px}.card.is-dense .card-sub{margin-top:4px;font-size:28px}.card.is-dense .card-row{gap:32px}