@font-face{font-family:'Helv';src:url('../assets/fonts/Helvetica.woff') format('woff'),url('../assets/fonts/Helvetica.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Helv';src:url('../assets/fonts/Helvetica-Oblique.woff') format('woff'),url('../assets/fonts/Helvetica-Oblique.ttf') format('truetype');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Helv';src:url('../assets/fonts/Helvetica-Bold.woff') format('woff'),url('../assets/fonts/Helvetica-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'VCR';src:url('../assets/fonts/VCR.woff') format('woff'),url('../assets/fonts/VCR.ttf') format('truetype');font-weight:400;font-display:swap}

:root{
  --light:#ffffff;
  --dark:#000000;
  --on-light:#000000;
  --on-dark:#ffffff;

  --akz-pink:#ffffff;
  --akz-cyan:#cfcfcf;
  --akz-violet:#8c8c8c;
  --akz-lime:#ffffff;
  --akz-orange:#b3b3b3;

  --paper:var(--dark);
  --el-inv:1;
  --el-blend:screen;

  --f:'Helv','Helvetica Neue',Helvetica,Arial,sans-serif;
  --f-vcr:'VCR','Helv',monospace;
  --ease:cubic-bezier(.16,1,.3,1);
  --gutter:clamp(1rem,3.5vw,3rem);
  --fade-t:7svh;

  --fade-b:7svh;
}

@property --spin{syntax:'<angle>';inherits:false;initial-value:0deg}

body.is-invert{
  --light:#000000;
  --dark:#ffffff;
  --on-light:#ffffff;
  --on-dark:#000000;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--dark);color:var(--on-dark);
  font-family:var(--f);line-height:1.5;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
body.is-booting{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:currentColor;color:var(--light)}
:focus-visible{outline:2px solid currentColor;outline-offset:4px}

.backdrop{position:fixed;inset:0;z-index:-1;background:var(--dark)}
.sec{position:relative;overflow:hidden}

.frame{position:fixed;left:14px;right:14px;top:14px;bottom:14px;z-index:92;pointer-events:none;overflow:hidden}
.frame::before{content:'';position:absolute;inset:0;border:1px solid color-mix(in srgb,var(--on-dark) 16%,transparent)}
.frame i{position:absolute;width:20px;height:20px;border:2px solid color-mix(in srgb,var(--on-dark) 78%,transparent)}
.frame__c--tl{left:-2px;top:-2px;border-right:0;border-bottom:0}
.frame__c--tr{right:-2px;top:-2px;border-left:0;border-bottom:0}
.frame__c--bl{left:-2px;bottom:-2px;border-right:0;border-top:0}
.frame__c--br{right:-2px;bottom:-2px;border-left:0;border-top:0}
.frame__scan{position:absolute;left:0;right:0;top:0;height:2px;background:color-mix(in srgb,var(--on-dark) 14%,transparent);animation:scan-y 9s linear infinite}
@keyframes scan-y{from{transform:translateY(0)}to{transform:translateY(100svh)}}

.spine{
  position:fixed;right:12px;top:50%;transform:translateY(-50%) rotate(90deg);z-index:89;
  font-family:var(--f-vcr);font-size:.6rem;letter-spacing:.42em;text-transform:uppercase;
  color:color-mix(in srgb,var(--on-dark) 46%,transparent);white-space:nowrap;pointer-events:none;
}

::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:var(--dark)}
::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--on-dark) 34%,transparent);border:2px solid var(--dark)}
::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--on-dark) 60%,transparent)}

.sec--light{--paper:var(--light);color:var(--on-light);--el-blend:multiply;--el-inv:0}
.sec--dark {--paper:var(--dark); color:var(--on-dark); --el-blend:screen;  --el-inv:1}
body.is-invert .sec--light{--el-blend:screen;  --el-inv:1}
body.is-invert .sec--dark {--el-blend:multiply;--el-inv:0}

:root{--trk:rgba(146,146,146,.42);--trk-hi:rgba(190,190,190,.52)}

.el,.boot__img{filter:invert(var(--el-inv));user-select:none;-webkit-user-drag:none}

.el{position:absolute;pointer-events:none;z-index:1;max-width:none;
    mix-blend-mode:var(--el-blend);transform:translateY(var(--ty,0))}

.boot{
  position:fixed;inset:0;z-index:200;background:var(--light);color:var(--on-light);
  --el-inv:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.6rem;
  transition:opacity .5s var(--ease),visibility .5s;
}
body.is-invert .boot{--el-inv:1}
.boot.is-done{opacity:0;visibility:hidden}
.boot__img{width:min(230px,44vw);image-rendering:pixelated}
.boot__bar{width:min(230px,44vw);height:3px;background:currentColor;opacity:.18;position:relative;overflow:hidden}
.boot__bar span{position:absolute;inset:0 100% 0 0;background:var(--on-light);transition:right .16s linear}
.boot__pct{font-family:var(--f-vcr);font-size:.95rem;letter-spacing:.14em;color:var(--on-light);opacity:.6}
.boot__log{width:min(250px,46vw);font-family:var(--f-vcr);font-size:.74rem;letter-spacing:.08em;line-height:1.7;color:var(--on-light);opacity:.72}
.boot__log div{opacity:0;transform:translateY(4px);transition:opacity .16s,transform .16s}
.boot__log div.on{opacity:1;transform:none}

.ctl{
  position:fixed;right:var(--gutter);bottom:calc(var(--gutter) - .3rem);z-index:95;
  display:flex;flex-direction:column;align-items:flex-end;gap:.55rem;
  mix-blend-mode:difference;
  opacity:0;transition:opacity .8s var(--ease) .2s;
}
.is-lit .ctl{opacity:1}
.ctl__b{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.42rem .9rem;
  border:1px solid rgba(255,255,255,.5);border-radius:999px;
  font-family:var(--f-vcr);font-size:clamp(.62rem,.8vw,.74rem);
  letter-spacing:.16em;text-transform:uppercase;line-height:1;
  color:#fff;background:transparent;
  cursor:pointer;position:relative;
  transition:transform .25s var(--ease),box-shadow .35s var(--ease),border-color .35s;
}
.ctl__b:hover{transform:translateY(-2px);border-color:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.35) inset,0 8px 26px rgba(255,255,255,.18)}
.ctl__b:active{transform:translateY(0) scale(.96)}
.ctl__b[aria-pressed="true"]{box-shadow:0 0 0 1px rgba(255,255,255,.5) inset,0 0 22px rgba(255,255,255,.22)}

.inv__dot{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.35;transition:opacity .3s,box-shadow .3s}
.ctl__inv[aria-pressed="true"] .inv__dot{opacity:1;box-shadow:0 0 10px currentColor}

.ctl__music::before{
  content:'';position:absolute;inset:-3px;border-radius:999px;padding:1px;
  background:conic-gradient(from var(--spin),transparent 0 72%,rgba(255,255,255,.9) 86%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:spin-cw 3.2s linear infinite;
  opacity:.85;pointer-events:none;
}
.ctl__music[aria-pressed="false"]::before{opacity:.18;animation-play-state:paused}
.music__eq{display:flex;align-items:flex-end;gap:3px;height:11px}
.music__eq i{width:3px;background:currentColor;transform:scaleY(.35);transform-origin:bottom}
.music__eq i:nth-child(1){height:40%}
.music__eq i:nth-child(2){height:85%}
.music__eq i:nth-child(3){height:100%}
.music__eq i:nth-child(4){height:70%}
.music__eq i:nth-child(5){height:50%}
.ctl__music[aria-pressed="true"] .music__eq i{animation:eq .95s ease-in-out infinite}
.ctl__music[aria-pressed="true"] .music__eq i:nth-child(2){animation-delay:.12s}
.ctl__music[aria-pressed="true"] .music__eq i:nth-child(3){animation-delay:.24s}
.ctl__music[aria-pressed="true"] .music__eq i:nth-child(4){animation-delay:.36s}
.ctl__music[aria-pressed="true"] .music__eq i:nth-child(5){animation-delay:.48s}
@keyframes eq{0%,100%{transform:scaleY(.32)}50%{transform:scaleY(1)}}
.music__word b{font-weight:400}
.music__word [data-on]{display:none}
.music__word [data-off]{display:inline}
.ctl__music[aria-pressed="true"] .music__word [data-on]{display:inline}
.ctl__music[aria-pressed="true"] .music__word [data-off]{display:none}

.ctl__vol{
  display:inline-flex;align-items:center;gap:.6rem;
  border:1px solid rgba(255,255,255,.5);border-radius:999px;
  padding:.4rem .9rem;cursor:default;
  color:#fff;font-family:var(--f-vcr);font-size:clamp(.62rem,.8vw,.74rem);
  letter-spacing:.16em;text-transform:uppercase;line-height:1;
  transition:box-shadow .35s var(--ease),border-color .35s;
}
.ctl__vol:hover{border-color:#fff}
.ctl__vol span{opacity:.55}
.vol{
  appearance:none;-webkit-appearance:none;
  width:96px;height:16px;background:transparent;cursor:pointer;display:block;
}
.vol::-webkit-slider-runnable-track{height:1px;background:currentColor;opacity:.5}
.vol::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:9px;height:9px;border-radius:50%;
  background:currentColor;margin-top:-4px;box-shadow:0 0 8px rgba(255,255,255,.5);
}
.vol::-moz-range-track{height:1px;background:currentColor;opacity:.5}
.vol::-moz-range-thumb{width:9px;height:9px;border-radius:50%;background:currentColor;border:0;box-shadow:0 0 8px rgba(255,255,255,.5)}

.stage{
  position:absolute;inset:0;margin:auto;

  width:max(100vw, calc(100svh * 16 / 9));
  height:max(100svh, calc(100vw * 9 / 16));
  container-type:size;
  background:var(--paper);
  --vtop:calc(50% - 50svh);
  --vbot:calc(50% + 50svh);
  -webkit-mask-image:linear-gradient(to bottom,
      transparent var(--vtop),
      #000 calc(var(--vtop) + var(--fade-t)),
      #000 calc(var(--vbot) - var(--fade-b)),
      transparent var(--vbot));
          mask-image:linear-gradient(to bottom,
      transparent var(--vtop),
      #000 calc(var(--vtop) + var(--fade-t)),
      #000 calc(var(--vbot) - var(--fade-b)),
      transparent var(--vbot));
}

.hero .stage{--fade-t:0}
.contact .stage{--fade-b:0}
.lay{position:absolute;margin:0;z-index:5;line-height:1;letter-spacing:-.02em;font-weight:400;transform:translateY(var(--ty,0))}

.trk{
  position:absolute;inset:0;width:100%;height:100%;z-index:3;
  pointer-events:none;mix-blend-mode:difference;
  opacity:0;transition:opacity 1.6s var(--ease) .25s;
}
.trk.is-on{opacity:1}

.hero{height:100svh;display:grid;place-items:center}

.hero .stage{background:transparent}
.el--star-a{left:66.30%;top:-12.41%;width:31.46%}
.el--star-b{left:-10.78%;top:12.13%;width:60.78%}

.el--star-a,.el--star-b{transform:translateY(var(--ty,0)) rotate(var(--spin))}
.el--star-a{animation:spin-cw 128s linear infinite}
.el--star-b{animation:spin-ccw 173s linear infinite}
@keyframes spin-cw {to{--spin:360deg}}
@keyframes spin-ccw{to{--spin:-360deg}}
.el--dice  {left:32.45%;top:19.26%;width:35.10%}

.lay--water{
  left:50%;top:52%;transform:translate(-50%,var(--ty,0)) rotate(-8deg);
  font-size:18cqw;font-style:italic;white-space:nowrap;z-index:3;
  color:transparent;-webkit-text-stroke:1px color-mix(in srgb,var(--on-dark) 26%,transparent);
  letter-spacing:-.02em;user-select:none;
}

.lay--azuka{
  left:50%;top:46%;transform:translate(-50%,var(--ty,0));
  font-size:6.4cqw;font-style:italic;white-space:nowrap;letter-spacing:.02em;
  color:#000;-webkit-text-fill-color:#000;
  -webkit-text-stroke:2px rgba(255,255,255,.85);
  filter:drop-shadow(0 0 10px rgba(255,255,255,.20));
  transition:filter .45s var(--ease);
}
.lay--azuka:hover{filter:drop-shadow(0 0 14px rgba(255,255,255,.35));animation:azka-jit .13s steps(2) infinite}
.lay--azuka::before,.lay--azuka::after{
  content:attr(data-text);position:absolute;inset:0;pointer-events:none;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.45);
}
.lay--azuka::before{animation:azka-glitch-a 4.3s steps(1,end) infinite}
.lay--azuka::after {animation:azka-glitch-b 4.3s steps(1,end) infinite}
.azuka__in{display:inline-block;animation:azka-pop .8s var(--ease) .35s both}
@keyframes azka-jit{
  0%{transform:translate(calc(-50% - 1px),var(--ty,0)) translateY(1px)}
  50%{transform:translate(calc(-50% + 1px),var(--ty,0)) translateY(-1px)}
  100%{transform:translate(calc(-50% - 1px),var(--ty,0)) translateY(0)}
}
@keyframes azka-pop{from{opacity:0;transform:translateY(16px) scale(.7);filter:blur(10px)}to{opacity:1;transform:none;filter:none}}
@keyframes azka-glitch-a{0%,86%,100%{transform:translate(-3px,0)}88%{transform:translate(-7px,2px)}92%{transform:translate(-1px,-2px)}94%{transform:translate(-4px,1px)}}
@keyframes azka-glitch-b{0%,86%,100%{transform:translate(3px,0)}88%{transform:translate(7px,-2px)}92%{transform:translate(1px,2px)}94%{transform:translate(4px,-1px)}}

.lay--meta{
  left:50%;top:60%;transform:translate(-50%,var(--ty,0));
  font-family:var(--f-vcr);font-size:1.3cqw;letter-spacing:.32em;text-transform:uppercase;
  color:var(--on-dark);opacity:.75;white-space:nowrap;text-align:center;
}
.meta__caret{display:inline-block;width:.5em;height:1.05em;margin-left:.5em;background:var(--on-dark);vertical-align:-.18em;animation:blink 1.1s steps(1) infinite}
@keyframes blink{0%,55%{opacity:1}56%,100%{opacity:0}}

.badge{position:absolute;left:73%;top:10%;width:9cqw;z-index:5;color:#fff;opacity:0;transition:opacity 1s var(--ease) .5s;mix-blend-mode:difference;pointer-events:none}
.is-lit .badge{opacity:.92}
.badge svg{width:100%;height:auto;display:block;overflow:visible;animation:badge-spin 18s linear infinite}
.badge text{font-family:var(--f-vcr);font-size:10px;letter-spacing:.2em}
.badge i{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-style:normal;font-size:1.5cqw;animation:twinkle 2.4s ease-in-out infinite}
@keyframes badge-spin{to{transform:rotate(360deg)}}
@keyframes twinkle{0%,100%{opacity:.4;transform:translate(-50%,-50%) scale(.8) rotate(0)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.2) rotate(90deg)}}
.spk{position:absolute;z-index:5;font-style:normal;font-size:2.7cqw;pointer-events:none;opacity:.95;text-shadow:0 0 18px currentColor}
.spk--1{left:9%;top:21%;color:var(--akz-lime);animation:spk 3.2s ease-in-out infinite}
.spk--2{left:86%;top:48%;color:var(--akz-pink);animation:spk 2.7s ease-in-out .4s infinite}
.spk--3{left:25%;top:64%;color:var(--akz-violet);animation:spk 3.7s ease-in-out .9s infinite}
@keyframes spk{0%,100%{transform:scale(.7) rotate(0);opacity:.3}50%{transform:scale(1.25) rotate(90deg);opacity:1}}

.cue{position:absolute;bottom:1.5rem;left:50%;transform:translateX(-50%);z-index:6;padding:.6rem}
.cue i{display:block;width:1px;height:34px;background:currentColor;opacity:.3;position:relative;overflow:hidden}
.cue i::after{content:'';position:absolute;inset:0;background:currentColor;animation:sd 2s cubic-bezier(.65,0,.35,1) infinite}
.cue i{transition:opacity .3s,box-shadow .3s}
.cue:hover i{opacity:.95;box-shadow:0 0 14px currentColor}
@keyframes sd{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

.machine{height:100svh;display:flex;flex-direction:column;position:relative}

.machine .stage{z-index:1;background:transparent}

.el--flower{
  height:104svh;width:auto;
  left:calc(50cqw - 56.3svh);
  top:calc(50cqh - 52svh);
  transform:translateY(var(--ty,0)) rotate(var(--spin));
  animation:spin-cw 214s linear infinite;
}
.machine__stage{position:relative;flex:1;min-height:0;z-index:2}
#pspCanvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y}

.machine__loading{position:absolute;inset:auto 0 50% 0;text-align:center;z-index:3;transition:opacity .5s}
.machine__loading.is-off{opacity:0;pointer-events:none}
.spin{display:inline-block;width:11px;height:11px;border:1px solid currentColor;border-top-color:transparent;border-radius:50%;opacity:.5;animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.rail{
  position:absolute;left:var(--gutter);bottom:clamp(1.6rem,5vh,3.2rem);z-index:6;
  display:flex;align-items:baseline;gap:.45rem;font-family:var(--f-vcr);color:var(--on-dark);
}
.rail b{font-size:clamp(1.8rem,4vw,3rem);font-weight:400;line-height:1;font-variant-numeric:tabular-nums;text-shadow:0 0 14px rgba(255,255,255,.4)}
.rail i{font-style:normal;font-size:.9rem;opacity:.45}
.rail__open{
  margin-left:.7rem;align-self:center;width:36px;height:36px;display:grid;place-items:center;
  border:1px solid currentColor;font-size:1rem;line-height:1;
  transition:background .25s,color .25s,transform .4s var(--ease);
}
.rail__open:hover{background:var(--on-dark);color:var(--dark);transform:translate(3px,-3px) scale(1.06);box-shadow:5px 5px 0 color-mix(in srgb,var(--on-dark) 30%,transparent)}
.rail.is-swap b{animation:flick .3s steps(2) both}
@keyframes flick{0%{opacity:0}50%,100%{opacity:1}}

.keys{position:absolute;right:var(--gutter);bottom:clamp(1.6rem,5vh,3.2rem);z-index:6;display:flex;gap:.3rem;color:var(--on-dark)}
kbd{font-family:var(--f-vcr);font-size:.8rem;border:1px solid currentColor;opacity:.45;padding:.1rem .35rem;min-width:24px;text-align:center;transition:opacity .25s,box-shadow .25s,transform .25s}
kbd:hover{opacity:.95;transform:translateY(-1px);box-shadow:0 0 8px currentColor}

.about{height:100svh;display:grid;place-items:center}
.about .stage{background:transparent}
.el--cd-a  {left:-5.99%;top:-23.61%;width:41.35%}
.el--cd-b  {left:82.08%;top:45.83%;width:29.90%}
.lay--abouth{left:50%;top:26%;transform:translate(-50%,var(--ty,0));font-family:var(--f-vcr);font-size:4.4cqw;letter-spacing:.06em}
.lay--bio{
  left:50%;top:38%;width:44%;margin-left:-22%;
  font-size:1.78cqw;line-height:1.3;letter-spacing:0;
  text-align:justify;text-justify:inter-word;
}
.lay--bio p{margin:0}
.lay--bio p+p{margin-top:.15em}

.contact{height:100svh;display:grid;place-items:center}
.contact .stage{background:transparent}
.contact .stage{
  top:auto;bottom:0;margin-block:0;
  --vtop:calc(100% - 100svh);--vbot:100%;
}
.el--cards{left:26.67%;top:-3.52%;width:46.67%}
.lay--contact{left:23.54%;top:40.0%;font-size:3.78cqw}
.lay--me     {left:64.27%;top:40.0%;font-size:3.78cqw}

.lay--abouth,.lay--contact,.lay--me,.hl{
  background:linear-gradient(92deg,#f2f2f2,#b9b9b9 45%,#7d7d7d);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.hl{font-style:normal}

.lay--abouth,.lay--contact,.lay--me{
  filter:drop-shadow(0 0 14px rgba(255,255,255,.22)) drop-shadow(0 0 34px rgba(255,255,255,.10));
}
.lay--bio{filter:drop-shadow(0 0 10px rgba(255,255,255,.08))}
.lay--bio .hl{filter:drop-shadow(0 0 12px rgba(255,255,255,.30)) drop-shadow(0 0 26px rgba(255,255,255,.12))}
.lay--meta{filter:drop-shadow(0 0 10px rgba(255,255,255,.35))}
.lay--water{filter:drop-shadow(0 0 18px rgba(255,255,255,.10))}
.spine{filter:drop-shadow(0 0 8px rgba(255,255,255,.25))}
.cue{filter:drop-shadow(0 0 8px rgba(255,255,255,.30))}
.ctl__b,.ctl__vol{box-shadow:0 0 12px rgba(255,255,255,.10)}
.ctl__vol:hover{box-shadow:0 0 18px rgba(255,255,255,.22)}
.hero .badge{filter:drop-shadow(0 0 10px rgba(255,255,255,.25))}

.lay--abouth,.lay--contact,.lay--me,.lay--bio,.lay--meta,.lay--water,.hl{
  transition:transform .5s var(--ease),filter .5s var(--ease);
}
.lay--abouth:hover{transform:translate(-50%,var(--ty,0)) scale(1.06)}
.lay--contact:hover,.lay--me:hover{transform:translateY(var(--ty,0)) scale(1.06)}
.lay--bio:hover{transform:translateY(var(--ty,0)) scale(1.03)}
.lay--meta:hover{transform:translate(-50%,var(--ty,0)) scale(1.05)}
.lay--water:hover{transform:translate(-50%,var(--ty,0)) rotate(-8deg) scale(1.04)}
.hl{display:inline-block}
.hl:hover{transform:scale(1.1)}

.el,.lay{will-change:transform}
.rev{opacity:0;filter:blur(6px)}
.rev.is-shown{opacity:1;filter:none;visibility:visible;
  transition:opacity 1.1s var(--ease),filter 1.1s var(--ease)}

.el.rev{filter:invert(var(--el-inv)) blur(9px)}
.el.rev.is-shown{filter:invert(var(--el-inv));
  transition:opacity 1.1s var(--ease),filter 1.1s var(--ease)}
.rev.is-shown.d1{transition-delay:.08s}
.rev.is-shown.d2{transition-delay:.16s}

[data-rise]{opacity:0;transform:translateY(18px);filter:blur(6px)}
.is-lit [data-rise]{opacity:1;transform:none;filter:none;transition:opacity .9s var(--ease) .1s,transform 1s var(--ease) .1s,filter .9s var(--ease) .1s}

@media (max-width:820px){
  .keys{display:none}

  .hero,.about,.contact{height:100svh;min-height:0}
  .stage{
    position:absolute;inset:0;margin:0;
    width:100%;height:100%;
    container-type:size;
    -webkit-mask-image:none;mask-image:none;
  }

  .el{height:auto}

  .el--star-a{left:44%;top:2%;width:64%;height:auto}
  .el--star-b{left:-24%;top:66%;width:98%;height:auto}

  .el--dice{width:auto;height:32cqh;left:calc(50cqw - 16.24cqh);top:20cqh}
  .lay--water{font-size:30cqw;top:56cqh}
  .lay--azuka{top:55cqh;font-size:13cqw;left:50%;transform:translate(-50%,var(--ty,0));white-space:nowrap}
  .lay--meta{top:61cqh;font-size:3.4cqw;letter-spacing:.22em}
  .badge{left:63%;top:5%;width:24cqw}
  .badge i{font-size:4.5cqw}
  .badge text{font-size:8px}
  .spk{font-size:6cqw}

  .lay--abouth{left:50%;top:14%;transform:translate(-50%,var(--ty,0));font-size:8cqw}
  .lay--bio{left:7%;top:24%;width:86%;margin-left:0;font-size:4.4cqw;text-align:left}
  .el--cd-a{left:-18%;top:-2%;width:62%;height:auto}
  .el--cd-b{left:58%;top:74%;width:54%;height:auto}

  .el--cards{width:auto;height:44cqh;left:calc(50cqw - 16.65cqh);top:26cqh}
  .lay--contact,.lay--me{
    left:0;right:0;width:100%;text-align:center;
    font-size:12cqw;white-space:nowrap;
  }
  .lay--contact{top:15cqh}
  .lay--me     {top:73cqh}

  .el--flower{width:auto;height:74cqh;left:calc(50cqw - 40.1cqh);top:13cqh}

  .frame{left:8px;right:8px;top:8px;bottom:8px}
  .frame i{width:14px;height:14px}
  .spine{display:none}
}

.cur{position:fixed;left:0;top:0;z-index:9990;pointer-events:none;mix-blend-mode:difference;opacity:0}
html.has-cur .cur.is-on{opacity:1}
.cur i{position:absolute;left:0;top:0;display:block}
.cur__core{width:12px;height:12px;margin-left:-6px;margin-top:-6px}
.cur__core::before{content:'';position:absolute;inset:0;background:#fff;transform:rotate(45deg);transition:transform .18s var(--ease)}
.cur__ring{width:30px;height:30px;margin-left:-15px;margin-top:-15px;border:1px solid rgba(255,255,255,.55);border-radius:50%;opacity:0;transform:scale(.35);transition:transform .22s var(--ease),opacity .22s}
.cur__trail{width:24px;height:24px;margin-left:-12px;margin-top:-12px;border:1px solid rgba(255,255,255,.35);border-radius:50%}
.cur.is-down .cur__core::before{transform:rotate(45deg) scale(.62)}
.cur.is-hov .cur__ring{opacity:1;transform:scale(1)}
@media (hover:hover) and (pointer:fine){
  html.has-cur *{cursor:none !important}
}

.rip{position:fixed;left:0;top:0;z-index:9991;width:12px;height:12px;margin-left:-6px;margin-top:-6px;border:1.5px solid rgba(255,255,255,.85);border-radius:50%;pointer-events:none;mix-blend-mode:difference;opacity:0;transform:scale(.4)}
.rip.is-go{animation:rip .55s var(--ease) forwards}
@keyframes rip{0%{opacity:.85;transform:scale(.4)}100%{opacity:0;transform:scale(15)}}

.viz{
  position:fixed;left:var(--gutter);bottom:calc(var(--gutter) + 1.1rem);z-index:88;
  pointer-events:none;mix-blend-mode:difference;
  width:min(220px,34vw);height:46px;opacity:.95;
}

.chrono{
  position:fixed;left:calc(var(--gutter) + 1.3rem);top:calc(var(--gutter) + .6rem);z-index:90;
  font-family:var(--f-vcr);font-size:.72rem;letter-spacing:.24em;line-height:2;
  color:color-mix(in srgb,var(--on-dark) 55%,transparent);pointer-events:none;
}
.chrono span{display:block;white-space:nowrap}
#chronoTime::after{content:'';display:inline-block;width:.5em;height:1em;margin-left:.35em;background:currentColor;vertical-align:-.16em;animation:blink 1.1s steps(1) infinite}
#chronoHits{opacity:.65}

.progress{
  position:fixed;left:0;bottom:0;width:100%;height:2px;z-index:93;
  background:color-mix(in srgb,var(--on-dark) 80%,transparent);
  transform-origin:left;transform:scaleX(0);pointer-events:none;
  mix-blend-mode:difference;
}

.spark{
  position:fixed;z-index:9992;width:4px;height:4px;background:#fff;
  pointer-events:none;mix-blend-mode:difference;
  animation:spark .5s ease-out forwards;
}
@keyframes spark{
  0%{opacity:1;transform:translate(0,0) scale(1) rotate(45deg)}
  100%{opacity:0;transform:translate(var(--sx,0),var(--sy,-14px)) scale(.2) rotate(45deg)}
}

body.g-tick main{animation:microglitch .2s steps(3) both}
@keyframes microglitch{
  0%{transform:translateX(0)}
  30%{transform:translateX(-3px) skewX(-1.2deg)}
  60%{transform:translateX(2px) skewX(.8deg)}
  100%{transform:translateX(0) skewX(0)}
}
body.g-egg main{animation:eggglitch .85s steps(5) both}
@keyframes eggglitch{
  0%{transform:translateX(0);opacity:1}
  20%{transform:translateX(-6px) skewX(-2deg);opacity:.6}
  40%{transform:translateX(5px) skewX(1.6deg);opacity:1}
  60%{transform:translateX(-3px) skewX(-1deg)}
  80%{transform:translateX(3px) skewX(.8deg)}
  100%{transform:none;opacity:1}
}

.eggflash{
  position:fixed;inset:0;z-index:120;display:grid;place-items:center;
  pointer-events:none;opacity:0;visibility:hidden;
  font-family:var(--f-vcr);letter-spacing:.1em;
}
.eggflash.is-go{animation:eggburn .95s steps(6) both}
.eggflash b{
  font-size:clamp(3.5rem,16vw,13rem);font-weight:700;
  color:#000;mix-blend-mode:difference;
  text-shadow:0 0 34px rgba(255,255,255,.55),0 0 90px rgba(255,255,255,.25);
}
body.is-invert .eggflash b{color:#fff}
@keyframes eggburn{
  0%{opacity:0;transform:scale(1.25) skewX(0);visibility:visible}
  10%{opacity:1;transform:scale(1) skewX(-5deg)}
  28%{opacity:.35;transform:translateX(-16px) skewX(4deg)}
  46%{opacity:1;transform:translateX(12px) skewX(-3deg)}
  64%{opacity:.4;transform:translateX(-7px) skewX(2deg)}
  82%{opacity:.8;transform:translateX(4px) skewX(-1deg)}
  100%{opacity:0;transform:scale(1.08) skewX(0);visibility:hidden}
}

.cta{
  position:absolute;left:50%;bottom:5.5svh;transform:translate(calc(-50% + var(--mx,0)),var(--my,0));z-index:8;
  font-family:var(--f-vcr);font-size:.8rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--on-dark);background:transparent;
  border:1px solid color-mix(in srgb,var(--on-dark) 55%,transparent);
  padding:.9em 2.1em;white-space:nowrap;
  transition:background .3s var(--ease),color .3s var(--ease),box-shadow .3s var(--ease),transform .18s var(--ease);
}
.cta:hover{background:var(--on-dark);color:var(--dark);box-shadow:0 0 26px color-mix(in srgb,var(--accent,var(--on-dark)) 45%,transparent)}
.cta::after{content:'';display:inline-block;width:.5em;height:1em;margin-left:.55em;background:currentColor;vertical-align:-.14em;animation:blink 1.1s steps(1) infinite}

.dim{
  position:fixed;inset:0;z-index:150;
  background:color-mix(in srgb,var(--dark) 55%,transparent);
  opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s;
}
.dim.is-on{opacity:1;visibility:visible}
body.is-sheet{overflow:hidden}

.sheet{
  position:fixed;left:50%;bottom:2rem;z-index:160;
  width:min(480px,94vw);
  transform:translateX(-50%) translateY(24px);
  opacity:0;visibility:hidden;
  background:var(--paper);color:var(--on-dark);
  border:1px solid color-mix(in srgb,var(--on-dark) 28%,transparent);
  box-shadow:0 24px 60px rgba(0,0,0,.5),0 0 0 1px color-mix(in srgb,var(--on-dark) 10%,transparent);
  padding:1.6rem 1.8rem 1.8rem;
  transition:opacity .35s var(--ease),transform .35s var(--ease),visibility .35s;
}
.sheet.is-open{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.sheet__head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.1rem}
.sheet__head span{font-family:var(--f-vcr);font-size:.82rem;letter-spacing:.28em;text-transform:uppercase}
.sheet__x{background:none;border:1px solid color-mix(in srgb,var(--on-dark) 30%,transparent);color:var(--on-dark);width:30px;height:30px;font-size:.85rem;line-height:1;transform:translate(var(--mx,0),var(--my,0));transition:background .2s,color .2s,transform .16s var(--ease)}
.sheet__x:hover{background:var(--on-dark);color:var(--dark)}
.sheet__form{display:grid;gap:.9rem}
.sheet__form label{display:grid;gap:.3rem;font-family:var(--f-vcr);font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:color-mix(in srgb,var(--on-dark) 75%,transparent)}
.sheet__form input,.sheet__form select{
  width:100%;background:color-mix(in srgb,var(--on-dark) 6%,transparent);
  border:1px solid color-mix(in srgb,var(--on-dark) 32%,transparent);
  color:var(--on-dark);padding:.62em .8em;font-family:var(--f);font-size:.95rem;letter-spacing:.02em;
  border-radius:0;transition:border-color .2s,box-shadow .2s;
}
.sheet__form input:focus,.sheet__form select:focus{outline:none;border-color:var(--on-dark);box-shadow:0 0 0 2px color-mix(in srgb,var(--on-dark) 22%,transparent)}
.sheet__form select{appearance:none}
.sheet__form select option{background:var(--paper);color:var(--on-dark)}
.sheet__form input[type=date]{color-scheme:dark}
body.is-invert .sheet__form input[type=date]{color-scheme:light}
.sheet__send{
  margin-top:.3rem;font-family:var(--f-vcr);font-size:.76rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--dark);background:var(--on-dark);border:0;padding:.95em 1em;cursor:pointer;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease);
}
.sheet__send:hover{transform:translateY(-2px);box-shadow:0 8px 22px color-mix(in srgb,var(--on-dark) 30%,transparent)}
.sheet__ok{font-family:var(--f-vcr);font-size:.78rem;letter-spacing:.1em;line-height:1.6;text-align:center;padding:.4rem 0 0;opacity:.85}
.sheet__form.is-gone{display:none}

.sys{
  position:fixed;left:calc(var(--gutter) + 1.3rem);top:calc(var(--gutter) + 6.2rem);z-index:96;
  font-family:var(--f-vcr);font-size:.6rem;letter-spacing:.18em;line-height:1.9;
  color:color-mix(in srgb,var(--on-dark) 42%,transparent);text-align:left;white-space:pre;pointer-events:none;
}
.secrets{
  position:fixed;left:calc(var(--gutter) + 1.3rem);top:calc(var(--gutter) + 3.7rem);z-index:90;
  font-family:var(--f-vcr);font-size:.6rem;letter-spacing:.22em;color:color-mix(in srgb,var(--on-dark) 55%,transparent);
  pointer-events:none;
}

.crt{position:fixed;inset:0;z-index:190;background:#fff;pointer-events:none;opacity:0;visibility:hidden}
body.is-crt .crt{animation:crtOn .6s steps(4) both}
@keyframes crtOn{
  0%{opacity:1;transform:scaleY(.02);visibility:visible}
  35%{opacity:1;transform:scaleY(1)}
  50%{opacity:.15}
  60%{opacity:1}
  75%{opacity:.4}
  100%{opacity:0;visibility:hidden}
}

.sleep{
  position:fixed;inset:0;z-index:180;background:var(--dark);color:var(--on-dark);
  display:grid;place-items:center;opacity:0;visibility:hidden;
  transition:opacity 1s var(--ease),visibility 1s;
}
body.is-sleep .sleep{opacity:1;visibility:visible}
.sleep b{font-family:var(--f-vcr);font-size:clamp(1.1rem,3vw,2rem);letter-spacing:.4em;text-transform:uppercase;text-align:center;line-height:2}
.sleep b::after{content:'▮';animation:blink 1s steps(1) infinite}
.sleep span{display:block;font-size:.62em;letter-spacing:.3em;opacity:.5;text-transform:uppercase}

.ghost{
  position:fixed;left:0;right:0;top:14svh;z-index:4;text-align:center;
  font-style:italic;font-size:clamp(3rem,12vw,9rem);letter-spacing:.02em;
  color:transparent;-webkit-text-stroke:1px color-mix(in srgb,var(--on-light) 22%,transparent);
  pointer-events:none;user-select:none;opacity:0;transition:opacity 1.2s var(--ease);
}
body.is-ghost .ghost{opacity:1}

.crash{
  position:fixed;inset:0;z-index:205;background:#fff;color:#000;
  display:grid;place-content:center;gap:.8rem;text-align:center;font-family:var(--f-vcr);
  opacity:0;visibility:hidden;transition:opacity .2s;
}
body.is-crash .crash{opacity:1;visibility:visible}
.crash b{font-size:clamp(1.4rem,4vw,2.6rem);letter-spacing:.2em}
.crash b::after{content:'▮';animation:blink .9s steps(1) infinite}
.crash span{font-size:.8rem;letter-spacing:.14em;opacity:.6;line-height:1.7}

.vcrl{
  position:fixed;inset:0;z-index:140;pointer-events:none;opacity:0;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.14) 0 2px,transparent 2px 4px);
}
body.is-vcr .vcrl{opacity:1;transition:opacity .1s}
body.is-vcr main{animation:vcrtrack 1.6s steps(12) both}
@keyframes vcrtrack{
  0%{transform:translateY(0) skewX(0)}
  25%{transform:translateY(-14px) skewX(-1.6deg)}
  50%{transform:translateY(10px) skewX(1.2deg)}
  75%{transform:translateY(-6px) skewX(-.6deg)}
  100%{transform:none}
}

body.is-y2k .frame{box-shadow:0 0 0 2px var(--accent,#f0c),0 0 46px color-mix(in srgb,var(--accent,#f0c) 55%,transparent)}
body.is-y2k .cur__core::before{background:var(--accent,#f0c)}
body.is-y2k .cta:hover{box-shadow:0 0 26px color-mix(in srgb,var(--accent,#f0c) 45%,transparent)}
body.is-y2k .toast.is-go{border:1px solid var(--accent,#f0c)}

.ch__dot{width:9px;height:9px;border:1px solid currentColor;border-radius:50%;display:inline-block;transition:background .3s,border-color .3s,box-shadow .3s}
body[data-ch="cyan"] .ch__dot{background:#0cf;border-color:#0cf;box-shadow:0 0 8px #0cf}
body[data-ch="pink"] .ch__dot{background:#f0c;border-color:#f0c;box-shadow:0 0 8px #f0c}
body[data-ch="green"] .ch__dot{background:#0f6;border-color:#0f6;box-shadow:0 0 8px #0f6}
body[data-ch="amber"] .ch__dot{background:#fb0;border-color:#fb0;box-shadow:0 0 8px #fb0}
body.is-y2k[data-ch] ::selection{background:var(--accent,#f0c)}
::selection{background:#000;color:#fff}
body.is-invert ::selection{background:#fff;color:#000}

html.is-flip .sec,html.is-flip .frame{transform:scaleX(-1)}

body.is-music #viz{transform:scale(1.85);transform-origin:left bottom;z-index:94}

.is-glitch{animation:rgbSplit .26s steps(3) both}
@keyframes rgbSplit{
  0%{text-shadow:-2px 0 #f0c,2px 0 #0cf;transform:translateX(-1px)}
  50%{text-shadow:2px 0 #f0c,-2px 0 #0cf;transform:translateX(1px)}
  100%{text-shadow:none;transform:none}
}

body.is-fast main{animation:rubspring .35s var(--ease)}
@keyframes rubspring{
  0%{transform:translateY(0)}
  30%{transform:translateY(-6px)}
  60%{transform:translateY(3px)}
  100%{transform:none}
}

body.is-sel main{animation:selglitch .3s steps(4) both}
@keyframes selglitch{
  0%{transform:none}
  25%{transform:translateX(-2px)}
  50%{transform:translateX(2px)}
  75%{transform:translateX(-1px)}
  100%{transform:none}
}

.kdust{
  position:fixed;z-index:9992;pointer-events:none;font-family:var(--f-vcr);
  font-size:.9rem;color:#000;mix-blend-mode:difference;
  animation:kdust 1s ease-out forwards;
}
@keyframes kdust{
  from{opacity:1;transform:translateY(0) rotate(0)}
  to{opacity:0;transform:translateY(-26px) rotate(12deg)}
}

.toast{
  position:fixed;left:50%;bottom:calc(var(--gutter) + 3rem);z-index:165;
  transform:translateX(-50%) translateY(10px);
  font-family:var(--f-vcr);font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;
  color:#fff;background:#000;padding:.6em 1.2em;white-space:nowrap;
  opacity:0;visibility:hidden;
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.toast.is-go{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}

.ctx{
  position:fixed;z-index:199;min-width:190px;background:var(--paper);
  border:1px solid color-mix(in srgb,var(--on-dark) 30%,transparent);
  box-shadow:0 16px 40px rgba(0,0,0,.4);padding:.3rem;
  font-family:var(--f-vcr);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
}
.ctx b{display:block;padding:.55em .9em;color:var(--on-dark);cursor:pointer;transition:background .15s,color .15s}
.ctx b:hover{background:var(--on-dark);color:var(--paper)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .cue i::after,.rail.is-swap b{animation:none}
  .el--star-a,.el--star-b,.el--flower{animation:none;transform:translateY(var(--ty,0))}
  .rev{opacity:1;filter:none;visibility:visible;transition:none}
  .el.rev,.el.rev.is-shown{opacity:1;filter:invert(var(--el-inv));transition:none}
  .el,.lay{--ty:0 !important}
  [data-rise]{opacity:1;transform:none;filter:none;transition:none}
  .rail__open{transition:none}
  .ctl__music::before,.music__eq i,.lay--azuka,.lay--azuka::before,.lay--azuka::after,.azuka__in{animation:none !important}
  .lay--azuka{text-shadow:none;filter:none}
  .ctl__b{transition:none}
  .lay--abouth,.lay--contact,.lay--me,.lay--bio,.lay--meta,.lay--water,.hl{transition:none}
  .badge svg,.badge i,.spk,.meta__caret{animation:none !important}
  .frame__scan{display:none}
  .badge,.spk,.meta__caret{opacity:.9}
  .meta__caret{animation:none}
  .cur__ring,.cur__trail,.cur__core,.rip{transition:none}
  .boot__log div{transition:none}
}