@import "https://fonts.googleapis.com/css2?family=Anuphan:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap";.topbar{z-index:40;-webkit-backdrop-filter:blur(16px);border-bottom:var(--glass-border);text-align:center;background:#18181bbf;justify-content:center;align-items:center;padding:16px 20px;display:flex;position:sticky;top:0}.topbar h2{color:var(--text-main);background:linear-gradient(135deg,#c4b5fd,#d946ef);-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-size:20px;font-weight:700}.topbar .sub{color:var(--text-muted);margin-top:2px;font-size:13px}.bottom-nav{-webkit-backdrop-filter:blur(24px);padding:16px 12px calc(16px + env(safe-area-inset-bottom));z-index:40;border-top:var(--glass-border);background:#18181bd9;justify-content:space-around;display:flex;position:fixed;bottom:0;left:0;right:0}@media (width>=820px){.bottom-nav{border-radius:0 0 var(--radius-lg) var(--radius-lg);border-top:var(--glass-border);padding:16px;position:absolute;bottom:0}}.bottom-nav button{color:var(--text-muted);background:0 0;border-radius:16px;flex-direction:column;flex:1;align-items:center;gap:6px;padding:8px;font-size:11.5px;font-weight:600;display:flex}.bottom-nav button:hover{color:var(--text-main)}.bottom-nav button.on{color:var(--primary-light);background:#8b5cf626}.bottom-nav svg{width:24px;height:24px;transition:transform .3s}.bottom-nav button.on svg{filter:drop-shadow(0 0 8px #8b5cf680);transform:scale(1.15)}:root{--bg-dark:#09090b;--bg-panel:#18181ba6;--bg-panel-solid:#18181b;--bg-panel-hover:#27272acc;--primary:#8b5cf6;--primary-hover:#7c3aed;--primary-light:#c4b5fd;--primary-soft:#8b5cf626;--accent:#d946ef;--text-main:#f8fafc;--text-muted:#a1a1aa;--border:#ffffff14;--glass-border:1px solid #ffffff0f;--radius-sm:12px;--radius-md:20px;--radius-lg:32px;--shadow-glow:0 0 20px #8b5cf64d;--shadow-panel:0 8px 32px #0006}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}body{background-color:var(--bg-dark);color:var(--text-main);-webkit-font-smoothing:antialiased;background-image:radial-gradient(circle at 15% 10%,#8b5cf614,#0000 40%),radial-gradient(circle at 85% 80%,#d946ef0d,#0000 40%);background-attachment:fixed;min-height:100dvh;font-family:Anuphan,Inter,sans-serif}::-webkit-scrollbar{width:0;height:0}#root{background-color:#0000;flex-direction:column;max-width:520px;min-height:100dvh;margin:0 auto;display:flex;position:relative}@media (width>=820px){body{background-color:#000;justify-content:center;align-items:center;display:flex}#root{border-radius:var(--radius-lg);border:var(--glass-border);background-color:var(--bg-dark);width:100%;max-width:440px;height:88vh;min-height:auto;overflow:hidden;box-shadow:0 24px 80px #8b5cf626}}.page-content{flex:1;padding-bottom:100px;overflow-y:auto}h1,h2,h3,h4{letter-spacing:-.01em;font-weight:700}a{color:var(--primary-light);text-decoration:none;transition:color .2s}a:hover{color:var(--primary)}button{cursor:pointer;color:inherit;border:none;font-family:inherit;transition:all .25s cubic-bezier(.4,0,.2,1)}button:active{transform:scale(.95)}.glass-panel{background:var(--bg-panel);-webkit-backdrop-filter:blur(16px);border:var(--glass-border);border-radius:var(--radius-md);box-shadow:var(--shadow-panel)}.text-gradient{background:linear-gradient(135deg,#c4b5fd,#d946ef);-webkit-text-fill-color:transparent;-webkit-background-clip:text}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.animate-in{animation:.4s cubic-bezier(.16,1,.3,1) forwards fadeIn}