:root {
  --bg: #12161c;
  --bg2: #1a2029;
  --ink: #e9e4d8;
  --dim: #98a0aa;
  --amber: #e8a94a;
  --you: #2b3b4f;
  --line: #2a323d;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: light) {
  :root { --bg: #f4efe4; --bg2: #ebe4d5; --ink: #231f18; --dim: #6b655a; --amber: #a9631a; --you: #d9e0e8; --line: #d3cab8; }
}
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; background: radial-gradient(120% 80% at 50% 0%, var(--bg2), var(--bg));
  color: var(--ink); font: 18px/1.55 var(--serif);
}
main { max-width: 640px; margin: 0 auto; padding: 32px 16px 160px; }
[hidden] { display: none !important; }
h1 { font-size: 2.6rem; letter-spacing: .04em; margin: 8vh 0 .2em; }
h2 { font-size: 1.6rem; margin: 6vh 0 .2em; }
.lede { color: var(--dim); }
ul.plain { padding-left: 1.2em; color: var(--dim); }
.check { display: flex; gap: .6em; align-items: flex-start; margin: 1.5em 0; }
.check input { margin-top: .4em; }

button, textarea, input[type=text] { font: inherit; color: inherit; }
button {
  background: var(--amber); color: #1a1408; border: 0; padding: .7em 1.4em; border-radius: 6px;
  cursor: pointer; font-weight: 600;
}
button:disabled { opacity: .35; cursor: not-allowed; }
button.link {
  position: fixed; top: 10px; right: 12px; z-index: 1; background: none; color: var(--dim);
  font: .75rem var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: .4em .6em; font-weight: 400;
}
button.link:hover { color: var(--ink); }
button:focus-visible, .pad:focus-visible, .chip:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
textarea, input[type=text] {
  width: 100%; background: transparent; border: 1px solid var(--line); border-radius: 6px; padding: .6em .8em;
  margin: .8em 0;
}

/* conversation */
.scene {
  text-align: center; font: .78rem var(--mono); letter-spacing: .25em; text-transform: uppercase;
  color: var(--amber); margin: 3.5em 0 1.5em;
}
.msg { margin: 1em 0; max-width: 88%; padding: .75em 1em; border-radius: 4px 14px 14px 14px; background: var(--bg2); border: 1px solid var(--line); }
.msg .who { display: block; font: .7rem var(--mono); letter-spacing: .15em; text-transform: uppercase; color: var(--dim); margin-bottom: .2em; }
.msg.participant { margin-left: auto; background: var(--you); border-radius: 14px 4px 14px 14px; }

/* controls */
#panel { margin-top: 1.5em; animation: rise .35s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
.rate { border-top: 1px dashed var(--line); padding-top: 1em; }
.rate h3 { margin: 0 0 .6em; font: .75rem var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--amber); }
.chips { display: flex; flex-wrap: wrap; gap: .4em; margin: .8em 0; }
.chip { background: transparent; color: var(--ink); border: 1px solid var(--line); border-radius: 99px; padding: .25em .8em; font-weight: 400; font-size: .9rem; }
.chip[aria-pressed=true] { background: var(--amber); color: #1a1408; border-color: var(--amber); }
.replies { display: grid; gap: .6em; }
.reply { text-align: left; background: transparent; color: var(--ink); border: 1px solid var(--amber); font-weight: 400; }
.reply:hover { background: color-mix(in srgb, var(--amber) 15%, transparent); }

/* valence/arousal pad */
.pad {
  position: relative; width: min(100%, 300px); aspect-ratio: 1; margin: 1em auto; border: 1px solid var(--line);
  border-radius: 8px; touch-action: none; cursor: crosshair; user-select: none;
  background:
    linear-gradient(var(--line), var(--line)) center / 1px 100% no-repeat,
    linear-gradient(var(--line), var(--line)) center / 100% 1px no-repeat,
    linear-gradient(90deg, rgba(200,90,70,.18), transparent 50%, rgba(110,170,110,.18));
}
.pad .dot {
  position: absolute; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%;
  background: var(--amber); box-shadow: 0 0 0 4px color-mix(in srgb, var(--amber) 30%, transparent);
  pointer-events: none;
}
.pad .ax { position: absolute; font: .65rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); pointer-events: none; }
.pad .t { top: 4px; left: 50%; transform: translateX(-50%); }
.pad .b { bottom: 4px; left: 50%; transform: translateX(-50%); }
.pad .l { left: 6px; top: 50%; transform: translateY(-50%); }
.pad .r { right: 6px; top: 50%; transform: translateY(-50%); }

@media (prefers-reduced-motion: reduce) { #panel { animation: none; } }
.dim { color: var(--dim); font-size: .85rem; }