:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; background: #0b0c0b; color: #eee9dc; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; background: radial-gradient(circle at 30% 40%, #272015, #0b0c0b 55%); }
main { width: min(1180px, 100%); display: grid; grid-template-columns: minmax(460px, 1fr) 330px; gap: 36px; align-items: center; padding: 28px; }
.stage { position: relative; aspect-ratio: 1; }
canvas { width: 100%; height: auto; display: block; border-radius: 50%; box-shadow: 0 30px 80px #000a, inset 0 0 0 1px #d7af5a55; }
.result { position: absolute; left: 50%; bottom: 5%; transform: translateX(-50%); width: max-content; max-width: 90%; padding: 8px 14px; background: #0b0c0be8; border: 1px solid #d7af5a75; color: #f3cd73; letter-spacing: .1em; font-size: 12px; text-align: center; }
.eyebrow { color: #cda24b; letter-spacing: .16em; font-size: 11px; margin: 0 0 10px; }
h1 { font-family: Georgia, serif; font-size: clamp(40px, 5vw, 62px); line-height: .9; margin: 0 0 22px; font-weight: 500; }
.description { color: #bbb5a7; line-height: 1.65; font-size: 14px; }
button { width: 100%; border: 1px solid #e4bc66; background: #d8a83d; color: #12100b; padding: 14px; margin-top: 12px; font-weight: 800; letter-spacing: .13em; cursor: pointer; }
button:hover { background: #efc666; } button.quiet { background: transparent; color: #d6b869; border-color: #80642e; }
dl { margin: 26px 0; border-top: 1px solid #ffffff20; } dl div { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #ffffff14; font-size: 12px; } dt { color: #9e9a8e; } dd { margin: 0; color: #e8c66d; font-variant-numeric: tabular-nums; }
details { color: #aaa597; font-size: 13px; line-height: 1.6; } summary { color: #e4dfd1; cursor: pointer; } ul { padding-left: 18px; }
@media (max-width: 820px) { main { grid-template-columns: 1fr; padding: 18px; gap: 18px; } .panel { max-width: 620px; } }