@font-face{font-family:Polin;src:url('/fonts/polin-regular.woff2');font-weight:400 600;font-display:swap}@font-face{font-family:Polin;src:url('/fonts/polin-bold.woff2');font-weight:700 900;font-display:swap}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;font-family:Polin,Arial,sans-serif;color:#132d50;background:radial-gradient(ellipse at 0 100%,#dfeafa,transparent 45%),radial-gradient(ellipse at 100% 0,#fff0f2,transparent 40%),#fbfcff;min-height:100svh}button,a,select{-webkit-tap-highlight-color:transparent}button,select{font:inherit}button{cursor:pointer}button:disabled{cursor:default}button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid #bc2144;outline-offset:5px}header{max-width:1500px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:20px 34px;gap:16px}header img{width:210px;height:70px;object-fit:contain}.header-actions{display:flex;gap:8px}.quiet{border:1px solid #d8e0eb;background:#ffffffa6;color:#233e63;padding:10px 17px;border-radius:12px;text-decoration:none;font-size:15px}.quiet:hover{background:#eaf0f9}main{max-width:1440px;margin:auto;padding:8px 30px 30px}.intro{text-align:center}.eyebrow{font-size:17px;letter-spacing:.02em;color:#9e2643;margin:12px 0}h1{font-size:clamp(38px,5vw,72px);line-height:1.1;margin:10px 0 14px;font-weight:900}h1 span{color:#c61d42}#instruction{font-size:20px;color:#556a87;min-height:27px;margin:14px 0 32px}.cards{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:14px;position:relative;isolation:isolate;padding:12px 0 25px}.card{padding:0;border:0;background:none;perspective:1100px;aspect-ratio: .66;color:#132d50;min-width:0;position:relative;transition:transform .25s;--accent:#eaf2fd}.card:hover:not(:disabled){transform:translateY(-10px)}.card-inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .65s cubic-bezier(.2,.7,.2,1)}.card.face-down .card-inner{transform:rotateY(180deg)}.face{position:absolute;inset:0;backface-visibility:hidden;border-radius:20px;box-shadow:0 12px 25px #193d6914;border:1px solid #ffffff;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:10px}.front{background:var(--accent)}.front strong{font-size:clamp(17px,1.5vw,23px);line-height:1.25;min-height:58px;display:flex;align-items:center;justify-content:center;padding:0 4px}.art{width:180px;height:166px;background-image:url('/values-assets/reference.png');background-size:1570px 935px;flex-shrink:0;max-width:100%;border-radius:12px}.front .art{transform:scale(.85);margin: -10px -10px}.back{transform:rotateY(180deg);background:linear-gradient(140deg,#234879,#122b4a);color:white;outline:1px solid #ffffff55;outline-offset:-11px}.back .question{font-size:76px;line-height:1;color:#fff}.back span:last-child{font-size:16px;color:#dce7fb}.back img{width:55px;height:auto;filter:brightness(0) invert(1);position:absolute;top:24px}.actions{display:flex;justify-content:center;align-items:center;gap:12px;margin-top:16px}.primary{border:0;border-radius:15px;background:#c71c40;color:white;padding:15px 32px;font-weight:700;font-size:21px;box-shadow:0 8px 20px #c71c4022}.primary:hover{background:#a91133}.primary:disabled{opacity:.65}.reveal{text-align:center;min-height:58vh;padding:16px;animation:appear .7s both}.reveal h2{font-size:clamp(40px,6vw,84px);line-height:1.1;margin:12px 0 24px}.reveal>p:not(.eyebrow){font-size:23px;color:#526883}.reveal .art{margin:15px auto;transform:scale(1.25);box-shadow:0 15px 40px #20395b12}.reveal .eyebrow{font-size:24px}.reveal .primary{margin-top:20px}body.revealed .intro,body.revealed .cards,body.revealed .actions{display:none}footer{text-align:center;padding:15px 0 20px}dialog{border:1px solid #dce4ef;border-radius:24px;padding:30px;max-width:470px;width:calc(100% - 32px);color:#142d50;box-shadow:0 25px 100px #132d5040}dialog::backdrop{background:#10234088;backdrop-filter:blur(5px)}.dialog-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}dialog h2{margin:0;font-size:24px}dialog label{display:block;margin-bottom:10px}dialog select{width:100%;padding:12px;background:white;color:#132d50;border:1px solid #acbcd1;border-radius:10px;font-size:19px}dialog p{line-height:1.6;font-size:15px;color:#54657b}dialog .primary{width:100%;font-size:18px}.mixing .card{pointer-events:none}.mixing .card-inner{transition:none}@keyframes appear{from{opacity:0;transform:translateY(22px) scale(.94)}to{opacity:1;transform:none}}@media(min-width:1500px){main{padding-top:30px}.cards{margin-top:35px}}@media(max-width:1000px){.cards{grid-template-columns:repeat(4,minmax(0,1fr));max-width:780px;margin:auto}.card{aspect-ratio:.88}.front .art{transform:scale(.75);margin:-22px}.front strong{font-size:19px;min-height:42px}.face{gap:4px}.back .question{font-size:62px}}@media(max-width:600px){header{padding:12px;flex-wrap:wrap}header img{width:150px;height:50px}.header-actions{width:100%;justify-content:center}.quiet{font-size:14px;padding:9px 13px}main{padding:12px 14px}.cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.card{aspect-ratio:.7}.face{border-radius:14px}.front .art{transform:scale(.6);margin:-32px -30px;max-width:none}.front strong{font-size:16px;min-height:42px}.back img{width:32px;top:17px}.back span:last-child{font-size:13px}.back .question{font-size:48px}#instruction{font-size:17px;margin-bottom:16px}.eyebrow{font-size:15px}.primary{font-size:18px;padding:14px 22px}.reveal>p:not(.eyebrow){font-size:19px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* Keep the logo centered independently of the widths of the controls. */
header{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}header>a{justify-self:start}header>img{grid-column:2;justify-self:center}.header-actions{justify-self:end}
/* Each illustration scales as a complete centered frame, with room for its label. */
.card{min-height:270px}.face{padding:18px 12px;gap:16px}.front .art,.art{background:none;width:100%;max-width:170px;height:auto;aspect-ratio:1.12;transform:none;margin:0;flex-shrink:1;border-radius:0}.art svg{display:block;width:100%;height:100%;overflow:hidden}.front strong{font-size:clamp(17px,1.45vw,22px);line-height:1.35;min-height:60px;width:100%;text-align:center;justify-content:center;flex-shrink:0;overflow-wrap:normal;word-break:normal}.reveal .art{max-width:225px;transform:none;margin:20px auto;box-shadow:none}
@media(max-width:1000px){.card{min-height:245px}.front .art{max-width:155px;margin:0;transform:none}.front strong{font-size:19px}}
@media(max-width:700px){header{grid-template-columns:1fr auto 1fr;gap:10px}header>img{width:160px}.header-actions{grid-column:1/-1;justify-self:center;width:auto}.card{min-height:215px;aspect-ratio:auto}.face{padding:14px 8px;gap:12px}.front .art{width:100%;max-width:120px;margin:0;transform:none}.front strong{font-size:16px;min-height:65px}}