:root {
  --ink:#e7e2d8;
  --paper:#101310;
  --paper-light:#f0eee8;
  --lime:#d6f269;
  --red:#d83a2f;
  --muted:#98a095;
  --line:rgba(231,226,216,.16);
}

* { box-sizing:border-box; }

html { min-width:320px; min-height:100%; overflow-x:hidden; background:var(--paper); }

body { margin:0; min-height:100vh; color:var(--ink); font-family:'Space Grotesk',sans-serif; background:var(--paper); }

a { -webkit-tap-highlight-color:transparent; }

.register-page {
  min-height:100vh;
  min-height:100svh;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:grid;
  place-items:center;
  padding:clamp(70px,7vh,96px) 24px clamp(34px,5vh,58px);
  background:
    radial-gradient(circle at 50% 18%,rgba(214,242,105,.11),transparent 30%),
    radial-gradient(circle at 84% 16%,rgba(216,58,47,.15),transparent 28%),
    var(--paper);
}

.register-page > * { position:relative; z-index:1; }

.register-page:after {
  background:repeating-linear-gradient(135deg,transparent 0 29px,rgba(231,226,216,.18) 30px 31px,transparent 32px 64px);
  opacity:.45;
}

.register-page:before,.register-page:after {
  content:"";
  position:absolute;
  z-index:-1;
  aspect-ratio:1;
  border:1px solid var(--line);
  border-radius:50%;
  pointer-events:none;
}

.register-page:before { width:min(47vw,700px); right:-16vw; top:-30vw; }
.register-page:after { width:min(40vw,600px); left:-18vw; bottom:-27vw; border-color:rgba(216,58,47,.28); }

.topline {
  position:absolute;
  top:clamp(24px,4vh,40px);
  left:clamp(22px,5vw,72px);
  right:clamp(22px,5vw,72px);
  display:flex;
  justify-content:space-between;
  color:var(--muted);
  font:500 9px 'DM Mono',monospace;
  letter-spacing:.16em;
}

.register-card { width:min(760px,100%); display:grid; justify-items:center; }

.profile-wrap {
  position:relative;
  width:clamp(118px,10vw,156px);
  aspect-ratio:1;
  padding:7px;
  border:1px solid rgba(231,226,216,.72);
  border-radius:50%;
  background:var(--paper-light);
  color:inherit;
  text-decoration:none;
  box-shadow:0 7px 0 rgba(0,0,0,.34),0 0 44px rgba(214,242,105,.1);
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s;
}

.profile-wrap:before { content:""; position:absolute; inset:-8px; border:1px solid rgba(216,58,47,.58); border-radius:50%; pointer-events:none; }
.profile-wrap:hover,.profile-wrap:focus-visible { transform:translateY(-5px) rotate(-2deg); box-shadow:0 12px 0 rgba(0,0,0,.38),0 0 65px rgba(214,242,105,.19); outline:none; }
.profile-image { width:100%; height:100%; display:block; object-fit:cover; object-position:center; border-radius:50%; }
.profile-status { position:absolute; right:4px; bottom:12px; width:16px; height:16px; border:4px solid var(--paper-light); border-radius:50%; background:var(--lime); }

.brand-stage {
  width:100%;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  gap:clamp(26px,5vw,66px);
  margin:clamp(40px,5vh,58px) auto clamp(30px,4vh,42px);
}

h1 { margin:0; font-size:clamp(82px,9vw,126px); line-height:.73; letter-spacing:-.1em; font-weight:600; text-align:left; }
h1 em { font-family:Georgia,serif; font-weight:400; letter-spacing:-.13em; margin-left:.1em; }

.collab-mark { font:300 clamp(45px,5vw,66px)/1 'Space Grotesk',sans-serif; }

.kakobuy-card {
  min-width:0;
  display:grid;
  justify-items:center;
  gap:8px;
  padding:clamp(16px,2vw,21px) clamp(12px,2vw,18px) 14px;
  border:1px solid rgba(231,226,216,.72);
  background:var(--paper-light);
  color:#17201d;
  text-decoration:none;
  transform:rotate(1.5deg);
  box-shadow:7px 7px 0 rgba(216,58,47,.48);
  transition:transform .35s cubic-bezier(.2,.8,.2,1),background .35s,box-shadow .35s;
}

.kakobuy-card:hover,.kakobuy-card:focus-visible { transform:translateY(-5px) rotate(-1.5deg); background:#fff; box-shadow:10px 10px 0 var(--red); outline:none; }
.kakobuy-card img { width:min(190px,19vw); max-width:100%; height:auto; display:block; }
.kakobuy-card span { color:var(--red); font:500 8px 'DM Mono',monospace; letter-spacing:.13em; }

.supporting-copy { margin:0 auto 20px; max-width:480px; color:var(--muted); text-align:center; font:400 11px/1.6 'DM Mono',monospace; }

.register-button {
  width:min(650px,100%);
  min-height:76px;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:17px 21px 17px 24px;
  border:1px solid rgba(231,226,216,.68);
  background:rgba(255,255,255,.035);
  color:var(--ink);
  text-decoration:none;
  transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s;
}

.register-button:before { content:""; position:absolute; inset:0; z-index:-1; background:var(--lime); transform:translateX(-101%); transition:transform .45s cubic-bezier(.16,1,.3,1); }
.register-button:after { content:""; position:absolute; inset:5px; border:1px solid rgba(231,226,216,.16); pointer-events:none; }
.register-button span { display:flex; flex-direction:column; gap:6px; }
.register-button small { color:var(--red); font:500 8px 'DM Mono',monospace; letter-spacing:.14em; }
.register-button strong { font-size:13px; letter-spacing:.045em; }
.register-button b { font:400 28px Arial,sans-serif; transition:transform .3s; }
.register-button:hover,.register-button:focus-visible { color:#17201d; transform:translateY(-5px); box-shadow:9px 9px 0 var(--red); outline:none; }
.register-button:hover:before,.register-button:focus-visible:before { transform:translateX(0); }
.register-button:hover b,.register-button:focus-visible b { transform:translate(5px,-5px); }
.register-button:active { transform:translateY(-1px); box-shadow:4px 4px 0 var(--red); }

.trust-note { margin:14px 0 0; color:var(--muted); font:400 8px 'DM Mono',monospace; letter-spacing:.07em; }
.trust-note span { color:var(--lime); }

@media (max-width:700px) {
  .register-page { place-items:start center; padding:76px 18px 30px; overflow-x:hidden; overflow-y:auto; }
  .register-page:before { width:115vw; right:-60vw; top:-32vw; }
  .register-page:after { width:90vw; left:-56vw; bottom:-40vw; }
  .topline { top:22px; left:20px; right:20px; }
  .register-card { width:min(430px,100%); }
  .profile-wrap { width:92px; padding:5px; box-shadow:0 5px 0 rgba(0,0,0,.34),0 0 35px rgba(214,242,105,.1); }
  .profile-wrap:before { inset:-6px; }
  .profile-status { right:0; bottom:7px; width:13px; height:13px; border-width:3px; }
  .brand-stage { gap:8px; margin:42px auto 31px; }
  h1 { width:max-content; font-size:clamp(52px,15.5vw,68px); text-align:center; }
  h1 em { margin-left:0; }
  .collab-mark { font-size:31px; }
  .kakobuy-card { gap:5px; padding:10px 7px 8px; box-shadow:4px 4px 0 rgba(216,58,47,.48); }
  .kakobuy-card img { width:min(116px,30vw); }
  .kakobuy-card span { font-size:6px; letter-spacing:.08em; }
  .supporting-copy { max-width:330px; margin-bottom:17px; font-size:9px; }
  .register-button { min-height:68px; padding:15px 17px 15px 19px; }
  .register-button strong { font-size:12px; }
  .register-button b { font-size:25px; }
  .trust-note { font-size:7px; }
}

@media (max-width:365px) {
  .brand-stage { gap:6px; }
  h1 { font-size:48px; }
  .collab-mark { font-size:27px; }
  .kakobuy-card img { width:100px; }
}

@media (max-height:760px) and (min-width:701px) {
  .register-page { padding-top:54px; padding-bottom:30px; }
  .profile-wrap { width:112px; }
  .brand-stage { margin:28px auto 25px; }
  h1 { font-size:86px; }
  .register-button { min-height:68px; }
}

@media (prefers-reduced-motion:reduce) {
  *,*:before,*:after { transition-duration:.01ms!important; animation-duration:.01ms!important; animation-iteration-count:1!important; }
}