/* Diseño original del sitio: tipografía del sistema y geometría de campo en CSS.
   Sin imágenes, fuentes remotas, scripts ni dependencias externas. */
:root {
  color-scheme: light;
  --ink: #102e25;
  --muted: #4d6258;
  --paper: #f5f3e9;
  --white: #fffef9;
  --line: #ccd4c9;
  --green: #c8ed82;
  --deep: #173e31;
}
* { box-sizing: border-box; }
html { scroll-padding-top: 1.5rem; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 1rem; line-height: 1.65; }
a { color: inherit; text-underline-offset: .23em; text-decoration-thickness: .08em; }
a:hover { text-decoration-thickness: .16em; }
a:focus-visible, [tabindex="-1"]:focus-visible { outline: 3px solid var(--ink); outline-offset: 5px; }
.contact-band a:focus-visible { outline-color: var(--green); }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { line-height: 1.08; letter-spacing: -.045em; }
h1 { font-size: clamp(3.4rem, 7.8vw, 7.6rem); font-weight: 750; margin-bottom: 1.5rem; }
h2 { font-size: clamp(2rem, 3.4vw, 3.4rem); font-weight: 700; margin-bottom: 1.5rem; }
h3 { font-size: 1.85rem; margin-bottom: 1.2rem; }
em { font-style: normal; color: #367341; }
.wrap { width: min(100% - 3rem, 76rem); margin-inline: auto; }
.skip-link { position: absolute; top: .5rem; left: 1rem; z-index: 10; transform: translateY(-200%); padding: .8rem 1rem; background: var(--ink); color: var(--white); }
.skip-link:focus { transform: translateY(0); outline: 3px solid var(--green); }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: 1.6rem; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: .75rem; font-weight: 750; font-size: 1.1rem; line-height: 1.3; text-decoration: none; }
.brand-mark { width: 2.55rem; height: 2.55rem; display: grid; place-items: center; border-radius: .65rem .65rem .65rem 0; color: var(--green); background: var(--ink); font-size: .9rem; letter-spacing: -.04em; }
nav { display: flex; flex-wrap: wrap; gap: .65rem 1.6rem; }
nav a { padding-block: .45rem; font-size: .92rem; font-weight: 600; }
nav a[aria-current="page"] { text-decoration-thickness: .16em; }
.hero { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 3.5rem; padding-block: 4.2rem 5.8rem; }
.hero-copy { min-width: 0; }
.status { display: inline-flex; align-items: center; gap: .6rem; padding: .45rem .8rem; border: 1px solid #bccab6; border-radius: 2rem; color: #294d30; font-size: .78rem; font-weight: 650; margin-bottom: 2rem; }
.status span { width: .45rem; height: .45rem; flex-shrink: 0; border-radius: 50%; background: #3d713e; }
.eyebrow, .card-kicker { font-size: .73rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.eyebrow { margin-bottom: 1.1rem; }
.lead { font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.6; max-width: 33rem; color: var(--muted); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 1.5rem; margin-block: 2rem 1.3rem; }
.button { display: inline-flex; justify-content: space-between; align-items: center; gap: 1.7rem; min-height: 3.2rem; padding: .85rem 1.3rem; border-radius: .45rem; font-size: .94rem; font-weight: 700; text-decoration: none; }
.button-primary { background: var(--ink); color: var(--paper); }
.button-primary:hover { background: #24503b; }
.button-light { background: var(--green); color: var(--ink); }
.button-light:hover { background: #dcf7ab; }
.text-link { font-size: .95rem; font-weight: 650; }
.hero-note { color: var(--muted); font-size: .82rem; }
.tactics-art { background: var(--ink); color: var(--green); padding: 1.5rem; border-radius: 1.4rem; box-shadow: 0 1.6rem 2.5rem -1.6rem #102e2555; transform: rotate(3deg); }
.board-heading, .board-footer { display: flex; justify-content: space-between; gap: .8rem; font-size: .57rem; font-weight: 650; letter-spacing: .12em; }
.board-heading { margin-bottom: 1.1rem; }
.board-footer { margin-top: 1.1rem; font-size: .5rem; }
.pitch { position: relative; width: 100%; aspect-ratio: 4 / 5; border: 1px solid #b7d9b377; border-radius: .15rem; overflow: hidden; background: repeating-linear-gradient(0deg, #1c4839 0%, #1c4839 12.5%, #234f3d 12.5%, #234f3d 25%); }
.pitch-midline { position: absolute; top: 50%; width: 100%; border-top: 1px solid #b7d9b377; }
.pitch-circle { position: absolute; width: 29%; aspect-ratio: 1; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 1px solid #b7d9b377; border-radius: 50%; }
.pitch-circle::after { content: ""; position: absolute; top: 50%; left: 50%; width: .25rem; height: .25rem; border-radius: 50%; background: #b7d9b3; transform: translate(-50%, -50%); }
.pitch-area { position: absolute; left: 22%; width: 56%; height: 17%; border: 1px solid #b7d9b377; }
.pitch-area::after { content: ""; position: absolute; left: 26%; width: 48%; height: 43%; border: 1px solid #b7d9b377; }
.area-top { top: -1px; }
.area-top::after { top: -1px; }
.area-bottom { bottom: -1px; }
.area-bottom::after { bottom: -1px; }
.player { position: absolute; width: 6.4%; aspect-ratio: 1; background: var(--green); border: 3px solid #102e25; box-shadow: 0 .2rem .4rem #0003; border-radius: 50%; transform: translate(-50%, -50%); }
.p1 { top: 88%; left: 50%; background: #f5f3e9; }
.p2 { top: 69%; left: 17%; } .p3 { top: 74%; left: 38%; } .p4 { top: 74%; left: 62%; } .p5 { top: 69%; left: 83%; }
.p6 { top: 43%; left: 18%; } .p7 { top: 49%; left: 39%; } .p8 { top: 49%; left: 61%; } .p9 { top: 43%; left: 82%; }
.p10 { top: 24%; left: 37%; } .p11 { top: 24%; left: 63%; }
.features { padding-block: 4.5rem 5.5rem; border-top: 1px solid var(--line); }
.section-heading { max-width: 42rem; }
.section-heading > p:last-child { max-width: 36rem; color: var(--muted); }
.card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin-top: 2.5rem; }
.feature-card { border: 1px solid var(--line); border-radius: .8rem; padding: 2rem; background: var(--white); }
.card-kicker { display: block; color: #41694a; margin-bottom: 1.5rem; }
.feature-card p:last-child { margin-bottom: 0; color: var(--muted); }
.project { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; padding-block: 3rem 5rem; }
.project-copy { padding-top: 2.2rem; color: var(--muted); }
.project-copy .text-link { color: var(--ink); }
.contact-band { padding-block: 3rem; background: var(--ink); color: var(--paper); }
.contact-inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.contact-inner h2 { font-size: clamp(1.8rem, 2.8vw, 2.7rem); margin-bottom: 1rem; }
.contact-inner .eyebrow { color: var(--green); }
.contact-inner p:last-child { margin-bottom: 0; }
.site-footer { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 2rem; padding-block: 3rem; font-size: .83rem; }
.footer-brand { margin-bottom: 1rem; }
.site-footer p { margin-bottom: .4rem; }
.site-footer nav { flex-direction: column; align-items: flex-start; gap: .2rem; }
.site-footer nav a { font-size: .83rem; }
.footer-note { color: var(--muted); }
.email { overflow-wrap: anywhere; }
.support-main { padding-block: 3.5rem 4rem; }
.support-heading { max-width: 48rem; }
.support-heading h1 { font-size: clamp(3rem, 7vw, 6rem); }
.support-contact { display: flex; justify-content: space-between; align-items: center; gap: 2rem; border-block: 1px solid var(--line); padding-block: 2rem; margin-block: 2.5rem; }
.support-contact h2 { font-size: 1.8rem; margin-bottom: 1rem; }
.support-contact p { margin-bottom: .4rem; }
.support-contact .eyebrow { margin-bottom: .8rem; }
.support-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.support-panel { padding: 2rem; border: 1px solid var(--line); border-radius: .8rem; background: var(--white); }
.support-panel h2 { font-size: 1.65rem; line-height: 1.2; }
.support-panel p:last-child { margin-bottom: 0; }
.support-panel ul { padding-left: 1.2rem; }
.support-panel li { padding-left: .2rem; margin-block: .8rem; }
.support-stack { display: grid; gap: 1.5rem; align-content: start; }
.notice { border-left: 3px solid #527a39; background: #eef2e4; padding: 1rem; }
.privacy-panel { background: #eaf0df; }
.back-link { margin-top: 2.5rem; margin-bottom: 0; }
@media (max-width: 60rem) {
  .hero { gap: 2rem; }
  .feature-card { padding: 1.5rem; }
  .site-footer { grid-template-columns: 1.3fr 1fr; }
  .footer-note { grid-column: 1 / -1; }
  .project { gap: 2rem; }
}
@media (max-width: 45rem) {
  .wrap { width: min(100% - 2rem, 36rem); }
  .site-header { align-items: flex-start; flex-direction: column; gap: .7rem; padding-block: 1.2rem; }
  .site-header nav { gap: 1.5rem; }
  .hero { grid-template-columns: 1fr; gap: 2.5rem; padding-block: 2.5rem 3.5rem; }
  .hero h1 { font-size: clamp(3.5rem, 14vw, 5.5rem); }
  .status { margin-bottom: 1.5rem; font-size: .73rem; }
  .tactics-art { transform: none; max-width: 25rem; width: 100%; justify-self: center; padding: 1.2rem; }
  .features { padding-block: 3rem; }
  .card-grid, .project, .support-grid { grid-template-columns: 1fr; }
  .card-grid { gap: 1rem; margin-top: 2rem; }
  .feature-card { padding: 1.7rem; }
  .project { gap: .5rem; padding-block: 1rem 3rem; }
  .project-copy { padding-top: 0; }
  .contact-inner, .support-contact { flex-direction: column; align-items: flex-start; }
  .contact-inner { gap: 1.5rem; }
  .site-footer { grid-template-columns: 1fr; gap: 1.4rem; padding-block: 2rem; }
  .footer-note { grid-column: auto; }
  .site-footer nav { flex-direction: row; gap: 1.5rem; }
  .support-main { padding-block: 2.5rem; }
  .support-panel { padding: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto; }
}

/* V2: original night-stadium art and illustrative tactical HUD. */
:root { color-scheme: dark; --ink:#eaf1f4; --muted:#acbac5; --paper:#080f18; --white:#101d29; --line:#2b3c49; --green:#cbff70; }
body { background:radial-gradient(ellipse at 85% 4%,#173c3b77,transparent 35%),#080f18; color:var(--ink); }
button,input { font:inherit; }
button,a,input { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; color:inherit; }
button:disabled { cursor:not-allowed; opacity:.6; }
:focus-visible { outline:3px solid #cbff70; outline-offset:5px; }
a:focus-visible,[tabindex="-1"]:focus-visible { outline-color:#cbff70; }
h1,h2,h3 { font-weight:850; letter-spacing:-.055em; }
h1 { font-size:clamp(3.3rem,5.5vw,5.4rem); line-height:.99; }
h2 { font-size:clamp(2rem,3.3vw,3.5rem); line-height:1.05; }
em { color:#cbff70; }
.wrap { width:min(100% - 4rem,78rem); }
.skip { position:absolute; top:0; left:1rem; z-index:50; transform:translateY(-200%); padding:1rem; background:#cbff70; color:#081019; }
.skip:focus { transform:translateY(0); }
.header { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding-block:1.4rem; border-bottom:1px solid var(--line); }
.brand { color:#f2f5f7; font-size:.9rem; letter-spacing:.025em; line-height:1.1; }
.brand strong { font-size:1.15rem; letter-spacing:.01em; }
.crest { display:grid; place-items:center; width:2.8rem; height:3rem; background:#cbff70; color:#080f18; clip-path:polygon(0 0,100% 0,100% 70%,50% 100%,0 70%); font-weight:900; }
.studio { font-size:.72rem; letter-spacing:.02em; color:#b8c5cb; }
.header nav a { font-size:.78rem; text-decoration:none; }
.hero { grid-template-columns:1.05fr 1fr; gap:2rem; padding-block:3.5rem 4rem; }
.hero-copy { min-width:0; position:relative; z-index:2; }
.tag,.status { display:inline-flex; align-items:center; gap:.5rem; border:1px solid #597c4e; background:#21392355; color:#d0f9b5; border-radius:3px; padding:.4rem .65rem; font-size:.66rem; margin-bottom:1.7rem; }
.dot { width:.4rem; height:.4rem; border-radius:50%; background:#cbff70; display:inline-block; flex-shrink:0; }
.eyebrow,.tiny { font-size:.65rem; font-weight:700; letter-spacing:.13em; color:#b1c0cc; }
.hero .eyebrow { margin-bottom:1rem; }
.lead { color:#edf4f5; font-size:1.25rem; line-height:1.5; }
.intro { max-width:27rem; color:#adbdc8; font-size:.95rem; }
.micro { font-size:.73rem; line-height:1.5; color:#aebdc7; margin-top:1rem; }
.cta { display:inline-flex; align-items:center; justify-content:space-between; gap:1rem; border:0; border-radius:3px; padding:1rem 1.2rem; min-height:3rem; background:#cbff70; color:#0a161b; font-weight:800; font-size:.75rem; text-decoration:none; }
.cta:hover { background:#e3ffae; }
.stadium { position:relative; min-width:0; min-height:36rem; overflow:hidden; border:1px solid #45605e; border-radius:2px 4rem 2px 2px; background:radial-gradient(ellipse at 50% 30%,#215563 0%,#0e202e 48%,#060d16 80%); box-shadow:0 30px 70px #0007; }
.stadium-glow { position:absolute; inset:0; background:linear-gradient(140deg,transparent 20%,#83ecdd16 40%,transparent 60%); }
.floodlight { position:absolute; width:15rem; height:24rem; top:-6rem; background:linear-gradient(#e8ffff99,transparent 75%); filter:blur(18px); }
.light-left { left:-10rem; transform:rotate(-30deg); }.light-right { right:-10rem; transform:rotate(30deg); }
.stands { position:absolute; width:150%; left:-25%; height:23rem; top:5rem; border:3rem solid #6c8c8a22; border-radius:50%; box-shadow:0 0 0 1rem #152938,0 0 0 1.2rem #96d2cd44,0 0 45px #73e6bd22; background:repeating-linear-gradient(90deg,transparent 0 6px,#91dad63b 7px 8px); transform:rotateX(45deg); }
.hero-field { position:absolute; width:74%; height:54%; top:38%; left:13%; background:repeating-linear-gradient(0deg,#1a5d43 0 12.5%,#216c4e 12.5% 25%); border:2px solid #c6f8d577; box-shadow:0 0 40px #7fff9f33; transform:perspective(700px) rotateX(38deg) rotateZ(-17deg); }
.hero-field .circle,.pitch .circle { position:absolute; width:32%; aspect-ratio:1; border:1px solid #dcf9de88; border-radius:50%; left:34%; top:50%; transform:translateY(-50%); }
.half { position:absolute; width:100%; top:50%; border-top:1px solid #dcf9de88; }
.box { position:absolute; left:23%; width:54%; height:17%; border:1px solid #dcf9de88; }
.box.top { top:-1px; }.box.bottom { bottom:-1px; }
.hero-ball { position:absolute; width:.7rem; height:.7rem; left:50%; top:50%; background:#fff; box-shadow:0 0 0 .6rem #fff2; border-radius:50%; }
.hud { position:absolute; z-index:2; background:#08131bcc; border:1px solid #7595a14d; backdrop-filter:blur(8px); }
.hud-top { top:2.8rem; left:1.5rem; padding:1.3rem; border-left:3px solid #cbff70; }
.hud-top strong { display:block; font-size:2rem; line-height:1.05; letter-spacing:-.04em; margin-top:.8rem; }
.hud-bottom { bottom:2rem; right:1rem; left:1rem; display:flex; align-items:center; gap:1rem; padding:1rem; }
.hud-bottom b { display:block; font-size:.9rem; }.hud-arrow { margin-left:auto; color:#cbff70; font-size:1.7rem; }
.signal { color:#cbff70; font-size:.8rem; }.art-label { position:absolute; bottom:.4rem; left:0; right:0; text-align:center; font-size:.46rem; letter-spacing:.06em; color:#a8c0c4; }
.ticker { display:flex; justify-content:space-around; gap:1rem; flex-wrap:wrap; padding:1.2rem; border-block:1px solid var(--line); background:#101d25; font-size:.72rem; font-weight:800; letter-spacing:.1em; }.ticker i { color:#cbff70; }
.demo-section,.universe { padding-block:5rem; }
.section-title { display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; margin-bottom:2rem; }
.section-title>p { max-width:23rem; font-size:.9rem; color:#adbdc8; }.section-title h2 { margin-bottom:0; }
.tactical-console { display:grid; grid-template-columns:.85fr 1.15fr; border:1px solid #42545e; background:#101c27; border-radius:8px; overflow:hidden; box-shadow:0 25px 60px #0004; }
.console-sidebar { padding:2rem; border-right:1px solid var(--line); }
.console-id { color:#b7c7ce; font-size:.59rem; letter-spacing:.08em; margin-bottom:1.8rem; }.console-sidebar h3 { font-size:2rem; }
fieldset { min-width:0; margin:0 0 1.5rem; padding:0; border:0; }legend { color:#aabac6; font-size:.72rem; margin-bottom:.7rem; }
.segmented { display:grid; grid-template-columns:repeat(3,1fr); gap:.4rem; }
.segmented button,.plan-buttons button,.reset,#music-mute { border:1px solid #455966; border-radius:3px; background:#172733; padding:.75rem .5rem; min-height:44px; font-size:.8rem; }
button[aria-pressed="true"] { border-color:#cbff70; color:#cbff70; background:#284036; }.cta[aria-pressed="true"] { background:#cbff70; color:#0a161b; }
.plan-buttons { display:grid; gap:.5rem; }.plan-buttons button { text-align:left; padding-inline:1rem; }
#plan-description { min-height:4.5rem; color:#c2cdd5; font-size:.88rem; }.reset { width:100%; border-style:dashed; }
.board-view { padding:1.4rem 2rem; background:radial-gradient(ellipse at 50% 0,#264b3b77,transparent 70%),#0a171f; }
.board-hud { display:flex; justify-content:space-between; align-items:center; gap:.5rem; font-size:.56rem; letter-spacing:.07em; margin-bottom:1rem; color:#adbdc8; }.board-hud strong { font-size:1.15rem; color:#cbff70; }
.pitch { position:relative; aspect-ratio:5/6; max-width:28rem; width:100%; margin:auto; border:1px solid #b6d8bb77; background:repeating-linear-gradient(0deg,#173d30 0 12.5%,#1a4435 12.5% 25%); overflow:hidden; border-radius:0; }
.pitch-lines { position:absolute; inset:4%; border:1px solid #dcf9de88; }.pitch-lines .half { left:0; }
.token { position:absolute; display:grid; place-items:center; top:var(--y); left:var(--x); transform:translate(-50%,-50%); width:9%; aspect-ratio:1; border-radius:50%; background:#d1ff80; color:#102223; font-weight:850; font-size:clamp(.65rem,1.15vw,1rem); border:2px solid #f1ffc8; box-shadow:0 4px 10px #0007; transition:top .5s ease,left .5s ease,background-color .3s ease; z-index:2; }
.token:first-of-type { background:#e4e8f9; }
.arrows { position:absolute; inset:0; width:100%; height:100%; color:#cbff70; opacity:.15; transition:opacity .3s ease; }
[data-plan="PRESS"] .arrows { opacity:.8; color:#ffcf79; }[data-plan="PRESS"] .token { background:#ffe0a1; }
[data-plan="COUNTER_ATTACK"] .arrows { opacity:.85; color:#73e6ff; transform:scaleX(-1); }[data-plan="COUNTER_ATTACK"] .token { background:#91e6ff; }
#board-status { color:#b8c7ce; font-size:.73rem; margin:1rem 0 0; }
.feature-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.2rem; }
.feature { background:#111e2a; border:1px solid var(--line); padding:1.5rem; }.feature p:last-child { color:#adbdc8; font-size:.9rem; margin-bottom:0; }.feature h3 { font-size:1.6rem; }
.card-art { height:8rem; position:relative; display:flex; align-items:center; justify-content:center; gap:.8rem; border-bottom:1px solid #43554e; margin-bottom:1.5rem; overflow:hidden; background:linear-gradient(140deg,#224632,#10222f); }
.roster-art>span { font-size:4rem; font-weight:900; color:#cbff70; }.roster-art i { width:1.2rem; height:2rem; border:1px solid #cbff70; transform:skew(-10deg); }
.plan-art span { font-size:4rem; color:#cbff70; transform:rotate(-15deg); }.plan-art span:nth-child(2) { opacity:.6; transform:translateY(-.8rem); }.plan-art span:nth-child(3) { opacity:.3; }
.club-art { align-items:flex-end; padding-bottom:1rem; }.club-art i { width:1.2rem; height:30%; background:#cbff7055; }.club-art i:nth-child(2) { height:45%; }.club-art i:nth-child(3) { height:65%; }.club-art i:nth-child(4) { height:80%; }.club-art span { font-weight:900; font-size:2rem; color:#cbff70; }
.soundtrack { display:grid; grid-template-columns:auto 1fr 1.15fr; align-items:center; gap:2rem; padding:2rem; border:1px solid #4a626b; background:linear-gradient(115deg,#172a39,#101b29); }.soundtrack h2 { font-size:2rem; margin-bottom:.6rem; }.soundtrack-copy>p { font-size:.82rem; }
.record-art { width:7rem; aspect-ratio:1; display:grid; place-items:center; border-radius:50%; background:repeating-radial-gradient(circle,#1c2c3b 0 2px,#36505a 3px,#18232f 4px); border:1px solid #526770; }.record-art span { display:grid; place-items:center; background:#cbff70; color:#102222; width:2.8rem; height:2.8rem; border-radius:50%; font-size:.8rem; font-weight:900; }
.audio-panel { min-width:0; }.audio-panel .cta { width:100%; }.audio-adjust { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .8rem; margin-top:1rem; }.audio-adjust label { font-size:.75rem; }.audio-adjust input { accent-color:#cbff70; min-width:7rem; width:100%; min-height:30px; }#music-mute { padding:.4rem .7rem; }#music-status { font-size:.73rem; color:#bdcbd3; margin:.5rem 0 0; }
.closing { padding-block:5rem; text-align:center; max-width:50rem; }.closing>p:not(.eyebrow) { color:#adbdc8; }.text-link { color:#cbff70; }
.footer { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1.2rem; padding-block:2rem; border-top:1px solid var(--line); font-size:.73rem; color:#b0beca; }.footer p { width:100%; margin:0; font-size:.68rem; }.footer nav a { font-size:.73rem; }
.support-main { padding-top:4rem; }.support-contact { padding:2rem; border:1px solid #4d615b; background:linear-gradient(120deg,#203834,#10222f); }.support-contact .tag { white-space:normal; margin:0; }.support-panel,.privacy-panel { background:#111e2a; color:#c6d0d7; }.support-panel h2 { color:#edf4f7; }.notice { background:#203831; color:#d9eccf; border-color:#cbff70; }.card-kicker { color:#cbff70; }.status { color:#d0f9b5; }.brand-mark { background:#cbff70; color:#102223; }
@media(max-width:60rem) { .studio { display:none; }.hero { gap:1.5rem; }.stadium { min-height:32rem; }.soundtrack { grid-template-columns:auto 1fr; }.audio-panel { grid-column:1/-1; }.console-sidebar { padding:1.4rem; }.board-view { padding:1.3rem; } }
@media(max-width:45rem) { .wrap { width:calc(100% - 2rem); }.header { gap:1rem; flex-wrap:wrap; padding-block:1rem; }.header nav { gap:.9rem; }.header nav a { font-size:.7rem; }.hero { grid-template-columns:1fr; padding-block:2.3rem 3rem; gap:2rem; }.hero h1 { font-size:clamp(2.75rem,10.9vw,4.7rem); }.tag { font-size:.61rem; }.stadium { min-height:30rem; }.ticker { font-size:.55rem; gap:.5rem; }.ticker i:last-of-type,.ticker span:last-child { display:none; }.section-title { display:block; }.section-title>p { margin-top:1.5rem; }.demo-section,.universe { padding-block:3rem; }.tactical-console { grid-template-columns:1fr; }.console-sidebar { border-right:0; border-bottom:1px solid var(--line); }.console-sidebar h3 { font-size:1.6rem; }.console-id { margin-bottom:1rem; }.plan-buttons { grid-template-columns:repeat(3,minmax(0,1fr)); }.plan-buttons button { font-size:.64rem; padding:.5rem .2rem; text-align:center; }#plan-description { min-height:3rem; }.board-view { padding:1.2rem; }.token { font-size:.72rem; }.feature-grid { grid-template-columns:1fr; }.feature { padding:1.4rem; }.card-art { height:7rem; }.soundtrack { padding:1.2rem; gap:1rem; }.record-art { width:4rem; }.record-art span { width:2rem; height:2rem; }.soundtrack h2 { font-size:1.6rem; }.soundtrack-copy .eyebrow { font-size:.55rem; }.closing { padding-block:3rem; }.support-main { padding-top:2rem; }.support-contact { padding:1.3rem; }.support-heading h1 { font-size:clamp(2.7rem,11vw,4.5rem); }.support-panel { padding:1.3rem; }.footer { align-items:flex-start; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none!important; animation:none!important; scroll-behavior:auto!important; } }
.play-slot { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:2.5rem; align-items:center; margin-top:4rem; padding:2.5rem; background:linear-gradient(125deg,#172a37,#11251f); border:1px solid #536b59; border-top:3px solid #cbff70; }
.play-copy { min-width:0; }.play-copy h2 { font-size:clamp(1.9rem,3vw,3rem); }.play-copy>p:not(.eyebrow) { color:#bdcbd3; font-size:.9rem; }.play-copy .play-notice { color:#e3f5d3; font-weight:700; }.play-slot .cta:disabled { opacity:1; background:#253b36; color:#c3d0c8; border:1px solid #657a6c; cursor:not-allowed; max-width:100%; white-space:normal; }
.track-label { display:block; font-size:.8rem; margin-bottom:.4rem; }#music-track { width:100%; min-height:44px; padding:.6rem; color:#eaf1f4; background:#172733; border:1px solid #607c87; border-radius:3px; font:inherit; }.track-navigation { display:flex; gap:.5rem; margin:.8rem 0; }.track-navigation button { flex:1; min-width:0; min-height:44px; padding:.6rem; border:1px solid #455966; border-radius:3px; background:#172733; font-size:.78rem; }
.qr-reserved { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; border:1px dashed #77917a; padding:1.8rem; min-height:15rem; background:#0b171c; }.qr-reserved p { max-width:15rem; font-weight:650; margin-bottom:1rem; }.qr-symbol { color:#cbff70; font-size:3.5rem; line-height:1; margin-bottom:1.2rem; }.qr-reserved .tiny { font-size:.55rem; }
@media(max-width:45rem) { .play-slot { grid-template-columns:1fr; padding:1.3rem; gap:1.5rem; margin-top:2.5rem; }.qr-reserved { min-height:12rem; }.play-slot .cta { width:100%; font-size:.7rem; } }
/* V3 catalogue: original illustrative layouts, no engine values or outcome model. */
.segmented { grid-template-columns:repeat(4,minmax(0,1fr)); }
.segmented button { padding-inline:.2rem; font-size:.75rem; }
.plan-buttons { grid-template-columns:repeat(2,minmax(0,1fr)); }
.plan-buttons button { min-height:48px; padding:.7rem .6rem; }
.board-view { min-width:0; }
.plan-readout { text-align:center; color:#cbff70; font-weight:750; margin-bottom:1rem; }
.personalization { padding-top:0; }
[data-plan="CONTROL"] .token { background:#d6d0ff; }
[data-plan="ATTACK_SPACE"] .arrows { opacity:.65; color:#ffad91; }
[data-plan="ATTACK_SPACE"] .token { background:#ffd4b8; }
[data-plan="SET_PIECES"] .token { background:#f4eeac; }
@media(max-width:45rem) { .segmented { grid-template-columns:repeat(2,minmax(0,1fr)); }.plan-buttons button { font-size:.8rem; }.personalization { padding-top:0; } }