@font-face{font-family:"Nunito";src:url(fonts/nunito.woff2) format("woff2");font-weight:200 1000;font-display:swap}
@font-face{font-family:"Quicksand";src:url(fonts/quicksand.woff2) format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:"JB Mono";src:url(fonts/jetbrains-mono.woff2) format("woff2");font-weight:100 800;font-display:swap}
@font-face{font-family:"NotoSC";src:url(fonts/noto-sc-subset.woff2) format("woff2");font-display:swap}
@font-face{font-family:"EmojiMono";src:url(fonts/noto-emoji-wave.woff2) format("woff2");font-display:swap}
:root{--gh:0px;--gw:0px;--cream:#F3EEE3;--or:#FF8A3D}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#020100;color:var(--cream);
  font-family:"Nunito","NotoSC",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
#bg{position:fixed;inset:0;pointer-events:none;background:
  radial-gradient(circle 72vw at 50% 50%,rgba(1,0,0,0) 30%,rgba(1,0,0,.55) 100%),
  radial-gradient(circle 240px at 50% 45%,rgba(255,160,96,.016),rgba(255,160,96,0)),
  radial-gradient(circle 40vw at 50% 45%,rgba(255,160,96,.05) 0%,rgba(255,160,96,.02) 25%,rgba(255,160,96,.004) 60%,rgba(255,160,96,0) 100%),
  radial-gradient(circle 42vw at 50% 45%,#030201 0%,#020100 100%) #020100}
#sky{position:fixed;inset:0;width:100vw;height:100vh;display:block}
#grain{position:fixed;inset:0;pointer-events:none;opacity:.6}
#hero{position:fixed;left:50%;top:47%;transform:translate(-50%,-50%);text-align:center;width:min(92vw,980px);
  pointer-events:none;opacity:0}
#title{margin:0;font-weight:700;font-size:clamp(34px,6.6vw,108px);letter-spacing:-.015em;line-height:1.1;
  text-shadow:0 0 40px rgba(243,238,227,.12)}
#title .wave{font-family:"EmojiMono";font-weight:400;font-size:.86em;margin-left:.2em;display:inline-block;vertical-align:-.04em}
#card{position:fixed;left:0;top:0;max-width:min(460px,86vw);font-size:14.5px;line-height:1.55;padding:11px 16px;border-radius:14px;
  background:rgba(16,10,7,.6);border:1px solid rgba(243,238,227,.12);border-left:2px solid var(--or);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 10px 34px rgba(0,0,0,.45);
  opacity:0;pointer-events:none;will-change:transform,opacity}
#card b{color:var(--or);font-weight:700;margin-right:.15em;font-family:"Nunito","NotoSC",sans-serif}
#card span{opacity:.92}
#card b::after{content:" —";color:rgba(243,238,227,.55);font-weight:400}
#card.code b{font-family:"JB Mono","NotoSC","EmojiMono",monospace;font-weight:600;font-size:.9em;letter-spacing:-.01em}
button{font:inherit;color:inherit}
#skip{position:fixed;top:20px;right:22px;padding:6px 14px;border-radius:999px;font-size:12.5px;letter-spacing:.02em;
  background:rgba(16,10,7,.35);border:1px solid rgba(243,238,227,.2);color:rgba(243,238,227,.72);cursor:pointer;opacity:0;
  transition:color .2s,border-color .2s,background .2s}
#skip:hover{color:var(--cream);border-color:rgba(243,238,227,.45);background:rgba(16,10,7,.55)}
#replay{position:fixed;left:20px;bottom:16px;padding:4px 8px;border:0;background:none;font-size:12px;letter-spacing:.03em;
  color:rgba(243,238,227,.3);cursor:pointer;opacity:0;pointer-events:none;transition:color .2s}
#replay:hover{color:rgba(243,238,227,.8)}
#fakecursor{position:fixed;left:0;top:0;width:22px;height:30px;display:none;pointer-events:none;z-index:9;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
body.hovering{cursor:pointer}
/* the name = the door to the site. Hover/focus: 'Mayrian' springs up to NAME_SCALE (centre origin) while "Hi, I'm"
   steps left and the →/👋 step right by the same growth (--gh / --gw, measured in intro.js), so the line opens up
   symmetrically around the name; an orange → slides out (absolutely placed, no re-flow) and nudges right in a loop.
   Press = relative shrink (1.08 → 1.03), release springs back. Mars leans in / looks / blinks (canvas). */
#title{--spr:cubic-bezier(.34,1.56,.64,1)}
#title .hi{display:inline-block;transition:transform .26s var(--spr)}
#name{position:relative;display:inline-block;pointer-events:none;cursor:pointer;outline:none;border-radius:12px;transform-origin:50% 55%;
  transition:color .25s ease,text-shadow .25s ease,transform .26s var(--spr)}
#name.hot{color:#FFFBF4;text-shadow:0 0 40px rgba(243,238,227,.2);transform:scale(1.08)}
#title.nhot .hi{transform:translateX(calc(-1 * var(--gh)))}
#name .arr{position:absolute;left:100%;top:.25em;width:.62em;height:.62em;margin-left:.16em;color:var(--or);pointer-events:none;
  opacity:0;transform:translateX(-.3em);transition:opacity .22s ease,transform .32s cubic-bezier(.2,.8,.2,1)}
#name .ai{display:block;width:100%;height:100%}
#name .ai svg{display:block;width:100%;height:100%;overflow:visible}
#name.hot .arr{opacity:1;transform:none;pointer-events:inherit}
#name.hot .ai{animation:arrNudge 1.1s ease-in-out .35s infinite}
@keyframes arrNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(.12em)}}
#title .wave{transition:transform .3s var(--spr)}
#name.hot + .wave{transform:translateX(calc(.95em + var(--gw)))}
#name.hot.press{transform:scale(1.03);transition-duration:.08s}
#name.press .arr{transform:translateX(.2em) scale(.92);transition-duration:.08s}
#name.press .ai{animation:none}
#name:focus-visible{outline:1px solid rgba(243,238,227,.26);outline-offset:7px}
.rm #name.hot{transform:none}
.rm #name.hot.press{transform:scale(.96)}
.rm #name .arr{transform:none!important;transition:opacity .2s ease}
.rm #name .ai{animation:none!important}
.rm #title .wave,.rm #title .hi{transition:none}
#veil{position:fixed;inset:0;background:#F7F3EE;opacity:0;pointer-events:none;z-index:8}
@media (max-width:640px){#skip{top:14px;right:14px}#card{font-size:13.5px}}