*{box-sizing:border-box}html,body{margin:0}
:root{--ink:#12233E;--cream:#FBF6EC;--hair:rgba(18,35,62,.22);--hair2:rgba(18,35,62,.5);--mut:#44536E;--mut2:#67789A}
body{background:var(--cream);color:var(--ink);font-family:var(--font-sans);-webkit-font-smoothing:antialiased}
.mono{font-family:var(--font-mono)}
a{color:var(--ink)}a:hover{color:var(--ocean-700)}
#prog{position:fixed;top:0;left:0;height:2px;width:0;background:var(--ink);z-index:50}
.mast{border-bottom:1.5px solid var(--ink);background:var(--cream);position:relative;z-index:5}
.mastin{max-width:1240px;margin:0 auto;padding:15px 48px;display:flex;align-items:center;gap:34px}
.brand{display:inline-flex;align-items:center;gap:9px;color:var(--ink);text-decoration:none}
.wm{font-family:var(--font-display);font-weight:700;font-size:18px;letter-spacing:-.03em}
.mnav{display:flex;gap:26px;margin-left:auto}
.mnav a{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;text-decoration:none;opacity:.85}
.mnav a.here{opacity:1;border-bottom:2px solid var(--ink);padding-bottom:2px}
.ver{font-family:var(--font-mono);font-size:11px;color:var(--mut2)}
.btn{display:inline-block;background:var(--ink);color:var(--cream);padding:13px 26px;font-weight:600;font-size:14px;text-decoration:none;border:1.5px solid var(--ink)}
.btn:hover{background:transparent;color:var(--ink)}
.ulink{font-weight:600;font-size:14px;text-decoration:underline;text-underline-offset:4px}

.story{max-width:660px;margin:0 auto;padding:0 28px}
.head{position:relative;min-height:72vh;display:flex;flex-direction:column;justify-content:center;text-align:center;position:relative}
.ruled{display:flex;justify-content:space-between;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);padding:8px 2px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--mut)}
h1{font-family:var(--font-display);font-weight:800;letter-spacing:-.045em;font-size:clamp(52px,8.4vw,104px);line-height:.98;margin:40px 0 22px}
.dek{font-size:17px;color:var(--mut);margin:0 auto;max-width:34ch;line-height:1.55}
.cue{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut2);animation:cue 2.4s ease-in-out infinite}
@keyframes cue{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,7px)}}

.beat{font-family:var(--font-display);font-weight:600;letter-spacing:-.022em;font-size:clamp(24px,3.3vw,37px);line-height:1.34;margin:0 0 44vh;opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.beat.in{opacity:1;transform:none}
.beat.past{opacity:.32}
.beat .fig{display:block;margin:0 0 26px}
.kick{display:block;font-family:var(--font-mono);font-weight:400;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut2);margin-bottom:16px}

.hl{background-image:linear-gradient(rgba(233,196,90,.42),rgba(233,196,90,.42));background-repeat:no-repeat;background-size:0% 44%;background-position:0 74%;transition:background-size .9s cubic-bezier(.2,.7,.2,1) .45s}
.beat.in .hl{background-size:100% 44%}
.ul{background-image:linear-gradient(var(--ocean-600,#1285E9),var(--ocean-600,#1285E9));background-repeat:no-repeat;background-size:0% 2px;background-position:0 100%;padding-bottom:3px;transition:background-size .8s cubic-bezier(.2,.7,.2,1) .5s}
.beat.in .ul{background-size:100% 2px}
.bad{color:#C22B12}
.xnote{display:block}
.xfig{display:block;border:1px solid var(--hair);background:var(--code-bg,#FCF8F0);text-align:left;margin:0 0 26px}
.xcap{display:flex;justify-content:space-between;gap:14px;font-family:var(--font-mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--mut2);border-bottom:1px solid var(--hair);padding:8px 14px}
.xcap .ok{color:var(--code-ok,#1F8A6D)}
.xcap .no{color:var(--code-bad,#C83A1E)}
.xfig pre{margin:0;padding:14px 16px;font-family:var(--font-mono);font-size:12.5px;line-height:1.75;color:var(--code-text,#2C4468);overflow-x:auto}
.xfig .td{color:var(--code-declaration,#B0730A);font-weight:700}
.xfig .tm{color:var(--code-modal,#C83A1E);font-weight:700}
.xfig .to{color:var(--code-operator,#0E7C90)}
.xfig .tr{color:var(--code-ref,#1E6FA8)}
.xfig .ts{color:var(--code-string,#C05A28)}
.xfig .tc{color:var(--code-comment,#1F8A6D);font-style:italic}
.xfig .tx{color:var(--code-section,#155A8A);font-weight:700}
.xfig .tk{color:var(--code-control,#6F4FCB);font-weight:700}

.litany .ln{display:block;opacity:0;transform:translateY(14px);transition:opacity .55s cubic-bezier(.2,.7,.2,1),transform .55s cubic-bezier(.2,.7,.2,1)}
.litany.in .ln{opacity:1;transform:none}
.litany.in .ln:nth-child(3){transition-delay:.35s}
.litany.in .ln:nth-child(4){transition-delay:.7s}
.litany.in .ln:nth-child(5){transition-delay:1.05s}
.litany.in .ln:nth-child(6){transition-delay:1.5s}

.turn{text-align:center;margin-bottom:38vh}
.turn .mk{height:74px;width:auto;display:block;margin:0 auto 30px;opacity:0;transform:translateY(18px) scale(.92);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.turn.in .mk{opacity:1;transform:none}
.turn .big{font-size:clamp(38px,5.6vw,64px);font-weight:800;letter-spacing:-.04em;line-height:1.06}

.sk{stroke:var(--ink);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sk path,.sk line,.sk circle{stroke-dasharray:1;stroke-dashoffset:1}
.beat.in .sk path,.beat.in .sk line,.beat.in .sk circle{animation:draw 1.4s cubic-bezier(.4,0,.2,1) forwards}
.beat.in .sk .d2{animation-delay:.45s}.beat.in .sk .d3{animation-delay:.9s}
@keyframes draw{to{stroke-dashoffset:0}}

.signoff{border-top:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);padding:44px 0 46px;margin:0 0 90px;text-align:center}
.signoff .by{font-family:var(--font-display);font-weight:700;letter-spacing:-.025em;font-size:clamp(22px,2.6vw,30px);margin:0 0 8px}
.signoff .role{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);margin:0 0 30px}
.ctarow{display:flex;gap:22px;justify-content:center;align-items:center;flex-wrap:wrap}
.inst{font-family:var(--font-mono);font-size:13px;color:var(--ink);border:1px solid var(--hair2);padding:12px 18px;background:none;cursor:pointer;white-space:nowrap}
.inst b{color:var(--ocean-700);font-weight:700}
.inst:hover{border-color:var(--ink)}
.cphint{opacity:.45;margin-left:8px}
.inst.did .cphint{opacity:1;color:var(--ocean-700)}
.pfoot{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut2);border-top:1px solid var(--hair);padding:14px 2px 40px}
@media (prefers-reduced-motion: reduce){
 .beat,.litany .ln,.turn .mk{opacity:1 !important;transform:none !important;transition:none}
 .hl{background-size:100% 44%}.ul{background-size:100% 2px}
 .beat .sk path,.beat .sk line,.beat .sk circle{stroke-dashoffset:0;animation:none}
 .cue{animation:none}
}
@media (max-width:700px){.mastin{padding:13px 22px;gap:18px}.mnav{gap:14px}.ver{display:none}
 .head{min-height:58vh}
 .beat{margin-bottom:18vh;font-size:clamp(20px,5.6vw,37px)}
 .beat .fig{margin-bottom:18px}
 .turn{margin-bottom:20vh}
 .turn .mk{height:56px;margin-bottom:22px}
 .signoff{margin:0 0 56px;padding:34px 0 38px}
 .dek{font-size:15.5px}
 .inst{font-size:11.5px;padding:10px 12px}}

.w{color:rgba(18,35,62,.22);transition:color .22s linear}
.w.lit{color:inherit}
.hl.js,.ul.js{transition:none}
.gullw{position:absolute;color:var(--ink);opacity:.7;animation:gdrift var(--gt,15s) ease-in-out infinite}
.gullw svg{display:block;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
@keyframes gdrift{0%,100%{transform:translate(0,0)}50%{transform:translate(30px,-12px)}}
@media (prefers-reduced-motion: reduce){.gullw{animation:none}.w{color:inherit}}
@media (max-width:700px){.gullw{display:none}}

.sk text{fill:var(--ink);stroke:none;font-family:var(--font-mono);font-size:11px;letter-spacing:.6px}
.tl{opacity:0}
.beat.in .tl{animation:tlin .01s forwards}
@keyframes tlin{to{opacity:1}}
.sk line.cur{stroke-dasharray:none;stroke-dashoffset:0;opacity:0}
.beat.in .sk line.cur{animation:blink 1.1s steps(1) infinite 1.05s}
@keyframes blink{0%,55%{opacity:1}56%,100%{opacity:0}}
.bob{transform-box:fill-box;transform-origin:50% 50%}
.beat.in .bob{animation:bob 4.6s ease-in-out infinite 1.6s}
@keyframes bob{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-5px) rotate(-2.5deg)}}
.pf,.pm1,.pm2,#cs-main{transform-box:fill-box}
.pf{transform-origin:50% 100%}
.pm1,.pm2{transform-origin:50% 50%}
#cs-main{transform-origin:50% 100%}
.beat.in .sk .fast{animation-duration:.55s}
.litany.in .pf{animation:tiltf .55s cubic-bezier(.4,0,.6,1) forwards .45s,pffall .7s cubic-bezier(.5,0,.9,.4) forwards 1.5s}
@keyframes pffall{from{transform:rotate(32deg) translateY(2px)}55%{opacity:1}to{transform:rotate(46deg) translate(10px,46px);opacity:0}}
@keyframes tiltf{to{transform:rotate(32deg) translateY(2px)}}
.litany.in .pm2{animation:fallr .75s cubic-bezier(.5,0,.9,.4) forwards .8s}
@keyframes fallr{55%{opacity:1}to{transform:translate(10px,44px) rotate(30deg);opacity:0}}
.litany.in .pm1{animation:falll .75s cubic-bezier(.5,0,.9,.4) forwards 1.15s}
@keyframes falll{55%{opacity:1}to{transform:translate(-12px,46px) rotate(-26deg);opacity:0}}
.litany.in #cs-main{animation:slump .8s cubic-bezier(.6,0,.4,1) forwards 1.75s}
@keyframes slump{to{transform:translateY(7px) rotate(-3deg);opacity:.22}}
.mound{opacity:0}
.litany.in .mound{animation:mshow .3s forwards 1.9s}
@keyframes mshow{to{opacity:1}}
.litany .bad{display:inline-block}
.litany.in .ln .bad{animation:jolt .34s ease-out both}
.litany.in .ln:nth-child(3) .bad{animation-delay:.5s}
.litany.in .ln:nth-child(4) .bad{animation-delay:.85s}
.litany.in .ln:nth-child(6) .bad{animation-delay:1.65s}
@keyframes jolt{0%{transform:translate(0,0)}35%{transform:translate(-2px,1px) rotate(-1.5deg)}70%{transform:translate(2px,-1px) rotate(1deg)}100%{transform:translate(0,0)}}
@media (prefers-reduced-motion: reduce){
 .tl{opacity:1}.sk line.cur{opacity:1}
 .beat.in .tl,.beat.in .sk line.cur,.beat.in .bob,.litany.in .pf,.litany.in .pm1,.litany.in .pm2,.litany.in #cs-main,.litany.in .mound,.litany.in .ln .bad{animation:none}
}

.ghstar{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:11.5px;text-decoration:none;border:1px solid var(--hair2);padding:6px 11px;color:var(--ink)}
.ghstar:hover{border-color:var(--ink);color:var(--ink)}
.ghstar b{font-weight:700}
.ghstar .st{opacity:.5}
@media (max-width:760px){.ghstar{display:none}}