:root { color-scheme: light; font-family: -apple-system, BlinkMacSystemFont, "Noto Sans SC", "PingFang SC", sans-serif; color: #203d34; background: #f7f3e8; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; }
button, input, select { font: inherit; }
button, select { cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid #ca7e4b; outline-offset: 3px; }
.experiment-header { max-width: 1000px; margin: auto; padding: 22px 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.experiment-brand { display: inline-flex; gap: 11px; align-items: center; color: inherit; text-decoration: none; }
.experiment-brand strong { display: block; font-family: "Songti SC", "Noto Serif SC", serif; font-size: 21px; letter-spacing: .12em; }
.experiment-brand small { color: #78877b; font-size: 10px; letter-spacing: .18em; }
.seal { width: 41px; height: 41px; display: grid; place-items: center; background: #a84437; color: #fff8eb; font-family: "Songti SC", serif; font-size: 23px; border-radius: 5px; }
.exit-link { color: #315a47; font-size: 13px; }
.experiment-main { max-width: 760px; margin: 24px auto 64px; padding: 0 20px; }
.pilot-banner { padding: 13px 17px; border: 1px solid #e6cfa6; border-radius: 13px; background: #fff8e8; color: #785a30; display: grid; gap: 4px; font-size: 13px; line-height: 1.55; }
.experiment-panel { margin-top: 20px; padding: clamp(24px, 5vw, 48px); background: #fffdf8; border: 1px solid #e5decd; border-radius: 24px; box-shadow: 0 18px 50px #31453712; }
.eyebrow { margin: 0 0 10px; color: #a45d37; font-size: 11px; letter-spacing: .17em; font-weight: 700; }
h1 { font-family: "Songti SC", "Noto Serif SC", serif; font-size: clamp(29px, 6vw, 38px); line-height: 1.25; margin: 0 0 15px; }
h2 { font-family: "Songti SC", "Noto Serif SC", serif; font-size: 22px; }
p, li { line-height: 1.75; }
.lead { color: #526258; margin-bottom: 24px; }
.field { display: grid; gap: 9px; margin: 21px 0; color: #243d33; font-size: 15px; font-weight: 650; }
.field-note, .quiet { color: #66766a; font-size: 13px; font-weight: 400; line-height: 1.7; }
input[type="number"], input[type="text"], select { width: 100%; padding: 12px 14px; border: 1px solid #b7c4b5; background: white; border-radius: 10px; color: #203d34; }
.check-row { display: flex; align-items: flex-start; gap: 11px; margin: 16px 0; line-height: 1.65; }
.check-row input { margin-top: 5px; width: 18px; height: 18px; accent-color: #315a47; }
.button-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.primary, .secondary, .choice { min-height: 45px; border-radius: 11px; padding: 11px 19px; font-weight: 650; }
.primary { border: 1px solid #315a47; color: white; background: #315a47; }
.primary:hover { background: #244936; }
.secondary { border: 1px solid #aebfae; color: #315a47; background: white; }
.secondary:hover, .choice:hover { background: #eef4ec; }
.primary:disabled, .secondary:disabled { opacity: .55; cursor: wait; }
.choice-list { display: grid; gap: 10px; }
.choice { width: 100%; text-align: left; border: 1px solid #c7d1c4; background: #f9fbf7; color: #244936; }
.choice.is-selected { border-color: #315a47; box-shadow: inset 0 0 0 1px #315a47; background: #e7efe3; }
.stimulus { padding: 20px; border: 1px solid #e1dbca; border-radius: 16px; background: #f8f3e8; }
.stimulus-art { margin: 0; overflow: hidden; border-radius: 12px; background: #eee5cf; }
.stimulus-art img { display: block; width: 100%; aspect-ratio: 1 / .82; object-fit: cover; object-position: center; }
.stimulus-art figcaption { padding: 8px 12px; color: #66766a; background: #f4eddf; font-size: 11px; line-height: 1.5; }
.stimulus h2 { margin-bottom: 5px; }
.timer { padding: 25px; border-radius: 15px; background: #e6efe7; text-align: center; font-variant-numeric: tabular-nums; }
.timer strong { display: block; font-size: 64px; line-height: 1.1; color: #315a47; }
.code { padding: 12px; background: #eaf0e8; border-radius: 10px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 16px; word-break: break-all; user-select: all; }
.followup-card { margin: 17px 0; padding: 18px; border: 1px solid #d5dfd1; border-radius: 15px; }
.followup-card h2 { margin: 0; }
.withdraw-details { margin-top: 24px; border-top: 1px solid #e5decd; padding-top: 16px; }
.withdraw-details summary { color: #7d6a60; cursor: pointer; font-size: 13px; }
.withdraw-panel { margin-top: 12px; padding: 15px; border: 1px solid #ead2ca; border-radius: 12px; background: #fff8f5; }
.withdraw-panel p { margin: 0 0 9px; }
.danger { min-height: 42px; border: 1px solid #a94438; border-radius: 10px; padding: 10px 15px; color: #922f27; background: #fff; font-weight: 650; cursor: pointer; }
.danger:hover { background: #fcebe7; }
.notice { padding: 12px 14px; border-radius: 10px; color: #6d5b31; background: #fff7df; border: 1px solid #ead6a2; }
.error-box { margin-top: 16px; padding: 12px 15px; border-radius: 10px; color: #922f27; background: #fcebe7; }
.experiment-footer { max-width: 760px; padding: 0 20px 30px; margin: auto; color: #65776b; font-size: 12px; line-height: 1.7; }
@media (max-width: 520px) { .experiment-header { padding: 16px 20px; } .exit-link { font-size: 12px; } .button-row > * { flex: 1 1 100%; } .experiment-main { margin-top: 10px; } }