:root{--chr-1:#fff;--chr-2:#eef2f7;--chr-3:#c9d2db;--chr-4:#9aa4af;--chr-5:#6c7681;--chr-6:#444c55;--steel-1:#2a2f37;--steel-2:#181b21;--cream:#f7f1e0;--ink:#22262c;--ink-soft:#555d66;--cherry:#e8273c;--cherry-d:#b3142a;--turq:#16c5cf;--amber:#ffb52e;--grass:#34c46b;--pink:#ff4f9a;--radius:16px;--chrome-body:linear-gradient(180deg,#fff,#e6ebf1 16%,#b4bdc7 48%,#d4dbe2 74%,#9aa4af);--chrome-plate:linear-gradient(180deg,#fdfefe,#dfe5ec 42%,#c0c9d3 60%,#e9eef3);--chrome-btn:radial-gradient(circle at 38% 30%,#fff 0%,#e7ecf2 28%,#b7c0ca 62%,#828d98 100%)}.jbx-body{background:linear-gradient(180deg,rgba(13,15,19,.7) 0,rgba(11,13,17,.82) 60%,rgba(11,13,17,.9) 100%),url(/img/ai-jukebox/bg.webp) top /cover no-repeat fixed,linear-gradient(180deg,var(--steel-1) 0,var(--steel-2) 100%);color:#e8edf2}.jbx-main{max-width:960px;margin:0 auto;padding:8px 18px 64px}.jbx-hero{max-width:960px;margin:18px auto 8px;padding:0 18px;text-align:center}.jbx-cabinet{position:relative;border-radius:140px 140px 18px 18px;padding:16px 16px 22px;background:var(--chrome-body);box-shadow:0 20px 48px rgba(0,0,0,.45),inset 0 2px 2px hsla(0,0%,100%,.95),inset 0 -16px 30px rgba(60,70,82,.5),inset 0 0 0 1px hsla(0,0%,100%,.5);border:1px solid rgba(120,132,145,.6)}.jbx-cabinet:before{content:"";position:absolute;inset:12px 18px auto 18px;height:92px;border-radius:120px 120px 0 0;background:linear-gradient(90deg,var(--cherry) 0,var(--amber) 25%,var(--grass) 50%,var(--turq) 72%,var(--pink) 100%);opacity:.9;filter:saturate(1.15);-webkit-mask:radial-gradient(120px 120px at 50% 100%,transparent 0 56%,#000 56.5% 70%,transparent 71%);mask:radial-gradient(120px 120px at 50% 100%,transparent 0 56%,#000 56.5% 70%,transparent 71%);box-shadow:0 0 22px rgba(255,120,60,.35);z-index:0}.jbx-cabinet:after{content:"";position:absolute;left:8px;right:8px;bottom:12px;top:110px;border-radius:14px;background:linear-gradient(90deg,hsla(0,0%,100%,.8) 0 6px,rgba(150,160,172,.5) 7px 10px,transparent 11px),linear-gradient(270deg,hsla(0,0%,100%,.8) 0 6px,rgba(150,160,172,.5) 7px 10px,transparent 11px);pointer-events:none;z-index:0}.jbx-cabinet__inner{position:relative;z-index:1;margin-top:58px;border-radius:16px;padding:22px 18px 20px;background:linear-gradient(180deg,rgba(8,10,14,.58),rgba(8,10,14,.74)),url(/img/ai-music/theme-banner.webp) center 28% /cover no-repeat,#12151a;box-shadow:inset 0 0 0 3px hsla(0,0%,100%,.85),inset 0 0 0 6px rgba(120,132,145,.55),inset 0 0 44px rgba(0,0,0,.7),0 6px 14px rgba(0,0,0,.35)}.jbx-hero__kicker{display:inline-block;font-family:Montserrat,sans-serif;font-size:.8rem;letter-spacing:.26em;color:var(--amber);margin:0 0 8px;text-transform:uppercase;text-shadow:0 0 10px rgba(255,181,46,.55)}.jbx-hero__title{font-family:Montserrat,Noto Sans JP,sans-serif;font-weight:900;line-height:1.08;margin:4px 0 12px;text-wrap:balance;letter-spacing:.005em;font-size:clamp(2.1rem,9vw,4.1rem);background:linear-gradient(180deg,#fff8e2 0,#ffdc83 32%,var(--amber) 52%,#ffe9ab 70%,#c9870c 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#ffd98a;filter:drop-shadow(0 2px 0 rgba(70,36,0,.5)) drop-shadow(0 0 16px rgba(255,181,46,.62)) drop-shadow(0 0 38px rgba(255,140,40,.42))}.jbx-hero__title .jbx-ttl-a{display:inline-block}.jbx-hero__lead{max-width:36em;margin:6px auto 0;color:#c7d0da;font-size:1rem;line-height:1.85}.jbx-hero__count{display:inline-flex;gap:8px;align-items:baseline;margin-top:14px;padding:6px 18px;border-radius:999px;background:linear-gradient(180deg,var(--cherry),var(--cherry-d));border:2px solid hsla(0,0%,100%,.85);color:#fff;font-weight:800;font-size:.9rem;box-shadow:0 4px 12px rgba(232,39,60,.4),inset 0 1px 1px hsla(0,0%,100%,.5);text-shadow:0 1px 2px rgba(0,0,0,.35)}.jbx-hero__count b{font-size:1.3rem}.jbx-grille{display:flex;justify-content:center;gap:7px;margin-top:18px}.jbx-grille span{width:6px;height:26px;border-radius:4px;background:linear-gradient(180deg,var(--chr-1),var(--chr-3) 55%,var(--chr-5));box-shadow:inset 0 1px 1px hsla(0,0%,100%,.9),0 1px 2px rgba(0,0,0,.4)}.jbx-sec{margin:40px 0 0}.jbx-sec__h{font-family:Montserrat,Noto Sans JP,sans-serif;font-weight:900;font-size:1.32rem;color:#fff;margin:0 0 6px;display:flex;align-items:center;gap:10px;text-shadow:0 1px 0 rgba(0,0,0,.35)}.jbx-sec__h .jbx-sec__code{font-family:Montserrat,sans-serif;font-size:.74rem;letter-spacing:.14em;color:#fff;background:linear-gradient(180deg,var(--cherry),var(--cherry-d));border:1px solid hsla(0,0%,100%,.7);border-radius:6px;padding:3px 9px;box-shadow:inset 0 1px 1px hsla(0,0%,100%,.5),0 2px 5px rgba(0,0,0,.3)}.jbx-sec__sub{color:#b7c0cb;font-size:.96rem;line-height:1.8;margin:0 0 14px}.jbx-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}.jbx-trk{position:relative;display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;padding:14px 16px;border-radius:var(--radius);background:var(--chrome-plate);border:1px solid rgba(120,132,145,.5);box-shadow:inset 0 1px 1px hsla(0,0%,100%,.9),inset 0 -2px 6px rgba(110,122,135,.35),0 8px 18px rgba(0,0,0,.3);color:var(--ink);transition:box-shadow .2s ease,transform .2s ease}.jbx-trk:before{content:"";position:absolute;inset:0;border-radius:var(--radius);background:repeating-linear-gradient(90deg,hsla(0,0%,100%,.35) 0 1px,transparent 1px 3px);opacity:.12;pointer-events:none}.jbx-trk.is-playing{box-shadow:inset 0 1px 1px hsla(0,0%,100%,.95),0 0 0 2px var(--cherry),0 10px 24px rgba(232,39,60,.28);transform:translateY(-1px)}.jbx-trk__disc{position:relative;z-index:1;width:58px;height:58px;border-radius:50%;background:radial-gradient(circle at 50% 50%,#e7ecf2 0 15%,#aab4bf 16% 19%,#15171b 20% 100%);box-shadow:inset 0 0 0 1px hsla(0,0%,100%,.15),0 4px 10px rgba(0,0,0,.45);display:grid;place-items:center}.jbx-trk__disc:after{content:"";position:absolute;inset:9px;border-radius:50%;background:repeating-radial-gradient(circle at 50% 50%,hsla(0,0%,100%,.06) 0 1px,transparent 1px 3px)}.jbx-trk.is-playing .jbx-trk__disc{animation:jbx-spin 3.2s linear infinite}@keyframes jbx-spin{to{transform:rotate(1turn)}}.jbx-trk__code{position:relative;z-index:1;font-family:Montserrat,sans-serif;font-weight:900;font-size:.72rem;color:var(--ink);text-shadow:0 1px 0 hsla(0,0%,100%,.6)}.jbx-trk__body{position:relative;z-index:1;min-width:0}.jbx-trk__row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.jbx-trk__play{flex:0 0 auto;width:44px;height:44px;border-radius:50%;border:1px solid rgba(120,132,145,.7);cursor:pointer;background:var(--chrome-btn);box-shadow:0 3px 8px rgba(0,0,0,.35),inset 0 2px 2px hsla(0,0%,100%,.95),inset 0 -3px 6px rgba(110,122,135,.5);position:relative;transition:transform .12s ease}.jbx-trk__play:hover{transform:scale(1.06)}.jbx-trk__play:focus-visible{outline:3px solid var(--turq);outline-offset:2px}.jbx-trk__play:before{content:"";position:absolute;top:50%;left:54%;transform:translate(-50%,-50%);border-style:solid;border-width:8px 0 8px 13px;border-color:transparent transparent transparent var(--cherry)}.jbx-trk.is-playing .jbx-trk__play:before{border:none;width:11px;height:12px;left:50%;background:linear-gradient(var(--cherry),var(--cherry)) 0 /4px 100% no-repeat,linear-gradient(var(--cherry),var(--cherry)) 100% /4px 100% no-repeat}.jbx-trk__name{margin:0;font-size:1.06rem;font-weight:800;color:var(--ink);line-height:1.3}.jbx-trk__tag{display:inline-block;margin-left:8px;font-size:.72rem;font-weight:800;vertical-align:middle;padding:2px 9px;border-radius:999px;background:linear-gradient(180deg,#d7faff,#a7ecf2);color:#066c72;border:1px solid rgba(22,197,207,.6);box-shadow:inset 0 1px 1px hsla(0,0%,100%,.8)}.jbx-trk__tag--alt{background:linear-gradient(180deg,#ffd9e8,#ffb0cf);color:#a01253;border-color:rgba(255,79,154,.55)}.jbx-trk__desc{margin:4px 0 8px;font-size:.9rem;line-height:1.7;color:var(--ink-soft)}.jbx-trk__bar{position:relative;height:9px;border-radius:999px;background:linear-gradient(180deg,#aeb7c1,#d6dde3);box-shadow:inset 0 1px 3px rgba(0,0,0,.4);cursor:pointer;overflow:hidden}.jbx-trk__bar:focus-visible{outline:3px solid var(--turq);outline-offset:3px}.jbx-trk__fill{display:block;width:0;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--cherry),var(--amber));box-shadow:0 0 8px rgba(255,120,40,.5)}.jbx-trk__time{margin-top:6px;font-size:.8rem;color:var(--ink-soft);font-variant-numeric:tabular-nums}.jbx-trk__sep{opacity:.5;margin:0 4px}.jbx-lyrics{margin-top:10px;border-top:1px dashed rgba(120,132,145,.45);padding-top:8px}.jbx-lyrics__sum{cursor:pointer;font-size:.85rem;font-weight:800;color:var(--cherry-d);list-style:none}.jbx-lyrics__sum::-webkit-details-marker{display:none}.jbx-lyrics__sum:before{content:"📜 "}.jbx-lyrics[open] .jbx-lyrics__sum:before{content:"📖 "}.jbx-lyrics__body{margin:10px 0 2px;white-space:pre-line;font-size:.9rem;line-height:1.9;color:var(--ink)}.jbx-note{margin:18px 0 0;padding:14px 16px;border-radius:14px;background:var(--cream);border:1px solid rgba(120,132,145,.35);box-shadow:inset 0 1px 1px hsla(0,0%,100%,.8),0 4px 10px rgba(0,0,0,.2);color:#5a4a2c;font-size:.9rem;line-height:1.8}.jbx-note a{color:var(--cherry-d);font-weight:700}.jbx-credit{margin:18px 0 0;font-size:.82rem;color:#aeb8c3;line-height:1.7}.jbx-closer{margin:44px auto 0;text-align:center;padding:26px 20px;border-radius:20px;background:var(--chrome-body);box-shadow:inset 0 2px 2px hsla(0,0%,100%,.9),inset 0 -10px 24px rgba(110,122,135,.4),0 14px 32px rgba(0,0,0,.35);border:1px solid rgba(120,132,145,.55)}.jbx-closer .jbx-hero__kicker{color:var(--cherry-d);text-shadow:none}.jbx-closer__h{font-family:Montserrat,Noto Sans JP,sans-serif;font-weight:900;font-size:clamp(1.2rem,4.5vw,1.7rem);color:var(--ink);margin:0 0 8px;text-wrap:balance}.jbx-closer__b{color:var(--ink-soft);margin:0 0 16px;font-size:.96rem;line-height:1.8}.jbx-cta{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-weight:800;padding:13px 24px;border-radius:999px;color:#fff;background:linear-gradient(180deg,var(--cherry),var(--cherry-d));border:2px solid hsla(0,0%,100%,.85);box-shadow:0 8px 18px rgba(232,39,60,.35),inset 0 1px 1px hsla(0,0%,100%,.5);text-shadow:0 1px 2px rgba(0,0,0,.3);transition:transform .15s ease}.jbx-cta:hover{transform:translateY(-2px)}.jbx-cta--ghost{color:var(--ink);background:var(--chrome-plate);border:1px solid rgba(120,132,145,.6);box-shadow:inset 0 1px 1px hsla(0,0%,100%,.9),0 4px 10px rgba(0,0,0,.2);text-shadow:none;margin-top:12px}@media (max-width:540px){.jbx-cabinet{border-radius:96px 96px 16px 16px}.jbx-cabinet:before{height:70px}.jbx-cabinet__inner{margin-top:42px}.jbx-trk{grid-template-columns:1fr;gap:10px}.jbx-trk__disc{width:48px;height:48px}.jbx-main{padding:8px 14px 52px}.jbx-hero{padding:0 14px}}@media (prefers-reduced-motion:reduce){.jbx-trk.is-playing .jbx-trk__disc{animation:none}.jbx-cta:hover,.jbx-trk__play:hover{transform:none}}