/* MI TALLER: cambia solo el color de fondo en la línea siguiente. */
:root { --fondo-del-taller: #e5f6f2; }


:root{color-scheme:light;font:17px/1.5 system-ui,sans-serif;color:#193246;background:var(--fondo-del-taller)}
*{box-sizing:border-box}
body{margin:0}
main{max-width:1120px;margin:auto;padding:24px}
header p{margin:4px 0}
h1{font-size:clamp(28px,4vw,44px);line-height:1.15;margin:8px 0}
h2{font-size:22px;margin:0 0 12px}
.eyebrow{font-size:13px;font-weight:800;letter-spacing:.09em;color:#8a422a;text-transform:uppercase}
.layout{display:grid;grid-template-columns:340px 1fr;gap:28px;margin-top:26px}
section{background:white;border:1px solid #d1dadd;border-radius:18px;padding:22px}
button,select,.file-label{font:inherit;border:1px solid #6c8291;border-radius:9px;min-height:44px;padding:9px 14px;background:#fff;color:#193246;cursor:pointer}
button:hover,.file-label:hover{background:#e8f6f3}
button:focus-visible,select:focus-visible,.file-label:focus-within,#field:focus-visible{outline:3px solid #d26642;outline-offset:3px}
button:disabled{opacity:.5;cursor:default}
.primary{background:#146660;color:#fff;border-color:#146660}
.primary:hover{background:#0f524d}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:12px 0}
.grid{display:grid;grid-template-columns:repeat(8,1fr);gap:3px;width:100%;max-width:288px;margin:16px auto}
.pixel{min-height:0;padding:0;aspect-ratio:1;border-radius:3px;border:1px solid #9cb3bb;background:#edf4f5}
.pixel[aria-pressed=true]{background:#168c88;border-color:#0c6664}
.small{font-size:14px;color:#4d6575}
.file-label input{position:absolute;width:1px;height:1px;clip-path:inset(50%)}
#field{height:370px;position:relative;background:#102c49;border-radius:12px;overflow:hidden;max-width:560px;margin:auto;border:2px solid #2e5069}
.lane{position:absolute;top:0;bottom:0;width:33.333%;border-right:1px dashed #55758b}
.lane:nth-child(2){left:33.333%}
.lane:nth-child(3){left:66.666%}
.star{position:absolute;color:#7394ae;font-size:10px}
#ship{position:absolute;bottom:24px;width:48px;height:48px;transform:translateX(-50%)}
#meteor{position:absolute;top:0;width:40px;height:40px;transform:translateX(-50%);border-radius:40% 55% 43% 60%;background:#eb9b70;border:4px solid #c77751;box-shadow:inset 7px 5px #f8bc86}
#meteor[hidden]{display:none}
.controls{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:350px;margin:14px auto}
.controls button{font-size:22px}
#status{font-weight:750;min-height:52px}
#score{font-weight:800;color:#146660}
.notice{min-height:24px;color:#146660;font-size:14px}
footer{margin-top:25px;font-size:13px;color:#526a78}
@media(max-width:750px){main{padding:14px}
.layout{grid-template-columns:1fr;gap:16px}
section{padding:16px}
.grid{max-width:288px}
#field{height:370px}
}