*{box-sizing:border-box;margin:0}
html,body{height:100%}
body{position:relative;z-index:0;background:radial-gradient(ellipse at 50% 35%,#2a2f36,#121417 70%);color:#f2f2f2;font-family:"Lato","Segoe UI",system-ui,-apple-system,Helvetica,Arial,sans-serif;overflow-x:hidden}
main{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(1rem,3vw,2rem);padding:2rem 1rem;text-align:center}
.mark{width:clamp(72px,14vw,110px);height:auto}
.word{font-size:clamp(1.15rem,6vw,3.6rem);letter-spacing:.04em;font-weight:300;white-space:nowrap}
.word b{font-weight:800}
.cur{display:inline-block;width:.08em;height:1em;margin-left:.06em;background:#f2f2f2;vertical-align:-.12em;animation:blink 1.05s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.soon{color:#b4bcc5;font-size:clamp(.8rem,2.5vw,1rem);letter-spacing:.3em;text-transform:uppercase}
.soon a{color:#b4bcc5}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (prefers-reduced-motion:reduce){.cur{animation:none}}
/* r2: light start -> dark end */
body,.word,.soon,.soon a,.cur{transition:background-color .8s ease,color .8s ease}
body::before{content:"";position:fixed;inset:0;background:#fff;opacity:0;transition:opacity .8s ease;z-index:-1}
body.light::before{opacity:1}
body.light .word{color:#3f5866}
body.light .cur{background:#3f5866}
body.light .soon,body.light .soon a{color:#5f7587}
.gap{display:inline}
.markwrap{position:relative;display:inline-block;width:clamp(72px,14vw,110px);aspect-ratio:1}
.markwrap .mark{position:absolute;inset:0;width:100%;transition:opacity .8s ease}
body.light .m-dark{opacity:0}
body:not(.light) .m-light{opacity:0}
.cur{transition:background-color .8s ease}
@media (prefers-reduced-motion:reduce){body,body *,body::before{transition:none!important}}
body.notr,body.notr *,body.notr::before{transition:none!important}
/* r4: lead box */
.lead{width:min(100%,34rem);display:grid;gap:.6rem;text-align:left;margin-top:clamp(.5rem,3vw,1.5rem);transition:opacity .8s ease}
.lead label{font-size:.9rem;color:#d5dbe1}
.lead .opt{color:#b4bcc5}
.lead .row{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.lead .row>div{display:grid;gap:.35rem;min-width:0}
.lead textarea,.lead input{width:100%;font:inherit;font-size:1rem;color:#f2f2f2;background:rgba(255,255,255,.06);border:1px solid #5b6570;border-radius:6px;padding:.65rem .75rem}
.lead textarea{resize:vertical;min-height:6rem}
.lead textarea:focus,.lead input:focus,.lead button:focus-visible{outline:2px solid #8fb3cc;outline-offset:2px}
.lead button{justify-self:start;font:inherit;font-weight:700;letter-spacing:.06em;background:#f2f2f2;color:#121417;border:0;border-radius:6px;padding:.7rem 1.6rem;cursor:pointer}
.lead button[disabled]{opacity:.6;cursor:progress}
.lead-msg{min-height:1.4em;font-size:.95rem;color:#b4bcc5}
.lead-msg.ok{color:#9fe0b4}.lead-msg.err{color:#ffb3a8}
.lead-back{color:#b4bcc5}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media (max-width:480px){.lead .row{grid-template-columns:1fr}}
body.light .lead{opacity:0;visibility:hidden;transition:opacity .8s ease,visibility 0s .8s}