:root { color-scheme: light; --paper:#fff; --ink:#25262b; --secondary:#62636d; --accent:#7560b6; --accent-dark:#5b4696; --tint:#f2eef9; --line:#dddde3; --error:#a12c48; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif; font-synthesis:none; }
* { box-sizing:border-box; }
html { scrollbar-color:#bbb9c4 var(--paper); }
body { margin:0; color:var(--ink); background:var(--paper); font-size:15px; line-height:1.8; -webkit-font-smoothing:antialiased; overflow-x:clip; }
button,input { font:inherit; }
button { cursor:pointer; color:inherit; }
button,input,summary { -webkit-tap-highlight-color:transparent; }
input { accent-color:var(--accent); caret-color:var(--accent); }
img { display:block; max-width:100%; }
[hidden] { display:none !important; }
::selection { background:#e6def4; color:#392855; }
:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
h1:focus { outline:none; }
.document { width:min(100% - 48px,660px); margin:0 auto 42px; }
.form-header { position:relative; isolation:isolate; margin-bottom:40px; padding:40px 26px 26px; }
.form-header::before { content:""; position:absolute; z-index:-1; inset-block:0; left:50%; width:100vw; transform:translateX(-50%); background:#f4effb; }
.mascot-button { display:block; background:none; border:0; padding:0; margin:0 0 17px; width:80px; height:80px; border-radius:6px; }
.pixel-art { image-rendering:pixelated; }
.mascot-button:hover img { transform:translateY(-3px); }
.mascot-button img { transition:transform 160ms ease-out; }
h1 { margin:0 0 19px; font-size:30px; font-weight:700; line-height:1.5; letter-spacing:-.025em; overflow-wrap:anywhere; }
.form-header p { margin:0 0 12px; }
.form-header .form-instructions { font-size:13px; color:var(--secondary); }
.required { color:var(--accent-dark); margin-left:3px; }
fieldset { min-width:0; border:0; padding:0; }
.question { margin:0 0 35px; }
.question legend,.text-question>label { display:block; width:100%; padding:0; margin-bottom:10px; font-size:16px; font-weight:600; line-height:1.7; }
.question-number { margin-right:5px; font-variant-numeric:tabular-nums; }
.options { display:flex; flex-direction:column; align-items:stretch; gap:2px; }
.option { display:flex; align-items:flex-start; gap:10px; width:100%; max-width:560px; min-height:40px; padding:6px 12px; margin-left:-12px; border-radius:4px; line-height:1.8; cursor:pointer; }
.option:hover { background:#f6f5f8; }
.option:has(input:checked) { background:var(--tint); }
.option input { flex-shrink:0; width:17px; height:17px; margin:5px 0 0; cursor:pointer; }
.question-description { color:var(--secondary); font-size:13px; line-height:1.8; margin:-3px 0 10px; }
.field-error { color:var(--error); font-size:13px; margin:8px 0 0; }
.personal-section { margin-top:42px; border-top:1px solid #e9e9ee; padding-top:28px; }
h2 { font-size:20px; line-height:1.6; font-weight:650; margin:0 0 7px; letter-spacing:-.015em; }
.section-description { color:var(--secondary); margin:0 0 8px; }
.text-question { margin-bottom:29px; }
.text-question input { display:block; width:min(100%,420px); height:43px; padding:9px 12px; border:1px solid #c5c5d0; background:#fff; color:var(--ink); border-radius:5px; font-size:15px; line-height:1.5; }
.contact-fields { display:grid; grid-template-columns:minmax(135px,.7fr) minmax(0,1.3fr); gap:10px; max-width:520px; }
.contact-fields select,.contact-fields input { min-width:0; width:100%; height:43px; padding:8px 12px; border:1px solid #c5c5d0; background:#fff; color:var(--ink); border-radius:5px; font-size:15px; line-height:1.5; }
.contact-fields select { accent-color:var(--accent); }
.contact-fields select:hover,.contact-fields input:hover { border-color:#a6a1b3; }
.contact-fields select:focus,.contact-fields input:focus { border-color:var(--accent); outline:2px solid #d8cdea; outline-offset:1px; }
.text-question input:hover { border-color:#a6a1b3; }
.text-question input:focus { border-color:var(--accent); outline:2px solid #d8cdea; outline-offset:1px; }
.text-question input::placeholder { color:#73737f; opacity:1; }
.submit-area { margin-top:9px; }
.submit-button { display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:42px; border:0; padding:11px 17px; border-radius:5px; font-size:14px; font-weight:500; line-height:20px; vertical-align:middle; background:var(--accent); color:#fff; }
.submit-button:hover { background:var(--accent-dark); }
.submit-button:active { transform:translateY(1px); }
.submit-button svg { display:block; flex:0 0 18px; width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.form-footer { margin-top:45px; color:var(--secondary); font-size:12px; }
.form-footer details { border-top:1px solid #e9e9ee; padding-top:18px; }
.form-footer summary { width:fit-content; cursor:pointer; }
.form-footer p { margin:12px 0 0; line-height:1.9; }
.result-mascot { margin:0 0 17px; }
.reveal>p { margin:0 0 18px; }
.reveal h1 { font-size:29px; }
.reveal h2 { margin-top:34px; margin-bottom:12px; }
.reveal .data-assurance { color:var(--accent-dark); margin-top:22px; font-size:14px; }
.data-assurance strong { font-weight:500; }
.review-caption { color:var(--secondary); font-size:13px; }
.reveal .reveal-header+h2 { margin-top:0; }
.review-list { margin:20px 0 0; }
.review-item { padding:15px 0; border-bottom:1px solid #e9e9ee; }
.review-item dt { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:4px 16px; font-size:14px; font-weight:600; }
.answer-status { font-size:12px; color:var(--accent-dark); white-space:nowrap; font-weight:400; }
.answer-status.is-skipped { color:var(--secondary); }
.review-item dd { margin:5px 0 0; font-size:13px; color:var(--secondary); line-height:1.8; }
.reflection-list { margin:0 0 26px; padding-left:22px; }
.reflection-list li { padding-left:2px; margin-bottom:6px; }
.reveal .project-line { margin:32px 0 23px; color:var(--secondary); font-size:14px; }
.case-reference { margin-top:34px; padding-top:24px; border-top:1px solid var(--line); }
.case-reference h2 { margin-top:0; }
.case-reference p { margin:0 0 18px; }
.case-link { color:var(--accent-dark); text-underline-offset:4px; font-size:14px; overflow-wrap:anywhere; }
.click-effects { position:fixed; inset:0; z-index:10; pointer-events:none; overflow:hidden; }
.click-cloud { position:absolute; width:76px; height:76px; object-fit:contain; image-rendering:pixelated; animation:cloud-pop 750ms cubic-bezier(.16,1,.3,1) forwards; }
@keyframes cloud-pop { 0% { opacity:0; transform:translate(-50%,-25%) scale(.4) rotate(-10deg); } 20% { opacity:1; transform:translate(-50%,-65%) scale(1) rotate(5deg); } 65% { opacity:1; } 100% { opacity:0; transform:translate(-50%,-135%) scale(.85) rotate(-4deg); } }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
@media (max-width:600px) { .document { width:calc(100% - 40px); margin-top:0; } h1 { font-size:25px; margin-bottom:16px; } .form-header { margin-bottom:31px; padding:28px 17px 20px; } .mascot-button,.result-mascot { width:68px; height:68px; margin-bottom:14px; } .question { margin-bottom:31px; } .question legend,.text-question>label { font-size:16px; } .option { min-height:44px; padding-top:8px; padding-bottom:8px; } .text-question input,.contact-fields select,.contact-fields input { font-size:16px; width:100%; } .contact-fields { grid-template-columns:minmax(112px,.75fr) minmax(0,1.25fr); gap:8px; } .personal-section { margin-top:34px; padding-top:25px; } .reveal h1 { font-size:25px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition:none !important; } .click-effects { display:none; } }