:root { --bg: #0c0913; --line: #2a2039; --text: #c8bedc; --dim: #8a7ea0; --bright: #ece6f7; --wave: #a35cf0; --accent: #e04cd8; }
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; color: var(--text); font: 15px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif; background: radial-gradient(ellipse 70% 55% at 50% 38%, rgba(163, 92, 240, .2), rgba(12, 9, 19, 0) 70%), radial-gradient(ellipse 50% 40% at 80% 100%, rgba(224, 76, 216, .1), rgba(12, 9, 19, 0) 70%), var(--bg); }
a { color: var(--bright); }

.stage { width: min(560px, 100%); text-align: center; }
/* the spot the skater stands on: a floor line and a shadow that follows the pose */
.spot { position: relative; height: 340px; margin: 0 auto; }
.spot::before { content: ""; position: absolute; left: 6%; right: 6%; bottom: 14px; height: 1px; background: linear-gradient(90deg, rgba(163, 92, 240, 0), rgba(163, 92, 240, .55), rgba(163, 92, 240, 0)); }
.spot::after { content: ""; position: absolute; left: 50%; bottom: 6px; width: 190px; height: 18px; margin-left: -95px; border-radius: 50%; background: rgba(0, 0, 0, .55); filter: blur(7px); animation: shadow 4s ease-in-out infinite; }
.mascot { position: absolute; left: 50%; bottom: 14px; height: 320px; width: auto; max-width: 92%; object-fit: contain; transform: translateX(-50%); filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .5)); }

.code { margin: 6px 0 0; color: var(--bright); font-size: clamp(64px, 16vw, 116px); font-weight: 200; letter-spacing: -.04em; line-height: 1; }
h1 { margin: 6px 0 4px; color: var(--bright); font-size: 22px; font-weight: 300; }
p { margin: 0 auto; max-width: 420px; }
.path { margin-top: 10px; color: var(--dim); font-size: 12px; overflow-wrap: anywhere; }
.path:empty { display: none; }
.go { display: flex; justify-content: center; gap: 22px; margin-top: 26px; flex-wrap: wrap; }
.go a { color: var(--bright); text-decoration: none; padding: 2px 0; border-bottom: 1px solid var(--wave); }
.go a:hover { color: #fff; border-color: var(--accent); }
.fine { margin-top: 28px; color: var(--dim); font-size: 12px; }

/* standing: a slow breath */
.idle .mascot { animation: breathe 4s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes breathe { 50% { transform: translateX(-50%) scale(1.012, .992); } }
/* every pose stays over the centre line, so the skater always sits above the code */
/* rolling: a small sway in place */
.roll .mascot { animation: roll 3.6s ease-in-out infinite; }
@keyframes roll { 0%, 100% { transform: translateX(calc(-50% - 10px)); } 50% { transform: translateX(calc(-50% + 10px)); } }
/* grinding: the same sway with a small lean */
.grind .mascot { animation: grind 3.2s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes grind { 0%, 100% { transform: translateX(calc(-50% - 8px)) rotate(-1deg); } 50% { transform: translateX(calc(-50% + 8px)) rotate(1deg); } }
/* in the air: up, hang, down, the shadow shrinking under it */
.air .mascot { animation: air 2.6s cubic-bezier(.4, 0, .6, 1) infinite; }
@keyframes air { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -30px); } }
.air .spot::after { animation: shadow-air 2.6s cubic-bezier(.4, 0, .6, 1) infinite; }
@keyframes shadow-air { 0%, 100% { transform: scaleX(1); opacity: 1; } 50% { transform: scaleX(.7); opacity: .5; } }
/* bailing: drops in, settles, stays */
/* the body sits right of the board in this one, so the picture leans left to put him over the code */
.bail .mascot { animation: bail 4.4s ease-in-out infinite; left: 46%; }
@keyframes bail { 0% { transform: translate(-50%, -24px); opacity: 0; } 15% { opacity: 1; } 25%, 100% { transform: translate(-50%, 0); } }
@keyframes shadow { 50% { transform: scaleX(.94); } }

@media (prefers-reduced-motion: reduce) {
  .mascot, .spot::after { animation: none !important; }
}
@media (max-width: 480px) { .spot { height: 270px; } .mascot { height: 252px; } }
.code:empty { display: none; }

/* the door: a few fields and a button, nothing else */
.door { width: min(300px, 100%); display: flex; flex-direction: column; gap: 10px; }
.door h1 { margin: 0 0 8px; font-size: 26px; font-weight: 300; }
.door input { font: inherit; color: var(--bright); background: rgba(20, 15, 29, .8); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; outline: none; }
.door input:focus { border-color: var(--wave); }
.door input[hidden] { display: none; }
.door button { font: inherit; color: var(--bright); background: rgba(20, 15, 29, .8); border: 1px solid var(--accent); border-radius: 8px; padding: 10px; cursor: pointer; }
.door button:disabled { opacity: .5; cursor: default; }
.door a { color: var(--dim); font-size: 12px; text-decoration: none; align-self: flex-start; }
.door a:hover { color: var(--text); }
.door p { margin: 0; min-height: 1.4em; color: var(--accent); font-size: 13px; }