.hero{display:grid;gap:var(--s7);align-items:center;padding-block:var(--s8) var(--s2)}
.hero-jp{font:600 clamp(17px,1vw + 13px,22px)/1.3 var(--f-jp);font-feature-settings:'palt';letter-spacing:.06em;color:var(--muted)}
.hero h1{margin-top:var(--s3);font-size:var(--t-display);line-height:1.05}
.hero .lede{margin-top:var(--s5)}
.hero .btns{margin-top:var(--s6)}
.hero-art{display:grid;gap:var(--s2);justify-items:center}
.hero-art .board{width:100%;max-width:440px}
.replay{appearance:none;cursor:pointer;padding:10px 14px;border:0;border-radius:var(--r-pill);background:none;color:var(--faint);
  font:500 var(--t-label)/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase}
.replay:hover{color:var(--fg)}
@media (min-width:920px){
  .hero{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:var(--s8);padding-top:var(--s9)}
  .hero-art .board{max-width:480px}
}
.halves{display:grid;gap:var(--s4)}
.half{padding:var(--s6) var(--s5);gap:var(--s3)}
.half-jp{font:600 clamp(44px,3vw + 30px,68px)/1 var(--f-jp);font-feature-settings:'palt';letter-spacing:.04em;color:var(--fg);margin-bottom:var(--s2)}
.half h3{margin-top:var(--s1)}
.half .more{margin-top:var(--s3);font:600 var(--t-label)/1.4 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg)}
@media (min-width:720px){.halves{grid-template-columns:repeat(2,minmax(0,1fr))}.half{padding:var(--s7) var(--s6)}}
.name-grid{display:grid;gap:var(--s6);align-items:center}
.kanji-board{aspect-ratio:1/1;display:grid;place-items:center;width:100%;max-width:400px}
.kanji-board svg{width:180px;height:180px}
@media (min-width:600px){.kanji-board svg{width:225px;height:225px}}
.words{display:grid}
.words>div{display:grid;grid-template-columns:minmax(5.5em,8.5em) minmax(0,1fr);gap:4px 18px;align-items:baseline;border-top:1px solid var(--line);padding:14px 0}
.words>div:last-child{border-bottom:1px solid var(--line)}
.words dt{font:600 clamp(22px,1vw + 18px,28px)/1.25 var(--f-jp);font-feature-settings:'palt';letter-spacing:.04em}
.words dt.long{font-size:clamp(16px,.6vw + 13px,19px);line-height:1.6;white-space:nowrap}
.words dd b{display:block;font-weight:600}
.words dd span{color:var(--muted)}
@media (min-width:860px){.name-grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:var(--s7)}}
@media (max-width:420px){.words>div{grid-template-columns:1fr}.words dt.long{white-space:normal}}
.page-hero{display:grid;gap:var(--s6);align-items:center;padding-block:var(--s8) var(--s2)}
.page-hero h1{margin-top:var(--s3)}
.page-hero .lede{margin-top:var(--s4)}
.page-hero .label [lang="ja"]{letter-spacing:.08em}
@media (min-width:920px){.page-hero{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:var(--s8);padding-top:var(--s9)}}
.plate{position:relative;justify-self:center;width:100%;max-width:440px;border-radius:12px;padding:30px 30px 26px;display:grid;gap:18px;color:#22252A;
  background:repeating-linear-gradient(90deg,rgba(0,0,0,.035) 0 1px,transparent 1px 3px),linear-gradient(135deg,#C9CDD2 0%,#AAAFB5 46%,#C4C8CD 72%,#A0A5AC 100%);
  box-shadow:inset 0 1px 0 rgba(233,228,216,.45),inset 0 -2px 5px rgba(0,0,0,.28),0 10px 24px -14px rgba(0,0,0,.6)}
.plate .lockup{height:44px;width:auto;filter:drop-shadow(0 1px 0 rgba(233,228,216,.5))}
.plate .lockup text{fill:currentColor}
.plate dl{display:grid;grid-template-columns:auto 1fr;gap:5px 16px;font:500 11.5px/1.35 var(--f-mono);letter-spacing:.12em;text-transform:uppercase}
.plate dt{opacity:1;font-weight:500}
.plate dd{font-weight:700;overflow-wrap:anywhere}
.screw{position:absolute;width:11px;height:11px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#D6D9DD,#6F747B);box-shadow:inset 0 0 0 1px rgba(0,0,0,.35)}
.screw::after{content:"";position:absolute;left:2px;right:2px;top:5px;height:1px;background:rgba(0,0,0,.55);transform:rotate(-30deg)}
.s1{top:10px;left:10px}.s2{top:10px;right:10px}.s3{bottom:10px;left:10px}.s4{bottom:10px;right:10px}
.offer .label{color:var(--faint)}
.steps{list-style:none;padding:0;display:grid;counter-reset:step}
.steps li{counter-increment:step;display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 16px;align-items:baseline;border-top:1px solid var(--line);padding:var(--s4) 0}
.steps li:last-child{border-bottom:1px solid var(--line)}
.steps li::before{content:counter(step,decimal-leading-zero);font:500 var(--t-label)/1.9 var(--f-mono);letter-spacing:.14em;color:var(--faint)}
.steps p{color:var(--muted)}
.steps b{display:block;color:var(--fg);font-weight:600}
@media (min-width:960px){
  .steps{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--s6);max-width:none}
  .steps li{grid-template-columns:minmax(0,1fr);align-content:start;gap:var(--s2);border-bottom:1px solid var(--line);padding-bottom:var(--s5)}
  .steps li+li{margin-top:0}
}
.mark-grid{display:grid;gap:var(--s6);align-items:start}
.mark-board{aspect-ratio:1/1;display:grid;place-items:center;width:100%;max-width:400px}
.mark-board svg{width:50%;height:auto}
@media (min-width:860px){
  .mark-grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:var(--s7)}
  .mark-grid.flip{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
  .mark-grid.flip>figure{order:2;justify-self:end}
}
.cta{display:grid;gap:var(--s5);align-items:center;padding:clamp(24px,4vw,52px)}
.cta h2{margin-top:var(--s2);max-width:22ch}
.cta p{color:var(--muted);margin-top:var(--s3)}
.cta .btn{justify-self:start}
@media (min-width:860px){.cta{grid-template-columns:minmax(0,1fr) auto}.cta .btn{justify-self:end}}
.founder{margin-top:var(--s5);color:var(--muted);font-size:var(--t-small)}
.email{display:inline-block;margin-top:var(--s5);font:600 clamp(28px,2.6vw + 14px,48px)/1.1 var(--f-sans);letter-spacing:-.015em;
  text-decoration:none;border-bottom:2px solid var(--line-2);padding-bottom:4px;overflow-wrap:anywhere}
.email:hover{border-color:var(--fg)}
.contact-grid{display:grid;gap:var(--s5)}
@media (min-width:860px){.contact-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.contact-grid ul{margin-top:var(--s3);color:var(--muted)}
.contact-grid li+li{margin-top:6px}
.legal{padding-top:var(--s8)}
.legal h1{margin-top:var(--s3)}
.legal .prose{margin-top:var(--s5)}
.legal .prose p{color:var(--muted)}
.legal .prose p:first-child{color:var(--fg)}
.lost{padding-block:var(--s9) var(--s2)}
.lost h1{margin-top:var(--s3)}
.lost .lede{margin-top:var(--s4)}
.lost .btns{margin-top:var(--s6)}
.plate{transition:transform .6s var(--ease)}
.plate.tilting{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .12s linear}
.plate::before,.plate::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none}
.plate::after{opacity:0;background:linear-gradient(105deg,transparent 38%,rgba(238,234,221,.55) 48%,rgba(238,234,221,.12) 54%,transparent 64%) no-repeat;background-size:300% 100%}
.plate::before{opacity:0;transition:opacity .4s var(--ease);
  background:radial-gradient(60% 120% at var(--gx,50%) 0%,rgba(238,234,221,.38),transparent 70%)}
.plate.tilting::before{opacity:1}
@media (prefers-reduced-motion:no-preference){
  .page-hero>.plate{animation:rise-art 1s var(--ease) .16s both}
  .plate::after{animation:glint 1.5s var(--ease) .9s both}
}
@keyframes glint{0%{background-position:120% 0;opacity:0}15%{opacity:1}100%{background-position:-20% 0;opacity:0}}
.brand .lockup .core{transition:fill .2s var(--ease)}
.brand:hover .lockup .core,.brand:focus-visible .lockup .core{fill:var(--red-on-ink)}
@media (prefers-reduced-motion:no-preference){.brand:hover .lockup .core,.brand:focus-visible .lockup .core{animation:coreOn .45s steps(3,end) both}}