:root {
  color-scheme: light;
  --surface: #ffffff;
  --text: #292638;
  --sub: #83798f;
  --border: #e9e1f0;
  --accent: #6c4cd4;
  --visual: #c94274;
  --voice: #147e83;
  --motion: #7151ca;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  font-synthesis: none;
  color: var(--text);
  background: #fbf9fe;
}
* { box-sizing: border-box; }
body { display: grid; place-items: center; min-height: 100svh; margin: 0; background: radial-gradient(ellipse at 100% 0, #f0e8fa, transparent 65%), #fbf9fe; }
button, a { -webkit-tap-highlight-color: transparent; outline-offset: 3px; }
button { font: inherit; cursor: pointer; transition: background-color 150ms ease, box-shadow 150ms ease; }
button:disabled { cursor: not-allowed; opacity: .45; }
:focus-visible { outline: 3px solid #af92e4; }
p, h1 { margin: 0; }
[hidden] { display: none !important; }
.player-card { width: min(480px, 100%); background: var(--surface); border: 1px solid var(--border); border-radius: 17px; overflow: hidden; box-shadow: 0 7px 28px #4c34620b; }
.card-header { display: flex; align-items: center; gap: 7px; min-height: 43px; padding: 9px 12px; }
.brand-heart { display: inline-flex; align-items: center; justify-content: center; width: 23px; height: 23px; flex-shrink: 0; border-radius: 8px; background: #f0e9fc; color: var(--accent); font-size: 21px; line-height: 1; }
h1 { min-width: 0; font-size: 12px; font-weight: 550; line-height: 1.5; letter-spacing: -.01em; }
h1 > span { color: #5a4c6e; }
.card-badge { margin-left: auto; flex-shrink: 0; color: #a08cae; background: #f8f5fc; border: 1px solid #eee7f4; border-radius: 5px; padding: 2px 6px; font-size: 10px; line-height: 1.5; }
.player-frame { position: relative; min-width: 200px; min-height: 200px; height: 200px; margin: 0 12px; overflow: hidden; background: #eee6f9; border-radius: 9px; }
#youtube-player { width: 100%; height: 100%; min-width: 200px; min-height: 200px; }
.player-frame iframe { position: absolute; inset: 0; display: block; width: 100%; height: 100%; min-width: 200px; min-height: 200px; border: 0; }
.card-body { padding: 9px 12px 10px; }
.clip-controls { display: flex; justify-content: space-between; align-items: center; gap: 9px; }
.clip-caption { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.clip-kicker { color: #9c8bab; font-size: 10px; line-height: 1.3; }
#range-label { color: var(--text); font-size: 18px; font-weight: 550; letter-spacing: -.035em; line-height: 1.4; font-variant-numeric: tabular-nums; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 36px; padding: 7px 11px; border: 1px solid transparent; border-radius: 8px; line-height: 1.5; font-size: 11px; font-weight: 550; }
.button > [aria-hidden] { font-size: 16px; line-height: 1; }
.button-primary { flex-shrink: 0; color: #fff; background: var(--accent); box-shadow: 0 3px 8px #6c4cd414; }
.button-primary:hover:not(:disabled) { background: #5b3cbd; }
.status-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; min-height: 16px; margin-top: 5px; color: var(--sub); font-size: 10px; line-height: 1.5; }
#player-status { min-width: 0; overflow-wrap: anywhere; }
#clock { flex-shrink: 0; font-variant-numeric: tabular-nums; color: #9b8da9; }
.reaction-stage { position: relative; isolation: isolate; overflow: hidden; margin-top: 8px; padding: 8px 9px; border: 1px solid #eee6f6; border-radius: 10px; background: #f8f5fd; }
.reaction-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 10px; line-height: 1.5; color: #91809e; margin-bottom: 6px; }
.reaction-heading > span:first-child { font-weight: 550; color: #84718f; }
#reaction-source { color: #8b709b; white-space: nowrap; font-size: 11px; }
#reaction-counts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; min-height: 34px; }
#reaction-counts > * { --tone: var(--visual); display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; min-height: 34px; padding: 4px 7px; border: 1px solid color-mix(in srgb, var(--tone) 18%, #fff); border-radius: 7px; color: var(--tone); background: #ffffffd9; font-size: 11px; line-height: 1.3; }
#reaction-counts > :nth-child(2) { --tone: var(--voice); }
#reaction-counts > :nth-child(3) { --tone: var(--motion); }
#reaction-counts strong, .reaction-number, .reaction-count { color: var(--tone); font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1; }
.reaction-icon, .reason-icon, #reaction-counts [aria-hidden] { color: var(--tone); font-size: 21px; line-height: 1; }
#reaction-counts .is-leading, #reaction-counts .is-active { border-color: var(--tone); background: color-mix(in srgb, var(--tone) 7%, #fff); }
#reaction-flow { position: absolute; inset: 23px 0 0; z-index: 1; pointer-events: none; overflow: hidden; }
#reaction-flow > span, .flow-symbol, .flow-icon, .community-symbol { position: absolute; left: 50%; bottom: 1px; color: var(--tone, var(--visual)); opacity: 0; font-size: 22px; line-height: 1; animation: reaction-float 900ms ease-out both; }
#reaction-flow > :nth-child(3n+1) { left: 18%; --tone: var(--visual); }
#reaction-flow > :nth-child(3n+2) { left: 49%; --tone: var(--voice); animation-delay: 60ms; }
#reaction-flow > :nth-child(3n) { left: 80%; --tone: var(--motion); animation-delay: 110ms; }
@keyframes reaction-float { 0% { opacity: 0; transform: translateY(6px) scale(.8); } 20% { opacity: .9; transform: translateY(-5px) scale(1.1); } 75% { opacity: .65; } 100% { opacity: 0; transform: translateY(-35px) scale(.95); } }
.card-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 7px; }
.button-replay { min-height: 30px; padding: 5px 9px; border-color: #ece3f4; background: #f7f3fc; color: var(--accent); }
.button-replay:hover:not(:disabled) { background: #eee6f8; }
#youtube-link { display: inline-flex; align-items: center; gap: 4px; min-height: 30px; color: #9c8aaa; text-decoration: none; font-size: 11px; line-height: 1.5; }
#youtube-link:hover { color: var(--accent); text-decoration: underline; }
.error-panel { margin-top: 8px; padding: 9px 10px; color: #984359; background: #fdf1f4; border: 1px solid #f1dbe2; border-radius: 8px; font-size: 11px; line-height: 1.6; }
.noscript-note { padding: 12px; color: #984359; font-size: 12px; text-align: center; }
@media (max-width: 370px) {
  .card-header { gap: 6px; padding-inline: 10px; }
  h1 { font-size: 11px; letter-spacing: -.025em; }
  .card-badge { padding-inline: 5px; }
  .player-frame { margin-inline: 10px; }
  .card-body { padding-inline: 10px; }
  #range-label { font-size: 17px; }
  .button-primary { padding-inline: 9px; font-size: 11px; }
  .reaction-stage { padding-inline: 7px; }
  #reaction-counts { gap: 5px; }
  #reaction-counts > * { padding-inline: 5px; gap: 4px; }
  #reaction-source { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; }
  #reaction-flow > span, .flow-symbol, .flow-icon, .community-symbol { animation: none; opacity: .55; transform: none; }
}