:root {
  --color-bg: #0c0f15; --color-surface: #141922; --color-text: #e6e9ef;
  --color-accent: #6a9fe8; --color-accent-2: #6a9fe8;
  --color-divider: color-mix(in srgb, #e6e9ef 12%, transparent);
  --color-accent-100: #eef5ff; --color-accent-200: #d8e7fd; --color-accent-300: #b6d3fa; --color-accent-400: #8fbaf4; --color-accent-500: #6a9fe8; --color-accent-600: #4f82c8; --color-accent-700: #3b649c; --color-accent-800: #2a4870; --color-accent-900: #1b2c43;
  --color-accent-2-100: #eef5ff; --color-accent-2-200: #d8e7fd; --color-accent-2-300: #b6d3fa; --color-accent-2-400: #8fbaf4; --color-accent-2-500: #6a9fe8; --color-accent-2-600: #4f82c8; --color-accent-2-700: #3b649c; --color-accent-2-800: #2a4870; --color-accent-2-900: #1b2c43;
  --color-neutral-700: #545a66; --color-neutral-800: #3a3f48; --color-neutral-900: #22262d;
  --color-section: #111827; --color-section-glow: #1b2a44;
}
body { background: var(--color-bg); margin: 0; }
h1, h2, h3 { font-family: "Schibsted Grotesk", var(--font-heading); font-weight: 500; }
.display { font-family: "Schibsted Grotesk", var(--font-heading); font-feature-settings: "ss01"; }
.tnum { font-variant-numeric: tabular-nums; }
a { color: var(--color-accent-300); }
a:hover { color: var(--color-accent-200); }
button:focus-visible, summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes cue { 0%,100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(6px); opacity: 1; } }
@keyframes dash { to { stroke-dashoffset: -260; } }
@keyframes breathe { 0%,100% { r: 4; opacity: .55; } 50% { r: 6.5; opacity: 1; } }
@keyframes sweep { 0% { transform: translateX(-100%); } 100% { transform: translateX(240%); } }
@keyframes glowPulse { 0%,100% { opacity: .45; transform: scale(1); } 50% { opacity: .8; transform: scale(1.06); } }
@keyframes cLevel { 0%,28% { transform: scaleX(1); } 40%,78% { transform: scaleX(.22); } 90%,100% { transform: scaleX(1); } }
@keyframes cTake { 0%,28% { opacity: 1; } 36%,82% { opacity: .12; } 92%,100% { opacity: 1; } }
@keyframes cPop { 0%,40% { opacity: 0; transform: translateY(5px); } 46%,80% { opacity: 1; transform: none; } 88%,100% { opacity: 0; transform: none; } }
@keyframes cTravel { 0% { transform: translateX(0); opacity: 0; } 6%,94% { opacity: 1; } 100% { transform: translateX(225px); opacity: 0; } }
@keyframes cFlash { 0% { opacity: .85; } 18%,100% { opacity: 0; } }
@keyframes cLang { 0% { opacity: 0; } 4%,21% { opacity: 1; } 25%,100% { opacity: 0; } }
@keyframes cRow { 0%,8% { opacity: 0; transform: translateX(-5px); } 18%,82% { opacity: 1; transform: none; } 92%,100% { opacity: 0; transform: none; } }
@keyframes cQ { 0% { opacity: 0; transform: translateY(5px); } 8%,84% { opacity: 1; transform: none; } 94%,100% { opacity: 0; transform: none; } }
@keyframes cType { 0%,14% { opacity: 0; } 18%,34% { opacity: 1; } 38%,100% { opacity: 0; } }
@keyframes cA { 0%,36% { opacity: 0; transform: translateY(5px); } 44%,84% { opacity: 1; transform: none; } 94%,100% { opacity: 0; transform: none; } }
@keyframes cTicket { 0% { transform: translateX(0); opacity: 0; } 15%,70% { opacity: 1; } 100% { transform: translateX(80px); opacity: 0; } }
@keyframes cBar { 0%,10% { transform: scaleY(0); } 30%,85% { transform: scaleY(1); } 95%,100% { transform: scaleY(0); } }
@keyframes cSize { 0%,10% { transform: translateX(0); } 22%,30% { transform: translateX(81px); } 42%,48% { transform: translateX(27px); } 58%,90% { transform: translateX(54px); } 100% { transform: translateX(0); } }
@keyframes cFit { 0%,56% { opacity: 0; } 62%,88% { opacity: 1; } 96%,100% { opacity: 0; } }
@keyframes iScan { 0%,100% { transform: translateY(0); } 50% { transform: translateY(8px); } }
@keyframes iBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes iSwing { 0%,60%,100% { transform: rotate(0); } 70% { transform: rotate(14deg); } 80% { transform: rotate(-12deg); } 90% { transform: rotate(6deg); } }
@keyframes iSpin { to { transform: rotate(360deg); } }
@keyframes iHop { 0% { transform: translateX(0); opacity: 0; } 15%,85% { opacity: 1; } 100% { transform: translateX(10px); opacity: 0; } }
@keyframes iDraw { 0% { stroke-dashoffset: 12; } 60%,100% { stroke-dashoffset: 0; } }
@keyframes iLook { 0%,100% { transform: translate(0,0); } 33% { transform: translate(1.5px,-1px); } 66% { transform: translate(-1px,1px); } }
@keyframes hTrace { 0% { stroke-dashoffset: 40; } 70%,100% { stroke-dashoffset: 0; } }
@keyframes hStack { 0%,10% { opacity: 0; transform: translateY(-4px); } 25%,85% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes hRing { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes wobble { 0%,100% { transform: rotate(6deg); } 50% { transform: rotate(-4deg) scale(1.04); } }
@keyframes hBeat { 0% { stroke-dashoffset: 60; } 100% { stroke-dashoffset: -60; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } }
::selection { background: color-mix(in srgb, var(--color-accent) 35%, transparent); }

/* hover states (converted from style-hover) */
.hv-1:hover{transform:translateY(-2px) !important;box-shadow:0 12px 30px -14px color-mix(in srgb, var(--color-accent) 90%, transparent) !important}
.hv-2:hover{transform:translateY(-2px) !important}
.hv-3:hover{border-color:color-mix(in srgb, var(--color-accent) 55%, var(--color-divider)) !important;transform:translateY(-3px) !important;box-shadow:var(--shadow-md) !important}
.hv-4:hover{border-color:color-mix(in srgb, var(--color-accent) 40%, var(--color-divider)) !important;transform:translateY(-3px) !important}
.hv-5:hover{transform:rotate(0deg) scale(1.04) !important}
.hv-6:hover{color:#0A66C2 !important}
.hv-7:hover{transform:translateY(-2px) !important;box-shadow:0 14px 34px -16px color-mix(in srgb, var(--color-accent) 95%, transparent) !important}
.hv-8:hover{color:var(--color-text) !important}