@font-face{font-family:Fell;src:url('/assets/title.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Pixelify Sans';font-weight:400 700;src:url('/assets/pixelify-sans.woff2') format('woff2');font-display:swap}
:root{color-scheme:dark;--ink:#f0ecdf;--muted:#98a8b7;--gold:#e8bb70;--line:#b7c9db24;--night:#091521;
/* Spriterrific keeps its own colours inside its card. */
--sp-bg:#0a0d0a;--sp-mint:#b7f7a7;--sp-amber:#ffcf70;--sp-cream:#f8f3e8;--sp-line:#263729;
--sans:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;--hero-w:72px}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--night)}
body{color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;background:radial-gradient(ellipse at 80% 5%,#20374970,transparent 55%),#091521}
button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:inherit;text-decoration:none}
button:focus-visible,a:focus-visible,iframe:focus-visible{outline:2px solid var(--gold);outline-offset:4px}[hidden]{display:none!important}
.shell{max-width:1760px;width:calc(100% - 64px);height:100svh;margin:auto;padding-bottom:20px;display:grid;grid-template-rows:76px minmax(0,1fr)}

.site-header{display:flex;align-items:center;gap:26px;min-width:0}
.brand{margin:0;font:34px Fell,Georgia,serif;white-space:nowrap}.brand a{display:flex;align-items:center;gap:13px}.beacon{color:var(--gold);font:30px Georgia}
.site-header p{margin:0;padding-left:26px;border-left:1px solid var(--line);font-size:12px;line-height:1.7;color:var(--muted)}
.byline{margin-left:auto;color:var(--muted);font-size:12px;white-space:nowrap}.byline a{color:var(--ink);border-bottom:1px solid var(--line)}.byline a:hover{color:var(--gold)}
.mobile-break{display:none}

main{display:grid;grid-template-columns:minmax(0,1fr) 304px;gap:32px;min-height:0}
.play-area{display:grid;grid-template-rows:minmax(0,1fr) 45px;min-height:0;min-width:0}
#game-panel{min-height:0;min-width:0;container-type:size;display:grid;place-items:center;position:relative;background:#040b12;border:1px solid #9bb9ce35;border-radius:8px;overflow:hidden;box-shadow:0 14px 55px #0004}
.wavedash-embed{position:relative;box-sizing:content-box;width:min(100cqw,calc((100cqh - 40px)*16/9));aspect-ratio:16/9;padding-bottom:40px}
.wavedash-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.game-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px}.game-toolbar p{margin:0;color:var(--muted);font-size:11px}
.separator{margin:0 10px;color:#637785}kbd{font:10px var(--sans);border:1px solid #9ab4c344;border-radius:3px;display:inline-block;padding:3px 5px;margin-right:4px;color:#c9d4d9}
.game-toolbar button{min-height:40px;border:0;background:none;color:var(--ink);display:flex;align-items:center;gap:8px;font-size:12px;padding:0 4px}
.game-toolbar button:hover{color:var(--gold)}.game-toolbar svg{width:15px;height:15px}.touch-controls{display:none}

.creator-panel{display:flex;flex-direction:column;justify-content:safe center;min-height:0;padding-bottom:45px}
.creator-intro h2{font:400 27px/1.15 Fell,Georgia,serif;margin:0 0 16px}
.creator-intro p{font-size:13.5px;line-height:1.6;color:var(--muted);margin:0 0 22px;text-wrap:pretty}
nav{display:grid;gap:12px}

.tool{display:block;border-radius:6px;overflow:hidden;transition:border-color .15s,transform .15s}
.tool-body{display:block;padding:15px 16px 16px}
.tool-role{display:block;font-size:11px;color:var(--muted);margin-bottom:9px}
.tool-text{display:block;font-size:13px;line-height:1.55;margin:9px 0 13px;text-wrap:pretty}
.tool-cta{display:inline-block;font-size:13px;font-weight:600}

.sp{background:var(--sp-bg);border:1px solid var(--sp-line)}.sp:hover{border-color:#b7f7a799}
.sp-stage{display:flex;align-items:flex-end;justify-content:space-between;padding:12px 14px 0 18px;border-bottom:2px solid var(--sp-line);background:linear-gradient(#111812,#0c120e)}
.sp-hero{width:var(--hero-w);aspect-ratio:144/156;background:url('/assets/hero-run.webp') 0 0/calc(var(--hero-w)*16) 100% no-repeat;animation:hero-run .5714s steps(16) infinite}
@keyframes hero-run{to{background-position-x:calc(var(--hero-w)*-16)}}
.sp .tool-role{color:#f8f3e899}.sp .tool-text{color:var(--sp-cream)}
.sp-wordmark{display:flex;align-items:center;gap:9px;color:var(--sp-mint);font:800 21px/1 'Pixelify Sans',ui-monospace,monospace}
.sp-wordmark svg{width:17px;height:17px;flex:none;box-shadow:2px 2px 0 #000}
.sp .tool-cta{color:var(--sp-amber);border:2px solid var(--sp-amber);background:#352412;padding:7px 11px;box-shadow:3px 3px 0 #000;font:600 14px/1.2 'Pixelify Sans',ui-monospace,monospace}
.sp:hover .tool-cta{background:var(--sp-amber);color:#0a0d0a}







.follow{display:grid;gap:2px;margin-top:6px;padding-top:12px;border-top:1px solid var(--line)}
.plain{display:flex;align-items:center;gap:12px;padding:8px 4px;border-radius:4px;color:var(--muted)}.plain:hover{color:var(--ink);background:#10212d70}
.plain svg,.x-symbol{width:20px;flex:none;text-align:center;font-size:18px;line-height:1}
.badge{justify-self:start;margin-top:4px;border-radius:99px;opacity:.82;transition:opacity .15s}.badge:hover{opacity:1}.badge img{display:block;width:212px;height:auto}
.plain strong{display:block;font-size:12.5px;font-weight:500;color:var(--ink)}.plain small{display:block;font-size:11px;margin-top:2px}

.skip{position:fixed;top:8px;left:8px;transform:translateY(-180%);background:var(--gold);color:#091521;padding:12px;z-index:2000}.skip:focus{transform:none}
body.game-expanded{overflow:hidden}
#game-panel.is-expanded{position:fixed;inset:0;z-index:1000;width:100%;height:100dvh;max-height:none;border:0;border-radius:0;padding:calc(48px + env(safe-area-inset-top,0px)) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);background:#040b12}
#exit-fullscreen{position:absolute;right:calc(12px + env(safe-area-inset-right,0px));top:calc(3px + env(safe-area-inset-top,0px));min-height:42px;padding:0 14px;border:1px solid #b7c9db40;border-radius:5px;background:#152937;color:var(--ink);font-size:12px;z-index:2}
#exit-fullscreen span{margin-left:10px;color:var(--gold)}

/* Short desktop windows: the rail tightens before the game shrinks. */
@media(min-width:851px) and (max-height:840px){:root{--hero-w:56px}.shell{grid-template-rows:62px minmax(0,1fr);width:calc(100% - 40px);padding-bottom:12px}main{gap:24px;grid-template-columns:minmax(0,1fr) 270px}.creator-panel{padding-bottom:0}.creator-intro h2{font-size:23px;margin-bottom:6px}.creator-intro p{font-size:12.5px;margin-bottom:14px}nav{gap:10px}.tool-body{padding:11px 13px 13px}.tool-role{margin-bottom:6px}.tool-text{font-size:12px;margin:7px 0 10px}.sp-stage{padding-top:8px}.follow{margin-top:2px;padding-top:8px}.plain{padding:5px 4px}}
@media(min-width:851px) and (max-height:640px){.creator-intro p,.tool-role{display:none}.creator-intro h2{margin-bottom:12px}}

/* Phone portrait: game first, then each tool as one row. */
@media(max-width:850px) and (orientation:portrait){:root{--hero-w:50px}
.shell{width:calc(100% - 28px);grid-template-rows:70px minmax(0,1fr);padding-bottom:12px}main{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;gap:6px}
.site-header{gap:12px}.brand{font-size:29px}.brand a{gap:8px}.beacon{font-size:24px}.site-header p{padding-left:12px;font-size:10px;white-space:nowrap}.mobile-break{display:block}.byline{display:none}
.wavedash-embed{box-sizing:border-box;width:100%;height:100%;aspect-ratio:auto;padding-bottom:0}.play-area{grid-template-rows:minmax(0,1fr) 37px}
.creator-panel{padding-bottom:0}.creator-intro h2{font-size:19px;margin-bottom:8px}.creator-intro p,.tool-role{display:none}
nav{gap:8px}.tool-body{padding:0;min-width:0}.tool-text{font-size:12px;line-height:1.45;margin:5px 0 0}
.sp{display:flex;align-items:center;gap:12px;padding:8px 12px}.sp-stage{padding:0;border:0;background:none}.sp-wordmark{font-size:18px}.sp-wordmark svg{width:14px;height:14px}

/* The whole row is the link on a phone, so the button collapses to an arrow. */
.tool{position:relative;padding-right:34px!important}.tool-cta{position:absolute;right:12px;top:50%;translate:0 -50%;font-size:0!important;border:0!important;background:none!important;box-shadow:none!important;padding:0!important}.tool-cta span{font:400 17px var(--sans)}
.follow{grid-template-columns:1fr 1fr;gap:8px;margin-top:0;padding-top:8px}.badge{justify-self:center;margin:0}.badge img{width:190px}.plain{padding:6px 2px;gap:9px;min-width:0}.plain strong{display:none}.plain small{font-size:11.5px;margin:0;color:var(--ink);white-space:nowrap}}
@media(max-width:380px) and (orientation:portrait){:root{--hero-w:44px}.shell{width:calc(100% - 20px);grid-template-rows:60px minmax(0,1fr)}.brand{font-size:25px}.site-header p{font-size:9px}.creator-intro h2{display:none}.tool-text{font-size:11px}.sp-wordmark{font-size:17px}.plain small{font-size:10.5px}}

@media(pointer:coarse){.desktop-controls{display:none}.touch-controls{display:inline}}

/* Short landscape (a phone on its side): names and arrows only. */
@media(max-height:500px) and (orientation:landscape){:root{--hero-w:40px}
.shell{width:calc(100% - 24px);grid-template-rows:44px minmax(0,1fr);padding-bottom:8px}main{grid-template-columns:minmax(0,1fr) 214px;gap:16px}
.brand{font-size:25px}.site-header{gap:14px}.site-header p{font-size:10px;padding-left:14px}.byline{font-size:10px}
.play-area{grid-template-rows:minmax(0,1fr) 33px}.game-toolbar p{font-size:9px}.game-toolbar button{font-size:10px;min-height:30px}.separator{margin:0 3px}
.creator-panel{padding-bottom:33px}.creator-intro h2{font-size:17px;margin:0 0 8px}.creator-intro p,.tool-role,.tool-text{display:none}
nav{gap:7px}.tool-body{padding:0;min-width:0}
.sp{display:flex;align-items:center;gap:9px;padding:6px 10px}.sp-stage{padding:0;border:0;background:none}.sp-wordmark{font-size:16px;gap:7px}.sp-wordmark svg{width:12px;height:12px}

.tool{position:relative;padding-right:26px!important}.tool-cta{position:absolute;right:9px;top:50%;translate:0 -50%;font-size:0!important;border:0!important;background:none!important;box-shadow:none!important;padding:0!important}.tool-cta span{font:400 15px var(--sans)}
.follow{margin-top:0;padding-top:5px;gap:0}.badge{margin-top:2px}.badge img{width:170px}.plain{padding:4px 2px;gap:9px}.plain strong{display:none}.plain small{font-size:11px;margin:0;color:var(--ink)}.plain svg,.x-symbol{width:16px;font-size:15px}}

@media(prefers-reduced-motion:reduce){*{transition:none!important}.sp-hero{animation:none}}