*{box-sizing:border-box}body{margin:0;background:#f4f4ec;color:#143d3a;font:18px/1.5 system-ui,sans-serif}header{background:#123a37;color:white;padding:18px max(5vw,24px);display:flex;align-items:center;justify-content:space-between}header a{color:white}a{color:#166054}main{max-width:940px;margin:auto;padding:46px 5vw}small,.tile span{display:block;color:#427166;font-size:12px;font-weight:750;letter-spacing:.15em;margin-top:25px}h1,h2{font-size:clamp(34px,6vw,66px);letter-spacing:-.055em;line-height:1.04;margin:14px 0}p{margin:16px 0 22px}.tile{display:grid;width:min(100%,420px);background:#18473e;color:white;padding:26px 30px;text-decoration:none;border-radius:14px;margin-top:40px}.tile span{color:#bedba8;margin:0}.tile strong{font-size:32px;margin:20px 0}.tile em{font-style:normal;color:#d7eedb}.map{display:flex;justify-content:space-around;align-items:center;gap:8px;background:#deebdc;border-radius:10px;padding:24px 12px;text-align:center}.map i{color:#609383}button{border:0;border-radius:8px;padding:13px 20px;background:#15584b;color:white;cursor:pointer;font:inherit;font-weight:650}button:disabled{opacity:.6}.secondary{background:white;color:#15584b;border:1px solid #abc2b7}.actions{display:flex;gap:12px;margin-top:24px;flex-wrap:wrap}.hint{font-size:14px;color:#4b655e}table{border-collapse:collapse;width:100%;font-size:16px;table-layout:fixed}td,th{padding:14px 6px;border-bottom:1px solid #bccfc3;text-align:left;overflow-wrap:anywhere}thead{color:#457264}dialog{max-width:min(90vw,800px);border:0;border-radius:16px;color:#143d3a;padding:34px}dialog::backdrop{background:#123a37be}dialog .map{font-size:clamp(15px,3vw,28px)}@media(max-width:530px){main{padding-top:25px}.map{font-size:14px}td,th{font-size:13px}}
:root{color-scheme:dark;--ph:#a9ff72;--ice:#68e2cc;--txt:#e3eee8;--line:#34483c}body{background-color:#0c1210;background-image:linear-gradient(#202e251f 1px,transparent 1px),linear-gradient(90deg,#202e251f 1px,transparent 1px);background-size:28px 28px;color:var(--txt)}header{background:#101a15;border-bottom:1px solid var(--line);font:600 15px/1.6 ui-monospace,monospace}header strong:before{content:'>_ ';color:var(--ph)}header a,a{color:var(--ice)}h1,h2{font-family:ui-monospace,monospace;font-weight:750;letter-spacing:-.06em}small,.tile span{font:650 12px/1.6 ui-monospace,monospace;letter-spacing:.15em;color:var(--ph)}.tile{border-radius:4px;border:1px solid #58724f;background:linear-gradient(120deg,#18261c,#101a17);color:var(--txt)}.tile span,.tile em{color:var(--ph)}.map{border:1px solid var(--line);border-radius:4px;background:#13201a;color:var(--ice);font-family:ui-monospace,monospace}.map i{color:#71a18a}button{background:var(--ph);color:#10200a;border-radius:3px;font:700 16px/1.5 ui-monospace,monospace}.secondary{background:#16201a;color:var(--ph);border-color:#52674e}.hint{color:#acc0b3}thead{color:var(--ice);font:600 15px/1.5 ui-monospace,monospace}td,th{border-color:var(--line)}td{font-family:ui-monospace,monospace;color:#d4efcf}dialog{background:#0f1914;color:var(--txt);border:1px solid #6e8c66;border-radius:5px}dialog::backdrop{background:#030806d9}button:hover,.tile:hover{filter:brightness(1.12)}:focus-visible{outline:3px solid var(--ice);outline-offset:3px}
#console{background:#08110d;color:#a9ff72;border:1px solid #497654;border-radius:6px;margin:20px 0;padding:16px 20px;font:15px/1.55 ui-monospace,monospace}#console b{color:#68e2cc;letter-spacing:.08em}#trace{white-space:pre-wrap;overflow-wrap:anywhere;margin:10px 0 0;font:inherit}.running #trace:after{content:'▌';animation:pulse .8s steps(2) infinite}@keyframes pulse{50%{opacity:.2}}@media(prefers-reduced-motion:reduce){.running #trace:after{animation:none}}
#console b{color:var(--ph);letter-spacing:0}#console b span{color:var(--txt);font-weight:400}
dialog{width:min(860px,96vw);max-width:96vw;max-height:90dvh;overflow:auto;padding:clamp(16px,3vw,32px)}.dialogbar,.network,.origin,.branch{display:flex;align-items:center}.dialogbar{justify-content:space-between}.dialogbar small{margin:0}.network{padding:18px 10px;background:#09150f;border:1px solid var(--line);border-radius:6px;font-family:ui-monospace,monospace}.origin{flex:0 0 25%;min-width:0;flex-direction:column;gap:8px;color:var(--ph)}.branches{flex:1;min-width:0}.branch{position:relative;padding:5px 0 5px 12%;color:#82998d}.branch:before,.branch:after{content:'';position:absolute;background:currentColor}.branch:before{left:0;top:0;bottom:0;width:1px}.branch:first-child:before{top:50%}.branch:last-child:before{bottom:50%}.branch:after{left:0;top:50%;height:1px;width:12%}.branch:nth-child(2) i:before{content:'';position:absolute;top:50%;left:-5%;width:5%;border-top:1px solid currentColor}.endpoint{border:1px solid currentColor;border-radius:4px;padding:8px 12px;width:100%;background:#111e17}.endpoint code{font-size:12px}.endpoint output{display:block;font-size:15px;overflow-wrap:anywhere}.branch[data-state=ready]{color:var(--ice)}.branch[data-state=unknown]{color:#dbb78a}.branch[data-state=testing]{color:var(--ph)}.branch[data-state=testing] i:after{content:'';position:absolute;top:calc(50% - 3px);width:7px;height:7px;border-radius:50%;background:var(--ph);animation:packet 1s linear infinite}@keyframes packet{from{left:0}to{left:11%}}#verdict{color:var(--ice);font-weight:600}#reference{overflow-wrap:anywhere}@media(max-width:550px){dialog .actions button{width:100%}.network{padding:10px 6px}.origin{font-size:14px}.endpoint{padding:7px}.endpoint output{font-size:13px}.dialogbar button{padding:8px 12px}}@media(prefers-reduced-motion:reduce){.branch[data-state=testing] i:after{animation:none}}
.key{display:flex;gap:1.5em;font:600 15px ui-monospace,monospace}.key span:first-child{color:var(--ph)}.key span:last-child{color:var(--ice)}
.network{position:relative;display:grid;grid-template-columns:20% 36% 44%;padding:0;background:radial-gradient(ellipse at left,#173525,#09150f 75%)}.origin{grid-column:1;text-align:center}.branches{grid-column:3;display:grid;grid-template-rows:repeat(3,1fr);padding:0 10px 0 0}.branch{min-height:90px;padding:6px 0}.branch:before,.branch:after,.branch i{display:none}.wires{position:absolute;left:20%;width:36%;top:0;height:100%;overflow:visible}.wires path{stroke:#39564a;stroke-width:2;fill:none;vector-effect:non-scaling-stroke}.wires circle{visibility:hidden}.wires [data-state=out] .out,.wires [data-state=back] .back{visibility:visible}.wires .out{fill:var(--ph)}.wires .back{fill:var(--ice)}.wires [data-state=out] path,.branch[data-state=out]{stroke:var(--ph);color:var(--ph)}.wires [data-state=back] path,.branch[data-state=back]{stroke:var(--ice);color:var(--ice)}.wires [data-state=ready] path{stroke:#599086}.origin svg{max-width:75%}.endpoint{min-width:0}.endpoint output{font-size:clamp(12px,2vw,16px)}@media(max-width:550px){.network{grid-template-columns:22% 28% 50%}.wires{left:22%;width:28%}.branches{padding-right:4px}.branch{min-height:94px}}@media(prefers-reduced-motion:reduce){.wires circle{display:none}}

#practica{display:grid;gap:12px;justify-items:start}#entrada{width:100%;background:#08110d;color:var(--ph);padding:14px;border:1px solid var(--line);font:18px ui-monospace,monospace}#revelar{color:var(--ice);font-weight:600}#folio{font-size:clamp(18px,4vw,32px)}