:root{
  --black:#000;
  --violet:#7c3aed;
  --lilac:#c4a1ff;
  --orchid:#e2a8ff;
  --mist:#efe3ff;
  --err:#ff9ec0;
  color-scheme:dark;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:inherit}
*{-webkit-tap-highlight-color:transparent}
button,input{outline:none}
button::-moz-focus-inner{border:0}
html{height:100%;background:var(--black);scroll-padding-top:env(safe-area-inset-top,0px)}
body{
  margin:0;height:100%;background:var(--black);color:var(--mist);overflow:hidden;
  font-family:"Unbounded",system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;
}
canvas{position:fixed;pointer-events:none}

/* северное сияние — только на загрузке */
#aurora{
  z-index:0;left:-80px;bottom:-80px;width:calc(100% + 160px);height:calc(62vh + 80px);
  filter:blur(14px);opacity:0;
  -webkit-mask-image:linear-gradient(to top,#000 45%,transparent);mask-image:linear-gradient(to top,#000 45%,transparent);
  will-change:opacity;
  transform:translateZ(0);
}
#dots{z-index:1;inset:0;width:100%;height:100%;opacity:0;will-change:opacity;transform:translateZ(0)}
.overlay{
  position:fixed;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .9s ease;
  background:rgba(0,0,0,.18);
}
#ascii{
  z-index:3;inset:0;width:100%;height:100%;
  filter:drop-shadow(0 0 6px rgba(160,100,255,.8));
  will-change:transform;
  transform:translateZ(0);
}

/* ---------- модальное окно ---------- */
.modal-wrap{
  position:fixed;inset:0;z-index:4;display:flex;overflow-y:auto;
  padding:clamp(160px,28vh,280px) 16px calc(24px + env(safe-area-inset-bottom,0px));
  visibility:hidden;opacity:0;transition:opacity .7s ease .15s,visibility 0s linear .85s;
}
body.open .modal-wrap{visibility:visible;opacity:1;transition:opacity .7s ease .15s}
body.open .overlay{opacity:1}
.card{
  position:relative;margin:auto;width:min(440px,100%);border-radius:28px;
  transform:translateY(22px) scale(.97);transition:transform .9s cubic-bezier(.2,.8,.2,1) .15s;
}
body.open .card{transform:none}
.card-inner{
  position:relative;padding:44px 34px 36px;border-radius:inherit;
  background:linear-gradient(180deg,rgba(30,11,58,.72),rgba(6,2,14,.86));
  border:1px solid rgba(196,161,255,.1);
  -webkit-backdrop-filter:blur(30px) saturate(1.2);backdrop-filter:blur(30px) saturate(1.2);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.9);
  -webkit-transform:translateZ(0);transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden;
}
/* контурный свет: обводка подсвечивается там, где рядом проходит светящийся круг */
.rim,.rim-glow{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1}
.rim{
  padding:1.5px;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
.rim-glow{filter:blur(9px);opacity:.9}
.rim-glow .rim{padding:3px}

.card h1{margin:0 0 10px;font-size:23px;font-weight:600;letter-spacing:-.01em}
.card .sub{margin:0 0 32px;font-size:13px;line-height:1.55;color:rgba(239,227,255,.6)}
.field{position:relative}
.key{
  width:100%;display:block;margin:0;
  font-family:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  font-size:clamp(16px,4.7vw,23px);font-weight:700;letter-spacing:.1em;text-align:center;color:var(--mist);
  background:rgba(0,0,0,.55);border:1px solid rgba(196,161,255,.2);border-radius:15px;
  padding:21px 56px;outline:none;caret-color:var(--orchid);transition:border-color .2s,box-shadow .2s;
}
.key::placeholder{color:rgba(196,161,255,.26)}
.key:focus{border-color:var(--lilac);box-shadow:0 0 0 4px rgba(124,58,237,.22),0 0 30px rgba(168,110,255,.22)}
.card.invalid .key{border-color:var(--err)}
.paste{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  width:40px;height:40px;display:grid;place-items:center;border-radius:11px;cursor:pointer;
  border:1px solid rgba(196,161,255,.18);background:rgba(124,58,237,.14);color:var(--lilac);
  transition:background .2s,color .2s,border-color .2s;
}
.paste:hover{background:rgba(124,58,237,.3);color:var(--mist);border-color:rgba(196,161,255,.4)}
.paste svg{width:19px;height:19px}
.paste .ok{display:none}
.paste.done .ok{display:block}.paste.done .clip{display:none}
.segs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:16px 4px 0}
.segs i{position:relative;height:3px;border-radius:3px;background:rgba(196,161,255,.13);overflow:hidden}
.segs i::after{
  content:"";position:absolute;inset:0;transform-origin:left;transform:scaleX(var(--p,0));
  background:linear-gradient(90deg,var(--violet),var(--orchid));transition:transform .25s ease;
}
.msg{margin:14px 2px 0;font-size:12px;line-height:1.5;color:rgba(239,227,255,.5)}
.msg.err{color:var(--err)}
.msg:empty{margin:0}
.segs+.msg:empty+.btn,.msg+.btn{margin-top:28px}
.btn{
  width:100%;padding:21px;border:0;border-radius:15px;cursor:pointer;
  font:600 15px/1 "Unbounded",system-ui,sans-serif;color:#15062c;
  background:linear-gradient(135deg,#dcc3ff,#ab7bff 60%,#8b4dff);
  box-shadow:0 12px 30px -10px rgba(139,77,255,.7);transition:transform .15s,filter .2s,opacity .2s;
}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:translateY(1px) scale(.99)}
.btn[disabled]{cursor:progress;opacity:.7}
.card.incomplete .btn{opacity:.55}
.btn:focus-visible,.paste:focus-visible{outline:2px solid var(--mist);outline-offset:3px}

.done{text-align:center;padding:6px 0 2px}
.done .draw{stroke-dasharray:1;stroke-dashoffset:0}
.card.success{width:min(300px,100%)}
.done svg{width:56px;height:56px;margin-bottom:14px}
.done h2{margin:0 0 8px;font-size:20px;font-weight:600}
.done p{margin:0;font-size:13px;color:rgba(239,227,255,.6)}
[hidden]{display:none!important}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .card-inner{background:linear-gradient(180deg,#160829,#07030f)}
}
/* рассыпание неверного ключа */
.key.ghosting{color:transparent;caret-color:transparent}
.shatter{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;white-space:pre;color:var(--mist)}
.shatter span{display:inline-block;will-change:transform,opacity}
.shatter.split span{text-shadow:-2px 0 rgba(255,80,140,.75),2px 0 rgba(120,160,255,.7)}
/* печать текста подбором символов */
.tx{display:grid}
.tx>span{grid-area:1/1}
.tx-ghost{color:transparent}
.tx-live .s{color:var(--orchid);opacity:.9}
.tx-live .n{color:#fff;text-shadow:0 0 10px rgba(226,168,255,.9)}


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

@media (max-width:480px){
  .card{width:87%;border-radius:24px}
  .card.success{width:70%}
  .card-inner{padding:28px 17px 22px}
  .card h1{font-size:17px;margin-bottom:8px}
  .card .sub{font-size:11.5px;margin-bottom:22px}
  .key{font-size:16px;padding:15px 44px;border-radius:13px}
  .paste{width:31px;height:31px;right:6px;border-radius:9px}
  .paste svg{width:16px;height:16px}
  .segs{margin-top:13px}
  .msg{font-size:11px}
  .segs+.msg:empty+.btn,.msg+.btn{margin-top:22px}
  .btn{padding:17px;font-size:13px;border-radius:13px}
}