@import"https://fonts.googleapis.com/css2?&family=Bitcount+Grid+Double+Ink:wght@100..900";:root{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.5;color:#f8f8f2;background:#282a36}*{box-sizing:border-box}body{margin:0}h1{font-size:2rem;margin:0 0 1rem}#root{max-width:1200px;margin:0 auto;padding:2rem}body{margin:0;font-family:Bitcount Grid Double Ink,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:#121217;color:#f8f8f2;display:flex;flex-direction:column;align-items:center;min-height:100vh;padding:1rem}.heading{text-align:center;font-size:48px}:root{--drac-bg: #282a36;--drac-surface: #1e1f29;--drac-border: #44475a;--drac-fg: #f8f8f2;--drac-subtle: #6272a4;--drac-cyan: #8be9fd;--drac-green: #50fa7b;--drac-orange: #ffb86c;--drac-pink: #ff79c6;--drac-purple: #bd93f9;--drac-yellow: #f1fa8c;--neon-cyan: 0 0 8px rgba(139, 233, 253, .6), 0 0 16px rgba(139, 233, 253, .35);--neon-purple: 0 0 8px rgba(189, 147, 249, .6), 0 0 16px rgba(189, 147, 249, .35);--glass-border: rgba(248, 248, 242, .08);--glass-bg: rgba(40, 42, 54, .55)}.sliding-menu-container{width:80vw;margin:2rem auto;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--drac-fg)}.menu{background:#fff;border-radius:8px;box-shadow:0 2px 12px #00000014;padding:.5rem 0;display:flex;flex-direction:row;justify-content:center;gap:.5rem}.menu-item{width:auto;min-width:100px;background:none;border:none;text-align:center;padding:1rem 1.5rem;font-size:1.1rem;cursor:pointer;outline:none;transition:background .2s;border-radius:6px 6px 0 0}.menu-item.active,.menu-item:hover{background:#f0f4fa}.menu-bar{display:flex;flex-direction:row;justify-content:center;gap:.5rem;background:linear-gradient(180deg,var(--drac-surface),#151621 60%);border:1px solid var(--drac-border);border-bottom:none;border-radius:12px 12px 0 0;padding:.5rem .25rem;box-shadow:var(--neon-cyan),var(--neon-purple),0 8px 24px #00000073 inset;position:relative;overflow:hidden}.menu-bar:after{content:"";position:absolute;inset:-100% -50% auto;height:120%;background:radial-gradient(120px 12px at 50% 0%,#8be9fd12,#0000 60%) repeat-x;mix-blend-mode:screen;opacity:.4;pointer-events:none}.menu-bar-item{color:var(--drac-fg);min-width:100px;background:linear-gradient(180deg,#ffffff08,#fff0);border:1px solid var(--drac-border);border-bottom:none;text-align:center;padding:.9rem 1.25rem;font-size:1.05rem;cursor:pointer;outline:none;transition:background .18s ease,box-shadow .18s ease,color .18s ease,transform .12s ease;border-radius:8px 8px 0 0;text-shadow:0 0 6px rgba(248,248,242,.15);position:relative}.menu-bar-item:hover{color:var(--drac-cyan);box-shadow:var(--neon-cyan)}.menu-bar-item.active{color:var(--drac-purple);background:linear-gradient(180deg,#bd93f91f,#fff0);box-shadow:var(--neon-purple)}.menu-bar-item:focus-visible{outline:2px solid var(--drac-cyan);outline-offset:2px}.submenu{height:0;overflow:hidden;background:var(--glass-bg);-webkit-backdrop-filter:blur(10px) saturate(140%);backdrop-filter:blur(10px) saturate(140%);transition:height 1s cubic-bezier(.7,0,.3,1);will-change:height;border-radius:0 0 12px 12px;border:1px solid var(--glass-border);border-top:1px solid var(--drac-border);box-shadow:var(--neon-cyan),var(--neon-purple),0 16px 48px #00000073;margin-bottom:1.5rem;padding:0;position:relative;z-index:10}.submenu:before{content:"";position:absolute;inset:0;background:radial-gradient(120px 80px at 10% 20%,rgba(139,233,253,.12),transparent 60%),radial-gradient(140px 90px at 80% 10%,rgba(189,147,249,.12),transparent 60%),radial-gradient(110px 70px at 30% 80%,rgba(80,250,123,.1),transparent 60%),conic-gradient(from 180deg at 50% 50%,#ffb86c14,#ff79c614,#f1fa8c14,#ffb86c14);mix-blend-mode:screen;pointer-events:none;opacity:.6}.submenu ul{margin:0;padding:1.5rem 2rem;list-style:none;display:block;column-gap:2.5rem}.submenu li{min-width:160px;margin-bottom:.75rem;font-size:1.05rem;color:var(--drac-fg);background:linear-gradient(180deg,#ffffff0f,#ffffff05);border:1px solid var(--drac-border);border-radius:8px;padding:.55rem 1rem;box-shadow:0 1px 2px #00000040,0 0 10px #0000001f inset;transition:background .16s ease,color .16s ease,transform .12s ease,box-shadow .16s ease;cursor:pointer;break-inside:avoid-column;display:inline-block;width:100%;box-sizing:border-box}.submenu li:hover{color:var(--drac-yellow);background:linear-gradient(180deg,#f1fa8c2b,#ffffff08);box-shadow:0 0 10px #f1fa8c59,0 0 20px #bd93f940}.submenu li:active{transform:translateY(1px)}@media (min-width: 400px){.submenu.open ul{columns:2}}@media (min-width: 700px){.submenu.open ul{columns:3}}@media (min-width: 1000px){.submenu.open ul{columns:4}}.submenu-inner{opacity:0;transition:opacity .18s ease-in-out}.submenu.open .submenu-inner{opacity:1}