/* Grupo Simpatia de Comunicação · a turntable with one LP, its sleeve and a crate of singles */
:root {
  --ground: #19120f; --ground-2: #241a15; --ground-3: #2f231c;
  --walnut: #5b3a24; --walnut-d: #3f2717; --walnut-l: #7b5236;
  --vinyl: #111; --red: #d4121e; --red-d: #a50e18; --cream: #f2ead8; --cream-2: #e8dec6; --paper: #f7f1e3;
  --ink: #1d1611; --ink-2: #4b3e33; --mustard: #d9a521; --mustard-l: #ecc04a; --teal: #1f7a7a; --plum: #6b2d5c;
  --steel: #a9adb1; --steel-d: #7d8186; --steel-l: #d3d6d9; --text: #efe6d2; --text-2: #c9bda5;
  --e-out: cubic-bezier(.16, 1, .3, 1); --e-q: cubic-bezier(.25, 1, .5, 1); --e-io: cubic-bezier(.87, 0, .13, 1);
  --fd: 'Funnel Display', 'Arial Narrow', Arial, sans-serif; --fs: 'Funnel Sans', 'Segoe UI', Arial, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; color: var(--text); font: 400 16px/1.55 var(--fs); position: relative; min-height: 100vh;
  background: radial-gradient(ellipse 70% 55% at 30% 18%, #33251c 0%, rgba(51, 37, 28, 0) 70%), radial-gradient(ellipse 50% 60% at 92% 40%, #2a1e17 0%, rgba(42, 30, 23, 0) 70%), var(--ground); }
::selection { background: var(--mustard); color: var(--ink); }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2.5px solid var(--mustard-l); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

.room { max-width: 1480px; margin: 0 auto; padding: 16px 32px 34px; display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 36px; align-items: start; }

/* ---------- the plinth ---------- */
.deck { min-width: 0; }
.plinth { position: relative; border-radius: 18px; padding: 12px 18px 0; overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 228, 196, .07), rgba(0, 0, 0, .16) 70%, rgba(0, 0, 0, .28)),
    repeating-linear-gradient(91deg, rgba(0, 0, 0, 0) 0 6px, rgba(30, 14, 4, .10) 6px 8px, rgba(255, 214, 170, .035) 8px 15px, rgba(0, 0, 0, 0) 15px 22px),
    repeating-linear-gradient(89.3deg, rgba(36, 18, 6, .22) 0 1px, rgba(0, 0, 0, 0) 1px 37px),
    radial-gradient(ellipse 30% 9% at 22% 70%, rgba(36, 18, 6, .35), rgba(0, 0, 0, 0) 70%),
    radial-gradient(ellipse 22% 7% at 78% 30%, rgba(255, 214, 170, .08), rgba(0, 0, 0, 0) 70%),
    linear-gradient(90deg, #593823 0%, #6b442a 22%, #573621 45%, #684129 68%, #5b3a24 86%, #4f311e 100%);
  box-shadow: inset 0 1px 0 rgba(255, 226, 190, .22), inset 0 0 0 1px rgba(20, 10, 4, .5), 0 2px 0 #2b1a10, 0 34px 60px -24px rgba(0, 0, 0, .9), 0 8px 18px rgba(0, 0, 0, .45); }
.tt-wrap { position: relative; }
.tt-wrap::after { content: ''; position: absolute; left: 4.667%; top: 4.459%; width: 64%; height: 91.72%; border-radius: 50%; pointer-events: none; mix-blend-mode: screen;
  background: conic-gradient(from 18deg, rgba(255, 255, 255, 0) 0deg, rgba(255, 246, 225, .16) 22deg, rgba(255, 255, 255, 0) 46deg 168deg, rgba(255, 246, 225, .11) 200deg, rgba(255, 255, 255, 0) 228deg 360deg);
  -webkit-mask: radial-gradient(circle, transparent 0 31.6%, #000 33% 98.6%, transparent 99.4%); mask: radial-gradient(circle, transparent 0 31.6%, #000 33% 98.6%, transparent 99.4%); }
#tt { display: block; width: 100%; height: auto; overflow: visible; touch-action: none; user-select: none; -webkit-user-select: none; }
#tt .band { fill: rgba(0, 0, 0, 0); cursor: pointer; transition: fill .45s var(--e-q); outline: none; }
#tt .band.pv { fill: rgba(242, 234, 216, .075); }
#tt .band.hot { fill: rgba(217, 165, 33, .24); stroke: rgba(236, 192, 74, .75); stroke-width: 1.1; }
#tt .band:focus-visible { stroke: var(--mustard-l); stroke-width: 2.4; }
#tt .armhit { cursor: grab; pointer-events: stroke; outline: none; }
#tt .armhit:focus-visible { stroke: rgba(236, 192, 74, .35); }
#tt.dragging .armhit { cursor: grabbing; }
#tt .arm { filter: drop-shadow(4px 7px 3px rgba(10, 4, 0, .55)); transition: filter .35s var(--e-q); }
#tt .arm.up { filter: drop-shadow(14px 22px 9px rgba(10, 4, 0, .42)); }
#tt .lbl-ring { font: 600 10.6px var(--fs); letter-spacing: 1.55px; }
#tt .lbl-side { font: 800 50px var(--fd); letter-spacing: -1px; }
#tt .lbl-sm { font: 600 9.5px var(--fs); letter-spacing: 1.6px; }
#tt .lbl-md { font: 700 16px var(--fd); letter-spacing: -.2px; }
.flip-g { transform-box: view-box; transform-origin: 330px 322px; }
.flip-g.flipping { animation: flipRec .8s var(--e-io) both; }
@keyframes flipRec { 0% { transform: scale(1, 1); } 45% { transform: scale(.02, .94); } 55% { transform: scale(.02, .94); } 100% { transform: scale(1, 1); } }

/* the bay below the platter: where the obi lies; controls to the right, under the arm */
.bay { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: end; padding: 0 2px 12px; min-height: 120px; }
.obi-bay { min-height: 110px; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; padding: 0 0 2px 10px; }
.side-ind { margin: 0; font: 700 20px/1.1 var(--fd); color: var(--mustard-l); letter-spacing: -.01em; text-shadow: 0 1px 0 rgba(0, 0, 0, .45); }
.hint { margin: 0; max-width: 46ch; font-size: 15px; line-height: 1.45; color: #f0e4cc; text-shadow: 0 1px 0 rgba(0, 0, 0, .5); }
.controls { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.speed, .cue { display: flex; flex-direction: row; align-items: center; gap: 12px; }
.speed .eng, .cue .eng { text-align: right; }
.eng { font: 600 12px/1 var(--fs); letter-spacing: .14em; text-transform: uppercase; color: #f0e4cc; text-shadow: 0 1px 0 rgba(0, 0, 0, .55); }
.keys { display: flex; gap: 6px; }
.key { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 14px; border: 0; border-radius: 6px; cursor: pointer; text-decoration: none;
  font: 700 16px/1 var(--fs); color: #17130f; letter-spacing: .01em;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .10) 0 1px, rgba(255, 255, 255, 0) 1px 3px), linear-gradient(180deg, #dfe2e4, #b3b7bb 55%, #9a9ea3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 -2px 0 rgba(0, 0, 0, .22), 0 3px 0 #2a1a10, 0 6px 10px -2px rgba(0, 0, 0, .6);
  transition: transform .18s var(--e-q), box-shadow .18s var(--e-q); }
.key:hover { transform: translateY(1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 -2px 0 rgba(0, 0, 0, .22), 0 2px 0 #2a1a10, 0 4px 8px -2px rgba(0, 0, 0, .6); }
.key:active { transform: translateY(3px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 2px 4px rgba(0, 0, 0, .25), 0 0 0 #2a1a10; }
.key:disabled { cursor: default; color: #5d5a57; transform: none; }
.key.spd { font: 700 19px/1 var(--fs); font-variant-numeric: tabular-nums; padding: 0 14px 0 12px; }
.key.spd i { width: 8px; height: 8px; border-radius: 50%; background: #5a1015; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .6); transition: background .2s var(--e-q), box-shadow .2s var(--e-q); }
.key.spd:hover i, .key.spd:focus-visible i { background: #ff3b45; box-shadow: 0 0 8px 2px rgba(255, 59, 69, .65); }

/* the front fascia: brushed steel, with a black display window */
.fascia { margin: 0 -18px; padding: 10px 18px 11px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: center;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .09) 0 1px, rgba(255, 255, 255, 0) 1px 3px, rgba(0, 0, 0, .03) 3px 4px), linear-gradient(180deg, #cfd2d5 0%, #b1b5b9 40%, #9b9fa4 100%);
  border-top: 1px solid rgba(255, 255, 255, .55); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .25), 0 -2px 0 rgba(20, 10, 4, .5); color: var(--ink); }
.badge { height: 46px; width: auto; display: block; }
.display { min-height: 86px; padding: 10px 18px 11px; border-radius: 7px; background: radial-gradient(ellipse 80% 120% at 30% 0%, #1c1916, #0d0b0a 70%); color: var(--cream);
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, .85), inset 0 0 0 1px rgba(0, 0, 0, .9), 0 1px 0 rgba(255, 255, 255, .55); }
.display p { margin: 0; }
.display .k { font: 600 12px/1.3 var(--fs); letter-spacing: .12em; text-transform: uppercase; color: var(--mustard-l); }
.display .t { margin-top: 4px; font: 600 21px/1.22 var(--fd); letter-spacing: -.01em; color: #f6efdf; text-wrap: balance; }
.display .t.ex { color: #d8ccb2; font-style: normal; }
.display .m { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline; font-size: 14px; color: #cfc3aa; }
.display .m .d { font-variant-numeric: tabular-nums; color: #efe6d2; font-weight: 600; }
.display .m .ptn { font-style: italic; }
.display .m a { color: var(--mustard-l); font-weight: 600; text-underline-offset: 3px; }
.display.on .t { animation: glowIn .7s var(--e-out) both; }
.display.pv .t { color: #e2d6bd; }
@keyframes glowIn { from { opacity: 0; transform: translateY(5px); filter: blur(2px); } to { opacity: 1; transform: none; filter: none; } }
.lang { display: flex; border-radius: 6px; overflow: hidden; box-shadow: 0 2px 0 rgba(20, 10, 4, .55), inset 0 0 0 1px rgba(0, 0, 0, .35); }
.lang button { border: 0; padding: 10px 11px; cursor: pointer; font: 700 13px/1 var(--fs); letter-spacing: .08em; color: #1d1611; background: linear-gradient(180deg, #e3e5e7, #b6babe); }
.lang button[aria-pressed="true"] { background: linear-gradient(180deg, #2a2420, #15110e); color: var(--mustard-l); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .7); }

/* the track list (tablet and phone) */
.tracklist { display: none; margin-top: 18px; }
.tl-h { margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.tl-h > span:first-child { font: 700 20px/1.2 var(--fd); color: var(--mustard-l); }
.tl-n { font-size: 14px; color: var(--text-2); }
.tracklist ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(239, 230, 210, .16); }
.tracklist li { border-bottom: 1px solid rgba(239, 230, 210, .16); }
.tracklist button { width: 100%; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 12px 4px; border: 0; background: none; text-align: left; cursor: pointer; color: var(--text); }
.tracklist .n { font: 700 16px/1 var(--fd); color: var(--text-2); font-variant-numeric: tabular-nums; }
.tracklist .tt { font-size: 16px; line-height: 1.35; }
.tracklist .dd { font-size: 14px; color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tracklist button.on { background: linear-gradient(90deg, rgba(217, 165, 33, .16), rgba(217, 165, 33, 0)); }
.tracklist button.on .n { color: var(--mustard-l); }

/* ---------- the side: sleeve and crate ---------- */
.side { position: relative; min-width: 0; display: flex; flex-direction: column; gap: 26px; }
.tabs { display: none; }
.sleeve { position: relative; aspect-ratio: 1 / 1; overflow: hidden; padding: 26px 26px 24px; color: var(--ink); border-radius: 3px;
  background: radial-gradient(circle at 58% 54%, rgba(0, 0, 0, 0) 0 41%, rgba(80, 60, 30, .07) 42.4%, rgba(0, 0, 0, 0) 44%), linear-gradient(135deg, #f6efde, #efe5cf 60%, #e8dcc2);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .4) inset, 0 0 0 1px rgba(60, 40, 20, .25), 0 28px 50px -22px rgba(0, 0, 0, .9), 0 6px 14px rgba(0, 0, 0, .4);
  transform: rotate(-1.2deg); }
.sleeve h1 { position: relative; z-index: 2; margin: 0; display: flex; flex-direction: column; font-family: var(--fd); line-height: .9; letter-spacing: -.035em; }
.sleeve .g1 { font-size: 30px; font-weight: 700; }
.sleeve .g2 { font-size: 92px; font-weight: 800; color: var(--red); margin-left: -4px; }
.sleeve .g3 { font-size: 30px; font-weight: 700; margin-top: 4px; }
.sl-brands { position: relative; z-index: 2; margin: 12px 0 0; max-width: 23ch; font: 600 15px/1.35 var(--fs); color: var(--ink-2); }
.sl-disc { --D: 330px; --o: 104px; position: absolute; z-index: 1; right: 0; bottom: 0; width: calc(var(--D) - var(--o)); height: calc(var(--D) - var(--o)); display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: repeating-radial-gradient(circle at calc(var(--D) / 2) calc(var(--D) / 2), rgba(242, 234, 216, 0) 0 9px, rgba(242, 234, 216, .16) 9px 10px), var(--red);
  -webkit-mask: radial-gradient(circle calc(var(--D) / 2) at calc(var(--D) / 2) calc(var(--D) / 2), #000 99.4%, transparent 100%); mask: radial-gradient(circle calc(var(--D) / 2) at calc(var(--D) / 2) calc(var(--D) / 2), #000 99.4%, transparent 100%); }
.sl-disc span { font: 800 56px/.92 var(--fd); letter-spacing: -.04em; color: var(--cream); }
.sl-disc span + span { color: #1d1611; }
.sl-sides { position: absolute; z-index: 2; left: 26px; bottom: 22px; max-width: 172px; display: flex; flex-direction: column; gap: 3px; }
.sl-sides p { margin: 0; font-size: 15px; line-height: 1.3; }
.sl-sides b { font-family: var(--fd); font-weight: 800; }
.sl-moto { margin-top: 8px !important; font-size: 14px !important; color: var(--ink-2); max-width: 20ch; }
.turn { position: absolute; z-index: 3; right: 0; top: 0; display: inline-flex; gap: 8px; align-items: center; padding: 12px 16px 12px 18px; border: 0; cursor: pointer;
  font: 700 14px/1 var(--fs); letter-spacing: .02em; color: var(--cream); background: var(--ink); border-radius: 0 3px 0 10px; transition: background .2s var(--e-q); }
.turn i { font-style: normal; font-size: 17px; transition: transform .5s var(--e-out); }
.turn:hover { background: #3a2c22; } .turn:hover i { transform: rotate(180deg); }

/* the crate of singles, seen from the front: each sleeve behind stands a little higher */
.crate { position: relative; height: 372px; clip-path: inset(-70px -30px 0 -30px); }
.singles { position: absolute; inset: 0 0 0 0; }
.single { position: absolute; display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; left: 12px; right: 12px; top: calc(var(--i) * 40px); height: 250px; z-index: var(--i); padding: 0; border: 0; cursor: pointer; text-align: left; color: var(--ink);
  background: linear-gradient(180deg, rgba(255, 255, 255, .25), rgba(0, 0, 0, 0) 30%), var(--cream-2); border-radius: 2px 2px 0 0;
  box-shadow: 0 -1px 0 rgba(255, 255, 255, .5) inset, 0 -6px 14px -6px rgba(0, 0, 0, .55); transform: rotate(var(--tilt)); transform-origin: 50% 100%;
  transition: transform .45s var(--e-out), box-shadow .45s var(--e-out); }
.single:nth-child(2) { background-color: #efe3c9; } .single:nth-child(3) { background-color: #e2d6bd; } .single:nth-child(4) { background-color: #f1e9d6; } .single:nth-child(5) { background-color: #e6d8b9; } .single:nth-child(6) { background-color: #ece4d2; }
.single:hover, .single:focus-visible { transform: rotate(var(--tilt)) translateY(-14px); }
.single.out { transform: translateY(-34px); box-shadow: 0 0 0 2px var(--mustard), 0 -10px 24px -6px rgba(0, 0, 0, .6); }
.sl-top { flex: none; display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 10px; align-items: center; height: 40px; padding: 0 12px; border-bottom: 1px dashed rgba(29, 22, 17, .18); }
.chip { width: 14px; height: 14px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1px rgba(29, 22, 17, .35); }
.sl-top .nm { font: 700 15.5px/1.02 var(--fd); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.sl-top .pr { font: 600 13px/1.1 var(--fs); white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.sl-top .pr em { display: block; font-style: normal; font-weight: 500; font-size: 11px; color: var(--ink-2); }
.sl-lbl { position: absolute; left: 50%; top: 56px; width: 118px; height: 118px; margin-left: -59px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: radial-gradient(circle, #e8dec6 0 5px, var(--c) 5.5px 100%); color: var(--k); box-shadow: 0 0 0 16px #141414, 0 0 0 17px rgba(0, 0, 0, .5); }
.sl-lbl span { font: 800 16px/1 var(--fd); letter-spacing: -.01em; } .sl-lbl span + span { font: 600 12px/1 var(--fs); letter-spacing: .08em; text-transform: uppercase; margin-top: 30px; }
.crate-front { position: absolute; z-index: 10; left: 0; right: 0; bottom: 0; height: 126px; padding: 18px 22px 0; border-radius: 4px 4px 8px 8px;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0) 0 40px, rgba(20, 10, 4, .55) 40px 42px, rgba(255, 220, 180, .08) 42px 43px), repeating-linear-gradient(90.5deg, rgba(30, 14, 4, .14) 0 1px, rgba(0, 0, 0, 0) 1px 19px), linear-gradient(180deg, #6e472d, #4e301c);
  box-shadow: inset 0 2px 0 rgba(255, 220, 180, .25), inset 0 0 0 1px rgba(20, 10, 4, .6), 0 22px 30px -16px rgba(0, 0, 0, .9); color: #f4e9d2; }
.crate-front::before { content: ''; position: absolute; right: 22px; top: 18px; width: 86px; height: 24px; border-radius: 12px; background: #1b110b; box-shadow: inset 0 3px 6px rgba(0, 0, 0, .8), 0 1px 0 rgba(255, 220, 180, .2); }
.crate-front b { display: block; font: 800 30px/1 var(--fd); letter-spacing: .06em; text-transform: uppercase; color: #f4e9d2; text-shadow: 0 2px 0 rgba(0, 0, 0, .35); }
.crate-front span { display: block; margin-top: 8px; max-width: 32ch; font-size: 14.5px; line-height: 1.35; color: #f1e5cb; }
.inner-tab { align-self: flex-start; margin-top: -8px; display: inline-flex; gap: 10px; align-items: center; padding: 12px 18px 12px 16px; border: 0; cursor: pointer; color: var(--ink); border-radius: 2px;
  background: linear-gradient(180deg, #fbf7ec, #efe7d5); box-shadow: 0 0 0 1px rgba(29, 22, 17, .25), 0 10px 18px -8px rgba(0, 0, 0, .8); font: 600 15px/1 var(--fs); transition: transform .3s var(--e-out); }
.inner-tab:hover { transform: translateY(-2px); }
.inner-tab b { min-width: 26px; height: 26px; padding: 0 6px; display: inline-grid; place-items: center; border-radius: 13px; background: var(--red); color: var(--cream); font: 700 14px/1 var(--fs); }
.inner-tab.bump b { animation: bump .6s var(--e-out); }
@keyframes bump { 30% { transform: scale(1.35); } }

/* the pulled-out single with its insert card, and the inner sleeve: over the side column */
.ficha, .inner { position: absolute; z-index: 30; inset: 0 0 auto 0; min-height: 100%; color: var(--ink); border-radius: 3px; padding: 24px 26px 26px;
  box-shadow: 0 0 0 1px rgba(29, 22, 17, .3), 0 40px 70px -26px rgba(0, 0, 0, .95), 0 8px 20px rgba(0, 0, 0, .45); }
.ficha { background: linear-gradient(180deg, #f7f0e0, #efe5cf); }
.ficha.in, .inner.in { animation: slideOut .65s var(--e-out) both; }
@keyframes slideOut { from { opacity: 0; transform: translateY(46px); } to { opacity: 1; transform: none; } }
.x { position: absolute; top: 10px; right: 12px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(29, 22, 17, .08); color: var(--ink); font: 400 26px/1 var(--fs); cursor: pointer; z-index: 3; }
.x:hover { background: rgba(29, 22, 17, .16); }
.art { position: relative; height: 196px; margin: 4px 0 18px; }
.psl { position: absolute; left: 0; top: 0; width: 196px; height: 196px; z-index: 2; padding: 16px; display: flex; flex-direction: column; justify-content: space-between; border-radius: 2px;
  background: radial-gradient(circle, rgba(0, 0, 0, 0) 0 30%, rgba(0, 0, 0, 0) 30%), linear-gradient(135deg, #2a201a, #15100c); color: var(--cream); box-shadow: 0 16px 26px -12px rgba(0, 0, 0, .8); }
.psl-t { font: 800 34px/1 var(--fd); letter-spacing: -.03em; color: var(--cream); }
.psl-s { font: 600 12px/1.3 var(--fs); letter-spacing: .06em; color: #e1d5bb; }
.vinyl { position: absolute; left: 0; top: 2px; width: 192px; height: 192px; border-radius: 50%; z-index: 1; display: grid; place-items: center;
  background: repeating-radial-gradient(circle, #131313 0 2px, #1c1c1c 2px 3px); box-shadow: 0 10px 20px -8px rgba(0, 0, 0, .8); transform: translateX(162px) rotate(0deg); }
.ficha.in .vinyl { animation: pull 1.1s var(--e-out) .1s both; }
@keyframes pull { from { transform: translateX(0) rotate(-40deg); } to { transform: translateX(162px) rotate(0deg); } }
.vl { width: 96px; height: 96px; border-radius: 50%; background: radial-gradient(circle, #e8dec6 0 4px, var(--c) 4.5px 100%); color: var(--k); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; text-align: center; }
.vl b { font: 700 12.5px/1 var(--fs); letter-spacing: -.01em; } .vl i { font: 600 10px/1 var(--fs); font-style: normal; letter-spacing: .08em; text-transform: uppercase; }
.fk { margin: 0; font: 600 12px/1.3 var(--fs); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.ficha h2 { margin: 4px 0 14px; font: 800 30px/1.02 var(--fd); letter-spacing: -.03em; text-wrap: balance; }
.ficha dl { margin: 0; display: grid; gap: 10px; }
.ficha dl div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; padding-top: 10px; border-top: 1px solid rgba(29, 22, 17, .14); }
.ficha dt { font: 600 12px/1.4 var(--fs); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); padding-top: 2px; }
.ficha dd { margin: 0; font-size: 15px; line-height: 1.5; }
.ficha dd a { color: var(--red-d); font-weight: 600; }
.mk { display: inline-block; padding: 1px 7px; border: 1px solid currentColor; border-radius: 3px; font: 600 12px/1.5 var(--fs); letter-spacing: .03em; color: #8a1a0e; white-space: nowrap; }
.price { margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; padding-top: 14px; border-top: 2px solid var(--ink); }
.price b { font: 700 28px/1 var(--fs); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.f-acts, .acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.f-acts button, .acts button, .acts .call { display: inline-flex; align-items: center; min-height: 46px; padding: 0 18px; border-radius: 4px; border: 1.5px solid var(--ink); background: transparent; color: var(--ink); cursor: pointer; text-decoration: none;
  font: 700 15px/1 var(--fs); transition: background .2s var(--e-q), transform .2s var(--e-q); }
.f-acts .pr, .acts .pr { background: var(--ink); color: var(--cream); }
.f-acts .pr:hover, .acts .pr:hover { background: #3a2c22; }
.f-acts button:not(.pr):hover, .acts button:not(.pr):hover, .acts .call:hover { background: rgba(29, 22, 17, .08); }
.f-nav { margin: 16px 0 0; display: flex; justify-content: space-between; gap: 10px; }
.f-nav button { border: 0; background: none; padding: 6px 0; cursor: pointer; font-size: 14px; color: var(--ink-2); text-align: left; max-width: 48%; }
.f-nav button + button { text-align: right; }
.f-nav button:hover { color: var(--ink); text-decoration: underline; }

.inner { background: #fbf8f0; padding-top: 58px; }
.inner::before { content: ''; position: absolute; left: 50%; top: -1px; width: 96px; height: 48px; margin-left: -48px; border-radius: 0 0 48px 48px; background: var(--ground-2); box-shadow: inset 0 -1px 0 rgba(29, 22, 17, .25); }
.inner h2 { margin: 0; font: 800 30px/1 var(--fd); letter-spacing: -.03em; }
.in-sub { margin: 8px 0 14px; font-size: 15px; color: var(--ink-2); }
.sep { list-style: none; margin: 0 0 14px; padding: 0; border-top: 1px solid rgba(29, 22, 17, .18); }
.sep li { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto 32px; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid rgba(29, 22, 17, .18); font-size: 15px; }
.sep li.none { display: block; color: var(--ink-2); }
.sep .nm { font-weight: 600; line-height: 1.3; }
.sep .pr { font-size: 14px; text-align: right; font-variant-numeric: tabular-nums; }
.sep .pr em { display: block; font-style: normal; font-size: 12px; color: #8a1a0e; }
.sep .rm { width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgba(29, 22, 17, .07); cursor: pointer; font-size: 18px; }
.sent-note { margin: 0 0 14px; padding: 12px 14px; border-left: 4px solid var(--teal); background: rgba(31, 122, 122, .1); font-size: 15px; }
.sent-note b { display: block; font-family: var(--fd); font-size: 18px; }
#reqForm { display: grid; gap: 10px; }
.fld label { display: block; margin-bottom: 4px; font: 600 12px/1.3 var(--fs); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.fld input, .fld textarea { width: 100%; padding: 11px 12px; font: 400 16px/1.4 var(--fs); color: var(--ink); background: #fff; border: 1px solid rgba(29, 22, 17, .35); border-radius: 4px; }
.fld input:focus, .fld textarea:focus { outline: 2px solid var(--teal); outline-offset: 1px; border-color: var(--teal); }
.fld textarea { resize: vertical; min-height: 78px; }
.fld ::placeholder { color: #857868; }
.rule { margin: 4px 0 0; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.status { margin: 0; min-height: 0; font-weight: 600; color: #8a1a0e; font-size: 15px; }
.status:empty { display: none; }
.inner .acts { margin-top: 2px; }
.inner .lead-note { margin-top: 2px; }

/* ---------- the back of the sleeve, picked up and turned over ---------- */
.verso { position: fixed; inset: 0; z-index: 9990; display: grid; place-items: center; padding: 24px; background: rgba(12, 8, 6, .74); perspective: 1600px; overflow: auto; }
.vcard { position: relative; width: min(760px, 100%); max-height: calc(100vh - 48px); overflow: auto; padding: 34px 38px 28px; color: var(--ink); border-radius: 3px;
  background: radial-gradient(circle at 50% 52%, rgba(0, 0, 0, 0) 0 40%, rgba(80, 60, 30, .06) 41.5%, rgba(0, 0, 0, 0) 43%), linear-gradient(135deg, #f6efde, #ede2cb);
  box-shadow: 0 50px 90px -30px rgba(0, 0, 0, .95), 0 0 0 1px rgba(60, 40, 20, .25); }
.verso.in .vcard { animation: turnOver .9s var(--e-out) both; transform-origin: 50% 50%; }
@keyframes turnOver { from { opacity: 0; transform: rotateY(-100deg) scale(.7); } to { opacity: 1; transform: none; } }
.bk-k { margin: 0; font: 600 12px/1.3 var(--fs); letter-spacing: .14em; text-transform: uppercase; color: var(--red-d); }
.bk-h h2 { margin: 2px 0 18px; font: 800 44px/1 var(--fd); letter-spacing: -.035em; }
.bk-cols { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 30px; }
.notes { list-style: none; margin: 0; padding: 0; }
.notes li { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 12px; padding: 8px 0; border-top: 1px solid rgba(29, 22, 17, .16); font-size: 15px; line-height: 1.45; }
.notes b { font: 800 20px/1.1 var(--fd); color: var(--red); font-variant-numeric: tabular-nums; }
.bk-side section { padding: 8px 0 12px; border-top: 1px solid rgba(29, 22, 17, .16); }
.bk-side h3 { margin: 0 0 6px; font: 700 18px/1.2 var(--fd); letter-spacing: -.01em; }
.bk-side p { margin: 0; font-size: 15px; line-height: 1.45; }
.abc-l { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 8px; align-items: baseline; }
.abc-l b { font: 800 24px/1 var(--fd); color: var(--red); }
.secs { line-height: 1.6 !important; }
.bk-small { margin-top: 4px !important; font-size: 14px !important; color: var(--ink-2); }
.bk-foot { margin: 18px 0 0; padding-top: 12px; border-top: 2px solid var(--ink); font-size: 14px; line-height: 1.5; color: var(--ink-2); }

/* ---------- the rating plate with the small print ---------- */
.plate { max-width: 1480px; margin: 0 auto; padding: 0 32px 40px; }
.plate-in { position: relative; padding: 18px 54px 16px; border-radius: 6px; color: #17130f;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .10) 0 1px, rgba(255, 255, 255, 0) 1px 3px), linear-gradient(180deg, #c9ccd0, #a9adb1 60%, #9a9ea2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 0 0 1px rgba(0, 0, 0, .25), 0 8px 18px -8px rgba(0, 0, 0, .8); }
.plate-in::before, .plate-in::after { content: ''; position: absolute; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%;
  background: linear-gradient(35deg, rgba(0, 0, 0, 0) 44%, #3f4246 44% 56%, rgba(0, 0, 0, 0) 56%), radial-gradient(circle at 35% 35%, #eef0f1, #8c9095 70%); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .3); }
.plate-in::before { left: 20px; } .plate-in::after { right: 20px; transform: rotate(60deg); }
.pl-h { margin: 0 0 10px; display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; font: 800 20px/1.1 var(--fd); letter-spacing: -.01em; }
.pl-k { font: 600 12px/1 var(--fs); letter-spacing: .14em; text-transform: uppercase; color: #2c2620; }
.plate dl { margin: 0; display: grid; grid-template-columns: repeat(5, auto); gap: 8px 28px; justify-content: start; }
.plate dl div { min-width: 0; }
.plate dt { font: 600 11.5px/1.3 var(--fs); letter-spacing: .12em; text-transform: uppercase; color: #2c2620; }
.plate dd { margin: 2px 0 0; font-size: 14.5px; line-height: 1.45; overflow-wrap: anywhere; }
.plate a { color: #17130f; text-underline-offset: 2px; }
.pl-note { margin: 12px 0 0; font-size: 13.5px; line-height: 1.45; color: #221d18; max-width: 110ch; }
.legal { margin: 8px 0 0; font-size: 14px; }

/* ---------- motion preferences and review mode ---------- */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }
html.static *, html.static *::before, html.static *::after { transition: none !important; animation: none !important; }

@media (max-width: 1360px) and (min-width: 1100px) { .sl-top .nm { font-size: 15px; } .room { grid-template-columns: minmax(0, 1fr) 390px; gap: 30px; } .sleeve .g2 { font-size: 80px; } .sleeve .g1, .sleeve .g3 { font-size: 27px; } .sl-disc { --D: 300px; --o: 100px; } .sl-disc span { font-size: 50px; } }
/* ---------- tablet: one column, the band list appears ---------- */
@media (max-width: 1099px) {
  .room { grid-template-columns: minmax(0, 1fr); gap: 30px; padding: 18px 22px 30px; }
  .tracklist { display: block; }
  .side { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
  .ficha, .inner { position: fixed; inset: auto 0 0 0; min-height: 0; max-height: 88vh; overflow: auto; border-radius: 14px 14px 0 0; width: min(640px, 100%); margin: 0 auto; }
  body.sheet-open::after { content: ''; position: fixed; inset: 0; z-index: 25; background: rgba(12, 8, 6, .6); }
  .inner::before { background: #19120f; }
  .plate dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plate { padding: 0 22px 34px; }
}
/* ---------- phone ---------- */
@media (max-width: 699px) {
  .room { padding: 12px 12px 26px; gap: 24px; }
  .plinth { padding: 8px 10px 0; border-radius: 12px; }
  .bay { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 6px 0 12px; min-height: 0; }
  .obi-bay { min-height: 0; padding: 0 2px; }
  .side-ind { font-size: 18px; }
  .hint { font-size: 14.5px; }
  .controls { align-items: stretch; gap: 10px; }
  .speed, .cue { justify-content: space-between; }
  .key { min-height: 44px; padding: 0 12px; font-size: 15px; }
  .key.spd { font-size: 17px; }
  .fascia { margin: 0 -10px; padding: 10px; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
  .badge { height: 38px; }
  .display { grid-column: 1 / -1; grid-row: 2; min-height: 0; padding: 10px 12px; }
  .display .t { font-size: 18px; }
  .side { display: block; }
  .tabs { display: flex; gap: 0; margin: 0 0 16px; border-radius: 6px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(239, 230, 210, .3); }
  .tabs button { flex: 1; min-height: 46px; border: 0; background: transparent; cursor: pointer; font: 600 15px/1.2 var(--fs); color: var(--text); padding: 0 8px; }
  .tabs button[aria-selected="true"] { background: var(--cream); color: var(--ink); }
  .side[data-tab="capa"] .pane-crate, .side[data-tab="compactos"] .pane-capa { display: none; }
  .pane-crate { display: flex; flex-direction: column; gap: 18px; }
  .sleeve { aspect-ratio: auto; min-height: 92vw; transform: none; padding: 22px 20px 20px; }
  .sleeve .g2 { font-size: clamp(60px, 21vw, 92px); }
  .sleeve .g1, .sleeve .g3 { font-size: clamp(22px, 7.4vw, 30px); }
  .sl-disc { --D: 58vw; --o: 17vw; }
  .sl-sides { position: relative; left: auto; bottom: auto; margin-top: 26px; max-width: 46vw; }
  .sl-disc span { font-size: clamp(34px, 12vw, 56px); }
  .crate { height: 372px; }
  .single { left: 4px; right: 4px; }
  .sl-top { grid-template-columns: 14px minmax(0, 1fr) auto; gap: 8px; padding: 0 10px; }
  .sl-top .nm { font-size: 15px; }
  .crate-front { padding: 16px 16px 0; }
  .crate-front::before { display: none; }
  .crate-front b { font-size: 26px; }
  .ficha, .inner { padding: 22px 18px 24px; border-radius: 14px 14px 0 0; }
  .inner { padding-top: 56px; }
  .ficha dl div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .ficha h2, .inner h2 { font-size: 26px; }
  .art { height: 160px; } .psl { width: 160px; height: 160px; } .vinyl { width: 156px; height: 156px; transform: translateX(140px); }
  @keyframes pull { from { transform: translateX(0) rotate(-40deg); } to { transform: translateX(140px) rotate(0deg); } }
  .psl-t { font-size: 28px; }
  .verso { padding: 0; place-items: end center; }
  .vcard { width: 100%; max-height: 92vh; padding: 28px 18px 22px; border-radius: 14px 14px 0 0; }
  .bk-h h2 { font-size: 34px; }
  .bk-cols { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .plate { padding: 0 12px 28px; }
  .plate-in { padding: 16px 18px 14px 18px; }
  .plate-in::before, .plate-in::after { display: none; }
  .plate dl { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- legal pages: a liner-notes sheet on the dark ground ---------- */
.legal-top { max-width: 900px; margin: 0 auto; padding: 22px 24px 14px; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.legal-top img { height: 44px; width: auto; display: block; }
.legal-top .back { font: 600 15px/1.2 var(--fs); color: var(--mustard-l); text-underline-offset: 3px; }
.legal-sheet { display: block; max-width: 900px; margin: 0 auto 40px; padding: 34px 40px 40px; background: linear-gradient(135deg, #f6efde, #ede2cb); color: var(--ink); border-radius: 3px; font-size: 16px; line-height: 1.6; overflow-wrap: anywhere;
  box-shadow: 0 0 0 1px rgba(60, 40, 20, .25), 0 30px 60px -26px rgba(0, 0, 0, .9); }
.legal-sheet h1 { font: 800 40px/1.05 var(--fd); letter-spacing: -.03em; margin: 10px 0 14px; }
.legal-sheet h2 { font: 700 22px/1.2 var(--fd); margin: 26px 0 8px; }
.legal-sheet h3 { font: 700 18px/1.25 var(--fd); margin: 18px 0 6px; }
.legal-sheet a { color: #8a1a0e; text-underline-offset: 2px; }
.legal-sheet button { font: 600 15px/1 var(--fs); }
@media (max-width: 699px) { .legal-sheet { margin: 0 0 28px; padding: 24px 18px 28px; border-radius: 0; } .legal-sheet h1 { font-size: 30px; } .legal-top { padding: 16px 16px 12px; } .legal-top img { height: 36px; } }

main.legal-sheet button { border-radius: 4px; }

/* == legal == cookie banner + seller block (generated by sites/_legal/gen.py; the banner look comes from _legal/cookie-styles.css) */
.ck { position: fixed; left: 16px; bottom: 16px; z-index: 9999; max-width: 400px; font-family: inherit; font-size: 14px; line-height: 1.5; letter-spacing: 0; text-transform: none; text-align: left; }
.ck, .ck * { box-sizing: border-box; } .ck .ck-k { display: block; } .ck .ck-t, .ck .ck-p { margin: 0; } .ck .b { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.ck button, .ck a.more { cursor: pointer; text-decoration: none; line-height: 1.2; margin: 0; }
/* banner: grupo-simpatia */
.ck { left: 16px; bottom: 16px; width: min(520px, calc(100vw - 32px)); max-width: none; display: grid; grid-template-columns: 66px minmax(0, 1fr); grid-template-areas: "k t" "k p" "k b";
  padding: 0; color: #1d1611; font-family: 'Funnel Sans', 'Segoe UI', Arial, sans-serif; font-size: 12px; line-height: 1.38; border-radius: 1px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 18%, rgba(0, 0, 0, 0) 82%, rgba(60, 40, 20, .1)), linear-gradient(90deg, #f4ecda, #efe5cf 70%, #f2e9d5);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 0 0 1px rgba(60, 40, 20, .28), 2px 3px 0 rgba(20, 10, 4, .25), 0 18px 26px -12px rgba(10, 4, 0, .85);
  transform: rotate(-1.3deg); animation: gs-obi .8s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes gs-obi { from { opacity: 0; transform: translateY(18px) rotate(-4deg); } to { opacity: 1; transform: rotate(-1.3deg); } }
html.obi .ck { position: absolute; left: calc(var(--obi-x) - 8px); top: calc(var(--obi-y) - 26px); bottom: auto; width: min(calc(var(--obi-w) + 6px), 580px); }
.ck::before { content: ''; position: absolute; left: 66px; top: 0; bottom: 0; width: 7px; background: linear-gradient(90deg, rgba(60, 40, 20, .22), rgba(255, 255, 255, .45) 45%, rgba(60, 40, 20, 0)); pointer-events: none; }
.ck .ck-k { grid-area: k; display: flex; align-items: center; padding: 8px 6px 8px 10px; background: linear-gradient(180deg, #d4121e, #b80f1a); color: #fbf3e2;
  font: 700 10px/1.3 'Funnel Sans', 'Segoe UI', Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.ck .ck-t { grid-area: t; padding: 9px 14px 0 18px; }
.ck .ck-t b { display: block; font: 800 18px/1.1 'Funnel Display', 'Arial Narrow', Arial, sans-serif; letter-spacing: -.02em; color: #1d1611; }
.ck .ck-p { grid-area: p; padding: 3px 14px 0 18px; color: #2f251d; }
.ck .b { grid-area: b; margin: 0; padding: 7px 14px 9px 18px; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px; }
.ck button { border-radius: 0; padding: 7px 14px; font: 700 13px/1 'Funnel Sans', 'Segoe UI', Arial, sans-serif; letter-spacing: .04em; text-transform: uppercase; border: 1.5px solid #1d1611; transition: background .2s cubic-bezier(.25, 1, .5, 1); }
.ck .ok { background: #1d1611; color: #f4ecda; }
.ck .ok:hover { background: #d4121e; border-color: #d4121e; }
.ck .no { background: transparent; color: #1d1611; }
.ck .no:hover { background: rgba(29, 22, 17, .1); }
.ck a.more { margin-left: auto; text-align: right; font: 500 11.5px/1.2 'Funnel Sans', 'Segoe UI', Arial, sans-serif; color: #3b2f25; text-decoration: underline; text-underline-offset: 2px; }
.ck button:focus-visible, .ck a.more:focus-visible { outline: 2.5px solid #1f7a7a; outline-offset: 2px; }
@media (max-width: 699px) {
  html.obi .ck, .ck.ck { position: fixed; left: 8px; right: 8px; top: auto; bottom: 8px; width: auto; max-width: none; transform: none; animation: none;
    grid-template-columns: minmax(0, 1fr); grid-template-areas: "k" "t" "p" "b"; }
  .ck::before { display: none; }
  .ck .ck-k { padding: 6px 14px; }
  .ck .ck-t { padding: 10px 14px 0; } .ck .ck-p { padding: 4px 14px 8px; font-size: 13px; }
  .ck .b { flex-direction: row; flex-wrap: wrap; align-items: center; padding: 0 14px 12px; }
  .ck button { padding: 10px 14px; }
}
@media (min-width: 700px) { html.obi body:has(> #ck) .obi-bay { visibility: hidden; } }
/* seller block: the dark shelf under the turntable */
footer.seller { background: #110c09; color: #e9dfca; border-top: 1px solid rgba(239, 230, 210, .18); font-family: 'Funnel Sans', 'Segoe UI', Arial, sans-serif; padding-bottom: 40px; }
footer.seller b { color: #ecc04a; opacity: 1; }
footer.seller strong { color: #f4ecda; }
footer.seller a { color: #f4ecda; text-underline-offset: 3px; }
footer.seller input[type=email] { color: #f4ecda; border-color: rgba(239, 230, 210, .5); }
footer.seller input::placeholder { color: #a99c84; }

@media (max-width: 600px) { .ck { left: 10px; right: 10px; bottom: var(--ck-bottom, 10px); width: auto; max-width: none; transform: none; } }
.seller { font-size: 12.5px; line-height: 1.6; color: inherit; padding: 22px 24px 26px; border-top: 1px solid rgba(128,128,128,.35); letter-spacing: 0; text-transform: none; font-family: inherit; }
.seller-in { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 28px; }
.seller b { display: block; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; opacity: .7; margin-bottom: 4px; font-weight: 700; }
.seller a { color: inherit; } .seller address { font-style: normal; } .seller strong { font-weight: 700; }
.seller.panel { display: none; position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 9998; background: #fff; color: #111; border-radius: 14px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.5); max-width: 940px; margin: 0 auto; border-top: 0; padding: 24px 26px 22px; }
.seller.panel:target { display: block; }
.seller .x { position: absolute; top: 6px; right: 12px; text-decoration: none; font-size: 22px; line-height: 1; padding: 6px 8px; }
.ck-page .st { padding: 10px 14px; border: 1px solid rgba(128,128,128,.4); border-radius: 8px; margin: 10px 0 14px; font-weight: 700; } .ck-page .b { display: flex; gap: 8px; flex-wrap: wrap; } .ck-page button { font: inherit; font-weight: 700; padding: 9px 16px; border-radius: 999px; border: 1px solid currentColor; background: transparent; color: inherit; cursor: pointer; }
@media (max-width: 760px) { table.lgl-t, table.lgl-t tbody, table.lgl-t tr, table.lgl-t td { display: block; width: auto; } table.lgl-t thead { display: none; } table.lgl-t tr { padding: 10px 0; border-bottom: 1px solid rgba(128,128,128,.35); } table.lgl-t td { border: 0 !important; padding: 2px 0 !important; overflow-wrap: anywhere; } table.lgl-t td::before { content: attr(data-l) ": "; font-weight: 700; } }
table.lgl-t code { overflow-wrap: anywhere; }
.lead-note.lead-note { font-size: 12px; line-height: 1.5; margin: 0; letter-spacing: 0; text-transform: none; font-weight: 400; font-style: normal; text-align: left; max-width: 62ch; } .lead-note.lead-note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 700px) { .seller-in { grid-template-columns: 1fr; } .seller.panel { left: 8px; right: 8px; bottom: 8px; max-height: 80dvh; overflow: auto; } }