:root {
  --paper: #fff;
  --ink: #101010;
  --accent: #0749ff;
  --portrait-width: 37.5%;
  --header-height: 70px;
  --stage-padding: clamp(20px, 2.1vw, 36px);
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  color-scheme: light;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
body, h1, h2, p, figure { margin: 0; }
body { min-width: 280px; }
button, input, a { -webkit-tap-highlight-color: transparent; }
button, input { font: inherit; }
button, a { touch-action: manipulation; }
button { border-radius: 0; cursor: pointer; }
button:disabled { cursor: default; }
a { color: inherit; text-decoration: none; }
svg { display: block; flex: 0 0 auto; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
::selection { color: white; background: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
.svg-definitions { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip-link { position: fixed; left: 16px; top: 12px; z-index: 10; padding: 14px 18px; background: var(--accent); color: white; transform: translateY(-200%); }
.skip-link:focus { transform: none; }

.masthead {
  height: var(--header-height);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 var(--stage-padding);
  border-bottom: 1px solid #17171730;
}
.brand { display: flex; align-items: center; gap: 13px; width: fit-content; font-size: 46px; line-height: 1; letter-spacing: -3px; font-weight: 800; }
.brand-mark { width: 48px; height: 36px; }
.masthead-tagline { font: 11px / 1.5 var(--mono); letter-spacing: .24em; text-transform: uppercase; }
.social-link { justify-self: end; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; min-width: 48px; font-size: 19px; }
.social-link svg { width: 19px; height: 19px; }
.social-link:hover { color: var(--accent); }

.lookbook { display: grid; grid-template-columns: minmax(0, calc(100% - var(--portrait-width))) minmax(0, var(--portrait-width)); }
.stage {
  position: relative;
  height: calc(100vh - var(--header-height));
  height: calc(100svh - var(--header-height));
  min-height: 600px;
  display: grid;
  grid-template-columns: clamp(112px, 12.8vw, 205px) minmax(0, 1fr);
  grid-template-rows: 94px minmax(0, 1fr) 78px;
  column-gap: 16px;
  padding: 0 var(--stage-padding);
}
.trade-row { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 8px; padding-top: 30px; min-width: 0; }
.contract-button, .buy-button {
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 17px;
  font: 11px / 1.5 var(--mono);
  letter-spacing: .115em;
}
.contract-button { gap: 8px; min-width: 210px; max-width: calc(100% - 214px); color: var(--ink); background: transparent; border: 1px solid #17171775; text-align: left; }
.contract-prefix { flex: 0 0 auto; }
.contract-address { min-width: 0; overflow-wrap: anywhere; }
.contract-button[data-configured="true"] { font-size: 10px; letter-spacing: .02em; }
.copy-icon { width: 15px; height: 15px; margin-left: 5px; opacity: 0; }
.contract-button[data-configured="true"] .copy-icon { opacity: .6; }
.contract-button:hover { border-color: var(--accent); color: var(--accent); }
.contract-button[data-copied="true"] { color: var(--accent); border-color: var(--accent); }
.buy-button { min-width: 206px; gap: 12px; color: white; background: var(--accent); border: 1px solid var(--accent); font-weight: 700; white-space: nowrap; }
.buy-button svg { width: 16px; height: 16px; }
.buy-button:hover, .dance-button:hover, .notice-close:hover { filter: brightness(.88); }
.buy-button:active, .dance-button:active, .notice-close:active { transform: translateY(1px); }

.contact-sheet { grid-column: 1; grid-row: 2; align-self: start; display: flex; flex-direction: column; align-items: flex-start; gap: 22px; min-height: 0; padding-top: 22px; }
.pose-option { width: 100%; display: block; border: 0; padding: 0; color: var(--ink); text-align: left; background: transparent; }
.thumbnail-frame {
  display: block;
  height: clamp(135px, 22vh, 232px);
  height: clamp(135px, 22svh, 232px);
  width: 76%;
  border: 2px solid transparent;
  background: #f1f1f1;
  overflow: hidden;
}
.thumbnail-frame img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; padding: 7px 5px 0; }
.thumbnail-caption { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 10px; font: 10px / 1.5 var(--mono); letter-spacing: .1em; }
.pose-option[aria-pressed="true"] .thumbnail-frame { border-color: var(--accent); }
.pose-option[aria-pressed="true"] .pose-number { color: var(--accent); }
.pose-option:not(:disabled):hover .thumbnail-frame { border-color: #17171780; }
.pose-option[aria-pressed="true"]:hover .thumbnail-frame { border-color: var(--accent); }
.occupation { margin-top: 12px; font: 10px / 1.65 var(--mono); letter-spacing: .1em; }
.pose-stage { grid-column: 2; grid-row: 2; position: relative; min-height: 0; min-width: 0; align-self: stretch; }
.pose-stage:focus { outline: none; }
.pose-stage:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }
.figure-button { position: relative; display: block; width: 100%; height: 100%; border: 0; padding: 0; background: transparent; color: inherit; }
.figure-button:focus-visible { outline-offset: -4px; }
.pose-image { position: absolute; width: 100%; height: 100%; inset: 0; object-fit: contain; object-position: 50% 100%; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.image-status { position: absolute; bottom: 12px; left: 10%; right: 10%; padding: 12px; background: var(--paper); font: 10px / 1.5 var(--mono); text-align: center; }

.control-strip { grid-row: 3; grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; border-top: 1px solid #17171775; min-width: 0; }
.footer-tagline, .keyboard-hint, .pose-counter { font: 10px / 1.5 var(--mono); letter-spacing: .1em; }
.footer-tagline { max-width: 155px; }
.dance-control { display: flex; align-items: center; gap: clamp(12px, 2vw, 30px); }
.dance-button { min-height: 42px; min-width: 184px; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 10px 16px; border: 1px solid var(--accent); background: var(--accent); color: #fff; font: 700 11px / 1.4 var(--mono); letter-spacing: .12em; }
.dance-button:disabled { opacity: .72; }
.switch-icon { font-family: Arial, sans-serif; font-size: 20px; line-height: .8; }
.keyboard-hint { white-space: nowrap; }
.pose-counter { justify-self: end; white-space: nowrap; }

.portrait-panel { position: relative; overflow: hidden; min-width: 0; background: #282828; }
.portrait-image { position: absolute; inset: 0; height: 100%; width: 100%; object-fit: cover; object-position: 50% 46%; }
.portrait-panel figcaption { position: absolute; right: 30px; bottom: 34px; padding: 5px 0; color: #fff; font: 10px / 1.4 var(--mono); letter-spacing: .15em; text-shadow: 0 1px 4px #000; }
.status-message { position: fixed; left: 18px; bottom: 18px; z-index: 8; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.noscript-note { padding: 16px 24px; background: var(--paper); font: 12px / 1.6 var(--mono); }

.notice { position: fixed; inset: 0; width: min(480px, calc(100% - 32px)); max-height: calc(100svh - 40px); overflow: auto; margin: auto; border: 1px solid var(--ink); padding: 0; background: var(--paper); color: var(--ink); box-shadow: 0 20px 80px #0002; }
.notice:not([open]) { display: none; }
.notice::backdrop { background: #14141460; }
.notice[data-fallback="true"] { display: block; z-index: 20; box-shadow: 0 0 0 100vmax #14141470; }
.notice-content { padding: 32px; }
.notice-mark { width: 38px; height: 30px; margin-bottom: 30px; }
.notice h2 { font-size: clamp(24px, 4vw, 32px); line-height: 1.1; letter-spacing: -.045em; }
.notice p { margin-top: 14px; font-size: 15px; line-height: 1.65; }
.notice-close { display: flex; justify-content: space-between; align-items: center; gap: 24px; min-height: 46px; width: 100%; margin-top: 28px; padding: 12px 16px; background: var(--accent); color: #fff; border: 1px solid var(--accent); font: 700 11px / 1.5 var(--mono); letter-spacing: .13em; }
.manual-copy { margin-top: 24px; }
.manual-copy label { display: block; font: 10px / 1.5 var(--mono); letter-spacing: .1em; margin-bottom: 7px; }
.manual-copy input { width: 100%; min-height: 46px; border: 1px solid #888; padding: 12px; border-radius: 0; background: var(--paper); color: var(--ink); font: 12px / 1.5 var(--mono); }

@media (min-width: 901px) and (max-width: 1199px) {
  .stage { column-gap: 8px; }
  .contract-button { min-width: 180px; max-width: calc(100% - 195px); padding-inline: 12px; }
  .buy-button { min-width: 187px; padding-inline: 12px; font-size: 10px; }
  .keyboard-hint { display: none; }
  .dance-button { min-width: 155px; font-size: 10px; }
  .footer-tagline { font-size: 9px; max-width: 100px; }
  .pose-counter { font-size: 9px; }
  .thumbnail-frame { width: 85%; }
  .thumbnail-caption { font-size: 9px; gap: 5px; }
  .occupation { font-size: 9px; }
}

@media (max-width: 900px) {
  :root { --header-height: 64px; --stage-padding: 22px; }
  .masthead { grid-template-columns: 1fr auto; }
  .brand { font-size: 39px; gap: 10px; letter-spacing: -2.6px; }
  .brand-mark { width: 40px; height: 30px; }
  .masthead-tagline { display: none; }
  .lookbook { display: block; }
  .stage { min-height: 570px; grid-template-columns: clamp(96px, 18vw, 145px) minmax(0, 1fr); grid-template-rows: 88px minmax(0, 1fr) 76px; }
  .trade-row { padding-top: 22px; }
  .contact-sheet { gap: 20px; padding-top: 14px; }
  .thumbnail-frame { width: 90%; height: clamp(138px, 20svh, 205px); }
  .portrait-panel { height: 74svh; min-height: 430px; max-height: 900px; }
  .portrait-image { object-position: 50% 41%; }
  .portrait-panel figcaption { right: 22px; bottom: 28px; }
  .keyboard-hint { display: none; }
}

@media (max-width: 480px) {
  :root { --header-height: 60px; --stage-padding: 16px; }
  .brand { font-size: 36px; }
  .brand-mark { width: 36px; height: 28px; }
  .stage { min-height: 510px; grid-template-columns: 76px minmax(0, 1fr); grid-template-rows: 132px minmax(0, 1fr) 70px; column-gap: 8px; }
  .trade-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; align-content: start; padding-top: 14px; }
  .contract-button { min-width: 0; max-width: none; width: 100%; padding: 11px 12px; min-height: 44px; justify-content: flex-start; }
  .contract-address { flex: 1; }
  .contract-button[data-configured="true"] { font-size: 10.5px; }
  .buy-button { min-height: 44px; min-width: 0; width: 100%; padding: 10px 12px; justify-content: space-between; }
  .contact-sheet { padding-top: 8px; gap: 17px; }
  .thumbnail-frame { width: 72px; height: clamp(102px, 15.5svh, 148px); }
  .thumbnail-frame img { padding: 4px 2px 0; }
  .thumbnail-caption { padding-top: 7px; gap: 4px; font-size: 8px; letter-spacing: .05em; }
  .caption-divider { display: none; }
  .thumbnail-caption > span:last-child { flex-basis: 100%; }
  .occupation { font-size: 8px; margin-top: 1px; letter-spacing: .04em; }
  .control-strip { grid-template-columns: 1fr auto; gap: 7px; }
  .footer-tagline { max-width: 100px; font-size: 8px; line-height: 1.6; letter-spacing: .06em; }
  .dance-control { justify-self: end; }
  .dance-button { min-width: 164px; min-height: 44px; padding-inline: 12px; font-size: 10px; }
  .pose-counter { display: none; }
  .portrait-panel { height: 78svh; min-height: 420px; }
  .notice-content { padding: 25px; }
}

@media (min-width: 901px) and (max-height: 740px) {
  .stage { grid-template-rows: 80px minmax(0, 1fr) 66px; }
  .trade-row { padding-top: 22px; }
  .contact-sheet { padding-top: 12px; gap: 18px; }
  .thumbnail-frame { height: 140px; }
  .occupation { margin-top: 3px; }
}

@media (max-width: 480px) and (max-height: 640px) {
  .occupation { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
  .buy-button:active, .dance-button:active, .notice-close:active { transform: none; }
}