:root{--sheet-paper:#f2f1ea;--sheet-paper-hi:#f8f7f1;--sheet-grid:#dde2dc;--sheet-grid-strong:#c8d0c9;--sheet-ink:#262a33;--sheet-ink-soft:#5d6372;--sheet-blue:#2c5ea8;--sheet-blue-soft:#8fa9d1;--night:#112029;--night-2:#0c1820;--surface:#162a35;--cream:#f0d9a8;--brass:#e8a01c;--brass-orange:#d8651b;--teal:#358e8d;--hairline:#24414f;--hand:"Architects Daughter", "Comic Sans MS", "Segoe Print", cursive;--mono:"Courier Prime", "Courier New", ui-monospace, monospace;--sans:"DM Sans", ui-sans-serif, system-ui, sans-serif;--display:"Fraunces", Georgia, "Times New Roman", serif;--paper:var(--night);--paper-hi:var(--surface);--grid:var(--hairline);--grid-strong:color-mix(in srgb, var(--cream) 18%, var(--surface));--ink:var(--cream);--ink-soft:color-mix(in srgb, var(--cream) 68%, var(--night));--blue:var(--brass);--blue-soft:color-mix(in srgb, var(--brass) 50%, var(--night));--on-blue:var(--night);--rule:var(--hairline);--rule-w:1px;--line:color-mix(in srgb, var(--cream) 28%, var(--surface));--field:var(--night-2);--btn:transparent;--hover-bg:color-mix(in srgb, var(--brass) 12%, transparent);--hover-fg:var(--brass);--sel-bg:var(--brass);--sel-fg:var(--night);--check:var(--brass);--danger:var(--brass-orange);--font:var(--sans);--font-title:var(--display);--title-w:600;--rad:999px;--rad-box:8px;--tilt:0deg;--focus:solid;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}.stage{--paper:var(--sheet-paper);--paper-hi:var(--sheet-paper-hi);--grid:var(--sheet-grid);--grid-strong:var(--sheet-grid-strong);--ink:var(--sheet-ink);--ink-soft:var(--sheet-ink-soft);--blue:var(--sheet-blue);--blue-soft:var(--sheet-blue-soft);--on-blue:#fff;--rule:var(--sheet-ink);--rule-w:1.5px;--line:var(--sheet-ink);--field:var(--sheet-paper-hi);--btn:var(--sheet-paper-hi);--hover-bg:#e9ece6;--hover-fg:var(--sheet-ink);--sel-bg:var(--sheet-ink);--sel-fg:var(--sheet-paper-hi);--check:var(--sheet-ink);--danger:#b23b2a;--font:var(--hand);--font-title:var(--hand);--title-w:400;--rad:7px 9px 6px 10px / 9px 6px 10px 7px;--rad-box:7px 9px 6px 10px / 9px 6px 10px 7px;--tilt:-1deg;--focus:dashed;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;color:var(--ink);font-family:var(--font)}*{box-sizing:border-box}body{background:var(--night) radial-gradient(ellipse 90% 520px at 50% -120px, color-mix(in srgb, var(--surface) 80%, var(--teal)) 0%, transparent 100%) no-repeat;min-height:100vh;color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased;margin:0;padding-block:0 28px;padding-inline:24px;font-size:15px;line-height:1.5}.head{border-bottom:var(--rule-w) solid var(--rule);flex-wrap:wrap;grid-column:1/-1;justify-content:space-between;align-items:baseline;gap:6px 24px;padding:14px 20px 10px;display:flex}.head h1{font-family:var(--font-title);font-weight:var(--title-w);letter-spacing:.02em;text-wrap:balance;margin:0;font-size:clamp(24px,3.4vw,36px);line-height:1.15}.head h1 span{color:var(--blue)}.head p{color:var(--ink-soft);margin:0;font-size:15px}.board{border-right:var(--rule-w) solid var(--rule);flex-direction:column;min-width:0;display:flex}.stage{touch-action:none;height:min(76vh,760px);min-height:440px;position:relative;overflow:hidden}.stage canvas{cursor:grab;width:100%;height:100%;display:block}.stage canvas:active{cursor:grabbing}.labels{pointer-events:none;position:absolute;inset:0}.labels *{pointer-events:none}.hint{color:var(--ink-soft);font-size:14px;position:absolute;top:10px;left:14px;transform:rotate(-1.2deg)}.dim{font-family:var(--hand);color:var(--blue);background:var(--paper);white-space:nowrap;font-variant-numeric:tabular-nums;border-radius:3px;padding:0 5px;font-size:15px}.callout{font-family:var(--hand);color:var(--blue);white-space:nowrap;background:var(--paper);padding:0 4px;font-size:13.5px;line-height:1.2}.balloon{border:1.7px solid var(--ink);background:var(--paper-hi);width:30px;height:30px;font-family:var(--hand);color:var(--ink);border-radius:52% 46% 50% 48%/47% 53% 46% 54%;place-items:center;font-size:16px;display:grid}.tools{border-top:var(--rule-w) solid var(--rule);flex-wrap:wrap;align-items:center;gap:10px 18px;padding:12px 16px 14px;display:flex}.group{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.group-label{color:var(--ink-soft);letter-spacing:.06em;text-transform:uppercase;margin-right:2px;font-size:13px}button{font:inherit;color:var(--ink);background:var(--btn);border:1.5px solid var(--line);border-radius:var(--rad);cursor:pointer;padding:3px 11px;font-size:15px;transition:transform .12s,background .12s,color .12s,border-color .12s}button:hover{background:var(--hover-bg);color:var(--hover-fg);border-color:var(--hover-fg);transform:rotate(var(--tilt))}button[aria-pressed=true]{background:var(--sel-bg);color:var(--sel-fg);border-color:var(--sel-bg)}button:focus-visible,input:focus-visible{outline:2px var(--focus) var(--blue);outline-offset:3px}input[type=range]{accent-color:var(--blue);width:150px;max-width:40vw}.check{cursor:pointer;align-items:center;gap:6px;font-size:15px;display:inline-flex}.check input{accent-color:var(--check);width:16px;height:16px;margin:0}.side{flex-direction:column;min-width:0;display:flex}.block{border-bottom:var(--rule-w) solid var(--rule);padding:14px 18px}.block h2{letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 8px;font-size:14px;font-weight:400}.parts{border-collapse:collapse;width:100%;font-size:14px}.parts td{vertical-align:top;border-top:1px dashed var(--grid-strong);padding:5px 4px}.parts tr:first-child td{border-top:0}.parts .mk{width:30px}.mk span{border:1.4px solid var(--ink);border-radius:50% 46% 52% 48%;place-items:center;width:24px;height:24px;font-size:14px;display:inline-grid}.parts .nm{line-height:1.25}.parts .nm small{color:var(--ink-soft);font-size:12.5px;display:block}.parts .ms{text-align:right;color:var(--blue);white-space:nowrap;font-variant-numeric:tabular-nums}.parts tr{cursor:default}.parts tr.on td{background:color-mix(in srgb, var(--blue) 9%, transparent)}@media (max-width:960px){.board{border-right:0;border-bottom:var(--rule-w) solid var(--rule)}.stage{height:68vh;min-height:400px}}@media (prefers-reduced-motion:reduce){button{transition:none}button:hover{transform:none}}.head-right{flex-wrap:wrap;align-items:center;gap:8px 16px;display:flex}.seg{flex-wrap:wrap;gap:6px;display:inline-flex}select{font:inherit;color:var(--ink);background:var(--field);border:1.5px solid var(--line);border-radius:var(--rad-box);cursor:pointer;padding:3px 8px;font-size:15px}select:focus-visible{outline:2px var(--focus) var(--blue);outline-offset:3px}.stage{transition:background-color .3s}.stage[data-style=blueprint]{background-color:#1f4f8f;background-image:linear-gradient(#ffffff29 1px,#0000 1px),linear-gradient(90deg,#ffffff29 1px,#0000 1px),linear-gradient(#ffffff12 1px,#0000 1px),linear-gradient(90deg,#ffffff12 1px,#0000 1px);background-size:100px 100px,100px 100px,20px 20px,20px 20px}.stage[data-style=blueprint] .dim,.stage[data-style=blueprint] .callout{color:#f2f6ff;background:#1f4f8f}.stage[data-style=blueprint] .balloon{color:#f2f6ff;background:#1f4f8f;border-color:#f2f6ff}.stage[data-style=blueprint] .hint{color:#c6d6f0}.stage[data-style=real]{background:radial-gradient(ellipse at 50% 42%, #fbfaf6 0%, var(--paper) 62%, #e4e3da 100%)}.msheet .stage[data-style=hand],.msheet .stage[data-style=toon]{background-color:var(--paper);background-image:linear-gradient(var(--grid-strong) 1px, transparent 1px), linear-gradient(90deg, var(--grid-strong) 1px, transparent 1px), linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);background-size:100px 100px,100px 100px,20px 20px,20px 20px}.msheet .stage[data-style=real]{background:radial-gradient(ellipse 70% 75% at 50% 45%, #24404f 0%, var(--night) 62%, var(--night-2) 100%)}.msheet .stage[data-style=real] .hint{color:color-mix(in srgb, var(--cream) 70%, transparent)}.stage[data-style=pixel]{background-color:#23213a;background-image:radial-gradient(#ffffff17 1px,#0000 1.4px);background-size:12px 12px}.stage[data-style=pixel] canvas{image-rendering:pixelated;image-rendering:crisp-edges}.stage[data-style=pixel] .dim,.stage[data-style=pixel] .callout{font-family:"Press Start 2P", var(--mono);color:#7fd8ff;background:#23213a;padding:2px 4px;font-size:9px}.stage[data-style=pixel] .balloon{font-family:"Press Start 2P", var(--mono);color:#f4f1ff;background:#23213a;border:2px solid #f4f1ff;border-radius:0;font-size:10px}.stage[data-style=pixel] .hint{color:#b7b3d8;font-family:"Press Start 2P", var(--mono);font-size:8px;transform:none}.stage[data-style=jdv]{background-color:#13202a;background-image:radial-gradient(circle at 8% 14%,#f6c21c 0 4px,#0000 5px),radial-gradient(circle at 16% 72%,#34a7a0 0 6px,#0000 7px),radial-gradient(circle at 24% 30%,#e2452b 0 3px,#0000 4px),radial-gradient(circle at 30% 88%,#f08a1c 0 5px,#0000 6px),radial-gradient(circle at 42% 9%,#2f86c5 0 4px,#0000 5px),radial-gradient(circle at 58% 92%,#f6c21c 0 3px,#0000 4px),radial-gradient(circle at 70% 12%,#f08a1c 0 6px,#0000 7px),radial-gradient(circle at 78% 80%,#e2452b 0 4px,#0000 5px),radial-gradient(circle at 86% 34%,#34a7a0 0 5px,#0000 6px),radial-gradient(circle at 92% 62%,#f3e2b8 0 3px,#0000 4px),radial-gradient(circle at 6% 46%,#f3e2b8 0 3px,#0000 4px),radial-gradient(circle at 64% 4%,#34a7a0 0 3px,#0000 4px),radial-gradient(at 50% 52%,#f08a1c29 0,#2f86c514 34%,#0000 60%)}.stage[data-style=jdv] .dim,.stage[data-style=jdv] .callout{font-family:"Cherry Bomb One", var(--hand);color:#f3e2b8;background:#13202a}.stage[data-style=jdv] .balloon{font-family:"Cherry Bomb One", var(--hand);color:#13202a;background:#f6c21c;border:2.6px solid #0a0b10;box-shadow:2px 2px #0a0b10}.stage[data-style=jdv] .hint{color:#f3e2b8}.seg button:disabled{opacity:.45;cursor:progress}.stage[data-style=toon] .balloon{background:#fffdf3;border-width:2.6px}.stage[data-style=toon] .dim{font-size:16px}.stage-fail{z-index:5;text-align:center;background:color-mix(in srgb, var(--night) 82%, transparent);color:var(--cream);font-family:var(--sans);place-content:center;gap:10px;display:grid;position:absolute;inset:0}.stage-fail p{margin:0}.stage-fail button{justify-self:center}.appbar{z-index:40;background:color-mix(in srgb, var(--night) 90%, transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--hairline);align-items:center;gap:8px 20px;margin:0 -24px 16px;padding:10px calc(24px + max(0px,50% - 660px));display:flex;position:sticky;top:0}.brand{color:var(--cream);font-family:var(--display);letter-spacing:-.01em;flex:none;align-items:center;gap:10px;font-size:23px;font-weight:600;line-height:1;text-decoration:none;display:inline-flex}.brand img{width:40px;height:40px;transition:transform .2s;display:block}.brand:hover img{transform:rotate(-8deg)}.brand span{color:var(--brass)}.modes{scrollbar-width:none;overscroll-behavior-x:contain;gap:4px;min-width:0;margin-left:auto;display:flex;position:relative;overflow-x:auto}.modes::-webkit-scrollbar{display:none}.modes a{color:var(--ink-soft);white-space:nowrap;border:1px solid #0000;border-radius:999px;flex:none;align-items:center;padding:5px 13px;font-size:15px;font-weight:500;text-decoration:none;transition:color .15s,background .15s,border-color .15s;display:inline-flex}.modes a:hover{color:var(--brass);border-color:color-mix(in srgb, var(--brass) 45%, transparent)}.modes a[aria-current=page]{background:var(--brass);color:var(--night);border-color:var(--brass)}.modes a:focus-visible,a:focus-visible{outline:2px solid var(--brass);outline-offset:2px}#mode[aria-busy=true]:before{content:"cargando…";text-align:center;max-width:1320px;color:var(--ink-soft);margin:40px auto;font-size:18px;display:block}.msheet{border:1px solid var(--hairline);background:var(--surface);border-radius:14px;grid-template-columns:minmax(0,1fr) 340px;max-width:1320px;margin:0 auto;display:grid;overflow:hidden;box-shadow:0 18px 50px -18px #0009}.msheet>.head{background:color-mix(in srgb, var(--night) 45%, var(--surface));grid-column:1/-1}.msheet .board{border-right:var(--rule-w) solid var(--rule)}.msheet .stage{height:min(74vh,740px);min-height:420px}.panel{flex-direction:column;min-width:0;display:flex}.panel .block:last-child{border-bottom:0}.panel label.row,.panel .row{justify-content:space-between;align-items:center;gap:10px;margin:6px 0;font-size:14.5px;display:flex}.panel .row input[type=range]{width:150px}.panel .row output{font-family:var(--mono);color:var(--blue);text-align:right;min-width:64px;font-size:13px}.panel .muted,.muted{color:var(--ink-soft);font-size:13.5px}.panel select{max-width:190px}.stack{flex-wrap:wrap;align-items:center;gap:6px;display:flex}button.primary{background:var(--blue);color:var(--on-blue);border-color:var(--blue)}button.primary:hover{background:color-mix(in srgb, var(--blue) 82%, #000);color:var(--on-blue)}button.danger{border-color:var(--danger);color:var(--danger)}button:disabled{opacity:.45;cursor:not-allowed;transform:none}input[type=text],input[type=number],input[type=color]{font:inherit;color:var(--ink);background:var(--field);border:1.5px solid var(--line);border-radius:var(--rad-box);padding:2px 8px;font-size:15px}input[type=color]{width:44px;height:28px;padding:0 2px}input[type=number]{width:84px}.kbd,kbd{font-family:var(--mono);border:1.2px solid var(--line);background:var(--field);border-bottom-width:2.5px;border-radius:4px;padding:0 5px;font-size:12px}@media (max-width:960px){.msheet{grid-template-columns:minmax(0,1fr)}.msheet .board{border-right:0;border-bottom:var(--rule-w) solid var(--rule)}.msheet .stage{height:62vh;min-height:360px}}.cards{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;display:grid}.card{border:1px solid var(--hairline);background:var(--surface);color:var(--cream);border-radius:14px;flex-direction:column;gap:6px;min-width:0;padding:14px 16px;text-decoration:none;transition:transform .2s,border-color .2s,box-shadow .2s;display:flex}a.card:hover{border-color:color-mix(in srgb, var(--brass) 60%, transparent);transform:translateY(-3px);box-shadow:0 14px 34px -14px #000000b3}.card h3{font-family:var(--display);margin:0;font-size:21px;font-weight:600;line-height:1.15}.card p{color:var(--ink-soft);margin:0;font-size:14px}.card .thumb{aspect-ratio:4/3;border:1px solid var(--hairline);background:var(--night-2) center / contain no-repeat;color:var(--ink-soft);text-align:center;border-radius:10px;place-items:center;padding:8px;font-size:13px;display:grid}.card .tag{letter-spacing:.08em;text-transform:uppercase;border:1px solid color-mix(in srgb, var(--teal) 70%, transparent);color:color-mix(in srgb, var(--teal) 55%, var(--cream));border-radius:999px;align-self:flex-start;padding:0 8px;font-size:11.5px;font-weight:500}.card .actions{flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:6px;display:flex}.card .actions a,.card .actions button{padding:2px 10px;font-size:13.5px}.card .actions a{color:var(--cream);border:1.5px solid var(--line);background:0 0;border-radius:999px;text-decoration:none}.card .actions a:hover{color:var(--brass);border-color:var(--brass)}.page{max-width:1320px;margin:0 auto}.page>h1{font-family:var(--display);letter-spacing:-.015em;text-wrap:balance;margin:10px 0 6px;font-size:clamp(30px,4.4vw,46px);font-weight:600;line-height:1.08}.page>.lead{color:var(--ink-soft);max-width:70ch;margin:0 0 20px;font-size:16px}.empty{text-align:center;max-width:640px;color:var(--ink-soft);margin:40px auto}.empty h2{font-family:var(--display);color:var(--cream);font-weight:600}.toasts{z-index:50;pointer-events:none;gap:8px;display:grid;position:fixed;bottom:18px;left:50%;transform:translate(-50%)}.toast{background:var(--cream);color:var(--night);border-radius:999px;padding:7px 16px;font-size:15px;font-weight:500;transition:opacity .35s,transform .35s;box-shadow:0 10px 28px -8px #0009}.toast.out{opacity:0;transform:translateY(8px)}.install{white-space:nowrap;color:var(--brass);border:1px solid color-mix(in srgb, var(--brass) 60%, transparent);background:0 0;border-radius:999px;flex:none;padding:4px 13px;font-size:14px;font-weight:500}.install:hover{background:var(--brass);color:var(--night);border-color:var(--brass);transform:none}.install[hidden]{display:none}.ios-help{background:var(--surface);max-width:min(420px,100vw - 32px);color:var(--cream);border:1px solid var(--hairline);border-radius:14px;padding:18px 20px;box-shadow:0 18px 50px -18px #000000b3}.ios-help::backdrop{background:#0000008c}.ios-help h2{font-family:var(--display);margin:0 0 10px;font-size:21px;font-weight:600;line-height:1.2}.ios-help ol{gap:6px;margin:0 0 16px;padding-left:20px;font-size:15px;display:grid}.ios-help form{text-align:right;margin:0}.pwa-update{z-index:55;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));background:var(--surface);width:max-content;max-width:calc(100vw - 24px);color:var(--cream);border:1px solid color-mix(in srgb, var(--brass) 55%, transparent);border-radius:999px;align-items:center;gap:10px;padding:5px 6px 5px 18px;font-size:15px;display:flex;position:fixed;transform:translate(-50%);box-shadow:0 14px 34px -10px #000000b3}.pwa-update .close{color:var(--ink-soft);background:0 0;border:0;padding:2px 10px;font-size:22px;line-height:1}.pwa-update .close:hover{color:var(--cream);background:0 0;transform:none}body:has(.pwa-update) .toasts{bottom:calc(76px + env(safe-area-inset-bottom,0px))}.drop{border:1.5px dashed var(--line);text-align:center;color:var(--ink-soft);background:color-mix(in srgb, var(--surface) 70%, transparent);border-radius:14px;padding:18px}.drop.over{border-color:var(--blue);color:var(--blue);background:color-mix(in srgb, var(--blue) 7%, var(--surface))}@media (max-width:560px){body{padding-inline:14px}.appbar{gap:10px;margin-inline:-14px;padding:6px 0 6px 14px}.brand{gap:8px;font-size:20px}.brand img{width:34px;height:34px}.modes{padding-left:8px;padding-right:14px;-webkit-mask-image:linear-gradient(90deg,#0000 0,#000 12px calc(100% - 26px),#0000);mask-image:linear-gradient(90deg,#0000 0,#000 12px calc(100% - 26px),#0000)}.modes a{min-height:44px;padding:0 12px;font-size:15px}.install{min-height:44px;margin-right:14px;padding:0 12px}.pwa-update{padding-left:14px;font-size:14px}.pwa-update button{min-height:44px}}@media (prefers-reduced-motion:reduce){.card,.brand img,.modes a{transition:none}a.card:hover,.brand:hover img{transform:none}}