@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@500;600;700&family=Noto+Sans+JP:wght@400;500;600;700&family=Noto+Serif+JP:wght@600&display=swap');

:root { --ink:#102b30; --muted:#506467; --paper:#eef2f0; --line:#b9c8c2; --accent:#ffb77f; --night:#0b2429; --mint:#b8e4d5; }
body { background:radial-gradient(circle at 10% 0,#dce9e4 0,transparent 28%),var(--paper); color:var(--ink); font-family:'Noto Sans JP','Yu Gothic',Meiryo,sans-serif; }
header { background:#eef2f0cc; backdrop-filter:blur(18px); }
.brand { font-family:'DM Sans','Noto Sans JP',sans-serif; letter-spacing:-.04em; }
.demo-banner { background:var(--night); color:#d9ebe5; font-size:.82em; letter-spacing:.02em; }
h1 { font-family:'Noto Serif JP',serif; letter-spacing:.01em; }
.hours { font-family:'DM Sans','Noto Sans JP',sans-serif; font-weight:600; letter-spacing:.08em; }
.hours span { color:var(--muted); font-weight:400; letter-spacing:0; margin-left:8px; }
.entry-button { border-radius:24px; box-shadow:0 16px 38px #173f4630; overflow:hidden; position:relative; }
.entry-button::after { content:'↗'; font-size:1.3em; position:absolute; right:30px; top:25px; }
.entry-button .choice-number { color:var(--accent); font:700 .78em/1 'DM Sans',sans-serif; letter-spacing:.16em; }
.entry-button strong { font-family:'DM Sans','Noto Sans JP',sans-serif; letter-spacing:-.04em; }
.entry-button.listen { background:#f8fbfa; border-color:#8eaaa1; }
.entry-button.listen .choice-number { color:#2f7664; }
.stage { border-radius:28px; box-shadow:0 24px 50px #173f4638; isolation:isolate; min-height:430px; }
.stage::after { background:linear-gradient(transparent,#071d24ed); inset:28% 0 0; z-index:1; }
.stage-shade { background:linear-gradient(110deg,#08252b33,transparent 55%); inset:0; position:absolute; z-index:1; }
.stage-label { backdrop-filter:blur(12px); background:#0b252bd9; border-radius:999px; font-size:.78em; padding:7px 16px; z-index:3; }
.stage-label b { color:var(--accent); }
.stage-info { z-index:3; }
.stage-kicker { color:#ffd0ad; font:700 .64em/1 'DM Sans',sans-serif; letter-spacing:.18em; }
.panel { backdrop-filter:blur(10px); background:#fdfefddd; border-color:#fff; border-radius:22px; box-shadow:0 14px 38px #173f4612; }
.section-label { color:#2b7664; font:700 .68em/1 'DM Sans',sans-serif; letter-spacing:.18em; }
.intro-panel { display:flex; flex-direction:column; justify-content:center; }
.text-button { background:transparent; border-color:transparent; text-decoration:underline; text-underline-offset:5px; }
.avatars { gap:12px; }
.avatar { background:#e8efec; border-color:transparent; font-size:.72em; min-width:0; overflow:hidden; padding:8px; }
.avatar-art { aspect-ratio:3/5; background-image:var(--avatar-url); background-position:center bottom; background-repeat:no-repeat; background-size:contain; border-radius:9px; display:block; width:100%; }
.avatar .avatar-name { display:block; font:700 .78em/1.3 'DM Sans',sans-serif; letter-spacing:.08em; margin-top:6px; }
.avatar.selected { background:#cce8de; outline:4px solid #246552; outline-offset:2px; }
.selection-preview { align-items:center; background:#e8f0ed; border-radius:16px; display:flex; gap:22px; margin-bottom:24px; padding:18px; }
.selection-preview .avatar-art { flex:0 0 74px; width:74px; }
.selection-preview b { font-size:1.15em; }
.week-showcase { margin-top:48px; }
.week-showcase > div:first-child { align-items:end; display:flex; justify-content:space-between; }
.week-showcase h2 { margin-top:10px; }
.week-scroll { display:grid; gap:12px; grid-template-columns:repeat(7,1fr); }
.week-card { background:#fff; border:1px solid #d2ddd9; border-radius:16px; min-width:0; overflow:hidden; padding:8px; position:relative; }
.week-card img { aspect-ratio:1/1; border-radius:10px; display:block; object-fit:cover; width:100%; }
.week-card span { background:var(--night); border-radius:50%; color:#fff; display:grid; font-size:.75em; height:30px; left:14px; place-items:center; position:absolute; top:14px; width:30px; }
.week-card b { display:block; font-size:.72em; line-height:1.4; padding:8px 3px 3px; }
.week-card.today { border:3px solid #2c745f; padding:6px; }
.performer { --energy:0; aspect-ratio:3/5; bottom:76px; filter:drop-shadow(0 18px 15px #06191cab); font-size:initial; left:calc(50% - 64px); top:auto; transform-origin:50% 100%; width:128px; z-index:2; }
.performer-person { background-image:var(--avatar-url); background-position:center bottom; background-repeat:no-repeat; background-size:contain; border-radius:22px; inset:0; position:absolute; }
.instrument { filter:drop-shadow(0 5px 4px #06191a88); font-size:54px; left:50%; line-height:1; position:absolute; top:49%; transform:translate(-50%,-50%); z-index:2; }
.sound-wave { color:#ffd0ad; font-size:28px; opacity:0; position:absolute; right:-20px; top:20%; }
.performer.is-playing .sound-wave { animation:note 1s ease-out infinite; }
.performer.is-playing.strum { animation:strum .55s ease-in-out infinite alternate; }
.performer.is-playing.strum-fast,.performer.is-playing.pick { animation:strum .34s ease-in-out infinite alternate; }
.performer.is-playing.strum-soft { animation:strum .85s ease-in-out infinite alternate; }
.performer.is-playing.keys { animation:keys .48s ease-in-out infinite alternate; }
.performer.is-playing.tap { animation:tap .42s ease-in-out infinite; }
.performer.is-playing.blow { animation:blow .9s ease-in-out infinite alternate; }
.performer.is-playing.bow { animation:bow .72s ease-in-out infinite alternate; }
.performer.is-playing.squeeze { animation:squeeze .58s ease-in-out infinite alternate; }
@keyframes strum { to { transform:rotate(calc(2deg + var(--energy) * 3deg)) translateY(calc(var(--energy) * -3px)); } }
@keyframes keys { to { transform:translateY(calc(2px + var(--energy) * 4px)) rotate(-1deg); } }
@keyframes tap { 50% { transform:translateY(calc(2px + var(--energy) * 5px)); } }
@keyframes blow { to { transform:rotate(2deg) translateY(calc(var(--energy) * -2px)); } }
@keyframes bow { to { transform:rotate(calc(-2deg - var(--energy) * 2deg)) translateX(calc(var(--energy) * 3px)); } }
@keyframes squeeze { to { transform:scaleX(calc(1 - var(--energy) * .04)) translateY(-2px); } }
@keyframes note { 0% { opacity:0; transform:translateY(0); } 40% { opacity:1; } 100% { opacity:0; transform:translateY(-34px); } }
@media (max-width:850px) { .week-scroll { grid-template-columns:repeat(7,130px); overflow-x:auto; padding:4px 4px 14px; scroll-snap-type:x mandatory; } .week-card { scroll-snap-align:start; } }
@media (max-width:560px) { .stage { min-height:380px; } .avatars { grid-template-columns:repeat(2,1fr); } .entry-button::after { right:22px; top:20px; } .performer { bottom:72px; left:calc(50% - 55px); width:110px; } }
@media (prefers-reduced-motion:reduce) { .performer.is-playing { animation:none!important; } .sound-wave { display:none; } }