

.pc{
  --stock-hi:#FFFDF4; --edge:#D2C6A6; --edge-lo:#A1967A; --cut:rgba(70,56,22,.38);

  --dusk:#17103A; --plum:#3F1B63; --wine:#8E2450; --ember:#D9382C; --tang:#F47A21; --gold:#FFC857; --cream:#FFF3D4;
  --ground:#150A26; --ground-lo:#0C0618; --ridge:#35144F; --casino-red:#C4202B; --night:#1A1420;
  --ray:rgba(255,214,140,.2); --ray-0:rgba(255,214,140,0); --dot:rgba(255,243,212,.3); --dot-0:rgba(255,243,212,0);
  --neon-core:#FFEBDD; --neon:#FF5A36; --neon-far:rgba(255,90,54,.55); --wall:rgba(6,2,14,.8);
  --shadow-contact:rgba(0,0,0,.5); --shadow-amb:rgba(0,0,0,.62); --shadow-fan:rgba(0,0,0,.42);
  --sheen:rgba(255,255,255,.16); --sheen-0:rgba(255,255,255,0); --shade:rgba(40,28,8,.1); --shade-in:rgba(70,50,14,.3); --linen:rgba(96,74,28,.028); --linen-0:rgba(96,74,28,0);
  --suit:var(--ink);
  --f-poster:Anton,Impact,'Arial Narrow',sans-serif; --f-script:'Grand Hotel','Brush Script MT',cursive;
  --f-rank:var(--serif); --f-fig:var(--serif);
  container:card / inline-size; position:relative; display:block; width:100%; aspect-ratio:5 / 7;
}
.pc[data-suit="h"], .pc[data-suit="d"]{--suit:var(--oxblood);}
.pc[data-face="loud"]{--f-rank:var(--f-poster); --f-fig:var(--f-poster); --suit:var(--night);}
.pc[data-face="loud"][data-suit="h"], .pc[data-face="loud"][data-suit="d"]{--suit:var(--casino-red);}

.pc[data-suit="h"]{--mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 91C46 84 37 76 27 66C14 53 5 43 5 29C5 16 15 7 27 7C37 7 45 13 50 22C55 13 63 7 73 7C85 7 95 16 95 29C95 43 86 53 73 66C63 76 54 84 50 91Z'/%3E%3C/svg%3E");}
.pc[data-suit="d"]{--mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 4C56 20 68 36 84 50C68 64 56 80 50 96C44 80 32 64 16 50C32 36 44 20 50 4Z'/%3E%3C/svg%3E");}
.pc[data-suit="s"]{--mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 5C46 14 36 24 26 34C14 46 6 54 6 66C6 77 15 85 26 85C35 85 42 80 46 73C45 83 41 90 34 95L66 95C59 90 55 83 54 73C58 80 65 85 74 85C85 85 94 77 94 66C94 54 86 46 74 34C64 24 54 14 50 5Z'/%3E%3C/svg%3E");}
.pc[data-suit="c"]{--mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 5a20 20 0 1 1 0 40a20 20 0 1 1 0-40ZM27 37a20 20 0 1 1 0 40a20 20 0 1 1 0-40ZM73 37a20 20 0 1 1 0 40a20 20 0 1 1 0-40ZM50 25L73 57L27 57ZM55 56C55 76 59 88 67 96L33 96C41 88 45 76 45 56Z'/%3E%3C/svg%3E");}

.pc-s{
  position:absolute; inset:0; border-radius:4.8cqw; overflow:hidden; background:var(--stock); color:var(--ink);
  box-shadow:
    0 0 0 .5px var(--cut),
    0 .45cqw 0 -.1cqw var(--edge), 0 .8cqw 0 -.15cqw var(--edge-lo),
    0 1.5cqw 1.4cqw var(--shadow-contact),
    0 7cqw 10cqw -3.5cqw var(--shadow-amb);
}

.pc-s::before{content:""; position:absolute; inset:0; z-index:8; pointer-events:none; border-radius:inherit;
  background:linear-gradient(128deg, var(--sheen) 0%, var(--sheen-0) 32%, var(--sheen-0) 64%, var(--shade) 100%);
  box-shadow:inset 0 .45cqw .35cqw -.25cqw var(--stock-hi), inset 0 -.6cqw .7cqw -.35cqw var(--shade-in);}

.pc-s::after{content:""; position:absolute; inset:0; z-index:9; pointer-events:none; border-radius:inherit; mix-blend-mode:multiply;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.15' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .36  0 0 0 0 .27  0 0 0 0 .1  0 0 0 .5 -.14'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"),
    repeating-linear-gradient(45deg, var(--linen) 0 1px, var(--linen-0) 1px 3px),
    repeating-linear-gradient(-45deg, var(--linen) 0 1px, var(--linen-0) 1px 3px);}

.pc-vh{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap;}

.pc-ix{position:absolute; left:4.4cqw; top:4.4cqw; width:13cqw; z-index:4; display:flex; flex-direction:column; align-items:center; gap:1.1cqw; color:var(--suit); line-height:1;}
.pc-ix b{font-family:var(--f-rank); font-weight:800; font-size:14cqw; line-height:.8; letter-spacing:-.02em; font-variant-numeric:lining-nums tabular-nums;}
.pc-ix svg{display:block; width:7.6cqw; height:7.6cqw; fill:currentColor;}
.pc-ix.br{left:auto; top:auto; right:4.4cqw; bottom:4.4cqw; transform:rotate(180deg);}
.pc[data-rank="10"] .pc-ix b{font-size:12.4cqw; letter-spacing:-.09em; margin-left:-.06em;}

.pc:not([data-rank]) .pc-ix{top:5cqw;} .pc:not([data-rank]) .pc-ix.br{top:auto; bottom:5cqw;}
.pc:not([data-rank]) .pc-ix svg{width:11.5cqw; height:11.5cqw;}
.pc-wm{display:none;}

.pc-face{--win:70%; position:absolute; left:50%; top:10cqw; width:64cqw; height:64cqw; transform:translateX(-50%); z-index:2;}
.pc-ros{position:absolute; inset:0; width:100%; height:100%; overflow:visible;}
.pc-win, .pc-out{position:absolute; left:50%; top:50%; width:var(--win); height:var(--win); transform:translate(-50%,-49%);}
.pc-out{overflow:visible;}
.pc-win{-webkit-mask:var(--mask) center / contain no-repeat; mask:var(--mask) center / contain no-repeat; background:var(--suit);}

.pc-deal{position:absolute; left:15cqw; right:15cqw; top:74.5cqw; bottom:5.5cqw; z-index:3; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.7cqw; text-align:center;}
.pc-cat{font-family:var(--sans); font-weight:600; font-size:max(11px,3.5cqw); line-height:1.1; letter-spacing:.2em; margin-right:-.2em; text-transform:uppercase; color:var(--suit); white-space:nowrap;}
.pc-price{display:flex; align-items:center; justify-content:center; gap:.07em; margin-inline:-10cqw; white-space:nowrap;
  font-family:var(--f-fig); font-weight:900; line-height:.8; letter-spacing:-.012em; font-variant-numeric:lining-nums tabular-nums;
  font-size:clamp(11px, calc(86cqw / var(--w)), 27cqw);}
.pc-fig{display:inline-flex; align-items:flex-start; font-weight:inherit;}
.pc-c{font-size:max(11px,.42em); line-height:.8; margin:.07em 0 0 .05em;}
.pc-dot{display:none;}
.pc-q{display:flex; flex-direction:column; align-items:center; gap:.05em; font-style:normal;}
.pc-q i{font-style:normal; display:block;}
.pc-q .n{font-size:max(11px,.38em); line-height:.82;}
.pc-q .t{font-family:var(--sans); font-weight:600; font-size:max(11px,.17em); line-height:1; letter-spacing:.14em; margin-right:-.14em; text-transform:uppercase;}
.pc-q.post .n{font-size:max(11px,.46em);}
.pc-shop{font-family:var(--serif); font-weight:700; font-size:max(11px,6cqw); line-height:1.12; text-wrap:balance; max-width:100%; margin-top:2.2cqw;}

.pc-link{position:absolute; inset:0; z-index:6; border-radius:4.8cqw; text-decoration:none;}
.pc-link:focus-visible{outline:2px solid var(--brass); outline-offset:3px;}

.pc-cue{position:absolute; z-index:6; right:3.4cqw; top:72cqw; transform:translateY(-50%); min-height:44px; display:flex; align-items:center; padding:0 0 0 10px; border:0; background:none; cursor:pointer; -webkit-tap-highlight-color:transparent;}
.pc-cue span{display:block; white-space:nowrap; padding:.56em .95em .62em; border-radius:999px; font-family:var(--sans); font-weight:600; font-size:clamp(11px, 5.6cqw, 13px); line-height:1;
  color:var(--brass-text); background:var(--brass); box-shadow:0 0 0 max(1.5px,.7cqw) var(--stock);}
.pc[data-face="loud"] .pc-cue span{box-shadow:0 0 0 max(1.5px,.7cqw) var(--ground);}
.pc .save{position:absolute; right:0; top:0; z-index:7; width:max(44px,17cqw); height:max(44px,17cqw);}
.pc .save svg{width:max(20px,8cqw); height:max(20px,8cqw); stroke:var(--ink);}
.pc .save[aria-pressed="true"] svg{fill:var(--oxblood); stroke:var(--oxblood);}
.pc[data-face="loud"] .save svg{stroke:var(--cream);}
.pc[data-face="loud"] .save[aria-pressed="true"] svg{fill:var(--gold); stroke:var(--gold);}

.pc[data-face="quiet"] .pc-face{--win:58%; top:8.5cqw; width:68cqw; height:68cqw;}
.pc[data-face="quiet"] .pc-ros{color:var(--suit); opacity:.7;}
.pc[data-face="quiet"] .pc-out path{fill:none; stroke:var(--suit); stroke-width:.9;}
.pc[data-face="quiet"] .pc-out .in{stroke:var(--stock); stroke-width:1.4;}

.pc[data-face="quiet"] .pc-win.ph{background:none;}
.pc[data-face="quiet"] .pc-art-q{position:absolute; inset:0; background:var(--suit); -webkit-mask:var(--art) center / cover no-repeat; mask:var(--art) center / cover no-repeat;}
.pc[data-face="quiet"] .pc-rule{position:absolute; left:50%; top:79.8cqw; width:26cqw; height:0; margin-left:-13cqw; border-top:max(.5px,.22cqw) solid var(--suit); opacity:.7; z-index:3;}
.pc[data-face="quiet"] .pc-rule::after{content:""; position:absolute; left:50%; top:0; width:2cqw; height:2cqw; margin:-1.1cqw 0 0 -1cqw; background:var(--suit); transform:rotate(45deg); box-shadow:0 0 0 1cqw var(--stock);}
.pc[data-face="quiet"] .pc-deal{left:17.8cqw; right:17.8cqw; top:82.5cqw; bottom:5cqw;}
.pc[data-face="quiet"] .pc-q.pre .n{font-style:italic; font-weight:700;}

.pc[data-face="loud"] .pc-art{position:absolute; inset:3cqw; border-radius:2.4cqw; overflow:hidden; z-index:0;
  background:linear-gradient(180deg, var(--dusk) 0 17%, var(--plum) 17.4% 30%, var(--wine) 30.4% 39.5%, var(--ember) 39.9% 46%, var(--tang) 46.4% 51%, var(--gold) 51.4% 64%);}

.pc[data-face="loud"] .pc-art::before{content:""; position:absolute; inset:0; background:repeating-conic-gradient(from 3deg at 50% 29.5%, var(--ray) 0 4deg, var(--ray-0) 4deg 12deg);
  -webkit-mask:radial-gradient(circle at 50% 29.5%, #000 0, #000 34%, rgba(0,0,0,0) 70%); mask:radial-gradient(circle at 50% 29.5%, #000 0, #000 34%, rgba(0,0,0,0) 70%);}

.pc[data-face="loud"] .pc-art::after{content:""; position:absolute; inset:0; background:radial-gradient(circle at 50% 50%, var(--dot) 0 .34cqw, var(--dot-0) .42cqw) 0 0 / 1.9cqw 1.9cqw;
  -webkit-mask:linear-gradient(180deg, #000 0, rgba(0,0,0,0) 30%); mask:linear-gradient(180deg, #000 0, rgba(0,0,0,0) 30%);}
.pc-ridge{position:absolute; left:0; right:0; top:53.5%; height:12%; background:var(--ridge);
  clip-path:polygon(0 46%, 7% 30%, 13% 40%, 22% 12%, 29% 34%, 36% 22%, 44% 44%, 55% 30%, 63% 6%, 70% 30%, 78% 18%, 86% 40%, 93% 26%, 100% 38%, 100% 100%, 0 100%);}
.pc-ground{position:absolute; left:0; right:0; top:56.5%; bottom:0; background:linear-gradient(180deg, var(--ground) 0%, var(--ground-lo) 100%);
  clip-path:polygon(0 3%, 9% 6%, 18% 2.5%, 27% 7%, 38% 3%, 47% 6.5%, 58% 4%, 69% 7.5%, 79% 3%, 90% 6%, 100% 2%, 100% 100%, 0 100%);}

.pc-foil{position:absolute; inset:0; pointer-events:none; mix-blend-mode:color-dodge; opacity:.62;
  background:
    repeating-linear-gradient(112deg, rgba(255,255,255,0) 0 .5cqw, rgba(255,255,255,.09) .5cqw .75cqw),
    linear-gradient(112deg, rgba(255,255,255,0) 34%, rgba(255,150,130,.5) 40%, rgba(255,226,140,.62) 45%, rgba(160,225,255,.5) 50%, rgba(200,170,255,.45) 55%, rgba(255,255,255,0) 61%);
  background-size:auto, 260% 100%; background-position:0 0, 40% 0;
  -webkit-mask:linear-gradient(180deg, #000 0, #000 50%, rgba(0,0,0,0) 57%); mask:linear-gradient(180deg, #000 0, #000 50%, rgba(0,0,0,0) 57%);}

.pc[data-face="loud"] .pc-ix{left:0; top:0; width:18cqw; padding:4.6cqw 0 3.4cqw 2.2cqw; gap:1.2cqw; background:var(--stock); border-bottom-right-radius:4.6cqw; z-index:4;}
.pc[data-face="loud"] .pc-ix b{font-weight:400; font-size:15cqw; line-height:.86; letter-spacing:0;}
.pc[data-face="loud"] .pc-ix svg{width:7.6cqw; height:7.6cqw;}
.pc[data-face="loud"] .pc-ix.br{left:auto; top:auto; right:0; bottom:0;}
.pc[data-face="loud"][data-rank="10"] .pc-ix b{font-size:14cqw; letter-spacing:-.03em; margin-left:0;}
.pc[data-face="loud"]:not([data-rank]) .pc-ix{padding-top:5.6cqw; padding-bottom:4.6cqw;}
.pc[data-face="loud"]:not([data-rank]) .pc-ix svg{width:10.5cqw; height:10.5cqw;}

.pc[data-face="loud"] .pc-win{background:radial-gradient(circle at 50% 38%, var(--cream) 0%, var(--gold) 22%, var(--tang) 52%, var(--ember) 82%);}
.pc[data-face="loud"] .pc-win.ph{background:var(--art) center / cover no-repeat;}
.pc[data-face="loud"] .pc-win:not(.ph)::after{content:""; position:absolute; inset:0; background:radial-gradient(circle at 50% 50%, var(--wine) 0 .3cqw, rgba(142,36,80,0) .4cqw) 0 0 / 1.5cqw 1.5cqw; opacity:.5;
  -webkit-mask:radial-gradient(circle at 50% 38%, rgba(0,0,0,0) 20%, #000 75%); mask:radial-gradient(circle at 50% 38%, rgba(0,0,0,0) 20%, #000 75%);}
.pc[data-face="loud"] .pc-out .sh{fill:var(--ground); opacity:.5;}
.pc[data-face="loud"] .pc-out .rim{fill:none; stroke:var(--cream); stroke-width:2.2;}

.pc-out .lamp, .pc-bk .lamp{fill:none; stroke-linecap:round; stroke-dasharray:.01 1.99; stroke:var(--cream); stroke-width:3;}
.pc-out .lamp.g, .pc-bk .lamp.g{stroke:var(--gold); stroke-width:6.6; opacity:.42;}
.pc-out .lamp.b{stroke-dashoffset:1;}

.pc[data-face="loud"] .pc-deal{left:18.5cqw; right:18.5cqw; top:78.5cqw; bottom:5.5cqw; gap:.6cqw; color:var(--cream);}

.pc[data-face="loud"] .pc-cat{font-family:var(--f-script); font-weight:400; font-size:max(14px,11.5cqw); line-height:1.05; letter-spacing:.01em; margin:0 -12cqw; text-transform:none; color:var(--neon-core); transform:rotate(-4deg);
  text-shadow:0 0 .03em var(--neon-core), 0 0 .12em var(--neon), 0 0 .32em var(--neon), 0 0 .8em var(--neon-far), .05em .07em .02em var(--wall);}
.pc[data-face="loud"] .pc-price{font-weight:400; line-height:.98; letter-spacing:.005em; margin-inline:0; color:var(--cream); font-size:clamp(11px, calc(63cqw / var(--w)), 26cqw);
  text-shadow:.032em .032em 0 var(--ember), .064em .064em 0 var(--ground-lo);}
.pc[data-face="loud"] .pc-c{line-height:1; margin:.12em 0 0 .07em; padding-bottom:.08em; border-bottom:.09em solid currentColor; box-shadow:.07em .07em 0 var(--ember);}
.pc[data-face="loud"] .pc-q .n{line-height:1;}

.pc[data-face="loud"] .pc-q i{text-shadow:.05em .05em 0 var(--ember), .1em .1em 0 var(--ground-lo);}
.pc[data-face="loud"] .pc-q .t{font-family:var(--f-poster); font-weight:400; font-size:max(11px,.2em); letter-spacing:.1em; margin-right:-.1em;}
.pc[data-face="loud"] .pc-q.post .n{font-size:max(11px,.4em);}

.pc[data-face="loud"] .pc-shop{font-family:var(--f-poster); font-weight:400; font-size:max(11px,5.5cqw); line-height:1.34; letter-spacing:.08em; text-transform:uppercase; color:var(--ground);
  padding:.35cqw 2.4cqw .1cqw 2.8cqw; border-radius:.9cqw; margin-top:.8cqw;
  background:repeating-linear-gradient(180deg, rgba(21,10,38,0) 0 calc(1.34em - max(.5px,.25cqw)), rgba(21,10,38,.4) calc(1.34em - max(.5px,.25cqw)) 1.34em) 0 .35cqw, var(--cream);
  box-shadow:inset 0 0 0 max(.5px,.25cqw) rgba(21,10,38,.5), 0 .5cqw 0 var(--wall), 0 0 3cqw rgba(255,200,87,.35);}
@container card (max-width:250px){ .pc[data-face="loud"] .pc-shop{letter-spacing:.04em;} }

.pc[data-face="plain"] .pc-ix{left:6.5cqw; top:7cqw; width:24cqw; gap:2.4cqw;}
.pc[data-face="plain"] .pc-ix b{font-size:max(11px,24cqw); letter-spacing:-.05em;}
.pc[data-face="plain"] .pc-ix svg{width:13cqw; height:13cqw;}
.pc[data-face="plain"] .pc-ix.br{left:auto; top:auto; right:6.5cqw; bottom:7cqw;}
.pc-mid{position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4cqw; color:var(--suit); line-height:1;}
.pc-mid b{display:none; font-family:var(--serif); font-weight:800; font-size:max(11px,46cqw); line-height:.8; letter-spacing:-.04em;}
.pc-mid svg{width:38cqw; height:38cqw; fill:currentColor;}
.pc[data-mark] .pc-mid b{display:block;} .pc[data-mark] .pc-mid svg{display:none;}
@container card (max-width:55.98px){
  .pc[data-face="plain"] .pc-ix{display:none;}
  .pc[data-face="plain"] .pc-mid b{display:block;}
  .pc[data-face="plain"] .pc-mid svg{display:block; width:24cqw; height:24cqw;}
}

.pc[data-back] .pc-bk{position:absolute; inset:0; width:100%; height:100%; display:block;}
.pc[data-back] .pc-bt{position:absolute; left:0; right:0; top:50%; margin-top:-13.5cqw; z-index:3; text-align:center; white-space:nowrap;
  font-family:var(--f-script); font-size:max(12px,15cqw); line-height:.86; color:var(--neon-core); transform:rotate(-7deg);
  text-shadow:0 0 .03em var(--neon-core), 0 0 .12em var(--neon), 0 0 .32em var(--neon), 0 0 .8em var(--neon-far), .05em .07em .02em var(--wall);}
.pc[data-back] .pc-bt span{display:block;}
.pc[data-back] .pc-bt span + span{margin-left:16cqw;}

@container card (max-width:79.98px){ .pc[data-back] .pc-bt{display:none;} }

.pc-fp{position:absolute; left:2.8cqw; right:2.8cqw; bottom:2.8cqw; max-height:calc(100% - 5.6cqw); z-index:3; overflow:hidden;
  display:flex; flex-direction:column; gap:max(4px,1.7cqw); padding:max(8px,3.6cqw) max(8px,3.8cqw) max(7px,3.2cqw); border-radius:2.4cqw;
  background:var(--stock); color:var(--ink); font-family:var(--sans); font-size:max(11px,4.3cqw); line-height:1.3; text-align:left;
  box-shadow:0 0 0 max(.5px,.25cqw) var(--cut), 0 .6cqw 2cqw var(--wall);}
.pc-fp-h{font-family:var(--serif); font-weight:700; font-size:max(13px,5.8cqw); line-height:1.12; padding-right:max(30px,12cqw);}
.pc-fp p{overflow-wrap:break-word;}
.pc-fp p b{font-weight:600;}
.pc-fp .heads b{color:var(--oxblood);}
.pc-fp-a{display:flex; gap:max(6px,2.4cqw); margin-top:max(2px,.8cqw);}
.pc-act{flex:1 1 0; min-width:44px; min-height:44px; display:flex; align-items:center; justify-content:center; padding:4px 8px; border-radius:max(10px,4cqw); text-align:center; text-decoration:none; text-wrap:balance;
  font-weight:600; font-size:max(11px,4.3cqw); line-height:1.15; color:var(--brass-text); background:var(--brass);}
.pc-act + .pc-act{background:none; color:var(--ink); box-shadow:inset 0 0 0 1px var(--line-ink);}
.pc-act:focus-visible{outline:2px solid var(--ink); outline-offset:2px;}

.pc-turn{position:absolute; right:0; top:0; z-index:1; width:44px; height:44px; display:grid; place-items:start end; padding:max(7px,3.2cqw) max(8px,3.4cqw) 0 0; border:0; background:none; cursor:pointer; -webkit-tap-highlight-color:transparent;}
.pc-turn-t{display:block; font-family:Inter,system-ui,sans-serif; font-size:max(11px,4.4cqw); font-weight:600; line-height:1.2; color:var(--ink-2); border-bottom:1.5px solid currentColor;}
.pc-turn:focus-visible{outline:2px solid var(--ink); outline-offset:-4px;}
@container card (max-width:214.98px){
  .pc-fp{left:0; right:0; bottom:0; max-height:100%; border-radius:0; line-height:1.2; box-shadow:none;}
}

@container card (max-width:150px){
  .pc[data-face="quiet"] .pc-face, .pc[data-face="quiet"] .pc-shop, .pc[data-face="quiet"] .pc-rule{display:none;}
  .pc[data-face="quiet"] .pc-ix{left:6.5cqw; top:6.5cqw; width:17cqw; gap:2cqw;}
  .pc[data-face="quiet"] .pc-ix b{font-size:23cqw;}
  .pc[data-face="quiet"] .pc-ix svg{width:12.5cqw; height:12.5cqw;}
  .pc[data-face="quiet"] .pc-ix.br{left:auto; top:auto; right:6.5cqw; bottom:6.5cqw;}
  .pc[data-face="quiet"][data-rank="10"] .pc-ix b{font-size:21cqw; letter-spacing:-.09em;}
  .pc[data-face="quiet"]:not([data-rank]) .pc-ix{top:7.5cqw;} .pc[data-face="quiet"]:not([data-rank]) .pc-ix.br{top:auto; bottom:7.5cqw;}
  .pc[data-face="quiet"]:not([data-rank]) .pc-ix svg{width:17cqw; height:17cqw;}
  .pc[data-face="quiet"] .pc-wm{display:block; position:absolute; right:-13cqw; top:16cqw; width:74cqw; height:74cqw; z-index:1; fill:var(--suit); opacity:.07;}
  .pc[data-face="quiet"] .pc-deal{left:6.2cqw; right:4cqw; top:50cqw; bottom:auto; align-items:flex-start; justify-content:flex-start; text-align:left; gap:2.2cqw;}
  .pc[data-face="quiet"]:not([data-rank]) .pc-deal{top:32cqw;}
  .pc[data-face="quiet"] .pc-cat{font-family:var(--serif); font-style:italic; font-weight:600; font-size:max(11px,11.5cqw); line-height:1.08; letter-spacing:-.01em; margin:0; text-transform:none; color:var(--ink); white-space:normal;}
  .pc[data-face="quiet"] .pc-cat[data-short] .l{display:none;} .pc[data-face="quiet"] .pc-cat[data-short]::after{content:attr(data-short);}
  .pc[data-face="quiet"] .pc-price{margin:0; justify-content:flex-start; flex-wrap:wrap; row-gap:1.5cqw; column-gap:2px; line-height:.84;
    font-size:clamp(11px, calc((47cqw - 11px * var(--wc)) / var(--ws)), 23cqw);}
  .pc[data-face="quiet"] .pc-fig{align-items:baseline;}
  .pc[data-face="quiet"] .pc-c{font-size:1em; line-height:inherit; margin:0;}
  .pc[data-face="quiet"] .pc-dot{display:inline;}
  .pc[data-face="quiet"] .pc-q.pre{flex-basis:100%; flex-direction:row; align-items:baseline; gap:.3em;}
  .pc[data-face="quiet"] .pc-q.pre .n, .pc[data-face="quiet"] .pc-q.pre .t{font-family:var(--sans); font-style:normal; font-weight:600; font-size:11px; letter-spacing:0; margin:0; line-height:1; text-transform:none;}
  .pc[data-face="quiet"] .pc-q.post{align-items:flex-start; gap:1px;}
  .pc[data-face="quiet"] .pc-q.post .n{font-size:max(11px,.72em); line-height:.78;}
  .pc[data-face="quiet"] .pc-q.post .t{font-size:11px; letter-spacing:.06em; margin:0;}
}

@container card (max-width:199.98px){
  .pc[data-face="loud"] .pc-face, .pc[data-face="loud"] .pc-shop, .pc[data-face="loud"] .pc-ridge, .pc[data-face="loud"] .pc-ground{display:none;}
  .pc[data-face="loud"] .pc-art{background:linear-gradient(180deg, var(--dusk) 0 34%, var(--plum) 34.5% 62%, var(--wine) 62.5% 80%, var(--ember) 80.5% 91%, var(--tang) 91.5% 100%);}
  .pc[data-face="loud"] .pc-art::before{-webkit-mask:none; mask:none; opacity:.55; background:repeating-conic-gradient(from 3deg at 16% 104%, var(--ray) 0 4deg, var(--ray-0) 4deg 12deg);}
  .pc[data-face="loud"] .pc-art::after{display:none;}
  .pc[data-face="loud"] .pc-foil{opacity:.4; -webkit-mask:none; mask:none;}
  .pc[data-face="loud"] .pc-ix{width:27cqw; padding:6.5cqw 0 5cqw 3cqw; gap:2cqw; border-bottom-right-radius:7.5cqw;}
  .pc[data-face="loud"] .pc-ix b{font-size:22cqw;}
  .pc[data-face="loud"] .pc-ix svg{width:12cqw; height:12cqw;}
  .pc[data-face="loud"][data-rank="10"] .pc-ix b{font-size:21.5cqw; letter-spacing:-.04em;}
  .pc[data-face="loud"]:not([data-rank]) .pc-ix{padding-top:8cqw; padding-bottom:6.5cqw;}
  .pc[data-face="loud"]:not([data-rank]) .pc-ix svg{width:16cqw; height:16cqw;}
  .pc[data-face="loud"] .pc-deal{left:6.8cqw; right:4cqw; top:50cqw; bottom:auto; align-items:flex-start; justify-content:flex-start; text-align:left; gap:2cqw;}
  .pc[data-face="loud"]:not([data-rank]) .pc-deal{top:37cqw;}
  .pc[data-face="loud"] .pc-cat{font-family:var(--f-poster); font-style:normal; font-weight:400; font-size:max(11px,11.5cqw); line-height:1.14; letter-spacing:0; text-transform:uppercase; color:var(--cream); text-shadow:none; transform:none; margin:0; white-space:normal;}
  .pc[data-face="loud"] .pc-cat[data-short] .l{display:none;} .pc[data-face="loud"] .pc-cat[data-short]::after{content:attr(data-short);}
  .pc[data-face="loud"] .pc-price{margin:0; justify-content:flex-start; flex-wrap:wrap; row-gap:1.5cqw; column-gap:2px; line-height:.96; text-shadow:.04em .04em 0 var(--ember);
    font-size:clamp(11px, calc((47cqw - 11px * var(--wc)) / var(--ws)), 27cqw);}
  .pc[data-face="loud"] .pc-fig{align-items:baseline;}
  .pc[data-face="loud"] .pc-c{font-size:1em; line-height:inherit; margin:0; padding:0; border:0; box-shadow:none;}
  .pc[data-face="loud"] .pc-dot{display:inline;}
  .pc[data-face="loud"] .pc-q i{text-shadow:none;}
  .pc[data-face="loud"] .pc-q.pre{flex-basis:100%; flex-direction:row; align-items:baseline; gap:.3em;}
  .pc[data-face="loud"] .pc-q.pre .n, .pc[data-face="loud"] .pc-q.pre .t{font-family:var(--f-poster); font-style:normal; font-weight:400; font-size:max(11px,11.5cqw); letter-spacing:.04em; margin:0; line-height:1; text-transform:uppercase;}
  .pc[data-face="loud"] .pc-q.post{align-items:flex-start; gap:1px;}
  .pc[data-face="loud"] .pc-q.post .n{font-size:max(11px,.5em); line-height:.9;}
  .pc[data-face="loud"] .pc-q.post .t{font-family:var(--f-poster); font-weight:400; font-size:max(11px,.26em); letter-spacing:.08em; margin:0;}
}

.hand{container:hand / inline-size; position:relative; width:100%; max-width:430px; margin:0 auto;}
.hand-in{position:relative; height:54cqw;}
.hand-c{position:absolute; left:50%; top:10.5cqw; width:25.6cqw; margin:0 0 0 -12.8cqw; padding:0; border:0; background:none; color:inherit; font:inherit; text-align:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent;
  transform-origin:50% 154.5cqw; transform:rotate(calc(var(--i) * 6.5deg)); transition:transform .3s cubic-bezier(.2,.8,.2,1);}
.hand-c[aria-selected="true"]{transform:rotate(calc(var(--i) * 6.5deg)) translateY(-5.4cqw);}
.hand-c:focus-visible{outline:none;} .hand-c:focus-visible .pc-s{outline:2px solid var(--stock); outline-offset:2px;}
.hand-c .pc-s{box-shadow:0 0 0 .5px var(--cut), -2.5cqw 1cqw 5cqw var(--shadow-fan), 0 6cqw 9cqw -3cqw var(--shadow-amb);}
.hand-c[aria-selected="true"] .pc-s{box-shadow:0 0 0 1cqw var(--brass), -3.5cqw 1cqw 7cqw var(--shadow-contact), 0 8cqw 11cqw -3cqw var(--shadow-amb);}
.hand[data-tuck] .hand-in{height:37cqw;}
.hand[data-tuck] .hand-c{top:5.6cqw;}

.hand[data-shops] .pc[data-face] .pc-shop{display:block; max-width:60cqw; margin:1.5cqw 0 0; padding:0; border:0; background:none; box-shadow:none; text-align:left; white-space:normal; text-wrap:wrap;
  font-family:var(--f-poster); font-weight:400; font-size:11px; line-height:1.12; letter-spacing:0; text-transform:uppercase; overflow-wrap:anywhere;}
.hand[data-shops] .pc[data-face="loud"] .pc-shop{color:var(--cream);}
.hand[data-shops] .pc[data-face="quiet"] .pc-shop{color:var(--ink); font-family:var(--sans); font-weight:600; letter-spacing:.02em; text-transform:none;}
.hand[data-shops] .hand-c:last-child .pc-shop{max-width:64cqw;}
.hand[data-shops][data-tuck] .hand-in{height:42cqw;}
@media (prefers-reduced-motion:reduce){ .hand-c{transition:none;} }
