/* screen.okak0.com — on top of the house style.css */
.hero .lead { max-width: 620px; }
.label { display: flex; align-items: center; gap: 8px; color: var(--dim); font-size: 13px; padding: 6px 6px 10px; }
.label::before { content: ""; width: 9px; height: 1.5px; background: currentColor; }
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.grid .panel { margin: 0 !important; display: flex; flex-direction: column; gap: 8px; }
.panel h2 { font-size: 18px; font-weight: 400; margin: 0; }
.panel p { margin: 0; color: var(--dim); font-size: 14.5px; line-height: 1.5; }
.panel .btn { margin-top: auto; align-self: flex-start; text-decoration: none; }
.panel .meta { font-size: 12.5px; color: var(--faint); }
.card + .card { margin-top: 16px; }
.shots { display: flex; gap: 12px; overflow-x: auto; padding: 4px 4px 10px; scroll-snap-type: x proximity; }
.shots figure { margin: 0; flex: none; width: 210px; scroll-snap-align: start; }
.shots img { width: 100%; height: auto; display: block; border-radius: 14px; border: 1px solid var(--card-line); }
.shots figcaption { font-size: 12.5px; color: var(--dim); padding: 8px 2px 0; }
.rules { margin: 0; padding: 0 0 0 18px; color: var(--dim); font-size: 14.5px; line-height: 1.6; }
.rules b { color: var(--text); font-weight: 400; }
@media (max-width: 760px) { .grid { grid-template-columns: 1fr; } }
.note { display: flex; gap: 10px; align-items: baseline; }
.note .dot { flex: none; background: var(--yellow); }
.note b, .steps b { color: var(--text); font-weight: 400; }
.steps { margin-top: 12px; }