.lab{padding-bottom:40vh}
.lab .lb-hero{padding:50vh var(--gx) 0} /* título y presentación empiezan a media pantalla */
.lab h1{font-size:var(--t96);line-height:1;letter-spacing:-.05em;font-weight:400;margin:0}
.lab .lw{display:inline-block;transition:color .2s ease}
.lab .lw-t{unicode-bidi:isolate}
.lab .h1-n{margin:calc(var(--t24) * .8) 0 0;max-width:calc(22 * var(--t48));font-family:var(--serif);font-size:max(15px,var(--b18));letter-spacing:-.005em;line-height:1.3} /* nota de las traducciones, en Bradford */.lab .h1-n .by{font-weight:700;font-feature-settings:"smcp" 1,"c2sc" 1;letter-spacing:.03em}
.lab .lw-pop{margin:calc(var(--t24) * 1) 0 0;max-width:36em;font-family:var(--serif);font-weight:500;font-size:max(18px,var(--b24));line-height:1.3;letter-spacing:-.005em}.lab .lw-pop[hidden]{display:none}.lab .lw-pop .lw-pt{font-family:var(--sans);font-weight:400}.lab .lw-pop a.lb-b{color:inherit}.lab .lw-pop button.lb-b{font:inherit;background:none;border:0;padding:0;color:inherit;text-decoration:underline;font-feature-settings:"smcp" 1,"c2sc" 1;letter-spacing:.06em}
.lab .lw-l{font-size:var(--meta);letter-spacing:-.025em;line-height:0;vertical-align:0;position:relative;top:calc((var(--meta) - var(--t96)) * .72);margin-left:.35em;color:#000}
.lab .lb-pg{padding:calc(var(--hdr-h0,50px) + var(--m) * 1.2) var(--gx) 0;min-height:70vh} /* «Lab» en tipo gigante, y aire antes de empezar */
html.soon .soon-off{cursor:default}html.soon #hdr .nav a:not([href*="/lab"]),html.soon #hdr .lang .lg-info{text-decoration:line-through;text-decoration-thickness:.07em;cursor:default} /* secciones en obras: tachadas */
.lab .pg.pg-a{margin:calc(2em * var(--giant-lh,.83)) 0 0 -.008em;letter-spacing:-.05em} /* «Atelier’s» / «Atelier» encima de «Lab», como el nombre de la portada */
.lab .pg-a + .pg{margin-top:0}
.lab h1 .h1-l{display:block} /* «The making of / hugoherreratobon.com / in Colour» */
.lab .pg .pg-l{font-size:var(--meta);letter-spacing:-.025em;position:relative;top:calc(-.7 * (var(--t48) - var(--meta)));margin-right:.9em} /* «Última actualización» en S, como superíndice de la fecha */
@media (max-width:820px){.lab .pg .pg-l{top:calc(-.7 * (var(--t24) - var(--meta)))}}
@media (max-width:820px){.lab .pg .pg-d{font-size:var(--t24) !important;top:calc(-.7 * (var(--ogiant) - var(--t24))) !important}} /* en móvil, la fecha más pequeña para que quepa */
.lab .pg .pg-d{font-size:var(--t48);letter-spacing:-.02em;line-height:0;vertical-align:0;position:relative;top:calc(-.7 * (var(--ogiant) - var(--t48)));margin-left:calc(var(--ogiant) * .045)} /* la fecha del día, alineada arriba */
.lab .pg{margin:calc(3em * var(--giant-lh,.83)) 0 0 -.085em;line-height:var(--giant-lh,.83);letter-spacing:-.075em;white-space:nowrap;width:max-content;font-size:var(--ogiant)}
.lab .lb-hero{position:relative}
.lab .lb-d.lb-cur{position:absolute;left:var(--gx);top:calc(25vh - var(--ogiant) * .068);transform:translateY(-50%); /* centrada entre la línea base de «Lab» y la altura de mayúsculas de «Color» */margin:0;max-width:none;white-space:nowrap}
@media (max-width:820px){.lab .lb-d.lb-cur{white-space:normal;right:var(--gx)}} /* en móvil sí puede partirse */ /* nota del cursor: encima del título, al margen, con una línea del título de aire */
.lab .lb-pg{position:relative}
/* ===== ritmo vertical del Lab: siempre los mismos huecos =====
   entre secciones: el padding de la sección (sin márgenes sueltos al final) ·
   descripción → contenido de una sección: D (1,5 × XL) · dentro del espécimen y entre piezas de un mismo bloque: d (1,5 × L) */
.lab{--gD:calc(var(--t96) * 1.5);--gd:calc(var(--t48) * 1.5)}
.lab .lb-x > :last-child,.lab .lb-hero > :last-child{margin-bottom:0}
.lab .lb-x > .lb-d:has(+ :not(.lb-d):not(.lb-n)){margin-bottom:var(--gD)}
.lab #type > .lb-d:has(+ .ty-kw),.lab #type > .lb-d:has(+ .ty-oa),.lab #type > .lb-d:has(+ .ty-nu),.lab #type > .lb-d:has(+ .ty-try){margin-bottom:var(--gd)}
.lab .lb-x .ty-s{margin-top:0}.lab .lb-x .ty-oa{margin-top:0}
.lab .lb-x .ty-n{margin-top:var(--gd)}.lab #type .ty-nu + .lb-d{margin-top:var(--gd)}
/* 01: kerning junto a la alineación óptica, y un estilo de números en cada columna; «Pruébala» cierra a todo el ancho */.lab #type .ty-gc > .lb-d:has(+ .ty-kw),.lab #type .ty-gc > .lb-d:has(+ .ty-oa),.lab #type .ty-gc > .lb-d:has(+ .ty-nu),.lab #type .ty-gc > .lb-d:has(+ .lb-d .lb-b){margin-bottom:var(--gd)}.lab #type .ty-gc > .lb-d:has(.lb-b){margin-bottom:var(--gs)}.lab #type .ty-gc > :last-child{margin-bottom:0}@media (min-width:821px){.lab #type .ty-g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:calc(45 * var(--u));margin:0 var(--gx)}.lab #type .ty-gc{display:grid;grid-template-rows:subgrid;align-content:start}.lab #type .k5 > .ty-gc{grid-row:span 5}.lab #type .k3 > .ty-gc{grid-row:span 3}.lab #type .kxxl > .ty-gc{display:contents}.lab #type .kxxl > .ty-gc:first-child > *{grid-column:1}.lab #type .kxxl > .ty-gc:last-child > *{grid-column:2}.lab #type .kxxl > .ty-gc > :nth-child(1){grid-row:1}.lab #type .kxxl > .ty-gc > :nth-child(2){grid-row:2}.lab #type .kxxl > .ty-gc > :nth-child(3){grid-row:3}.lab #type .kxxl > .ty-gc > :nth-child(4){grid-row:4}.lab #type .kxxl > .ty-gc > :nth-child(5){grid-row:5}.lab #type .kxxl > .ty-gc > #labkw,.lab #type .kxxl > .ty-gc > #laboa{grid-column:1 / -1;grid-row:4}.lab #type .kxxl > .ty-gc > #laboa{font-size:min(var(--ogiant), calc((100vw - var(--gx) - var(--gxr)) / 5.7));align-self:start}.lab #type .ty-gc > *{margin-left:0;margin-right:0}.lab #type .ty-gc > .ty-oa{font-size:min(var(--ogiant),15vw,calc((100vw - var(--gx) * 2 - 45 * var(--u)) / 6.3))}.lab #type .ty-gc > .ty-kw{font-size:min(calc(var(--t96) * 1.5),calc((100vw - var(--gx) * 2 - 45 * var(--u)) / 11.6))}}.lab .lb-x .w-im{margin-top:var(--gd)}
/* selectores: con aire respecto al texto que los explica, y pegados a lo que controlan */
.lab{--gs:calc(var(--t48) * .5)}
.lab .lb-x.lb-x > .lb-d.lb-d:has(+ .lb-d .lb-b),.lab .lb-x.lb-x > .lb-d.lb-d:has(+ .w-r),.lab #type > .lb-d:has(+ .lb-d .lb-b){margin-bottom:var(--gd)}
.lab .lb-x.lb-x > .lb-d.lb-d:has(.lb-b),.lab #type > .lb-d:has(.lb-b){margin-bottom:var(--gs)}
.lab .lb-x .w-r ~ .w-im{margin-top:var(--gs)}
.lab .lb-fn2{margin:calc(var(--t24) * 1) 0 0;max-width:calc(22 * var(--t48));font-size:var(--t15);letter-spacing:-.02em;line-height:1.4} /* nota de la nota, en XS */
.lab .lb-b.lb-b{letter-spacing:.06em}.lab .lb-s{white-space:pre-wrap}.lab .lb-red,.lab .lb-red .lb-b{color:#ff1744}.lab .lb-red .q,.lab .lb-red .c-g{border-color:rgba(255,23,68,.55) !important} /* 03 entera en rojo luminoso (#ff1744): rótulo, título, texto, selectores y filetes */.lab .lb-blue,.lab .lb-blue .lb-b,.lab .lb-blue .h-l a{color:#0000ff} /* 04 entera en azul RGB */.lab .p-w strong{color:#fff;-webkit-text-stroke:1px #000}.lab .p-w strong sup{color:#000;-webkit-text-stroke:0} /* 06: la cifra grande, solo el contorno en filete negro; la llamada de nota, maciza */.lab .ty-s.ty-1{grid-template-columns:minmax(0,1fr);grid-template-rows:none;row-gap:calc(80 * var(--u))}.lab .ty-s.ty-1 .ty-col{grid-row:auto;grid-template-rows:auto}.lab .ty-s.ty-1 .ty-col:first-child .ty-r:first-child .ty-w{margin-bottom:.09em} /* a todo el ancho aparece la g de «Hugo»: su descendente no toca la línea */@media (max-width:820px){.lab .ty-wd{display:none}} /* 01: los dos muestrarios en una columna o en dos */.lab .ty-kw{padding-top:.062em}.lab .ty-oa{padding-top:.055em}.lab .ty-nu.ty-nu{margin-top:-.086em} /* de cada selector a la tinta de su muestra, siempre la misma distancia (≈ el hueco de 18 px): se compensa el interlineado propio de cada letra */.lab .s-t.s-t{margin:0;padding:var(--gd) var(--gx);background:#fff;transition:background-color .4s ease,color .4s ease}.lab .s-t > p:last-child{margin-bottom:0}.lab .lb-sel{--mfc:#24b84b}.lab .lb-sel.pur{--mfc:#9b30ff}.lab .lb-sel,.lab .lb-sel .lb-n,.lab .lb-sel .lb-t,.lab .lb-sel .lb-d,.lab .lb-sel .lb-b,.lab .lb-sel .s-t{color:var(--mfc);transition:color .4s ease} /* 02 entera en verde vivo o en violeta de rotulador: rótulo, título, texto, selector y manifiesto */ /* los selectores: Bradford espaciado, sin versalitas */
.lab .q-v,.lab .q-l{color:#ff1744} /* Objetivo vs. Subjetivo: todas las cifras en rojo luminoso */
.lab .lb-x{display:flow-root} /* los márgenes de dentro no se escapan entre secciones */
.lab .lb-x > :last-child > :last-child{margin-bottom:0}
.lab .lb-x .ty-h{margin-top:var(--gD)} /* subapartados del espécimen: el mismo hueco D */

.lab .lb-curw{position:absolute;left:50%;bottom:0} /* nota del cursor: desde la mitad de la página, a la altura de la línea base de «Lab» (JS) */
/* al llegar, la nota del cursor y el disco aparecen despacio (sin «fill» final: después manda la opacidad de siempre) */@keyframes lbfi{from{opacity:0}to{opacity:1}}.lab .lb-curw,#labdisc{animation:lbfi 1.8s ease .5s backwards}@media (prefers-reduced-motion:reduce){.lab .lb-curw,#labdisc{animation:none}}
.lab .lb-curw .lb-d.lb-cur{position:static;transform:none;margin:0;white-space:nowrap}
@media (hover:none),(pointer:coarse){.lab .lb-curw{display:none !important}} /* sin cursor (móviles y tabletas), sin nota */
.lab .lb-as{position:absolute;font-family:var(--sans);font-style:normal;font-weight:400;font-size:80px;line-height:1} /* asterisco redondo, tan alto como la nota (JS) */
@media (max-width:820px){.lab .lb-curw{position:static;margin-top:var(--t48)}.lab .lb-as{display:none}.lab .lb-curw .lb-d.lb-cur{white-space:normal}}
.lab .lb-ct{display:block;font-family:var(--sans);font-weight:400;font-size:var(--t48);letter-spacing:-.04em;line-height:1;margin-bottom:.3em} /* titulito en Neuzeit L; el resto debajo, en Bradford */
.lab h1 .ast{font-size:var(--t48);line-height:0;vertical-align:0;position:relative;top:calc((var(--t48) - var(--t96)) * .72);margin-left:.05em}
.lab-dl{position:fixed;left:0;top:0;z-index:99985;pointer-events:none;font-size:var(--meta);letter-spacing:-.025em;line-height:1.1;color:#fff;mix-blend-mode:difference;white-space:pre;opacity:0;transition:opacity .3s ease;will-change:transform} /* «¡Clic!» pegado al cursor */
.lab-dl.on{opacity:1}
.lab .lb-in .fnm{font-size:.42em;line-height:0;vertical-align:0;position:relative;top:-.95em;margin-left:.1em}
.lab .lb-d.lb-fn{margin-left:0;margin-right:0;margin-top:calc(var(--t96) * 1.5);max-width:calc(22 * var(--t48));font-size:max(22px,var(--b30))}
.lab .lb-d .by{font-weight:700;font-feature-settings:"smcp" 1,"c2sc" 1;letter-spacing:.03em} /* «Por Claude», como «Nota bene» */
.lab .lb-fn .nb{font-weight:700;font-feature-settings:"smcp" 1,"c2sc" 1;letter-spacing:.03em} /* «Nota bene» en negrita y versalitas */
.lab .lb-fn sup{font-family:var(--sans);font-weight:400;font-size:calc(var(--t48) * .42);line-height:0;vertical-align:0;position:relative;top:calc((max(22px, var(--b30)) * .707 - var(--t48) * .42 * .752) * -1)} /* el ¹ igual que en el texto de arriba: Neuzeit, mismo tamaño, alineado a la altura de mayúsculas */
.lab .lb-in{font-size:var(--t48);line-height:1.15;letter-spacing:-.04em;margin:.6em 0 0;max-width:22em}
.lab .lb-x{padding-top:max(calc(380 * var(--u)),140px)}
.lab .lb-n{font-family:var(--serif);font-size:var(--b24);font-weight:500;letter-spacing:-.005em;margin:0 var(--gx) calc(18 * var(--u))}
.lab .lb-n span{font-variant-numeric:oldstyle-nums}
.lab .lb-t{margin:0 var(--gx) calc(30 * var(--u));font-size:var(--t96);line-height:1;letter-spacing:-.05em;font-weight:400} /* mismo tamaño y letra que el título «Color» */
.lab .lb-d.lb-br{max-width:calc(50vw - var(--gx) - 45 * var(--u))} /* saltos de línea forzados: cada frase en su línea */
.lab .lb-d{font-family:var(--serif);font-weight:500;font-size:max(18px,var(--b24));letter-spacing:-.005em;line-height:1.3;margin:0 var(--gx) calc(30 * var(--u));max-width:36em}
.lab .lb-b{font:inherit;background:none;border:0;padding:0;color:#000;cursor:pointer}
.lab .lb-b.on{text-decoration:underline;text-decoration-thickness:var(--ul);text-underline-offset:.15em}
/* 01 degradado + mitad en exclusión + cuatro columnas de texto corriendo en modo diferencia */
.lab .g-st{position:relative;height:100vh;overflow:hidden;isolation:isolate;contain:strict}
.lab .g-st:not(.run) .g-bg,.lab .g-st:not(.run) .rl{animation-play-state:paused} /* fuera de pantalla, quieto */
.lab .g-bg{position:absolute;left:0;top:0;width:10%;height:240%;transform-origin:0 0;transform:scale(10);background:linear-gradient(180deg,#ffffff -7.95%,#ffffff -3.5%,#cfa61c -0.25%,#cfa61c 0.25%,#0000ff 2.61%,#5a4430 4.82%,#5a4430 5.28%,#00a85a 7.78%,#00a85a 8.05%,#34373a 10.83%,#34373a 11.39%,#ff8a00 13.64%,#ff7fa0 15.52%,#ff7fa0 15.79%,#e6007e 17.59%,#111111 20.15%,#111111 24.97%,#eaff00 28.11%,#2b5562 30.72%,#2b5562 31.23%,#e4002b 32.1%,#e4002b 32.45%,#00e0f0 33.5%,#d6bc86 35.63%,#d6bc86 36.09%,#9b30ff 38.66%,#9b30ff 38.95%,#ffffff 42.05%,#ffffff 46.5%,#cfa61c 49.75%,#cfa61c 50.25%,#0000ff 52.61%,#5a4430 54.82%,#5a4430 55.28%,#00a85a 57.78%,#00a85a 58.05%,#34373a 60.83%,#34373a 61.39%,#ff8a00 63.64%,#ff7fa0 65.52%,#ff7fa0 65.79%,#e6007e 67.59%,#111111 70.15%,#111111 74.97%,#eaff00 78.11%,#2b5562 80.72%,#2b5562 81.23%,#e4002b 82.1%,#e4002b 82.45%,#00e0f0 83.5%,#d6bc86 85.63%,#d6bc86 86.09%,#9b30ff 88.66%,#9b30ff 88.95%,#ffffff 92.05%,#ffffff 96.5%,#cfa61c 99.75%,#cfa61c 100.25%,#0000ff 102.61%,#5a4430 104.82%,#5a4430 105.28%,#00a85a 107.78%);animation:labg 36s linear infinite;will-change:transform}
@keyframes labg{from{transform:scale(10) translateY(0)}to{transform:scale(10) translateY(-50%)}}
.lab .g-x{position:absolute;right:0;top:0;width:50%;height:100%;background:#d9d4c7;mix-blend-mode:exclusion}
.lab .g-c{position:absolute;inset:0;display:grid;grid-template-columns:repeat(2,1fr);column-gap:calc(var(--gx) * 2);padding:0 var(--gx);color:#fff;mix-blend-mode:difference}
.lab .g-2{margin-top:0} /* los bloques del degradado, pegados */
.lab .g-2 .g-bg{animation-delay:-18s}.lab .gb-off .g-bg,.lab .gb-off .g-x{display:none}.lab .gb-off .g-st{background:linear-gradient(90deg,#000 50%,#fff 50%)}.lab .gb-off .g-st.g-3{background:linear-gradient(90deg,#fff 50%,#000 50%)}@media (max-width:820px){.lab .gb-off .g-st{background:#000}.lab .gb-off .g-st.g-3{background:#fff}} /* «Negro»: 09 y 10 forman un tablero de ajedrez, negro y blanco alternos; las letras se invierten solas (difference) */ /* sin degradado: blanco, y el texto en diferencia queda negro */.lab .g-3 .g-bg{animation-delay:-36s;filter:invert(1)} /* Biblioteca: sobre el negativo de la paleta del tablón */
.lab .c-lit.c-trav .rt{font-family:var(--sans);letter-spacing:-.035em;line-height:1.06} /* Viajes en Neuzeit; Casa y lengua sigue en Bradford */
.lab .c-lit .rt{font-family:var(--serif);letter-spacing:-.015em;line-height:1.14;white-space:pre-line}.lab .c-lit .rd{white-space:pre-line}.lab .c-lit .ri{padding-bottom:calc(var(--t48) * 4)} /* biblioteca: los versos conservan sus saltos de línea */
.lab .rp{padding-top:calc(var(--m) * 4)}
.lab .g-c > div{position:relative;overflow:hidden;min-width:0}
/* 10, prueba: la estantería desordenada, en blanco y negro. Todos los libros mezclados, sin categorías: lomos negros y blancos, alturas y grosores distintos, alguno inclinado. La estantería corre despacio de izquierda a derecha y sale de la pantalla (como las páginas que se desplazan, pero en horizontal); con el cursor encima se para, y el libro bajo el cursor enseña su ficha, en horizontal, debajo */
.lab .lb-lib:not(.sv-s) .sf-w,.lab .lb-lib.sv-s .g-st{display:none}
.lab .sf-w{margin:0;position:relative}
@media (min-width:821px){.lab .sf-w .sf-rd{position:absolute;left:var(--gx);right:var(--gx);bottom:calc(4px + var(--t24));margin:0;min-height:0;pointer-events:none;z-index:2}.lab .sf-w .sf-c{position:absolute;bottom:0;left:var(--cx,0px);pointer-events:auto}} /* escritorio: la ficha se apoya en la estantería, al lado del libro, tapando los de al lado; así todo cabe en la altura de la pantalla */
.lab .sf{position:relative;height:min(70vh,calc(640 * var(--u) + 200px));padding-top:5%;overflow:hidden;border-bottom:4px solid #000}
.lab .sf-tr{display:flex;align-items:flex-end;height:100%;width:max-content;animation:sfm var(--sd,60s) linear infinite;will-change:transform}
.lab .sf:has(.sf-sp:hover) .sf-tr,.lab .sf.hold .sf-tr{animation-play-state:paused} /* se para solo con el cursor sobre un título */
@keyframes sfm{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.lab .sf-k{flex:0 0 auto;width:calc(var(--w,2) * (14px + 12 * var(--u)));height:var(--h,80%);margin:0;padding:.8em 0;border:1px solid #000;border-radius:0;background-color:var(--kb,#fff);background-repeat:repeat;color:var(--kf,#000);font:inherit;cursor:pointer;display:flex;justify-content:center;overflow:hidden;transform-origin:var(--o,50%) 100%;transform:rotate(var(--r,0deg));transition:transform .25s var(--ease);-webkit-tap-highlight-color:transparent}
.lab .sf-sp{background:var(--kb,#fff);padding:.5em .3em} /* la cartela del título, lisa sobre la trama, del color del lomo */.lab .lb-lib:not(.sv-s) .sv-only{display:none}
.lab .sf-k + .sf-k{margin-left:-1px}
.lab .sf-k:has(.sf-sp:hover),.lab .sf-k:focus-visible{transform:rotate(var(--r,0deg)) translateY(-5%);outline:none}
.lab .sf-k.on{transform:rotate(var(--r,0deg)) translateY(-11%)}
.lab .sf-sp{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--serif);font-size:var(--b24);letter-spacing:-.005em;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-height:100%;align-self:flex-end}
html[lang^="en"] .lab .sf-sp{transform:none;align-self:flex-start}
.lab .sf-k.nm .sf-sp{font-family:var(--sans);font-size:var(--t24);letter-spacing:-.02em}
@media (prefers-reduced-motion:reduce){.lab .sf{overflow-x:auto}.lab .sf-tr{animation:none}}
.lab .sf-rd{position:relative;margin:calc(var(--t24) * 1.4) var(--gx) 0;min-height:2em}
.lab .sf-c{position:relative;left:var(--cx,0px);width:min(100%,calc(520 * var(--u) + 200px));background:#fff;color:#000;border:1px solid #000;border-top:8px solid #000;padding:calc(var(--t24) * .3) calc(var(--t24) * .9) calc(var(--t24) * .5)}.lab .sf-c-f > dt:first-child,.lab .sf-c-f > dt:first-child + dd{border-top:0}.lab .lb-x > p.sf-rl.sf-rl{margin-top:calc(var(--t24) * .8)}.lab .sf-rl a{color:inherit;text-decoration:underline;text-decoration-thickness:var(--ul);text-underline-offset:.15em}
.lab .sf-c p{margin:0}
.lab .sf-c-h{display:flex;justify-content:space-between;gap:1em;font-size:var(--meta);font-weight:400;letter-spacing:-.01em;margin-bottom:calc(var(--t24) * .6) !important}
.lab .sf-c-f{display:grid;grid-template-columns:max-content minmax(0,1fr);align-items:baseline;column-gap:1.2em;margin:0;font-size:var(--meta);letter-spacing:-.01em;line-height:1.2}
.lab .sf-c-f dt,.lab .sf-c-f dd{margin:0;padding:.32em 0;border-top:1px solid #000}
.lab .sf-c-f dt{letter-spacing:0}
.lab .sf-c-f dd.ti{font-family:var(--serif);font-style:italic;font-size:var(--t48);line-height:1.05;letter-spacing:-.015em;padding:.12em 0 .18em} /* solo el título, grande */
.lab .sf-c-x{display:flex;flex-direction:column;border-top:1px solid #000;padding-top:calc(var(--t24) * .8)}
.lab .sf-c .sf-q{font-family:var(--serif);font-size:var(--b18);line-height:1.3;letter-spacing:-.005em;white-space:pre-line}
.lab .sf-c .sf-q.sn{font-family:var(--sans);font-size:var(--meta);line-height:1.3;letter-spacing:-.01em}
.lab .sf-c .sf-t{margin-top:.6em !important;font-family:var(--serif);font-size:var(--b15);line-height:1.3;white-space:pre-line}
.lab .lb-lib.rd-tr .sf-c .sf-t{order:-1;margin:0 0 .6em !important;font-size:var(--b18);line-height:1.3;letter-spacing:-.005em}
.lab .lb-lib.rd-tr .sf-c .sf-t + .sf-q{font-family:var(--serif);font-size:var(--b15);line-height:1.3;letter-spacing:0}
.lab .sf-c-d{font-family:var(--serif);font-size:var(--b18);line-height:1.3;letter-spacing:-.005em}
.lab .sf-c-n{margin-top:.8em !important;font-size:var(--meta);letter-spacing:0;line-height:1.3}
.lab .sf-c-r{margin-top:calc(var(--t24) * .8) !important;padding-top:.6em;border-top:1px solid #000;font-size:var(--meta);letter-spacing:-.01em}
.lab .sf-c-r a{color:inherit;text-decoration:underline;text-decoration-thickness:var(--ul);text-underline-offset:.12em}
@media (max-width:820px){.lab .sf-rd{margin:var(--gD) var(--gx) 0}.lab .sf-c{left:0;width:100%}}
@media (max-width:820px){.lab .sf{height:62vh;padding-top:12%}.lab .sf-k{width:calc(var(--w,2) * 17px)}}
/* 10: en blanco y negro, siempre. «Leer: Original / Traducción»: con Traducción, nuestra traducción pasa delante y a tamaño grande (con la letra de su columna) y el original queda debajo, pequeño, en Bradford. Los textos que ya están en la lengua de la página no cambian */
.lab .lb-lib.rd-tr .c-lit .ri{display:flex;flex-direction:column}
.lab .lb-lib.rd-tr .c-lit .rd{order:-1;margin-top:0 !important;max-width:none;font-family:var(--serif);font-size:var(--t48);line-height:1.14;letter-spacing:-.015em}
.lab .lb-lib.rd-tr .c-lit.c-trav .rd{font-family:var(--sans);line-height:1.06;letter-spacing:-.035em}
.lab .lb-lib.rd-tr .c-lit .rd + .rt,.lab .lb-lib.rd-tr .c-lit .rt:has(+ .rd){margin-top:.6em;font-family:var(--serif);font-size:var(--b24);line-height:1.3;letter-spacing:-.005em;max-width:32em}
.lab .g-c .ch{position:absolute;left:0;top:calc(var(--m) * 1.2);z-index:1;margin:0;font-size:var(--meta);line-height:1;letter-spacing:-.015em;font-weight:400;white-space:nowrap;writing-mode:vertical-rl} /* la etiqueta de cada ventana, en vertical, de arriba abajo: todas empiezan en la misma línea, arriba, en su propio margen */.lab .g-c > div{padding-left:calc(var(--meta) * 2.6)} /* rótulo de cada ventana: arriba, contra el margen derecho, en Neuzeit Heavy */
.lab .g-c .rl{animation:labr var(--d,90s) linear infinite;will-change:transform}
.lab .g-c > div:hover .rl{animation-play-state:paused}
@keyframes labr{from{transform:translateY(0)}to{transform:translateY(-50%)}}
.lab .ri{padding:0 0 1.8em}
.lab .ri p{margin:0}
.lab .rt{font-size:var(--t48);line-height:1.04;letter-spacing:-.04em}
.lab .c-news .rt{font-size:var(--t96);line-height:1;letter-spacing:-.05em} /* titulares en XL, como el título */
.lab .c-news .ri{padding-bottom:calc(var(--t96) * 3)} /* mucho aire entre titulares */
.lab .c-philo .rt{font-style:italic}
.lab .c-poem .ri{padding-bottom:calc(var(--t48) * 5)} /* poemas: mucho aire, como estrofas sueltas */
.lab .c-state .ri{border-top:1px solid currentColor;padding:calc(var(--t48) * .45) 0 calc(var(--t48) * 2.2)} /* declaraciones: cada una bajo un filete */ /* filosofía en Bradford cursiva */
.lab .c-poem .rt,.lab .c-philo .rt{font-family:var(--serif);letter-spacing:-.015em;line-height:1.14}
.lab .rd{margin-top:.6em !important;font-family:var(--serif);font-size:var(--b24);line-height:1.3;letter-spacing:-.005em;max-width:32em}
.lab .rs{margin-top:1em !important;font-size:max(9px,calc(13 * var(--u)));letter-spacing:.01em;line-height:1.3}
.lab .rs a{color:inherit;text-decoration:underline;text-decoration-thickness:var(--ul);text-underline-offset:.15em}
@media (max-width:820px){.lab .g-c{grid-template-columns:1fr}.lab .g-c > div:nth-child(2){display:none}}
/* 02 paleta medida: cada color de fondo de la página, con el alto de su porcentaje real */
.lab .p-b{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:center;column-gap:calc(45 * var(--u));padding:0 var(--gx);overflow:visible;isolation:isolate;height:var(--h);background:linear-gradient(var(--c),var(--c)) no-repeat 0 100% / 100% var(--h)} /* la banda de color mide exactamente su parte; el texto no la estira */
.lab .p-b.sm{height:calc(var(--t24) * 1.5);background:#fff linear-gradient(var(--c),var(--c)) no-repeat 0 calc(50% + var(--xo,0px)) / 100% max(1px,var(--h))} /* banda igual o más fina que la letra: a la altura de la mitad de la x, tachando el nombre; donde la cruza, el nombre sale en negativo */
.lab .p-w{margin:0 var(--gx) calc(60 * var(--u))}
.lab .p-w strong{display:block;width:max-content;margin-top:.2em;font-weight:400;line-height:.8;letter-spacing:-.075em;white-space:nowrap}
.lab .p-w strong sup{font-size:.28em;letter-spacing:-.05em;line-height:0;vertical-align:0;position:relative;top:-1.934em;margin-left:.08em} /* llamada grande, con su parte de arriba a la altura de las cifras (0,752 em) */
.lab .p-fn{margin:.8em 0 0;font-size:max(18px,var(--meta));letter-spacing:-.02em;line-height:1.3;max-width:28em}
.lab .p-fn sup{font-size:1em;line-height:0;vertical-align:0;position:relative;top:-.35em}.lab .p-fn.snd-fn{margin:0 var(--gx) var(--gD);font-family:var(--serif)}.lab .lb-x.lb-x > .lb-d.lb-d:has(+ .snd-fn.snd-fn){margin-bottom:.45em} /* la nota del theremin, en Bradford, justo debajo de las instrucciones */.lab .sb-h sup{font-size:1em;line-height:0;vertical-align:0;position:relative;top:-.35em}
.lab .p-b span{font-size:var(--t24);letter-spacing:-.02em;line-height:1;color:#fff;mix-blend-mode:difference;white-space:nowrap}
.lab .p-b .p-v{font-size:var(--meta);letter-spacing:-.01em;font-variant-numeric:tabular-nums} /* HEX y RGB */
.lab .p-b .p-r{display:grid;grid-template-columns:repeat(3,4ch);text-align:right;width:max-content} /* R G B en columnas */
.lab .p-b .p-r i{font-style:normal}
.lab .p-h{height:auto;padding-top:0;padding-bottom:calc(10 * var(--u))}
.lab .p-h span{color:#000;mix-blend-mode:normal;font-size:var(--meta)}
/* 03 archivo en color */
.lab .h-l{display:grid;grid-template-columns:auto max-content minmax(0,1fr) auto} /* la columna de nombres de color, tan ancha como el nombre más largo: siempre en una línea */
.lab .h-l a{display:grid;grid-template-columns:subgrid;grid-column:1 / -1;align-items:baseline;column-gap:.5em;padding:calc(6 * var(--u)) var(--gx) calc(4 * var(--u));font-size:var(--t24);line-height:1.2;letter-spacing:-.02em;color:#000;text-decoration:none;position:relative}.lab .h-l a::before{z-index:-1}.lab .h-l{isolation:isolate}
.lab .h-l a::before{content:"";position:absolute;inset:0;background:var(--c);opacity:0;z-index:-1;transition:opacity .2s ease}
.lab .h-l a:hover::before,.lab .h-l a:focus-visible::before{opacity:1}
.lab .h-l a:hover span,.lab .h-l a:hover b,.lab .h-l a:focus-visible span,.lab .h-l a:focus-visible b{color:#fff;mix-blend-mode:difference}
.lab .h-l a span{flex:1 1 auto;min-width:0}
.lab .h-l a i{flex:0 0 auto;width:.9em;height:.9em;border-radius:50%;background:var(--c);align-self:start;margin-top:.17em;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s ease}.lab .h-l a:hover i,.lab .h-l a:focus-visible i{transform:translate(var(--bx,0px),var(--by,0px)) scale(var(--bs,7));mix-blend-mode:difference;position:relative;z-index:4;transition:transform .22s cubic-bezier(.2,.9,.25,1)} /* al pasar, el punto estalla como en la caja de ritmos: un círculo grande en modo diferencia que pasa a negativo todo lo que cubre, también los códigos de color */.lab .h-l a b{min-width:12em;margin-right:2.2em;white-space:pre;font-variant-numeric:tabular-nums}
.lab .h-l a b{font-weight:400;font-size:var(--meta);letter-spacing:-.025em;text-align:left;white-space:nowrap}
.lab .h-l a em{min-width:3em;text-align:right;font-style:normal;font-size:var(--meta);letter-spacing:-.025em}.lab .h-l a:hover em,.lab .h-l a:focus-visible em{color:#fff;mix-blend-mode:difference}
/* 04 infografía bajo el cursor negativo */
.lab .c-z{position:relative;padding:0 var(--gx) calc(var(--m) * 2)}
.lab .dg{transition:none}
.lab .dg-key{font-size:1.4em;letter-spacing:.05em}
.lab .c-g{--F:min(calc(var(--t96) * 2),15vw);border-bottom:1px solid rgba(0,0,0,.55)}
.lab .q{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:calc(45 * var(--u));align-items:center;border-top:1px solid rgba(0,0,0,.55);padding:calc(34 * var(--u)) 0} /* filetes finos; la cifra en el centro de la fila */
.lab .q-v{grid-column:1 / span 2;margin:0;text-align:left;font-size:var(--F);line-height:.8;letter-spacing:-.085em;white-space:nowrap;font-feature-settings:"kern" 1}
.lab .q-v sup{font-size:var(--t48);letter-spacing:-.03em;line-height:0;vertical-align:0;position:relative;top:calc((var(--t48) - var(--F)) * .72);margin-left:.25em}
@media (min-width:821px){.lab .q{--qm:var(--qmj, calc(var(--t48) * 4.5))}.lab .q > .q-v{text-align:right;justify-self:end;margin-right:var(--qm);padding-left:0 !important;transition:transform 1.2s cubic-bezier(.16,.8,.12,1)}.lab .q > .q-v:not(.q-ck) > sup{display:inline-block;width:0;margin-left:0;left:.25em;white-space:nowrap}.lab .q > .q-v.q-in0{transform:translateX(calc(-50vw - 100%));transition:none}.lab .q > .q-v.q-ck{grid-template-columns:max-content 0}.lab .q.q:has(.q-ck){padding-top:calc(34 * var(--u))}.lab .q > .q-v:has([data-live="hh"]){position:relative;top:.1em}.lab .q-ck .ck-cities{white-space:nowrap;text-align:left}}
.lab .q-l,.lab .q-l p,.lab .lb-d{text-wrap:pretty}.lab .q:has(.q-ck) > .q-l,.lab .q:has(.q-ck) > .q-l p{text-wrap:balance}
.lab .c-g:not(.nb) .q-v{letter-spacing:0}.lab .c-g:not(.nb) sup,.lab .c-g:not(.nb) sup *{font-family:var(--sans)} /* sin serifa: también las llamadas, las unidades, los husos horarios y las ciudades */ /* Neuzeit: el espaciado lo pone el JS (blanco óptico igual entre cifras) */
.lab .c-g.nb .q-v{font-family:var(--serif);font-variant-numeric:lining-nums proportional-nums;letter-spacing:-.06em} /* prueba: cifras de Bradford (de caja alta, no elzevirianas) */
.lab .q-v.q-ck{--F:min(var(--t96),7.5vw);font-size:var(--F);line-height:.8;white-space:nowrap;display:grid;grid-template-columns:max-content max-content;column-gap:0;row-gap:calc(60 * var(--u))} /* relojes de las ciudades: del mismo tamaño que el de Madrid, en una columna debajo */
.lab .q:has(.q-ck){border-top:0;padding-top:calc(10 * var(--u))} /* forman sección con Madrid: el filete va al final */
.lab .ck{display:contents}
.lab .ck-t{text-align:right}
.lab .ell{letter-spacing:-.07em;margin-left:-.03em;margin-right:.07em} /* puntos suspensivos apretados */
.lab .ck sup{align-self:start;font-size:var(--t48) !important;letter-spacing:-.03em !important;line-height:1 !important;position:static !important;margin:var(--ckt,.2em) 0 0 .25em !important;display:grid;grid-template-columns:1.55em max-content;column-gap:.35em;align-items:start} /* columna de segundos de ancho fijo: las ciudades no se mueven con los segundos, y quedan cerca, como superíndice */
.lab .ck-l{grid-column:1;display:flex;flex-direction:column;white-space:nowrap}
.lab .ck-g,.lab .ck-gm{font-family:var(--serif);font-weight:700;font-size:var(--meta);letter-spacing:-.02em;line-height:1.25}
.lab .ck-g{margin-top:.5em}
.lab .ck-gm{position:absolute;left:0;top:calc(var(--t48) + var(--meta) * .5);white-space:nowrap} /* Madrid: GMT bajo los segundos */
.lab .ck-cities{grid-column:2;font-family:var(--serif);font-weight:700;font-size:var(--meta);letter-spacing:-.02em;line-height:1.25;display:flex;flex-direction:column;padding-top:.15em} /* ciudades: columna propia a la derecha de los segundos */
.lab .ck sup b{font-weight:500}
.lab .ck sup.st2 b{grid-column:1 / -1}
@media (max-width:820px){.lab .q-v.q-ck{grid-template-columns:max-content max-content}}
.lab .q-l{grid-column:3 / span 2;font-family:var(--serif);max-width:24em} /* la explicación, desde la mitad de la página, en Bradford */
.lab .q-k{margin:0;font-size:var(--b30);letter-spacing:-.005em;line-height:1.25}
.lab .q-f{margin:.6em 0 0;font-size:max(18px,var(--b24));letter-spacing:-.005em;line-height:1.3}
.lab .q-f sup{font-size:1em;line-height:0;vertical-align:0;position:relative;top:-.35em}
.lab .q-l sup.q-sx{font-size:.62em;top:-.62em;line-height:0;vertical-align:0;position:relative;margin-left:.04em} /* notas de la nota: letras volada */
.lab .q-sn{margin:1.4em 0 0;text-align:left;font-size:max(14px,var(--b18));letter-spacing:0;line-height:1.3} /* las notas de los estudios: más pequeñas, en bandera a la derecha */
.lab .q-l:has(.q-sn){max-width:none} /* la nota de los estudios y sus notas llegan hasta el margen derecho */ /* las notas de los estudios llegan hasta el margen derecho */
.lab .q-sn p{margin:0 0 .45em}.lab .q-sn sup.q-sx{margin:0 .15em 0 0}

.lab .q:has(.q-ck){padding-top:calc(34 * var(--u) + 60 * var(--u))} /* Madrid, ahora mismo: más grande que el resto, con su filete debajo */
.lab .q:has([data-live="hh"]){border-bottom:1px solid rgba(0,0,0,.55)}
.lab .q .bl{animation:labbl 1s steps(1) infinite;position:relative;top:-.134em} /* los dos puntos, centrados en la altura de las cifras, como en un reloj */
.lab .c-g.nb .q .bl{top:-.108em}
@keyframes labbl{50%{opacity:0}}
.lab .q-fn{margin:calc(30 * var(--u)) 0 0;padding:0 0 0 1.3em;font-size:max(18px,var(--meta));letter-spacing:-.02em;line-height:1.35;columns:2;column-gap:calc(45 * var(--u))}
.lab .q-fn li{margin:0 0 .4em;break-inside:avoid}
.lab-disc{position:fixed;left:0;top:0;z-index:99980;width:28vmax;height:28vmax;margin:-14vmax 0 0 -14vmax;border-radius:50%;background:var(--ci,#30d9e3);mix-blend-mode:difference;pointer-events:none;opacity:0;transition:opacity .3s ease,background-color .3s ease;will-change:transform;contain:strict} /* el cursor negativo gigante */
.lab-disc.on{opacity:1}
/* 05 selección (ya activa en todo el sitio) */
.lab .s-t{font-size:var(--t96);line-height:1;letter-spacing:-.05em;margin:0 var(--gx)}
.lab .s-t p{margin:0 0 .5em}
.lab .w-im{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(45 * var(--u));margin:calc(40 * var(--u)) var(--gx) 0;align-items:start}
.lab .w-c{margin:0;min-width:0}.lab .w-c .tags a{white-space:normal}.lab .w-c .meta{margin-top:calc(20 * var(--u))}
.lab .w-im img{width:100%;height:auto;display:block}
/* 07 tipografía: espécimen */
.lab .ty-hd{padding-left:calc(105 * var(--u));margin:0 0 calc(28 * var(--u))} /* el nombre de la fuente, alineado con sus muestras */
.lab .ty-rows{border-top:1px solid #000} /* la línea de arriba de «Atelier» es el arranque de las dos columnas */
.lab .ty-col{display:grid;grid-row:1 / span 2;grid-template-rows:subgrid}
.lab .ty-rows{display:flex;flex-direction:column}
.lab .ty-rows > .ty-r{flex:1 1 auto} /* las dos columnas abren sus filas hasta igualar la más alta */ /* Bradford: sus filas se abren hasta igualar la altura de las de Neuzeit */
.lab .ty-w.ty-wr{white-space:normal}
.lab .nw{white-space:nowrap} /* cada categoría entera; el punto va pegado a la anterior */
.lab .ty-off{opacity:.35}
.lab .ty-big{margin:0;font-size:var(--t48);line-height:1;letter-spacing:-.04em}
.lab .ty-serif{font-family:var(--serif);letter-spacing:-.02em}
.lab .ty-cap{margin:.6em 0 0;font-size:var(--meta);letter-spacing:-.025em}
.lab .ty-s{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:calc(45 * var(--u));align-items:start;margin:calc(var(--t96) * 1.6) var(--gx) 0} /* más aire entre la descripción y el espécimen */ /* dos columnas, cada una con su escala real */
.lab .ty-r{display:grid;grid-template-columns:calc(85 * var(--u)) minmax(0,1fr);column-gap:calc(20 * var(--u));align-items:baseline;border-bottom:1px solid #000;padding:calc(10 * var(--u)) 0 calc(14 * var(--u))}
.lab .ty-k{font-size:var(--t15);letter-spacing:-.02em;line-height:1.4}
.lab .ty-k b{font-weight:400}
.lab .ty-k{align-self:start;padding-top:.15em} /* las etiquetas, arriba, junto a la línea fina de cada fila (Neuzeit y Bradford igual) */
.lab .ty-col:first-child .ty-r:first-child .ty-w{margin-top:calc(var(--ogiant) * .14)} /* aire para las astas del XXL, sin bajar su etiqueta */ /* aire para las astas y los puntos del XXL */
.lab .ty-w{white-space:nowrap;overflow-x:clip;overflow-y:visible} /* recorta solo a lo ancho: los puntos de las íes no se cortan */
.lab .ty-h{margin-top:calc(140 * var(--u))}
.lab .ty-kw{margin:0 var(--gx);font-size:calc(var(--t96) * 1.5);line-height:.83;letter-spacing:-.05em}
.lab .ty-kp{display:inline-grid;width:max-content;max-width:100%;margin-right:.22em;vertical-align:top} /* texto corrido: las palabras siguen una tras otra y saltan de línea solas */
.lab .ty-kp > span{grid-area:1/1;white-space:nowrap}
.lab .ty-kw{overflow-x:clip}.lab .ty-kw .raw{letter-spacing:0;font-kerning:normal} /* la fuente tal cual: su espaciado y su kerning, sin tracking ni ajustes nuestros */
.lab .k-raw .our,.lab .k-our .raw{visibility:hidden}
.lab .k-both .raw{color:#e6007e;mix-blend-mode:multiply}
.lab .k-both .our{color:#00e0f0;mix-blend-mode:multiply}
.lab .ty-n{margin:calc(40 * var(--u)) var(--gx) 0;padding:0 0 0 1.4em;max-width:40em;font-size:var(--meta);letter-spacing:0;line-height:1.3}
.lab .ty-n li{margin:0 0 .5em}
.lab .ty-oa{position:relative;margin:calc(var(--t48) * 1.5) var(--gx) 0;font-size:min(var(--ogiant),15vw);line-height:var(--giant-lh);letter-spacing:-.05em}
.lab .ty-oa::before{content:"";position:absolute;left:0;top:-.08em;bottom:0;width:1px;background:#0000ff} /* la línea azul empieza justo encima de la A, sin llegar al selector */
.lab .ty-oa .l{display:block;width:max-content}
.lab .ty-nu{margin:0 var(--gx);font-family:var(--serif);font-size:var(--t96);letter-spacing:-.02em;line-height:1.1;font-variant-numeric:oldstyle-nums}
.lab .ty-nu.ln{font-variant-numeric:lining-nums}
.lab #labtz{vertical-align:middle;width:calc(300 * var(--u));accent-color:#000}
.lab .ty-try{margin:0 var(--gx);font-size:120px;line-height:1;letter-spacing:-.05em;outline:none;overflow-wrap:anywhere;min-height:1em}
.lab .ty-try.ty-sf{font-family:var(--serif);letter-spacing:-.02em}
@media (max-width:820px){.lab .ty-s{grid-template-columns:1fr;grid-template-rows:none;row-gap:calc(80 * var(--u))}.lab .ty-col{grid-row:auto;grid-template-rows:auto}.lab .ty-hd{padding-left:0}.lab .ty-r{grid-template-columns:calc(120 * var(--u)) 1fr}}
/* 08 nota sobre Claude: titulares y declaraciones subrayados con rotulador de la paleta al entrar en pantalla */
.lab .cn{margin:0 var(--gx);display:grid;grid-template-columns:1fr 1fr;column-gap:calc(45 * var(--u))}
.lab .cn > div{grid-column:2;--nl:calc(var(--t24) * 1.25)}
.lab .cn a{color:inherit;border-bottom:var(--ul) solid currentColor;padding-bottom:.04em;overflow-wrap:anywhere;text-decoration:none}
.lab .cn .st{margin:0 0 var(--nl);font-size:var(--t24);line-height:1.25}
.lab .cn .ni{margin:0 0 var(--nl)}
.lab .cn h3{margin:0 0 .35em;font-size:var(--meta);font-weight:400;line-height:1.25;letter-spacing:-.025em}
.lab .cn .bd{margin:0 0 .5em;font-family:var(--serif);font-size:var(--b18);line-height:1.3;letter-spacing:-.005em}
.lab .cn .src{margin:0;font-size:var(--t15);line-height:1.4;letter-spacing:-.025em}
.lab .cn .auto{margin:0 0 var(--nl);font-size:var(--meta);line-height:1.4;letter-spacing:-.025em}
.lab #claude > .lb-n .hl,.lab #claude > .lb-t .hl,.lab .cn .hl{background:linear-gradient(var(--hc),var(--hc)) no-repeat 0 0 / 0% 100%;color:var(--hi,#000);transition:background-size 1.1s cubic-bezier(.72,0,.18,1);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.lab #claude .hl.in{background-size:100% 100%} /* también el rótulo (verde, como los titulillos) y el título (cian, como los textos grandes) */
.lab .cn .ni.cl:not(.op) > :not(h3){display:none}.lab .cn .ni.cl h3{cursor:pointer}.lab .cn .ni.cl h3::after{content:"\00a0+"}.lab .cn .ni.cl.op h3::after{content:"\00a0\2212"} /* plegado: solo el titulillo, con + / − */
.lab .cn .auto a{transition:background-color .3s 1s,color .3s 1s;-webkit-box-decoration-break:clone;box-decoration-break:clone}.lab .cn .auto .hl.in a{background-color:#000;color:#b6ff00} /* el aviso, en violeta flúor; el enlace al formulario, en lima */
@media (max-width:820px){.lab .cn{grid-template-columns:1fr}.lab .cn > div{grid-column:1}.lab .q{grid-template-columns:1fr}.lab .q-v,.lab .q-l{grid-column:1}.lab .q-l{margin-top:1em}.lab .q-fn{columns:1}}
@media (prefers-reduced-motion:reduce){.lab .g-bg,.lab .g-c .rl{animation:none}}

.lab .sw-x{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:calc(45 * var(--u));row-gap:var(--gd);margin:0 var(--gx);font-family:var(--serif);font-size:var(--t48);line-height:1.14;letter-spacing:-.015em}.lab .sw-h{margin:0 0 calc(var(--t24) * .6);font-family:var(--sans);font-size:var(--meta);letter-spacing:-.02em;line-height:1.2} /* grupos: color, tipografía, tamaño, interfaz */
@media (max-width:820px){.lab .sw-x{grid-template-columns:1fr 1fr}} /* el Bradford más grande en uso (poemas y literatura) */ /* Centralita: los interruptores, en Bradford XL, como los demás selectores, a todo el ancho */
.lab .sw-x .sw-b{display:block;text-align:left;white-space:nowrap}.lab .sw-x .sw-b.lb-b{letter-spacing:.06em}.lab .sw-x .w-ar{width:.62em;height:.42em;margin-right:.4em;vertical-align:.12em;overflow:visible;transition:transform .25s ease}.lab .sw-x .sw-b:hover .w-ar,.lab .sw-x .sw-b:focus-visible .w-ar,.lab .sw-x .sw-b.on .w-ar{transform:translateX(.15em)}@media (min-width:1200px){.lab .sw-x.sw-x{grid-template-columns:repeat(4,max-content);justify-content:space-between}} /* Centralita, excepción: cada columna tan ancha como su interruptor más largo y el aire sobrante repartido a partes iguales entre ellas */ /* el mismo espaciado que todos los selectores */.lab .sw-x .sw-b[data-n]::after{content:attr(data-n)} /* un interruptor por línea */
html.sw-neg{background:#fff} /* los filtros de color (negativo, sin color, saturado) los combina el JS */
html.sw-dl body *:not(.sw-x,.sw-x *,.lab-code,.lab-code *,.sw-dock,.sw-dock *){line-height:1.5 !important}
.sw-dock{position:fixed;left:0;right:0;bottom:0;z-index:99995;display:flex;align-items:stretch;background:#eaff00;color:#000;font-family:"Neuzeit S","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:30px;font-weight:400;font-style:normal;line-height:1.2;letter-spacing:-.01em;text-transform:none;text-shadow:none;direction:ltr}.sw-dock[hidden]{display:none}.sw-dock .sd-l{flex:1 1 auto;display:flex;flex-wrap:wrap;align-items:baseline;gap:.2em 1em;padding:22px var(--gx) 24px}.sw-dock .sd-n{font-size:14px;letter-spacing:0;opacity:.75;margin-left:-.6em}.sw-dock button{font:inherit;background:none;border:0;padding:0;margin:0;color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.15em}.sw-dock button.all{flex:0 0 auto;display:flex;align-items:center;padding:0 var(--gx);background:#000;color:#eaff00;text-decoration:none}.sw-dock,.sw-dock *,html.has-dotcur .sw-dock,html.has-dotcur .sw-dock *{cursor:pointer !important}html.on-dock #labdisc,html.on-dock .dotcur{display:none !important} /* barra fija abajo, en negro: lo encendido, y apagarlo todo; con puntero normal */
html.sw-mess .mz{transform:var(--dz) !important;position:relative;z-index:var(--zz)} /* desorden: cada pieza, girada y desplazada al azar */
.lab .sw-one{width:calc((100% - 2 * var(--gx) - 180 * var(--u)) / 5);margin:0 var(--gx) var(--gs)}.lab .lb-x.lb-x > .lb-d.lb-d:has(+ .sw-one){margin-bottom:var(--gd)}
.lab .snd-k{display:grid;grid-template-columns:repeat(16,minmax(0,1fr));height:60vh;margin-top:var(--gs)}
.lab .snd-key{position:relative;background:var(--c);transition:filter .12s}.lab .lb-x > .lb-n.sb-h{margin-top:var(--gD)}
.lab .sq{display:grid;grid-template-columns:repeat(16,minmax(0,1fr));gap:0;border-top:1px solid #000;border-left:1px solid #000;margin:0 var(--gx)}.lab .sq,.lab .bm{max-width:min(75%, calc((100svh - 12rem) * 2))}
.lab .sq i{display:block;aspect-ratio:1;border:solid #000;border-width:0 1px 1px 0;background:#fff;transition:background-color .08s}.lab .sq i.on{background:var(--c)}.lab .sq i.now{background:#000;transition:none}.lab .sq i.now.on{background:var(--c);border-color:#fff;filter:invert(1)}
@media (min-width:821px){.lab .bm-c,.lab .snd-m,.lab .lb-x > .lb-d:has(+ .snd-rig){max-width:none;white-space:nowrap}}.lab .snd-rig .snd-bpm{display:flex;flex-wrap:wrap;column-gap:.66em;margin:var(--gs) var(--gx) 0;line-height:1.5}@media (min-width:821px){.lab .snd-rig{display:flex;align-items:flex-start;justify-content:flex-start;column-gap:calc(var(--gs) * 1.33);margin:0 var(--gx)} /* de la caja a «BPM», la misma distancia a ojo que de la línea de mandos (su línea base) a la caja */.lab .snd-rig .sq.sq,.lab .snd-rig .bm.bm{flex:1 1 auto;max-width:calc((100svh - 13rem) * 2);margin:0}.lab .snd-rig .bm.bm,.lab .snd-rig .sq.sq{margin-left:calc(var(--meta) * 5 + var(--gs) * 1.33);max-width:calc((100svh - 13rem) * 2 - var(--meta) * 5 + var(--gs) * 1.33)}.lab .snd-rig .snd-bpm{flex:0 0 auto;margin:0;white-space:nowrap;align-self:stretch;position:relative;display:grid;grid-template-rows:repeat(8,1fr);row-gap:6px;padding:6px 0;align-items:center;justify-items:start}.lab .snd-rig .snd-bpm .lb-b{line-height:1}.lab .snd-rig .snd-bt.snd-bt{position:absolute;left:0;bottom:calc(100% + var(--gs));margin:0}} /* las cifras, una por fila de círculos; «BPM», arriba, a la altura de los mandos */@media (min-width:821px){.lab .snd-rig.snd-rig{justify-content:center}.lab .snd-rig .bm.bm,.lab .snd-rig .sq.sq{margin-left:0;flex:0 1 auto;width:100%;max-width:min(calc(100% - 2 * (var(--meta) * 5 + var(--gs) * 1.33)), calc((100svh - 13rem) * 2))}.lab .snd-rig .snd-bpm.snd-bpm{width:3em;margin-right:calc(-3em - var(--gs) * 1.33)}} /* la caja, centrada en la página; rótulos y tempos cuelgan a los lados */.lab .snd-bt{display:block;margin:0 .66em 0 0;font-family:var(--serif);font-weight:500;font-size:max(18px,var(--b24));line-height:1.3;letter-spacing:.06em}.lab .snd-bt .sc{font-feature-settings:normal;letter-spacing:inherit} /* sin versalitas, como los demás selectores */ /* «BPM» como titulillo, las cifras debajo */ /* 07.2 y 07.3: cada máquina a todo el ancho; los tempos, en columna a la derecha; la rejilla se limita a la altura de la pantalla para que los círculos sigan siendo círculos */ .lab .sq.sq{border:0;gap:6px;padding:6px;background:transparent}.lab .sq.sq i{border:0;border-radius:50%}.lab .sq.sq i,.lab .bm.bm i{position:relative;background:transparent;transform:none;transition:none}.lab .sq.sq i::before,.lab .bm.bm i::before{content:"";position:absolute;inset:0;border-radius:50%;background:#000;transition:transform var(--rt,.127s) cubic-bezier(.2,.9,.25,1),background-color var(--rt,.127s) ease}.lab .sq.sq i.on::before,.lab .bm.bm i.on::before{background:var(--c)}/* solo el punto se anima; la etiqueta queda quieta */.lab .lb-d .lb-b{white-space:nowrap}@media (min-width:821px){.lab .lb-x.lb-x > .lb-d:has(> .lb-b){max-width:none}} /* los selectores no siguen la medida del texto: en escritorio caben en una sola línea */.lab .lb-b .b-sx{white-space:nowrap;display:inline-block;font-size:.55em;line-height:0;vertical-align:0;position:relative;top:-.75em;margin-left:.2em;letter-spacing:.03em} /* una opción de un selector nunca se parte en dos líneas */.lab .lb-x.lb-x > p.lb-d.lb-d.bm-v.bm-v{margin-bottom:18px}.lab .bm-v{opacity:0;transform:translateX(1.5em);pointer-events:none;transition:opacity .35s ease,transform .45s cubic-bezier(.2,.8,.2,1)}.lab .bm-v.in{opacity:1;transform:none;pointer-events:auto}.lab #sound{position:relative}.lab .lb-x.lb-x > p.lb-d.lb-d.bm-v.bm-v.side{position:absolute;margin:0;left:auto;max-width:none;white-space:nowrap} /* en pantallas anchas, «Variar» se sube a la línea de los mandos, alineado a la derecha con la rejilla */ /* «Variar» solo aparece mientras la caja suena; su sitio queda reservado para que nada salte */.lab .bm-vn{display:inline-block;white-space:pre;animation:bmvn .45s cubic-bezier(.2,.8,.2,1)}.lab .bm-vn:empty{display:none}@keyframes bmvn{from{opacity:0;transform:translateX(.8em)}to{opacity:1;transform:none}}.lab .bm-ct{font-variant-numeric:lining-nums tabular-nums;white-space:pre}/* cifras de estilo antiguo dentro del texto corrido */.lab .lb-d .sp-cnt{font-variant-numeric:oldstyle-nums}/* 07.5 la instantánea de Spotify: un punto por canción, el color principal de su portada */.lab .sp-f{display:grid;grid-template-columns:repeat(auto-fill,minmax(22px,1fr));gap:6px;margin:0 var(--gx);padding:0}.lab .sp-f i{display:block;aspect-ratio:1;border-radius:50%;background:var(--c1);cursor:default;position:relative;transition:transform .13s cubic-bezier(.2,.9,.25,1)}.lab .sp-f.tri i::before,.lab .sp-f.tri i::after{content:"";position:absolute;border-radius:50%}.lab .sp-f.tri i::before{inset:18%;background:var(--c2,var(--c1))}.lab .sp-f.tri i::after{inset:36%;background:var(--c3,var(--c2,var(--c1)))}.lab .sp-f i.lt{box-shadow:inset 0 0 0 1px #000}.lab .sp-f i:hover{transform:scale(4);mix-blend-mode:difference;z-index:2;transition:none}.lab .lb-x > p.sp-cap.sp-cap.sp-cap{font-size:var(--t48);line-height:1.08;letter-spacing:-.02em;height:2.16em;margin-bottom:18px;max-width:none;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2} /* la canción activa, grande: dos líneas fijas para que la rejilla no salte */.lab .sq.sq i.now,.lab .bm.bm i.now,.lab .sq.sq i.now.on,.lab .bm.bm i.now.on{background:transparent;transform:none;filter:none;mix-blend-mode:normal;z-index:auto}.lab .sq.sq i.now::before,.lab .bm.bm i.now::before{transform:scale(.22);transition:none}.lab .sq.sq i.now.on::before,.lab .bm.bm i.now.on::before{transform:scale(2.1);mix-blend-mode:difference;z-index:2;transition:none}  /* al sonar: la columna que suena se vacía y cada nota encendida estalla, más grande que su casilla y en negativo sobre las vecinas; luego vuelve despacio a su sitio */ /* el secuenciador como un aparato: caja negra, círculos blancos, encendidos en su color */.lab .bm.bm{border:0;gap:6px;padding:6px;background:transparent}.lab .bm.bm i{border:0;border-radius:50%} /* también en círculos */ /* la caja de ritmos, igual pero en cuadrados */.lab .sq.sq{margin-left:calc(var(--gx) + var(--meta) * 5 + var(--gs) * 1.33)}.lab .sq.sq i{position:relative}.lab .sq.sq i b{position:absolute;left:auto;right:calc(100% + 6px + var(--gs) * 1.33);width:5em;text-align:right;top:50%;transform:translateY(-50%);font-weight:400;font-size:var(--meta);line-height:1.1;letter-spacing:-.02em;color:#000;pointer-events:none} /* las notas del secuenciador, a la izquierda, como los instrumentos */.lab .bm.bm{margin-left:calc(var(--gx) + var(--meta) * 5 + var(--gs) * 1.33)}.lab .snd-col .bm.bm{margin-left:calc(var(--meta) * 5.4)}.lab .bm.bm i b,.lab .bm.bm i.on b,.lab .bm.bm i.now b,.lab .bm.bm i.now.on b{left:auto;right:calc(100% + 6px + var(--gs) * 1.33);width:5em;text-align:right;top:50%;transform:translateY(-50%);color:#000} /* el marco negro, igual de fino que las separaciones (6 px en todo); los nombres de los instrumentos, fuera de la caja, en negro sobre blanco */ /* el secuenciador, en círculos; la caja de ritmos sigue en cuadrados (y con sus rótulos dentro) */
.lab .lab-ix{overflow-x:clip}
.lab .lab-gl{list-style:none;margin:0 var(--gx);padding:0;columns:4;column-gap:calc(45 * var(--u));transition:transform 1.2s cubic-bezier(.16,.8,.12,1)}.lab .lab-gl.in0{transform:translateX(100vw);transition:none} /* un solo bloque, el mismo deslizamiento que las cifras de 03 */
.lab .lab-gl li.sec{break-inside:avoid;padding-bottom:calc(var(--gd) * .75)}.lab .lab-gl > li.sec:nth-child(5),.lab .lab-gl > li.sec:nth-child(8),.lab .lab-gl > li.sec:nth-child(11){break-before:column} /* 01–04 Tipografía · 05–07 · 08, 09 Sonidos y 10 · 11, 12 y Claude */ /* cada bloque se apila bajo el anterior, sin filas */
.lab .lab-gl a{display:block;color:#000;text-decoration:none}.lab .lab-gl a:hover,.lab .lab-gl a:focus-visible{color:#fff;background:#000;outline:0}
.lab .lab-gl .ix-l{display:block;margin-bottom:calc(18 * var(--u));font-family:var(--serif);font-size:var(--b24);font-weight:500;letter-spacing:-.005em} /* como el rótulo de cada sección */
.lab .lab-gl .ix-t{display:block;font-size:var(--t48);line-height:1;letter-spacing:-.04em;text-wrap:balance} /* el título grande, en Neuzeit */
.lab .lab-gl{--ixn:calc(var(--b24) * 2.3)}.lab .lab-gl a{position:relative;padding-left:var(--ixn)}.lab .lab-gl .n{position:absolute;left:0;width:calc(var(--b24) * 1.95);text-align:right;font-family:var(--serif);font-size:var(--b24);font-variant-numeric:oldstyle-nums} /* dos columnas: números alineados a la derecha, nombres y títulos con el mismo margen izquierdo */
.lab .lab-gl .ix-s{list-style:none;margin:calc(18 * var(--u)) 0 0;padding:0;font-family:var(--serif);font-size:var(--b24);line-height:1.35;letter-spacing:-.005em}.lab .lab-gl .ix-s:empty{display:none}
@media (max-width:820px){.lab .lab-gl{columns:2}}
.lab .bm{display:grid;grid-template-columns:repeat(16,minmax(0,1fr));gap:0;border-top:1px solid #000;border-left:1px solid #000;margin:0 var(--gx)}.lab .bm b{position:absolute;left:.5em;top:.4em;right:.4em;font-weight:400;font-size:var(--meta);line-height:1.1;letter-spacing:-.02em;color:#000;pointer-events:none}.lab .bm i.on b{color:var(--lc)}.lab .bm i.now b{color:#fff}.lab .bm i.now.on b{color:var(--lc)}.lab .bm i{display:block;position:relative;aspect-ratio:1;border:solid #000;border-width:0 1px 1px 0;background:#fff;transition:background-color .06s}.lab .bm i.on{background:var(--c)}.lab .bm i.now{background:#000;transition:none}.lab .bm i.now.on{background:var(--c);border-color:#fff;filter:invert(1)} /* caja de ritmos */
.lab .thr{position:relative;height:60vh;touch-action:none;user-select:none;-webkit-user-select:none}.lab .thr-r{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;font-family:"Bradford Light",var(--serif);font-weight:400;font-size:var(--t96);letter-spacing:-.02em;line-height:.8;font-variant-numeric:lining-nums proportional-nums;font-feature-settings:"kern" 1;white-space:nowrap;color:#fff;mix-blend-mode:difference;pointer-events:none} /* 07.3: la frecuencia, enorme y en Bradford, al tamaño de las cifras de 03 */.lab .thr-r sup{position:absolute;left:100%;top:0;margin-left:.3em;font-family:var(--serif);font-weight:400;font-size:var(--t24);letter-spacing:-.01em;line-height:1;vertical-align:0;white-space:nowrap} /* «Hz» volado, como las llamadas de las cifras de 03 */
.lab .snd-key.on{filter:invert(1)}
.lab .snd-key > span{position:absolute;left:50%;bottom:calc(var(--t24) * .6);writing-mode:vertical-rl;transform:translateX(-50%) rotate(180deg);font-size:var(--meta);letter-spacing:-.02em;white-space:nowrap;color:#fff;mix-blend-mode:difference}
@media (max-width:820px){.lab .sw-one{width:auto}}
html.sw-th{--serif:"Times New Roman",Times,serif;--sans:"Helvetica Neue",Helvetica,Arial,sans-serif}html.sw-th body *{font-weight:400 !important;font-style:normal !important} /* Bradford → Times, Neuzeit → Helvetica Neue, solo redonda regular */
html.sw-up body *:not(.lab-code,.lab-code *,.sw-dock,.sw-dock *){text-transform:uppercase !important}
html.sw-s body *:not(.sw-x,.sw-x *,.lab-code,.lab-code *,.sw-dock,.sw-dock *){font-size:var(--t15) !important;line-height:1.3 !important}
html.sw-xl body *:not(.sw-x,.sw-x *,.lab-code,.lab-code *,.sw-dock,.sw-dock *){font-size:var(--t96) !important;line-height:1 !important}
html.sw-nok body *{letter-spacing:0 !important;font-kerning:none !important;font-feature-settings:"kern" 0 !important}html.sw-nok .kp,html.sw-nok .pg span{margin-left:0 !important}
html.sw-p1,html.sw-p1 *{cursor:crosshair !important}
html.sw-p2,html.sw-p2 *{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Crect width='28' height='28'/%3E%3C/svg%3E") 14 14,crosshair !important}
html.sw-p3,html.sw-p3 *{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Ctext x='22' y='44' text-anchor='middle' font-family='Helvetica,Arial' font-size='56'%3E*%3C/text%3E%3C/svg%3E") 22 22,crosshair !important}
html.sw-p1 #labdisc,html.sw-p2 #labdisc,html.sw-p3 #labdisc{display:none !important}
.lab-code{position:fixed;inset:0;z-index:99990;pointer-events:none;overflow:hidden;display:none;color:#fff;mix-blend-mode:difference;font:11px/1.4 ui-monospace,Menlo,Consolas,monospace;letter-spacing:0;white-space:pre-wrap;word-break:break-all;padding:0 var(--gx)}
html.sw-code .lab-code{display:block}.lab-code > div{animation:labcode 600s linear infinite}@keyframes labcode{to{transform:translateY(-100%)}}

/* Centralita 4 × 10: color (filtros que combina el JS), tamaño, interfaz, tipografía */
html.sw-rgb main *{text-shadow:-.05em 0 rgba(255,0,0,.75),.05em 0 rgba(0,255,255,.75) !important}
html.sw-blue main *{color:#0000ff !important}
html.sw-neon .lab p{background:#ff0 !important}
html.sw-lh0 main *{line-height:.8 !important}
html.sw-wide main *{letter-spacing:.3em !important}
html.sw-tight main *{letter-spacing:-.08em !important}
html.sw-narrow main{max-width:min(420px,90vw);margin-left:auto;margin-right:auto}
html.sw-squash main :is(p,h1,h2,h3,li){transform:scaleY(.55);transform-origin:0 0}
html.sw-boxes main *{outline:1px solid rgba(228,0,43,.7) !important;outline-offset:-1px}
html.sw-noimg main img{visibility:hidden !important}
html.sw-shake .lab > section{animation:swshake .16s steps(2) infinite}@keyframes swshake{0%{transform:translate(0,0)}50%{transform:translate(-3px,2px)}100%{transform:translate(2px,-2px)}}
html.sw-mono{--serif:"Courier New",Courier,monospace;--sans:"Courier New",Courier,monospace}
html.sw-low body *:not(.sw-dock,.sw-dock *){text-transform:lowercase !important}
html.sw-ital main *{font-style:italic !important}
html.sw-bold main *{font-weight:700 !important}
html.sw-rtl main{direction:rtl}
html.sw-under main *{text-decoration-line:underline !important}html.sw-strike main *{text-decoration-line:line-through !important}html.sw-under.sw-strike main *{text-decoration-line:underline line-through !important}