:root { font-family: system-ui, sans-serif; color: #3b392f; background: #f5f2e9; line-height: 1.55; }
* { box-sizing: border-box; } body { margin: 0; } main { max-width: 760px; margin: auto; padding: 1.5rem; }
a { color: #225e59; } h1 { margin-bottom: .25rem; } h2 { font-size: 1.2rem; } .scene-art { max-width: 390px; margin: 1rem 0; } svg { display: block; width: 100%; height: auto; }
button, select { font: inherit; min-height: 48px; border: 2px solid #716755; border-radius: .6rem; background: white; color: #3b392f; padding: .55rem .8rem; cursor: pointer; }
button:focus-visible, select:focus-visible, a:focus-visible { outline: 3px solid #1a6590; outline-offset: 3px; }
button:disabled { opacity: .75; cursor: default; } button[aria-pressed='true'] { background: #d5ead6; }
.choices, .controls { display: flex; flex-wrap: wrap; gap: .5rem; } fieldset { border: 0; padding: 0; margin: 1rem 0; } legend { font-weight: 700; }
#memo-area, .result { margin: 1rem 0; padding: .8rem 1rem; border-radius: .75rem; background: #e5eedf; }
.more { margin: .5rem 0; } .more summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; }
.finish-bar, .ladder { max-width: 100%; }