@font-face { font-family:'Tulpen One'; src:url('./assets/fonts/TulpenOne-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'NotCourierSans'; src:url('./assets/fonts/NotCourierSans.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'NotCourierSans'; src:url('./assets/fonts/NotCourierSans-Bold.ttf') format('truetype'); font-weight:700; font-style:normal; font-display:swap; }
:root { --bg:#000; --ink:#fff; --muted:#c3c3c3; --line:#565656; color-scheme:dark; font-family:'NotCourierSans',monospace; background:var(--bg); color:var(--ink); font-synthesis:none; }
* { box-sizing:border-box; }
body { overflow-x:clip; margin:0; padding-bottom:calc(178px + env(safe-area-inset-bottom,0px)); isolation:isolate; }
button,a { -webkit-tap-highlight-color:transparent; }
#noise-background { position:fixed; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none; image-rendering:pixelated; }
.wrap { width:calc(100% - 80px); max-width:1360px; margin-inline:auto; }
.opening { padding:48px 0 76px; text-align:center; }
h1 { width:max-content; margin:0 auto; font-family:'Tulpen One',sans-serif; font-size:clamp(100px,25vw,430px); font-weight:400; line-height:.88; letter-spacing:-.015em; white-space:nowrap; text-shadow:0 0 var(--glow-near,8px) #ffffff70,0 0 var(--glow-far,21px) #ffffff35; }
.byline { margin:22px 0 0; font-size:15px; line-height:1.5; }
.byline a { color:inherit; text-underline-offset:4px; text-decoration-thickness:1px; }
#drop-copy { max-width:740px; margin:32px auto 0; color:var(--ink); font-size:16px; line-height:1.65; text-wrap:pretty; text-shadow:0 1px 5px #000; }
.work-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:64px 30px; padding-bottom:60px; }
.kit-work { min-width:0; margin:0; }
.kit-image { display:block; width:100%; height:auto; }
.kit-caption { display:flex; flex-direction:column; align-items:flex-start; gap:12px; padding-top:15px; }
.kit-caption h2 { margin:0; font:inherit; font-size:15px; line-height:1.45; overflow-wrap:anywhere; text-shadow:0 1px 4px #000; }
.sr-link { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:10px 15px; border:1px solid #999; background:#000c; color:#fff; font:inherit; font-size:12px; line-height:1.4; text-decoration:none; transition:background-color .5s ease,color .5s ease,border-color .5s ease; }
.sr-link[href]:hover { background:#0000ff; color:#fff; border-color:#00ffff; }
.sr-link[aria-disabled="true"] { color:var(--muted); border-color:var(--line); cursor:default; }
a:focus-visible,button:focus-visible { outline:2px solid #00ffff; outline-offset:5px; }
.media-error { display:grid; place-items:center; min-height:200px; color:var(--muted); font-size:13px; text-align:center; }
.checkout-status { border-top:1px solid var(--line); padding:22px 0; font-size:13px; line-height:1.7; }
.loading { color:var(--muted); grid-column:1/-1; }
.skip { position:fixed; top:-100px; left:20px; padding:12px; background:#fff; color:#000; z-index:30; }
.skip:focus { top:16px; }
.mint-dock { position:fixed; inset:auto 0 0; z-index:20; background:#000f; border-top:1px solid var(--line); padding:18px 0 calc(18px + env(safe-area-inset-bottom,0px)); }
.mint-dock-inner { width:calc(100% - 80px); max-width:1360px; margin-inline:auto; display:flex; align-items:center; gap:36px; }
.mint-supply { flex:1; min-width:0; }
.mint-supply-label { display:flex; align-items:baseline; justify-content:space-between; gap:14px; margin-bottom:12px; font-size:14px; line-height:1.5; }
#mint-note { color:var(--muted); font-size:12px; text-align:right; }
.mint-progress { height:5px; background:#414141; overflow:hidden; }
#mint-progress-fill { display:block; height:100%; width:0; background:#0000ff; transition:width 160ms; }
.mint-button { flex:0 0 280px; min-height:62px; padding:16px 24px; border:1px solid #fff; border-radius:0; background:#fff; color:#000; font:inherit; font-size:20px; font-weight:700; letter-spacing:.08em; cursor:pointer; transition:background-color .5s ease,color .5s ease,border-color .5s ease; }
.mint-button:not(:disabled):hover { background:#0000ff; color:#fff; border-color:#00ffff; }
.mint-button:disabled { background:transparent; border-color:var(--line); color:var(--muted); cursor:not-allowed; }
@media(max-width:900px) { .wrap,.mint-dock-inner { width:calc(100% - 48px); } .work-grid { column-gap:20px; } .mint-button { flex-basis:220px; } }
@media(max-width:640px) {
  .wrap,.mint-dock-inner { width:calc(100% - 28px); }
  .opening { padding:32px 0 48px; }
  .byline { margin-top:18px; font-size:13px; }
  #drop-copy { margin-top:26px; font-size:14px; line-height:1.6; }
  .work-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:34px 12px; padding-bottom:40px; }
  .kit-caption { padding-top:12px; gap:10px; }
  .kit-caption h2 { font-size:12px; }
  .sr-link { width:100%; padding:8px 5px; font-size:10px; }
  .mint-dock { padding:14px 0 calc(14px + env(safe-area-inset-bottom,0px)); }
  .mint-dock-inner { flex-direction:column; align-items:stretch; gap:14px; }
  .mint-button { flex-basis:auto; min-height:54px; font-size:18px; }
  .mint-supply-label { margin-bottom:9px; font-size:12px; gap:10px; }
  #mint-note { font-size:11px; }
}
@media(prefers-reduced-motion:reduce) { * { transition:none!important; } }

.artwork-open { display:block; width:100%; padding:0; border:0; background:transparent; color:inherit; cursor:pointer; }
.artwork-open:focus-visible { outline:2px solid #00ffff; outline-offset:5px; }
body:has(#artwork-viewer[open]) { overflow:hidden; }
#artwork-viewer { position:fixed; inset:0; width:100vw; max-width:100vw; height:100vh; height:100dvh; max-height:100dvh; margin:0; padding:54px 20px 20px; border:0; background:transparent; color:#fff; }
#artwork-viewer[open] { display:grid; place-items:center; overflow:hidden; }
#artwork-viewer::backdrop { background:#000e; }
.viewer-content { display:flex; flex-direction:column; align-items:center; gap:10px; max-width:100%; max-height:100%; min-height:0; }
.viewer-stage { min-height:0; max-width:100%; overflow:hidden; flex:none; }
.viewer-media { width:max-content; display:block; }
.viewer-art { display:block; max-width:none; image-rendering:pixelated; }
.viewer-close { position:absolute; top:10px; right:14px; z-index:2; width:38px; height:38px; padding:0; border:1px solid #777; background:#000; color:#fff; font:inherit; font-size:26px; line-height:1; cursor:pointer; }
.viewer-details { margin:0; padding:0; width:100%; flex:none; text-align:center; background:transparent; overflow-wrap:anywhere; }
.viewer-title { margin:0 0 4px; font:inherit; font-size:14px; line-height:1.3; }
.viewer-collector { margin:0 0 4px; font-size:12px; line-height:1.5; overflow-wrap:anywhere; }
.viewer-collector a,.viewer-sr { color:#fff; text-underline-offset:4px; }
.viewer-sr { display:inline-block; padding:2px 4px; font-size:12px; line-height:1.5; }
.viewer-sr[aria-disabled="true"] { color:var(--muted); text-decoration:none; }
@media(max-width:640px) { #artwork-viewer { padding-inline:12px; padding-bottom:calc(12px + env(safe-area-inset-bottom,0px)); } .viewer-title { font-size:14px; } .viewer-collector,.viewer-sr { font-size:12px; } }

.artwork-open { outline:1px solid transparent; outline-offset:3px; transition:outline-color .5s ease; }
.artwork-open:hover { outline-color:#00ffff; }
.byline a,.viewer-collector a,.viewer-sr[href] { transition:color .5s ease; }
.byline a:hover,.viewer-collector a:hover,.viewer-sr[href]:hover { color:#00ffff; }
.viewer-close { transition:background-color .5s ease,border-color .5s ease; }
.viewer-close:hover { background:#0000ff; border-color:#00ffff; }

.network-banner { padding:12px; margin:18px 0 0; border:1px solid #00ffff; background:#0000ff; color:#fff; font-size:13px; text-align:center; }
.connect-dialog { width:min(520px,calc(100vw - 24px)); max-width:100%; height:min(820px,calc(100dvh - 24px)); max-height:100dvh; padding:0; margin:auto; border:1px solid #00ffff; background:#111; color:#fff; overflow:hidden; }
.connect-dialog::backdrop { background:#000d; }
.connect-shell { height:100%; display:flex; flex-direction:column; min-height:0; }
.connect-header { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:10px 14px; border-bottom:1px solid #555; }
.connect-header h2 { margin:0; font:inherit; font-size:15px; }
#connect-close { width:38px; height:38px; border:1px solid #777; background:#000; color:#fff; font:inherit; font-size:25px; cursor:pointer; transition:background .5s,border-color .5s; }
#connect-close:hover { background:#0000ff; border-color:#00ffff; }
.wallet-help { margin:0; padding:9px 14px; font-size:11px; line-height:1.5; color:#ccc; }
.connect-frame { flex:1; min-height:0; }
.connect-iframe { display:block; width:100%; height:100%; border:0; background:#111; }
.connect-feedback { margin:0; font-size:12px; line-height:1.5; }
.connect-feedback:not(:empty) { padding:10px 14px; }
#connect-external { color:#00ffff; font-size:12px; padding:10px 14px; }
body:has(.connect-dialog[open]) { overflow:hidden; }

.gallery-collector { margin:0; font-size:12px; line-height:1.5; overflow-wrap:anywhere; text-shadow:0 1px 4px #000; }
.gallery-collector a,#connect-delayed-link { color:inherit; text-underline-offset:3px; transition:color .5s; }
.gallery-collector a:hover,#connect-delayed-link:hover { color:#00ffff; }
#connect-delayed-help { overflow-wrap:anywhere; }
.reveal-art { animation:artwork-reveal 1s ease both; }
@keyframes artwork-reveal { from { opacity:0; } to { opacity:1; } }
@media(prefers-reduced-motion:reduce) { .reveal-art { animation:none; } }
@media(max-width:640px) { .gallery-collector { font-size:10px; } }

.connect-stage { position:relative; flex:1; min-height:0; }
.connect-stage .connect-frame { height:100%; }
.connect-loading { position:absolute; inset:0; display:grid; place-items:center; margin:0; padding:24px; background:#111; color:#fff; text-align:center; font-size:14px; pointer-events:none; }
.connect-loading[hidden] { display:none; }
.reveal-dialog { position:fixed; inset:0; width:100vw; max-width:100vw; height:100vh; height:100dvh; max-height:100dvh; margin:0; padding:64px 24px; border:0; background:transparent; color:#fff; }
.reveal-dialog[open] { display:grid; place-items:center; overflow:hidden; }
.reveal-dialog::backdrop { background:#000d; }
#reveal-message { max-width:640px; margin:0; font-size:18px; line-height:1.6; text-align:center; text-shadow:0 1px 5px #000; }
body:has(.reveal-dialog[open]) { overflow:hidden; }

.collection-footer { padding:12px 0 30px; text-align:center; font-size:12px; line-height:1.5; }
.collection-footer a { color:#fff; text-decoration:underline; text-underline-offset:3px; transition:color .5s ease; }
.collection-footer a:hover { color:#00ffff; }

.loading-dots { display:inline-flex; width:3ch; }
.loading-dots > span { animation:loading-dot 1.2s infinite steps(1,end); }
.loading-dots > span:nth-child(2) { animation-delay:.2s; }
.loading-dots > span:nth-child(3) { animation-delay:.4s; }
@keyframes loading-dot { 0%,75% { opacity:0; } 25%,74% { opacity:1; } }
@media(prefers-reduced-motion:reduce) { .loading-dots > span { animation:none; opacity:1; } }

#drop-title { user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
@keyframes title-strobe { 0% { color:#fff; } 50% { color:#7fffff; } }
@media(hover:hover) and (pointer:fine) { #drop-title:hover { animation:title-strobe 80ms steps(1,end) infinite; } }
#drop-title:active,#drop-title.is-pressed { animation:title-strobe 80ms steps(1,end) infinite; }
@media(prefers-reduced-motion:reduce) {
  #drop-title:hover,#drop-title:active,#drop-title.is-pressed { animation:none; color:#7fffff; }
}

.collection-footer .copyright { margin:22px 0 0; font-size:11px; line-height:1.5; color:var(--muted); }