.socials.social-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.social-grid>a,.social-grid>a:nth-child(-n+2),.social-grid>a:last-child{grid-column:auto}
.snake-section{padding:65px 0 85px}.snake-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:25px;margin-bottom:35px}.snake-heading .eyebrow{font-size:10px}.snake-heading h2{font-size:clamp(40px,5vw,72px);letter-spacing:-2.5px;margin:0;line-height:1.1}.snake-heading h2 em{font-family:Georgia,serif;font-weight:400;color:var(--accent)}.snake-heading>p{font-size:15px;color:var(--muted);margin:0}.snake-shell{background:var(--panel);border:1px solid var(--line);border-radius:4px;overflow:hidden}.snake-toolbar{display:flex;justify-content:space-between;align-items:center;padding:19px 24px;border-bottom:1px solid var(--line);gap:20px}.snake-mode{font:11px monospace;letter-spacing:1.5px;color:var(--accent);display:flex;align-items:center;gap:9px}.snake-mode>span{width:6px;height:6px;background:currentColor;border-radius:50%}.snake-scores{display:flex;gap:30px;font:10px monospace;color:var(--muted);letter-spacing:.7px}.snake-scores b{font-size:17px;font-weight:400;color:var(--text);margin-left:8px}.snake-board{position:relative;background:var(--bg);padding:20px}.snake-board canvas{width:100%;aspect-ratio:6 / 1;display:block;outline:none;touch-action:pan-y;border-radius:2px}.snake-board canvas:focus-visible{outline:2px solid var(--accent);outline-offset:5px}.snake-board.is-playing canvas{touch-action:none}.snake-bottom{display:flex;align-items:center;justify-content:space-between;gap:25px;padding:23px 24px;border-top:1px solid var(--line)}.snake-bottom p{font-size:15px;margin:0 0 8px}.snake-bottom .snake-key-hint{font:9px monospace;letter-spacing:.7px;color:var(--muted);margin:0}.snake-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.snake-actions .button{font-size:13px;padding:12px 18px}.snake-auto{background:none;border:0;border-bottom:1px solid var(--line);padding:3px 0;color:var(--muted);font-size:12px}.snake-overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px;background:color-mix(in srgb,var(--bg) 83%,transparent);backdrop-filter:blur(4px);text-align:center}.snake-overlay[hidden],.snake-auto[hidden],.snake-dpad[hidden]{display:none}.snake-overlay>p{font:500 clamp(25px,4vw,50px)/1.1 Manrope,sans-serif;letter-spacing:-1.5px;margin:0}.snake-overlay>span{color:var(--muted);font-size:14px}.snake-overlay .button{margin-top:10px}.snake-dpad{padding:0 20px 22px;text-align:center;display:none}.snake-dpad button{width:45px;height:42px;background:var(--bg);border:1px solid var(--line);border-radius:3px;font-size:22px;margin:3px;touch-action:manipulation}.snake-dpad button:active{background:var(--accent);color:var(--ink)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:900px){.snake-bottom{align-items:flex-start;flex-direction:column}.snake-actions{width:100%}.snake-dpad:not([hidden]){display:block}.snake-board{padding:14px}}
@media(max-width:600px){.snake-section{padding:45px 0 55px}.snake-heading{display:block;margin-bottom:25px}.snake-heading h2{font-size:42px;letter-spacing:-1.8px}.snake-heading>p{display:none}.snake-toolbar{padding:15px 14px;gap:12px}.snake-mode{font-size:9px;letter-spacing:.5px}.snake-scores{font-size:8px;gap:12px;letter-spacing:0}.snake-scores b{font-size:13px;margin-left:3px}.snake-bottom{padding:18px 15px;gap:18px}.snake-bottom p{font-size:13px}.snake-bottom .snake-key-hint{font-size:8px}.snake-board{padding:10px}.snake-actions .button{font-size:12px;padding:11px 14px}.snake-overlay>p{font-size:27px}.snake-overlay>span{font-size:11px}.snake-overlay .button{font-size:11px;padding:8px 14px;margin-top:0}.snake-overlay{gap:7px}}

.snake-journey{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:25}
.snake-landed{animation:snakeLanding .85s ease-out}
@keyframes snakeLanding{0%{box-shadow:0 0 0 1px var(--accent),0 0 30px color-mix(in srgb,var(--accent) 30%,transparent)}100%{box-shadow:0 0 0 1px transparent,0 0 0 transparent}}

.snake-board canvas{max-width:1200px;margin-inline:auto}
.snake-board{padding-top:14px;padding-bottom:14px}
@media(max-width:600px){.snake-board:has(.snake-overlay:not([hidden])){min-height:145px}.snake-overlay{inset:0}}

/* Phone-only rendering fixes. Desktop styles stay exactly as before. */
@media(max-width:600px){
  /* Keep archive cards/text crisp on mobile Safari/Chrome by avoiding unused 3D compositing. */
  .archive-grid{perspective:none}
  .archive-card{transform-style:flat}

  /* Force decorative symbols to stay graphic/text-like instead of becoming platform emoji. */
  .ticker-track i,.spinning-star{font-size:0!important;position:relative;vertical-align:middle;display:inline-block;line-height:1;color:currentColor}
  .ticker-track i{margin:0 22px;width:16px;height:16px}
  .spinning-star{width:49px;height:49px;flex:0 0 49px}
  .ticker-track i::before,.ticker-track i::after,.spinning-star::before,.spinning-star::after{content:"";position:absolute;left:50%;top:50%;width:100%;height:1.5px;background:currentColor;transform:translate(-50%,-50%)}
  .ticker-track i::after,.spinning-star::after{transform:translate(-50%,-50%) rotate(90deg)}
  .ticker-track i,.spinning-star{background:linear-gradient(45deg,transparent 47%,currentColor 48%,currentColor 52%,transparent 53%),linear-gradient(-45deg,transparent 47%,currentColor 48%,currentColor 52%,transparent 53%)}

  #theme{font-size:0;position:relative;overflow:hidden}
  #theme::before{content:"";width:12px;height:12px;border:1.5px solid currentColor;border-radius:50%;display:block;margin:auto;box-shadow:0 -9px 0 -5.5px currentColor,0 9px 0 -5.5px currentColor,9px 0 0 -5.5px currentColor,-9px 0 0 -5.5px currentColor,6.4px 6.4px 0 -5.5px currentColor,-6.4px -6.4px 0 -5.5px currentColor,6.4px -6.4px 0 -5.5px currentColor,-6.4px 6.4px 0 -5.5px currentColor}

  .archive-arrow,.round-arrow{font-size:0!important;position:relative}
  .archive-arrow::before,.round-arrow::before{content:"";position:absolute;left:50%;top:50%;width:16px;height:1.5px;background:currentColor;transform:translate(-50%,-50%) rotate(-45deg)}
  .archive-arrow::after,.round-arrow::after{content:"";position:absolute;width:7px;height:7px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;left:50%;top:50%;transform:translate(2px,-9px)}

  .more-note>a{font-size:0;display:inline-flex;align-items:center;gap:7px}
  .more-note>a::before{content:"Explore my GitHub";font-size:12px}
  .more-note>a::after{content:"\2197\FE0E";font:12px/1 Arial,sans-serif}
}