body { margin: 0; font-family: system-ui, sans-serif; }
a { text-decoration: none; color: inherit; }
.bg-zinc-900{background-color:#18181b;}
.bg-zinc-800{background-color:#27272a;}
.text-white{color:#fff;}
.text-yellow-300{color:#fde047;}
.text-yellow-400{color:#facc15;}
.text-cyan-200{color:#a5f3fc;}
.text-zinc-900{color:#18181b;}
.text-lg{font-size:1.125rem;line-height:1.75rem;}
.text-2xl{font-size:1.5rem;line-height:2rem;}
.text-4xl{font-size:2.25rem;line-height:2.5rem;}
.font-medium{font-weight:500;}
.font-bold{font-weight:700;}
.px-3{padding-left:0.75rem;padding-right:0.75rem;}
.py-1{padding-top:0.25rem;padding-bottom:0.25rem;}
.px-4{padding-left:1rem;padding-right:1rem;}
.py-4{padding-top:1rem;padding-bottom:1rem;}
.mx-auto{margin-left:auto;margin-right:auto;}
.container{width:100%;max-width:72rem;margin-left:auto;margin-right:auto;}
.flex{display:flex;}
.gap-6{gap:1.5rem;}
.gap-2{gap:0.5rem;}
.relative{position:relative;}
.absolute{position:absolute;}
.inset-0{top:0;right:0;bottom:0;left:0;}
.w-full{width:100%;}
.h-full{height:100%;}
.aspect-\[20\/9\]{aspect-ratio:20/9;}
.overflow-hidden{overflow:hidden;}
.rounded{border-radius:0.25rem;}
.border{border-width:1px;}
.border-yellow-400{border-color:#facc15;}
.border-cyan-400{border-color:#22d3ee;}
.text-right{text-align:right;}
.whitespace-pre-line{white-space:pre-line;}
.bg-yellow-400{background-color:#facc15;}
.bg-cyan-400{background-color:#22d3ee;}
.bg-transparent{background-color:transparent;}
.mode-toggle{border:1px solid #29a8d8;color:#a6e6ff;background-color:transparent;transition:background-color .2s ease,color .2s ease;}
.mode-toggle:hover{color:#e0f5ff;}
.mode-toggle.active{background-color:#29a8d8;color:#050c12;}
.ms-auto{margin-left:auto;}
.transition{transition:color .2s ease-in-out;}
.shadow-md{box-shadow:0 4px 6px rgba(0,0,0,0.1);}
.hover\:text-yellow-300:hover{color:#fde047;}