.bento{--bento-card:var(--warm-white-2);--bento-panel:var(--white);gap:var(--gap-tight);grid-template-columns:repeat(12,minmax(0,1fr));display:grid}.bento__card{background:var(--bento-card);border-radius:var(--radius-md);flex-direction:column;display:flex;overflow:hidden}.bento__card--wide{grid-column:span 7}.bento__card--narrow{grid-column:span 5}.bento__card--half{grid-column:span 6}.bento__copy{padding:1.5rem 1.5rem 1.75rem}.bento__title{font-family:var(--font-display);font-weight:600;font-size:var(--h5);line-height:var(--leading-title);color:var(--fg-strong)}.bento__mark{margin-bottom:var(--mark-title-gap);background:rgba(var(--white-rgb), .7)}.bento__body{color:var(--fg);margin-top:.5rem}@media (max-width:1023px){.bento__card--wide,.bento__card--narrow,.bento__card--half{grid-column:1/-1}}.bento__screenWrap{height:16rem;color:var(--text-strong);font-size:var(--text-s);line-height:var(--leading-snug);position:relative;overflow:hidden}.bento__screenWrap:after{content:"";background:linear-gradient(to bottom, transparent, var(--bento-card));pointer-events:none;height:5rem;position:absolute;inset:auto 0 0}.bento__screen{background:var(--bento-panel);border-radius:var(--radius-sm);width:calc(100% - 2rem);min-width:26rem;box-shadow:var(--shadow-raised);position:absolute;top:2rem;left:2rem}.bento__screenBar{box-shadow:var(--divider-b);justify-content:space-between;align-items:center;gap:1rem;padding:1rem 1.25rem;display:flex}.bento__screenTitle{font-weight:600}.bento__screenMeta{font-size:var(--text-xs);color:var(--text-soft)}.bento__chip{border-radius:var(--radius-sm);font-size:var(--text-xs);font-weight:600;line-height:var(--leading-snug);white-space:nowrap;align-items:center;gap:.25rem;padding:.125rem .5rem;display:inline-flex}.bento__chip--ok{background:var(--primary-tint);color:var(--primary)}.bento__chip--warn{background:rgba(var(--tan-rgb), .45);color:var(--text-strong)}.bento__chip--quiet{border:1px solid var(--rule);color:var(--text-soft)}.bento__row{animation:bentoRowIn .5s var(--ease-spring) both;animation-delay:calc(.15s + var(--i,0) * 70ms);animation-play-state:paused}[data-visible] .bento__row{animation-play-state:running}@keyframes bentoRowIn{0%{opacity:0;transform:translateY(6px)}}@media (max-width:639px){.bento__screen{width:calc(100% - 1rem);min-width:0;left:1rem}}
