:root{--ink:#262321;--muted:#77716b;--paper:#f3eee7;--line:rgba(38,35,33,.16);--accent:#ff5d51;--ease:cubic-bezier(.22,.75,.2,1)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;min-height:100vh;overflow-x:hidden}.grain{position:fixed;inset:0;pointer-events:none;z-index:20;opacity:.18;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E")}.masthead{height:84px;display:flex;align-items:center;justify-content:space-between;padding:0 4.5vw;border-bottom:1px solid var(--line);position:relative;z-index:3}.brand{color:inherit;text-decoration:none;display:flex;align-items:center;gap:12px;text-transform:uppercase;letter-spacing:.12em;font-size:12px;font-weight:700}.brand-mark{height:38px;width:38px;border:1px solid var(--ink);border-radius:50%;display:grid;place-items:center;font-family:Georgia,serif;font-size:11px;letter-spacing:-.08em}.status{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.12em}.status i{height:7px;width:7px;border-radius:50%;background:#58a67a;box-shadow:0 0 0 5px rgba(88,166,122,.12)}main{padding:0 4.5vw}.hero{position:relative;padding:68px 0 45px;max-width:1300px}.eyebrow{font-size:10px;letter-spacing:.23em;font-weight:700;margin:0 0 18px;color:var(--muted)}h1{font:400 clamp(52px,8.3vw,132px)/.83 Georgia,'Times New Roman',serif;letter-spacing:-.06em;margin:0;max-width:960px}h1 em{font-weight:400;color:var(--accent)}.intro{position:absolute;max-width:320px;right:2vw;bottom:54px;color:var(--muted);font:15px/1.55 Georgia,serif}.progress{margin-top:58px;display:flex;align-items:center;position:relative;max-width:560px}.progress-line{height:1px;background:var(--line);position:absolute;left:10px;right:10px;top:10px}#steps{display:flex;width:100%;justify-content:space-between;z-index:1}.step{width:21px;height:21px;border:1px solid #aaa29a;border-radius:50%;background:var(--paper);display:grid;place-items:center;font-size:9px;color:#8b847e;transition:.5s var(--ease)}.step.done{background:var(--ink);border-color:var(--ink);color:white}.step.current{background:var(--accent);border-color:var(--accent);color:white;box-shadow:0 0 0 7px rgba(255,93,81,.13)}.atlas{display:flex;flex-direction:column;gap:22px;padding-bottom:70px}.level{display:grid;grid-template-columns:repeat(7,minmax(110px,1fr));gap:clamp(8px,1.35vw,22px);transition:all .75s var(--ease);transform-origin:top left}.level.collapsed{grid-template-columns:repeat(7,72px);gap:10px;opacity:.78}.level.collapsed .card{height:88px;border-radius:16px}.level.collapsed .card:not(.chosen){opacity:.22;filter:saturate(.3)}.level.collapsed .card-copy,.level.collapsed .choose{display:none}.level.collapsed .card.chosen{opacity:1;box-shadow:0 0 0 2px var(--card-color)}.card{--card-color:#999;height:clamp(235px,29vw,440px);border:0;padding:0;border-radius:clamp(18px,2.2vw,34px);overflow:hidden;position:relative;cursor:pointer;background:#e6dfd6;transition:transform .6s var(--ease),opacity .55s var(--ease),height .75s var(--ease),border-radius .75s var(--ease),box-shadow .3s;text-align:left;color:white;isolation:isolate;animation:arrive .75s var(--ease) both;animation-delay:calc(var(--i) * 55ms)}.card:hover{transform:translateY(-9px)}.card:focus-visible{outline:3px solid var(--ink);outline-offset:4px}.card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s var(--ease)}.card:hover img{transform:scale(1.045)}.card::after{content:"";position:absolute;inset:35% 0 0;background:linear-gradient(transparent,rgba(22,19,18,.75));z-index:1}.card-copy{position:absolute;left:16px;right:16px;bottom:16px;z-index:2}.card-name{display:block;font:clamp(15px,1.5vw,23px)/1.05 Georgia,serif;margin-bottom:6px}.card-count{font-size:9px;letter-spacing:.13em;text-transform:uppercase;opacity:.76}.choose{position:absolute;right:14px;top:14px;z-index:2;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.88);color:var(--ink);font-size:14px;transform:scale(0);transition:.35s var(--ease)}.card:hover .choose{transform:scale(1)}.loading{height:220px;display:flex;justify-content:center;align-items:center;flex-direction:column;gap:16px;color:var(--muted);font:12px Georgia,serif}.loading i{display:block;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);border-top-color:var(--accent);animation:spin .8s linear infinite}.result{border-top:1px solid var(--line);padding:80px 0 120px;animation:fade .8s var(--ease)}.result h2{font:400 clamp(42px,7vw,95px)/.95 Georgia,serif;letter-spacing:-.05em;margin:0 0 24px}.result>p:not(.eyebrow){max-width:470px;color:var(--muted);font:17px/1.55 Georgia,serif}.restart{margin-top:24px;border:1px solid var(--ink);border-radius:999px;padding:15px 22px;background:transparent;font-weight:700;cursor:pointer}.restart span{margin-left:35px}footer{margin:0 4.5vw;padding:26px 0 36px;border-top:1px solid var(--line);display:flex;justify-content:space-between;color:var(--muted);font-size:9px;letter-spacing:.13em;text-transform:uppercase}@keyframes arrive{from{opacity:0;transform:translateY(45px) scale(.94)}to{opacity:1;transform:none}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes fade{from{opacity:0;transform:translateY(25px)}}@media(max-width:800px){.masthead{height:68px}.status span{display:none}.hero{padding-top:45px}.intro{position:static;margin:30px 0 0}.progress{margin-top:35px}.level{grid-template-columns:repeat(2,1fr)}.level .card:last-child{grid-column:span 2;height:230px}.level.collapsed{display:flex;overflow:hidden}.level.collapsed .card{min-width:45px;width:45px}.card{height:300px}.level.collapsed .card:last-child{height:88px}.result{padding-top:55px}footer{gap:20px}}

.card-brand{display:block;font-size:8px;letter-spacing:.14em;text-transform:uppercase;opacity:.72;margin-bottom:7px}.product-link{display:inline-block;margin:20px 14px 0 0;border-radius:999px;padding:15px 22px;background:var(--ink);color:white;text-decoration:none;font-size:13px;font-weight:700}.product-link span{margin-left:25px}