.feelings {
  display: grid;
  container-type: inline-size;
  overflow: clip;
  width: min(100%, 620px);
  margin-inline: auto;
  color: #fff4de;
  font-size: clamp(24px, 2.6vw, 36px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.045em;
}
.feelings__picker, .feelings__result {
  grid-area: 1 / 1;
  min-width: 0;
  font-size: clamp(20px, 5.8cqw, 36px);
  letter-spacing: -0.045em;
}
.feelings__picker {
  display: grid;
  grid-template-columns: minmax(max-content, 1fr) minmax(0, 2fr);
  align-items: center;
  gap: 0.2em;
  min-height: 484px;
}
.feelings__intro {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.2em;
  min-width: 0;
  text-align: right;
  white-space: nowrap;
}
.feelings__intro h2 { position: relative; }
.feelings:not([data-dial]) .feelings__picker { grid-template-columns: minmax(0, 1fr); gap: 24px; }
.feelings:not([data-dial]) .feelings__intro { text-align: left; }
.feelings h2 { margin: 0; font: inherit; letter-spacing: inherit; }
.feelings__prompt { display: inline-block; vertical-align: top; }
.feelings__letter { display: inline-block; white-space: pre; }
/* The outgoing question must not shrink to the new, shorter heading's width. */
.feelings__prompt--leaving {
  position: absolute;
  top: 0;
  right: 0;
  width: max-content;
  white-space: nowrap;
  pointer-events: none;
}
.feelings__control { position: relative; min-width: 0; width: 100%; }
.feelings [hidden] { display: none; }
.feelings__action {
  position: absolute;
  top: calc(50% - 22px);
  right: 4px;
  display: flex;
  align-items: center;
  height: 44px;
  pointer-events: none;
}
.feelings__confirm, .feelings__change, .feelings__clear {
  min-width: 44px;
  min-height: 44px;
  padding: 4px 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  opacity: 0.55;
  cursor: pointer;
  white-space: nowrap;
}
.feelings__confirm {
  text-align: right;
  pointer-events: auto;
}
.feelings :is(.feelings__confirm, .feelings__change, .feelings__clear):is(:hover, :focus-visible) { opacity: 1; }
.feelings :is(.feelings__confirm, .feelings__change, .feelings__clear):focus-visible { outline: 1px solid currentColor; outline-offset: 2px; }
.feelings__result {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 20px;
  min-height: 484px;
}
.feelings__result p { margin: 0; font-size: 14px; line-height: 1.5; letter-spacing: normal; }
.feelings__change, .feelings__clear { margin-left: 4px; text-align: left; }

/* Native controls own keyboard/AT selection. A plain sentence announces the
   heading without exposing the decorative letters or repeated reel words. */
.feelings__choices { min-width: 0; margin: 0; padding: 0; border: 0; }
.feelings__completion,
.feelings__choices legend,
.feelings[data-dial] .feelings__choices {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.feelings__choice { display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; }
.feelings__choice input { accent-color: #ffe1a0; }
.feelings__word { font-size: 22px; }
.feelings__choice input:focus-visible + .feelings__word { outline: 1px solid currentColor; outline-offset: 4px; }
.feelings__choice input:checked + .feelings__word { color: #ffe1a0; }

.feelings__dial {
  position: relative;
  height: 484px;
  width: 100%;
  overflow: hidden;
  cursor: grab;
  user-select: none;
  touch-action: pan-x pinch-zoom;
  -webkit-user-select: none;
  mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent);
}
.feelings__dial.is-dragging { cursor: grabbing; }
.feelings__dial-word {
  position: absolute;
  top: 50%;
  left: 0;
  display: flex;
  align-items: center;
  height: 44px;
  min-width: 44px;
  padding-inline: 4px;
  white-space: nowrap;
  opacity: 0.65;
}
.feelings__dial-word.is-selected { color: #ffe1a0; opacity: 1; }
.feelings__dial-word.is-selected::after { content: '.'; }
.feelings:has(input:focus-visible) .feelings__dial::after {
  content: '';
  position: absolute;
  top: calc(50% - 22px);
  left: 0;
  right: 1px;
  height: 44px;
  box-sizing: border-box;
  border: 1px dotted currentColor;
  border-radius: 2px;
  pointer-events: none;
}