:root { --ink: #102525; --teal: #0f766e; }
* { box-sizing: border-box; }
body { font-family: "DM Sans", system-ui, sans-serif; color: var(--ink); }
.font-display { font-family: "Manrope", "DM Sans", system-ui, sans-serif; }
.pattern-grid { background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(to bottom, black, transparent 92%); }
.no-copy { -webkit-user-select: none; user-select: none; }
.option-card { transition: border-color .12s ease, background-color .12s ease, box-shadow .12s ease; }
.option-card:hover { border-color: #5eead4; background: #f0fdfa; }
.option-card.selected { border-color: #0f766e; background: #f0fdfa; box-shadow: 0 0 0 1px #0f766e; }
.option-card.selected .option-letter { color: white; background: #0f766e; border-color: #0f766e; }
.palette-button.current { box-shadow: 0 0 0 2px #0f766e; }
.palette-button.answered { color: white; background: #0f766e; border-color: #0f766e; }
.palette-button.flagged { color: #713f12; background: #facc15; border-color: #facc15; }
.palette-button.answered.flagged { background: linear-gradient(135deg, #0f766e 0 67%, #facc15 67%); color: white; }
@media (max-width: 1023px) {
  #palette.mobile-open { display: block; position: fixed; z-index: 45; inset: 82px 18px auto; max-height: calc(100vh - 105px); overflow: auto; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; } }