:root{
  --bg:#0B0C0A;
  --bg-alt:#0E100B;
  --card:#12140E;
  --text:#F2F3EE;
  --accent:#F5D03B;
  --accent-hover:#FFE178;
  --muted:rgba(242,243,238,0.62);
  --line:rgba(242,243,238,0.38);
  --err:#FF8A7A;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0}
html{background:var(--bg)}
body{
  overflow:hidden;
  overscroll-behavior:none;
  background:var(--bg);
  color:var(--text);
  font-family:'Sora',sans-serif;
  -webkit-font-smoothing:antialiased;
  background-image:
    linear-gradient(rgba(242,243,238,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(242,243,238,0.05) 1px, transparent 1px);
  background-size:72px 72px;
  background-position:center top;
}
button,input,select,textarea{font-family:inherit}
::selection{background:var(--accent);color:var(--bg)}

.app{
  height:100dvh;
  display:flex;
  flex-direction:column;
  position:relative;
}
.app::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:radial-gradient(880px 460px at 50% 38%, rgba(245,208,59,0.07), transparent 62%);
}

.topbar{
  height:72px;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  z-index:2;
}
.logo{display:flex;align-items:baseline;gap:8px;text-decoration:none}
.logo-main{font-family:'Instrument Serif',serif;font-style:italic;font-size:22px;color:var(--text)}
.logo-sub{font-size:11px;letter-spacing:0.28em;text-transform:uppercase;color:var(--accent);font-weight:600}

.viewport{flex:1;position:relative;overflow:hidden;min-height:0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.step{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  align-items:safe center;
  justify-content:center;
  padding:8px 28px 92px;
  overflow:auto;
  transform:translateY(110%);
  visibility:hidden;
}
.step.is-current{transform:none;visibility:visible}
.step.is-above{transform:translateY(-110%);visibility:visible}
.step.is-below{transform:translateY(110%);visibility:visible}
.viewport.is-animating .step{transition:transform .52s cubic-bezier(.22,.8,.24,1)}

.col{width:min(420px,100%)}
.col-center{width:min(680px,100%);text-align:center}

.welcome-title{
  font-family:'Instrument Serif',serif;
  font-weight:400;
  font-size:clamp(38px,5.6vw,60px);
  line-height:1.06;
  margin:0 auto 22px;
  max-width:12em;
}
.mark{
  position:relative;
  display:inline-block;
  font-style:italic;
  color:var(--accent);
  padding:0 .08em;
}
.mark svg{
  position:absolute;
  left:-10%;
  top:-28%;
  width:120%;
  height:160%;
  pointer-events:none;
}
.support{
  font-size:15px;
  line-height:1.7;
  color:var(--muted);
  margin:0 auto 12px;
  max-width:460px;
  text-wrap:balance;
}
.done{
  font-family:'Instrument Serif',serif;
  font-weight:400;
  font-size:clamp(36px,5vw,52px);
  margin:8px 0 12px;
}
.done em{color:var(--accent);font-style:italic}
.check{display:block;margin:0 auto 8px}

.q{
  font-size:22px;
  font-weight:600;
  line-height:1.35;
  margin:0 0 22px;
  text-align:left;
}
.req{color:var(--accent);margin-left:3px}
.optional{margin:-10px 0 14px;font-size:13px;color:rgba(242,243,238,0.45)}
.micro{
  display:block;
  margin:0 0 4px;
  font-size:11px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:rgba(242,243,238,0.45);
  font-weight:600;
}

.line{
  display:block;
  width:100%;
  background:transparent;
  border:none;
  border-bottom:1px solid var(--line);
  border-radius:0;
  color:var(--text);
  font-size:18px;
  line-height:1.4;
  padding:12px 0;
  outline:none;
}
.line:focus{border-bottom-color:var(--accent)}
.line::placeholder{color:rgba(242,243,238,0.35)}
.line.invalid{border-bottom-color:var(--err)}
textarea.line{resize:vertical;min-height:88px}
select.line{
  color-scheme:dark;
  cursor:pointer;
  appearance:none;
  background-image:linear-gradient(45deg, transparent 50%, rgba(242,243,238,0.7) 50%),linear-gradient(135deg, rgba(242,243,238,0.7) 50%, transparent 50%);
  background-position:calc(100% - 12px) 55%, calc(100% - 7px) 55%;
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
  padding-right:22px;
}
select.line option{background:#14160F;color:var(--text)}

.err{
  color:#FFE8E3;
  background:rgba(255,138,122,0.16);
  border-left:3px solid var(--err);
  border-radius:0 8px 8px 0;
  padding:9px 12px;
  font-size:14px;
  font-weight:600;
  line-height:1.45;
  margin:12px 0 0;
  scroll-margin:24px;
}
.err[hidden]{display:none}

.actions{display:flex;align-items:center;gap:14px;margin-top:18px;flex-wrap:wrap}
.hint{font-size:12px;color:rgba(242,243,238,0.4)}

.ok{
  appearance:none;
  border:none;
  background:#E6E0D0;
  color:var(--bg);
  font-size:13px;
  font-weight:700;
  letter-spacing:0.08em;
  border-radius:6px;
  padding:8px 16px;
  cursor:pointer;
}
.ok:hover{background:var(--accent-hover)}
.ok:focus-visible,.btn:focus-visible,.pager button:focus-visible,.picker-trigger:focus-visible,.picker-opt:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}

.btn{
  display:inline-block;
  margin-top:18px;
  background:var(--accent);
  color:var(--bg);
  font-weight:600;
  font-size:15px;
  border:none;
  border-radius:999px;
  padding:14px 28px;
  cursor:pointer;
  text-decoration:none;
}
.btn:hover{background:var(--accent-hover);color:var(--bg)}
.btn[disabled]{opacity:.55;cursor:progress}

.picker{position:relative}
.picker-trigger{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  background:transparent;
  border:none;
  border-bottom:1px solid var(--line);
  color:rgba(242,243,238,0.4);
  font-size:18px;
  padding:12px 0;
  text-align:left;
  cursor:pointer;
}
.picker.has-value .picker-trigger{color:var(--text)}
.picker.is-open .picker-trigger,.picker-trigger:focus{border-bottom-color:var(--accent)}
.picker.is-invalid .picker-trigger{border-bottom-color:var(--err)}
.picker-trigger svg{flex-shrink:0;transition:transform .2s ease}
.picker.is-open .picker-trigger svg{transform:rotate(180deg)}
.picker-panel{
  margin-top:10px;
  background:var(--card);
  border:1px solid rgba(242,243,238,0.14);
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 18px 48px rgba(0,0,0,.45);
}
.picker-panel[hidden]{display:none}
.picker-opt{
  width:100%;
  display:flex;
  align-items:center;
  gap:12px;
  text-align:left;
  background:transparent;
  color:var(--text);
  border:none;
  border-bottom:1px solid rgba(255,255,255,0.06);
  padding:13px 14px;
  font-size:15px;
  cursor:pointer;
}
.picker-opt:last-child{border-bottom:0}
.picker-opt:hover,.picker-opt.is-selected{background:rgba(245,208,59,0.12)}
.key{
  width:22px;
  height:22px;
  border:1px solid rgba(242,243,238,0.35);
  border-radius:4px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:600;
  flex-shrink:0;
}

.consent{
  display:flex;
  gap:14px;
  align-items:flex-start;
  text-align:left;
  cursor:pointer;
}
.consent input{width:18px;height:18px;margin-top:3px;accent-color:var(--accent);flex-shrink:0}
.consent span{font-size:13.5px;line-height:1.65;color:rgba(242,243,238,0.7)}
.consent strong{color:var(--text)}

.progress{
  position:fixed;
  left:0;right:0;bottom:0;
  height:5px;
  background:rgba(242,243,238,0.16);
  z-index:6;
}
.progress > span{
  display:block;
  height:100%;
  width:0;
  background:var(--accent);
  box-shadow:0 0 14px rgba(245,208,59,.9);
  transition:width .45s ease;
}

.pager{
  position:fixed;
  right:22px;
  bottom:18px;
  z-index:5;
  display:flex;
  background:#E6E0D0;
  border-radius:8px;
  overflow:hidden;
  box-shadow:0 10px 28px rgba(0,0,0,.35);
}
.pager[hidden]{display:none}
.pager button{
  width:40px;
  height:34px;
  border:0;
  background:transparent;
  color:var(--bg);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.pager button + button{box-shadow:inset 1px 0 0 rgba(11,12,10,0.16)}
.pager button:hover{background:var(--accent-hover)}
.pager button:disabled{opacity:.35;cursor:default}
.pager button:disabled:hover{background:transparent}

.sr{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.col.shake{animation:vmlShake .28s ease}
@keyframes vmlShake{
  0%,100%{transform:translateX(0)}
  30%{transform:translateX(-5px)}
  70%{transform:translateX(5px)}
}

@media (prefers-reduced-motion:reduce){
  .viewport.is-animating .step,.progress > span,.picker-trigger svg{transition:none}
  .col.shake{animation:none}
}

@media (max-width:640px){
  .topbar{height:60px}
  .welcome-title{font-size:34px}
  .q{font-size:20px}
  .step{padding:4px 20px 96px}
  .hint{display:none}
  .pager{right:12px;bottom:16px}
  .support{font-size:14px}
}