.cc{--band:50%;--gx:0px;--gy:0px;--k:clamp(1px, calc(100cqw / 654), 1.86px);--drop-w:clamp(64px, 12.5%, 148px);--drop-r:clamp(16px, 3.5%, 44px);--drop-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 150' preserveAspectRatio='none'%3E%3Cpath d='M50 1L92 76.7A48 48 0 1 1 8 76.7Z'/%3E%3C/svg%3E");aspect-ratio:670/190;isolation:isolate;background:var(--mid);border-top:1px solid #ffffff14;border-radius:14px;width:100%;min-height:210px;max-height:340px;display:flex;position:relative;overflow:hidden;container-type:inline-size}@media (max-width:640px){.cc{aspect-ratio:auto;--drop-r:20px;max-height:none}}.cc:after{content:"";z-index:7;border-radius:inherit;pointer-events:none;border:1px solid #ffffff1a;position:absolute;inset:0}.cc--plain:after{display:none}.cc>.layer{pointer-events:none;position:absolute;inset:0}.cc__flop{z-index:0;background:linear-gradient(180deg, var(--f0) 0%, var(--f1) max(0%, calc(var(--band) - 38%)), var(--f2) calc(var(--band) - 25%), var(--f3) calc(var(--band) - 12%), var(--f4) var(--band), var(--f5) calc(var(--band) + 12%), var(--f6) calc(var(--band) + 25%), var(--f7) min(100%, calc(var(--band) + 38%)), var(--f8) 100%)}.cc__grain{z-index:1;background:var(--grain) repeat;background-size:var(--tile-w) var(--tile-h);background-position:calc(50% + var(--gx)) calc(50% + var(--gy));mix-blend-mode:overlay;opacity:.95}.cc__spark{z-index:2;background:var(--spark) repeat;background-size:var(--tile-w) var(--tile-h);background-position:calc(50% - var(--gx)*1.6) calc(50% - var(--gy)*1.6);mix-blend-mode:screen;opacity:.9;-webkit-mask-image:linear-gradient(180deg, transparent 0%, #00000040 calc(var(--band) - 30%), #000 var(--band), #00000040 calc(var(--band) + 30%), transparent 100%);-webkit-mask-image:linear-gradient(180deg, transparent 0%, #00000040 calc(var(--band) - 30%), #000 var(--band), #00000040 calc(var(--band) + 30%), transparent 100%);mask-image:linear-gradient(180deg, transparent 0%, #00000040 calc(var(--band) - 30%), #000 var(--band), #00000040 calc(var(--band) + 30%), transparent 100%)}.cc__sheen{z-index:3;background:radial-gradient(40% 55% at var(--mx,30%) var(--my,50%), #ffffff2e, #ffffff0d 45%, transparent 70%);mix-blend-mode:screen;opacity:0;transition:opacity .35s;inset:-20%}.cc.is-live .cc__sheen{opacity:1}.cc__scrim{z-index:4;background:linear-gradient(100deg,#00000094 0%,#0000004d 38%,#00000014 62%,#0000 78%)}.cc__stack{z-index:5;min-width:0;padding:18px calc(var(--drop-w) + var(--drop-r) + 10px) 18px 20px;justify-content:center;align-items:flex-start;gap:calc(9 * var(--k));flex-direction:column;flex:1;display:flex;position:relative}@media (min-width:641px){.cc__stack{padding-left:27px}}.cc__code{color:#fff;font-family:var(--font-jetbrains), ui-monospace, SFMono-Regular, Menlo, monospace;letter-spacing:.01em;overflow-wrap:anywhere;text-shadow:0 1px 2px #000000bf,0 2px 14px #0000008c;font-size:clamp(34px,6cqw,60px);font-weight:800;line-height:1}.cc__name{padding:calc(9 * var(--k)) calc(16 * var(--k));border-radius:calc(9 * var(--k));color:#fff;font-size:max(15px, calc(15.2 * var(--k)));letter-spacing:.012em;text-transform:uppercase;overflow-wrap:anywhere;background:#09090bbd;border:1px solid #ffffff29;max-width:100%;margin:0;font-weight:800;line-height:1.15}.cc__chip{align-items:center;gap:calc(7 * var(--k));padding:calc(5 * var(--k)) calc(11 * var(--k)) calc(5 * var(--k)) calc(9 * var(--k));border-radius:calc(9 * var(--k));-webkit-backdrop-filter:blur(7px)saturate(120%);color:#fffffff0;font-size:calc(11.5 * var(--k));letter-spacing:normal;white-space:nowrap;background:#12121485;border:1px solid #ffffff29;font-weight:600;display:inline-flex}.cc__drop{z-index:5;right:var(--drop-r);width:var(--drop-w);aspect-ratio:100/150;pointer-events:none;transform:translate(var(--ox,0px), calc(-56% + var(--oy,0px)));transition:transform .25s ease-out;position:absolute;top:50%}.cc__drop-shadow{filter:blur(2px);background:radial-gradient(closest-side,#0009,#00000042 62%,#0000);border-radius:50%;height:12%;position:absolute;bottom:-9%;left:8%;right:8%}.cc__drop-glass,.cc__drop-tone{z-index:0;background:linear-gradient(180deg, var(--f2) 0%, var(--f2) calc(var(--band) * .5 + 27%), var(--f3) calc(var(--band) * .5 + 33%), var(--f4) calc(var(--band) * .5 + 40%), var(--f3) calc(var(--band) * .5 + 48%), var(--f2) calc(var(--band) * .5 + 58%), var(--f1) 100%);-webkit-mask-image:linear-gradient(180deg, transparent 24%, #000 calc(var(--band) * .5 + 22%));-webkit-mask-image:linear-gradient(180deg, transparent 24%, #000 calc(var(--band) * .5 + 22%));mask-image:linear-gradient(180deg, transparent 24%, #000 calc(var(--band) * .5 + 22%));position:absolute;top:0;bottom:0}.cc__drop-glass{left:0;right:0}.cc__drop-body{-webkit-mask:var(--drop-mask) center / 100% 100% no-repeat;-webkit-mask:var(--drop-mask) center / 100% 100% no-repeat;mask:var(--drop-mask) center / 100% 100% no-repeat;position:absolute;inset:0;overflow:hidden}.cc__drop-body:before{content:"";z-index:1;background:var(--grain) repeat;background-size:calc(var(--tile-w) / 2) calc(var(--tile-h) / 2);mix-blend-mode:overlay;opacity:.5;-webkit-mask-image:linear-gradient(180deg, transparent calc(var(--band) * .5 + 22%), #000 calc(var(--band) * .5 + 28%));-webkit-mask-image:linear-gradient(180deg, transparent calc(var(--band) * .5 + 22%), #000 calc(var(--band) * .5 + 28%));mask-image:linear-gradient(180deg, transparent calc(var(--band) * .5 + 22%), #000 calc(var(--band) * .5 + 28%));position:absolute;inset:0}.cc__drop-spark{z-index:2;background:var(--spark) repeat;background-size:calc(var(--tile-w) / 2) calc(var(--tile-h) / 2);mix-blend-mode:screen;opacity:.45;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#0000 48%,#000 60% 70%,#0000 82%);mask-image:linear-gradient(#0000 48%,#000 60% 70%,#0000 82%)}.cc__drop-light{z-index:3;mix-blend-mode:screen;background:radial-gradient(ellipse 44% 24% at 50% 86%, #ffffff52, #ffffff1a 60%, transparent 100%), linear-gradient(180deg, var(--f2) 0%, var(--f2) calc(var(--band) * .5 + 27%), var(--f3) calc(var(--band) * .5 + 33%), var(--f4) calc(var(--band) * .5 + 40%), var(--f3) calc(var(--band) * .5 + 48%), var(--f2) calc(var(--band) * .5 + 58%), var(--f1) 100%);position:absolute;top:0;bottom:0;-webkit-mask-image:linear-gradient(#0000 52%,#000 63%);mask-image:linear-gradient(#0000 52%,#000 63%)}.cc__drop-gloss{z-index:4;width:100%;height:100%;position:absolute;inset:0;overflow:visible}.cc__drop-spec{fill:#ffffffe6}.cc.cc--fill{aspect-ratio:auto;--drop-w:calc(65cqh / 1.5);--drop-r:22px;height:100%;min-height:0;max-height:none}.cc.cc--fill .cc__chip{white-space:normal}.cc.cc--fill .cc__stack{padding-left:16px;padding-right:calc(var(--drop-w) + var(--drop-r) + 8px)}.cc.cc--fill .cc__name{letter-spacing:.01em;overflow-wrap:break-word;text-wrap:balance;background:0 0;border:0;border-radius:0;padding:0;font-size:clamp(11px,6.4cqh,15px);line-height:2.2}.cc.cc--fill .cc__name-text{-webkit-box-decoration-break:clone;box-decoration-break:clone;background:#09090bbd;border:1px solid #ffffff29;border-radius:.5em;padding:.34em .55em}.cc--plain{background:var(--color-bg-elevated);border:1px solid var(--color-border)}.cc--plain .cc__stack{padding-right:20px}.cc--plain .cc__code{text-shadow:none}.cc__plain-note{font-size:11px;line-height:1.3}@media (prefers-reduced-motion:reduce){.cc__sheen,.cc__drop{transition:none}}.cc.cc--compact{aspect-ratio:auto;--k:1px;--drop-w:70px;--drop-r:18px;min-height:168px;max-height:none}.cc.cc--compact .cc__stack{padding:16px calc(var(--drop-w) + var(--drop-r) + 8px) 16px 18px}.cc.cc--compact .cc__code{font-size:clamp(30px,11cqw,44px)}.cc.cc--compact .cc__chip{white-space:normal}.cc.cc--compact .cc__name{border-radius:7px;padding:5px 10px;font-size:12px}.cc.cc--compact.cc--in-vehicle{--drop-w:70px;--drop-r:14px;min-height:0}.cc.cc--compact.cc--in-vehicle .cc__stack{padding:11px calc(var(--drop-w) + var(--drop-r) + 8px) 11px 16px}.cc.cc--compact.cc--in-vehicle .cc__code{white-space:nowrap;overflow-wrap:normal;font-size:clamp(15px,5.5cqw,22px)}.cc.cc--compact.cc--in-vehicle .cc__drop{width:auto;height:65%}.cc.cc--wide{aspect-ratio:auto;min-height:56.25cqw;max-height:none}.cc__meta{display:contents}.cc.cc--wide.cc--list{--drop-w:clamp(52px, 16.5cqw, 132px);min-height:41.7cqw}.cc.cc--list .cc__stack{gap:8px;padding-top:12px;padding-bottom:12px}.cc.cc--list .cc__meta{flex-wrap:wrap;align-items:center;gap:8px;max-width:100%;display:flex}.cc.cc--list .cc__name{border-radius:8px;padding:7px 12px;font-size:14px}.cc--loading{background:var(--color-bg-elevated);border-top-color:var(--color-border);box-shadow:inset 0 0 0 1px var(--color-border)}.cc--loading:after{display:none}.cc--loading .cc__code,.cc--loading .cc__name,.cc--loading .cc__chip{color:#0000;text-shadow:none;background:var(--color-border);-webkit-backdrop-filter:none;backdrop-filter:none;border-color:#0000;border-radius:6px}.cc.cc--loading .cc__name-text{background:0 0;border-color:#0000}.cc.cc--loading.cc--fill .cc__name-text{background:var(--color-border)}.cc__drop-ph{background:var(--color-border);-webkit-mask:var(--drop-mask) center / 100% 100% no-repeat;-webkit-mask:var(--drop-mask) center / 100% 100% no-repeat;mask:var(--drop-mask) center / 100% 100% no-repeat;position:absolute;inset:0}@keyframes cc-pulse{50%{opacity:.55}}@media (prefers-reduced-motion:no-preference){.cc--loading{animation:1.6s ease-in-out infinite cc-pulse}}
@keyframes band-label-scan{0%{transform:translateY(0)}to{transform:translateY(calc(100% - 2px))}}.band-scan{pointer-events:none;animation:2.8s ease-in-out infinite alternate band-label-scan;position:absolute;inset:0}.band-scan:before{content:"";background:linear-gradient(90deg, transparent, var(--color-accent) 20%, var(--color-accent) 80%, transparent);height:2px;box-shadow:0 0 14px 3px color-mix(in srgb, var(--color-accent) 55%, transparent);position:absolute;top:0;left:0;right:0}@media (prefers-reduced-motion:reduce){.band-scan{animation:none;display:none}}