:root{ --bg:#050508; --grn:#00ff9d; --pc: #00ff9d; --red:#ff2a6d; --blu:#05d9e8; --pur:#bc13fe; --st:var(--grn); --hc: var(--grn); --ac:var(--grn); }

  body{ font-family:'Montserrat',sans-serif; background:var(--bg); color:#fff; margin:0; padding:20px; padding-bottom:120px; transition:background 1s; display:flex; justify-content:center; }

  .app-wrap { width:100%; max-width:600px; }

  .amb{ position:fixed; top:0; left:0; width:100%; height:100%; background:radial-gradient(circle at 50% 30%,var(--st),transparent 70%); opacity:0.15; z-index:-1; animation:br 4s infinite; }

  

  .nav{ display:flex; justify-content:space-between; margin-bottom:20px; } 

.head { 

  display: flex; 

  justify-content: space-between; 

  align-items: center; 

  padding-bottom: 15px; 

  border-bottom: 1px solid rgba(255,255,255,0.1); 

  margin-bottom: 20px; 

  height: 60px; 

}



.head-l { 

  display: flex; 

  align-items: center; 

  gap: 5px; 

}



.head-r {

  display: flex;

  align-items: center;

  gap: 10px;

}



.logo-box { 

  display: flex; 

  align-items: center; 

  gap: 1px; 

}



.logo-txt { 

  font-family: 'Rajdhani', sans-serif; 

  font-weight: 800; 

  font-size: 16px; 

  color: #ccc; 

  letter-spacing: 2px; 

  line-height: 1; 

  position: relative;

  top: -2px; 

}



.head-r { 

  display: flex; 

  align-items: center; 

  gap: 8px; 

}



.ico { 

  width: 34px; 

  height: 34px; 

  border: 1px solid #333; 

  border-radius: 50%; 

  display: flex; 

  justify-content: center; 

  align-items: center; 

  color: #fff; 

  text-decoration: none; 

  background: transparent; 

  cursor: pointer; 

  transition: 0.2s;

}



.ico:hover { 

  border-color: #fff; 

  background: rgba(255,255,255,0.1); 

}



.btn-back {

  font-size: 36px;

  color: #666;

  text-decoration: none;

  transition: 0.2s;

  display: flex;

  align-items: center;

  justify-content: center;

  height: 48px;

  width: 30px;

  margin-right: 5px;

  position: relative;

  top: -5px;

  line-height: 0;

  padding-bottom: 4px;

}

.btn-back:hover { color: #fff; }

  .tut-n{ border-color:var(--yel)!important; animation:p 1.5s infinite; }

  

  .radar{ width:140px; height:140px; margin:0 auto 10px; } 

  .poly{ fill:var(--st); fill-opacity:0.3; stroke:var(--st); stroke-width:2; transition:0.5s; filter:drop-shadow(0 0 8px var(--st)); }

  

  .cp{ background:rgba(18,18,26,0.85); border:1px solid rgba(255,255,255,0.1); padding: 20px 25px; border-radius:12px; margin-bottom:15px; backdrop-filter:blur(5px); transition: border-color 0.5s; }

  .sec-tit { font-family:'Rajdhani'; font-size:12px; color:#888; border-bottom:1px solid #333; margin-bottom:10px; padding-bottom:5px; letter-spacing:1px; }

  .sh{ display:flex; justify-content:space-between; font-weight:bold; margin-bottom:5px; font-size:13px; margin-top:10px; } 

  .sv{ color:var(--st); font-family:'Rajdhani'; font-size:16px; transition: color 0.5s; }

  .s-desc { display:flex; justify-content:space-between; font-size:9px; color:#666; margin-top:-5px; margin-bottom:5px; text-transform:uppercase; }

  

 input[type=range] {

    width: 100%;

    -webkit-appearance: none;

    background: transparent;

    

    margin-top: 15px;      

    margin-bottom: 25px;   

    

    touch-action: pan-y !important; 

    

    position: relative;

    z-index: 10;

}

  input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; height:18px; width:18px; border-radius:50%; background:#fff; border:2px solid var(--st); margin-top:-7px; box-shadow:0 0 10px var(--st); cursor: pointer; transition: border-color 0.5s, box-shadow 0.5s; }

  input[type=range]::-webkit-slider-runnable-track{ width:100%; height:4px; background:#333; border-radius:2px;}

  

  .card{ position:relative; background:linear-gradient(135deg,#1a1a25,#12121a); border-left:4px solid var(--st); padding:20px; margin-top:10px; border-radius:12px; animation:up 0.5s; box-shadow:0 10px 30px rgba(0,0,0,0.3); transition: border-color 0.5s; }

  .btn-ref { position:absolute; top:10px; right:10px; background:rgba(0,0,0,0.5); border:1px solid #555; color:#ccc; font-family:'Rajdhani'; font-weight:bold; font-size:10px; padding:5px 10px; border-radius:6px; cursor:pointer; z-index:5; transition:0.2s; display:flex; align-items:center; gap:5px; }

  .btn-ref:hover { border-color:#fff; color:#fff; background:rgba(255,255,255,0.1); }



  .neural{ margin-top:15px; background:rgba(0,0,0,0.3); border:1px solid #333; border-left:2px solid var(--st); padding:12px; display:flex; justify-content:space-between; align-items:center; cursor:pointer; transition:0.3s; }

  .neural:hover{ background:rgba(255,255,255,0.05); border-color:var(--st); }

  .n-tit{ font-family:'Rajdhani'; font-weight:bold; font-size:12px; color:var(--st); letter-spacing:1px; transition: color 0.5s; }

  .n-btn{ background:var(--st); color:#000; font-weight:bold; font-size:10px; padding:4px 8px; border-radius:2px; transition: background 0.5s; }



  .pacer{ display:none; flex-direction:column; align-items:center; margin-top:20px; animation:in 1s; }

  .circ{ width:80px; height:80px; border-radius:50%; border:3px solid var(--blu); display:flex; align-items:center; justify-content:center; font-size:10px; color:var(--blu); font-weight:bold; animation:banim 8s infinite ease-in-out; box-shadow:0 0 20px var(--blu), inset 0 0 10px var(--blu); }

  

  .final-zone{ display:none; margin-top:30px; animation:in 0.5s; text-align:center; }

  

  .launch-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; }

  .l-btn-step { background: rgba(255,255,255,0.03); border: 1px solid #444; border-radius: 8px; padding: 15px; cursor: pointer; transition: 0.2s; text-align: left; }

  .l-btn-step:hover { border-color: var(--st); background: rgba(255,255,255,0.08); }

  .l-lbl { font-size: 9px; color: #666; font-weight: bold; letter-spacing: 1px; margin-bottom: 5px; }

  .l-tit { font-family: 'Rajdhani'; font-weight: bold; font-size: 13px; color: #fff; }



  .affirmation-box { 

    background: #111; border: 1px solid #333; padding: 15px; border-radius: 8px; 

    margin-bottom: 20px; cursor: pointer; transition: 0.3s; display: flex; align-items: center; gap: 10px;

  }

  .affirmation-box.checked { border-color: var(--st); background: rgba(0, 255, 157, 0.05); }

  .af-icon { width: 24px; height: 24px; min-width: 24px; border-radius: 50%; border: 2px solid #555; display: flex; align-items: center; justify-content: center; color: #000; font-weight: bold; transition: 0.3s; }

  .affirmation-box.checked .af-icon { border-color: var(--st); background: var(--st); box-shadow: 0 0 10px var(--st); }

  .af-text { font-size: 13px; color: #fff; font-weight: bold; line-height: 1.4; text-align: left; }



.btn-hold { 

  position: relative; 

  width: 100px; height: 100px;

  margin: 0 auto;

  border-radius: 50%; 

  background: #0a0a0e; 

  border: 2px dashed #444;

  display: flex; align-items: center; justify-content: center; 

  cursor: pointer; user-select: none; overflow: hidden; 

  transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);

  box-shadow: inset 0 0 20px #000;

}



.btn-hold:active { 

  transform: scale(0.95); 

  border-style: solid;

  border-color: var(--st);

  box-shadow: 0 0 30px var(--st), inset 0 0 15px var(--st);

}



.btn-hold.enabled { border-color: #666; cursor: pointer; filter: grayscale(0); opacity: 1; }

.btn-hold.locked { background: var(--st); border-color: #fff; box-shadow: 0 0 50px var(--st); transform: scale(1.1); }



.hold-fill { 

  position: absolute; bottom: 0; left: 0; width: 100%; height: 0%; 

  background: var(--st); 

  opacity: 0.8; 

  transition: height 0.05s linear;

  z-index: 0;

}



.hold-content { position: relative; z-index: 2; text-align: center; pointer-events: none; }

.hold-ico { font-size: 24px; display: block; margin-bottom: 2px; text-shadow: 0 2px 10px rgba(0,0,0,0.5); }

.hold-main { font-family: 'Rajdhani'; font-weight: 800; font-size: 13px; color: #fff; letter-spacing: 1px; line-height: 1; text-transform: uppercase; }

.hold-sub { font-size: 8px; color: #888; margin-top: 4px; display: block; font-weight: bold; letter-spacing: 2px; }



.btn-hold.locked .hold-main, .btn-hold.locked .hold-sub { color: #000; }



  .btn{ width:100%; padding:18px; background:transparent; border:1px solid var(--st); color:var(--st); font-weight:bold; border-radius:8px; cursor:pointer; font-family:'Rajdhani'; letter-spacing:2px; transition:0.3s; }

  .btn:hover{ background:var(--st); color:#000; box-shadow:0 0 20px var(--st); }



  .v-mod{ display:none; position:fixed; inset:0; background:rgba(0,0,0,0.95); z-index:9999; align-items:center; justify-content:center; padding:20px; backdrop-filter:blur(5px); }

  .v-box{ width:100%; max-width:600px; border:1px solid var(--st); box-shadow:0 0 30px var(--st); background:#000; position:relative; }

  .iframe-wrap{ position:relative; padding-bottom:56.25%; height:0; overflow:hidden; } .iframe-wrap iframe{ position:absolute; top:0; left:0; width:100%; height:100%; border:none; }

  

  .aud{ display:none; width:100%; padding:12px; border:1px solid #fff; background:transparent; color:#fff; margin-top:10px; text-decoration:none; text-align:center; font-weight:bold; font-size:12px; border-radius:8px; cursor:pointer; }

  .modal{ display:none; position:fixed; inset:0; background:rgba(0,0,0,0.95); z-index:99; align-items:center; justify-content:center; padding:20px; }

  .box{ background:#12121a; border:1px solid var(--st); padding:20px; border-radius:12px; width:100%; max-width:400px; text-align:center; }

  

  #id-display { text-align:left; border-left:3px solid var(--st); padding-left:15px; margin-bottom:20px; color:#fff; font-size:14px; line-height:1.5; white-space:pre-wrap; }

  .boost-item { background: #1a1a25; border: 1px solid var(--st); padding: 10px; margin-bottom: 10px; border-radius: 6px; font-size: 13px; text-align: left; }

  input[type=text]{ width:100%; background:#000; border:1px solid #333; color:#fff; padding:10px; margin-bottom:10px; }



  @keyframes br{ 0%,100%{opacity:0.1;transform:scale(1)} 50%{opacity:0.2;transform:scale(1.1)} }

  @keyframes up{ from{transform:translateY(20px);opacity:0} to{transform:translateY(0);opacity:1} }

  @keyframes in{ from{opacity:0} to{opacity:1} }

  @keyframes p{ 0%{box-shadow:0 0 0 0 rgba(255,255,255,0.5)} 70%{box-shadow:0 0 0 10px rgba(0,0,0,0)} }

  @keyframes banim { 0%,100%{transform:scale(0.8);box-shadow:0 0 5px var(--blu)} 50%{transform:scale(1.3);box-shadow:0 0 30px var(--blu)} }

.launch-overlay {

  display: none;

  position: fixed; inset: 0;

  background: rgba(5, 5, 8, 0.96);

  z-index: 20000;

  flex-direction: column; align-items: center; justify-content: center;

  backdrop-filter: blur(5px);

  animation: fadeIn 0.3s ease-out;

}



.launch-card {

  width: 85%; max-width: 380px;

  background: linear-gradient(160deg, #0a1a15, #000);

  border: 1px solid #1a3a2a;

  border-top: 3px solid var(--grn); 

  border-bottom: 3px solid var(--grn);

  padding: 40px 25px;

  position: relative;

  box-shadow: 0 0 60px rgba(0, 255, 157, 0.15);

  text-align: center;

  clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);

}



.l-corner { position: absolute; width: 8px; height: 8px; border-color: var(--grn); border-style: solid; opacity: 0.7; }

.l-corner.tl { top: 0; left: 0; border-width: 1px 0 0 1px; }

.l-corner.tr { top: 0; right: 0; border-width: 1px 1px 0 0; }

.l-corner.bl { bottom: 0; left: 0; border-width: 0 0 1px 1px; }

.l-corner.br { bottom: 0; right: 0; border-width: 0 1px 1px 0; }



.launch-ico-wrap {

  width: 100px; height: 100px;

  margin: 0 auto 25px auto;

  color: var(--grn);

  filter: drop-shadow(0 0 15px rgba(0, 255, 157, 0.4));

}



.spin-slow { transform-origin: center; animation: spin 10s linear infinite; }

.pulse-tick { animation: blink 2s infinite; }

.draw-check {

  stroke-dasharray: 50; stroke-dashoffset: 50;

  animation: drawCheck 0.8s cubic-bezier(0.65, 0, 0.45, 1) forwards 0.3s;

}



@keyframes drawCheck { to { stroke-dashoffset: 0; } }

@keyframes spin { 100% { transform: rotate(360deg); } }

@keyframes blink { 0%,100% {opacity:1} 50% {opacity:0.5} }

@keyframes fadeIn { from {opacity:0} to {opacity:1} }



.launch-title {

  font-family: 'Rajdhani', sans-serif;

  font-weight: 800; font-size: 36px; color: #fff;

  letter-spacing: 2px; line-height: 1; margin-bottom: 5px;

  text-transform: uppercase;

  text-shadow: 0 0 20px rgba(0, 255, 157, 0.5);

}



.launch-sub {

  color: var(--grn);

  font-size: 11px; font-weight: bold;

  letter-spacing: 3px; margin-bottom: 25px;

}



.launch-text {

  font-family: 'Montserrat'; font-size: 13px; color: #aaa;

  line-height: 1.6; margin-bottom: 35px;

  border-top: 1px dashed #2a4a3a;

  border-bottom: 1px dashed #2a4a3a;

  padding: 15px 0;

}



.btn-go {

  width: 100%; padding: 18px;

  background: var(--grn);

  color: #000;

  font-family: 'Rajdhani'; font-weight: 800; font-size: 20px; letter-spacing: 2px;

  border: none; cursor: pointer;

  position: relative; overflow: hidden;

  clip-path: polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%, 0 15px);

  transition: transform 0.2s, box-shadow 0.2s;

}



.btn-go:hover {

  transform: scale(1.02);

  box-shadow: 0 0 30px rgba(0, 255, 157, 0.6);

}

.btn-go:active { transform: scale(0.98); }



.btn-go-glare {

  position: absolute; top: 0; left: -100%; width: 50%; height: 100%;

  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);

  transform: skewX(-20deg);

  animation: glare 3s infinite;

}



@keyframes glare {

  0% { left: -100%; } 20% { left: 200%; } 100% { left: 200%; }

}



@keyframes popIn { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } }

body.god-mode {

  animation: flowPulse 2s infinite alternate;

  --st: #ffffff;

}



body.god-mode .amb {

  opacity: 0.3;

  background: radial-gradient(circle at 50% 30%, #fff, transparent 60%);

  animation: none;

}



body.god-mode .card {

  border: 1px solid #fff;

  box-shadow: 0 0 40px rgba(255, 255, 255, 0.2);

  background: linear-gradient(135deg, #111, #222);

}



body.god-mode .btn-hold {

  border-color: #fff;

  box-shadow: 0 0 30px #fff;

}



@keyframes flowPulse {

  0% { background-color: #050508; }

  100% { background-color: #101515; }

}

.hero-box { 

  text-align: center; 

  margin-top: 10px; 

  margin-bottom: 30px; 

  animation: fadeInTitle 1s ease-out;

}



.hero-title { 

  font-family: 'Rajdhani', sans-serif; 

  font-weight: 800; 

  font-size: 42px;

  line-height: 1; 

  text-transform: uppercase; 

  letter-spacing: 2px; 

  color: #fff;

  

  text-shadow: 0 0 10px var(--hc), 0 0 20px var(--hc);

}



.hero-sub { 

  font-size: 10px; 

  color: var(--hc); 

  letter-spacing: 4px; 

  text-transform: uppercase; 

  font-weight: bold; 

  margin-top: 5px; 

  opacity: 0.8;

}



@keyframes fadeInTitle { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }



.audio-chip {

  margin-top: 15px;

  background: rgba(0,0,0,0.4);

  border: 1px solid #333;

  border-left: 3px solid var(--st);

  border-radius: 6px;

  padding: 12px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  cursor: pointer;

  transition: all 0.3s ease;

  position: relative;

  overflow: hidden;

}



.audio-chip:hover {

  background: rgba(255,255,255,0.05);

  border-color: var(--st);

  box-shadow: 0 0 15px var(--st);

}



.audio-chip.playing {

  background: linear-gradient(90deg, rgba(0,255,157,0.1), transparent);

  border-color: var(--st);

  box-shadow: 0 0 20px var(--st), inset 0 0 10px var(--st);

}



.ac-info {

  display: flex;

  flex-direction: column;

  z-index: 2;

}



.ac-title {

  font-family: 'Rajdhani';

  font-weight: 800;

  font-size: 12px;

  color: #fff;

  letter-spacing: 1px;

  text-transform: uppercase;

}



.ac-status {

  font-size: 9px;

  color: var(--st);

  font-weight: bold;

  margin-top: 2px;

  display: flex;

  align-items: center;

  gap: 5px;

}



.ac-control {

  width: 30px;

  height: 30px;

  border-radius: 50%;

  border: 1px solid var(--st);

  display: flex;

  justify-content: center;

  align-items: center;

  font-size: 10px;

  color: var(--st);

  background: #000;

  z-index: 2;

  transition: 0.2s;

}



.audio-chip.playing .ac-control {

  background: var(--st);

  color: #000;

  transform: scale(1.1);

}



.waveform {

  position: absolute;

  right: 50px;

  bottom: 10px;

  display: flex;

  align-items: flex-end;

  gap: 2px;

  height: 15px;

  opacity: 0;

  transition: opacity 0.3s;

}



.audio-chip.playing .waveform { opacity: 0.6; }



.bar {

  width: 3px;

  background: var(--st);

  animation: equalizer 0.5s infinite ease-in-out;

}



.bar:nth-child(1) { height: 40%; animation-duration: 0.4s; }

.bar:nth-child(2) { height: 80%; animation-duration: 0.5s; }

.bar:nth-child(3) { height: 50%; animation-duration: 0.3s; }

.bar:nth-child(4) { height: 90%; animation-duration: 0.6s; }

.bar:nth-child(5) { height: 30%; animation-duration: 0.4s; }



@keyframes equalizer {

  0% { height: 20%; }

  50% { height: 100%; }

  100% { height: 20%; }

}

.dock {

  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);

  display: flex; 

  gap: 6px;

  background: rgba(10, 10, 15, 0.95);

  padding: 10px 12px; 

  border-radius: 50px; 

  border: 1px solid #333;

  backdrop-filter: blur(10px); 

  z-index: 9000; 

  box-shadow: 0 10px 30px rgba(0,0,0,0.5);

  width: max-content;

  max-width: 95%;

}

.dock-item {

  width: 38px; 

  height: 38px; 

  border-radius: 50%;

  display: flex; 

  justify-content: center; 

  align-items: center;

  text-decoration: none; 

  font-size: 16px; 

    background: #1a1a1a; 

  border: 1px solid rgba(255,255,255,0.1); 

    transition: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);

  flex-shrink: 0;

    color: var(--ac); 

}





.dock-item svg {

  stroke: var(--ac);

  transition: 0.3s;

  filter: drop-shadow(0 0 3px var(--ac));

}





.dock-item:hover, .dock-item.active {

 

  background: var(--ac); 

  filter: none;

  box-shadow: 0 0 15px var(--ac); 

  border-color: var(--ac);

  

  transform: translateY(-5px) scale(1.1);

}





.dock-item:hover svg, .dock-item.active svg {

  stroke: #000000;

}

body { padding-bottom: 100px; }



#sos-overlay {

  display: none;

  position: fixed; inset: 0;

  background: #000;

  z-index: 20000;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  padding: 20px;

  text-align: center;

}



.sos-circle {

  width: 200px; height: 200px;

  border-radius: 50%;

  border: 2px solid rgba(255,255,255,0.1);

  display: flex; justify-content: center; align-items: center;

  position: relative;

  margin: 40px 0;

}



.sos-inner {

  width: 20px; height: 20px;

  background: var(--grn);

  border-radius: 50%;

  box-shadow: 0 0 30px var(--grn);

  transition: all 0.5s ease-in-out;

}



.s-in { animation: box-in 4s ease-in-out forwards; }

.s-hold { animation: box-hold 4s linear forwards; }

.s-out { animation: box-out 4s ease-in-out forwards; }

.s-wait { animation: box-wait 4s linear forwards; }



@keyframes box-in { from { transform: scale(1); opacity: 0.3; } to { transform: scale(7); opacity: 0.9; } }

@keyframes box-hold { 0% { transform: scale(7); opacity: 0.9; } 100% { transform: scale(7); opacity: 0.9; } }

@keyframes box-out { from { transform: scale(7); opacity: 0.9; } to { transform: scale(1); opacity: 0.3; } }

@keyframes box-wait { 0% { transform: scale(1); opacity: 0.3; } 100% { transform: scale(1); opacity: 0.3; } }



.sos-txt {

  font-family: 'Rajdhani'; font-weight: 800; font-size: 24px;

  color: #fff; margin-top: 20px; letter-spacing: 2px;

}



.sos-instr {

  font-size: 14px; color: #888; margin-bottom: 5px;

  max-width: 300px; line-height: 1.5;

}

@keyframes shake-attention {

  0%, 100% { transform: translateX(0); border-color: #333; }

  25% { transform: translateX(-5px); border-color: var(--red); box-shadow: 0 0 15px var(--red); }

  75% { transform: translateX(5px); border-color: var(--red); box-shadow: 0 0 15px var(--red); }

}



.attention-please {

  animation: shake-attention 0.4s ease-in-out;

}

.i-btn {

  background: transparent;

  border: 1px solid #444;

  color: #666;

  width: 18px; height: 18px;

  border-radius: 50%;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  font-size: 10px;

  font-weight: bold;

  margin-left: 8px;

  cursor: pointer;

  font-family: 'Rajdhani', sans-serif;

  transition: 0.2s;

}

.i-btn:hover {

  border-color: var(--st);

  color: var(--st);

  transform: scale(1.1);

}

 #sys-tut-layer { display:none; position:fixed; inset:0; z-index:10000; pointer-events:none; }



#sys-tut-mask { 

  position:absolute; inset:0; 

  background: rgba(0,0,0,0.85); 

  transition: 0.4s ease;

  clip-path: polygon(0% 0%, 0% 100%, 0% 100%, 0% 0%);

}



#sys-tut-focus {

  position: fixed; 

  border: 2px solid #00ff9d; 

  box-shadow: 0 0 30px #00ff9d, inset 0 0 20px rgba(0, 255, 157, 0.2);

  border-radius: 8px;

  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);

  pointer-events: none;

  z-index: 10002;

  opacity: 0;

}



#sys-tut-msg {

  position: absolute;

  left: 50%;

  transform: translateX(-50%);

  width: 90%;

  max-width: 400px;

  background: #0a0a0e;

  border: 1px solid #00ff9d;

  padding: 20px;

  border-radius: 12px;

  color: #fff;

  font-family: 'Montserrat', sans-serif;

  font-size: 13px;

  line-height: 1.5;

  z-index: 10003;

  pointer-events: auto;

  text-align: center;

  box-shadow: 0 10px 40px rgba(0,0,0,0.8);

  

  transition: opacity 0.3s ease, top 0.3s ease, bottom 0.3s ease;

  opacity: 0; 

}



.t-bot {

  bottom: 100px;

  top: auto;

}



.t-top {

  top: 100px;

  bottom: auto;

}



  .tut-head { color: #00ff9d; font-family: 'Rajdhani'; font-weight: 800; font-size: 18px; text-transform: uppercase; margin-bottom: 8px; letter-spacing: 1px; }

  .tut-controls { display: flex; gap: 10px; margin-top: 20px; justify-content: center; }

  

  .btn-tut { 

    padding: 10px 20px; border: none; border-radius: 6px; 

    font-family: 'Rajdhani'; font-weight: bold; cursor: pointer; font-size: 14px; 

  }

  .btn-tut-next { background: #00ff9d; color: #000; flex: 2; }

  .btn-tut-skip { background: transparent; border: 1px solid #444; color: #888; flex: 1; }

  

  @keyframes slideUp { from{opacity:0; transform:translate(-50%, 20px)} to{opacity:1; transform:translate(-50%, 0)} }

.ins-bar {

  display: flex;

  align-items: center;

  gap: 10px;

  background: rgba(255, 255, 255, 0.03);

  border: 1px solid rgba(255, 255, 255, 0.1);

  border-left: 3px solid var(--st);

  padding: 10px 15px;

  margin: 0 auto 20px auto;

  border-radius: 6px;

  max-width: 100%;

  transition: 0.3s;

}



.ins-icon {

  font-size: 16px;

  opacity: 0.8;

  animation: pulse-slow 3s infinite;

}



.ins-text {

  font-family: 'Montserrat', sans-serif;

  font-size: 11px;

  color: #ccc;

  line-height: 1.4;

  text-align: left;

}



.ins-text strong {

  color: #fff;

  font-family: 'Rajdhani';

  text-transform: uppercase;

  letter-spacing: 1px;

}



@keyframes pulse-slow {

  0%, 100% { opacity: 0.5; transform: scale(1); }

  50% { opacity: 1; transform: scale(1.1); }

}

.neural-card {

  background: linear-gradient(135deg, #050508, #1a1a20);

  border: 1px solid var(--st);

  box-shadow: 0 0 50px rgba(0, 255, 157, 0.1), inset 0 0 30px rgba(0,0,0,0.8);

  border-radius: 12px;

  padding: 30px 20px;

  width: 90%; max-width: 420px;

  text-align: center;

  position: relative;

  overflow: hidden;

  animation: modalPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);

}



.neural-bg-anim {

  position: absolute; inset: 0; 

  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.05), transparent 70%);

  animation: pulse-slow 4s infinite; z-index: 0; pointer-events: none;

}



.neural-header {

  position: relative; z-index: 2;

  font-family: 'Rajdhani', sans-serif; font-weight: 800; font-size: 28px;

  color: #fff; text-transform: uppercase; letter-spacing: 2px;

  margin-bottom: 5px;

  text-shadow: 0 0 20px var(--st);

}



.neural-sub {

  position: relative; z-index: 2;

  font-size: 10px; color: var(--st); letter-spacing: 3px; font-weight: bold;

  margin-bottom: 30px; border-bottom: 1px solid rgba(255,255,255,0.1);

  display: inline-block; padding-bottom: 5px;

}



.memory-node {

  background: rgba(255, 255, 255, 0.03);

  border-left: 3px solid #444;

  padding: 15px; margin-bottom: 12px;

  text-align: left; position: relative; z-index: 2;

  border-radius: 0 6px 6px 0;

  transition: 0.3s;

  animation: slideInNode 0.5s ease-out backwards;

}



.memory-node.is-fav {

  border-left-color: var(--st);

  background: linear-gradient(90deg, rgba(255,255,255,0.05), transparent);

  box-shadow: -5px 0 15px rgba(0,0,0,0.2);

}



.mn-icon { font-size: 14px; margin-right: 8px; }

.mn-text { font-size: 13px; color: #ddd; line-height: 1.4; font-weight: 500; }



@keyframes modalPop { 0%{opacity:0; transform:scale(0.8)} 100%{opacity:1; transform:scale(1)} }

@keyframes slideInNode { 0%{opacity:0; transform:translateY(10px)} 100%{opacity:1; transform:translateY(0)} }

#bst-ovr, #id-ovr {

  position: fixed;

  top: 0; 

  left: 0; 

  width: 100%; 

  height: 100%;

  background: rgba(0,0,0,0.95);

  z-index: 9999;

  

  display: none;

  align-items: center; 

  justify-content: center;

  

  padding: 20px;

  box-sizing: border-box; 

  overflow-y: auto;

}

.mn-label {

  display: block;

  font-size: 9px;

  color: var(--grn);

  font-weight: 800;

  letter-spacing: 1px;

  text-transform: uppercase;

  margin-bottom: 4px;

  font-family: 'Rajdhani', sans-serif;

}

.archetype-box {

  text-align: center;

  margin-bottom: 25px;

  padding-bottom: 20px;

  border-bottom: 1px solid rgba(0,255,157,0.3);

  position: relative;

}



.archetype-label {

  font-size: 10px; 

  color: var(--grn); 

  letter-spacing: 3px; 

  font-weight: bold; 

  margin-bottom: 5px;

  text-transform: uppercase;

  opacity: 0.8;

}



.archetype-word {

  font-family: 'Rajdhani', sans-serif;

  font-size: 38px;

  font-weight: 800;

  color: #fff;

  text-transform: uppercase;

  letter-spacing: 4px;

  line-height: 1;

  text-shadow: 0 0 20px var(--grn), 0 0 40px rgba(0, 255, 157, 0.4);

  animation: pulse-arch 3s infinite alternate;

}



@keyframes pulse-arch {

  0% { transform: scale(1); text-shadow: 0 0 20px var(--grn); }

  100% { transform: scale(1.05); text-shadow: 0 0 30px var(--grn), 0 0 50px var(--grn); }

}







.audio-card {

  background: linear-gradient(90deg, #1a1a20, #0d0d10);

  border: 1px solid #333;

  border-left: 4px solid var(--blu);

  border-radius: 8px;

  padding: 15px;

  margin-bottom: 15px;

  display: flex;

  align-items: center;

  gap: 15px;

  cursor: pointer;

  position: relative;

  overflow: hidden;

  transition: all 0.3s ease;

}



.audio-card:active { transform: scale(0.98); }



.ac-visual {

  width: 44px; height: 44px;

  background: rgba(255,255,255,0.05);

  border-radius: 50%;

  display: flex; align-items: center; justify-content: center;

  position: relative;

  flex-shrink: 0;

  transition: 0.3s;

}



.ac-play-icon { font-size: 14px; color: #fff; z-index: 2; transition:0.3s; }



.ac-info { flex: 1; }

.ac-cat { font-size: 9px; font-weight: bold; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 2px; }

.ac-title { font-family: 'Rajdhani', sans-serif; font-size: 17px; font-weight: 700; color: #fff; }

.ac-sub { font-size: 10px; color: #666; }



.audio-card.playing {

  background: #222;

  border-color: #555;

}



.audio-card.playing .ac-visual {

  background: rgba(255,255,255,0.1);

  box-shadow: 0 0 15px rgba(255,255,255,0.1);

}



.audio-card.playing .ac-play-icon {

  opacity: 0;

}



.ac-wave-anim {

  position: absolute; inset: 0; border-radius: 50%;

  border: 2px solid transparent;

  border-top-color: #fff; border-bottom-color: #fff;

  animation: spin-audio 1.5s linear infinite;

  display: none;

}

.audio-card.playing .ac-wave-anim { display: block; }

.audio-card.playing .ac-wave-static { display: none; }



.ac-wave-static { font-size: 8px; color: #444; letter-spacing: -1px; }



@keyframes spin-audio { 0% {transform: rotate(0deg);} 100% {transform: rotate(360deg);} }

.scan-body { 

  width: 120px; 

  height: 200px; 

  position: relative; 

  margin: 20px auto;

  opacity: 0.8; 

  border: 2px solid #333; 

  border-radius: 40px; 

  background: rgba(255, 255, 255, 0.02);

}



.scan-line { 

  width: 140%; 

  height: 2px; 

  background: var(--grn); 

  box-shadow: 0 0 10px var(--grn); 

  position: absolute; 

  left: -20%; 

  animation: scanning 3s infinite linear; 

}



@keyframes scanning { 

  0% { top: 95%; } 

  50% { top: 5%; } 

  100% { top: 95%; } 

}

.card-svg {

  width: 24px;

  height: 24px;

  fill: none;

  stroke: var(--st);

  stroke-width: 2;

  stroke-linecap: round;

  stroke-linejoin: round;

  vertical-align: bottom;

  margin-right: 8px;

  filter: drop-shadow(0 0 5px var(--st));

}



.final-zone {

  display: none;

  margin-top: 30px;

  animation: slideUpFade 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);

}



@keyframes slideUpFade { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }



.fz-header {

  display: flex; align-items: center; justify-content: center; gap: 10px;

  margin-bottom: 20px; opacity: 0.6;

}

.fz-line { height: 1px; background: #444; flex: 1; }

.fz-title { font-family: 'Rajdhani'; font-weight: 800; font-size: 10px; letter-spacing: 2px; color: #888; }



.launch-grid {

  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;

  margin-bottom: 25px;

}



.fz-module {

  position: relative;

  background: rgba(20, 20, 25, 0.6);

  border: 1px solid #333;

  border-left: 3px solid var(--st); 

  padding: 15px 12px;

  border-radius: 6px;

  text-align: left;

  cursor: pointer;

  overflow: hidden;

  transition: all 0.3s ease;

  display: flex; flex-direction: column; justify-content: space-between; height: 100px;

}



.fz-module:hover {

  background: rgba(255, 255, 255, 0.05);

  transform: translateY(-3px);

  box-shadow: 0 5px 15px rgba(0,0,0,0.3);

  border-color: #555;

}



.fz-corner {

  position: absolute; top: 0; right: 0;

  width: 0; height: 0;

  border-style: solid;

  border-width: 0 20px 20px 0;

  border-color: transparent rgba(255,255,255,0.05) transparent transparent;

}



.fz-icon {

  color: var(--st);

  margin-bottom: auto;

  filter: drop-shadow(0 0 5px var(--st));

}



.fz-lbl { font-size: 9px; color: #666; font-weight: bold; letter-spacing: 1px; margin-bottom: 2px; }

.fz-name { font-family: 'Rajdhani'; font-weight: 800; font-size: 13px; color: #fff; text-transform: uppercase; line-height: 1.1; }



.fz-arrow {

  position: absolute; bottom: 10px; right: 10px;

  color: #444; font-weight: bold; font-family: 'Rajdhani';

  transition: 0.3s;

}

.fz-module:hover .fz-arrow { color: #fff; transform: translateX(3px); }





.fz-switch-box {

  background: #111;

  border: 1px solid #333;

  border-radius: 12px;

  padding: 15px 20px;

  margin-bottom: 30px;

  display: flex; align-items: center; gap: 20px;

  cursor: pointer;

  transition: 0.3s;

}



.fz-switch-visual {

  position: relative;

  width: 44px; height: 24px;

  flex-shrink: 0;

}



.fz-track {

  position: absolute; top: 4px; left: 0;

  width: 100%; height: 16px;

  background: #222; border-radius: 10px;

  border: 1px solid #444;

  transition: 0.3s;

}



.fz-knob {

  position: absolute; top: 0; left: 0;

  width: 24px; height: 24px;

  background: #666;

  border-radius: 50%;

  box-shadow: 0 2px 5px rgba(0,0,0,0.5);

  transition: 0.3s cubic-bezier(0.5, 1.5, 0.5, 1);

}



.fz-sw-head { font-family: 'Rajdhani'; font-weight: 800; font-size: 10px; color: #666; letter-spacing: 1px; margin-bottom: 2px; }

.fz-sw-body { font-size: 12px; color: #aaa; font-weight: 600; line-height: 1.2; }



.fz-switch-box.checked {

  background: rgba(255, 255, 255, 0.03);

  border-color: var(--st);

  box-shadow: 0 0 20px rgba(0,0,0,0.2);

}



.fz-switch-box.checked .fz-track {

  background: var(--st);

  border-color: var(--st);

  opacity: 0.3;

}



.fz-switch-box.checked .fz-knob {

  background: var(--st);

  left: 20px;

  box-shadow: 0 0 10px var(--st);

}



.fz-switch-box.checked .fz-sw-head { color: var(--st); }

.fz-switch-box.checked .fz-sw-body { color: #fff; }



@keyframes shake-attention {

  0%, 100% { transform: translateX(0); border-color: #333; }

  25% { transform: translateX(-5px); border-color: var(--red); }

  75% { transform: translateX(5px); border-color: var(--red); }

}

.attention-please { animation: shake-attention 0.4s ease-in-out; }