@import url("https://fonts.googleapis.com/css2?family=Anybody:wght@700;800;900&family=Space+Grotesk:wght@500;700&family=Work+Sans:wght@400;600;700&display=swap");:root{--vajra-crimson:#c01c1b;--sun-orange:#ff9826;--temple-gold:#f2b632;--ink-black:#1a1a1a;--cream-canvas:#faf6f0;--panel-white:#fff;--alert-red:#e53935;--success-green:#2e7d32;--comic-border:3px solid #1a1a1a;--comic-shadow:5px 5px 0px #1a1a1a;--comic-shadow-sm:3px 3px 0px #1a1a1a;--comic-shadow-lg:7px 7px 0px #1a1a1a;--radius-comic:12px;--font-family:"Space Grotesk","Work Sans",system-ui,sans-serif;--font-display:"Anybody","Space Grotesk",sans-serif}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--cream-canvas);color:var(--ink-black);font-family:var(--font-family);min-height:100vh;-webkit-font-smoothing:antialiased}.clay-card,.comic-panel{background:var(--panel-white);border-radius:var(--radius-comic);border:var(--comic-border);box-shadow:var(--comic-shadow);padding:24px;transition:transform .15s ease,box-shadow .15s ease}.clay-card:hover,.comic-panel:hover{transform:translate(-2px,-2px);box-shadow:var(--comic-shadow-lg)}.clay-button,.comic-button{background:var(--vajra-crimson);color:#fff;font-family:var(--font-display);font-weight:800;font-size:.95rem;letter-spacing:.5px;text-transform:uppercase;padding:12px 24px;border-radius:10px;border:var(--comic-border);cursor:pointer;box-shadow:var(--comic-shadow-sm);transition:all .1s ease;display:inline-flex;align-items:center;gap:8px;text-decoration:none}.clay-button:hover,.comic-button:hover{background:#d32f2e;transform:translate(-2px,-2px);box-shadow:5px 5px 0 #1a1a1a}.clay-button:active,.comic-button:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #1a1a1a}.comic-button-secondary{background:var(--sun-orange);color:var(--ink-black)}.comic-button-secondary:hover{background:#ffa733}.comic-button-gold{background:var(--temple-gold);color:var(--ink-black)}.clay-badge,.comic-badge{padding:6px 14px;border-radius:8px;font-family:var(--font-display);font-size:.82rem;font-weight:800;text-transform:uppercase;letter-spacing:.5px;border:2px solid var(--ink-black);box-shadow:2px 2px 0 var(--ink-black);display:inline-flex;align-items:center;gap:4px}.badge-active{background:var(--sun-orange);color:var(--ink-black)}.badge-gold{background:var(--temple-gold);color:var(--ink-black)}.badge-red{background:var(--vajra-crimson);color:#fff}.badge-green{background:#4caf50;color:#fff}.speech-bubble{position:relative;background:#fff;border:2px solid var(--ink-black);border-radius:12px;padding:16px;box-shadow:3px 3px 0 var(--ink-black)}.halftone-accent{background-image:radial-gradient(#1a1a1a 15%,transparent 16%);background-size:12px 12px;opacity:.08}header.navbar{background:#fff;border-radius:20px;margin:12px 20px 0;padding:12px 24px;position:-webkit-sticky;position:sticky;top:12px;z-index:100;justify-content:space-between;flex-wrap:nowrap;box-shadow:0 10px 25px -5px rgba(0,0,0,.08),0 8px 10px -6px rgba(0,0,0,.05),inset 3px 3px 6px hsla(0,0%,100%,.9),inset -3px -3px 6px rgba(0,0,0,.06);border:1px solid hsla(0,0%,100%,.8);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.brand-title,header.navbar{display:flex;align-items:center}.brand-title{gap:12px;white-space:nowrap;flex-shrink:0;font-family:var(--font-display);font-size:1.35rem;font-weight:900;color:var(--vajra-crimson);letter-spacing:.5px;padding:6px 14px;border-radius:16px;background:linear-gradient(135deg,#fff,#f7f5f2);box-shadow:4px 4px 10px rgba(0,0,0,.06),inset 2px 2px 4px hsla(0,0%,100%,.9),inset -2px -2px 4px rgba(0,0,0,.08);transition:all .2s ease}.brand-title span{color:var(--ink-black);font-weight:700}.clay-nav-item{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;flex-shrink:0;padding:9px 16px;border-radius:14px;font-family:var(--font-display);font-size:.78rem;font-weight:800;color:#2d3748;background:linear-gradient(145deg,#fff,#f0ede8);box-shadow:4px 4px 8px rgba(0,0,0,.06),inset 2px 2px 4px hsla(0,0%,100%,.9),inset -2px -2px 4px rgba(0,0,0,.06);transition:all .2s cubic-bezier(.34,1.56,.64,1);text-decoration:none;border:1px solid hsla(0,0%,100%,.6)}.clay-nav-item:hover{transform:translateY(-2px);color:#c01c1b;box-shadow:6px 6px 12px rgba(0,0,0,.09),inset 2px 2px 4px #fff,inset -2px -2px 4px rgba(0,0,0,.04)}.clay-nav-item-active{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;flex-shrink:0;padding:9px 16px;border-radius:14px;font-family:var(--font-display);font-size:.78rem;font-weight:800;color:#fff!important;background:linear-gradient(145deg,#d82322,#a81514);box-shadow:4px 6px 12px rgba(192,28,27,.35),inset 2px 2px 4px hsla(0,0%,100%,.45),inset -2px -2px 4px rgba(0,0,0,.25);transition:all .2s cubic-bezier(.34,1.56,.64,1);text-decoration:none;border:1px solid hsla(0,0%,100%,.3)}.clay-nav-item-active:hover{transform:translateY(-2px);box-shadow:6px 8px 16px rgba(192,28,27,.45),inset 2px 2px 4px hsla(0,0%,100%,.5),inset -2px -2px 4px rgba(0,0,0,.2)}.clay-user-badge{border-radius:14px;background:linear-gradient(145deg,#ffaa42,#e08212);box-shadow:3px 4px 8px rgba(255,152,38,.3),inset 2px 2px 4px hsla(0,0%,100%,.5),inset -2px -2px 4px rgba(0,0,0,.15);border:1px solid hsla(0,0%,100%,.4);display:inline-flex}.clay-exit-btn,.clay-user-badge{padding:8px 16px;font-family:var(--font-display);font-size:.8rem;font-weight:800;color:#1a1a1a;align-items:center;gap:6px}.clay-exit-btn{display:flex;border-radius:14px;background:linear-gradient(145deg,#fff,#e5e0d8);box-shadow:3px 4px 8px rgba(0,0,0,.08),inset 2px 2px 4px hsla(0,0%,100%,.9),inset -2px -2px 4px rgba(0,0,0,.1);border:1px solid hsla(0,0%,100%,.8);cursor:pointer;transition:all .2s cubic-bezier(.34,1.56,.64,1)}.clay-exit-btn:hover{transform:translateY(-2px);background:linear-gradient(145deg,#fff,#eae5dc);color:#c01c1b;box-shadow:5px 6px 12px rgba(0,0,0,.12),inset 2px 2px 4px #fff,inset -2px -2px 4px rgba(0,0,0,.08)}.clay-exit-btn:active{transform:translateY(1px);box-shadow:1px 2px 4px rgba(0,0,0,.08),inset -2px -2px 4px hsla(0,0%,100%,.9),inset 2px 2px 4px rgba(0,0,0,.1)}.container{max-width:1200px;margin:0 auto;padding:32px 16px}