
:root, html[data-theme]{
  --ink:    #0b0a0e;              
  --ink-2:  #100f15;
  --card:   #16151c;
  --card-2: #1e1d26;
  --line:   rgba(255,255,255,.09);
  --line-2: rgba(255,255,255,.16);
  --text:   #f4f1e8;
  --muted:  #a8a5b4;
  --faint:  #9a97a8;             
  --acc:    #7fd0ff;              
  --acc-hov:#a4deff;
  --acc-ink:#06131f;
  --acc2:   #ff6f7d;
  --r:      22px;                 
  --r-s:    14px;
  --shadow: 0 30px 80px rgba(0,0,0,.55);
}



.nav{ position:static; background:transparent; border-bottom:0;
  -webkit-backdrop-filter:none; backdrop-filter:none }


.nav-in{ position:relative }
.nav-links{
  gap:1.9rem; font-size:.95rem;
  height:3rem; padding:0 1.75rem; align-items:center;
  border-radius:9999px;
  border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.06);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
}
.nav-links a{ white-space:nowrap; transition:color 150ms ease }
.nav-links a.on{ color:var(--text) }

.nav-in{ display:grid; grid-template-columns:1fr auto 1fr; gap:16px }
.nav-in > .logo{ justify-self:start }
.nav-in > .nav-links{ justify-self:center }
.nav-in > .nav-right{ justify-self:end; margin-left:0 }


.logo{ font-size:1.375rem; letter-spacing:-.02em }


.card{
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.018));
  border:1px solid rgba(255,255,255,.1);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
}


.btn{ font-weight:600; letter-spacing:.005em }
.btn-ghost{ border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.05) }
.btn-ghost:hover{ background:rgba(255,255,255,.09) }


h1, h2{ font-weight:500; letter-spacing:-.025em }


input, textarea, select{ border-radius:var(--r-s) }


select option, select optgroup{ background-color:#16151c; color:#f4f1e8 }
select option:disabled{ color:#6f6c7d }


input[type=file]{ color:var(--muted); font-size:12.5px }
input[type=file]::file-selector-button{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16);
  color:var(--text); border-radius:10px; padding:7px 13px; margin-right:10px;
  font:inherit; font-size:12.5px; font-weight:600; cursor:pointer; transition:.15s;
}
input[type=file]::file-selector-button:hover{
  background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.28);
}


.themer{ display:none !important }


.chips button.go{ background:var(--acc); color:var(--acc-ink) }


.panel{ background:var(--ink) }
.panel-scroll{ padding:22px 20px }
.panel h1{ font-weight:500; letter-spacing:-.02em }

.grp{
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.018));
  border:1px solid rgba(255,255,255,.1);
  border-radius:18px; padding:16px 16px 18px; margin-bottom:14px;
}

.grp>label:first-child{ margin-top:0 }


.seg{ background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.12); border-radius:16px }
.drop{ border-radius:16px; background:rgba(255,255,255,.03); border-color:rgba(255,255,255,.16) }
.filepick{ border-radius:14px }


.panel .btn-acc{ border-radius:999px; font-weight:600 }


@media (max-width: 1279px){
  .nav-in{ display:flex; align-items:center; gap:16px }
  .nav-in > .logo,
  .nav-in > .nav-links,
  .nav-in > .nav-right{ justify-self:auto }
  .nav-in > .nav-links{ margin:0 auto }
  .nav-in > .nav-right{ margin-left:auto }
}


@media (max-width: 1359px){
  .nav-links{ display:none }
  .burger{ display:flex }
  .m-only{ display:inline-flex }
}


.panel h1 .tut-open{ margin-right:46px }
@media (max-width:720px){ .panel h1 .tut-open{ margin-right:0 } }
