.htc{--htc-accent:var(--wp--preset--color--primary,currentColor);--htc-line:color-mix(in srgb,currentColor 19%,transparent);font-family:inherit;color:#202422;background:#fff;line-height:1.5;width:100%;max-width:1440px;margin:0 auto;isolation:isolate}.htc *{box-sizing:border-box}.htc [hidden]{display:none!important}.htc button,.htc input,.htc select{font:inherit;letter-spacing:normal;text-transform:none}.htc button{cursor:pointer}.htc button:focus-visible,.htc input:focus-visible,.htc select:focus-visible{outline:3px solid currentColor;outline-offset:4px}.htc-toolbar{display:flex;gap:12px;flex-wrap:wrap;padding:0 0 16px}.htc-toolbar label{margin:0;display:block}.htc-toolbar .htc-search{flex:1 1 260px}.htc input[type=search],.htc select{color:inherit;background:transparent;border:1px solid var(--htc-line);border-radius:8px;min-height:46px;padding:10px 14px;max-width:100%;box-shadow:none}.htc input[type=search]{width:100%}.htc select{padding-right:30px}.htc select option{color:#171717;background:#fff}.htc-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 20px}.htc-count{font-size:.8rem;opacity:.7;margin:0}.htc-switch{display:flex;gap:4px;border:1px solid var(--htc-line);border-radius:30px;padding:4px}.htc-switch button,.htc-background button{border:0;border-radius:22px;padding:7px 16px;background:transparent;color:inherit;font-size:.8rem;min-height:36px;box-shadow:none}.htc-switch button[aria-pressed=true],.htc-background button[aria-pressed=true]{background:var(--htc-accent);color:var(--wp--preset--color--base,#fff)}.htc-switch button[aria-pressed=true]{background:color-mix(in srgb,currentColor 13%,transparent);color:inherit}.htc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:24px 20px}.htc-card{min-width:0;border:1px solid var(--htc-line);border-radius:14px;overflow:hidden;background:transparent;transition:transform .2s,box-shadow .2s}.htc-card:hover{transform:translateY(-4px);box-shadow:0 10px 30px #00000012}.htc .htc-card-open{display:block;padding:0!important;margin:0;width:100%;text-align:left;border:0;background:none!important;color:inherit!important;box-shadow:none;border-radius:0;line-height:inherit}.htc-media{position:relative;aspect-ratio:1;background:#fff;display:flex;align-items:center;overflow:hidden}.htc-expand{position:absolute;right:10px;bottom:10px;background:#ffffffed;color:#222;width:28px;height:28px;text-align:center;border-radius:50%;font:19px/28px sans-serif}.htc-card-body{padding:17px 18px 20px}.htc-code{font-size:.72rem;letter-spacing:.1em;font-weight:650;opacity:.68}.htc .htc-card h3{font-weight:600;font-family:inherit;font-size:1.05rem;line-height:1.35;letter-spacing:-.015em;margin:5px 0 9px;color:inherit;overflow-wrap:anywhere}.htc-finish{display:flex;align-items:center;gap:7px;margin:0;font-size:.68rem;opacity:.8}.htc-finish i{display:inline-block;flex-shrink:0;width:10px;height:10px;border-radius:50%;background:var(--htc-color);border:1px solid #0002}.htc-private{margin:0;padding:0 18px 12px;font-size:.7rem;overflow-wrap:anywhere}.htc-record-stage{display:none;width:100%;height:100%;align-items:center;justify-content:center;background-color:#fff;background-image:conic-gradient(#fff 25%,#e4e6e5 0 50%,#fff 0 75%,#e4e6e5 0);background-size:34px 34px}.htc-record{width:82%;aspect-ratio:1;position:relative;filter:drop-shadow(3px 7px 6px #0002)}.htc-record i{position:absolute;inset:0;border-radius:50%;background:repeating-radial-gradient(circle,transparent 0 2px,rgba(0,0,0,0.084706) 2.6px 3.2px,transparent 4px 5px),conic-gradient(from 30deg,transparent,#ffffff48,transparent,#00000018,transparent,#ffffff30,transparent),var(--htc-color);opacity:var(--htc-alpha);box-shadow:inset 0 0 0 2px #ffffff55;mask:radial-gradient(circle,transparent 0 2.2%,#000 2.6%)}.htc-record b{position:absolute;width:31%;height:31%;top:34.5%;left:34.5%;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#fff;padding:0;box-shadow:0 0 0 1px #0000000a}.htc .htc-logo{width:84%;height:84%;max-width:none;display:block;object-fit:contain;border:0;border-radius:0}.htc [data-effect=metallic] .htc-record i{background:repeating-radial-gradient(circle,transparent 0 2px,rgba(255,255,255,0.12) 3px,transparent 4px),conic-gradient(#fff7,transparent,#0004,#fff7,transparent,#0004,#fff7),var(--htc-color)}.htc [data-effect=glitter] .htc-record i{background:radial-gradient(circle,#fff 0 1px,transparent 1.5px) 0 0/13px 17px,repeating-radial-gradient(circle,transparent 0 3px,rgba(0,0,0,0.06) 4px),var(--htc-color)}.htc[data-view=vinyl] .htc-grid .htc-swatch{display:none}.htc[data-view=vinyl] .htc-grid .htc-record-stage{display:flex}.htc-card[data-kind=opaque] .htc-record-stage{background:#fff}.htc-notice{font-size:.76rem;line-height:1.7;opacity:.72;border-top:1px solid var(--htc-line);margin:32px 0 0;padding-top:20px;max-width:900px}.htc-empty{text-align:center;padding:60px 15px}.htc-empty button,.htc-copy{background:#202422;color:white;border:0;border-radius:8px;padding:12px 22px}.htc-dialog{padding:0;border:1px solid #ddd;border-radius:20px;background:#fff;color:#202422;max-width:min(980px,calc(100vw - 28px));width:980px;max-height:calc(100dvh - 40px);overflow:auto;box-shadow:0 24px 100px #0004;font:inherit}.htc-dialog::backdrop{background:#101816b8;backdrop-filter:blur(7px)}.htc-close{position:absolute;right:12px;top:12px;z-index:2;border:1px solid #ddd;border-radius:50%;width:40px;height:40px;background:#fff;color:#222;font:26px/1 sans-serif!important;padding:0}.htc-detail{display:grid;grid-template-columns:1fr 1fr}.htc-detail-visual{padding:40px 24px 24px;background:#fff}.htc-detail-stage{display:flex;aspect-ratio:1;border-radius:12px;overflow:hidden;height:auto}.htc-detail-stage[data-background=light]{background:#fff}.htc-detail-stage[data-background=dark]{background:#242927}.htc-detail-stage .htc-record{width:88%}.htc-detail-stage .htc-record b{font-size:12px}.htc-detail-label{font-size:.7rem;text-align:center;margin:15px 0;opacity:.7}.htc-background{display:flex;flex-wrap:wrap;justify-content:center;gap:5px}.htc-background button{border:1px solid #babdb7;color:#202422;font-size:.7rem;padding:6px 12px}.htc-background button[aria-pressed=true]{background:#202422;color:white}.htc-detail-info{padding:60px 32px 30px}.htc .htc-detail-info h3{font-family:inherit;font-size:2rem;line-height:1.15;letter-spacing:-.04em;margin:8px 0 16px;color:inherit}.htc-detail-info .htc-finish{font-size:.8rem}.htc-detail-info figure{margin:24px 0 18px}.htc-detail-info figure img{width:100%;height:auto;display:block;border-radius:8px}.htc-detail-info figcaption{font-size:.72rem;opacity:.7;margin-top:8px}.htc-flat{display:flex;align-items:center;gap:10px;font-size:.72rem;margin:18px 0 24px}.htc-flat i{width:42px;height:42px;border:1px solid #0002;border-radius:8px;background:var(--htc-color)}.htc-detail-info .htc-private{padding:15px 0;margin:0}.htc-copy-status{min-height:1.5em;font-size:.75rem;margin:8px 0}.htc-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:700px){.htc-toolbar{gap:8px}.htc-toolbar label:not(.htc-search){flex:1 1 130px}.htc select{width:100%;font-size:.8rem}.htc-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.htc-card-body{padding:12px}.htc .htc-card h3{font-size:.9rem}.htc-finish{font-size:.6rem;align-items:flex-start}.htc-finish i{margin-top:3px}.htc-detail{grid-template-columns:1fr}.htc-detail-visual{padding:28px 30px 20px}.htc-detail-stage{max-width:300px;margin:auto}.htc-detail-info{padding:26px}.htc-switch button{padding:7px 10px;font-size:.7rem}}@media(max-width:340px){.htc-grid{grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){.htc *{transition:none!important;animation:none!important}}

/* Large colour fields keep the sampled hue dominant; light effects are subtle. */
.htc-swatch{display:block;width:100%;height:100%;position:relative;background:linear-gradient(135deg,#ffffff10,transparent 46%,#0000000c),var(--htc-color)}
.htc-card[data-kind=transparent] .htc-swatch,.htc-card[data-kind=translucent] .htc-swatch{background:linear-gradient(115deg,#ffffff40,transparent 46%,#00000010),var(--htc-color)}
.htc-card[data-kind=transparent] .htc-swatch:after,.htc-card[data-kind=translucent] .htc-swatch:after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 22%,#ffffff0d 22% 43%,transparent 43% 55%,#ffffff1c 55% 57%,transparent 57%)}
.htc [data-effect=metallic] .htc-swatch{background:linear-gradient(115deg,#00000024,transparent 24%,#ffffff50 46%,transparent 64%,#00000028),var(--htc-color)}
.htc [data-effect=glitter] .htc-swatch{background:radial-gradient(circle,#fff9 0 .7px,transparent 1.5px) 0 0/19px 23px,radial-gradient(circle,#fff7 0 .5px,transparent 1.2px) 5px 7px/29px 31px,linear-gradient(115deg,#ffffff35,transparent 55%,#0000000d),var(--htc-color)}
.htc-card{background:#fff}.htc-dialog{background:#fff}.htc-detail-visual{background:#fff;border-right:1px solid #eee}.htc-detail-info .htc-notice{margin:18px 0 0;padding-top:14px;font-size:.67rem;line-height:1.6}.htc-detail-stage[data-background=light]{background:#fff}