:root { --ink:#162033; --text:#3d4b62; --muted:#68758a; --line:#dbe4ef; --blue:#1769e0; --blue-soft:#eef5ff; --green:#16805e; --danger:#c8344b; --surface:#fff; --shadow:0 1px 2px rgba(22,32,51,.05),0 12px 34px rgba(41,78,124,.07); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB",sans-serif; color:var(--text); -webkit-font-smoothing:antialiased; }
* { box-sizing:border-box; } body { min-height:100vh; margin:0; background:#f6f9fd; } body::before { content:""; position:fixed; inset:0; z-index:-1; background:radial-gradient(circle at 10% 0,rgba(23,105,224,.12),transparent 30rem),radial-gradient(circle at 96% 12%,rgba(22,128,94,.08),transparent 22rem); } button,input,textarea { font:inherit; } button { cursor:pointer; } button:disabled,input:disabled,textarea:disabled { cursor:not-allowed; opacity:.62; } a { color:inherit; } .logo { width:124px; height:auto; }
.entry-page,.survey-page,.completion { width:min(100% - 32px,960px); margin:0 auto; padding:30px 0 56px; } .entry-page { max-width:1040px; } .entry-header { max-width:600px; margin:30px 0 28px; } .entry-header .logo { margin-bottom:26px; } .eyebrow { margin:0 0 8px; color:var(--blue); font-size:13px; font-weight:750; letter-spacing:.08em; } .entry-header h1,.survey-head h1,.completion h1 { margin:0; color:var(--ink); font-size:clamp(29px,5vw,45px); letter-spacing:-.04em; line-height:1.15; text-wrap:balance; } .entry-header p:not(.eyebrow),.completion p { margin:13px 0 0; color:var(--muted); line-height:1.7; }
.role-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; } .role-card { display:flex; flex-direction:column; min-height:250px; padding:23px; border:1px solid var(--line); border-radius:18px; background:var(--surface); box-shadow:var(--shadow); text-decoration:none; transition:transform .16s cubic-bezier(.23,1,.32,1),box-shadow .16s,border-color .16s; } .role-card:hover { transform:translateY(-3px); border-color:rgba(23,105,224,.46); box-shadow:0 1px 2px rgba(22,32,51,.05),0 16px 40px rgba(41,78,124,.13); } .role-card:active,.button:active { transform:scale(.98); } .role-number { color:var(--blue); font-size:13px; font-weight:800; font-variant-numeric:tabular-nums; } .role-card strong { margin-top:43px; color:var(--ink); font-size:22px; letter-spacing:-.03em; } .role-card>span:not(.role-number) { margin-top:10px; color:var(--muted); line-height:1.6; } .role-card b { margin-top:auto; padding-top:22px; color:var(--blue); font-size:14px; } .role-card i { font-style:normal; }
.topbar { display:flex; align-items:center; justify-content:space-between; min-height:50px; margin-bottom:30px; border-bottom:1px solid var(--line); color:var(--muted); font-size:14px; } .topbar .logo { width:108px; } .topbar a { display:inline-flex; align-items:center; gap:6px; min-height:44px; text-decoration:none; } .topbar a:hover { color:var(--blue); } .survey-head { display:flex; align-items:flex-end; justify-content:space-between; gap:28px; margin-bottom:21px; } .stepper { display:flex; gap:6px; margin:0; padding:0; list-style:none; } .stepper li { display:grid; justify-items:center; gap:5px; color:#aab4c1; font-size:11px; } .stepper span { display:grid; place-items:center; width:25px; height:25px; border:1px solid currentColor; border-radius:50%; font-variant-numeric:tabular-nums; } .stepper em { max-width:62px; overflow:hidden; font-style:normal; text-align:center; text-overflow:ellipsis; white-space:nowrap; } .stepper .current { color:var(--blue); font-weight:750; } .stepper .current span { color:#fff; border-color:var(--blue); background:var(--blue); } .stepper .done { color:var(--green); }
.intro { margin:0 0 20px; padding:15px 17px; border-left:3px solid var(--blue); border-radius:0 12px 12px 0; background:var(--blue-soft); font-size:14px; } .intro p { margin:3px 0; line-height:1.65; } .intro details { margin-top:10px; color:var(--muted); } summary { cursor:pointer; }
.question { min-width:0; margin:0; padding:25px 0; border:0; border-top:1px solid var(--line); } .question-title { display:flex; align-items:baseline; justify-content:space-between; gap:12px; width:100%; margin:0 0 13px; padding:0; color:var(--ink); font-weight:650; line-height:1.65; } .question-title b { margin-right:6px; color:var(--blue); font-size:13px; letter-spacing:.04em; } .question-title small { flex:none; color:var(--muted); font-size:12px; font-weight:500; } .options { display:grid; gap:8px; } .choice { display:flex; align-items:center; gap:10px; min-height:44px; padding:9px 11px; border:1px solid var(--line); border-radius:10px; background:#fff; line-height:1.45; transition:border-color .14s,box-shadow .14s,background .14s; } .choice:hover { border-color:rgba(23,105,224,.48); } .choice:has(input:checked) { border-color:var(--blue); background:var(--blue-soft); box-shadow:0 0 0 1px rgba(23,105,224,.08); } .choice input { width:18px; height:18px; flex:none; accent-color:var(--blue); }
.supplement { display:grid; gap:8px; margin-top:12px; color:var(--text); font-size:14px; } .supplement input,textarea { width:100%; min-height:46px; padding:11px 12px; border:1px solid var(--line); border-radius:10px; outline:none; background:#fff; color:var(--ink); } textarea { min-height:110px; resize:vertical; line-height:1.55; } .supplement input:focus,textarea:focus,.choice:has(input:focus-visible) { border-color:var(--blue); box-shadow:0 0 0 4px rgba(23,105,224,.13); } .hint { margin:10px 0 0; color:var(--muted); font-size:13px; line-height:1.65; } .matrix-row,.observation { margin:15px 0 0; padding:0; border:0; } .matrix-row legend,.observation legend { margin-bottom:8px; color:var(--text); font-size:14px; font-weight:650; } .compact-options { grid-template-columns:repeat(2,minmax(0,1fr)); } .field-error,.form-message { margin:10px 0 0; color:var(--danger); font-size:14px; line-height:1.6; }
.navigation { position:sticky; bottom:0; display:flex; justify-content:space-between; gap:12px; margin:22px -8px 0; padding:12px 8px calc(12px + env(safe-area-inset-bottom)); background:linear-gradient(to bottom,rgba(246,249,253,0),#f6f9fd 30%); } .button { display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:11px 18px; border:1px solid transparent; border-radius:10px; font-weight:750; text-decoration:none; transition:transform .14s,box-shadow .14s,background .14s; } .primary { min-width:132px; background:var(--blue); color:#fff; box-shadow:0 8px 18px rgba(23,105,224,.2); } .primary:hover { background:#125cc7; } .secondary { border-color:var(--line); background:#fff; color:var(--ink); }
.followup { margin:24px 0 0; border:1px solid var(--line); border-radius:12px; background:#fff; } .followup-toggle { display:flex; align-items:center; justify-content:space-between; width:100%; min-height:52px; padding:0 15px; border:0; background:transparent; color:var(--ink); font-weight:700; text-align:left; } .followup-toggle span { color:var(--blue); font-size:13px; font-weight:650; } .followup-toggle:hover { background:var(--blue-soft); } .followup-body { display:grid; gap:11px; padding:0 15px 15px; } .followup-body p { margin:0; color:var(--muted); font-size:13px; line-height:1.6; }
.research-footer { margin:20px 0 0; color:var(--muted); font-size:12px; line-height:1.6; text-align:center; }
.completion { max-width:600px; padding-top:15vh; } .completion .logo { margin-bottom:45px; } .completion .button { margin-top:28px; } .completion h1 { font-size:36px; } dialog { max-width:min(360px,calc(100vw - 32px)); padding:22px; border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); } dialog::backdrop { background:rgba(22,32,51,.36); } dialog h2 { margin:0; color:var(--ink); font-size:20px; } dialog p { margin:10px 0 19px; line-height:1.6; } dialog form { display:flex; justify-content:flex-end; gap:8px; } dialog button { min-height:42px; padding:0 13px; border:1px solid var(--line); border-radius:9px; background:#fff; color:var(--ink); } dialog button[value="leave"] { border-color:var(--blue); background:var(--blue); color:#fff; } :focus-visible { outline:3px solid rgba(23,105,224,.55); outline-offset:3px; }
@media (max-width:700px) { .entry-page,.survey-page,.completion { width:min(100% - 24px,960px); padding-top:16px; } .entry-header { margin:18px 0 21px; } .entry-header .logo { margin-bottom:18px; } .role-grid { grid-template-columns:1fr; } .role-card { min-height:146px; padding:19px; } .role-card strong { margin-top:18px; font-size:20px; } .role-card b { padding-top:13px; } .survey-page { padding-bottom:36px; } .topbar { margin-bottom:20px; } .topbar .logo { width:96px; } .topbar a span { display:none; } .survey-head { display:block; margin-bottom:16px; } .survey-head h1 { font-size:29px; } .stepper { justify-content:space-between; margin-top:16px; } .stepper li { flex:1; } .stepper em { display:none; } .intro { margin-bottom:10px; padding:12px 14px; } .question { padding:21px 0; } .question-title { flex-direction:column; align-items:flex-start; gap:3px; } .navigation { margin-top:16px; } .primary { flex:1; } .secondary { min-width:92px; } .completion { padding-top:20vh; } }
.topbar a { justify-content:center; min-width:44px; }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; } }