:root {
  color-scheme:dark;
  --bg:#080909;
  --ink:#f1eee5;
  --muted:#a4a49b;
  --gold:#c6a565;
  --rule:#8e78463d;
  --rose:#e58b9f;
  --green:#b5d889;
  --sans:'Outfit','Zen Kaku Gothic New',sans-serif;
  --jp:'Zen Kaku Gothic New',sans-serif;
}
* {
  box-sizing:border-box;
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:32px;
}
body {
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:400 16px/1.6 var(--sans);
  -webkit-font-smoothing:antialiased;
}
a {
  color:inherit;
  text-decoration:none;
}
button {
  font:inherit;
  color:inherit;
  background:none;
  border:0;
  cursor:pointer;
}
a,button {
  -webkit-tap-highlight-color:transparent;
}
button:disabled {
  cursor:default;
}
button:focus-visible,a:focus-visible {
  outline:2px solid var(--gold);
  outline-offset:7px;
}
::selection {
  background:#c6a56555;
}
img {
  max-width:100%;
  display:block;
}
svg {
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.35;
  stroke-linecap:round;
  stroke-linejoin:round;
}
[hidden] {
  display:none!important;
}
.shell {
  width:calc(100% - 112px);
  max-width:1400px;
  margin-inline:auto;
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}
.skip-link {
  position:fixed;
  top:12px;
  left:12px;
  z-index:20;
  padding:12px 20px;
  background:var(--ink);
  color:var(--bg);
  transform:translateY(-160%);
}
.skip-link:focus {
  transform:translateY(0);
}
.site-header {
  height:88px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.brand {
  display:flex;
  gap:14px;
  align-items:center;
  white-space:nowrap;
}
.brand-symbol {
  display:block;
  width:64px;
  height:52px;
  flex-shrink:0;
  mix-blend-mode:screen;
}
.brand-symbol image {
  filter:contrast(1.4) saturate(.85);
}
.brand-wordmark {
  display:flex;
  flex-direction:column;
  gap:7px;
  line-height:1;
}
.brand-wordmark>span:first-child {
  font-size:22px;
  font-weight:500;
  letter-spacing:.19em;
}
.brand-wordmark>span:last-child {
  font-size:9px;
  letter-spacing:.48em;
  color:var(--gold);
}
.site-header nav {
  display:flex;
  gap:42px;
  font:500 14px var(--jp);
}
.site-header nav a {
  padding:14px 0;
}
.site-header nav a:hover {
  color:var(--gold);
}
.site-header nav span {
  margin-left:5px;
  font:22px var(--sans);
}
.hero {
  --board-height:min(680px,calc(100svh - 224px));
  position:relative;
  max-width:calc(var(--board-height) * 490 / 568 + 80px);
  padding-bottom:24px;
  isolation:isolate;
}
.eyebrow {
  font:400 11px/1.6 var(--sans);
  letter-spacing:.19em;
  color:var(--gold);
  display:flex;
  align-items:center;
  gap:13px;
  margin:0;
}
/* The board and its music share one set of controls. */
.pinball { min-width:0; position:relative; }
.game-heading { min-height:44px; display:flex; align-items:center; justify-content:space-between; padding-inline:5%; }
.game-tools { display:flex; align-items:center; }
.game-tools button { min-width:44px; min-height:44px; padding:8px; color:var(--muted); font-size:11px; }
.game-tools button:hover { color:var(--ink); }
.game-score { display:flex; align-items:center; gap:17px; color:var(--gold); font-size:9px; line-height:1; letter-spacing:.08em; }
.score-value { font-size:24px; font-weight:400; margin-left:5px; font-variant-numeric:tabular-nums; }
.time-value { color:var(--ink); font-size:17px; font-variant-numeric:tabular-nums; border-left:1px solid var(--rule); padding-left:17px; }
.pinball-board { position:relative; height:var(--board-height); }
#pinball-canvas { width:100%; height:100%; display:block; touch-action:pan-y; }
.pinball[data-mode=playing] #pinball-canvas { cursor:pointer; }
.board-overlay { position:absolute; bottom:22%; left:12%; right:12%; text-align:center; pointer-events:none; background:radial-gradient(ellipse,#080909ee,#08090900 72%); padding:23px 0; color:var(--gold); font-size:12px; letter-spacing:.22em; }
.game-message { position:absolute; bottom:32%; left:10%; right:10%; text-align:center; color:#f0d39c; font:400 12px/1.8 var(--jp); pointer-events:none; text-shadow:0 2px 10px #000,0 0 12px #000; }
.music-controls { display:flex; align-items:center; gap:28px; padding-inline:5%; }
.music-preview { flex:1; min-width:0; }
.combo-value { min-height:12px; margin:0 0 4px; font:400 9px/12px var(--sans); letter-spacing:.08em; color:var(--gold); }
.sequence { display:grid; gap:6px; }
.sequence-line { height:12px; display:grid; grid-template-columns:51px repeat(32,minmax(0,1fr)); align-items:center; gap:2px; color:var(--rose); }
.sequence-line:nth-child(2) { color:var(--green); }
.sequence-line:nth-child(3) { color:#78c8d8; }
.sequence-line>span { font:400 9px/1.2 var(--jp); }
.sequence-line i { display:block; width:min(100%,6px); aspect-ratio:1; min-width:2px; justify-self:center; border-radius:50%; background:#33352f; }
.sequence-line i.on { background:currentColor; }
.sequence-line i.current { outline:1px solid currentColor; outline-offset:2px; }
.flip-button { flex-shrink:0; min-width:158px; height:68px; border:1px solid var(--gold); padding:10px 18px; color:#f1d399; font:400 12px var(--jp); letter-spacing:.045em; touch-action:manipulation; transition:background .15s,transform .1s; }
.flip-button:hover { background:#c6a56512; }
.flip-button:active { background:#c6a56527; transform:translateY(2px); }
.pinball[data-mode=playing] .flip-button { font-size:19px; letter-spacing:.22em; }
.pinball[data-mode=playing] .flip-button::after { content:'TAP / SPACE'; display:block; font:400 8px var(--sans); letter-spacing:.12em; margin-top:6px; }
.round-result { position:absolute; inset:12% 10% 10%; background:#080909ec; display:flex; flex-direction:column; justify-content:center; align-items:center; border:1px solid var(--rule); padding:20px; text-align:center; backdrop-filter:blur(10px); }
.result-eyebrow { font-size:9px; letter-spacing:.2em; color:var(--gold); margin:0 0 16px; }
.result-title { font:400 56px/1.2 var(--sans); margin:0; letter-spacing:-.025em; font-variant-numeric:tabular-nums; }
.result-stats { font-size:10px; letter-spacing:.1em; color:var(--muted); margin:12px 0 21px; }
.round-result button,.round-result .download-link { min-height:44px; font:400 12px var(--jp); padding:10px 18px; }
.listen-button { color:var(--gold); border:1px solid var(--gold); min-width:190px; }
.round-result .save-button,.round-result .download-link { margin-top:4px; color:var(--gold); }
.round-result .replay-button { margin-top:5px; color:var(--muted); font-size:11px; }
.round-result button:hover,.round-result .download-link:hover { color:var(--ink); }
.pinball[data-mode=paused] #pinball-canvas { opacity:.4; }
.pinball[data-state=unavailable] #play-status { position:static; width:auto; height:auto; clip-path:none; padding:20px; white-space:normal; color:var(--muted); }
.no-script { color:var(--muted); font-size:12px; text-align:center; }
.project-strip {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  padding-block:23px;
  position:relative;
  z-index:3;
}
.project-link {
  display:flex;
  align-items:center;
  gap:17px;
  padding:0 27px;
  min-height:66px;
  position:relative;
}
.project-link:first-child {
  padding-left:0;
}
.project-link:last-child {
  padding-right:0;
}
.project-link+.project-link {
  border-left:1px solid var(--rule);
}
.project-number {
  color:var(--gold);
  font-size:16px;
  font-weight:300;
}
.project-dot {
  width:10px;
  height:10px;
  border-radius:50%;
  flex-shrink:0;
  background:var(--gold);
}
.rose {
  background:var(--rose);
}
.green {
  background:var(--green);
}
.project-name {
  font-size:18px;
  font-weight:400;
  letter-spacing:.03em;
}
.project-link img {
  height:57px;
  width:57px;
  border-radius:15px;
  object-fit:cover;
  margin-left:auto;
  transition:transform .35s;
}
.project-arrow {
  color:var(--gold);
  font-size:25px;
  margin-left:16px;
  transition:transform .25s;
}
.project-link:hover .project-arrow {
  transform:translate(3px,-3px);
}
.project-link:hover img {
  transform:rotate(-7deg) scale(1.06);
}
.works {
  padding-top:63px;
}
.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:54px;
  gap:30px;
}
.section-heading h2 {
  font:400 clamp(21px,2.1vw,31px)/1.8 var(--jp);
  letter-spacing:.075em;
  margin:0;
}
.section-heading .eyebrow {
  font-size:10px;
  white-space:nowrap;
}
.section-heading .eyebrow::after {
  content:'';
  height:1px;
  background:var(--rule);
  width:85px;
  margin-left:20px;
}
.work-count {
  letter-spacing:.08em;
}
.mobile-break {
  display:none;
}
.work {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7.5%;
  padding-block:0 68px;
  scroll-margin-top:44px;
}
.work+.work {
  border-top:1px solid var(--rule);
  padding-top:68px;
}
.work-art {
  aspect-ratio:1.12;
  position:relative;
  display:grid;
  place-items:center;
  overflow:hidden;
  isolation:isolate;
  border:1px solid #ffffff09;
}
.tonight-art {
  background:#151013;
  color:#c88397;
}
.rhyme-art {
  background:#111913;
  color:#93b174;
}
.work-art>img {
  width:39%;
  height:auto;
  aspect-ratio:1;
  border-radius:23%;
  z-index:1;
  box-shadow:0 24px 55px #0006;
}
.art-caption,.art-index {
  position:absolute;
  left:26px;
  font-size:10px;
  letter-spacing:.18em;
}
.art-caption {
  top:22px;
}
.art-index {
  bottom:22px;
}
.art-star {
  position:absolute;
  right:26px;
  bottom:12px;
  font-size:31px;
  font-weight:300;
}
.tonight-orbits {
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  transform:rotate(-23deg);
}
.tonight-orbits i {
  position:absolute;
  width:86%;
  height:60%;
  border:1px solid #c8839738;
  border-radius:50%;
}
.tonight-orbits i+i {
  transform:rotate(65deg);
  width:85%;
  height:68%;
  border-color:#c8839724;
}
.vowels {
  position:absolute;
  inset:0;
  color:#91a97936;
}
.vowels i {
  position:absolute;
  font:400 90px 'Cormorant Garamond',serif;
  transform:rotate(-18deg);
}
.vowels i:nth-child(1) {
  left:12%;
  top:9%;
}
.vowels i:nth-child(2) {
  right:16%;
  top:12%;
  transform:rotate(13deg);
}
.vowels i:nth-child(3) {
  right:9%;
  top:40%;
  transform:rotate(-8deg);
}
.vowels i:nth-child(4) {
  left:11%;
  bottom:15%;
  transform:rotate(-8deg);
}
.vowels i:nth-child(5) {
  right:26%;
  bottom:5%;
  transform:rotate(18deg);
}
.work-copy {
  padding-block:21px;
}
.work-copy .eyebrow {
  font-size:10px;
  letter-spacing:.15em;
}
.work-copy .project-dot {
  width:6px;
  height:6px;
}
.work-copy h3 {
  font:400 clamp(34px,3.3vw,51px)/1.2 var(--sans);
  margin:22px 0 23px;
  letter-spacing:-.025em;
}
.work-copy h3.japanese-title {
  font:500 clamp(30px,2.7vw,40px)/1.35 var(--jp);
  letter-spacing:.045em;
}
.rose-text {
  color:var(--rose);
}
.work-lead {
  font:400 20px/1.75 var(--jp);
  letter-spacing:.055em;
  margin:0 0 18px;
}
.work-description {
  font:400 13px/2.1 var(--jp);
  color:var(--muted);
  margin:0 0 26px;
}
.store-links {
  display:flex;
  gap:28px;
  flex-wrap:wrap;
}
.store-links a {
  font-size:15px;
  padding:9px 0;
  border-bottom:1px solid #bcb9a64f;
  display:flex;
  gap:24px;
  align-items:center;
}
.store-links a:hover {
  color:var(--gold);
  border-color:var(--gold);
}
.store-links a span {
  font-size:20px;
  color:var(--gold);
}
.work-utility {
  display:flex;
  flex-wrap:wrap;
  gap:8px 18px;
  margin-top:22px;
  color:#aaa99f;
  font:400 10px/1.8 var(--jp);
}
.work-utility a {
  padding-block:4px;
}
.work-utility a:hover {
  text-decoration:underline;
  text-underline-offset:4px;
}
.contact {
  border-top:1px solid var(--rule);
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-block:95px 110px;
  gap:40px;
}
.contact h2 {
  font:400 clamp(30px,3.5vw,48px)/1.65 var(--jp);
  letter-spacing:.07em;
  margin:24px 0;
}
.contact-link {
  font-weight:300;
  font-size:clamp(19px,2.5vw,36px);
  border-bottom:1px solid var(--gold);
  padding:14px 0 18px;
  letter-spacing:-.02em;
  white-space:nowrap;
}
.contact-link span {
  display:inline-block;
  color:var(--gold);
  margin-left:35px;
  transition:transform .2s;
}
.contact-link:hover span {
  transform:translate(4px,-4px);
}
.site-footer {
  border-top:1px solid var(--rule);
  display:flex;
  gap:35px;
  padding-block:27px 36px;
  font-size:10px;
  color:#a5a399;
  letter-spacing:.055em;
}
.site-footer>a:last-child {
  margin-left:auto;
  font-size:9px;
}
.site-footer a:hover {
  color:var(--gold);
}
@media(max-width:1000px) {
  .shell {
    width:calc(100% - 72px);
  }
  .project-link {
    padding:0 22px;
    gap:14px;
  }
  .project-arrow {
    margin-left:4px;
  }
  .section-heading .eyebrow::after {
    width:30px;
    margin-left:0;
  }
  .work {
    gap:6%;
  }
  .work-copy {
    padding-block:0;
  }
  .work-copy h3 {
    margin-top:15px;
    margin-bottom:18px;
  }
  .work-lead {
    font-size:18px;
  }
  .work-description {
    font-size:12px;
    margin-bottom:18px;
  }
  .store-links {
    gap:22px;
  }
  .contact {
    gap:25px;
  }
  .contact-link span {
    margin-left:18px;
  }
}
@media(min-width:701px) and (max-width:1000px) {
  .music-controls { gap:12px; padding-inline:0; }
  .flip-button { min-width:135px; padding-inline:10px; }
  .sequence-line { gap:2px; grid-template-columns:40px repeat(32,minmax(0,1fr)); }
}
@media(max-width:700px) {
  html {
    scroll-padding-top:20px;
  }
  .shell {
    width:calc(100% - 40px);
  }
  .site-header {
    height:80px;
  }
  .brand {
    gap:9px;
  }
  .brand-symbol {
    width:44px;
    height:36px;
  }
  .brand-wordmark {
    gap:5px;
  }
  .brand-wordmark>span:first-child {
    font-size:15px;
    letter-spacing:.17em;
  }
  .brand-wordmark>span:last-child {
    font-size:7px;
    letter-spacing:.37em;
  }
  .site-header nav {
    gap:19px;
    font-size:11px;
  }
  .site-header nav span {
    font-size:15px;
    margin-left:0;
  }
  .hero { padding-bottom:20px; max-width:none; }
  .pinball-board { height:auto; aspect-ratio:490 / 568; margin-inline:-20px; }
  .game-heading { padding-inline:0; }
  .score-value { font-size:21px; }
  .time-value { font-size:15px; }
  .music-controls { padding-inline:0; gap:12px; flex-wrap:wrap; }
  .music-preview { flex-basis:100%; }
  .sequence-line { grid-template-columns:60px repeat(32,minmax(0,1fr)); gap:3px; }
  .sequence-line>span { font-size:10px; }
  .flip-button { width:100%; height:56px; font-size:13px; }
  .pinball[data-mode=playing] .flip-button { font-size:16px; }
  .pinball[data-mode=playing] .flip-button::after { display:inline; margin-left:20px; }
  .board-overlay { bottom:18%; padding:15px 0; }
  .game-message { font-size:10px; }
  .round-result { inset:2% 6%; padding:13px; }
  .result-title { font-size:42px; }
  .result-eyebrow { font-size:8px; margin-bottom:9px; }
  .result-stats { font-size:8px; margin:8px 0 12px; }
  .project-strip {
    padding-block:14px;
    grid-template-columns:1fr;
  }
  .project-link,.project-link:first-child,.project-link:last-child {
    min-height:70px;
    padding:9px 0;
    gap:16px;
  }
  .project-link+.project-link {
    border-left:0;
    border-top:1px solid var(--rule);
  }
  .project-link img {
    width:43px;
    height:43px;
    border-radius:11px;
  }
  .project-name {
    font-size:17px;
  }
  .project-number {
    font-size:13px;
  }
  .project-dot {
    width:8px;
    height:8px;
  }
  .project-arrow {
    margin-left:7px;
    font-size:24px;
  }
  .works {
    padding-top:45px;
  }
  .section-heading {
    display:block;
    margin-bottom:29px;
  }
  .section-heading h2 {
    font-size:22px;
    letter-spacing:.055em;
    line-height:1.8;
  }
  .section-heading .eyebrow {
    margin-top:19px;
    font-size:8px;
    gap:10px;
  }
  .section-heading .eyebrow::after {
    width:auto;
    flex:1;
    margin-left:15px;
  }
  .mobile-break {
    display:block;
  }
  .work {
    grid-template-columns:1fr;
    gap:29px;
    padding-bottom:45px;
    scroll-margin-top:20px;
  }
  .work+.work {
    padding-top:45px;
  }
  .work-art {
    aspect-ratio:1.16;
  }
  .work-copy .eyebrow {
    font-size:9px;
  }
  .work-copy h3 {
    font-size:39px;
    margin-top:14px;
    margin-bottom:20px;
  }
  .work-copy h3.japanese-title {
    font-size:31px;
  }
  .work-lead {
    font-size:19px;
    line-height:1.8;
  }
  .work-description {
    font-size:13px;
    line-height:2;
  }
  .work-utility {
    font-size:10px;
    gap:9px 19px;
  }
  .store-links {
    gap:34px;
  }
  .store-links a {
    font-size:15px;
    gap:30px;
  }
  .art-caption,.art-index {
    left:20px;
    font-size:9px;
  }
  .art-caption {
    top:17px;
  }
  .art-index {
    bottom:17px;
  }
  .art-star {
    right:20px;
    bottom:8px;
  }
  .contact {
    padding-block:53px 60px;
    display:block;
  }
  .contact h2 {
    font-size:29px;
    margin:19px 0;
  }
  .contact-link {
    display:flex;
    align-items:center;
    justify-content:space-between;
    font-size:23px;
    margin-top:31px;
    padding-bottom:15px;
  }
  .contact-link span {
    font-size:28px;
  }
  .site-footer {
    display:grid;
    grid-template-columns:1fr auto;
    gap:15px 12px;
    padding-block:22px 28px;
    font-size:8px;
  }
  .site-footer>a:last-child {
    grid-column:2;
    grid-row:1;
    font-size:8px;
  }
  .site-footer>a:nth-child(2) {
    grid-column:1 / -1;
    font-size:9px;
  }
  .desktop-break {
    display:none;
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  *,*::before,*::after {
    transition:none!important;
  }
}
.cyan {
  background:#78c8d8;
}
.giga-art {
  background:#0e191d;
  color:#78bfcf;
}
.signal-rings {
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
}
.signal-rings i {
  position:absolute;
  width:57%;
  aspect-ratio:1;
  border:1px solid #78bfcf35;
  border-radius:50%;
}
.signal-rings i:nth-child(2) {
  width:80%;
  border-color:#78bfcf22;
}
.signal-rings i:nth-child(3) {
  width:104%;
  border-color:#78bfcf15;
}
.platform-note {
  font:400 11px var(--jp);
  color:var(--muted);
  align-self:center;
}
@media(min-width:701px) and (max-width:1100px) {
  .project-link {
    gap:12px;
    padding:0 18px;
  }
  .project-name {
    font-size:15px;
  }
  .project-link img {
    width:43px;
    height:43px;
  }
  .project-number {
    font-size:13px;
  }
  .project-arrow {
    font-size:21px;
    margin-left:0;
  }
}