:root {
  --ink: #000;        /* the LED board */
  --paper: #fefef2;   /* brush-stroke cream */
  --ash: #9c948a;
  --red: #c8140a;     /* the O ring */
  --red-hi: #e3200e;
  --gold: #f0cf5a;    /* "Pinoy Soul" */
  --char: #161616;
  --line: #2b2825;
  --dim: #3a3632;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--ink); color: var(--paper);
  font-family: Montserrat, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased; line-height: 1.5;
}
main { max-width: 28rem; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; }
.logo { display: block; width: min(100%, 19rem); height: auto; margin: 0 auto 1.75rem; }

h1 { font-size: 1.7rem; font-weight: 800; line-height: 1.15; letter-spacing: -.01em; margin: 0 0 .5rem; }
.lead { color: var(--ash); font-size: .92rem; margin: 0 0 1.75rem; }

/* rating groups */
fieldset { border: 0; padding: 0; margin: 0 0 1.4rem; min-width: 0; }
legend { font-size: 1rem; font-weight: 700; padding: 0; }
.hint { color: var(--ash); font-size: .82rem; margin: 0; }
.row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: .3rem; }
.r { display: flex; flex-direction: row-reverse; justify-content: flex-end; margin-left: -.25rem; border-radius: .5rem; }
.r input { position: absolute; opacity: 0; width: 0; height: 0; }
.r label { display: block; padding: .25rem; color: var(--dim); cursor: pointer; line-height: 0; }
.r svg { width: 2.25rem; height: 2.25rem; fill: currentColor; }
.r input:checked ~ label { color: var(--gold); }
.r:focus-within { outline: 2px solid var(--gold); outline-offset: 4px; }
.word { font-size: .8rem; font-weight: 600; color: var(--gold); text-align: right; white-space: nowrap; }
.missing .word { color: var(--red-hi); }
@media (hover: hover) {
  .r label:hover, .r label:hover ~ label { color: var(--gold); }
}
@media (prefers-reduced-motion: no-preference) {
  .r label { transition: color .15s, transform .15s; }
  .r label:active { transform: scale(1.18); }
}

/* Yes / Maybe / No */
.seg { display: flex; gap: .5rem; margin-top: .5rem; }
.seg input { position: absolute; opacity: 0; width: 0; height: 0; }
.seg label { flex: 1; text-align: center; padding: .75rem .5rem; border: 1px solid var(--line); border-radius: .5rem;
             background: var(--char); font-weight: 600; font-size: .95rem; cursor: pointer; }
.seg input:checked + label { background: var(--gold); border-color: var(--gold); color: #000; }
.seg input:focus-visible + label { outline: 2px solid var(--gold); outline-offset: 3px; }
fieldset .word.below { display: block; margin-top: .4rem; text-align: left; }

/* text fields */
.field { margin-bottom: 1rem; }
.field label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .4rem; }
.field span { color: var(--ash); font-weight: 400; }
input[type=text], textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--paper);
  background: var(--char); border: 1px solid var(--line); border-radius: .5rem; padding: .8rem .9rem;
}
textarea { resize: vertical; min-height: 5.5rem; }
input[type=text]:focus, textarea:focus { outline: none; border-color: var(--gold); }
::placeholder { color: #5e5852; }

button {
  width: 100%; font: inherit; font-weight: 700; font-size: 1.05rem; color: #fff;
  background: var(--red); border: 0; border-radius: .6rem; padding: 1rem; margin-top: .5rem; cursor: pointer;
}
button:hover { background: var(--red-hi); }
button:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* thank-you page */
.thanks { text-align: center; padding-top: 3rem; }
.thanks h1 { font-size: 2.2rem; margin-top: .5rem; }
.thanks .jp { color: var(--ash); font-size: .95rem; margin-top: 2rem; }