.dinner{position:relative;z-index:3;flex:1;width:100%;display:flex;flex-direction:column;align-items:flex-start;transition:opacity .5s var(--ease)}
.badge{width:56px;height:56px;border-radius:15px;display:grid;place-items:center;
    background:linear-gradient(150deg,color-mix(in srgb,var(--klein) 14%,var(--surface)),color-mix(in srgb,var(--klein) 6%,var(--surface)));
    border:1px solid color-mix(in srgb,var(--klein) 26%,transparent);
    color:var(--acc);box-shadow:0 8px 20px -14px rgba(36,56,230,.5),inset 0 1px 1px rgba(255,255,255,.6);
    transition:background .5s var(--ease),border-color .5s var(--ease),color .5s var(--ease),box-shadow .45s var(--ease),transform .45s var(--spring)}
.badge svg{width:32px;height:32px;display:block;overflow:visible}
.dl{margin:clamp(14px,2vw,20px) 0 0;font-family:var(--serif);font-weight:560;font-size:clamp(21px,2.3vw,26px);line-height:1.05;letter-spacing:-.026em;color:var(--fg);transition:color .45s var(--ease)}
.ds{margin:8px 0 0;max-width:24ch;font:400 clamp(13px,1.3vw,14.5px)/1.45 var(--sans);color:var(--fg-soft);transition:color .45s var(--ease)}
.doors:has(.door.hovering) .door:not(.hovering),
  .doors:has(.door.chosen) .door:not(.chosen){flex-grow:.82;filter:saturate(.9) brightness(.99)}
.doors:has(.door.hovering) .door:not(.hovering) .dinner,
  .doors:has(.door.chosen) .door:not(.chosen) .dinner{opacity:.58}
.door.hovering,.door:focus-visible,.door.chosen{flex-grow:1.32;filter:none;border-color:var(--klein);
    --fg:#fff;--fg-soft:rgba(255,255,255,.86);--acc:#fff}
.door.hovering,.door.chosen{box-shadow:0 26px 46px -24px rgba(36,56,230,.55)}
.door.hovering .flood,.door:focus-visible .flood,.door.chosen .flood{opacity:1}
.door.hovering .badge,.door:focus-visible .badge,.door.chosen .badge{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.42);color:#fff;
    box-shadow:0 10px 24px -14px rgba(0,0,0,.45),inset 0 1px 1px rgba(255,255,255,.5);
    transform:translateY(-2px) rotate(-4deg)}
.door:focus-visible{outline:none}
.door:focus-visible .badge{outline:2px solid #fff;outline-offset:3px}
.pick-logos{position:relative;z-index:2;display:flex;gap:6px;flex:0 0 auto}
.lgtile{width:32px;height:32px;border-radius:9px;background:#fff;border:1px solid var(--edge);display:grid;place-items:center;transition:border-color .3s ease}
.lgtile img,.lgtile svg{width:18px;height:18px;display:block}
.lgtile.q{font-family:var(--serif);font-weight:600;font-size:17px;color:var(--ink);background:#fff}
.pick.chosen .lgtile{border-color:rgba(255,255,255,.5)}
.pick.chosen .lgtile.q{color:var(--klein-text);background:#fff}
.grid{display:grid;gap:12px;grid-template-columns:repeat(4,1fr)}
.grid.goals{grid-template-columns:repeat(3,1fr)}
.pick{
    position:relative;overflow:hidden;cursor:pointer;-webkit-appearance:none;appearance:none;
    font-family:inherit;text-align:left;display:flex;flex-direction:column;gap:10px;align-items:flex-start;
    min-height:126px;border-radius:16px;border:1.5px solid var(--edge);
    background:linear-gradient(165deg,var(--surface) 0%,var(--surface-2) 130%);
    color:var(--ink);padding:15px 14px 14px;--fg:var(--ink);--fg-soft:var(--muted);--acc:var(--klein-text);
    box-shadow:0 12px 26px -20px rgba(20,18,20,.5),0 2px 6px -4px rgba(20,18,20,.2);
    transition:transform .34s var(--spring),border-color .2s ease,box-shadow .3s ease;
  }
.screen.on .grid .pick{animation:rise .55s var(--ease) backwards}
.screen.on .grid .pick:nth-child(1){animation-delay:.04s}
.screen.on .grid .pick:nth-child(2){animation-delay:.09s}
.screen.on .grid .pick:nth-child(3){animation-delay:.14s}
.screen.on .grid .pick:nth-child(4){animation-delay:.19s}
.screen.on .grid .pick:nth-child(5){animation-delay:.24s}
.screen.on .grid .pick:nth-child(6){animation-delay:.29s}
.screen.on .grid .pick:nth-child(7){animation-delay:.34s}
.screen.on .grid .pick:nth-child(8){animation-delay:.39s}
.pick-flood{position:absolute;inset:0;z-index:0;opacity:0;transition:opacity .45s var(--ease);
    background:radial-gradient(120% 130% at 30% 0%,#3d4ff2 0%,var(--klein) 55%,#1c2ac2 100%)}
.pick-ic{position:relative;z-index:2;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
    background:linear-gradient(150deg,color-mix(in srgb,var(--klein) 14%,var(--surface)),color-mix(in srgb,var(--klein) 6%,var(--surface)));
    border:1px solid color-mix(in srgb,var(--klein) 26%,transparent);
    color:var(--acc);box-shadow:0 8px 20px -14px rgba(36,56,230,.5),inset 0 1px 1px rgba(255,255,255,.6);
    transition:background .4s var(--ease),border-color .4s var(--ease),color .4s var(--ease),transform .45s var(--spring)}
.pick-ic svg{width:24px;height:24px;display:block;overflow:visible}
.pick-txt{position:relative;z-index:2;display:flex;flex-direction:column;gap:3px;max-width:100%}
.pick-lbl{font-family:var(--serif);font-weight:560;font-size:16px;
    letter-spacing:-.015em;line-height:1.12;color:var(--fg);transition:color .4s var(--ease)}
.pick:hover,.pick:focus-visible{border-color:var(--klein);transform:translateY(-5px);
    box-shadow:0 20px 38px -22px rgba(36,56,230,.5);outline:none}
.pick:hover .pick-flood,.pick:focus-visible .pick-flood{opacity:.08}
.pick:hover .pick-ic{transform:translateY(-2px) rotate(-4deg)}
.pick:focus-visible{box-shadow:0 20px 38px -22px rgba(36,56,230,.5),0 0 0 3px rgba(36,56,230,.26)}
.pick.chosen{border-color:var(--klein);--fg:#fff;--fg-soft:rgba(255,255,255,.82);--acc:#fff;
    box-shadow:0 22px 42px -20px rgba(36,56,230,.6);transform:translateY(-3px)}
.pick.chosen .pick-flood{opacity:1}
.pick.chosen .pick-ic{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.44);color:#fff}
.pick.chosen:focus-visible{box-shadow:0 22px 42px -20px rgba(36,56,230,.6),0 0 0 3px rgba(255,255,255,.85)}
.pick-net{position:relative;z-index:2;font:500 11px/1.35 var(--sans);color:var(--fg-soft);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;transition:color .4s var(--ease)}
.grid.wide{grid-template-columns:repeat(2,1fr)}
.grid.wide .pick{min-height:74px;flex-direction:row;align-items:center;justify-content:flex-start;gap:12px}
.grid.wide .pick-lbl{font-size:18px}
.pick-own{border-style:dashed}
.pick-own input{position:relative;z-index:2;background:none;border:0;outline:none;-webkit-appearance:none;appearance:none;
    min-width:0;width:100%;font-family:var(--sans);font-weight:500;font-size:15px;letter-spacing:0;color:var(--klein-text);padding:0}
.pick-own input::placeholder{color:var(--muted);opacity:.6;font:400 15px var(--sans)}
.pick-own.chosen input{color:#fff;caret-color:#fff}
.pick-own.chosen input::placeholder{color:rgba(255,255,255,.75)}
@keyframes pickAway{from{opacity:1;transform:none}to{opacity:0;transform:scale(.96)}}
@keyframes riseBack{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.nz-close{margin-left:auto;flex:0 0 auto;-webkit-appearance:none;appearance:none;cursor:pointer;
    display:inline-flex;align-items:center;gap:6px;font:600 11.5px var(--sans);color:var(--muted);
    background:var(--surface-2);border:1px solid var(--edge);border-radius:999px;padding:6px 12px;
    transition:color .2s ease,border-color .2s ease}
.nz-close:hover,.nz-close:focus-visible{color:var(--klein-text);border-color:var(--klein-text);outline:none}
.nz-close svg{width:11px;height:11px;display:block}
.bopt{font-style:normal;font-weight:600;font-size:10px;letter-spacing:.01em;text-transform:none;
    color:var(--muted);opacity:1;background:color-mix(in srgb,var(--ink) 6%,transparent);
    border-radius:999px;padding:2px 7px;line-height:1.5;white-space:nowrap}