.toggle-stv, .toggle-std { z-index:4 }
#nav-studio { z-index:7 }
#nav-verse, #strikra { z-index:8 }
.submenu { z-index:9 }
.mini-menu { z-index:11 }
.mini-submenu { z-index:12 }

:root { --th:rgb(45,45,45); --bg:rgb(245,245,245); --bg-card:rgb(234,234,234); --tx:rgb(24,24,24); --tx-muted:rgb(51,51,51); --bd:rgb(234,234,234) }
body.kate { --th:rgb(195,19,19) }
body.bo { --th:rgb(19,195,19) }
body.zu { --th:rgb(19,19,195) }
body.hector { --th:rgb(195,195,19) }
body.gaia { --th:rgb(195,125,45) }
body.uli { --th:rgb(195,125,45) }
body.vera { --th:rgb(91,91,91) }
body.skan { --th:rgb(45,45,45) }

body { background:var(--bg); color:var(--tx) }
button { background:var(--th); color:var(--bg) }
code { background:var(--bd); color:var(--th); border:1px solid var(--bd) }
.slider { background-color:rgb(199, 199, 199) }
.slider:before { background-color:var(--bg) }
input:checked + .slider { background-color:var(--th) }
.switch::after { background-color:transparent; color:rgb(91,91,91) }
.switch::before { border-top-color:var(--th) }
.tripundra div { background:var(--bd) }
#std-title { background: linear-gradient(to right, var(--th), var(--tx-muted)); -webkit-background-clip:text; -webkit-text-fill-color:transparent }
.mini-menu { background:var(--bg); border:1px solid var(--bd); box-shadow:0 4px 6px rgba(0,0,0,0.1) }
.mini-menu nav { color:var(--tx-muted); border-bottom:1px solid var(--bd) }
.mini-menu nav:hover { color:var(--th); background:var(--bd) }
.mini-item { color:var(--tx-muted) }
.mini-item:hover { background:var(--bd); color:var(--th) }
.mini-submenu { background:var(--bg); border:1px solid var(--bd); box-shadow:5px 5px 15px rgba(0,0,0,0.1) }
.mini-submenu nav:hover { background:var(--bd); color:var(--th) }
#nav-verse { background:var(--bg)}
.nav-item { color:var(--tx-muted) }
.nav-item:hover, #ui-pkg { color:var(--th) }
.submenu { background:var(--bg); border:1px solid var(--bd); box-shadow:0 10px 15px -3px rgba(0,0,0,0.1) }
.submenu nav:hover { background:var(--bd); color:var(--th) }
.toggle-stv { background:var(--bg); color:var(--tx-muted) }
#nav-studio { background:var(--bg) }
.toggle-std { background:var(--bg); color:var(--tx-muted) }
.grp-head { background:var(--bd) }

:root { --nav-height:64px; --swarm-width:250px; --transition:all 0.2s cubic-bezier(0.4, 0, 0.2, 1) }
body { display:flex; flex-direction:column; font-family:"Segoe UI", system-ui, sans-serif; height:100vh; width:100vw; margin:0; padding:0; overflow:hidden }
button { padding:8px; margin:8px; border-radius:8px; border:none; font-weight:bold; transition:var(--transition); cursor:pointer }
button:hover { filter:brightness(1.1) }
input, textarea, select { width:100%; padding:8px; margin:8px; border:1px solid var(--bd); border-radius:8px; font-size:14px }
img { width:20%; height:auto; max-height:auto }
code { display:block; padding:10px; margin:10px 0; border-radius:8px; word-break:break-all; font-size:12px }
.switch { position:relative; display:inline-block; width:40px; height:22px }
.switch input { opacity:0; width:0; height:0 }
.slider { position:absolute; top:0; left:0; right:0; bottom:0; border-radius:22px; transition:.4s; cursor:pointer }
.slider:before { position:absolute; content:""; height:16px; width:16px; left:3px; bottom:3px; border-radius:50%; transition:.4s }
input:checked + .slider:before { transform:translateX(18px) }
.switch::after { position:absolute; content:attr(data-tooltip); bottom:120%; left:50%; transform:translateX(-50%); font-size:12px; white-space:nowrap; opacity:0; visibility:hidden; transition:opacity 0.2s; pointer-events:none }
.switch::before { position:absolute; content:""; bottom:120%; left:50%; transform:translateX(-50%); opacity:0; visibility:hidden; transition:opacity 0.2s }
.switch:hover::after, .switch:hover::before { opacity:1; visibility:visible }
.tripundra div { width:35px; height:5px; margin:4px 0 }
#std-title { font-size:1.3rem; margin:50px } 
.mini-menu { display:none }
#nav-verse { position:relative; display:flex; align-items:center; padding:0 15px; height:var(--nav-height); transition:var(--transition) }
#nav-verse.collapsed { transform:translateY(-100%); margin-bottom:calc(var(--nav-height) * -1) }
.nav-item { position:relative; margin-right:25px; font-weight:bold; font-size:14px; cursor:pointer }
.submenu { position:absolute; display:none; top:100%; left:0; padding:8px; border-radius:8px; min-width:180px }
.nav-item:hover .submenu { display:block; animation:fadeIn 0.2s ease }
.submenu nav { padding:10px 12px; border-radius:6px; font-size:13px; transition:var(--transition) }
.toggle-stv { position:absolute; border:1px solid var(--bd); bottom:-20px; left:44%; border-top:none; padding:2px 16px; border-radius:0 0 10px 10px; font-size:10px; font-weight:bold; cursor:pointer }
#nav-studio { position:relative; display:flex; flex-direction:column; width:var(--swarm-width); border-left:1px solid var(--bd); transition:var(--transition) }
#nav-studio.collapsed { margin-right:calc(var(--swarm-width) * -1) }
.toggle-std { position:absolute; left:-45px; top:50%; border:1px solid var(--bd); border-bottom:none; padding:2px 10px; border-radius:10px 10px 0 0; font-size:10px; font-weight:bold; transform:translateY(-50%) rotate(-90deg); transform-origin:bottom center; cursor:pointer }
.menu-grp { overflow:hidden }
.grp-head { padding:15px; font-weight:700; font-size:13px; cursor:pointer }
.grp-body { display:none; padding:15px; border-top:1px solid var(--bd) }
.grp-body.active { display:block }
#copyright { margin-top:auto; padding:5px; text-align:center; font-size:10px }
.col2, .col3, .col4, .col5, .col6, .col8, .col10 { display:grid; gap:8px }
.col2 { grid-template-columns:repeat(2, 1fr) }
.col3 { grid-template-columns:repeat(3, 1fr) }
.col4 { grid-template-columns:repeat(4, 1fr) }
.col5 { grid-template-columns:repeat(5, 1fr) }
.col6 { grid-template-columns:repeat(6, 1fr) }
.col8 { grid-template-columns:repeat(8, 1fr) }
.col10 { grid-template-columns:repeat(10, 1fr) }
.w100 { width:100% }
* { -ms-overflow-style:none; scrollbar-width:none }
*::-webkit-scrollbar { display:none }

@keyframes fadeIn { from { opacity:0 } to { opacity:1 } }
@media (max-width:1280px) { 
    .nav-item { display:none !important }
    #strikra { width:50% !important; transform:translateY(-50%) }
    #logo { position:relative; cursor:pointer }
    #logo:hover .mini-menu { position:absolute; display:block; top:80%; left:50%; width:max-content; height:max-content; min-width:150px; min-height:auto }
    .mini-menu nav, .mini-submenu nav { font-weight:bold; white-space:nowrap; cursor:pointer }
    .mini-menu nav:last-child { border-bottom:none }
    .mini-item { position:relative; display:flex; padding:12px; font-weight:bold; justify-content:space-between; align-items:center; white-space:nowrap }
    .mini-submenu { position:absolute; display:none; top:0; left:120% }
    .mini-item:hover .mini-submenu { display:block; padding:15px; width:max-content; height:max-content; min-width:100px; min-height:auto; animation:fadeIn 0.2s ease }
}