@font-face{font-family:Hand;src:url('assets/abysmal-gaze.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Elite;src:url('assets/special-elite.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
:root{color-scheme:light;--paper:#f8f8fc;--ink:#080909;--violet:#4c20f4;--cyan:#00b8ce;--acid:#d8ff00;--pink:#f22c7b}
*{box-sizing:border-box}
html{min-height:100%;background:var(--paper)}
body{margin:0;min-height:100svh;background:var(--paper);color:var(--ink);font-family:Elite,'Courier New',monospace;transition:background-color .32s,color .32s}
.masthead{position:absolute;top:max(30px,env(safe-area-inset-top));left:3.3%;z-index:2;font-size:clamp(14px,1.1vw,18px);letter-spacing:.03em;line-height:1.5}
.page{min-height:100svh;display:grid;align-items:center;padding:110px 2.8% 70px}
.composition{width:100%;transform:translateY(2vh)}
h1{margin:0;font-size:inherit;font-weight:400}
.identity{display:block;width:100%;padding:0 0 8px;border:0;background:transparent;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.word{display:flex;align-items:center;justify-content:center;white-space:nowrap;font-family:Hand,cursive;font-size:18vw;line-height:1.35;font-weight:400}
.word-half{display:inline-flex;align-items:center}
.glyph{display:inline-block;transform:rotate(var(--tilt,-2deg));transition:color .24s,transform .38s cubic-bezier(.2,.8,.2,1);transform-origin:50% 75%}
.word-half:first-child .glyph:nth-child(1){--color:var(--violet);--tilt:5deg}
.word-half:first-child .glyph:nth-child(2){--color:var(--cyan);--tilt:-4deg}
.word-half:first-child .glyph:nth-child(3){--color:var(--acid);--tilt:1deg}
.word-half:first-child .glyph:nth-child(4){--color:var(--pink);--tilt:-3deg}
.word-half:first-child .glyph:nth-child(5){--color:var(--paper);--tilt:2deg}
.word-half:last-child .glyph:nth-child(1){--color:var(--violet);--tilt:-3deg}
.word-half:last-child .glyph:nth-child(2){--color:var(--cyan);--tilt:3deg}
.word-half:last-child .glyph:nth-child(3){--color:var(--acid);--tilt:-2deg}
.word-half:last-child .glyph:nth-child(4){--color:var(--pink);--tilt:3deg}
.word-half:last-child .glyph:nth-child(5){--color:var(--paper);--tilt:6deg}
.question{padding-inline:.015em}
.scratch{display:block;width:100%;height:clamp(35px,5.5vw,90px);margin-top:-1.7vw;overflow:visible;transition:color .24s,transform .4s}
.scratch-accent{transition:stroke .24s}
.email{display:table;margin:clamp(25px,4vh,65px) auto 0;padding:14px 8px;color:inherit;font-size:clamp(14px,1.1vw,18px);line-height:1.5;text-decoration:none;text-underline-offset:6px;transition:color .24s,transform .35s}
.email:hover{text-decoration:underline;text-decoration-color:var(--pink)}
.identity:focus-visible,.email:focus-visible{outline:2px dashed var(--pink);outline-offset:10px}
body.is-active{background:var(--ink);color:var(--paper)}
.is-active .glyph{color:var(--color);transform:rotate(calc(var(--tilt) * -1)) translateY(-.01em)}
.is-active .scratch{color:var(--acid);transform:rotate(-.5deg)}
.is-active .scratch-accent{stroke:var(--pink)}
.is-active .email{transform:translateY(4px)}
@media(max-width:640px){
 .masthead{top:max(26px,env(safe-area-inset-top));left:7%;font-size:14px}
 .page{padding:110px 6% 70px}
 .composition{transform:none}
 .word{flex-direction:column;font-size:29vw;line-height:1.15;gap:4vw}
 .word-half:first-child{align-self:flex-start}
 .word-half:last-child{align-self:flex-end}
 .scratch{height:42px;margin-top:12px}
 .email{font-size:14px;margin-top:36px;padding-block:16px}
}
@media(max-height:500px) and (min-width:641px){.page{padding-top:75px;padding-bottom:25px}.composition{transform:none}.masthead{top:20px}.word{font-size:min(15.2vw,40vh)}.email{margin-top:12px}.scratch{height:36px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important}}