@font-face{font-family:Archivo;src:url('fonts/archivo-400.ttf')}
@font-face{font-family:Archivo;src:url('fonts/archivo-600.ttf');font-weight:600}
@font-face{font-family:Archivo;src:url('fonts/archivo-700.ttf');font-weight:700}
@font-face{font-family:Archivo Black;src:url('fonts/archivo-black.ttf')}
*{box-sizing:border-box}
:root{
  --night:#0b1026;
  --ink:#e9eff0;
  --acid:#d9ff58;
  --red:#f25a45;
  --lilac:#bdacff;
  --slate:#99a8bb;
  --line:#f4f6e833
}
html{background:var(--night);scroll-behavior:smooth}
body{margin:0;background:var(--night);color:var(--ink);font-family:Archivo,Arial,sans-serif}
.atlas-shell{min-height:100svh;position:relative;overflow:hidden}
.atlas-canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none}
.atlas-ui{
  position:relative;
  min-height:100svh;
  display:grid;
  grid-template-rows:auto 1fr auto;
  padding:18px 22px 22px;
  isolation:isolate
}
.atlas-ui:before{
  content:'';
  position:absolute;
  z-index:-1;
  inset:0;
  background:linear-gradient(180deg,#0b1026cc 0%,transparent 28%,transparent 72%,#0b1026f5 100%);
  pointer-events:none
}
.atlas-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.atlas-mark{display:flex;gap:10px;align-items:center;font:600 11px/12px Archivo;letter-spacing:.09em}
.atlas-mark i{display:grid;place-items:center;width:31px;height:31px;border:1px solid var(--acid);border-radius:50%;font-style:normal;color:var(--acid);font-size:18px}
.atlas-mark b{color:var(--acid);font-weight:600}
.atlas-lang{display:flex;border:1px solid var(--line);background:#0b1026a6}
.atlas-lang button{min-height:38px;padding:0 12px;border:0;background:transparent;color:var(--ink);font:600 11px Archivo;letter-spacing:.06em;cursor:pointer}
.atlas-lang button.active{background:var(--acid);color:#0b1026}
.atlas-heading{align-self:start;max-width:710px;padding-top:7vh;pointer-events:none}
.atlas-heading p{margin:0 0 10px;color:var(--acid);font:600 11px Archivo;letter-spacing:.1em}
.atlas-heading h1{max-width:7.7ch;margin:0;font:400 clamp(3.75rem,9.4vw,9.4rem)/.8 'Archivo Black',Arial,sans-serif;letter-spacing:-.065em;text-wrap:balance}
.atlas-heading strong{color:var(--red);font-weight:400}
.atlas-node{position:absolute;z-index:2;left:var(--x);top:var(--y);display:flex;align-items:center;gap:9px;max-width:170px;padding:0;border:0;background:transparent;color:var(--ink);font:600 11px Archivo;letter-spacing:.045em;text-align:left;cursor:pointer;transform:translate3d(var(--dx,0),var(--dy,0),0);transition:color .2s}
.atlas-node:before{content:'';display:block;flex:0 0 auto;width:13px;height:13px;border:2px solid var(--ink);border-radius:50%;background:var(--night);box-shadow:0 0 0 5px #0b102680;transition:.25s}
.atlas-node.active,.atlas-node:hover,.atlas-node:focus-visible{color:var(--acid);outline:0}
.atlas-node.active:before,.atlas-node:hover:before{border-color:var(--acid);background:var(--acid);box-shadow:0 0 0 6px #d9ff5833}
.atlas-node:focus-visible:after{content:'';position:absolute;inset:-8px -10px;border:1px solid var(--acid)}
.atlas-bottom{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:24px;
  align-items:end
}
.atlas-card{
  max-width:520px;
  padding:17px 19px 19px;
  border-top:1px solid var(--acid);
  background:#0b1026d9;
  backdrop-filter:blur(12px)
}
.atlas-card .kicker{margin:0 0 7px;color:var(--acid);font:600 11px Archivo;letter-spacing:.09em}
.atlas-card h2{margin:0;font:400 clamp(1.75rem,4.4vw,3.4rem)/.9 'Archivo Black',Arial,sans-serif;letter-spacing:-.055em}
.atlas-card .description{max-width:42ch;margin:11px 0 0;color:#d2dbe2;font-size:.93rem;line-height:1.35}
.atlas-action{
  display:inline-flex;
  align-items:center;
  gap:13px;
  margin-top:16px;
  padding:12px 14px;
  background:var(--acid);
  color:var(--night);
  font:700 11px Archivo;
  letter-spacing:.08em;
  text-decoration:none
}
.atlas-action:hover{background:#fff}
.atlas-action[hidden]{display:none}
.atlas-controls{
  display:flex;
  gap:7px
}
.atlas-controls button{
  width:47px;
  height:47px;
  border:1px solid var(--line);
  background:#0b1026bb;
  color:var(--ink);
  font-size:21px;
  cursor:pointer
}
.atlas-controls button:hover,.atlas-controls button:focus-visible{border-color:var(--acid);color:var(--acid);outline:0}
.atlas-hint{position:absolute;right:24px;bottom:120px;color:#c8d1da;font:500 12px Archivo;letter-spacing:.05em}
.atlas-footer-nav{
  display:flex;
  gap:13px;
  color:#9eacbb;
  font:500 11px Archivo;
  letter-spacing:.07em
}
.atlas-footer-nav a{color:inherit;text-decoration:none}
.atlas-footer-nav a:hover{color:var(--acid)}
.idea-sheet{
  position:fixed;
  z-index:10;
  inset:auto 22px 20px auto;
  width:min(430px,calc(100vw - 44px));
  padding:21px;
  background:var(--acid);
  color:var(--night);
  box-shadow:0 20px 80px #0008;
  transform:translateY(130%);
  transition:transform .5s cubic-bezier(.16,1,.3,1)
}
.idea-sheet.open{transform:translateY(0)}
.idea-sheet h2{max-width:8ch;margin:0;font:400 2.6rem/.86 'Archivo Black',Arial,sans-serif;letter-spacing:-.06em}
.idea-sheet p{font-size:.93rem;line-height:1.35}
.idea-output{min-height:70px;margin:16px 0;padding:11px 0;border-top:1px solid #0b102655;border-bottom:1px solid #0b102655;font:600 1.05rem/1.25 Archivo}
.idea-buttons{display:flex;gap:8px;flex-wrap:wrap}
.idea-buttons button{padding:10px 12px;border:1px solid var(--night);background:transparent;color:var(--night);font:700 11px Archivo;letter-spacing:.06em;cursor:pointer}
.idea-buttons button.primary{background:var(--night);color:var(--acid)}
.idea-close{position:absolute;right:13px;top:12px;width:32px;height:32px;border:0;background:transparent;font-size:20px;cursor:pointer}
@media(max-width:720px){
  .atlas-ui{padding:16px 16px 120px}
  .atlas-heading{padding-top:12vh;max-width:300px}
  .atlas-heading h1{font-size:clamp(3.55rem,15vw,5rem)}
  .atlas-heading p{max-width:23ch;line-height:1.35}
  .atlas-node{max-width:126px;font-size:11px;line-height:1.12}
  .atlas-node:nth-of-type(2){--x:11%!important;--y:47%!important}
  .atlas-node:nth-of-type(3){--x:62%!important;--y:34%!important}
  .atlas-node:nth-of-type(4){--x:58%!important;--y:59%!important}
  .atlas-node:nth-of-type(5){--x:12%!important;--y:68%!important}
  .atlas-node:nth-of-type(6){--x:65%!important;--y:76%!important}
  .atlas-bottom{grid-template-columns:1fr;gap:12px;align-items:start}
  .atlas-card{max-width:none;padding:14px 15px 16px}
  .atlas-card h2{font-size:2.25rem}
  .atlas-card .description{margin-top:8px;font-size:.82rem}
  .atlas-action{margin-top:12px;padding:11px}
  .atlas-controls{position:static;display:flex;justify-content:flex-end;gap:7px;padding-top:8px}
  .atlas-controls button{width:41px;height:41px}
  .atlas-hint{display:none}
  .atlas-footer-nav{position:static;display:flex;justify-content:flex-start;gap:13px;padding-top:8px}
  .idea-sheet{inset:auto 12px 12px;width:auto}
  .idea-sheet h2{font-size:2.2rem}
}
@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}
}