* { box-sizing: border-box; }
body { margin: 0; background: #172824; color: #fffaf0; font-family: Arial, Helvetica, sans-serif; }
button { cursor: pointer; font: inherit; -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible { outline: 3px solid #b67825; outline-offset: 4px; }
.page { position: relative; isolation: isolate; display: grid; place-items: center; min-height: 100vh; min-height: 100dvh; padding: 110px 20px; }
.shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg,#10212155,transparent 30%,#13242322 58%,#101c19bb),radial-gradient(ellipse at 50% 37%,#16272077,transparent 62%); }
header { position: absolute; top: max(22px, env(safe-area-inset-top)); left: 6%; right: 6%; display: flex; align-items: center; gap: 16px; }
header::after { content: ""; height: 1px; flex: 1; background: #fff7; }
.brand { font-size: .75rem; letter-spacing: .24em; font-weight: 700; }
.intro { width: 100%; text-align: center; }
h1 { margin: 0 0 34px; font: 400 clamp(36px,7.8vw,95px)/1.08 Georgia, serif; letter-spacing: -.05em; text-shadow: 0 2px 20px #15241e80; }
h1 em { display: block; font-weight: 400; }
.primary { min-height: 50px; padding: 15px 26px; background: #fff8e9; color: #172c24; border: 0; border-radius: 100px; font-weight: bold; letter-spacing: .12em; font-size: .82rem; }
.primary span { margin-left: 18px; }
.primary:hover:not(:disabled) { background: #f1e6cc; }
.page button:focus-visible { outline-color: #ffcf85; }
.caption { position: absolute; bottom: max(22px, env(safe-area-inset-bottom)); left: 6%; right: 6%; margin: 0; padding-top: 13px; border-top: 1px solid #fff6; font: italic clamp(15px,2vw,20px)/1.3 Georgia, serif; }
dialog { width: min(380px,calc(100% - 28px)); max-height: calc(100dvh - 16px); padding: clamp(16px,4vw,28px); border: 1px solid #bdc9b7; border-radius: 14px; background: #fcf8ee; color: #182c26; }
dialog::backdrop { background: #101e19cb; }
dialog[open] { animation: appear .22s ease-out; }
@keyframes appear { from { opacity: .2; transform: translateY(5px); } }
dialog h2 { font: normal 2rem Georgia, serif; margin: 0 0 16px; }
label { display: flex; align-items: center; gap: 12px; line-height: 1.5; padding: 12px 0; cursor: pointer; }
input { accent-color: #285a46; flex: none; width: 20px; height: 20px; }
.continue { width: 100%; margin-top: 12px; background: #214735; color: #fff; }
.continue:hover:not(:disabled) { background: #183827; }
.continue:disabled { opacity: .4; cursor: default; }
.back { display: block; min-height: 44px; margin: 5px auto 0; padding: 10px 15px; border: 0; background: transparent; color: #214735; }
noscript p { line-height: 1.5; }
@media (max-height: 440px) {
  .page { padding-block: 65px 80px; }
  h1 { font-size: clamp(24px,8vh,36px); margin-bottom: 20px; }
  header { top: max(10px,env(safe-area-inset-top)); }
  .caption { bottom: 10px; }
  dialog { padding: 14px; }
  dialog h2 { font-size: 1.45rem; margin-bottom: 3px; }
  label { padding: 6px 0; }
}
@media (prefers-reduced-motion: reduce) { dialog[open] { animation: none; } }