@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Playfair+Display:ital,wght@1,600&display=swap");

:root {
  --ink: #11110f;
  --ink-soft: #1c1c19;
  --paper: #f1eee5;
  --paper-deep: #dedacf;
  --acid: #dfff3f;
  --orange: #ff5c35;
  --violet: #7d57ff;
  --line: #aaa69b;
  --muted: #716e67;
  --white: #fffef8;
  --ease: cubic-bezier(.2,.8,.2,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body {
  margin: 0;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: Manrope, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--acid); color: var(--ink); }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.grain {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
}
.cursor-aura {
  position: fixed;
  width: 320px;
  height: 320px;
  z-index: 0;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(223,255,63,.12), transparent 68%);
  transform: translate(-50%, -50%);
  transition: opacity .25s;
}

.site-header {
  height: 82px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 4.25vw;
  border-bottom: 1px solid rgba(17,17,15,.22);
  position: fixed;
  inset: 0 0 auto;
  background: rgba(241,238,229,.82);
  backdrop-filter: blur(18px) saturate(1.3);
  z-index: 50;
  transition: height .3s var(--ease), background .3s;
}
.site-header.scrolled { height: 66px; background: rgba(241,238,229,.95); }
.brand { display: inline-flex; align-items: center; gap: 11px; width: max-content; }
.brand-mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 35px;
  height: 35px;
  overflow: hidden;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  font-weight: 700;
}
.brand-mark::after {
  content: "";
  position: absolute;
  inset: -50%;
  background: conic-gradient(transparent, var(--acid), transparent 38%);
  animation: brand-spin 5s linear infinite;
}
.brand-mark span { position: relative; z-index: 1; display: grid; place-items: center; width: 29px; height: 29px; border-radius: 50%; background: var(--ink); }
.brand-name { font-size: 19px; font-weight: 700; letter-spacing: -.055em; }
.brand-name i { color: var(--orange); font-style: normal; }
.site-header nav { display: flex; gap: 32px; }
.site-header nav a { position: relative; font-size: 12px; font-weight: 600; }
.site-header nav a span { color: var(--orange); font-size: 8px; vertical-align: super; margin-right: 3px; }
.site-header nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -7px; height: 1px; background: var(--ink); transition: right .3s var(--ease); }
.site-header nav a:hover::after { right: 0; }
.header-actions { display: flex; justify-content: flex-end; align-items: center; gap: 22px; }
.system-status { font-size: 8px; letter-spacing: .16em; font-weight: 700; }
.system-status i, .balance-pill i { display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: #63c64d; box-shadow: 0 0 0 4px rgba(99,198,77,.12); animation: status-pulse 2s infinite; }

.button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  overflow: hidden;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  padding: 14px 20px;
  cursor: pointer;
  font-weight: 650;
  font-size: 12px;
  letter-spacing: .02em;
  transition: color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}
.button::before { content: ""; position: absolute; inset: 0; background: var(--acid); transform: translateY(102%); transition: transform .35s var(--ease); }
.button > * { position: relative; z-index: 1; }
.button:hover::before { transform: translateY(0); }
.button:hover { color: var(--ink); }
.button.primary { min-width: 196px; background: var(--ink); border-color: var(--ink); color: var(--paper); }
.button.primary:hover { color: var(--ink); }
.button.ghost:hover { background: var(--ink); color: var(--paper); }
.button.ghost::before { display: none; }
.button.compact { padding: 10px 16px; font-size: 11px; }
.button.full { width: 100%; }

.hero {
  position: relative;
  min-height: 100svh;
  padding: 154px 4.25vw 72px;
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  align-items: center;
  gap: 4vw;
  overflow: hidden;
}
.hero::before { content: ""; position: absolute; width: 1px; height: 100%; left: 53%; top: 0; background: linear-gradient(transparent, rgba(17,17,15,.18) 20%, rgba(17,17,15,.18) 80%, transparent); }
.hero-index { position: absolute; inset: 104px 24px 34px auto; display: flex; flex-direction: column; justify-content: space-between; align-items: end; font-size: 8px; letter-spacing: .18em; writing-mode: vertical-rl; opacity: .55; }
.hero-copy { position: relative; z-index: 3; }
.eyebrow { display: flex; align-items: center; gap: 9px; margin: 0 0 28px; font-size: 10px; font-weight: 700; letter-spacing: .2em; }
.eyebrow span { width: 22px; height: 1px; background: currentColor; }
.hero h1, .section h2 {
  margin: 0;
  font-weight: 600;
  letter-spacing: -.077em;
  line-height: .84;
}
.hero h1 { max-width: 800px; font-size: clamp(66px, 8.6vw, 142px); }
.hero h1 em, .section h2 em, .manifesto em { color: var(--orange); font-family: "Playfair Display", serif; font-weight: 600; }
#morph-word { display: inline-block; min-width: 4.7em; transition: opacity .18s, transform .18s; }
#morph-word.out { opacity: 0; transform: translateY(12px) skewX(-8deg); }
.lead { max-width: 610px; margin: 44px 0 32px; font-size: clamp(16px,1.25vw,20px); line-height: 1.65; color: #3d3b36; }
.hero-actions { display: flex; align-items: center; gap: 30px; }
.play-link { display: flex; align-items: center; gap: 10px; border: 0; background: none; cursor: pointer; font-size: 12px; font-weight: 650; }
.play-link i { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--ink); border-radius: 50%; font-style: normal; transition: .3s var(--ease); }
.play-link:hover i { transform: rotate(90deg); background: var(--acid); }
.hero-meta { display: flex; margin-top: 58px; border-top: 1px solid var(--line); max-width: 610px; }
.hero-meta div { display: flex; gap: 13px; align-items: center; padding: 18px 28px 0 0; margin-right: 28px; border-right: 1px solid var(--line); }
.hero-meta div:last-child { border-right: 0; }
.hero-meta b { font-size: 24px; letter-spacing: -.06em; }
.hero-meta span { font-size: 8px; line-height: 1.45; letter-spacing: .12em; color: var(--muted); }

.hero-art { position: relative; min-height: 610px; z-index: 2; perspective: 1000px; }
#ambient-canvas { position: absolute; inset: -70px; width: calc(100% + 140px); height: calc(100% + 140px); opacity: .36; }
.art-frame { position: absolute; inset: 3% 7% 8% 5%; overflow: hidden; border: 1px solid rgba(17,17,15,.55); background: #171619; box-shadow: 0 40px 100px rgba(24,18,15,.24); transform: rotate(1.5deg); }
.art-frame::before { content: ""; position: absolute; inset: 0; z-index: 4; background: linear-gradient(90deg, transparent 49.8%, rgba(255,255,255,.13) 50%, transparent 50.2%), linear-gradient(transparent 49.8%, rgba(255,255,255,.13) 50%, transparent 50.2%); background-size: 25% 25%; mix-blend-mode: overlay; }
.art-sun { position: absolute; width: 55%; aspect-ratio: 1; left: 39%; top: 9%; border-radius: 50%; background: radial-gradient(circle at 36% 28%, #fff6c3 0 4%, #ffc275 12%, #ff7042 32%, #a93f6c 57%, #322433 78%); box-shadow: 0 0 80px rgba(255,91,53,.4), inset -35px -38px 70px rgba(0,0,0,.42); animation: breathe 7s ease-in-out infinite; }
.art-void { position: absolute; width: 40%; aspect-ratio: 1; left: 12%; bottom: 4%; border-radius: 48% 52% 54% 46%; background: radial-gradient(circle at 34% 28%, #e6ff73 0 3%, #a6bd39 20%, #36431e 53%, #10130e 77%); box-shadow: 25px 28px 70px #0009; transform: rotate(-14deg); animation: drift 9s ease-in-out infinite; }
.art-horizon { position: absolute; left: -10%; right: -10%; bottom: -12%; height: 48%; border-radius: 50% 50% 0 0; background: repeating-radial-gradient(ellipse at 50% 100%, #272328 0 5px, #121114 6px 15px); transform: perspective(280px) rotateX(62deg); opacity: .8; }
.coordinate { position: absolute; z-index: 6; color: #fff; font-size: 7px; letter-spacing: .17em; opacity: .66; }
.coordinate.x { left: 13px; top: 13px; }.coordinate.y { right: 13px; top: 13px; }
.art-caption { position: absolute; z-index: 6; left: 16px; right: 16px; bottom: 13px; display: flex; justify-content: space-between; color: #fff; font-size: 8px; letter-spacing: .16em; }
.floating-card { position: absolute; z-index: 8; border: 1px solid var(--ink); background: rgba(241,238,229,.92); backdrop-filter: blur(12px); box-shadow: 14px 14px 0 rgba(17,17,15,.12); transition: transform .25s var(--ease); }
.prompt-card { width: 235px; left: -5%; top: 17%; padding: 18px; transform: rotate(-4deg); }
.prompt-card small, .seed-card small { font-size: 7px; letter-spacing: .18em; color: var(--muted); }
.prompt-card p { margin: 19px 0; font-family: "Playfair Display", serif; font-style: italic; font-size: 16px; line-height: 1.35; }
.prompt-card span { display: block; padding-top: 9px; border-top: 1px solid var(--line); font-size: 7px; letter-spacing: .15em; }
.seed-card { right: 0; bottom: 3%; width: 110px; padding: 16px; background: var(--acid); transform: rotate(5deg); }
.seed-card b { display: block; font-size: 31px; letter-spacing: -.06em; margin-top: 9px; }
.scroll-cue { position: absolute; bottom: 25px; left: 4.25vw; display: flex; align-items: center; gap: 14px; font-size: 7px; letter-spacing: .2em; }
.scroll-cue i { position: relative; display: block; width: 74px; height: 1px; background: var(--ink); overflow: hidden; }
.scroll-cue i::after { content: ""; position: absolute; width: 30%; height: 2px; background: var(--orange); animation: scan 2s infinite; }

.signal-strip { overflow: hidden; padding: 15px 0; border-block: 1px solid var(--ink); background: var(--acid); }
.signal-track { display: flex; align-items: center; width: max-content; animation: ticker 32s linear infinite; }
.signal-track span { margin: 0 25px; font-size: 10px; font-weight: 700; letter-spacing: .19em; }
.signal-track i { font-style: normal; }

.section { position: relative; padding: 120px 4.25vw; }
.section-number { position: absolute; right: 4.25vw; top: 65px; font-size: 110px; letter-spacing: -.08em; font-weight: 700; opacity: .055; }
.section h2 { font-size: clamp(48px, 6.2vw, 96px); }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 50px; margin-bottom: 58px; }
.section-aside { max-width: 370px; margin: 0; color: var(--muted); line-height: 1.7; }
.reveal { opacity: 0; transform: translateY(35px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.visible { opacity: 1; transform: none; }

.gallery { background: var(--paper-deep); }
.gallery-heading { display: grid; grid-template-columns: 1fr auto; align-items: end; margin-bottom: 65px; }
.gallery-heading .eyebrow { grid-column: 1 / -1; }
.gallery-heading p:last-child { max-width: 290px; color: var(--muted); line-height: 1.6; }
.gallery-grid { display: grid; grid-template-columns: 1fr 1.18fr .86fr; gap: 16px; align-items: end; }
.visual-card { position: relative; transform-style: preserve-3d; transition: transform .16s ease-out; }
.visual-card:nth-child(1) { margin-bottom: 75px; }.visual-card:nth-child(3) { margin-bottom: 35px; }
.visual-art { position: relative; min-height: 450px; overflow: hidden; border: 1px solid var(--ink); background: var(--ink); }
.visual-two .visual-art { min-height: 590px; }.visual-three .visual-art { min-height: 400px; }
.visual-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 20%, rgba(255,255,255,.18) 48%, transparent 54%); transform: translateX(-120%); transition: transform 1s var(--ease); }
.visual-card:hover .visual-art::after { transform: translateX(120%); }
.visual-one .visual-art { background: radial-gradient(circle at 52% 38%, #e7d2cc, #9d868f 29%, #313039 67%, #131318); }
.chrome-shape { position: absolute; width: 63%; height: 57%; left: 19%; top: 20%; border-radius: 48% 52% 35% 65% / 55% 38% 62% 45%; background: conic-gradient(from 30deg, #111, #fff 13%, #716778 25%, #e9ff8b 36%, #19181d 48%, #e9c7d0 66%, #fff 76%, #38353d 88%, #111); box-shadow: 0 34px 55px #0008; transform: rotate(-16deg); }
.visual-two .visual-art { background: linear-gradient(165deg, #ef8357 0 24%, #9a4a61 25% 44%, #302435 45% 70%, #111 71%); }
.portal-shape { position: absolute; width: 58%; height: 76%; left: 21%; top: 12%; border: 20px solid #e6ff6a; border-radius: 50% 50% 4% 4%; box-shadow: 0 0 55px rgba(222,255,63,.45), inset 0 0 65px rgba(222,255,63,.26); }
.portal-shape::after { content: ""; position: absolute; inset: 14%; background: linear-gradient(#19141e, #5a405f 50%, #ff7650); border-radius: inherit; }
.visual-three .visual-art { background: radial-gradient(circle at 33% 28%, #f6ffb3, #9eb33a 27%, #344626 54%, #11170f 80%); }
.organic-shape { position: absolute; inset: 17% 15%; filter: drop-shadow(15px 20px 25px #0008); background: repeating-conic-gradient(from 30deg, #dffd5e 0 7deg, #384725 8deg 15deg, #899f3c 16deg 22deg); border-radius: 67% 33% 54% 46% / 42% 61% 39% 58%; transform: rotate(13deg); }
.visual-card footer { padding: 17px 2px; display: grid; grid-template-columns: 1fr auto; gap: 4px; border-bottom: 1px solid var(--line); }
.visual-card footer span { font-size: 7px; letter-spacing: .16em; color: var(--orange); }.visual-card footer b { grid-column: 1; font-size: 19px; }.visual-card footer small { grid-column: 2; grid-row: 2; color: var(--muted); font-size: 8px; }

.studio { overflow: hidden; background: var(--ink); color: var(--paper); }
.studio-orbit { position: absolute; width: 700px; height: 700px; right: -280px; top: -310px; border: 1px solid rgba(223,255,63,.18); border-radius: 50%; }
.studio-orbit::before, .studio-orbit::after { content: ""; position: absolute; border: 1px solid rgba(223,255,63,.12); border-radius: 50%; inset: 80px; }.studio-orbit::after { inset: 180px; }
.balance-pill { position: relative; z-index: 2; border: 1px solid #5a5852; padding: 13px 18px; font-size: 10px; letter-spacing: .11em; background: rgba(255,255,255,.03); }
.prompt-presets { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin-bottom: 17px; }
.prompt-presets span { margin-right: 7px; font-size: 8px; letter-spacing: .18em; color: #85827a; }
.prompt-presets button { padding: 8px 12px; border: 1px solid #46443f; border-radius: 30px; background: transparent; color: #bbb8af; font-size: 9px; cursor: pointer; transition: .25s; }
.prompt-presets button:hover { border-color: var(--acid); color: var(--acid); transform: translateY(-2px); }
.studio-shell { display: grid; grid-template-columns: .92fr 1.08fr; min-height: 650px; border: 1px solid #55534d; background: #151512; box-shadow: 0 50px 100px #0006; }
.generator-panel { padding: 34px; display: flex; flex-direction: column; gap: 17px; border-right: 1px solid #55534d; }
.panel-top, .form-footer, .result-meta { display: flex; justify-content: space-between; font-size: 7px; letter-spacing: .18em; color: #918e86; }
.prompt-field { position: relative; flex: 1; min-height: 260px; }
textarea, input, select { border: 1px solid #55534d; background: #1c1c19; color: var(--paper); outline: none; border-radius: 0; }
textarea:focus, input:focus, select:focus { border-color: var(--acid); box-shadow: 0 0 0 1px var(--acid); }
textarea { width: 100%; height: 100%; min-height: 260px; padding: 20px 58px 20px 20px; resize: none; font-size: 17px; line-height: 1.65; }
textarea::placeholder, input::placeholder { color: #6f6d66; }
.prompt-random { position: absolute; right: 14px; bottom: 14px; display: grid; place-items: center; width: 35px; height: 35px; border: 1px solid #5d5a54; background: transparent; color: var(--acid); cursor: pointer; transition: .3s; }
.prompt-random:hover { background: var(--acid); color: var(--ink); transform: rotate(90deg); }
.field-grid { display: grid; grid-template-columns: 1.2fr 1.25fr .75fr; gap: 9px; }
.field-grid label, dialog label { display: flex; flex-direction: column; gap: 8px; font-size: 8px; letter-spacing: .14em; color: #aaa79f; }
select { width: 100%; padding: 13px 11px; font-size: 9px; cursor: pointer; }
.generate-button { width: 100%; padding: 18px 20px; border-color: var(--acid); background: var(--acid); color: var(--ink); font-size: 13px; }
.generate-button::before { background: var(--orange); }
.generate-button:disabled { cursor: wait; color: var(--paper); background: #34332f; border-color: #4c4a45; }
.generate-button:disabled::before { display: none; }
.button-progress { position: absolute; left: 0; bottom: 0; height: 2px; width: 35%; background: var(--acid); transform: translateX(-100%); opacity: 0; }
.generate-button:disabled .button-progress { opacity: 1; animation: loading-line 1.3s infinite ease-in-out; }
.form-footer p { margin: 0; text-transform: none; letter-spacing: .03em; }.form-footer span { color: #6d6a64; }
.result-panel { position: relative; min-width: 0; display: grid; place-items: center; overflow: hidden; background-color: #10100e; background-image: linear-gradient(#22221f 1px, transparent 1px), linear-gradient(90deg,#22221f 1px,transparent 1px); background-size: 42px 42px; }
.result-panel::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 48%, rgba(223,255,63,.06), transparent 55%); }
.result-scan { position: absolute; z-index: 5; left: 0; right: 0; top: -8%; height: 5%; background: linear-gradient(transparent, rgba(223,255,63,.7), transparent); opacity: 0; }
.result-panel.generating .result-scan { opacity: 1; animation: result-scan 2.2s linear infinite; }
.result-corners i { position: absolute; width: 25px; height: 25px; z-index: 3; border-color: #6f6c65; }
.result-corners i:nth-child(1) { left: 20px; top: 20px; border-left: 1px solid; border-top: 1px solid; }.result-corners i:nth-child(2) { right: 20px; top: 20px; border-right: 1px solid; border-top: 1px solid; }.result-corners i:nth-child(3) { left: 20px; bottom: 20px; border-left: 1px solid; border-bottom: 1px solid; }.result-corners i:nth-child(4) { right: 20px; bottom: 20px; border-right: 1px solid; border-bottom: 1px solid; }
.empty-result { position: relative; z-index: 2; text-align: center; color: #76736c; }
.empty-result p { margin: 22px 0 18px; font-size: 9px; line-height: 1.8; letter-spacing: .15em; }.empty-result p b { color: #aaa79f; }.empty-result small { font-size: 6px; letter-spacing: .16em; }
.aperture { position: relative; width: 95px; height: 95px; margin: auto; border: 1px solid #484641; border-radius: 50%; animation: aperture-spin 14s linear infinite; }
.aperture::before { content: ""; position: absolute; inset: 16px; border: 1px dashed #65625c; border-radius: 50%; }
.aperture i { position: absolute; width: 1px; height: 100%; left: 50%; background: #484641; }.aperture i:nth-child(2) { transform: rotate(60deg); }.aperture i:nth-child(3) { transform: rotate(120deg); }
.result-panel img { position: relative; z-index: 2; display: none; width: 100%; height: 100%; max-height: 760px; object-fit: contain; background: #0d0d0c; }
.result-panel.has-result img { display: block; }.result-panel.has-result .empty-result { display: none; }
.result-meta { position: absolute; z-index: 7; left: 25px; right: 25px; bottom: 24px; pointer-events: none; }.result-panel.has-result .result-meta { text-shadow: 0 1px 5px #000; color: #fff; }
.download { display: none; position: absolute; z-index: 8; right: 24px; top: 24px; background: var(--paper); color: var(--ink); }
.result-panel.has-result .download { display: inline-flex; }

.process { background: var(--paper); }
.process-intro { margin-bottom: 75px; }
.steps { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--ink); }
.steps article { position: relative; min-height: 350px; padding: 28px 35px 20px 0; border-right: 1px solid var(--line); }
.steps article + article { padding-left: 35px; }.steps article:last-child { border-right: 0; }
.steps b { color: var(--orange); font-size: 9px; letter-spacing: .15em; }
.step-symbol { margin: 60px 0 36px; font-family: "Playfair Display",serif; font-size: 64px; line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--ink); transition: .35s var(--ease); }
.steps article:hover .step-symbol { color: var(--acid); -webkit-text-stroke-color: var(--ink); transform: translateX(8px) rotate(-5deg); }
.steps h3 { margin: 0 0 14px; font-size: 27px; letter-spacing: -.04em; }.steps p { max-width: 340px; color: var(--muted); line-height: 1.7; font-size: 13px; }

.manifesto { position: relative; min-height: 660px; padding: 120px 8vw; display: grid; place-items: center; overflow: hidden; background: var(--orange); color: var(--ink); text-align: center; }
.manifesto::before, .manifesto::after { content: ""; position: absolute; width: 420px; height: 420px; border: 1px solid rgba(17,17,15,.25); border-radius: 50%; }.manifesto::before { left: -180px; top: -190px; }.manifesto::after { right: -180px; bottom: -190px; }
.manifesto-mark { position: absolute; top: 45px; font-family: "Playfair Display",serif; font-size: 150px; opacity: .15; }
.manifesto p { position: relative; z-index: 2; margin: 0; font-size: clamp(43px,6vw,88px); line-height: .98; letter-spacing: -.055em; font-weight: 600; }
.manifesto em { color: var(--paper); }.manifesto > span { position: absolute; bottom: 45px; font-size: 8px; letter-spacing: .23em; }

.pricing { background: var(--paper-deep); }
.price-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; border: 1px solid var(--ink); background: var(--ink); }
.price-card { position: relative; min-height: 430px; padding: 34px; display: flex; flex-direction: column; overflow: hidden; background: var(--paper-deep); transition: transform .35s var(--ease), background .35s; }
.price-card::after { content: attr(data-index); position: absolute; right: 14px; top: -24px; font-size: 130px; font-weight: 700; opacity: .045; letter-spacing: -.1em; }
.price-card.featured { background: var(--acid); transform: translateY(-14px); }
.price-card:hover { background: var(--white); transform: translateY(-7px); }.price-card.featured:hover { transform: translateY(-21px); }
.price-card h3 { margin: 0; font-size: 25px; letter-spacing: -.04em; }.price-card .amount { margin: 65px 0 4px; font-size: 58px; font-weight: 600; letter-spacing: -.075em; }.price-card .credits { width: max-content; padding: 5px 8px; background: var(--ink); color: var(--paper); font-size: 8px; letter-spacing: .13em; }.price-card p { max-width: 280px; color: var(--muted); line-height: 1.6; font-size: 12px; }.price-card button { margin-top: auto; }
.skeleton { height: 430px; background: #d2cec3; animation: skeleton 1.5s infinite; }.payment-state { min-height: 24px; text-align: center; color: var(--muted); font-size: 11px; }

.cabinet { background: var(--white); }.cabinet-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 55px; }.list-title { display: flex; justify-content: space-between; align-items: center; }.list-title h3 { font-size: 20px; }.list-title span { font-size: 7px; letter-spacing: .18em; color: var(--muted); }.activity-list { border-top: 1px solid var(--ink); }.activity-item { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 18px 0; border-bottom: 1px solid #dad6cb; }.activity-item p { margin: 0; font-size: 12px; }.activity-item small { color: var(--muted); font-size: 9px; }.activity-item b { font-size: 11px; text-transform: uppercase; }
.hidden { display: none !important; }

.site-footer { padding: 70px 4.25vw 25px; background: var(--ink); color: var(--paper); }
.footer-top { display: grid; grid-template-columns: 1fr 1fr auto; align-items: end; padding-bottom: 70px; }.footer-top p { margin: 0; color: #9e9b93; font-family: "Playfair Display",serif; font-style: italic; font-size: 20px; }.to-top { font-size: 8px; letter-spacing: .2em; }
.footer-bottom { display: grid; grid-template-columns: 1fr auto 1fr; gap: 25px; padding-top: 22px; border-top: 1px solid #403f3a; font-size: 7px; letter-spacing: .14em; color: #77746d; }.footer-bottom nav { display: flex; gap: 24px; color: var(--paper); }.footer-bottom span:last-child { text-align: right; }

dialog { width: min(780px,calc(100% - 32px)); padding: 0; border: 1px solid var(--ink); background: var(--paper); color: var(--ink); box-shadow: 0 50px 120px #0008; }
dialog::backdrop { background: rgba(8,8,7,.78); backdrop-filter: blur(8px); }
dialog[open] { display: grid; grid-template-columns: .75fr 1.25fr; animation: dialog-in .4s var(--ease); }
.dialog-visual { position: relative; min-height: 530px; overflow: hidden; background: #151417; }.dialog-visual div { position: absolute; width: 310px; height: 310px; left: -80px; top: 75px; border-radius: 50%; background: conic-gradient(from 130deg, #111, var(--violet), var(--orange), var(--acid), #111); filter: blur(1px); animation: brand-spin 12s linear infinite; }.dialog-visual div::after { content: ""; position: absolute; inset: 35%; border-radius: 50%; background: #151417; box-shadow: 0 0 60px #000; }.dialog-visual span { position: absolute; left: 20px; bottom: 20px; color: #fff; font-size: 7px; letter-spacing: .2em; }
.dialog-content { position: relative; padding: 45px; }.dialog-close { position: absolute; right: 16px; top: 11px; border: 0; background: none; font-size: 31px; cursor: pointer; }.dialog-content h2 { margin: 0 0 12px; font-size: 53px; letter-spacing: -.065em; }.dialog-lead { margin: 0 0 27px; color: var(--muted); font-size: 12px; line-height: 1.6; }.dialog-content form { display: flex; flex-direction: column; gap: 17px; }.dialog-content input { padding: 14px; background: var(--white); border-color: var(--line); color: var(--ink); }.dialog-content .button { margin-top: 5px; }.switch-auth { width: 100%; border: 0; background: none; margin-top: 13px; cursor: pointer; font-size: 11px; text-decoration: underline; }.auth-error { min-height: 18px; margin: 12px 0 0; color: #b42318; font-size: 10px; }
.toast { position: fixed; z-index: 80; right: 24px; bottom: 24px; max-width: 410px; display: flex; align-items: center; gap: 12px; padding: 16px 19px; background: var(--acid); color: var(--ink); border: 1px solid var(--ink); box-shadow: 8px 8px 0 #1113; opacity: 0; transform: translateY(24px); pointer-events: none; transition: .3s var(--ease); font-size: 11px; }.toast i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink); }.toast.show { opacity: 1; transform: none; }

.legal { min-height: 100vh; padding: 70px 20px; background: var(--paper); }.legal main { max-width: 820px; margin: auto; }.legal h1 { margin: 40px 0; font-size: clamp(45px,7vw,82px); line-height: .92; letter-spacing: -.065em; }.legal h2 { margin-top: 46px; }.legal p { line-height: 1.75; }.legal .back { font-size: 11px; font-weight: 700; }.legal hr { margin-top: 50px; border: 0; border-top: 1px solid var(--line); }.muted { color: var(--muted); }

@keyframes brand-spin { to { transform: rotate(360deg); } }
@keyframes status-pulse { 50% { box-shadow: 0 0 0 7px rgba(99,198,77,0); } }
@keyframes breathe { 50% { transform: scale(1.035) translateY(-7px); filter: saturate(1.12); } }
@keyframes drift { 50% { transform: rotate(-8deg) translate(8px,-10px); } }
@keyframes scan { from { transform: translateX(-120%); } to { transform: translateX(340%); } }
@keyframes ticker { to { transform: translateX(-50%); } }
@keyframes aperture-spin { to { transform: rotate(360deg); } }
@keyframes result-scan { to { top: 103%; } }
@keyframes loading-line { 0% { transform: translateX(-110%); } 100% { transform: translateX(390%); } }
@keyframes skeleton { 50% { opacity: .5; } }
@keyframes dialog-in { from { opacity: 0; transform: translateY(25px) scale(.98); } }

@media (max-width: 1050px) {
  .system-status { display: none; }
  .hero { grid-template-columns: 1fr; padding-top: 135px; }
  .hero::before { display: none; }
  .hero-art { min-height: 650px; margin-top: 20px; }
  .gallery-grid { grid-template-columns: 1fr 1fr; }.visual-card:nth-child(3) { grid-column: 1 / -1; width: 54%; justify-self: center; }.visual-card:nth-child(1),.visual-card:nth-child(3) { margin-bottom: 0; }
  .studio-shell { grid-template-columns: 1fr; }.generator-panel { min-height: 620px; border-right: 0; border-bottom: 1px solid #55534d; }.result-panel { min-height: 620px; }
}

@media (max-width: 760px) {
  .cursor-aura { display: none; }
  .site-header { height: 70px; grid-template-columns: 1fr auto; padding: 0 20px; }.site-header nav { display: none; }.header-actions { gap: 0; }
  .hero { min-height: auto; padding: 125px 20px 75px; }.hero h1 { font-size: clamp(57px,17vw,85px); }.lead { margin-top: 34px; }.hero-actions { align-items: flex-start; flex-direction: column; }.hero-meta { gap: 0; }.hero-meta div { padding-right: 13px; margin-right: 13px; }.hero-index,.scroll-cue { display: none; }.hero-art { min-height: 500px; }.art-frame { inset: 4% 2% 8%; }.prompt-card { left: -1%; top: 12%; width: 185px; }.seed-card { right: 1%; }
  .section { padding: 85px 20px; }.section-head,.gallery-heading { display: flex; flex-direction: column; align-items: flex-start; }.section h2 { font-size: clamp(48px,14vw,72px); }.section-number { top: 30px; font-size: 75px; }
  .gallery-grid { grid-template-columns: 1fr; gap: 45px; }.visual-card:nth-child(3) { grid-column: auto; width: 100%; }.visual-art,.visual-two .visual-art,.visual-three .visual-art { min-height: 470px; }
  .prompt-presets { align-items: flex-start; flex-direction: column; }.prompt-presets span { margin-bottom: 4px; }
  .studio-shell { min-height: 0; }.generator-panel { min-height: 650px; padding: 22px; }.field-grid { grid-template-columns: 1fr; }.prompt-field,textarea { min-height: 220px; }.result-panel { min-height: 480px; }
  .steps { grid-template-columns: 1fr; }.steps article,.steps article+article { min-height: 280px; padding: 25px 0; border-right: 0; border-bottom: 1px solid var(--line); }.step-symbol { margin: 40px 0 20px; }
  .manifesto { min-height: 580px; padding-inline: 20px; }.manifesto p { font-size: clamp(40px,12vw,64px); }
  .price-grid { grid-template-columns: 1fr; }.price-card,.skeleton { min-height: 350px; }.price-card.featured,.price-card.featured:hover { transform: none; }.price-card .amount { margin-top: 40px; }
  .cabinet-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr auto; gap: 45px; }.footer-top p { grid-column: 1 / -1; grid-row: 2; }.footer-bottom { grid-template-columns: 1fr; }.footer-bottom nav { flex-wrap: wrap; }.footer-bottom span:last-child { text-align: left; }
  dialog[open] { display: block; }.dialog-visual { display: none; }.dialog-content { padding: 38px 25px; }
}

@media (max-width: 420px) {
  .brand-name { font-size: 17px; }.button.compact { padding: 9px 12px; }
  .hero h1 { font-size: 57px; }.hero-meta div:last-child { display: none; }.hero-art { min-height: 420px; }.prompt-card { width: 165px; padding: 13px; }.prompt-card p { font-size: 13px; }.seed-card { width: 90px; }
  .visual-art,.visual-two .visual-art,.visual-three .visual-art { min-height: 390px; }
  .result-panel { min-height: 380px; }.form-footer span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}