:root{--bg:#121212;--surface:#1e1e1e;--new-bg:#2a2616;--accent:#ffd580;--link:#8be9fd}
*{box-sizing:border-box}
body{font:17px/1.6 system-ui,sans-serif;background:var(--bg);color:#e8e8e8;max-width:1400px;margin:auto;padding:1rem}
h1,h2,h3{color:#fff;line-height:1.3} h2{border-bottom:1px solid #444;padding-bottom:.3rem;margin-top:2.2rem}
a,a:visited{color:var(--link)} a:hover{color:#fff}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:3px}
nav ul{list-style:none;padding:0;margin:0;display:flex;gap:1.2rem;flex-wrap:wrap}
nav a[aria-current]{color:var(--accent);font-weight:700}
code{font:15px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;color:#a5f3e0}
pre{background:var(--surface);padding:1rem;overflow-x:auto;border-radius:6px;tab-size:4;border:1px solid #333}
pre.sub{white-space:pre-wrap} pre.sub code{color:#e8e8e8}
table{border-collapse:collapse;width:100%;font-size:15px}
td,th{border:1px solid #444;padding:.45rem;text-align:left;vertical-align:top} th{background:var(--surface);color:#fff}
summary{cursor:pointer;font:700 16px ui-monospace,monospace;padding:.6rem;background:var(--surface);border:1px solid #333;border-radius:6px;margin-top:.6rem;color:#fff}
b{color:var(--accent)}
.hl code,code.hl{color:#c8ccd4}

.ann{border:1px solid #333;margin-top:.4rem}
.ann th{border:0;border-bottom:1px solid #444}
.ann td{border:0;padding:.1rem .6rem}
.ann td.src{background:var(--surface);white-space:pre-wrap;tab-size:4;width:44%}
.ann td.sub{width:24%;border-left:3px solid #444;font-size:14px}
.ann td.sub code{font-size:13px;white-space:pre-wrap}
.ann td.why{border-left:3px solid #444}
.ann tr.has td.sub{border-left-color:var(--link)}
.ann tr.has td.why{border-left-color:var(--accent)}
.ann tr.has td{padding-top:.35rem;padding-bottom:.35rem}
.leg-sub{color:var(--link)} .leg-why{color:var(--accent)}

.stage{display:grid;grid-template-columns:2fr 3fr;gap:1rem} .stage>*{min-width:0}
.stage h2{margin-top:.8rem;font-size:18px}
.box{position:relative;height:65vh;overflow:auto;background:var(--surface);border:1px solid #333;border-radius:6px}
.box pre{margin:0;border:0;white-space:pre;overflow:visible}
#sub,#code{display:block;width:max-content;min-width:100%}
mark{background:var(--accent);color:var(--bg);border-radius:3px;padding:0 2px}
#code .ln{display:block;white-space:pre;padding:0 .4rem;border-left:3px solid transparent;min-height:1.5em}
#code .new{background:var(--new-bg);border-left-color:var(--accent);animation:in .45s ease-out}
@keyframes in{from{opacity:0;transform:translateX(-10px)}}
@media (prefers-reduced-motion:reduce){#code .new{animation:none}}
.ctl{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;position:sticky;top:0;background:var(--bg);padding:.5rem 0;z-index:1}
button{font:inherit;padding:.4rem .9rem;background:#2a2a2a;color:#fff;border:1px solid #777;border-radius:6px;cursor:pointer}
button:disabled{opacity:.5;cursor:default}
.note{min-height:3.4em;font-size:18px;margin:.4rem 0}

@media (max-width:760px){
 .stage{grid-template-columns:1fr} .box{height:auto;max-height:45vh}
 .ann thead{display:none} .ann,.ann tbody,.ann tr,.ann td{display:block;width:100%}
 .ann td.src{width:100%}
 .ann td.sub,.ann td.why{width:100%;margin:0;font-size:14px}
 .ann td.sub:empty,.ann td.why:empty{display:none}
 .ann tr.has td:last-child{margin-bottom:.5rem}
}
video{max-width:100%;height:auto;display:block;border-radius:8px}
table.scroll{display:block;overflow-x:auto}
.bucles{overflow-x:auto}
.bucles pre{background:none;border:0;padding:0 4px;margin:0;color:inherit;font:15px/1.5 ui-monospace,monospace;overflow:visible}
.bucles .blk{border-radius:8px;padding:6px 10px 8px;margin:4px 0 4px 18px}
.bucles .tag{font:700 12px system-ui,sans-serif}
.bucles .it{background:#c9b6ff;color:#111;margin-left:0;display:inline-block}
.bucles .i{background:#9ec9ff;color:#111}
.bucles .j{background:#a6f0b5;color:#111}
.bucles .di{background:#ffe58a;color:#111}
.bucles .dj{background:#ffbf80;color:#111}
.bucles .copy{background:#ffb3d1;color:#111}