:root{--night: #14120f;--night-2: #1c1916;--line: #322c25;--frame: #4a3d2b;--ink: #e8e2d6;--dim: #9a9084;--gold: #c8a24a;--gold-hi: #e5c86f;--display: "Jersey 20", "Silkscreen", sans-serif;--pixel: "Silkscreen", monospace;--sans: "IBM Plex Sans", system-ui, sans-serif}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--night);color:var(--ink);font:14px/1.4 var(--sans)}button,input,select{font:inherit;color:inherit}.app{display:grid;grid-template-columns:1fr 380px;height:100vh}.escenario{position:relative;display:grid;place-items:center;overflow:hidden;background:radial-gradient(ellipse at center,#241f19 0%,var(--night) 70%)}#lienzo{image-rendering:pixelated;box-shadow:0 0 0 2px var(--frame),0 18px 50px #0009}.a-cuadros{background-color:#2a2622;background-image:linear-gradient(45deg,#36312b 25%,transparent 25%),linear-gradient(-45deg,#36312b 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#36312b 75%),linear-gradient(-45deg,transparent 75%,#36312b 75%);background-size:24px 24px;background-position:0 0,0 12px,12px -12px,-12px 0}.medidas{position:absolute;bottom:14px;left:0;right:0;margin:0;text-align:center;font:12px var(--pixel);color:var(--dim)}.panel{overflow-y:auto;padding:18px 18px 24px;background:var(--night-2);border-left:2px solid var(--frame);display:flex;flex-direction:column;gap:18px}.cabeza{display:flex;align-items:center;gap:12px}.cabeza img{width:150px;height:auto;image-rendering:auto}.cabeza .titulo{font:30px var(--display);color:var(--gold-hi);letter-spacing:.02em}.grupo{display:flex;flex-direction:column;gap:8px}.grupo h2{display:flex;align-items:center;gap:8px;margin:0 0 2px;font:13px var(--pixel);color:var(--gold);text-transform:uppercase}.fila{display:grid;grid-template-columns:112px 1fr;align-items:center;gap:10px;padding:6px 8px;border:2px solid transparent;border-radius:4px;cursor:pointer}.fila.activa{border-color:var(--gold);background:#c8a24a14}.fila-t{display:flex;align-items:center;gap:8px;font:12px var(--pixel);color:var(--dim)}.fila.activa .fila-t{color:var(--gold-hi)}.selector{display:grid;grid-template-columns:32px 1fr 32px;align-items:center;gap:6px}.valor{display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0}.valor b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.valor small{color:var(--dim);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.paso{display:grid;place-items:center;width:32px;height:32px;padding:0;background:var(--night);border:2px solid var(--frame);border-radius:4px;cursor:pointer}.paso:hover{border-color:var(--gold)}.flecha{display:block;width:16px;height:16px;background-size:256px auto;image-rendering:pixelated}.fondos{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.fondo{display:flex;align-items:center;gap:6px;padding:6px;background:var(--night);border:2px solid var(--frame);border-radius:4px;cursor:pointer;font-size:12px;text-align:left}.fondo.on{border-color:var(--gold)}.muestra{flex:none;width:16px;height:16px;border:1px solid #000;background-size:8px 8px!important}.campo{display:grid;grid-template-columns:1fr;gap:4px;font-size:12px;color:var(--dim)}.campo:has(output){grid-template-columns:1fr auto}.campo:has(output) span{grid-column:1 / -1}.campo select,.campo input[type=number]{padding:7px 8px;background:var(--night);border:2px solid var(--frame);border-radius:4px;color:var(--ink)}.campo input[type=range]{accent-color:var(--gold)}.campo output{font:12px var(--pixel);color:var(--ink)}.medida-libre{display:grid;grid-template-columns:1fr 1fr;gap:8px}.medida-libre[hidden]{display:none}.botones{display:grid;grid-template-columns:1fr 1fr;gap:8px}.boton{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 12px;background:var(--night);border:2px solid var(--frame);border-radius:4px;cursor:pointer;font:12px var(--pixel);text-transform:uppercase}.boton:hover{border-color:var(--gold)}.boton.principal{background:var(--gold);border-color:var(--gold-hi);color:#1f170f}.boton.principal:hover{background:var(--gold-hi)}.pie{margin-top:auto}.nota{margin:0;font-size:12px;color:var(--dim)}kbd{font:11px var(--pixel);padding:1px 5px;border:1px solid var(--frame);border-radius:3px;background:var(--night)}@media(max-width:860px){.app{grid-template-columns:1fr;grid-template-rows:55vh auto;height:auto}.panel{border-left:0;border-top:2px solid var(--frame)}}