/* Reversible visual skin. Navigation, catalog and project runtimes are unchanged. */
:root {
  color-scheme: dark;
  --bg: #090e12;
  --ink: #edf4f6;
  --muted: #a1b0b9;
  --red: #a0f8d4;
  --line: #34414a;
  --surface: #121c23;
  --surface-raised: #1a2831;
  --radius: 14px;
}
body { background: var(--bg); }
::selection { background: var(--red); color: #0a211a; }
.skip { background: var(--red); color: #0a211a; }
.header { background: #0b1116; border-bottom-color: #26323b; }
.brand svg { filter: drop-shadow(0 0 10px #a0f8d426); }
.brand small { color: var(--muted); }
.nav>a[aria-current=page]::after { height: 2px; width: 100%; bottom: 0; }
.nav-count { color: var(--red); }
.header-random { border-color: #53616b; background: #152028; }
.header-random:hover { background: #24343d; color: var(--red); }
.button { border-radius: 10px; }
.button-primary { background: var(--red); color: #0a211a; border-color: #b7ffe3; box-shadow: 0 2px 0 #4b9679, 0 0 24px #a0f8d412; }
.button-primary:hover { background: #c6ffe8; color: #0a211a; }
.button-outline { background: #142028; border-color: #53616b; }
.button-outline:hover { background: #22343f; border-color: #adc4ce; color: var(--ink); }
.hero {
  position: relative;
  isolation: isolate;
  padding-top: 52px;
  background: radial-gradient(ellipse at 50% 8%, #193139 0%, #101b23 31%, #090e12 70%);
  border-bottom-color: #34414a;
}
/* One spatial light field, rather than a repeated card-by-card glow. */
.hero::before {
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
  width: min(1300px, 115vw);
  height: 700px;
  left: 50%;
  top: -24px;
  border: 1px solid #6dafa840;
  border-top-color: #b6ffe1a6;
  border-right-color: #9dd3d970;
  border-radius: 50%;
  transform: translateX(-50%) perspective(900px) rotateX(61deg) rotateZ(-15deg);
  box-shadow: 0 0 12px #a1f7db12, 0 0 0 46px #83c6c201, 0 0 0 47px #80b4b02b, inset 0 0 70px #8aeee50a;
}
.hero::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent calc(50% - .5px), #c7e7e908 50%, transparent calc(50% + .5px));
}
.hero-intro { color: #b9cbd0; }
.hero-intro>span { box-shadow: 0 0 12px #a0f8d470; }
.hero h1 { font-weight: 750; font-size: clamp(48px, 6.4vw, 92px); margin-top: 22px; }
.hero-word { color: var(--red); text-shadow: 0 0 50px #a0f8d415; }
.hero-word>svg { width: 48px; height: 48px; transform: rotate(15deg); }
.hero-word>svg path { fill: none; stroke: currentColor; stroke-width: .8; }
.hero-description { color: #aebfc7; }
.deck-shell { position: relative; padding-top: 52px; padding-bottom: 62px; }
.deck-shell::before {
  content: '';
  position: absolute;
  pointer-events: none;
  inset: 64% 6% -10%;
  background: radial-gradient(ellipse, #77e2ca25, #518a960c 46%, transparent 70%);
  transform: scaleY(.5);
}
.poster {
  --screen-lift: calc(var(--lift) * .65);
  background: linear-gradient(155deg, #293c48, #15212a 23%, #11191f 80%);
  border: 1px solid #647c8990;
  border-bottom-color: #344d5c;
  padding: 10px 10px 13px;
  border-radius: 12px;
  transform: perspective(1100px) translateY(var(--screen-lift)) rotateY(calc(var(--angle) * -1.6));
  box-shadow: inset 0 1px 0 #d4f2ff22, 0 5px 0 #060b0f, 0 30px 40px #0008;
  transition: transform .55s var(--ease), box-shadow .55s var(--ease), border-color .3s;
}
.poster::after { content: ''; width: 24px; height: 2px; background: #668893; position: absolute; bottom: -4px; left: calc(50% - 12px); border-radius: 2px; }
.poster:hover,.poster:focus-visible,.poster.is-picked {
  transform: perspective(1100px) translateY(-18px) rotateY(0);
  border-color: #a0f8d4;
  box-shadow: inset 0 1px 0 #e0fff044, 0 5px 0 #16372d, 0 32px 50px #000b, 0 0 28px #a0f8d41c;
}
.poster-top { color: #b8c9d3; }
.poster-top>span:first-child { color: var(--red); }
.poster-picture { background: #111c23; border: 1px solid #081015; border-radius: 5px; }
.poster.tone-mint .poster-picture img { object-position: 50% 75%; }
.poster-title { color: #edf4f6; font-weight: 550; }
.poster-title>span { color: #a0f8d4; }
.hero-bottom { position: relative; margin-bottom: 36px; }
.deck-hint svg { color: var(--red); }
.deck-controls>button { border-color: #546670; background: #152129; border-radius: 10px; }
.deck-controls button:hover,.view-toggle:hover { background: #29413f; color: var(--red); }
.collection { background: var(--bg); }
.section-note { color: #afc1c9; }
.section-heading h1,.section-heading h2 { font-weight: 650; }
.filters button { border-radius: 8px; }
.filters button[aria-pressed=true],.view-toggle[aria-pressed=true] { background: var(--red); color: #0a211a; }
.filters button:not([aria-pressed=true]):hover { background: #21313c; }
.search { background: #121c24; border: 1px solid #41535f; border-radius: 9px; padding-inline: 12px; }
.search:focus-within { border-color: var(--red); }
.view-toggle { border-radius: 9px; border-color: #53636d; }
.work-image { border-radius: 12px; background: #15212a; border: 1px solid #43535e; box-shadow: 0 12px 30px #0003; }
.work-link:hover .work-image { border-color: #97cdbb; }
.work-open { background: #0d1b22; border: 1px solid #627880; color: var(--ink); border-radius: 10px; }
.work-link:hover .work-open { color: #0a211a; }
.work-copy h3 { font-weight: 600; }
.work-meta { color: #abbec8; }
.work-index { color: var(--red); }
.empty-state { background: var(--surface); border: 1px solid var(--line); }
.about-strip { background: #101a21; border-block: 1px solid #2d3d48; }
.about-art { color: #a0f8d4; isolation: isolate; }
.about-art::before,.about-art::after { content: ''; position: absolute; inset: -4%; border: 1px solid #9cf1d77a; border-radius: 50%; transform: rotate(-28deg) scaleY(.53); box-shadow: 0 0 20px #a0f8d410; }
.about-art::after { transform: rotate(40deg) scaleY(.65); border-color: #91b2c169; }
.about-art svg { width: 87%; height: 87%; transform: rotate(12deg); filter: drop-shadow(0 0 18px #a0f8d440); }
.about-art svg path { fill: #142a2b; stroke: #a0f8d4; stroke-width: .25; }
.about-art span { transform: none; color: #e0fff3; font-size: clamp(35px, 4vw, 56px); text-shadow: 0 2px 15px #081616; }
.footer { background: #070b0e; border-top: 1px solid #29363f; color: var(--ink); }
.footer-brand>svg { color: var(--red); }
.footer-bottom { color: var(--muted); border-color: #2b3740; }
.detail-wrap { background: radial-gradient(ellipse at 90% 12%, #172b302b, transparent 40%); }
.detail-type { color: #b7cbd3; }
.type-dot { background: var(--red); border-color: #c9ffe8; box-shadow: 0 0 10px #a0f8d430; }
.detail-copy h1 { font-weight: 700; }
.detail-visual {
  background: linear-gradient(140deg, #30424e, #152129 36%, #17272e);
  border: 1px solid #637883;
  padding: 14px;
  border-radius: 14px;
  transform: perspective(1600px) rotateY(-5deg);
  box-shadow: 6px 10px 0 #04080a, 0 30px 70px #0007;
}
.detail-visual:hover { transform: perspective(1600px) rotateY(0); }
.detail-visual>img { border-radius: 5px; }
.zoom-hint { background: #12232b; color: #e2f7f1; border-color: #637f8a; border-radius: 8px; }
.detail-gallery { background: #142129; border: 1px solid #3c515b; border-radius: 14px; }
.feature-list article>span { font-size: 14px; }
.feature-list h3 { font-weight: 550; }
.next-project { border-bottom: 1px solid var(--line); }
.download-options article { background: #111c23; border: 1px solid #3b4e58; border-radius: 12px; padding: 28px; }
.about-page { background: radial-gradient(ellipse at 4% 46%, #213c392b, transparent 47%); }
.mobile-launch { background: #101d24; border-color: #53656e; }
dialog { background: #14212a; border: 1px solid #6f858f; border-radius: 14px; box-shadow: 0 35px 130px #000b; }
dialog::backdrop { background: #03090fce; }
.random-art { background: #172b34; border-bottom: 1px solid #48616e; }
.dialog-close { background: #132831; border: 1px solid #7b949d; color: var(--ink); border-radius: 9px; }
.dialog-close:hover { background: var(--red); color: #0a211a; }
.image-dialog { background: #091016; }
.toast { background: #b4ffe1; color: #0a211a; border: 1px solid #e1fff3; }
.preview-note { background: #14232b; border-color: #4e6670; color: #c0d2d9; box-shadow: 0 3px 15px #0004; }
.noscript { background: #15232d; }
.mobile-nav:not([hidden]) { background: #101b23; box-shadow: 0 20px 40px #0008; }
@media(min-width:1001px) {
  .poster { animation-name: screen-arrive; }
  @keyframes screen-arrive {
    from { opacity: 0; transform: perspective(1100px) translateY(calc(var(--screen-lift) + 32px)) rotateY(calc(var(--angle) * -1.6)); }
    to { opacity: 1; transform: perspective(1100px) translateY(var(--screen-lift)) rotateY(calc(var(--angle) * -1.6)); }
  }
}
@media(max-width:1100px) { .hero h1 { font-size: 72px; } }
@media(max-width:1000px) {
  .hero { padding-top: 38px; }
  .hero h1 { font-size: 64px; }
  .hero::before { width: 1150px; height: 620px; top: 0; }
  .deck-shell { padding: 18px 0 20px; }
  .poster { transform: none; }
  .poster:hover,.poster:focus-visible,.poster.is-picked { transform: translateY(-5px); }
  .detail-visual { padding: 12px; }
}
@media(max-width:700px) {
  .hero { padding-top: 34px; }
  .hero h1 { font-size: clamp(45px,12.5vw,70px); margin-top: 22px; }
  .hero-word>svg { width: 27px; height: 27px; }
  .hero::before { width: 730px; height: 510px; top: -16px; }
  .deck-shell { padding-block: 6px 9px; }
  .hero-bottom { margin-bottom: 30px; }
  .detail-visual,.detail-visual:hover { margin-inline: 0; transform: none; }
  .work-image { border-radius: 10px; }
  .about-art span { font-size: 35px; }
  .download-options article { padding: 23px; }
  .mobile-nav:not([hidden]) { top: 69px; }
  .preview-note { opacity: 1; }
}
@media(prefers-reduced-motion:reduce) {
  .poster,.poster:hover,.poster:focus-visible,.poster.is-picked { animation: none; transform: perspective(1100px) translateY(var(--screen-lift)) rotateY(calc(var(--angle) * -1.6)); }
  .detail-visual,.detail-visual:hover { transform: none; }
}
@media(prefers-reduced-motion:reduce) and (max-width:1000px) {
  .poster,.poster:hover,.poster:focus-visible,.poster.is-picked { transform: none; }
}