:root {
    --tinta: #23242c;
    --rojo: #c4372c
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation
}

body {
    min-height: 100vh;
    padding: 24px 0 70px;
    display: grid;
    place-items: center;
    font-family: "Helvetica Neue", "Arial Narrow", Arial, sans-serif;
    background: radial-gradient(ellipse at 50% 40%, #ececea, #cdcdc9 75%)
}

/* Todo se coloca en unidades cqw medidas sobre la foto del PT-1 (ancho de la carcasa = 100) */
.pt1 {
    --cuerpo-claro: #f5f2ea;
    --cuerpo: #efece3;
    --cuerpo-oscuro: #e4e1d6;
    --altavoz: #dedbd1;
    --rejilla-sombra: #a5a298;
    --rejilla-luz: #fdfcf8;
    --rejilla: #e8e5dc;
    --franja-sombra: #cfccc3;
    --franja-luz: #e7e4dc;
    --panel: #ebe8e0;
    --linea: #4a4a4a;
    --ranura: #c2bfb5;
    --modelo: #4a4b55;
    --labio-sombra: #dcd9cf;
    --labio-luz: #e9e6dd;
    --contraste: #fff;
    --clear: #5b80d2;
    --del: #ee7c53;
    --slow: #ef8459;
    --fast: #ea7a4d;
    --rhythm: #eb7f57;
    --reset: #f2b632;
    --demo: #5cc2a0;
    --mem: #7a8bb0;
    --okp: #6f94d2;
    container-type: inline-size;
    position: relative;
    width: min(1120px, 96vw);
    aspect-ratio: 1015/277;
    border-radius: 1.3cqw 1.3cqw 1.6cqw 1.6cqw;
    background: linear-gradient(180deg, var(--cuerpo-claro), var(--cuerpo) 55%, var(--cuerpo-oscuro));
    box-shadow: 0 1.6cqw 2.2cqw rgba(0, 0, 0, .28), 0 .3cqw .5cqw rgba(0, 0, 0, .25),
        inset 0 .2cqw .2cqw #fff, inset 0 -.35cqw .4cqw rgba(0, 0, 0, .12), inset .15cqw 0 .2cqw rgba(255, 255, 255, .7);
}

.pt1[data-color="negro"] {
    --cuerpo-claro: #434352;
    --cuerpo: #30303e;
    --cuerpo-oscuro: #252532;
    --altavoz: #343442;
    --rejilla-sombra: #171722;
    --rejilla-luz: #666675;
    --rejilla: #3a3a49;
    --franja-sombra: #15151f;
    --franja-luz: #353542;
    --panel: #30303c;
    --tinta: #d3d6e7;
    --rojo: #ffd279;
    --contraste: #252532;
    --linea: #b4b7ce;
    --ranura: #b4b7ce;
    --modelo: #bfc3d8;
    --labio-sombra: #252532;
    --labio-luz: #383847;
    --clear: #efa577;
    --del: #a6c4e0;
    --slow: #a6c4e0;
    --fast: #a6c4e0;
    --rhythm: #a6c4e0;
    --reset: #f2b632;
    --demo: #91b6e0;
    --mem: #e5d8e5;
    --okp: #80a9dc;
}

.pt1[data-color="rojo"] {
    --cuerpo-claro: #eb2536;
    --cuerpo: #d91829;
    --cuerpo-oscuro: #b80d1d;
    --altavoz: #ce1424;
    --rejilla-sombra: #890d19;
    --rejilla-luz: #ee3846;
    --rejilla: #d21b2b;
    --franja-sombra: #b31322;
    --franja-luz: #e02b39;
    --panel: #ce1928;
    --tinta: #f5d1b2;
    --rojo: #fff8db;
    --contraste: #a10d1c;
    --linea: #efb49c;
    --ranura: #efb49c;
    --modelo: #efb49c;
    --labio-sombra: #b80d1d;
    --labio-luz: #df2534;
    --clear: #e98556;
    --del: #e98556;
    --slow: #e98556;
    --fast: #e98556;
    --rhythm: #e98556;
    --reset: #f1be57;
    --demo: #ebdbb8;
    --mem: #ebdbb8;
    --okp: #ebdbb8;
}

.pt1[data-color="rosa"] {
    --cuerpo-claro: #e476b0;
    --cuerpo: #d65b98;
    --cuerpo-oscuro: #b8437c;
    --altavoz: #cf578f;
    --rejilla-sombra: #973e69;
    --rejilla-luz: #ee91bf;
    --rejilla: #d968a1;
    --franja-sombra: #b64b7d;
    --franja-luz: #df78ac;
    --panel: #cd5d94;
    --tinta: #fae4ef;
    --rojo: #fff8bc;
    --contraste: #a22e66;
    --linea: #f6d8e8;
    --ranura: #f6d8e8;
    --modelo: #f6d8e8;
    --labio-sombra: #b8437c;
    --labio-luz: #da70a4;
    --clear: #f1e6f0;
    --del: #f1e6f0;
    --slow: #f1e6f0;
    --fast: #f1e6f0;
    --rhythm: #f1e6f0;
    --reset: #8fc9b0;
    --demo: #f1e6f0;
    --mem: #f1e6f0;
    --okp: #737e88;
}

.pt1[data-color="azul-pastel"] {
    --cuerpo-claro: #91afe1;
    --cuerpo: #7d9ed6;
    --cuerpo-oscuro: #6384bd;
    --altavoz: #7898cd;
    --rejilla-sombra: #405f99;
    --rejilla-luz: #a0bbe6;
    --rejilla: #7a9ed6;
    --franja-sombra: #5576ae;
    --franja-luz: #94b0dd;
    --panel: #83a0d0;
    --tinta: #f1ead7;
    --rojo: #fff5aa;
    --contraste: #3c5583;
    --linea: #e0d9c5;
    --ranura: #e0d9c5;
    --modelo: #e0d9c5;
    --labio-sombra: #6384bd;
    --labio-luz: #87a5d5;
    --clear: #344775;
    --del: #344775;
    --slow: #344775;
    --fast: #344775;
    --rhythm: #344775;
    --reset: #f16c51;
    --demo: #344775;
    --mem: #344775;
    --okp: #2d3c65;
}

.pt1[data-color="rosa-pastel"] {
    --cuerpo-claro: #f1e7f3;
    --cuerpo: #e7dbea;
    --cuerpo-oscuro: #d2c5d8;
    --altavoz: #dfd0df;
    --rejilla-sombra: #b9a4b6;
    --rejilla-luz: #f5edf5;
    --rejilla: #e4d5e4;
    --franja-sombra: #c1b0c1;
    --franja-luz: #eee3ed;
    --panel: #e4d7e7;
    --tinta: #318caa;
    --rojo: #a82e70;
    --linea: #5ca5ba;
    --ranura: #5ca5ba;
    --modelo: #5ca5ba;
    --labio-sombra: #ccbdd1;
    --labio-luz: #e9deec;
    --clear: #b6cde5;
    --del: #b6cde5;
    --slow: #b6cde5;
    --fast: #b6cde5;
    --rhythm: #b6cde5;
    --reset: #64b7b2;
    --demo: #b6cde5;
    --mem: #b6cde5;
    --okp: #ce739e;
    --tecla-alterada: linear-gradient(90deg, #8cb5c2 0 6%, #b4dfeb 6% 92%, #90becb 92%);
    --pista-alterada: #355967;
}

.pt1.concertmate[data-color="marfil"] {
    --cuerpo-claro: #f5f1e4;
    --cuerpo: #ece7d8;
    --cuerpo-oscuro: #ddd7c6;
    --altavoz: #e3dece;
    --rejilla-sombra: #aaa38e;
    --rejilla-luz: #fffdf5;
    --rejilla: #eee9da;
    --franja-sombra: #d3cebf;
    --franja-luz: #f2eedf;
    --panel: #e9e3d3;
    --tinta: #39372f;
    --linea: #5b584e;
    --ranura: #c8c1af;
    --modelo: #514e44;
    --labio-sombra: #d4cebd;
    --labio-luz: #eee9da;
}

.instrumento {
    display: grid;
    justify-items: center;
    gap: 36px;
}

.colores {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    max-width: 96vw;
}

.colores button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid #969690;
    border-radius: 22px;
    background: #f5f4f0;
    color: #33322e;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.colores button::before {
    content: "";
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    border: 1px solid rgba(0, 0, 0, .3);
    border-radius: 50%;
    background: var(--muestra);
}

.colores button:hover {
    background: #fff;
}

.colores button[aria-pressed="true"] {
    border-color: #33322e;
    box-shadow: inset 0 0 0 1px #33322e;
    font-weight: 700;
}

.colores button:focus-visible {
    outline: 3px solid #2f62ad;
    outline-offset: 3px;
}

.modo-camuflaje {
    min-height: 44px;
    padding: 8px 16px;
    border: 1px solid #969690;
    border-radius: 22px;
    background: #f5f4f0;
    color: #33322e;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.modo-camuflaje:hover {
    background: #fff;
}

.modo-camuflaje[aria-pressed="true"] {
    border-color: #33322e;
    box-shadow: inset 0 0 0 1px #33322e;
    font-weight: 700;
}

.modo-camuflaje:focus-visible {
    outline: 3px solid #2f62ad;
    outline-offset: 3px;
}

.a {
    position: absolute;
    left: calc(var(--x)*1cqw);
    top: calc(var(--y)*1cqw)
}

.tx {
    position: absolute;
    font-size: max(5.5px, .72cqw);
    line-height: 1;
    color: var(--tinta);
    white-space: nowrap;
    font-weight: 600;
    transform: translateX(-50%)
}

.bx {
    border: .1cqw solid var(--tinta);
    width: calc(var(--w)*1cqw);
    height: 1.15cqw;
    display: grid;
    place-items: center;
    font-size: max(6px, .86cqw);
    font-weight: 700;
    color: var(--tinta);
    line-height: 1
}

.inv {
    background: var(--tinta);
    color: var(--contraste);
    font-size: max(4.5px, .55cqw);
    font-weight: 700;
    padding: .15cqw .3cqw;
    line-height: 1;
    white-space: nowrap
}

/* Izquierda */
.topline {
    width: 76.8cqw;
    height: .12cqw;
    background: var(--linea)
}

.speaker {
    width: 19.4cqw;
    height: 20.7cqw;
    border-radius: .6cqw;
    padding: .5cqw;
    background: var(--altavoz);
    box-shadow: inset 0 .15cqw .3cqw rgba(0, 0, 0, .3), 0 .1cqw 0 #fff
}

.speaker i {
    display: block;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(180deg, var(--rejilla-sombra) 0 .3cqw, var(--rejilla-luz) .3cqw .42cqw, var(--rejilla) .42cqw .81cqw)
}

.led {
    width: 1.3cqw;
    height: .55cqw;
    border-radius: 50%;
    background: radial-gradient(#b48a9c, #8e6577);
    box-shadow: inset 0 0 .1cqw #000
}

.led.on {
    background: radial-gradient(#ffd0e8, #f26fb4 55%, #c23b86);
    box-shadow: 0 0 .8cqw #f45aa8, 0 0 .2cqw #ffb3dc
}

.brand {
    display: flex;
    align-items: baseline;
    gap: .9cqw;
    white-space: nowrap
}

.brand b {
    font: 900 2cqw/1 "Arial Black", "Helvetica Neue", Arial, sans-serif;
    color: var(--tinta);
    letter-spacing: -.02cqw
}

.brand em {
    font: 600 1.4cqw/1 "Helvetica Neue", Arial, sans-serif;
    font-style: normal;
    color: var(--modelo)
}

.concertmate .brand {
    flex-direction: column;
    align-items: flex-start;
    gap: .05cqw;
}

.concertmate .brand b {
    font-size: 1.55cqw;
    font-style: italic;
    letter-spacing: -.08cqw;
}

.concertmate .brand em {
    font-size: 1.15cqw;
}

.concertmate .speaker {
    border-radius: .25cqw;
}

.concertmate .speaker i {
    background: repeating-linear-gradient(180deg, var(--rejilla-sombra) 0 .22cqw, var(--rejilla-luz) .22cqw .34cqw, var(--rejilla) .34cqw .62cqw);
}

.concertmate .keys {
    background: #b7b2a4;
    border-radius: .15cqw;
}

.concertmate .w {
    background: linear-gradient(180deg, #f3f0e5 0, #eeeadd 85%, #dfdacb 100%);
    border-radius: 0 0 .2cqw .2cqw;
}

/* Franja acanalada y deslizadores */
.strip {
    width: 76.5cqw;
    height: 3.4cqw;
    border-radius: .3cqw;
    background: repeating-linear-gradient(90deg, var(--franja-sombra) 0 .12cqw, var(--franja-luz) .12cqw .26cqw);
    box-shadow: inset 0 .12cqw .2cqw rgba(0, 0, 0, .22), 0 .08cqw 0 #fff
}

.plate {
    background: var(--panel);
    border-radius: .3cqw;
    box-shadow: inset 0 .1cqw .15cqw rgba(0, 0, 0, .12)
}

.sl {
    cursor: pointer;
    height: 2.9cqw;
    touch-action: none;
    outline: none
}

.sl::after {
    content: "";
    position: absolute;
    inset: -.6cqw -.8cqw -1.2cqw
}

.slot {
    position: absolute;
    top: .8cqw;
    height: 1.2cqw;
    border-radius: .6cqw;
    background: #101010;
    box-shadow: inset 0 .12cqw .2cqw #000, 0 .08cqw 0 rgba(255, 255, 255, .9)
}

.knob {
    position: absolute;
    top: -.55cqw;
    width: 2.6cqw;
    height: 2.3cqw;
    cursor: grab;
    border-radius: .3cqw;
    background:
        repeating-linear-gradient(0deg, rgba(255, 255, 255, .16) 0 .1cqw, transparent .1cqw .3cqw) 0 .35cqw/100% 1.3cqw no-repeat,
        linear-gradient(180deg, #3d3d3f, #151516);
    box-shadow: 0 .25cqw .3cqw rgba(0, 0, 0, .5), inset .1cqw 0 .1cqw rgba(255, 255, 255, .22);
    transition: left .12s
}

.sl:hover .knob,
.sl.drag .knob {
    filter: brightness(1.4)
}

.sl.drag .knob {
    transition: none;
    cursor: grabbing
}

.sl:focus-visible {
    outline: .15cqw solid #2f62ad;
    outline-offset: .25cqw
}

.tip {
    position: absolute;
    left: 50%;
    bottom: calc(100% + .35cqw);
    transform: translateX(-50%);
    background: var(--tinta);
    color: var(--contraste);
    font-size: max(7px, .85cqw);
    font-weight: 700;
    padding: .25cqw .55cqw;
    border-radius: .3cqw;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .12s;
    z-index: 6
}

.sl:hover .tip,
.sl.drag .tip,
.sl.show .tip,
.sl:focus-visible .tip {
    opacity: 1
}

.op {
    cursor: pointer;
    z-index: 2
}

.tx.op {
    padding: .3cqw .4cqw;
    margin-top: -.3cqw
}

.op:hover {
    text-decoration: underline
}

.op.sel {
    color: var(--rojo)
}

.inv.op.sel {
    background: var(--rojo);
    color: var(--contraste)
}

.wedge {
    width: 4cqw;
    height: .85cqw;
    background: repeating-linear-gradient(90deg, var(--tinta) 0 .1cqw, transparent .1cqw .3cqw);
    clip-path: polygon(0 100%, 100% 100%, 100% 0)
}

/* Botones */
.bt {
    position: absolute;
    top: 1.1cqw;
    width: 3.6cqw;
    margin-left: -1.8cqw;
    left: calc(var(--x)*1cqw);
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer
}

.bt .lb {
    height: 1.5cqw;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    text-align: center;
    font-size: max(5.5px, .72cqw);
    line-height: 1;
    font-weight: 600;
    color: var(--tinta)
}

.bt .lb.big {
    height: 2.1cqw
}

.bt .dot {
    width: .28cqw;
    height: .28cqw;
    border-radius: 50%;
    background: var(--tinta);
    margin: .4cqw 0 .5cqw
}

.bt .dot.lit {
    background: #ff3b2a;
    box-shadow: 0 0 .6cqw #ff3b2a;
    width: .4cqw;
    height: .4cqw;
    margin: .34cqw 0 .44cqw
}

.bt .dot.h {
    display: none
}

.bt .lb.big+.dot+.cap {
    margin-top: .6cqw
}

.sq {
    width: 1.2cqw;
    height: 1.2cqw;
    background: var(--tinta);
    color: var(--contraste);
    font-size: max(5px, .7cqw);
    display: grid;
    place-items: center;
    border-radius: .1cqw
}

.cap {
    display: block;
    width: 1.2cqw;
    height: 2.3cqw;
    border-radius: .2cqw;
    background: var(--c);
    box-shadow: 0 .14cqw 0 rgba(0, 0, 0, .4), 0 0 0 .08cqw rgba(0, 0, 0, .28), inset 0 .1cqw .1cqw rgba(255, 255, 255, .55), inset 0 -.15cqw .15cqw rgba(0, 0, 0, .12);
    transition: transform .05s
}

.cap:active,
.bt:active .cap {
    transform: translateY(.12cqw);
    box-shadow: 0 .02cqw 0 rgba(0, 0, 0, .4), 0 0 0 .08cqw rgba(0, 0, 0, .28)
}

.okp {
    display: flex;
    gap: .7cqw;
    cursor: pointer
}

.okp .cap {
    width: 3.9cqw;
    height: 2.4cqw;
    border-radius: .3cqw;
    background: repeating-linear-gradient(180deg, rgba(0, 0, 0, .16) 0 .1cqw, transparent .1cqw .3cqw), var(--c)
}

.okp .cap:active {
    transform: translateY(.12cqw)
}

/* Ritmos impresos sobre las teclas */
.groove {
    width: 76.6cqw;
    height: .14cqw;
    background: var(--ranura);
    box-shadow: 0 .1cqw 0 #fff
}

.rl {
    width: 75.2cqw;
    height: 1.8cqw
}

.rl span {
    position: absolute;
    top: 0;
    left: calc((var(--i) + .5)*100%/17);
    transform: translateX(-50%);
    font-size: max(5.5px, .86cqw);
    font-weight: 600;
    color: var(--tinta);
    white-space: nowrap;
    padding-bottom: .6cqw
}

.rl span::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: .1cqw;
    height: .35cqw;
    background: var(--tinta)
}

.rl span.on {
    color: var(--rojo)
}

.rl span.on::after {
    background: var(--rojo);
    height: .55cqw;
    width: .16cqw
}

.emi {
    font-size: max(5px, .78cqw);
    letter-spacing: .03cqw;
    font-weight: 600;
    color: var(--tinta);
    white-space: nowrap
}

/* Teclado */
.keys {
    width: 75.2cqw;
    height: 14.8cqw;
    background: #bdbab0;
    border-radius: .3cqw;
    box-shadow: inset 0 .2cqw .3cqw rgba(0, 0, 0, .45), 0 .1cqw 0 #fff
}

.k {
    position: absolute;
    touch-action: none
}

.w {
    top: .15cqw;
    bottom: 0;
    z-index: 1;
    background: linear-gradient(180deg, #f7f5ec 0, #f3f0e6 85%, #e6e3d6 100%);
    border-right: .1cqw solid #a9a69b;
    border-radius: 0 0 .35cqw .35cqw;
    box-shadow: inset .12cqw 0 .15cqw rgba(255, 255, 255, .9), inset 0 -.5cqw .4cqw rgba(0, 0, 0, .06)
}

.w.on {
    background: linear-gradient(180deg, #d6d3c7, #e8e5d9);
    box-shadow: inset 0 .3cqw .4cqw rgba(0, 0, 0, .25);
    transform: translateY(.1cqw)
}

.bk {
    top: .15cqw;
    height: 53%;
    z-index: 2;
    border-radius: 0 0 .25cqw .25cqw;
    background: var(--tecla-alterada, linear-gradient(90deg, #3c3c3c 0 6%, #1a1a1a 6% 92%, #2b2b2b 92%));
    box-shadow: .12cqw .3cqw .35cqw rgba(0, 0, 0, .45), inset 0 -.3cqw .2cqw #000
}

.bk.on {
    filter: brightness(1.7);
    transform: translateY(.08cqw)
}

.lip {
    width: 73.3cqw;
    height: 1cqw;
    border-radius: .3cqw;
    background: linear-gradient(var(--labio-sombra), var(--labio-luz));
    box-shadow: inset 0 .1cqw .15cqw rgba(0, 0, 0, .18)
}

/* letras del teclado del PC (se muestran con el enlace del pie) */
.pt1:not(.hint) .k::before {
    display: none
}

.w::before,
.bk::before {
    content: attr(data-k);
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    font-size: max(6px, .9cqw);
    font-weight: 700;
    text-transform: uppercase
}

.w::before {
    bottom: 1.2cqw;
    color: #9d988a
}

.bk::before {
    bottom: .5cqw;
    color: var(--pista-alterada, #8d8b84)
}

.foot {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 1.2vh;
    text-align: center;
    font-size: 12px;
    color: #77766f
}

.foot u {
    cursor: pointer;
    color: #33322e
}