/* finesse · register=brand · component=content-card · state=click-flip+translucent-rim · material=gallery-glass-edge */
@property --card-rim-angle{syntax:"<angle>";initial-value:35deg;inherits:true}
:root{--card-rim:rgba(102,129,64,.32);--card-rim-light:rgba(165,195,108,.78);--card-rim-peak:rgba(234,252,201,.94);--card-rim-halo:rgba(138,174,84,.17);--card-rim-inner:rgba(231,248,201,.20);--card-rim-dark:rgba(220,235,191,.29);--card-rim-dark-light:rgba(216,239,167,.82)}
:root{--card-radius:20px}
.flip-card{perspective:1050px;--card-rim-angle:35deg;border-radius:var(--card-radius)}
.flip-inner,.flip-face{border-radius:var(--card-radius)}
.flip-face:after{border-radius:inherit}
.flip-image{border-radius:calc(var(--card-radius) - 1px) calc(var(--card-radius) - 1px) 0 0}
.article-card,.interest-card,.comic-stage,.result-preview,.fit-column,.lab-plan,.action-plan,.lab-panel,.quote-panel,.quiz-result .first-step{border-radius:var(--card-radius)}
.comic-stage{overflow:hidden}
.flip-inner{transform:rotateY(0deg);transform-style:preserve-3d;transition:transform .92s cubic-bezier(.22,.82,.16,1)}
.flip-card.is-flipped .flip-inner{transform:rotateY(180deg)}
.flip-face{border:1px solid var(--card-rim);backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:inset 0 0 0 1px var(--card-rim-inner);transition:border-color .4s,box-shadow .4s}
.flip-front{transform:rotateY(0deg) translateZ(.5px)}.flip-back{transform:rotateY(180deg) translateZ(.5px)}
.flip-face:after{content:"";position:absolute;inset:0;padding:1.5px;pointer-events:none;z-index:4;background:conic-gradient(from var(--card-rim-angle),transparent 0deg 220deg,var(--card-rim-light) 257deg,var(--card-rim-peak) 280deg,var(--card-rim-light) 303deg,transparent 340deg 360deg);-webkit-mask:linear-gradient(currentColor 0 0) content-box,linear-gradient(currentColor 0 0);mask:linear-gradient(currentColor 0 0) content-box,linear-gradient(currentColor 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.5;transition:opacity .35s}
.flip-card.is-flipped,.flip-card:focus-within{animation:card-rim-orbit 4.8s linear 2}
.flip-card.is-flipped .flip-face,.flip-card:focus-within .flip-face{border-color:var(--card-rim-light);box-shadow:0 0 22px 1px var(--card-rim-halo),inset 0 0 0 1px var(--card-rim-inner)}
.flip-card.is-flipped .flip-face:after,.flip-card:focus-within .flip-face:after{opacity:1}
.screening-spread .flip-card{--card-rim:var(--card-rim-dark);--card-rim-light:var(--card-rim-dark-light)}
.flip-toggle{width:auto;min-width:88px;min-height:44px;padding:0 12px;display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;font:14px var(--sans);background:transparent;position:relative}
.flip-toggle svg{width:18px;height:18px;flex-shrink:0}.flip-toggle:hover{transform:none}.flip-toggle span{pointer-events:none}.back-top .flip-toggle{min-width:110px;letter-spacing:0;font:14px var(--sans)}
.flip-front .flip-copy{cursor:pointer}.back-summary{cursor:text}.flip-bottom{align-items:center}.cover-turn{border:1px solid var(--card-rim-dark);background:var(--ink);opacity:.94}
@keyframes card-rim-orbit{from{--card-rim-angle:35deg}to{--card-rim-angle:395deg}}
@media(hover:hover) and (pointer:fine){.flip-card:hover{animation:card-rim-orbit 4.8s linear 2}.flip-card:hover .flip-face{border-color:var(--card-rim-light);box-shadow:0 0 22px 1px var(--card-rim-halo),inset 0 0 0 1px var(--card-rim-inner)}.flip-card:hover .flip-face:after{opacity:1}.flip-card:hover .flip-inner{will-change:transform}.flip-card.is-flipped:hover{transform:none}}
@media(max-width:780px){.flip-toggle{min-width:82px;padding:0 10px}.back-top .flip-toggle{min-width:104px}.flip-bottom{gap:10px}.flip-copy{min-width:0}}
@media(prefers-reduced-motion:reduce){.flip-card,.flip-card:hover{animation:none}.flip-inner{transition:none}.flip-card.is-flipped .flip-inner{transform:none}.flip-card.is-flipped .flip-back{transform:none;z-index:2}.flip-card.is-flipped .flip-front{visibility:hidden}.flip-face:after{opacity:.7}.flip-face{transition:none}}

@supports not ((mask-composite:exclude) or (-webkit-mask-composite:xor)){.flip-face:after{display:none}}