:root { color-scheme: light; font-family: "Avenir Next", Avenir, -apple-system, BlinkMacSystemFont, sans-serif; color: #2b2e33; background: #f4d9dc; }
* { box-sizing: border-box; }
body { margin: 0; }
main { min-height: 100svh; display: flex; flex-direction: column; align-items: center; padding: 38px 20px 30px; }
header { text-align: center; z-index: 1; }
.eyebrow { margin: 0 0 12px; font-size: .75rem; letter-spacing: .2em; font-weight: 600; color: #775d65; }
h1 { margin: 0; font-family: Georgia, serif; font-size: clamp(1.8rem, 4vw, 2.3rem); font-weight: 400; letter-spacing: -.035em; }
#scene { width: min(100%, 620px); height: clamp(340px, 62svh, 660px); flex: 1 0 340px; max-height: 660px; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
#scene canvas { display: block; width: 100%; height: 100%; }
#scene[aria-disabled="true"] { cursor: default; }
footer { text-align: center; padding-top: 6px; }
.result-area { min-height: 80px; }
#result { margin: 0 0 10px; font-size: 1.05rem; font-weight: 600; }
#hint { margin: 0; color: #775d65; font-size: .9rem; }
button { margin-top: 18px; border: 0; border-radius: 100px; background: #244c45; color: #fff8ee; padding: 15px 38px; min-width: 174px; font-family: inherit; font-size: 1rem; font-weight: 600; box-shadow: 0 5px 16px #244c4515; cursor: pointer; transition: background .2s, transform .2s; }
button:hover:enabled { background: #193d37; transform: translateY(-1px); }
button:disabled { opacity: .65; cursor: default; }
:focus-visible { outline: 3px solid #775d65; outline-offset: 5px; border-radius: 20px; }
@media (max-width: 480px) { main { padding: 28px 16px 24px; } #scene { min-height: 320px; flex-basis: 320px; } #result { font-size: 1rem; } }
@media (prefers-reduced-motion: reduce) { button { transition: none; } }