:root {
  font: 16px system-ui, sans-serif;
  color: #24271f;
  background: #f1f1e9;
}
* { box-sizing: border-box; }
body { margin: 0; }
header { padding: 24px max(20px, calc((100% - 840px) / 2)); background: #141712; color: white; }
header h1 { margin: 8px 0; }
header p { margin: 8px 0; }
.eyebrow { color: #ffdc26; font-size: .8rem; letter-spacing: .08em; }
.back-link { color: #ffdc26; }
main { max-width: 840px; margin: 24px auto; padding: 0 20px 30px; }
.notice, form, .source, .filters, .turn { padding: 18px; margin-bottom: 16px; background: white; border-radius: 9px; }
.notice p { margin-bottom: 0; }
label { display: block; margin-bottom: 8px; font-weight: 600; }
textarea, button, select { font: inherit; padding: 10px; border: 1px solid #aab8c5; border-radius: 5px; }
select { width: 100%; }
.turn { border-left: 4px solid #ffdc26; }
.turn h2 { overflow-wrap: anywhere; font-size: 1.2rem; }
.scope, #context-hint { color: #526477; font-size: .9rem; }
.follow-up { font-weight: normal; margin-top: 12px; }
.source { border: 1px solid #d8e1e8; }
.source h3 { margin-top: 0; font-size: 1.05rem; }
textarea { display: block; width: 100%; resize: vertical; }
button { margin-top: 10px; cursor: pointer; color: #141712; background: #ffdc26; border-color: #ffdc26; }
button:disabled { opacity: .5; cursor: default; }
#status { min-height: 1.5em; }
.error { color: #a01818; font-weight: 600; }
.source { overflow-wrap: anywhere; }
.source h2 { margin-top: 0; font-size: 1.05rem; }
.source p { white-space: pre-wrap; }
.source a { color: #796300; }
[hidden] { display: none !important; }
.visual-result { margin-top: 16px; min-width: 0; }
.visual-viewport { max-width: 100%; max-height: 650px; overflow: auto; border: 1px solid #526477; margin: 10px 0; }
.visual-stage { position: relative; width: 100%; }
.visual-stage img { display: block; width: 100%; height: auto; }
.visual-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.visual-overlay rect { fill: #ffda0080; stroke: #7a5c00; stroke-width: .0015; }
.visual-overlay.position rect { fill: #ff663340; stroke: #c22c00; stroke-width: .003; }
.drawing-link { border-top: 1px solid #aab8c5; margin-top: 16px; }
.visual-result button { margin-right: 8px; }
@media (max-width: 480px) {
  header { padding: 20px; }
}