.lay{--lay-lavender:color-mix(in oklab, var(--color-secondary-brand) 12%, white);--lay-lavender-2:color-mix(in oklab, var(--color-secondary-brand) 30%, white);--S:360px}.lay-color-blue{--tint:color-mix(in oklab, var(--color-secondary-brand) 50%, white);--deep:color-mix(in oklab, var(--color-secondary-brand) 80%, white)}.lay-color-slate{--tint:color-mix(in oklab, var(--color-primary) 40%, white);--deep:color-mix(in oklab, var(--color-primary) 72%, white)}.lay-color-periwinkle{--tint:color-mix(in oklab, var(--color-secondary-brand) 22%, white);--deep:color-mix(in oklab, var(--color-secondary-brand) 52%, white)}.lay-color-mango{--tint:color-mix(in oklab, var(--color-tertiary-brand) 72%, white);--deep:color-mix(in oklab, var(--color-tertiary-brand) 88%, black)}.lay-color-lavender{--tint:color-mix(in oklab, var(--color-brand) 48%, white);--deep:color-mix(in oklab, var(--color-brand) 82%, white)}.lay-color-shield{--tint:white;--deep:var(--lay-lavender-2)}.lay-sticky{background:radial-gradient(60% 55% at 62% 52%, white 0%, transparent 70%), linear-gradient(180deg, transparent 0%, var(--lay-lavender) 100%);height:100svh;position:sticky;top:0;overflow:hidden}.lay-stage{perspective:3200px;width:0;height:0;position:absolute;top:56%;left:60%}.lay-world{transform-style:preserve-3d;will-change:transform;position:absolute;inset:0}.lay-shadow{background:radial-gradient(closest-side, color-mix(in oklab, var(--color-secondary-brand) 16%, transparent), color-mix(in oklab, var(--color-secondary-brand) 5%, transparent) 55%, transparent 100%);filter:blur(20px);opacity:0;width:580px;height:580px;position:absolute;top:-290px;left:-290px;transform:translateZ(-40px)}.lay-plate{width:var(--S);height:var(--S);left:calc(var(--S) / -2);top:calc(var(--S) / -2);transform-style:preserve-3d;opacity:0;will-change:transform, opacity;position:absolute}.lay-slice{background:color-mix(in oklab, var(--tint) 10%, transparent);border:1px solid #ffffff80;border-radius:30px;position:absolute;inset:0}.lay-slice.edge{background:color-mix(in oklab, var(--deep) 40%, transparent);border-color:color-mix(in oklab, var(--deep) 60%, transparent)}.lay-slice.streak{background:#ffffff1f;border:1.5px solid #ffffffd9}.lay-slice.rim{background:#ffffff38;border:2px solid #fff}.lay-face{background:radial-gradient(90% 70% at 12% 8%, #ffffffbf, transparent 55%), radial-gradient(70% 60% at 92% 95%, #ffffff59, transparent 60%), linear-gradient(160deg, color-mix(in oklab, var(--tint) 50%, transparent), color-mix(in oklab, var(--tint) 34%, transparent) 55%, color-mix(in oklab, var(--deep) 38%, transparent));box-shadow:inset 3px 4px 0 #ffffffd9, inset -4px -6px 10px color-mix(in oklab, var(--deep) 28%, transparent), inset 0 0 0 10px #ffffff14, inset 0 0 60px #ffffff47;text-align:center;color:var(--color-primary);border:1.5px solid #fffffff2;border-radius:30px;flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:0;overflow:hidden}.lay-face-title{letter-spacing:-.015em;opacity:.8;text-shadow:0 1px #ffffffb3;font-size:29px;font-weight:500;position:relative}.lay-face-sub{opacity:.55;margin-top:8px;font-size:13.5px;position:relative}.lay-sheen{border-radius:inherit;pointer-events:none;background:linear-gradient(118deg,#0000 38%,#fff9 46%,#ffffff2e 50%,#0000 58%) 0 0/320% 100%;background-position:var(--sh,60%) 0;position:absolute;inset:0}.lay-keys{transform-style:preserve-3d;position:absolute;inset:0}.lay-key{width:98px;height:98px;transform-style:preserve-3d;opacity:0;position:absolute}.lay-key-slice{background:#ffffff38;border:1px solid #ffffffbf;border-radius:20px;position:absolute;inset:0}.lay-key-slice.edge{background:color-mix(in oklab, var(--deep) 22%, transparent);border-color:color-mix(in oklab, var(--deep) 40%, transparent)}.lay-key-face{background:radial-gradient(90% 70% at 15% 10%, white, transparent 60%), linear-gradient(150deg, #ffffffe0, #ffffff9e 60%, color-mix(in oklab, var(--tint) 45%, transparent));box-shadow:inset 2px 2px 0 white, inset -3px -4px 8px color-mix(in oklab, var(--deep) 25%, transparent);text-align:center;color:var(--color-primary);hyphens:manual;border:1px solid #fff;border-radius:20px;place-items:center;padding:6px;font-size:12.5px;font-weight:500;line-height:1.2;display:grid;position:absolute;inset:0}.lay-box{width:0;height:0;transform-style:preserve-3d;opacity:0;position:absolute}.lay-box-side{backdrop-filter:blur(6px)saturate(1.2);backface-visibility:visible;background:linear-gradient(#ffffffa8,#f4f3ff5c);border:2px solid #fff;position:absolute;box-shadow:inset 0 0 36px #ffffff8c,inset 0 0 0 6px #ffffff2e}.lay-box-side.lid{box-shadow:inset 4px 5px 0 #fffffff2, inset -5px -7px 14px color-mix(in oklab, var(--color-secondary-brand) 14%, transparent), inset 0 0 70px #fff9;background:radial-gradient(90% 70% at 12% 8%,#ffffffd9,#0000 55%),linear-gradient(140deg,#ffffffb3,#f0efff80);border-radius:40px;place-items:center;display:grid;overflow:hidden}.lay-box-side.lid span{letter-spacing:-.04em;color:color-mix(in oklab, var(--color-primary) 50%, transparent);font-size:92px;font-weight:600;position:relative}.lay-panel{z-index:5;flex-direction:column;align-items:flex-start;gap:8px;display:flex;position:absolute;top:50%;left:max(20px,50% - 600px);transform:translateY(-46%)}.lay-item{border:1px solid var(--color-decorative-2);background:var(--color-canvas);width:fit-content;max-width:390px;color:var(--color-primary);text-align:left;cursor:pointer;border-radius:22px;transition:width .5s cubic-bezier(.2,.8,.2,1),background .35s,border-color .35s,box-shadow .35s;overflow:hidden;box-shadow:0 2px 8px #2f2d390a}.lay-item:hover{border-color:var(--lay-lavender-2)}.lay-item:focus-visible{outline:2px solid var(--color-focused);outline-offset:2px}.lay-item-head{white-space:nowrap;align-items:center;gap:12px;padding:10px 12px 10px 18px;font-size:15px;font-weight:500;transition:font-size .4s,padding .4s,opacity .4s;display:flex}.lay-dot{background:var(--deep);border-radius:50%;flex-shrink:0;width:9px;height:9px}.lay-plus{background:var(--lay-lavender);width:24px;height:24px;color:var(--color-secondary-brand);border-radius:50%;place-items:center;font-size:16px;line-height:1;transition:opacity .3s,transform .4s;display:grid}.lay-item-body{grid-template-rows:0fr;width:0;transition:grid-template-rows .5s cubic-bezier(.2,.8,.2,1);display:grid}.lay-item-inner{width:390px;max-width:100%;display:block;overflow:hidden}.lay-item-text{opacity:0;padding:0 22px;font-size:16px;line-height:1.5;transition:opacity .35s,padding .5s;display:block}.lay-chips{opacity:0;flex-wrap:wrap;gap:8px;padding:0 22px 22px;transition:opacity .35s;display:flex}.lay-chips span{border:1.5px solid;border-radius:999px;padding:4px 12px;font-size:12.5px;font-weight:500}.lay-item.active{background:color-mix(in oklab, var(--tint) 50%, transparent);cursor:default;backdrop-filter:blur(16px)saturate(1.3);width:390px;box-shadow:0 18px 40px color-mix(in oklab, var(--color-secondary-brand) 10%, transparent);border-color:#ffffffd9}.lay-item.active.lay-color-shield{background:#ffffffb3}.lay-item.active .lay-item-head{opacity:.72;padding:18px 22px 2px;font-size:13px;font-weight:400}.lay-item.active .lay-dot{display:none}.lay-item.active .lay-plus{opacity:0;transform:rotate(45deg)scale(.6)}.lay-item.active .lay-item-body{grid-template-rows:1fr;width:100%}.lay-item.active .lay-item-text{opacity:1;padding:6px 22px 22px;transition-delay:.12s}.lay-item.active .lay-item-text:has(+.lay-chips){padding-bottom:14px}.lay-item.active .lay-chips{opacity:1;transition-delay:.2s}.lay-progress{z-index:5;border:1px solid var(--color-decorative-2);background:var(--color-canvas);border-radius:999px;place-items:center;width:110px;height:30px;display:grid;position:absolute;bottom:28px;left:max(20px,50% - 600px)}.lay-progress-track{background:var(--lay-lavender);border-radius:4px;width:70px;height:4px;overflow:hidden}.lay-progress-fill{background:var(--color-secondary-brand);border-radius:4px;width:0;height:100%}@media (width<=760px){.lay-stage{top:38%;left:50%}.lay-panel{inset:auto 16px 72px;transform:none}.lay-item{display:none}.lay-item.active{width:100%;max-width:none;display:block}.lay-item-inner{width:auto}.lay-item.active .lay-item-text{font-size:15px}.lay-progress{bottom:24px;left:16px}}