.active-diagnostic-panel{--adp-ink: var(--proto-accent, #061a3a);--adp-text: var(--proto-text, #10213b);--adp-muted: rgb(6 26 58 / .58);--adp-line: rgb(6 26 58 / .12);--adp-line-strong: rgb(6 26 58 / .2);--adp-blue: #0068ff;--adp-radius: 18px;position:relative;isolation:isolate;margin:0 0 26px;padding:22px 0 0;color:var(--adp-text);border-top:1px solid var(--adp-line-strong);border-bottom:1px solid var(--adp-line)}.active-diagnostic-panel,.active-diagnostic-panel *{box-sizing:border-box}.active-diagnostic-panel__grid{position:absolute;top:-16px;right:-14px;bottom:-16px;left:-14px;z-index:-1;pointer-events:none;opacity:.28;background:linear-gradient(rgb(6 26 58 / .045) 1px,transparent 1px),linear-gradient(90deg,rgb(6 26 58 / .035) 1px,transparent 1px),radial-gradient(circle at 86% 12%,rgb(0 104 255 / .08),transparent 34%);background-size:44px 44px,44px 44px,auto;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 82%,transparent)}.active-diagnostic-panel__index{display:grid;gap:12px;padding-bottom:20px}.active-diagnostic-panel__eyebrow{display:inline-flex;align-items:center;gap:9px;width:fit-content;color:#061a3a7a;font-size:10px;font-weight:700;letter-spacing:.16em;line-height:1;text-transform:uppercase}.active-diagnostic-panel__eyebrow:before{content:"";width:7px;aspect-ratio:1;border-radius:50%;background:var(--adp-blue);box-shadow:0 0 0 4px #0068ff1a}.active-index{display:grid;gap:10px}.active-index__label{color:var(--adp-ink);font-size:clamp(18px,2vw,23px);font-weight:760;line-height:1.05;letter-spacing:-.035em}.active-index__meter{display:grid;grid-template-columns:1fr auto;align-items:center;gap:14px}.active-index__track{position:relative;display:block;height:1px;min-width:120px;background:var(--adp-line-strong)}.active-index__fill{position:absolute;inset:0 auto 0 0;width:var(--active-index-value, 86%);background:var(--adp-blue);box-shadow:0 0 16px #0068ff3d}.active-index__dots{position:absolute;inset:50% 0 auto;translate:0 -50%;display:flex;justify-content:space-between;pointer-events:none}.active-index__dots i{width:7px;aspect-ratio:1;border-radius:50%;background:var(--adp-blue);box-shadow:0 0 0 4px #ffffffe0,0 0 0 5px #061a3a0a}.active-index__value{color:var(--adp-blue);font-size:14px;font-weight:800;font-variant-numeric:tabular-nums}.active-signals{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:2px 0 20px}.active-signal{--signal-color: var(--adp-blue);position:relative;display:grid;grid-template-rows:auto 1fr;align-content:start;gap:12px;min-width:0;min-height:182px;padding:16px 14px 15px;overflow:hidden;border:1px solid var(--adp-line);border-radius:var(--adp-radius);background:radial-gradient(circle at 100% 0,color-mix(in oklab,var(--signal-color),transparent 88%),transparent 42%),#ffffff8a;transition:border-color .22s ease,background-color .22s ease,transform .22s ease,box-shadow .22s ease}.active-signal__icon{display:grid;place-items:center;width:64px;max-width:100%;aspect-ratio:1;border-radius:16px;background:radial-gradient(circle at 30% 22%,#fff,color-mix(in oklab,var(--signal-color),white 82%));border:1px solid rgb(255 255 255 / .78);box-shadow:inset 0 0 0 1px #061a3a0a,0 10px 22px #061a3a1a}.active-signal__icon img{display:block;width:36px;height:36px;max-width:100%;object-fit:contain}.active-signal__fallback{color:var(--signal-color);font-size:18px;font-weight:820;line-height:1;text-transform:uppercase}.active-signal__body{display:grid;align-content:start;gap:4px;min-width:0;max-width:100%}.active-signal__name,.active-signal__claim,.active-signal__label{display:block;min-width:0;max-width:100%;overflow-wrap:anywhere;word-break:break-word;-webkit-hyphens:auto;hyphens:auto}.active-signal__name{color:var(--adp-ink);font-size:14px;font-weight:780;line-height:1.2;letter-spacing:-.015em}.active-signal__claim{color:var(--adp-muted);font-size:12px;line-height:1.35}.active-signal__label{margin-top:6px;color:#061a3a5c;font-size:9px;font-style:normal;font-weight:720;letter-spacing:.12em;line-height:1.2;text-transform:uppercase}.active-diagnostic-panel__more{-webkit-appearance:none;appearance:none;display:inline-flex;align-items:center;width:fit-content;margin:0 0 18px;padding:0;border:0;background:transparent;color:#0068ffd1;font-size:10px;font-weight:780;letter-spacing:.12em;line-height:1.3;text-transform:uppercase;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;cursor:pointer}.active-diagnostic-panel__more:hover{color:var(--adp-blue)}.active-signal:hover{transform:translateY(-2px);border-color:color-mix(in oklab,var(--signal-color),transparent 66%);box-shadow:0 14px 34px #061a3a14}.active-signal:hover .active-signal__icon{box-shadow:inset 0 0 0 1px #061a3a0a,0 12px 26px color-mix(in oklab,var(--signal-color),transparent 78%)}.active-signal--pore-clarity{--signal-color: #0068ff}.active-signal--exfoliation{--signal-color: #2f7dff}.active-signal--gentle-exfoliation{--signal-color: #5aa6ff}.active-signal--tone-clarity{--signal-color: #5277d8}.active-signal--calming{--signal-color: #7da88e}.active-signal--soothing{--signal-color: #d19a32}.active-signal--hydration{--signal-color: #4d9bff}.active-signal--barrier{--signal-color: #b8a46e}.active-signal--oil-balance{--signal-color: #173d82}.active-signal--mineral{--signal-color: #7b8795}.active-signal--brightening{--signal-color: #d7a335}.active-signal--renewal{--signal-color: #af6fa8}.active-signal--firmness{--signal-color: #7d77d8}.active-signal--antioxidant{--signal-color: #986bd1}.active-signal--repair{--signal-color: #6d87d8}.active-signal--energizing{--signal-color: #8b6c45}.active-signal--active{--signal-color: #0068ff}@supports not (color: color-mix(in oklab,#000,#fff)){.active-signal{background:#ffffff9e}.active-signal__icon{background:#eef6ff}.active-signal:hover{border-color:#0068ff47}}.active-diagnostic-modal{width:min(92vw,560px);max-height:min(82vh,680px);padding:0;overflow:hidden;border:1px solid rgb(255 255 255 / .72);border-radius:22px;color:var(--adp-text, #10213b);background:radial-gradient(circle at 88% 0,rgb(0 104 255 / .1),transparent 34%),linear-gradient(135deg,#fffffff5,#eff8ffeb);box-shadow:0 34px 90px #061a3a42,inset 0 0 0 1px #ffffffa8}.active-diagnostic-modal::backdrop{background:#0610206b;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.active-diagnostic-modal__surface{position:relative;display:grid;gap:18px;max-height:min(82vh,680px);overflow:auto;padding:26px}.active-diagnostic-modal__surface:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;pointer-events:none;opacity:.28;background:linear-gradient(rgb(6 26 58 / .045) 1px,transparent 1px),linear-gradient(90deg,rgb(6 26 58 / .035) 1px,transparent 1px);background-size:40px 40px;-webkit-mask-image:linear-gradient(to bottom,#000,transparent 92%);mask-image:linear-gradient(to bottom,#000,transparent 92%)}.active-diagnostic-modal__close{position:absolute;top:16px;right:16px;display:grid;place-items:center;width:36px;aspect-ratio:1;border:1px solid rgb(6 26 58 / .12);border-radius:12px;background:#ffffffa8;color:var(--adp-ink, #061a3a);font-size:24px;line-height:1;cursor:pointer}.active-diagnostic-modal__header{padding-right:46px}.active-diagnostic-modal__header span{display:block;margin-bottom:9px;color:#061a3a7a;font-size:10px;font-weight:760;letter-spacing:.16em;line-height:1;text-transform:uppercase}.active-diagnostic-modal__header h2{margin:0;color:var(--adp-ink, #061a3a);font-size:clamp(24px,4vw,34px);line-height:1;letter-spacing:-.055em}.active-diagnostic-modal__header p{margin:10px 0 0;color:#061a3a99;font-size:13px;line-height:1.45}.active-diagnostic-modal__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.active-diagnostic-modal__item{display:grid;grid-template-columns:38px minmax(0,1fr);gap:11px;align-items:center;min-width:0;padding:10px;border:1px solid rgb(6 26 58 / .1);border-radius:14px;background:#ffffff85}.active-diagnostic-modal__glyph{display:grid;place-items:center;width:38px;aspect-ratio:1;border-radius:12px;color:var(--adp-blue, #0068ff);background:radial-gradient(circle at 30% 22%,#fff,#e2f1ff);border:1px solid rgb(255 255 255 / .78);font-size:13px;font-weight:820;line-height:1}.active-diagnostic-modal__name{min-width:0;color:var(--adp-ink, #061a3a);font-size:13px;font-weight:720;line-height:1.25;overflow-wrap:anywhere;word-break:break-word}@media(max-width:989px){.active-signals{grid-template-columns:repeat(2,minmax(0,1fr))}.active-signal{min-height:168px}}@media(max-width:749px){.active-diagnostic-panel{margin-bottom:24px;padding-top:20px}.active-diagnostic-panel__index{padding-bottom:18px}.active-index__label{font-size:20px}.active-signals{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding-bottom:18px}.active-signal{min-height:160px;padding:14px 12px;border-radius:16px}.active-signal__icon{width:58px;border-radius:15px}.active-signal__icon img{width:33px;height:33px}.active-signal__name{font-size:13px}.active-signal__claim{font-size:11.5px}.active-signal__label{display:none}}@media(max-width:749px){.active-diagnostic-modal{width:min(94vw,520px);border-radius:18px}.active-diagnostic-modal__surface{padding:22px 16px 18px}.active-diagnostic-modal__list{grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){.active-diagnostic-panel *,.active-diagnostic-panel:before,.active-diagnostic-panel:after{transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}}
/*# sourceMappingURL=/cdn/shop/t/21/assets/component-active-diagnostic.css.map */