@view-transition{navigation:auto}*{box-sizing:border-box}html,body{color:#e6e8ee;background:#0b0d12;min-height:100dvh;margin:0;padding:0;font-family:ui-sans-serif,system-ui,-apple-system,sans-serif}.shell{grid-template-rows:auto 1fr auto;min-height:100dvh;display:grid}.app-header{view-transition-name:app-header;background:linear-gradient(90deg,#1e2231,#2a2f44);border-bottom:1px solid #2a2f44;align-items:center;gap:16px;padding:16px 24px;display:flex}.app-header h1{margin:0;font-size:18px;font-weight:600}.app-header .badge{background:#3a4060;border-radius:999px;margin-left:auto;padding:4px 10px;font-size:12px}.main{width:100%;max-width:720px;margin:0 auto;padding:32px 24px}.main h2{margin-top:0}.card{background:#161a26;border:1px solid #232838;border-radius:12px;margin-bottom:12px;padding:20px}.nav-bar{view-transition-name:nav-bar;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:#11141d;border-top:1px solid #1d2230;gap:8px;display:flex}.nav-bar a{text-align:center;color:#aab0c2;background:0 0;border-radius:10px;flex:1;padding:12px 16px;font-weight:500;text-decoration:none;transition:background .15s}.nav-bar a:hover{background:#1a1f2e}.nav-bar a[aria-current=page]{color:#fff;background:#2d3556}::view-transition-group(app-header){animation-duration:.5s;animation-timing-function:cubic-bezier(.4,0,.2,1)}::view-transition-group(nav-bar){animation-duration:.5s;animation-timing-function:cubic-bezier(.4,0,.2,1)}::view-transition-group(hero-card){animation-duration:.5s;animation-timing-function:cubic-bezier(.4,0,.2,1)}::view-transition-group(root){animation-duration:.3s}.hero-card{view-transition-name:hero-card;color:#fff;background:linear-gradient(135deg,#4a5fc7,#6c4ac9);border-radius:14px;padding:20px;font-weight:600;box-shadow:0 4px 18px #4a5fc759}