:root {
  --asphalt: #11130f;
  --asphalt-soft: #1a1e17;
  --cream: #fff8e8;
  --lime: #d9ff3f;
  --amber: #ff8e2b;
  --line: #4a513d;
  color-scheme: dark;
  font-family: 'Manrope', system-ui, sans-serif;
  background: var(--asphalt);
  color: var(--cream);
}

body {
  background: linear-gradient(135deg, #15180f 0%, #0f130e 58%, #28180e 100%);
  letter-spacing: -.02em;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .24;
  background-image: radial-gradient(#fff8e830 .6px, transparent .8px);
  background-size: 4px 4px;
  mix-blend-mode: soft-light;
}

.shell { width: min(100% - 28px, 1160px); padding-top: 22px; }
.topbar { position: relative; z-index: 1; border-bottom: 1px solid #ffffff20; padding-bottom: 14px; }
.brand { gap: 10px; color: var(--cream); font: 400 1.7rem/.8 'Bebas Neue', sans-serif; letter-spacing: .04em; }
.brand b { color: var(--lime); font-weight: 400; }
.brand-mark { position: relative; display: block; width: 41px; height: 35px; border: 1px solid var(--lime); border-radius: 5px; overflow: hidden; color: var(--asphalt); font: 400 2rem/.95 'Bebas Neue', sans-serif; }
.brand-mark b { position: absolute; left: 5px; top: 4px; color: var(--lime); }
.brand-mark i { position: absolute; right: 4px; bottom: 3px; color: var(--amber); font-style: normal; }
.brand-lockup { display: grid; gap: 4px; }
.brand-lockup small { color: #b9bda9; font: 500 .56rem/1 'DM Mono', monospace; letter-spacing: .12em; }
.install-button, .secondary-button { border-color: #ffffff38; border-radius: 3px; text-transform: uppercase; font: 500 .68rem 'DM Mono', monospace; letter-spacing: .09em; }

.intro { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 28px; max-width: none; padding: 38px 0 42px; align-items: stretch; }
.intro-copy { min-height: 420px; display: flex; flex-direction: column; justify-content: flex-end; padding: 26px 0 16px; }
.eyebrow { color: var(--lime); font: 500 .64rem/1.2 'DM Mono', monospace; letter-spacing: .15em; }
.eyebrow #castoAlias { color: var(--amber); }
h1 { color: var(--cream); font: 400 clamp(5.25rem, 10vw, 8.9rem)/.73 'Bebas Neue', sans-serif; letter-spacing: -.025em; margin: 9px 0 23px; }
h1 em { color: var(--lime); font-family: 'Bebas Neue', sans-serif; font-style: normal; letter-spacing: .01em; }
.lede { max-width: 420px; color: #d0d4c4; font-size: .94rem; line-height: 1.65; }
.hero-notes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 13px; }
.hero-notes span { border: 1px solid #ffffff34; color: #e6ead7; padding: 6px 7px; font: 500 .58rem 'DM Mono', monospace; letter-spacing: .09em; }
.hero-notes span:nth-child(2) { border-color: #ff8e2b90; color: #ffc28a; }
.hero-notes span:nth-child(3) { border-color: #d9ff3f86; color: var(--lime); }
.hero-disclaimer { margin: 12px 0 0; color: #8d9383; font: 400 .63rem 'DM Mono', monospace; letter-spacing: .06em; }
.hero-photo { position: relative; min-height: 420px; margin: 0; overflow: hidden; background: #15180f; border: 1px solid #ffffff22; border-radius: 6px; isolation: isolate; }
.hero-photo::after { display: none; }
.hero-photo img { position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: 57% center; }
.hero-photo figcaption { position: absolute; z-index: 1; bottom: 14px; left: 16px; color: var(--cream); background: #11130fb8; padding: 6px 8px; font: 500 .67rem 'DM Mono', monospace; letter-spacing: .08em; }
.hero-photo figcaption span { color: var(--lime); margin-right: 7px; }

.workspace { position: relative; background: #1b2018; border: 1px solid var(--line); border-radius: 6px; box-shadow: 14px 14px 0 #00000030; }
.workspace::before { content: 'BÉJAR / 40°23′N / ACEITE SONORO'; position: absolute; top: -1px; right: 16px; color: #747b68; font: 500 .56rem 'DM Mono', monospace; letter-spacing: .08em; transform: translateY(-50%); background: var(--asphalt); padding: 0 7px; }
h2 { color: var(--cream); font: 400 2.15rem/.9 'Bebas Neue', sans-serif; letter-spacing: .02em; }
.quality-badge { color: var(--lime); background: #29321a; border-color: #6f913a; border-radius: 3px; font-family: 'DM Mono', monospace; }
.drop-zone { border-color: #718163; border-radius: 4px; background: #171c15; }
.drop-zone:hover, .drop-zone.dragging { background: #252d1e; border-color: var(--lime); }
.drop-icon { background: #2a321e; color: var(--lime); border-radius: 4px; }
.direct-card, .social-card { border-radius: 4px; background: #252a20; color: #c7ccba; }
.social-card { background: linear-gradient(105deg, #252a20, #2b241b); border-color: #695d3e; }
.direct-card strong, .social-card strong { color: var(--cream); font: 700 .88rem 'Manrope', sans-serif; }
.direct-url-row input { background: #141812; border-color: #58624c; border-radius: 3px; }
.direct-url-row input:focus { border-color: var(--lime); box-shadow: 0 0 0 2px #d9ff3f20; }
.direct-url-row button { background: var(--lime); color: #19200f; border-radius: 3px; font: 800 .7rem 'DM Mono', monospace; letter-spacing: .03em; }
.editor { border-top: 1px dashed #505a42; margin-top: 28px; padding-top: 27px; }
.track-dot { background: var(--amber); box-shadow: 0 0 0 4px #ff8e2b21; }
.track-meta output, .range-arrow { color: var(--lime); }
.wave-shell { border-radius: 4px; border-color: #56624a; background: #12160f; }
.time-controls input { border-color: #68765a; }
.primary-button { border-radius: 3px; background: var(--lime); color: #14190e; box-shadow: 4px 4px 0 #00000045; text-transform: uppercase; letter-spacing: .04em; }
.primary-button:hover { background: #edff9a; }
.hint { color: #a9b09d; }
.ios-guide { border-color: #5d654e; border-radius: 5px; background: linear-gradient(135deg, #242b1e, #1f211a); }
.ios-guide li span { border-radius: 3px; background: var(--amber); color: #1e180e; }
.casto-index { margin: 44px 0 8px; border-top: 1px solid #ffffff2b; padding: 22px 0 8px; }
.alias-cloud { max-width: 940px; color: #f0f4df; font: 400 clamp(1.9rem, 5vw, 4.2rem)/.93 'Bebas Neue', sans-serif; letter-spacing: .025em; margin: 13px 0; }
.alias-cloud::first-letter { color: var(--lime); }
.casto-index small { color: #969c8c; font: 500 .62rem 'DM Mono', monospace; letter-spacing: .08em; }
.toast { background: var(--cream); color: #13180f; border-radius: 3px; }

@media (max-width: 640px) {
  .shell { width: min(100% - 22px, 1160px); }
  .topbar { align-items: flex-start; }
  .brand { font-size: 1.45rem; }
  .brand-lockup small { font-size: .51rem; }
  .intro { grid-template-columns: 1fr; gap: 13px; padding: 24px 0 30px; }
  .intro-copy { min-height: auto; padding: 5px 0 9px; }
  h1 { font-size: clamp(4.8rem, 28vw, 6.4rem); margin: 7px 0 17px; }
  .hero-photo { min-height: 280px; }
  .hero-photo img { object-position: 62% center; }
  .workspace::before { display: none; }
  .workspace-heading { padding-top: 3px; }
  .quality-badge { font-size: .58rem; }
  .direct-url-row { align-items: stretch; }
  .direct-url-row button { font-size: .59rem; padding-inline: .56rem; }
  .alias-cloud { font-size: 2.2rem; }
}