@charset "UTF-8";
:root {
  color-scheme:dark;
  --bg:#0a0a0b;
  --panel:#111113;
  --text:#efedf2;
  --muted:#929097;
  --line:#2b292f;
  --accent:#c3afff;
  --row-size:60px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei","PingFang SC",sans-serif;
  font-synthesis:none
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:112px
}

body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-size:14px;
  line-height:1.7
}

button,textarea {
  font:inherit
}

button,a,summary {
  -webkit-tap-highlight-color:transparent
}

button {
  cursor:pointer
}

button {
  border:0
}

button:disabled {
  cursor:not-allowed;
  opacity:.42
}

button:focus-visible,a:focus-visible,summary:focus-visible,textarea:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:5px
}

button:hover:not(:disabled) {
  filter:brightness(1.1)
}

a {
  color:inherit;
  text-decoration:none
}

p,h1,h2,h3 {
  margin:0
}

button {
  transition:background .18s,transform .18s
}

button:active:not(:disabled) {
  transform:translateY(1px)
}

[hidden] {
  display:none!important
}

::selection {
  background:#544071;
  color:white
}

.page-shell {
  width:min(1160px,calc(100% - 88px));
  margin:auto
}

.site-header {
  height:108px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line)
}

.brand {
  display:flex;
  gap:13px;
  align-items:center;
  font-size:20px;
  font-weight:700;
  letter-spacing:2px;
  line-height:1.3
}

.brand-mark {
  width:37px;
  height:37px;
  fill:none;
  stroke:var(--accent);
  stroke-width:1.5;
  stroke-linejoin:round
}

.brand-sub {
  display:block;
  font-size:8px;
  font-weight:500;
  letter-spacing:2.6px;
  margin-top:6px;
  color:var(--muted)
}

.local-badge {
  color:#b4b1bb;
  font-size:11px;
  letter-spacing:1px;
  display:flex;
  gap:8px;
  align-items:center
}

.local-badge i {
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--accent)
}

.hero {
  padding:57px 0 49px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:36px
}

.eyebrow {
  font-size:10px;
  letter-spacing:2.6px;
  color:var(--accent);
  margin-bottom:17px;
  font-weight:600
}

h1 {
  font-size:clamp(38px,4.2vw,54px);
  letter-spacing:-1.7px;
  line-height:1.32;
  font-weight:650
}

.accent {
  color:var(--accent)
}

.title-dot {
  margin-left:4px;
  color:var(--accent)
}

.hero-description {
  margin-top:21px;
  color:#aaa6b0;
  font-size:13px;
  line-height:1.9;
  letter-spacing:.2px
}

.mobile-break {
  display:none
}

.hero-aside {
  width:240px;
  flex-shrink:0;
  display:grid;
  justify-items:center;
  margin-right:18px;
  color:#817b8d;
  font-size:10px;
  letter-spacing:2px
}

.orbital {
  width:190px;
  height:170px;
  position:relative;
  display:grid;
  place-items:center
}

.orbit {
  width:152px;
  height:80px;
  border:1px solid #39323f;
  border-radius:50%;
  position:absolute;
  left:19px;
  top:43px
}

.orbit-one {
  transform:rotate(-31deg)
}

.orbit-two {
  transform:rotate(31deg)
}

.orbit-three {
  transform:rotate(90deg)
}

.orbit-core {
  font-family:serif;
  font-size:71px;
  color:var(--accent);
  font-weight:400;
  line-height:1;
  transform:rotate(12deg);
  text-shadow:0 0 50px #b09aff15
}

.satellite {
  position:absolute;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--accent)
}

.satellite.one {
  left:22px;
  top:65px
}

.satellite.two {
  right:35px;
  bottom:43px;
  width:5px;
  height:5px;
  background:#7e6b9e
}

.selection-summary {
  position:sticky;
  top:0;
  z-index:5;
  background:#0e0d10f5;
  backdrop-filter:blur(16px);
  border:1px solid var(--line);
  border-radius:10px;
  display:grid;
  grid-template-columns:1fr 16px 1fr 16px 1fr 16px 1fr;
  align-items:center;
  padding:14px 23px;
  gap:16px;
  box-shadow:0 12px 28px #0002
}

.selection-summary>div {
  min-width:0
}

.summary-label {
  display:block;
  color:var(--muted);
  font-size:9px;
  letter-spacing:1.5px;
  margin-bottom:3px
}

.selection-summary strong {
  display:block;
  font-size:12px;
  font-weight:500;
  overflow-wrap:anywhere;
  line-height:1.65
}

.summary-plus {
  color:#685c79;
  font-size:20px;
  font-weight:300;
  text-align:center
}

.choose-section {
  margin-top:36px
}

.section-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px
}

h2 {
  font-size:17px;
  font-weight:550;
  letter-spacing:.6px;
  display:flex;
  align-items:center;
  gap:13px
}

.step-number {
  font-size:11px;
  font-weight:400;
  letter-spacing:1px;
  color:var(--accent)
}

.text-button {
  padding:7px 0 7px 12px;
  background:transparent;
  color:#aaa4b3;
  font-size:12px;
  white-space:nowrap
}

.random-button span {
  font-size:21px;
  vertical-align:-2px;
  margin-right:7px
}

.wheel-help {
  font-size:10px;
  letter-spacing:.5px;
  color:var(--muted);
  margin:6px 0 18px
}

.selectors {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:17px;
  align-items:start
}

.selector-card {
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--panel);
  overflow:hidden
}

.card-heading {
  height:62px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:0 21px
}

.card-heading h3 {
  font-size:13px;
  font-weight:500;
  display:flex;
  align-items:center;
  gap:10px
}

.card-heading h3 span {
  font-size:10px;
  color:var(--accent);
  font-weight:400
}

.item-count {
  font-size:9px;
  color:var(--muted);
  letter-spacing:.3px
}

.wheel-frame {
  position:relative;
  margin:0 10px;
  isolation:isolate
}

.wheel {
  height:calc(var(--row-size)*5);
  padding:calc(var(--row-size)*2) 0;
  overflow-y:auto;
  overscroll-behavior-y:contain;
  scroll-snap-type:y mandatory;
  scrollbar-width:none;
  position:relative;
  mask-image:linear-gradient(transparent,#000 22%,#000 78%,transparent);
  outline:none;
  touch-action:pan-y
}

.wheel::-webkit-scrollbar {
  display:none
}

.wheel-frame:has(.wheel:focus-visible) {
  outline:1px solid var(--accent);
  outline-offset:3px;
  border-radius:8px
}

.selection-lens {
  height:var(--row-size);
  position:absolute;
  inset:calc(var(--row-size)*2) 0 auto;
  border:1px solid #c3afff40;
  border-radius:7px;
  background:#24202e;
  z-index:-1
}

.selection-lens:before {
  content:"";
  width:3px;
  height:15px;
  border-radius:4px;
  background:var(--accent);
  position:absolute;
  left:0;
  top:calc(50% - 7px)
}

.wheel-option {
  scroll-snap-align:center;
  min-height:var(--row-size);
  height:var(--row-size);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:4px 22px;
  color:#aaa5b2;
  font-size:14px;
  line-height:1.5;
  letter-spacing:.2px;
  cursor:pointer;
  user-select:none;
  overflow-wrap:anywhere;
  transition:color .15s;
  position:relative
}

.wheel-option[aria-selected=true] {
  font-weight:600;
  color:#e4d9ff
}

.wheel-option:hover {
  color:#e4d9ff
}

.card-description {
  padding:21px 21px 15px;
  min-height:174px;
  border-top:1px solid #252329;
  margin-top:16px
}

.description-kicker {
  font-size:9px;
  color:var(--accent);
  letter-spacing:1px;
  margin-bottom:8px
}

.card-description>p:not(.description-kicker) {
  color:#bcb7c4;
  font-size:12px;
  line-height:1.85;
  min-height:45px
}

.selector-card.has-reference {
  position:relative;
  isolation:isolate
}

.card-backdrop {
  position:absolute;
  inset:0;
  z-index:-1;
  overflow:hidden;
  pointer-events:none
}

.card-backdrop img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  opacity:.38;
  display:block
}

.card-backdrop::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,#111113c9 0%,#11111324 32%,#11111370 62%,#111113f5 100%)
}

.selector-card.has-reference .selection-lens {
  background:#24202ed9
}

.selector-card.has-reference .card-description {
  background:linear-gradient(#11111330,#111113d9)
}

.image-credit {
  display:inline-block;
  margin-top:14px;
  color:#a99bbf;
  font-size:10px;
  line-height:1.7;
  overflow-wrap:anywhere
}

.image-credit:hover {
  color:var(--accent);
  text-decoration:underline;
  text-underline-offset:3px
}

details {
  margin-top:13px;
  border-top:1px solid #28252c
}

summary {
  display:flex;
  align-items:center;
  justify-content:space-between;
  cursor:pointer;
  padding:12px 0 0;
  font-size:10px;
  color:#9f97ad;
  list-style:none;
  gap:7px
}

summary::-webkit-details-marker {
  display:none
}

summary span {
  font-size:15px;
  line-height:1;
  transition:transform .2s
}

details[open] summary span {
  transform:rotate(45deg)
}

dl {
  margin:14px 0 4px;
  font-size:11px
}

dt {
  color:#d3c9e3;
  margin-top:11px
}

dd {
  margin:3px 0 0;
  color:#a9a2b3;
  line-height:1.85
}

.generate-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:28px 0 34px
}

.generate-row p {
  color:#c5becd;
  font-size:12px;
  line-height:1.9
}

.budget-control {
  min-width:0
}

.budget-label {
  display:block;
  color:#c5becd;
  font-size:11px;
  margin-bottom:8px
}

.budget-options {
  display:inline-flex;
  gap:3px;
  padding:4px;
  border:1px solid var(--line);
  background:#141217;
  border-radius:8px
}

.budget-options label {
  cursor:pointer;
  flex:1
}

.budget-options span {
  display:block;
  padding:7px 13px;
  border-radius:5px;
  color:#aaa1b4;
  font-size:11px;
  white-space:nowrap;
  text-align:center
}

.budget-options input:checked+span {
  background:#33283f;
  color:#e6d8ff
}

.budget-options input:focus-visible+span {
  outline:2px solid var(--accent);
  outline-offset:2px
}

.generate-row #budget-hint {
  font-size:10px;
  color:#8e8699;
  margin-top:7px
}

.generate-row .muted {
  padding-left:20px;
  font-size:11px;
  color:#8e8699
}

.small-star {
  color:var(--accent);
  margin-right:6px
}

.primary-button {
  background:var(--accent);
  color:#18121f;
  border:1px solid transparent;
  border-radius:7px;
  padding:14px 22px;
  font-weight:650;
  font-size:12px;
  display:flex;
  gap:25px;
  align-items:center;
  justify-content:center;
  letter-spacing:.3px;
  min-height:47px
}

.primary-button>span {
  font-size:19px;
  line-height:1
}

.result-section {
  border-top:1px solid var(--line);
  padding-top:30px;
  scroll-margin-top:110px
}

.result-tag {
  font-size:9px;
  color:var(--muted);
  letter-spacing:1.8px
}

.empty-state {
  border:1px dashed #302b36;
  border-radius:9px;
  min-height:186px;
  margin-top:23px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  text-align:center;
  padding:28px 20px
}

.empty-icon {
  font-size:24px;
  letter-spacing:8px;
  font-weight:200;
  color:#554b60;
  line-height:1;
  margin-bottom:15px
}

.empty-icon span {
  font-size:28px;
  color:#b09acc
}

.empty-state p {
  font-size:12px;
  color:#aaa1b4
}

.empty-state>span:last-child {
  font-size:10px;
  color:#857c90;
  margin-top:5px
}

.result-toolbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:20px 0 13px
}

.result-toolbar p {
  color:var(--accent);
  font-size:11px
}

.result-toolbar p.stale {
  color:#f0c37f
}

.result-actions {
  display:flex;
  gap:8px
}

.compact {
  padding:9px 15px;
  gap:13px;
  min-height:40px;
  font-size:11px
}

.secondary-button {
  background:#17141c;
  border:1px solid #3a3145;
  border-radius:6px;
  color:#c3b8d1;
  padding:8px 13px;
  font-size:11px;
  min-height:40px
}

.prompt-output {
  display:block;
  width:100%;
  height:580px;
  resize:vertical;
  min-height:280px;
  padding:24px;
  background:#101013;
  color:#c9c2d2;
  border:1px solid #302a39;
  border-radius:9px;
  line-height:2;
  font-family:inherit;
  font-size:12px;
  scrollbar-color:#4c415b #101013
}

.prompt-output.stale {
  opacity:.5
}

.copy-feedback {
  min-height:28px;
  padding-top:7px;
  font-size:11px;
  color:#d7c7ed
}

.copy-feedback.error {
  color:#f0c37f
}

.custom-input {
  margin-top:14px
}

.custom-input label {
  font-size:11px;
  color:#ded2ed
}

.custom-input textarea {
  margin-top:7px;
  padding:10px 11px;
  width:100%;
  max-width:100%;
  resize:vertical;
  min-height:88px;
  font-size:12px;
  background:#0c0b0e;
  border:1px solid #524263;
  border-radius:6px;
  color:var(--text);
  line-height:1.75
}

.custom-input textarea::placeholder {
  color:#80738e
}

.input-meta {
  display:flex;
  justify-content:space-between;
  gap:8px;
  color:#a59aad;
  font-size:9px;
  margin-top:3px
}

.input-meta>span:last-child {
  white-space:nowrap
}

.error-message {
  font-size:11px;
  color:#f0c37f;
  min-height:0
}

.error-message:not(:empty) {
  margin-top:6px
}

footer {
  display:flex;
  justify-content:space-between;
  gap:20px;
  border-top:1px solid var(--line);
  margin-top:45px;
  padding:25px 0 34px;
  color:#847b8e;
  font-size:9px;
  letter-spacing:.6px
}

.footer-dot {
  margin:0 7px;
  color:#4a414f
}

.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
}

.noscript {
  position:fixed;
  bottom:20px;
  left:20px;
  right:20px;
  padding:20px;
  background:#342941;
  color:white;
  border:1px solid var(--accent);
  z-index:10
}

/* Desktop stays compact enough to bring the selectors into the first screen. */
@media(min-width:701px) {
  .site-header {
    height:86px
  }

  .hero {
    padding:32px 0
  }

  .hero h1 {
    font-size:46px;
    line-height:1.24
  }

  .hero-description {
    margin-top:15px
  }

  .eyebrow {
    margin-bottom:12px
  }

  .card-description>p:not(.description-kicker) {
    font-size:13px
  }

  .prompt-output {
    font-size:13px
  }

}

@media(min-width:1400px) {
  .page-shell {
    width:1160px
  }

  .hero {
    padding-top:38px;
    padding-bottom:38px
  }

}

@media(min-width:701px) and (max-width:1100px) {
  .selectors { grid-template-columns:repeat(2,minmax(0,1fr)) }
}

@media(max-width:950px) {
  .page-shell {
    width:calc(100% - 48px)
  }

  .card-heading {
    padding:0 15px
  }

  .card-description {
    padding:19px 16px 13px
  }

  .item-count {
    font-size:8px
  }

  .selectors {
    gap:12px
  }

  .wheel-option {
    font-size:13px;
    padding:3px 15px
  }

  .hero-aside {
    width:180px;
    margin:0
  }

  .hero-description {
    font-size:12px
  }

  .selection-summary {
    gap:10px;
    padding:13px 18px
  }

}

@media(max-width:700px) {
  :root {
    --row-size:58px
  }

  html {
    scroll-padding-top:120px
  }

  .page-shell {
    width:calc(100% - 36px)
  }

  .site-header {
    height:83px
  }

  .brand {
    font-size:17px;
    gap:9px
  }

  .brand-mark {
    width:31px;
    height:31px
  }

  .brand-sub {
    font-size:6px;
    letter-spacing:2px;
    margin-top:5px
  }

  .local-badge {
    font-size:9px;
    letter-spacing:0;
    gap:5px
  }

  .hero {
    padding:36px 0 31px;
    gap:0
  }

  .hero-aside {
    display:none
  }

  .eyebrow {
    font-size:8px;
    letter-spacing:1.8px;
    margin-bottom:17px
  }

  h1 {
    font-size:39px;
    letter-spacing:-1px
  }

  .hero-description {
    font-size:11px;
    margin-top:18px;
    line-height:1.85
  }

  .mobile-break {
    display:block
  }

  .selection-summary {
    padding:10px 12px;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:6px;
    border-radius:8px
  }

  .summary-label {
    font-size:8px;
    letter-spacing:0
  }

  .selection-summary strong {
    font-size:10px;
    line-height:1.6
  }

  .summary-plus {
    display:none
  }

  .choose-section {
    margin-top:28px
  }

  h2 {
    font-size:15px;
    gap:10px
  }

  .text-button {
    font-size:11px
  }

  .wheel-help {
    font-size:9px;
    margin:6px 0 15px;
    letter-spacing:0
  }

  .selectors {
    grid-template-columns:1fr;
    gap:17px
  }

  .card-heading {
    height:53px;
    padding:0 20px
  }

  .card-heading h3 {
    font-size:14px
  }

  .item-count {
    font-size:10px
  }

  .wheel {
    height:calc(var(--row-size)*3);
    padding:var(--row-size) 0;
    mask-image:linear-gradient(transparent,#000 29%,#000 71%,transparent)
  }

  .selection-lens {
    top:var(--row-size)
  }

  .wheel-option {
    font-size:15px;
    padding:4px 25px
  }

  .card-description {
    min-height:0;
    padding:17px 20px 13px;
    margin-top:8px
  }

  .card-description>p:not(.description-kicker) {
    min-height:0
  }

  .description-kicker {
    margin-bottom:5px
  }

  .generate-row {
    padding:24px 0 28px;
    flex-direction:column;
    align-items:stretch;
    gap:17px
  }

  .generate-row p {
    font-size:11px
  }

  .primary-button {
    min-height:48px;
    font-size:12px;
    justify-content:space-between;
    padding:13px 18px
  }

  .result-section {
    padding-top:24px
  }

  .result-tag {
    font-size:8px;
    letter-spacing:.6px
  }

  .empty-state {
    padding:24px 17px;
    min-height:170px
  }

  .empty-state p {
    font-size:11px
  }

  .empty-state>span:last-child {
    font-size:9px
  }

  .result-toolbar {
    align-items:flex-start;
    flex-direction:column;
    gap:10px
  }

  .result-actions {
    width:100%
  }

  .result-actions .primary-button {
    flex:1;
    justify-content:center;
    gap:14px;
    min-height:42px;
    font-size:11px
  }

  .result-actions .secondary-button {
    flex:1
  }

  .prompt-output {
    height:520px;
    padding:17px;
    font-size:12px
  }

  .copy-feedback {
    font-size:10px
  }

  footer {
    flex-direction:column;
    gap:6px;
    margin-top:30px;
    padding:22px 0;
    font-size:9px
  }

  .input-meta {
    font-size:10px
  }

}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }

  *,*::before,*::after {
    transition:none!important
  }

}


@media(min-width:1101px) and (max-width:1399px) {
  .card-heading { padding:0 16px; gap:8px }
  .card-heading h3 { font-size:14px }
  .item-count { font-size:8px }
  .wheel-option { padding-left:16px; padding-right:16px; font-size:13px }
  .card-description { padding-left:16px; padding-right:16px }
}