:root { --ground: #e5ebef; --ink: #151719; --muted: #68737c; --line: #bac4cc; --paper: #f3f6f8; --display: Arial, Helvetica, sans-serif; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: Arial, Helvetica, sans-serif; font-size: 16px; -webkit-font-smoothing: antialiased; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
button, a { -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: default; opacity: .5; }
a { color: inherit; text-decoration: none; }
button:focus-visible, a:focus-visible, input:focus-visible, summary:focus-visible { outline: 2px solid #536675; outline-offset: 4px; }
svg { flex-shrink: 0; }
p { line-height: 1.6; }
small { font-size: 14px; }
.label-page { min-height: calc(100svh - 85px); }
.topbar { max-width: 1536px; margin: auto; padding: 28px 4%; min-height: 108px; display: flex; align-items: center; justify-content: space-between; gap: 30px; position: relative; }
.topbar::after { content: ''; position: absolute; bottom: 0; left: 4%; right: 4%; border-bottom: 1px solid #939ea7; }
.wordmark { display: inline-flex; align-items: center; gap: 16px; white-space: nowrap; }
.wordmark>img { width: 64px; height: 30px; object-fit: contain; }
.brand-type { display: flex; flex-direction: column; gap: 6px; }
.brand-type strong { font-size: clamp(23px, 2.15vw, 32px); font-weight: 800; line-height: 1; letter-spacing: -.055em; }
.brand-type small { font-size: 12px; font-weight: 400; letter-spacing: .02em; color: #54616b; }
.topbar nav { display: flex; align-items: center; gap: clamp(26px, 3.5vw, 55px); min-width: 0; }
.topbar nav button, .topbar nav a { padding: 8px 0; border: 0; background: none; font-size: 16px; line-height: 1.4; position: relative; }
.topbar nav button::after, .topbar nav a::after { content: ''; height: 1px; position: absolute; bottom: 1px; left: 0; right: 0; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .2s; }
.topbar nav button:hover::after, .topbar nav a:hover::after, .topbar nav [aria-current='page']::after { transform: scaleX(1); }
.topbar nav [aria-current='page'] { font-weight: 700; }
.profile-navigation { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
main { max-width: 1536px; margin: auto; padding: 0 4%; }
.catalog { padding: 32px 0 42px; }
.release-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3.5%; }
.release { min-width: 0; position: relative; }
.release-hit { display: block; width: 100%; padding: 0; border: 0; border-radius: 6px; background: none; text-align: center; touch-action: manipulation; }
.release-hit:focus-visible { outline-offset: 7px; }
.release-stage { display: block; width: 100%; aspect-ratio: 1 / 1.1; position: relative; isolation: isolate; }
.hole-opening, .hole-front-edge { position: absolute; width: 88%; aspect-ratio: 4.45 / 1; bottom: 2%; left: 6%; border-radius: 50%; pointer-events: none; }
.hole-opening { z-index: 1; background: radial-gradient(ellipse at 50% 82%, #080909 0, #020303 60%); border: 2px solid #747b7f; box-shadow: 0 -3px 0 #a1a8ad, 0 -5px 0 -1px #c2c8cc, inset 0 4px 5px #000, 0 5px 14px -8px #73808a; }
.hole-front-edge { z-index: 3; border-bottom: 1px solid #adb5bb; background: #020303; clip-path: inset(84% 0 0); }
.release-well { position: absolute; z-index: 2; bottom: 2%; left: 6%; width: 88%; height: 98%; overflow: hidden; border-radius: 0 0 50% 50% / 0 0 9% 9%; pointer-events: none; }
.character { --peek: 55%; position: absolute; width: 88%; height: auto; left: 6%; bottom: -1%; display: block; transform: translate3d(0, var(--peek), 0); transition: transform .65s cubic-bezier(.22, .8, .28, 1); will-change: transform; user-select: none; }
.cuckroach .character { --peek: 42%; width: 107%; left: -3.5%; bottom: -6%; }
.release-hit:focus-visible .character, .is-open .character { transform: translate3d(0, 0, 0); }
@media (hover: hover) {
  .release-hit:hover .character { transform: translate3d(0, 0, 0); }
  .release-hit:hover .hole-opening { border-color: #5a6267; }
}
.release-info { display: block; margin: 20px 7% 0; min-width: 0; text-align: center; }
.release-ticker { display: block; color: #68737c; font-size: 13px; letter-spacing: .04em; margin-bottom: 8px; }
.release-id { display: block; color: var(--muted); font-size: 16px; font-variant-numeric: tabular-nums; margin-bottom: 7px; }
.release-name { display: block; width: 100%; font-size: clamp(23px, 3.05vw, 45px); line-height: 1.15; letter-spacing: -.06em; font-weight: 800; white-space: nowrap; }
.market-strip { display: flex; justify-content: center; align-items: center; gap: 24px; border-top: 1px solid #a5b0b9; margin-top: 20px; min-height: 68px; padding: 13px 0 0; color: var(--muted); }
.market-strip>span { flex-shrink: 0; }
.market-strip small { display: block; font-size: 12px; line-height: 1.5; }
.market-strip strong { display: block; color: var(--ink); font-size: 16px; font-weight: 500; font-variant-numeric: tabular-nums; line-height: 1.5; }
.market-strip .change strong { color: #426153; }
.market-strip .change.negative strong { color: #995968; }
.market-strip>svg { width: 30%; max-width: 110px; height: 40px; color: #78858f; }
.chart-wait { color: #859099; }
.treasury-strip { display: grid; grid-template-columns: minmax(120px, .75fr) minmax(0, 3fr) auto; align-items: center; gap: 30px; padding: 24px 1%; border-top: 1px solid #a5b0b9; border-bottom: 1px solid var(--line); }
.treasury-heading h2 { font-size: 18px; letter-spacing: -.025em; font-weight: 600; margin: 0 0 7px; }
.treasury-heading>span, .treasury-heading>a { display: flex; align-items: center; gap: 3px; font-size: 12px; color: var(--muted); }
.treasury-heading>a:hover { color: var(--ink); }
.treasury-holdings { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.treasury-holding { display: flex; align-items: center; gap: 9px; min-width: 0; }
.token-icon { width: 34px; height: 34px; flex-shrink: 0; display: grid; place-items: center; overflow: hidden; border-radius: 50%; border: 1px solid #aeb8c0; background: #d7dfe5; }
.token-icon img { width: 100%; height: 100%; object-fit: cover; }
.token-icon.gagged img { object-fit: contain; padding-top: 2px; }
.token-icon.cuckroach { background: #202123; }
.token-icon.cuckroach img { object-fit: contain; transform: scale(1.7) translateY(4px); }
.treasury-holding small { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; }
.treasury-holding strong { display: block; font-size: 18px; font-weight: 500; font-variant-numeric: tabular-nums; line-height: 1.5; }
.donate-button { display: inline-flex; align-items: center; justify-content: center; gap: 15px; min-height: 42px; border: 1px solid #808b93; background: none; border-radius: 3px; padding: 10px 15px; font-size: 14px; }
.donate-button:hover { background: #dce4e9; }
.upcoming { display: flex; width: 100%; align-items: center; gap: 20px; padding: 24px 1% 8px; border: 0; background: none; text-align: left; }
.upcoming-hole { position: relative; width: 88px; height: 42px; flex-shrink: 0; border: 0; background: none; }
.upcoming-hole .hole-opening { width: 95%; left: 2.5%; bottom: 4%; aspect-ratio: 3.2 / 1; }
.upcoming .release-id { font-size: 12px; margin: 0 0 6px; }
.upcoming-name { display: flex; align-items: center; gap: 20px; background: none; border: 0; padding: 0; font-size: 16px; }
.upcoming-status { margin-left: auto; font-size: 12px; color: var(--muted); }
.label-footer { max-width: 1536px; margin: auto; padding: 24px 4% 28px; display: flex; align-items: center; justify-content: space-between; gap: 24px; color: var(--muted); font-size: 14px; }
.label-footer button { padding: 8px 0; border: 0; background: none; }
.label-footer button:hover { color: var(--ink); }

[data-slot='dialog-overlay'] { background: #17212888; backdrop-filter: blur(9px); }
.label-dialog[data-slot='dialog-content'] { width: calc(100% - 40px); max-width: 580px; max-height: 90dvh; overflow: auto; background: var(--paper); border: 1px solid #bcc7cf; border-radius: 8px; padding: 32px; box-shadow: 0 22px 80px #16293229; gap: 10px; z-index: 60; }
.label-dialog [data-slot='dialog-title'] { font: 700 30px/1.15 var(--display); letter-spacing: -.045em; padding-right: 25px; }
.label-dialog [data-slot='dialog-description'] { font-size: 16px; line-height: 1.6; color: var(--muted); }
.label-dialog [data-slot='dialog-close'], .collectible-dialog [data-slot='dialog-close'] { display: grid; place-items: center; width: 34px; height: 34px; top: 16px; right: 16px; border: 0; border-radius: 50%; background: #e3eaf0; opacity: 1; z-index: 5; }
[data-slot='dialog-close'] svg { width: 16px; height: 16px; }
.collectible-dialog[data-slot='dialog-content'] { --card-cut: 22px; width: calc(100% - 32px); max-width: 530px; max-height: 92dvh; overflow: auto; padding: 0; gap: 0; border: 0; border-radius: 0; background: transparent; box-shadow: 0 25px 100px #0c101b66; z-index: 60; scrollbar-width: thin; scrollbar-color: #605c64 #18171b; }
.collectible-dialog [data-slot='dialog-close'] { top: 18px; right: 18px; background: #17171de6; color: #e2d9cb; border: 1px solid #665f6b; }
.collectible-dialog button:focus-visible, .collectible-dialog a:focus-visible, .collectible-dialog input:focus-visible, .collectible-dialog summary:focus-visible { outline-color: #c6b3df; outline-offset: 3px; }
.collectible-frame { padding: 2px; clip-path: polygon(var(--card-cut) 0, calc(100% - var(--card-cut)) 0, 100% var(--card-cut), 100% calc(100% - var(--card-cut)), calc(100% - var(--card-cut)) 100%, var(--card-cut) 100%, 0 calc(100% - var(--card-cut)), 0 var(--card-cut)); background: linear-gradient(128deg, #d3cbb9 0%, #8c78a1 11%, #342d3c 27%, #b39870 43%, #eee1c7 50%, #4b405f 67%, #ac95c6 85%, #d1b583 100%); }
.collectible-face { overflow: hidden; clip-path: polygon(21px 0, calc(100% - 21px) 0, 100% 21px, 100% calc(100% - 21px), calc(100% - 21px) 100%, 21px 100%, 0 calc(100% - 21px), 0 21px); background: radial-gradient(ellipse at 75% 5%, #38304055, transparent 45%), linear-gradient(165deg, #1b1a20, #111114 68%, #19161b); color: #eee8de; box-shadow: inset 0 0 0 7px #141419, inset 0 0 0 8px #83716155; }
.card-topline { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 25px 64px 0 28px; color: #bfb8aa; font-size: 10px; letter-spacing: .1em; font-weight: 600; }
.card-topline>span:first-child { display: flex; align-items: center; gap: 6px; }
.card-topline img { width: 22px; height: 12px; filter: brightness(1.5); }
.card-topline>span:last-child { font-variant-numeric: tabular-nums; font-size: 10px; letter-spacing: .04em; white-space: nowrap; }
.card-art { position: relative; height: clamp(220px, 35dvh, 360px); margin: 15px 18px 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.card-art::after { content: ''; pointer-events: none; position: absolute; inset: 0; box-shadow: inset 0 -22px 25px -24px #0d0d11; }
.card-art img { width: 100%; height: 100%; object-fit: contain; display: block; }
.card-art.cuckroach img { width: 106%; height: 106%; }
.card-art.gagged { background: radial-gradient(ellipse at 50% 85%, #74635733, transparent 62%); }
.card-art.gagged img { max-width: 86%; object-position: center bottom; }
.card-art.birthday { flex-direction: column; gap: 18px; background: radial-gradient(ellipse, #6b4e7144, transparent 68%); color: #c6b298; }
.card-art.birthday>span { font-family: Georgia, 'Times New Roman', serif; font-size: 48px; letter-spacing: -.06em; }
.card-copy { padding: 8px 30px 28px; }
.card-identity { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.card-identity [data-slot='dialog-title'] { margin: 0; min-width: 0; font-family: Georgia, 'Times New Roman', serif; font-weight: 400; font-size: clamp(34px, 7vw, 48px); line-height: 1.15; letter-spacing: -.065em; background: linear-gradient(105deg, #f1ece3 5%, #eddfc7 46%, #bda383 96%); background-clip: text; -webkit-background-clip: text; color: transparent; }
.card-identity>span { font-family: Georgia, 'Times New Roman', serif; font-size: 29px; line-height: 1.2; color: #b9a692; }
.card-metadata { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid #7f706b88; border-bottom: 1px solid #7f706b55; padding: 10px 0; margin: 12px 0 14px; font-size: 10px; letter-spacing: .09em; color: #b2a9aa; }
.card-copy [data-slot='dialog-description'] { font-size: 17px; line-height: 1.4; color: #e4d4bf; margin: 0 0 7px; }
.card-story { font-size: 16px; line-height: 1.55; color: #bcb5b5; margin: 0 0 19px; }
.card-project { display: flex; align-items: center; justify-content: center; gap: 16px; width: 100%; min-height: 45px; border: 1px solid #a28b72; border-radius: 2px; color: #e9d9c0; background: linear-gradient(105deg, #3d322744, #77604d22, #3d322744); font-size: 15px; font-weight: 500; transition: background .15s, border-color .15s; }
.card-project:hover:not(:disabled) { background: #9e79532b; border-color: #d4baa0; }
.card-actions { display: flex; align-items: center; justify-content: center; gap: 28px; margin: 10px 0 0; }
.card-actions button { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; border: 0; background: none; font-size: 12px; color: #b8abb3; }
.card-actions button:hover, .card-actions button[aria-pressed='true'] { color: #dfc9bd; }
.card-token { border-top: 1px solid #695b5f66; margin-top: 8px; padding-top: 9px; color: #b8aab0; }
.card-token summary { cursor: pointer; font-size: 12px; padding: 4px 0; }
.token-address { position: relative; margin: 16px 0; padding: 13px 38px 13px 12px; border: 1px solid var(--line); border-radius: 3px; }
.token-address>span { display: block; font-size: 10px; font-weight: 600; color: var(--muted); letter-spacing: .07em; margin-bottom: 8px; }
.token-address code { display: block; font-size: 12px; line-height: 1.65; overflow-wrap: anywhere; }
.token-address button { position: absolute; top: 10px; right: 6px; border: 0; padding: 5px; background: none; }
.token-links { display: flex; flex-wrap: wrap; gap: 18px; margin: 15px 0; }
.token-links a { display: flex; align-items: center; gap: 4px; font-size: 12px; text-decoration: underline; text-underline-offset: 3px; }
.collectible-dialog .token-address { border-color: #695b5f88; }
.collectible-dialog .token-address>span { color: #b8aab0; }
.small-note { color: var(--muted); font-size: 12px !important; line-height: 1.7 !important; }
.collectible-dialog .small-note { color: #a2979e; margin: 14px 0 0; }
.detail-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin: 18px 0; }
.solid-button, .plain-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 11px 14px; border: 1px solid var(--ink); border-radius: 3px; font-size: 14px; font-weight: 500; transition: background .15s; }
.solid-button { background: var(--ink); color: #f6f8fa; }
.solid-button:hover:not(:disabled) { background: #37434c; }
.plain-button { background: transparent; border-color: #b7c3cb; }
.plain-button:hover { background: #dee7ed; }
.account-panel>label { display: block; font-size: 12px; letter-spacing: .06em; font-weight: 700; margin-top: 20px; }
.profile-name-input { display: flex; align-items: center; gap: 8px; background: white; border: 1px solid var(--line); margin: 10px 0 8px; padding-left: 12px; border-radius: 3px; }
.profile-name-input input { flex: 1; min-width: 0; border: 0; background: none; padding: 13px 0; font-size: 16px; }
.profile-name-input button { display: flex; align-items: center; gap: 6px; border: 0; border-left: 1px solid var(--line); padding: 14px 12px; background: #e3ebf0; font-size: 12px; }
.account-panel small { color: var(--muted); font-size: 12px; line-height: 1.6; }
.wallet-panel { padding: 20px; margin: 26px 0; border: 1px solid var(--line); background: #e9eff3; border-radius: 3px; }
.wallet-panel>div:first-child { display: flex; align-items: center; gap: 10px; font-size: 16px; }
.wallet-panel p, .your-badges p { font-size: 16px; }
.wallet-panel code { display: block; font-size: 12px; overflow-wrap: anywhere; margin: 16px 0; }
.your-badges>span { display: block; font-size: 12px; letter-spacing: .08em; font-weight: 700; margin-bottom: 13px; color: var(--muted); }
.your-badges>div { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; }
.your-badges p { color: var(--muted); margin: 0; }
.holder-badge { display: inline-flex; align-items: center; gap: 5px; border: 1px solid #c1cbd2; border-radius: 4px; background: #ecf1f4; padding: 3px 6px 3px 3px; font-size: 12px; font-weight: 700; height: 30px; white-space: nowrap; }
.holder-badge img { width: 22px; height: 22px; object-fit: cover; object-position: 50% 20%; border-radius: 2px; }
.holder-badge.cuckroach img { background: #27252a; object-fit: contain; }
.donate-panel { padding-top: 22px; }
.donation-mark { display: grid; place-items: center; height: 72px; margin-bottom: 22px; }
.donation-mark img { width: 106px; height: 52px; }
.donate-panel h3 { font-size: 21px; font-weight: 600; letter-spacing: -.025em; margin: 0; }
.donate-panel p { font-size: 16px; }
.donation-currencies { display: flex; flex-wrap: wrap; gap: 8px; }
.donation-currencies button { background: none; border: 1px solid var(--line); padding: 9px 13px; font-size: 14px; border-radius: 3px; }
.donation-currencies button[aria-pressed='true'] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.donate-panel>.solid-button { width: 100%; margin-top: 5px; }
.wallet-explorer { display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 12px; padding: 15px 0 0; color: var(--muted); }
.birthday-flow { padding: 16px; border: 1px solid #7e686966; background: #1e1a2088; border-radius: 3px; }
.bday-tabs { width: 100%; background: #322a35; border-radius: 3px !important; margin-bottom: 16px; }
.bday-tabs [data-slot='tabs-trigger'] { font-size: 12px; color: #d2c0cd; }
.bday-tabs [data-state='active'] { background: #514553; color: #f0e0d5; border-color: #8c758c; }
.birthday-flow label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 8px; }
.amount-input { display: flex; align-items: center; gap: 8px; padding: 12px; background: #141217; border: 1px solid #7e686966; border-radius: 3px; }
.amount-input input { width: 100%; min-width: 0; border: 0; background: none; font-size: 20px; }
.amount-input strong { font-size: 12px; }
.birthday-flow .flow-line { margin: 14px 0; font-size: 12px; }
.birthday-flow .card-project { font-size: 12px; padding: 10px; }
.birthday-flow ol { font-size: 14px; line-height: 1.8; padding-left: 19px; margin: 0 0 16px; list-style: decimal; }
.birthday-flow dl { font-size: 12px; }
.birthday-flow dl>div { display: flex; justify-content: space-between; padding: 8px 0; border-top: 1px solid #7e686966; }
.birthday-flow dd { font-weight: 600; }
.birthday-flow>small { display: block; font-size: 12px; line-height: 1.6; color: #b8aab0; margin-top: 15px; }
.about-panel h3 { margin: 20px 0; font-size: 40px; line-height: 1.1; letter-spacing: -.055em; font-weight: 700; }
.about-panel p { font-size: 16px; }
.error-note { margin: 14px 0 0; padding: 10px; color: #8a3c4d; background: #f7e9ec; font-size: 14px; line-height: 1.5; }
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 100; max-width: calc(100% - 32px); padding: 14px 18px; border-radius: 4px; background: var(--ink); color: #f4f6f7; box-shadow: 0 8px 30px #14212a20; font-size: 14px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 1000px) {
  .treasury-strip { grid-template-columns: 1fr auto; gap: 20px; }
  .treasury-heading { grid-column: 1; }
  .treasury-holdings { grid-row: 2; grid-column: 1 / -1; }
  .donate-button { grid-column: 2; grid-row: 1; }
}
@media (max-width: 900px) {
  .wordmark { gap: 10px; }
  .wordmark>img { width: 45px; height: 24px; }
  .topbar nav { gap: 24px; }
  .catalog { padding-top: 28px; }
  .release-grid { column-gap: 2%; }
  .release-name { font-size: 3.4vw; gap: 3px; }
  .release-id { font-size: 14px; }
  .market-strip { gap: 17px; margin-top: 15px; min-height: 64px; }
  .market-strip strong { font-size: 14px; }
}
@media (max-width: 600px) {
  .label-page { min-height: calc(100svh - 72px); }
  .topbar { flex-wrap: wrap; gap: 24px; padding: 22px 5% 16px; }
  .topbar::after { left: 5%; right: 5%; }
  .brand-type strong { font-size: 25px; }
  .brand-type small { font-size: 12px; }
  .wordmark>img { width: 48px; height: 24px; }
  .topbar nav { width: 100%; justify-content: space-between; gap: 14px; }
  .topbar nav button, .topbar nav a { font-size: 14px; padding: 4px 0 8px; }
  .profile-navigation { max-width: 180px; }
  main { padding: 0 3%; }
  .catalog { padding-top: 20px; padding-bottom: 30px; }
  .release-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 1%; }
  .release-stage { aspect-ratio: 1 / 1.35; }
  .hole-opening { border-width: 1px; box-shadow: 0 -2px 0 #a1a8ad, 0 -3px 0 -1px #c2c8cc; }
  .release-info { margin: 11px 4% 0; }
  .release-id { font-size: 12px; margin-bottom: 6px; }
  .release-name { font-size: clamp(14px, 3.6vw, 22px); letter-spacing: -.05em; gap: 2px; }
  .release-ticker { font-size: 12px; letter-spacing: 0; margin-bottom: 6px; }
  .market-strip { gap: 8px; flex-wrap: wrap; min-height: 54px; margin-top: 11px; padding-top: 9px; }
  .market-strip strong, .market-strip small { font-size: 12px; }
  .market-strip>svg, .chart-wait { display: none; }
  .treasury-strip { padding: 20px 2%; gap: 18px; }
  .treasury-holdings { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
  .treasury-holding { gap: 8px; }
  .treasury-heading h2 { font-size: 17px; }
  .treasury-holding strong { font-size: 17px; }
  .token-icon { width: 32px; height: 32px; }
  .donate-button { gap: 8px; min-height: 40px; padding: 8px 12px; }
  .upcoming { gap: 13px; padding: 22px 2% 5px; }
  .upcoming-hole { width: 57px; height: 31px; }
  .upcoming-name { font-size: 14px; gap: 7px; }
  .upcoming-status { font-size: 12px; max-width: 78px; text-align: right; }
  .label-footer { font-size: 12px; padding: 20px 5%; }
  .label-dialog[data-slot='dialog-content'] { padding: 24px; width: calc(100% - 24px); }
  .label-dialog [data-slot='dialog-title'] { font-size: 26px; }
  .collectible-dialog[data-slot='dialog-content'] { width: calc(100% - 24px); }
  .card-topline { margin: 25px 60px 0 22px; font-size: 9px; }
  .card-topline>span:last-child { font-size: 9px; }
  .card-copy { padding: 8px 22px 25px; }
  .card-identity [data-slot='dialog-title'] { font-size: clamp(28px, 7.5vw, 42px); }
  .card-identity>span { font-size: 23px; }
  .card-art { height: clamp(190px, 32dvh, 300px); margin-top: 12px; }
  .card-metadata { font-size: 9px; letter-spacing: .06em; }
  .card-story { font-size: 16px; }
  .wallet-panel { padding: 16px; }
  .about-panel h3 { font-size: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Keep the original characters, holes and collectible artwork. */
body { font-family: Arial, Helvetica, sans-serif; }
.skip-link { position: absolute; z-index: 100; top: -80px; left: 20px; background: var(--ink); color: white; padding: 12px; }
.skip-link:focus { top: 12px; }
.topbar nav { gap: 32px; }
.catalog { padding-top: 27px; }
.catalog-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; }
.catalog-heading h1 { font-size: 14px; font-weight: 500; color: var(--muted); margin: 0; }
.catalog-heading p { font-size: 12px; color: var(--muted); margin: 0; }
.release-grid { margin-top: 10px; }
.release-mechanism { text-align: center; font-size: 15px; margin: 13px 0 17px; color: #45535c; }
.release-bottom { border-top: 1px solid #a5b0b9; margin: 0 7%; padding: 15px 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.release-status { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); }
.release-status::before, .status-dot { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #718076; }
.release-status.studio::before, .status-dot.studio { background: #9d8364; }
.release-direct { font-size: 14px; text-decoration: underline; text-underline-offset: 4px; }
.release-direct:hover { color: #526571; }
.release-copy { border: 1px solid #a6b2bc; border-radius: 4px; background: transparent; color: #4e5b64; font-size: 11px; padding: 7px 11px; cursor: pointer; }
.release-copy:hover { background: #dbe4eb; }
.release-evidence { font-size: 10px; color: #65727c; margin: 0; line-height: 1.5; }
.release-evidence a { text-decoration: underline; text-underline-offset: 3px; }
.release-stage { aspect-ratio: 1 / .86; }
.character { --peek: 36%; }
.cuckroach .character { --peek: 28%; }
.mystery-cover { position: absolute; z-index: 2; left: 25%; bottom: -1%; width: 50%; height: 58%; border: 1px solid #8d969e; border-radius: 8px; background: linear-gradient(120deg, #aeb8c0, #c9d1d7 42%, #98a5af); color: #394750; transform: translateY(22%) rotate(-8deg); transition: transform .65s cubic-bezier(.22,.8,.28,1); box-shadow: inset 0 0 0 6px #bec8d044, 8px 12px 20px #141b2429; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.mystery-cover::after { content: ''; position: absolute; inset: 9px; border: 1px solid #e9eef388; border-radius: 4px; pointer-events: none; }
.mystery-number { position: absolute; top: 18px; left: 20px; font-size: 11px; letter-spacing: .15em; }
.mystery-question { font-family: Georgia, serif; font-size: clamp(95px, 10vw, 150px); line-height: 1; font-weight: 400; }
.mystery-stamp { font-size: 9px; letter-spacing: .16em; margin-top: 10px; }
.release-hit:focus-visible .mystery-cover { transform: translateY(4%) rotate(-5deg); }
@media (hover:hover) { .release-hit:hover .mystery-cover { transform: translateY(4%) rotate(-5deg); } }
.mystery-card-art { width: 170px; height: 230px; border: 1px solid #a89ca5; border-radius: 8px; background: linear-gradient(135deg,#28242e,#48404a); display: flex; flex-direction: column; align-items: center; justify-content: center; transform: rotate(-7deg); box-shadow: 10px 15px 35px #0006; }
.mystery-card-art>span { font-size: 12px; letter-spacing: .2em; color: #c2b6c0; }
.mystery-card-art>strong { font-family: Georgia,serif; font-weight: 400; font-size: 130px; line-height: 1.3; color: #e6d6c7; }
.treasury-feature { display: grid; grid-template-columns: .95fr 1.15fr; align-items: center; gap: 4%; padding: 26px 2% 32px; margin: 6px 0 22px; background: linear-gradient(120deg,#dce4ea,#eaf0f4); border: 1px solid #b7c3cc; border-radius: 12px; overflow: hidden; }
.treasury-art { position: relative; min-width: 0; text-align: center; }
.treasury-art>img { display: block; width: 100%; max-width: 460px; height: auto; margin: auto; }
.vault-caption { display: block; color: #73818c; font-size: 10px; letter-spacing: .06em; margin-top: -10px; }
.treasury-feature-copy { padding: 20px 20px 20px 0; min-width: 0; }
.treasury-topline { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.treasury-topline .eyebrow { font-size: 10px; }
.treasury-opening { display: inline-flex; align-items: center; gap: 7px; color: #68796c; border: 1px solid #aebbb0; background: #e1e8e1; border-radius: 20px; padding: 5px 9px; font-size: 10px; white-space: nowrap; }
.treasury-feature h2 { margin: 20px 0 15px; font-size: clamp(39px,4.3vw,62px); line-height: 1; font-weight: 700; letter-spacing: -.06em; }
.treasury-explanation { font-size: 16px; color: #4e606d; line-height: 1.65; max-width: 480px; margin: 0 0 23px; }
.treasury-token-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; border-top: 1px solid #b5c1ca; border-bottom: 1px solid #b5c1ca; padding: 16px 0; }
.treasury-token { display: grid; grid-template-columns: 28px 1fr; align-items: center; gap: 5px 8px; font-size: 10px; color: #657584; }
.treasury-token strong { grid-column: 2; color: #3c4d59; font-weight: 400; font-size: 21px; line-height: 1; }
.treasury-token-mark { grid-row: 1 / 3; width: 28px; height: 28px; border: 1px solid #b0bdc7; background: #d0dae2; border-radius: 50%; overflow: hidden; }
.project-mark>img { display: block; width: 100%; height: 100%; object-fit: contain; }
.sol-mark { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2px; }
.sol-mark i { width: 14px; height: 3px; background: #5e727f; transform: skew(-22deg); border-radius: 1px; }
.sol-mark i:nth-child(2) { transform: skew(22deg); }
.treasury-bottomline { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 17px; color: #6b7b88; font-size: 11px; }
.treasury-bottomline a { text-decoration: underline; text-underline-offset: 3px; }
.treasury-detail-page { padding: 40px 0 60px; }
.treasury-detail-copy { max-width: 650px; margin: 35px auto 0; }
.treasury-detail-copy p { font-size: 18px; color: #455762; }
.label-note { display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: 30px 1%; border-top: 1px solid var(--line); }
.eyebrow { font-size: 11px; color: var(--muted); letter-spacing: .08em; }
.label-note h2 { font-size: clamp(21px, 2.3vw, 31px); letter-spacing: -.04em; margin: 11px 0 10px; font-weight: 600; }
.label-note p { font-size: 15px; color: #54616b; margin: 0; }
.text-link { display: inline-block; font-size: 14px; text-decoration: underline; text-underline-offset: 5px; white-space: nowrap; }
.treasury-intro { color: #54616b; font-size: 14px; margin: 0; }
.donate-button { text-decoration: none; white-space: nowrap; }
.label-footer a:hover { text-decoration: underline; text-underline-offset: 4px; }
.collectible-dialog { --card-cut: 22px; }
.release-dialog { padding: 0; border: 0; background: transparent; width: min(530px, calc(100% - 28px)); max-height: calc(100dvh - 40px); margin: auto; color: #e8dccc; overflow-y: auto; }
.release-dialog::backdrop { background: #121a2288; backdrop-filter: blur(7px); }
.dialog-open { overflow: hidden; }
.dialog-close { position: absolute; z-index: 5; top: 19px; right: 19px; width: 32px; height: 32px; border: 1px solid #827581; border-radius: 50%; color: #e8dccc; background: #18171f; font-size: 23px; font-weight: 300; display: grid; place-items: center; }
.collectible-frame { margin: 0; }
.card-topline { padding-top: 29px; margin-top: 0; }
.card-art img { max-height: 100%; object-fit: contain; }
.card-identity h1, .card-identity h2 { margin: 0; }
.card-token .token-address { padding-right: 64px; }
.token-address button { font-size: 11px; }
.card-actions { flex-wrap: wrap; gap: 10px 22px; }
.card-actions a { font-size: 12px; color: #b8abb3; }
.card-actions a:hover { color: #dfc9bd; }
.studio-note { font-size: 13px; line-height: 1.5; color: #b8aab0; border: 1px solid #695b5f88; padding: 13px; }
.back-to-catalog { display: block; text-align: center; font-size: 12px; color: #b8abb3; padding-top: 15px; text-decoration: underline; text-underline-offset: 4px; }
.release-page { padding: 38px 0 45px; }
.standalone-card { max-width: 530px; margin: auto; }
.editorial-page { max-width: 780px; margin: 0 auto; padding: 70px 0 75px; }
.editorial-page h1 { margin: 17px 0 32px; font-size: clamp(44px, 7vw, 80px); font-weight: 700; letter-spacing: -.065em; line-height: 1.03; }
.manifesto-copy p { font-size: clamp(18px, 2vw, 23px); line-height: 1.6; margin: 0 0 26px; color: #35424b; }
.manifesto-copy p:nth-child(2) { color: var(--ink); }
.manifesto-releases { border-top: 1px solid var(--line); margin: 36px 0 28px; }
.manifesto-releases a { display: flex; align-items: center; gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--line); font-size: 20px; font-weight: 700; }
.manifesto-releases a>span { color: var(--muted); font-size: 12px; font-weight: 400; }
.manifesto-releases small { margin-left: auto; font-size: 12px; color: var(--muted); font-weight: 400; }
.treasury-state { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 14px; margin-bottom: 28px; }
.treasury-page p { font-size: 18px; color: #35424b; max-width: 630px; }
.treasury-page .text-link { margin-top: 22px; }
@media (max-width: 900px) { .release-name { font-size: clamp(22px, 3.4vw, 40px); } .release-mechanism { font-size: 13px; min-height: 40px; } .release-direct { font-size: 13px; } .treasury-intro { grid-row: 2; grid-column: 1 / -1; } }
@media (max-width: 600px) {
  .topbar nav { justify-content: flex-start; gap: 27px; }
  main { padding: 0 5%; }
  .catalog-heading { align-items: center; }
  .catalog-heading h1 { font-size: 13px; }
  .catalog-heading p { font-size: 11px; }
  .release-grid { grid-template-columns: 1fr; gap: 30px; margin-top: 15px; }
  .release { max-width: 420px; width: 100%; margin: auto; }
  .release-stage { aspect-ratio: 1 / .74; }
  .mystery-question { font-size: 115px; }
  .mystery-number { top: 15px; left: 15px; }
  .mystery-stamp { font-size: 8px; }
  .release-info { margin: 15px 7% 0; }
  .release-name { font-size: 36px; }
  .release-ticker { font-size: 12px; margin-bottom: 8px; }
  .release-mechanism { min-height: 0; font-size: 15px; margin: 10px 0 14px; }
  .release-bottom { margin: 0 7%; padding-top: 14px; gap: 13px; }
  .release-direct { font-size: 14px; }
  .label-note { flex-direction: column; align-items: flex-start; gap: 20px; padding: 26px 0; }
  .label-note h2 { font-size: 27px; max-width: 310px; }
  .label-note p { font-size: 14px; }
  .treasury-strip { padding-left: 0; padding-right: 0; }
  .treasury-heading h2 { font-size: 17px; }
  .treasury-intro { font-size: 14px; }
  .treasury-feature { grid-template-columns: 1fr; padding: 12px 21px 24px; gap: 0; margin-top: 12px; }
  .treasury-art>img { max-width: 300px; }
  .vault-caption { margin-top: -3px; }
  .treasury-feature-copy { padding: 26px 0 0; }
  .treasury-topline { gap: 10px; }
  .treasury-topline .eyebrow { font-size: 9px; letter-spacing: .04em; }
  .treasury-opening { padding: 4px 7px; font-size: 9px; }
  .treasury-feature h2 { font-size: 47px; margin-top: 17px; }
  .treasury-explanation { font-size: 15px; }
  .treasury-token-list { gap: 6px; }
  .treasury-token { grid-template-columns: 1fr; justify-items: start; gap: 8px; font-size: 9px; }
  .treasury-token-mark { grid-row: auto; }
  .treasury-token strong { grid-column: 1; }
  .treasury-bottomline { font-size: 10px; }
  .treasury-detail-copy p { font-size: 16px; }
  .donate-button { font-size: 12px; }
  .editorial-page { padding: 40px 0 48px; }
  .editorial-page h1 { font-size: 55px; }
  .manifesto-copy p { font-size: 19px; }
  .manifesto-releases a { font-size: 18px; gap: 12px; }
  .manifesto-releases small { font-size: 10px; }
  .release-page { padding: 24px 0 35px; }
  .card-art { height: 285px; }
  .toast { left: 16px; right: 16px; bottom: 16px; transform: none; text-align: center; max-width: none; }
}
/* Original motion, inspired by fluxus' stagger and carvacodes' dimensional card. */
.release { --arrival-delay: .08s; }
.release:nth-child(2) { --arrival-delay: .23s; }
.release:nth-child(3) { --arrival-delay: .38s; }
.release-info, .release-mechanism, .release-bottom { animation: release-arrival .7s ease-out var(--arrival-delay) backwards; }
.character { animation: character-arrival 1.1s cubic-bezier(.22,.8,.28,1) var(--arrival-delay) backwards; }
.mystery-cover { animation: mystery-arrival 1.1s cubic-bezier(.22,.8,.28,1) var(--arrival-delay) backwards; }
@keyframes release-arrival { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes character-arrival { from { transform: translate3d(0,100%,0); } to { transform: translate3d(0,var(--peek),0); } }
@keyframes mystery-arrival { from { transform: translateY(100%) rotate(-8deg); } to { transform: translateY(22%) rotate(-8deg); } }
.card-art { perspective: 850px; }
.card-art img { transform: rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)); transition: transform .2s ease-out; }
.card-art::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: conic-gradient(from 45deg at var(--light-x,50%) var(--light-y,50%),#b89c6533,#7a879b11,#9482a933,#b89c6533); opacity: 0; transition: opacity .35s; }
.card-art::after { background: radial-gradient(ellipse at var(--light-x,50%) var(--light-y,35%),#e9ddc026,transparent 48%); opacity: .35; transition: opacity .35s; }
.card-art.is-lit::before { opacity: 1; }
.card-art.is-lit::after { opacity: 1; }
.treasury-art { perspective: 1100px; }
.treasury-art>img { transform: rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)); transition: transform .3s ease-out; }
@media (hover: none) { .character { --peek: 25%; } .cuckroach .character { --peek: 18%; } }
@media (prefers-reduced-motion: reduce) {
  .character, .mystery-cover, .release-info, .release-mechanism, .release-bottom { animation: none; }
  .card-art img, .treasury-art>img { transform: none; }
  .card-art::before, .card-art::after { display: none; }
}