:root {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: #1d2733;
  background: #f4f6f8;
  font-synthesis: none;
}

* { box-sizing: border-box; }
button, input, textarea { -webkit-tap-highlight-color: transparent; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 12% 0%, rgba(255,255,255,.9), transparent 32%), linear-gradient(180deg, #f6f7f9 0%, #edf1f4 100%); }
.page { width: min(100%, 620px); margin: 0 auto; padding: 18px 16px 34px; }
.hero { padding: 8px 4px 16px; background: rgba(255,255,255,.32); }
.eyebrow { color: #6d7d8d; font-size: 12px; letter-spacing: .14em; margin-bottom: 7px; }
h1 { font-size: clamp(27px, 7vw, 38px); line-height: 1.12; letter-spacing: -.045em; margin: 0 0 10px; }
.hero p { color: #65717e; font-size: 15px; line-height: 1.55; margin: 4px 0; }
.hero .time { color: #527598; font-size: 13px; font-weight: 650; }
form { display: grid; gap: 10px; }
.question, fieldset { min-width: 0; border: 1px solid rgba(187, 199, 211, .62); background: rgba(255,255,255,.57); backdrop-filter: blur(18px) saturate(125%); -webkit-backdrop-filter: blur(18px) saturate(125%); border-radius: 14px; padding: 13px 14px; margin: 0; box-shadow: 0 3px 14px rgba(44, 58, 72, .035); }
.question span, legend { display: block; font-size: 15px; line-height: 1.35; font-weight: 680; padding: 0; margin-bottom: 9px; }
i { color: #bd6262; font-style: normal; margin-left: 3px; }
small { display: block; color: #87929d; font-size: 12px; margin-top: 8px; }
input, textarea { width: 100%; border: 1px solid rgba(183, 195, 207, .72); border-radius: 10px; padding: 10px 11px; color: #1d2733; background: rgba(255,255,255,.52); font: inherit; font-size: 15px; outline: none; }
textarea { resize: vertical; min-height: 70px; line-height: 1.5; }
input:focus, textarea:focus { border-color: #7898b8; box-shadow: 0 0 0 3px rgba(105, 143, 181, .13); background: rgba(255,255,255,.78); }
.choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.choices button { min-height: 40px; border: 1px solid rgba(177, 190, 203, .76); border-radius: 11px; padding: 7px 8px; background: rgba(255,255,255,.42); color: #52606d; font: inherit; font-size: 14px; line-height: 1.25; cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease, transform .1s ease; }
.choices button:active { transform: scale(.98); }
.choices button.selected { border-color: #7e9fbe; background: rgba(226, 237, 247, .88); color: #315979; box-shadow: inset 0 0 0 1px rgba(126,159,190,.28); font-weight: 680; }
.submit { width: 100%; min-height: 48px; border: 1px solid rgba(79, 112, 141, .25); border-radius: 13px; background: rgba(73, 111, 145, .94); color: #fff; font: inherit; font-size: 16px; font-weight: 680; box-shadow: 0 5px 16px rgba(57, 87, 112, .16); cursor: pointer; transition: transform .1s ease, opacity .15s ease; }
.submit:active { transform: scale(.99); }
.submit:disabled { opacity: .62; }
.error { min-height: 1.2em; color: #b34545; text-align: center; margin: -3px 0 0; font-size: 13px; }
.hidden { display: none !important; }
.success { text-align: center; background: rgba(255,255,255,.65); border: 1px solid rgba(187,199,211,.62); border-radius: 16px; padding: 34px 22px; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.check { display: grid; place-items: center; width: 54px; height: 54px; margin: 0 auto 14px; border-radius: 50%; color: #287653; background: rgba(220,242,230,.82); font-size: 30px; }
.success h2 { margin: 0 0 11px; font-size: 24px; }
.success p { color: #65717e; font-size: 16px; line-height: 1.7; }
.success strong { color: #1d2733; }
@media (max-width: 390px) { .page { padding: 14px 12px 28px; } .question, fieldset { padding: 11px 12px; } .choices { gap: 6px; } .choices button { min-height: 38px; padding-inline: 6px; font-size: 13px; } }