/* YUKKO: plum ink, quiet white surfaces, and a small seasonal stage. */
:root{--ink:#35243e;--plum:#623c75;--muted:#756b7c;--line:#e8e1eb;--paper:#fbf9fc;--serif:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif;color:var(--ink);background:var(--paper);font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif}
body{background:var(--paper);color:var(--ink)}
body button,body input{font-family:inherit}
body button,body a,body input{touch-action:manipulation}
body button:focus-visible,body a:focus-visible,body input:focus-visible{outline:3px solid #9872ad;outline-offset:3px}
body header{position:relative;isolation:isolate;background:linear-gradient(110deg,#fff 25%,#f5eef8 100%);border-bottom:0;padding:25px max(24px,calc((100vw - 1000px)/2));color:var(--ink);overflow:hidden}
body header::before{content:"";position:absolute;inset:0 0 0 65%;z-index:-1;background:linear-gradient(90deg,#f8f3fa,transparent),url('./halloween-lavender.webp') right 60%/400px auto no-repeat;opacity:.2;pointer-events:none}
body .header-inner,body header .inner{max-width:1000px;gap:32px}
body header .header-copy p{background:none;border-radius:0;padding:0;color:var(--plum);font-size:.875rem;font-weight:600;letter-spacing:.13em;margin:0 0 10px}
body header .header-copy p::before{color:#b08c65;margin-right:8px}
body header .header-copy h1{font-family:var(--serif);font-size:clamp(1.75rem,3.5vw,2.45rem);line-height:1.45;font-weight:600;letter-spacing:.025em;color:var(--ink);text-shadow:none}
body .header-title-accent{color:var(--plum)}
body .header-note{color:#ac895d;font-size:.8em;margin-left:10px}
body header .header-copy small{color:var(--muted);font-size:.875rem;margin-top:10px;letter-spacing:.04em}
body .header-yukko{width:124px;mix-blend-mode:multiply;filter:none}
body header>.header-birds{width:85px;right:max(170px,calc((100vw - 1000px)/2 + 150px));bottom:12px;filter:none}
body .halloween-band{height:30px;background:#efe6f2;border:0}
body .halloween-band::before,body .halloween-band::after{opacity:.35;width:145px;background-size:210px 140px}
body .halloween-candy{width:240px;max-width:calc(100% - 140px);opacity:.85}
body main{max-width:1048px;padding:28px 24px 38px}
body .search,body .card{border:1px solid var(--line);border-radius:20px;background:#fff;box-shadow:0 8px 28px #35243e05;padding:24px}
body .search{margin-bottom:18px;display:grid;grid-template-columns:230px minmax(0,1fr);column-gap:28px}
body .search>label,body .search>.search-line{grid-column:1/-1}
body .search>.category-picker{margin-top:22px;border-top:0;border-left:1px solid var(--line);padding:0 0 0 28px}
body .search>.mood-picker{min-width:0}
body .search>.mood-picker p{max-width:200px}
body .search>label{font-size:1.125rem;font-weight:700;letter-spacing:.02em;margin-bottom:14px;color:var(--ink)}
body .search-line{gap:10px}
body #query,body #song-search,body #tag-search{border:1px solid #d7cddd;background:#fbf9fc;border-radius:12px;min-height:56px;box-shadow:none;color:var(--ink)}
body .search-line button{background:var(--plum);border-radius:12px;box-shadow:none;min-height:52px;padding:0 24px}
body .search-line button:hover{background:#492b59}
body .mood-picker{margin-top:22px}
body .mood-picker legend{font-size:.9375rem;color:var(--ink);margin-bottom:8px}
body .mood-picker p{font-size:.875rem;color:var(--muted);margin-bottom:12px}
body .mood-options{gap:8px}
body .mood-options button{border:1px solid #e7deeb;background:#f6f1f8;color:var(--plum);border-radius:9px;padding:9px 17px;min-height:44px;font-size:.9375rem}
body .mood-options button.active,body .chips button.active,body .categories button[aria-pressed="true"]{background:var(--plum);border-color:var(--plum);color:#fff}
body .category-picker{margin-top:20px;padding-top:14px;border-top:1px solid #eee8f1}
body .category-picker summary{font-size:.9375rem;min-height:36px;color:var(--ink)}
body .chips{gap:8px;padding:10px 0 0}
body .chips button{border:1px solid var(--line);color:#67566f;background:#fff;font-size:.875rem;padding:7px 13px;min-height:40px}
body .chips button:not(.active):hover{background:#f6f1f8;border-color:#d1bddb}
body .tag-entry{margin:0 0 14px;padding:20px 24px;gap:20px;border:0;border-radius:16px;background:linear-gradient(110deg,#f0e7f4,#f7f1f8);box-shadow:none}
body .tag-entry-title{font-size:1rem;color:var(--plum);font-weight:700}
body .tag-entry-note{font-size:.875rem;line-height:1.6;color:#6d6075;margin-top:6px}
body .member-note{font-size:.8125rem;color:#75667f;margin-top:6px}
body .tag-entry a{background:var(--plum);border-radius:10px;box-shadow:none;font-size:.875rem;padding:10px 18px}
body .closing-controls{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px;margin-top:4px}
body .spotlight{gap:18px;align-items:start;margin:0 0 28px}
body .spotlight .panel{border:1px solid var(--line);border-radius:18px;padding:22px;box-shadow:none;background:#fff;min-height:0}
body .spotlight .panel h2{font-family:inherit;font-size:1rem;line-height:1.5;min-height:0;font-weight:700;letter-spacing:.02em;color:var(--plum);margin:0 0 8px}
body .spotlight .panel p{font-size:.875rem;color:var(--muted);line-height:1.6;margin:0 0 16px}
body .spotlight .panel:first-child{background:linear-gradient(130deg,#4b2e5c,#694579);border-color:transparent;color:#fff;box-shadow:0 10px 24px #4b2e5c12}
body .spotlight .panel:first-child h2{color:#ead5f2}
body .spotlight .panel:first-child p,body .spotlight .panel:first-child .artist{color:#e2d4e9}
body .spotlight .panel .featured{font-family:var(--serif);font-size:1.25rem;line-height:1.6;font-weight:600;color:var(--ink);margin:0 0 5px;overflow-wrap:anywhere}
body .spotlight .panel:first-child .featured{color:#fff}
body .spotlight .panel .artist{font-size:.875rem;line-height:1.6}
body .spotlight .panel button{font-size:.875rem;line-height:1.4;border-radius:9px;background:var(--plum);margin-top:16px;padding:11px 15px;min-height:44px;align-self:flex-start}
body .spotlight .panel:first-child button{background:#fff;color:#563368}
body .spotlight .panel:first-child button:hover{background:#efe4f5}
body .spotlight .panel #spin{margin:0;align-self:flex-start;min-width:132px}
body .roulette-stage{padding-bottom:0;margin-top:12px;min-height:0}
body .spotlight .panel #roulette{height:auto;min-height:0;overflow:visible}
body .spotlight .panel #roulette .featured{display:block;min-height:0;-webkit-line-clamp:unset;overflow:visible;font-size:1.1875rem}
body .spotlight .panel #roulette .artist{white-space:normal;overflow:visible;min-height:0}
body .roulette-panel.has-result .roulette-stage{border-top:1px solid var(--line);padding-top:16px;margin-top:18px;padding-bottom:34px}
body .roulette-decoration{right:0;bottom:0}
body .spotlight .panel .roulette-previous{background:transparent;border:1px solid var(--line);color:var(--plum);font-size:.875rem;margin-top:10px;padding:9px 12px}
body .roulette-panel:not(.has-result) .roulette-previous{display:none}
body .roulette-motion-choice{font-size:.8125rem;line-height:1.5;color:var(--muted);min-height:36px;margin:10px 0 0;gap:8px}
body .roulette-history{border:1px solid var(--line);background:#fff;border-radius:14px;padding:12px 18px;margin-bottom:22px}
body .result-head,body .section-head{padding:0 0 14px;margin:26px 0 16px;border:0;border-bottom:1px solid #ded2e4;background:transparent}
body .result-head h2,body .section-head h2{font-family:var(--serif);font-size:1.4rem;font-weight:600;letter-spacing:.04em;color:var(--ink)}
body .result-head span,body .section-head span{font-size:.875rem;color:var(--muted)}
body .songs{gap:10px 20px}
body .artist-heading{padding:14px 0 9px;border:0;background:none;border-radius:0;color:#796483;font-size:.9375rem;font-weight:600;letter-spacing:.04em;margin:12px 0 0}
body .song,body .song:nth-of-type(even){background:#fff;border:1px solid #eee7f0;border-radius:12px;padding:17px 18px;box-shadow:none}
body .song:hover,body .song:focus-within{border-color:#ccb4d6;background:#fdfaff;box-shadow:0 4px 16px #59386508}
body .song strong{font-size:1rem;font-weight:600;line-height:1.6;color:var(--ink)}
body .song strong::after{display:none}
body .song .artist{font-size:.875rem;color:var(--muted);margin-top:4px}
body .song-actions{gap:3px}
body .song .song-request{background:#f1e9f5;color:var(--plum);border:0;font-size:.875rem;padding:10px 12px}
body .song .song-request:hover{background:var(--plum);color:#fff}
body .song-actions button:last-child{color:#817087;font-size:.8125rem;min-height:36px}
body .fact-badge,body .yukko-badge{background:#f4eef7;font-size:.75rem;font-weight:400;border-radius:4px;color:#80668d}
body .more{border:1px solid #d8c9e0;color:var(--plum);background:#fff;border-radius:10px;min-height:48px;box-shadow:none}
body .hint{font-size:.875rem;color:var(--muted);line-height:1.8}
body .site-footer{color:#8c7e94;font-size:.75rem;line-height:1.8}
body .quick-nav{border:1px solid #e0d5e7;background:#fffffff5;border-radius:14px;box-shadow:0 6px 26px #35243e1c;gap:6px;padding:6px}
body .quick-nav button,body .quick-nav a{border:0;border-radius:9px;font-size:.8125rem;background:var(--plum);padding:9px 12px}
body .quick-nav a{background:#f2ecf6;color:var(--plum)}
body .song-details{border:1px solid var(--line);border-radius:20px}
body .detail-title{font-family:var(--serif);color:var(--ink)}
body .detail-fact{background:#f7f3fa;line-height:1.85}
body .detail-copy{background:var(--plum)}
/* Tag room shares the same visual grammar without changing its workflows. */
body header .inner h1{font-family:var(--serif);font-size:1.5rem;font-weight:600;color:var(--ink)}
body header .inner a{font-size:.875rem;color:var(--plum)}
body header .inner .header-birds{width:76px;filter:none}
body .card h2{font-family:inherit;font-size:1.0625rem;font-weight:700;letter-spacing:.015em;color:var(--plum)}
body .small{font-size:.875rem;line-height:1.7;color:var(--muted)}
body .intro{font-size:.9375rem;line-height:1.8;color:var(--muted)}
body .filters{background:#fff;padding:24px;border:1px solid var(--line);border-radius:20px;margin-bottom:20px}
body .fast-tags,body .song-search,body .kira-section{background:#fff;border-color:var(--line);margin-bottom:20px}
body .suggestion-card{background:#f3ebf7;border:0;box-shadow:none}
body .categories button{border-color:var(--line);background:#fff;font-size:.875rem;min-height:44px}
body .tag-grid{gap:10px}
body .tag-grid .tag{border:1px solid var(--line);background:#fff;border-radius:12px;box-shadow:none}
body .tag-grid .tag strong{color:var(--ink);font-weight:600}
body .tag-grid .tag:hover{background:#f8f3fa;border-color:#cbb4d6}
body .favorite-toggle{border-color:var(--line);color:var(--plum)}
body .kira-copy{border-color:var(--line);background:#f9f6fc}
body .song-option{background:#fff}
body .song-option:hover{background:#f8f3fa}
@media(max-width:650px){
  body header{padding:19px 20px}
  body .header-inner{gap:14px}
  body header .header-copy h1{font-size:clamp(1.25rem,5.2vw,1.7rem);line-height:1.55;letter-spacing:.015em}
  body header .header-copy p{font-size:.8125rem;margin-bottom:7px}
  body header .header-copy small{font-size:.8125rem;margin-top:7px}
  body .header-yukko{width:88px}
  body header>.header-birds{width:58px;right:112px;bottom:4px}
  body .header-note{margin-left:3px}
  body .halloween-band{height:24px}
  body .halloween-candy{width:185px}
  body main{padding:18px 16px 30px}
  body .search,body .card,body .filters{padding:18px;border-radius:16px}
  body .search{display:block}
  body .search>.category-picker{border-left:0;border-top:1px solid var(--line);padding:12px 0 0;margin-top:18px}
  body .search>.mood-picker p{max-width:none}
  body .search>label{font-size:1rem;margin-bottom:12px}
  body #query,body #song-search,body #tag-search{min-height:52px;padding:12px;font-size:1rem}
  body .search-line{gap:8px}
  body .search-line button{padding:0 17px}
  body .mood-picker{margin-top:18px}
  body .mood-options button{font-size:.875rem;padding:8px 12px}
  body .category-picker{margin-top:18px;padding-top:12px}
  body .chips{gap:7px}
  body .chips button{font-size:.875rem;padding:7px 12px;min-height:40px}
  body .tag-entry{padding:17px 18px;gap:12px;flex-wrap:wrap;border-radius:14px}
  body .tag-entry-copy{flex:1 1 210px}
  body .tag-entry a{margin-left:auto;font-size:.875rem;min-height:44px}
  body .tag-entry-title{font-size:1rem}
  body .tag-entry-note{font-size:.875rem}
  body .spotlight{grid-template-columns:1fr;gap:12px;margin-bottom:24px}
  body .spotlight .panel{padding:20px;border-radius:16px}
  body .spotlight .panel h2{font-size:1rem;min-height:0}
  body .spotlight .panel p{display:block;font-size:.875rem;margin-bottom:14px}
  body .spotlight .panel .featured{display:block;font-size:1.25rem;-webkit-line-clamp:unset;overflow:visible}
  body .spotlight .panel .artist{white-space:normal;overflow:visible}
  body .spotlight .panel button{width:auto;align-self:flex-start;font-size:.875rem;margin-top:14px;padding:11px 15px}
  body .spotlight .panel #spin{margin:0}
  body .spotlight .panel #roulette{height:auto;min-height:0}
  body .spotlight .panel #roulette .featured{min-height:0;font-size:1.1875rem}
  body .spotlight .panel .roulette-previous{font-size:.875rem;margin-top:10px}
  body .roulette-motion-choice{font-size:.8125rem}
  body .songs{grid-template-columns:1fr;gap:9px}
  body .song,body .song:nth-of-type(even){padding:15px 16px;gap:12px}
  body .song-actions{max-width:130px}
  body .result-head h2,body .section-head h2{font-size:1.25rem}
  body header .inner{gap:12px}
  body header .inner .header-birds{width:56px}
  body header .inner h1{font-size:1.2rem}
  body .top{gap:12px}
  body .quick-nav{gap:4px;max-width:calc(100% - 16px)}
  body .quick-nav button,body .quick-nav a{font-size:.8125rem;padding:8px 10px}
}
@media(max-width:360px){body header{padding:16px}body .header-yukko{width:76px}body header>.header-birds{width:45px;right:100px}body .search,body .card,body .filters{padding:15px}body .quick-nav button,body .quick-nav a{font-size:.75rem;padding:8px 7px}}
@media(prefers-reduced-motion:no-preference){body .song,body .tag,body button,body .tag-entry a{transition:background-color .18s,border-color .18s,box-shadow .18s}body .roulette-panel.has-result .roulette-stage{animation:result-reveal .24s ease-out}@keyframes result-reveal{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}}