.kode-hero-wrap{flex:1;place-items:center;min-height:0;padding:24px 16px;display:grid}.kode-hero{text-align:center;flex-direction:column;align-items:center;gap:18px;width:100%;max-width:440px;animation:.45s both kodeFade;display:flex}@keyframes kodeFade{0%{opacity:0}}.kode-hero__head{flex-direction:column;align-items:center;gap:clamp(16px,3vh,22px);display:flex}.kode-logo{--cell:clamp(40px, 12vw, 70px);align-items:stretch;gap:clamp(8px,2.5vw,20px);margin:0;display:flex}.kode-logo__tiles{gap:clamp(5px,1.4vw,9px);display:flex}.kode-logo__tile{width:var(--cell);aspect-ratio:1;border:1.5px solid var(--line);background:var(--surface);font-family:var(--mono);font-weight:800;font-size:calc(var(--cell) * .52);letter-spacing:0;text-transform:uppercase;color:var(--ink);border-radius:2px;place-items:center;line-height:1;display:grid}.kode-logo__tile.is-green{border-color:var(--k-green);background:var(--k-green);color:#07140d}.kode-logo__tile.is-amber{border-color:var(--k-amber);background:var(--k-amber);color:#1c1404}@keyframes kodeTileFlipGreen{0%,30%{background:var(--surface);border-color:var(--line);color:var(--ink);transform:scaleY(1)}55%{background:var(--surface);border-color:var(--line);color:var(--ink);transform:scaleY(.06)}56%{background:var(--k-green);border-color:var(--k-green);color:#07140d}78%{transform:scaleY(1.05)}to{background:var(--k-green);border-color:var(--k-green);color:#07140d;transform:scaleY(1)}}@keyframes kodeTileFlipAmber{0%,30%{background:var(--surface);border-color:var(--line);color:var(--ink);transform:scaleY(1)}55%{background:var(--surface);border-color:var(--line);color:var(--ink);transform:scaleY(.06)}56%{background:var(--k-amber);border-color:var(--k-amber);color:#1c1404}78%{transform:scaleY(1.05)}to{background:var(--k-amber);border-color:var(--k-amber);color:#1c1404;transform:scaleY(1)}}.kode-logo__tile{animation-duration:.38s;animation-timing-function:var(--ease-out);animation-fill-mode:both}.kode-logo__tile.is-green{animation-name:kodeTileFlipGreen}.kode-logo__tile.is-amber{animation-name:kodeTileFlipAmber}.kode-logo__tile:first-child{animation-delay:.6s}.kode-logo__tile:nth-child(2){animation-delay:.72s}.kode-logo__tile:nth-child(3){animation-delay:.84s}.kode-logo__tile:nth-child(4){animation-delay:.96s}.kode-logo__pips{align-items:center;display:flex}.kode-hero__desc{max-width:min(360px,100%);color:var(--ink-muted);text-wrap:pretty;margin:4px 0 0;font-size:17px;line-height:1.55}.kode-hero__meta{flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;margin-top:clamp(40px,9vh,100px);display:flex}@media (max-width:639px){.kode-hero__meta{margin-top:clamp(32px,9vh,72px)}}.kode-streak{border:1px solid var(--line);border-radius:var(--r-pill);font-family:var(--mono);color:var(--ink);font-variant-numeric:tabular-nums;align-items:center;gap:8px;padding:7px 13px 7px 10px;font-size:13px;font-weight:700;display:inline-flex}.kode-streak svg{width:15px;height:17px;color:var(--k-amber);flex:none}.kode-streak .lab{letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);font-size:10px;font-weight:500}.kode-streak.is-zero,.kode-streak.is-zero svg{color:var(--ink-faint)}.kode-hero__actions{flex-direction:column;gap:10px;width:100%;max-width:300px;margin-top:clamp(8px,3vh,24px);display:flex}.kode-btn{width:100%;font-family:var(--mono);letter-spacing:.12em;text-transform:uppercase;border-radius:var(--r-button);cursor:pointer;transition:opacity var(--dur-tap), transform 80ms, background var(--dur-tap), color var(--dur-tap), border-color var(--dur-tap);justify-content:center;align-items:center;gap:9px;padding:15px 22px;font-size:13px;font-weight:700;display:inline-flex}.kode-btn:active{transform:scale(.97)}.kode-btn svg{width:12px;height:12px}.kode-btn--primary{background:var(--ink);color:var(--bg);border:none}.kode-btn--primary:hover{opacity:.88}.kode-btn--ghost{color:var(--ink-muted);border:1px solid var(--line);background:0 0}.kode-btn--ghost:hover{color:var(--ink);border-color:var(--ink-faint)}@media (min-width:640px){.kode-hero__actions{flex-direction:row;max-width:420px}.kode-hero__actions .kode-btn{width:auto}.kode-hero__actions .kode-btn--primary{flex:1.4}.kode-hero__actions .kode-btn--ghost{flex:1}}@media (prefers-reduced-motion:reduce){.kode-hero,.kode-logo__tile{animation:none}}