/* onboarding S1–S3 (mockups (3), (0), (1)) + the shared profile form .pf — MVP_PLAN §7.1 */

/* ---------- screen switching: out 300ms (up), in 500ms + 60ms stagger (base .rise) ---------- */
.ob{position:absolute;inset:0;visibility:hidden;pointer-events:none;transition:visibility 0s linear 300ms}
.ob.is-active{visibility:visible;pointer-events:auto;transition:none}
.ob:not(.is-active) .rise{opacity:0;transform:translateY(12px);transition-duration:300ms;transition-delay:0s}
.ob.is-done:not(.is-active) .rise{transform:translateY(-8px)}

/* shared pill sizing: mockups' pills are slimmer than the base 52px */
.ob__cta{position:absolute;left:0;right:0;bottom:calc(var(--app-h) * .08 + var(--safe-b));display:flex;justify-content:center}
.ob__pill{width:auto;min-width:53%;max-width:calc(100% - 48px);height:46px;padding:0 30px;font-size:10.5px;letter-spacing:.3em;white-space:nowrap}
.ob__pill span{margin-right:-.3em} /* trailing tracking would push the text off-centre */
:lang(ru) .ob__pill{font-size:10px;letter-spacing:.18em}
:lang(ru) .ob__pill span{margin-right:-.18em}

/* ---------- S1 splash (3) ---------- */
.ob1__brand{position:absolute;left:0;right:0;top:56%;transform:translateY(-50%);text-align:center}
.ob1__logo{margin:0;padding-left:.22em;font-size:clamp(30px,9vw,36px);text-shadow:0 0 22px rgba(255,255,255,.18)}
.ob1__cta{flex-direction:column;align-items:center;gap:6px}
.ob1__cta:has(.ob1__signin){bottom:calc(var(--app-h) * .08 + var(--safe-b) - 34px)}
/* quiet «Уже с нами? Войти» (PLAN_V6 §2.2) under the pill; the pill keeps its place */
.ob1__signin{padding:8px 12px;font:400 8.5px/1.2 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
.ob1__signin:active{color:var(--text)}
.ob1__tag{margin:16px 0 0;padding-left:.34em;font:400 10px/1.3 var(--f-sans);letter-spacing:.34em;text-transform:uppercase;color:rgba(255,255,255,.85)}

/* ---------- S2 manifesto (0) ---------- */
.ob2__logo{position:absolute;left:calc(32px + var(--safe-l));top:max(29px,calc(var(--safe-t) + 15px));height:12px;color:var(--text)}
.ob2__logo svg{height:100%;width:auto;display:block;overflow:visible}
.ob2__text{position:absolute;left:calc(33px + var(--safe-l));top:44%;width:calc(60% - 33px);transform:translateY(-50%)}
.ob2__tag{font:400 10px/1.5 var(--f-sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ice)}
/* the V2 title is two sentences: smaller display size so the column stays left of the moon */
.ob2__title{margin:clamp(10px,1.8vh,15px) 0 clamp(12px,2.2vh,20px);
  font:600 clamp(19px,min(6.2vw,3.25vh),27px)/1.08 var(--f-sans);letter-spacing:.005em;text-transform:uppercase;color:#fff}
.ob2__accent{margin:0 0 clamp(10px,1.8vh,16px);font:italic 400 clamp(16px,min(4.6vw,2.4vh),19px)/1.2 var(--f-serif);color:#fff}
.ob2__body{margin:0;max-width:clamp(150px,calc(46vw - 22px),190px);font:300 clamp(11.5px,min(3.3vw,1.6vh),12.5px)/1.62 var(--f-sans);color:var(--text-2)}
:lang(ru) .ob2__body{max-width:none;line-height:1.5}
.ob2__pill{min-width:58%;gap:26px;padding:0 24px 0 30px}
.ob2__pill svg{width:22px;height:22px;margin-right:-6px}

/* ---------- S3 registration (1) ---------- */
.ob3{display:flex;flex-direction:column;align-items:center;
  padding:max(calc(var(--app-h) * .04),calc(var(--safe-t) + 34px)) 16px max(calc(var(--app-h) * .15 + var(--safe-b)),calc(var(--kb,0px) + 12px))}
.ob3__brand{flex:none;display:flex;flex-direction:column;align-items:center;color:var(--text)}
.ob3__brand svg{height:16px;width:auto;display:block;overflow:visible}
.ob3__tag{margin-top:12px;padding-left:.28em;font:300 8px/1 var(--f-sans);letter-spacing:.28em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.ob3__card{flex:0 1 auto;min-height:0;width:clamp(300px,72%,340px);margin-top:calc(var(--app-h) * .024);
  padding:clamp(12px,1.8vh,18px) 15px 15px;background:rgba(16,17,20,.62);border-color:rgba(255,255,255,.13);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 20px 60px rgba(0,0,0,.5)}
.ob3__cta{flex:none;margin-top:calc(var(--app-h) * .03)}
.ob3__pill{min-width:max(170px,42%);height:44px;background:rgba(6,7,9,.66);font-size:11px;letter-spacing:.32em;
  border-color:#fff;box-shadow:0 0 16px rgba(255,255,255,.55),0 0 3px rgba(255,255,255,.8),inset 0 0 12px rgba(255,255,255,.28)}
.ob3__pill span{margin-right:-.32em}
:lang(ru) .ob3__pill{letter-spacing:.2em}
.ob3__pill[aria-disabled=true]{opacity:.45}
/* short phones (SE / mini): pill may sit on the lunar horizon so the whole card fits without scrolling */
@media (max-height:740px){
  .ob3{padding-top:max(calc(var(--app-h) * .045),calc(var(--safe-t) + 32px));padding-bottom:max(calc(var(--app-h) * .075 + var(--safe-b)),calc(var(--kb,0px) + 12px))}
  .ob3__card{margin-top:calc(var(--app-h) * .022);padding-top:10px;padding-bottom:12px}
  .ob3__cta{margin-top:calc(var(--app-h) * .022)}
  .ob3 .pf{--av:60px;--fh:38px;--gap:6px}
  .ob3 .pf__avatar-wrap{padding:6px}
  .ob3 .pf__head{margin:4px 0 10px}
  .ob3 .pf__demo{padding-top:8px;padding-bottom:8px}
  .ob3 .pf__demo-body{margin-top:4px}
}
/* keyboard open: give the card all the room above it */
.ob3.is-kb{padding-top:calc(var(--safe-t) + 12px)}
.ob3.is-kb .ob3__brand{display:none}
.ob3.is-kb .ob3__card{margin-top:0}
.ob3.is-kb .ob3__cta{margin-top:10px}

/* ======================= profile form (.pf) — also used in the crew edit modal ======================= */
.pf{--av:clamp(76px,calc(var(--app-h) * .105),96px);--fh:clamp(42px,calc(var(--app-h) * .051),48px);--gap:clamp(7px,1vh,10px);display:flex;flex-direction:column;align-items:center}
.pf__avatar-wrap{padding:8px}
.pf__avatar{position:relative;display:block;width:var(--av);height:var(--av);margin:0 auto;border-radius:50%}
.pf__av-ring{position:absolute;inset:0;border-radius:50%;border:1.5px solid #fff;z-index:2;pointer-events:none;
  box-shadow:0 0 14px rgba(255,255,255,.55),0 0 2px rgba(255,255,255,.9),inset 0 0 10px rgba(255,255,255,.3)}
.pf__avatar.is-empty::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:1px dashed rgba(255,255,255,.38);animation:pf-spin 40s linear infinite}
@keyframes pf-spin{to{transform:rotate(360deg)}}
.pf__av-clip{position:absolute;inset:2px;border-radius:50%;overflow:hidden;background:#050506}
.pf__av-clip img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pf__avatar.is-busy .pf__av-clip{animation:pf-pulse 1s ease-in-out infinite}
@keyframes pf-pulse{50%{opacity:.55}}
/* scan: processed image revealed top→bottom under a glowing line (900ms) */
.pf__av-line{position:absolute;left:-10%;right:-10%;top:0;height:100%;opacity:0;pointer-events:none;transform:translateY(-100%)}
.pf__av-line::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:#fff;
  box-shadow:0 0 8px 2px rgba(200,235,255,.9),0 0 22px 6px rgba(164,239,249,.45)}
.pf__avatar.is-scanning .pf__av-line{animation:pf-sweep 900ms linear forwards}
.pf__avatar.is-scanning .pf__av-new{animation:pf-reveal 900ms linear forwards}
@keyframes pf-sweep{0%{opacity:1;transform:translateY(-100%)}92%{opacity:1}100%{opacity:0;transform:translateY(0)}}
@keyframes pf-reveal{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
/* idle: the same line sweeps once every 30s (900ms sweep, then rest); first pass ~5s after the form appears */
.pf__av-line{animation:pf-scan 30s linear -25s infinite}
@keyframes pf-scan{0%,97%{opacity:0;transform:translateY(-100%)}97.01%{opacity:1;transform:translateY(-100%)}99.7%{opacity:1}100%{opacity:0;transform:translateY(0)}}

.pf__head{margin:clamp(6px,1.1vh,12px) 0 clamp(10px,1.6vh,16px);text-align:center}
.pf__title{padding-left:.26em;font:400 9.5px/1.2 var(--f-sans);letter-spacing:.26em;text-transform:uppercase;color:rgba(255,255,255,.88)}
.pf__sub{margin-top:5px;padding-left:.3em;font:300 8px/1.2 var(--f-sans);letter-spacing:.3em;text-transform:uppercase;color:var(--text-3)}

.pf__fields{align-self:stretch;display:flex;flex-direction:column;gap:var(--gap)}
.pf .field{height:var(--fh);border-color:rgba(255,255,255,.11);background:rgba(255,255,255,.012)}
.pf .field:focus-within{border-color:rgba(255,255,255,.32)}
.pf .field > svg{left:16px;width:19px;height:19px;color:rgba(255,255,255,.82)}
.pf .field input{padding-left:48px;padding-right:14px}
.pf .field input::placeholder{font-size:9px;letter-spacing:.2em;color:rgba(255,255,255,.68)}
.pf .field input{letter-spacing:.1em}
.pf [data-f=quote] input,.pf [data-f=instagram] input,.pf [data-f=telegram] input,.pf [data-f=ref] input{text-transform:none;letter-spacing:.03em}
.pf [data-f=ref] input::placeholder{letter-spacing:.06em}
.pf__coords{margin:6px 0 -2px 48px;font:300 9px/1.2 var(--f-mono);letter-spacing:.16em;color:var(--text-3)}
.pf__coords:empty{display:none}
.pf__coords.is-found{color:rgba(255,255,255,.78)}
/* hint lines under genre / role / demo */
.pf__hint{margin:5px 6px -1px 17px;font:300 8px/1.4 var(--f-mono);color:var(--text-3);text-wrap:balance}
.pf__hint--demo{margin:-2px 0 0;text-align:center}

/* avatar hint under the circle */
.pf__av-hint{display:block;margin:2px auto 0;padding:4px 8px;font:400 8px/1.2 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.pf__av-hint:active{color:#fff}
/* role: chips in the form, "other" opens a text field */
.pf__role{display:flex;flex-direction:column;gap:7px;border-radius:16px;transition:box-shadow 250ms var(--ease)}
.pf__role-label{display:flex;align-items:center;gap:8px;margin-left:16px;font:300 8px/1.3 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.pf__role-label svg{width:13px;height:13px;color:rgba(255,255,255,.82)}
.pf__chips{display:flex;gap:4px}
.pf__chip{flex:1 1 auto;justify-content:center;height:30px;padding:0 6px;font-size:8px;letter-spacing:.08em}
.pf__role.is-error .pf__chips{animation:shake 360ms var(--ease)}
.pf__role.is-error .pf__chip{border-color:rgba(255,140,120,.7)}

.pf__demo{border:1px solid rgba(255,255,255,.11);border-radius:20px;background:rgba(255,255,255,.012);padding:clamp(10px,1.6vh,14px) 14px clamp(10px,1.6vh,14px) 16px}
.pf__demo-head{display:flex;align-items:center;gap:12px;min-height:20px}
.pf__demo-head > svg{width:19px;height:19px;flex:none;color:rgba(255,255,255,.82)}
.pf__demo-label{font:400 9px/1 var(--f-sans);letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.68);white-space:nowrap}
.pf__demo-dur{font:300 9px/1 var(--f-mono);letter-spacing:.12em;color:rgba(255,255,255,.75)}
.pf__demo-pick{margin-left:auto;padding:6px 0 6px 6px;font:400 9px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);white-space:nowrap}
.pf__demo-pick:active{color:var(--text)}
.pf__demo-body{display:flex;align-items:center;gap:14px;margin-top:clamp(6px,1.2vh,12px)}
.pf__wave{flex:1;min-width:0;height:30px;display:block}
.pf__demo-play{--s:32px;border-color:rgba(255,255,255,.7)}
.pf__demo-play svg{width:40%;height:40%}
.pf__demo:not(.has-file) .pf__demo-play{border-style:dashed;border-color:rgba(255,255,255,.45)}
.pf__demo:not(.has-file) .pf__demo-play svg{width:52%;height:52%}
.pf__demo:not(.has-file) .pf__demo-play svg circle{display:none}
.pf__demo.is-busy .pf__wave{animation:pf-pulse 1s ease-in-out infinite}
.pf__actions{margin-top:20px;display:flex;justify-content:center}
.pf__submit{min-width:170px;height:46px}

/* SHORTS (PLAN_V13 §А.3): a 9:16 frame with its buttons; the amber line at the bottom is the upload */
.pf__short{position:relative;display:flex;align-items:center;gap:14px;padding:12px 14px 12px 12px;border:1px solid rgba(255,255,255,.11);border-radius:20px;background:rgba(255,255,255,.012);overflow:hidden}
.pf__short-frame{position:relative;flex:none;width:64px;aspect-ratio:9/16;display:grid;place-items:center;overflow:hidden;border-radius:12px;border:1px dashed rgba(255,255,255,.45);background:#050506}
.pf__short.has-file .pf__short-frame{border-style:solid;border-color:rgba(255,255,255,.7)}
.pf__short-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pf__short-frame img:not([hidden]) + .pf__short-star{display:none}
.pf__short-star svg{width:20px;height:20px;color:rgba(255,255,255,.72)}
.pf__short.is-busy .pf__short-frame{animation:pf-pulse 1s ease-in-out infinite}
.pf__short-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.pf__short-head{display:flex;align-items:center;gap:10px}
.pf__short-hint{font:300 8px/1.45 var(--f-mono);color:var(--text-3)}
.pf__short-btns{display:flex;flex-wrap:wrap;gap:0 16px}
.pf__short-pick,.pf__short-del{min-height:44px;font:400 9px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.85);text-align:left}
.pf__short-del{color:var(--text-3)}
.pf__short-bar{position:absolute;left:0;bottom:0;width:100%;height:2px;transform-origin:left;transform:scaleX(var(--p,0));background:var(--amber);box-shadow:0 0 8px var(--amber);transition:transform 200ms linear}
.pf [data-armed]{color:#ff8f84}

/* tracks earned by tasks (PLAN_V13 §Б.3): the demo above is track 1, these follow in their order */
.pf__tracks{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:var(--gap)}
.pf__trk{display:grid;grid-template-columns:44px minmax(0,1fr) 44px 44px 44px;grid-template-rows:44px 20px;
  grid-template-areas:"play name up down del" "play wave wave wave dur";column-gap:2px;align-items:center;
  padding:6px 6px 8px 10px;border:1px solid rgba(255,255,255,.11);border-radius:18px;background:rgba(255,255,255,.012)}
.pf__trk-play{grid-area:play;--s:44px;border-color:rgba(255,255,255,.7)}
.pf__trk-play svg{width:36%;height:36%}
.pf__trk-name{grid-area:name;min-width:0;padding-left:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:400 9.5px/1.2 var(--f-mono);letter-spacing:.1em;color:var(--text)}
.pf__trk-dur{grid-area:dur;text-align:center;font:300 9px/1 var(--f-mono);letter-spacing:.08em;color:rgba(255,255,255,.75)}
.pf__trk-wave{grid-area:wave;width:100%;height:20px;padding-left:10px;display:block}
.pf__trk-btn{width:44px;height:44px;display:grid;place-items:center;color:rgba(255,255,255,.75)}
.pf__trk-btn[data-x=up]{grid-area:up} .pf__trk-btn[data-x=down]{grid-area:down} .pf__trk-btn[data-x=del]{grid-area:del}
.pf__trk-btn svg{width:16px;height:16px}
.pf__trk-btn[data-x=up] svg{transform:rotate(-90deg)} .pf__trk-btn[data-x=down] svg{transform:rotate(90deg)}
.pf__trk-btn:disabled{opacity:.22}
.pf__add{width:100%;min-width:0;max-width:none;height:44px;font-size:9px;letter-spacing:.2em}
:lang(ru) .pf__add{letter-spacing:.12em}

/* «Как загрузить больше треков»: glass card, amber bar, three task rows; lit when every slot is taken */
.pf__quota{padding:16px 16px 12px;border-radius:20px;background:rgba(16,17,20,.5);border-color:rgba(255,255,255,.12);transition:border-color 300ms var(--ease),box-shadow 300ms var(--ease)}
.pf__quota.is-lit{border-color:color-mix(in srgb,var(--amber) 70%,transparent);box-shadow:0 0 22px rgba(247,176,100,.28),inset 0 0 14px rgba(247,176,100,.12)}
.pf__q-title{font:400 9.5px/1.3 var(--f-sans);letter-spacing:.2em;text-transform:uppercase;color:#fff}
.pf__q-meter{margin:12px 0 6px;display:grid;gap:7px;font:400 9px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--amber)}
.pf__q-meter i{position:relative;display:block;height:4px;border-radius:4px;overflow:hidden;background:rgba(255,255,255,.08)}
.pf__q-meter i::after{content:"";position:absolute;inset:0;transform-origin:left;transform:scaleX(var(--p,0));background:linear-gradient(90deg,var(--amber-deep),var(--amber));box-shadow:0 0 10px var(--amber);transition:transform 500ms var(--ease-out)}
.pf__q-rows{margin:4px 0 0;padding:0;list-style:none}
.pf__q-row{display:grid;grid-template-columns:8px minmax(0,1fr) auto;gap:10px;align-items:center;min-height:48px;border-top:1px solid rgba(255,255,255,.06)}
.pf__q-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.3)}
.pf__q-row.is-done .pf__q-dot{background:var(--amber);box-shadow:0 0 8px var(--amber)}
.pf__q-k{font:300 10px/1.4 var(--f-sans);letter-spacing:.03em;color:var(--text-2)}
.pf__q-r{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:4px 8px}
.pf__q-v{font:400 8.5px/1.2 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--amber);white-space:nowrap}
.pf__q-btn{min-height:44px;padding:0 14px;border-radius:var(--r-pill);border:1px solid color-mix(in srgb,var(--amber) 60%,transparent);
  font:400 8.5px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text);white-space:nowrap}
.pf__q-btn:active{background:rgba(247,176,100,.12)}
.pf__q-foot{margin:8px 0 0;font:300 8px/1.5 var(--f-mono);color:var(--text-3);text-wrap:balance}
.pf__q-line{color:rgba(247,176,100,.85)}

@media (prefers-reduced-motion:reduce){
  .pf__avatar.is-empty::after,.pf__av-line{animation:none}
}

/* ======================= start screen «what NOCTRA is» (js/howto.js, PLAN_V13 §Г, plain-words redesign) ======================= */
/* an opaque, quiet page: no stars, moon or glow behind it; big readable type, three cards, one clear button */
.modal:has(.howto) .modal__scrim{background:#050506;backdrop-filter:none;-webkit-backdrop-filter:none}
.howto.modal__panel{background:#050506}
.howto__in{height:100%;overflow-y:auto;display:flex;flex-direction:column;align-items:center;gap:14px;
  padding:calc(var(--safe-t) + 40px) calc(var(--safe-r) + 20px) calc(var(--safe-b) + 32px) calc(var(--safe-l) + 20px)}
.howto__in>*{width:min(100%,420px);flex:none}
.howto__top{display:flex;flex-direction:column;gap:6px}
.howto__logo{font:500 15px/1 var(--f-sans);letter-spacing:.32em;color:#fff}
.howto__cap{margin:0;font:400 14px/1.4 var(--f-sans);color:var(--text-2)}
.howto__title{margin:14px 0 0;font:600 clamp(26px,7.4vw,32px)/1.18 var(--f-sans);letter-spacing:-.01em;color:#fff}
.howto__title span{display:block}
.howto__lead{margin:0 0 10px;font:400 16px/1.5 var(--f-sans);color:var(--text-2)}
.howto__b{display:flex;gap:14px;padding:18px;border:1px solid rgba(255,255,255,.09);border-radius:16px;background:#101114}
.howto__ic{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:rgba(247,176,100,.12);color:var(--amber)}
.howto__ic svg{width:21px;height:21px}
.howto__bt{min-width:0}
.howto__h{margin:0 0 6px;font:600 17px/1.3 var(--f-sans);color:#fff}
.howto__b p{margin:0;font:400 15px/1.5 var(--f-sans);color:var(--text-2)}
.howto__b .howto__later{margin-top:8px;font-size:14px;color:var(--text-3)}
.howto__pitch{margin-top:14px}
.howto__send{min-height:44px;padding:0 18px;border:1px solid rgba(247,176,100,.6);border-radius:12px;background:none;
  font:600 15px/1 var(--f-sans);color:var(--amber);cursor:pointer}
.howto__send:active{background:rgba(247,176,100,.1)}
.howto__b .howto__sent{margin-top:12px;font-weight:500;color:var(--amber)}
.howto__note{margin:6px 0 0;font:400 14px/1.5 var(--f-sans);color:var(--text-2);text-align:center}
.howto__cta{margin-top:10px}
.howto__go{width:100%;min-height:56px;border:0;border-radius:14px;background:var(--amber);font:600 17px/1 var(--f-sans);color:#1a1206;cursor:pointer}
.howto__go:active{background:var(--amber-deep)}
.howto__go:focus-visible,.howto__send:focus-visible{outline:2px solid #fff;outline-offset:3px}
.howto .rise{transition-duration:500ms}
.howto.is-active .rise{transition-delay:calc(80ms + var(--i,0) * 120ms)}
.howto-pitch__go{width:100%;min-width:0;max-width:none;height:48px;margin-top:4px}
.howto-pitch .sig-form__title svg{width:18px;height:18px;color:var(--amber)}
@media (prefers-reduced-motion:reduce){
  .howto.is-active .rise{transition-delay:0s}
}

/* ======================= S2.5 call sign (PLAN_V4 §4.5) — also the «confirm email» sheet (js/auth.js) ======================= */
.au__step{align-self:stretch;display:flex;flex-direction:column;align-items:center}
.au__step[hidden]{display:none}
.au__head{margin:2px 0 clamp(12px,2vh,18px);text-align:center}
.au__title{padding-left:.3em;font:300 clamp(17px,5vw,20px)/1.2 var(--f-sans);letter-spacing:.3em;text-transform:uppercase;color:#fff}
.au__title--long{padding-left:0;font-size:12.5px;line-height:1.45;letter-spacing:.14em}
.au__sub{margin-top:8px;font:300 8.5px/1.5 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);text-wrap:balance}
.au__sent{text-transform:none;letter-spacing:.06em}
.au .pf__fields{align-self:stretch}
.au .field input{text-transform:none;letter-spacing:.04em}
.au__field[hidden]{display:none}
.au__typo{align-self:flex-start;margin:-2px 0 0 48px;padding:2px 0;font:400 9px/1.2 var(--f-mono);letter-spacing:.08em;color:var(--ice);text-decoration:underline}
.au__note{margin:12px 2px 0;font:300 8px/1.55 var(--f-mono);letter-spacing:.04em;color:var(--text-3);text-align:center;text-wrap:balance}
/* four cells over one transparent input: the OS code autofill and paste land in that input */
.au__cells{position:relative;display:flex;gap:10px;justify-content:center;margin:2px 0 12px}
.au__cells span{width:52px;height:60px;display:grid;place-items:center;border-radius:14px;border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.015);font:300 26px/1 var(--f-mono);color:#fff;transition:border-color 200ms var(--ease),box-shadow 200ms var(--ease)}
.au__cells span.is-cur{border-color:rgba(255,255,255,.62);box-shadow:0 0 14px rgba(255,255,255,.18)}
.au__cells.is-error{animation:shake 360ms var(--ease)}
.au__cells.is-error span{border-color:rgba(255,140,120,.7)}
.au__code{position:absolute;inset:0;width:100%;height:100%;opacity:.01;border:0;background:none;font-size:16px;color:transparent;caret-color:transparent}
.au__links{align-self:stretch;display:flex;justify-content:space-between;gap:12px}
.au__link{padding:8px 2px;font:400 8.5px/1.2 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.8)}
.au__link:disabled{color:var(--text-3)}
.au__err{margin:10px 0 0;font:400 9.5px/1.45 var(--f-mono);letter-spacing:.05em;color:#ff8f84;text-align:center}
.au__err:empty{display:none}
.ob25 .ob3__card{padding-top:clamp(16px,2.4vh,22px);padding-bottom:16px}

/* settings «Аккаунт» tab (js/settings.js) */
.set__rows{align-self:stretch;display:flex;flex-direction:column;gap:10px}
.set__row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;font:400 9.5px/1.3 var(--f-mono);letter-spacing:.14em;text-transform:uppercase}
.set__row-k{color:var(--text-3);white-space:nowrap}
.set__row-v{min-width:0;color:var(--text);text-transform:none;letter-spacing:.06em;text-align:right;overflow-wrap:anywhere}
.set__out{align-self:stretch;height:44px;border-radius:14px;border:1px solid var(--glass-border-strong);font:400 9.5px/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--text-2)}
.set__out:active{background:rgba(255,255,255,.05)}
.set-erase__err{margin:0;font:400 10px/1.45 var(--f-mono);letter-spacing:.05em;color:#ff8f84;text-align:center}
.set-erase__err:empty{display:none}