/* The homepage showroom (showroom.js): a card strip over one presenter (presenter.css styles the presenter itself). */
.sr{width:100%;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
.sr-head{padding:22px 26px 6px}.sr-head .eyebrow{font-size:12px;color:var(--green);margin:0 0 7px}.sr-head h2{font-size:32px;letter-spacing:-1px}
.sr-strip-wrap{position:relative;border-bottom:1px solid var(--line)}
.sr-strip{display:flex;gap:10px;overflow-x:auto;padding:8px 0 16px;scroll-snap-type:x proximity;scroll-padding-inline:26px;scrollbar-width:none}
.sr-strip::-webkit-scrollbar{display:none}
.sr-strip::before,.sr-strip::after{content:'';flex:0 0 16px}
.sr-card{flex:0 0 140px;display:flex;flex-direction:column;gap:4px;background:#fff;border:1px solid var(--line);border-radius:8px;padding:6px 6px 8px;color:var(--ink);text-align:left;font:inherit;font-size:13px;line-height:1.25;cursor:pointer;scroll-snap-align:start;transition:border-color .15s,transform .15s;text-decoration:none}
.sr-card:hover{border-color:#9aa8ad;transform:translateY(-1px)}
.sr-card[aria-pressed=true]{border-color:var(--green);box-shadow:0 0 0 1px var(--green)}
.sr-card img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:5px;background:#eef0ed;display:block;margin-bottom:3px}
.sr-card span{font-weight:600}.sr-card small{font-size:11px;color:var(--muted)}
.sr-chevron{position:absolute;top:calc(50% - 6px);transform:translateY(-50%);width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:#fffffff0;color:var(--ink);display:grid;place-items:center;cursor:pointer;box-shadow:0 3px 10px #0f202626;z-index:2;padding:0}
.sr-chevron:hover{border-color:var(--green);color:var(--green)}.sr-chevron-left{left:8px}.sr-chevron-right{right:8px}
.sr-stage{min-height:560px;background:#12262e}
.sr-stage.sr-loading{background:radial-gradient(ellipse at 40% 60%,#eef2ef,#cfd8d4 75%)}
.sr .tf:not(.tf-narrow) .tf-viewer{height:min(72vh,640px)}
.sr-kit{border-top:1px solid var(--line);padding:0 26px}
.sr-kit summary{padding:16px 0;font-weight:700;cursor:pointer}
.sr-kit-body{padding:0 0 22px;max-width:760px}.sr-kit-body p{color:var(--muted);font-size:14px;margin:0 0 10px}
.sr-kit-body textarea{font:12px/1.5 ui-monospace,Menlo,monospace;background:#f6f7f8;border-color:var(--line);margin:0 0 10px}
.sr-kit-body .button{padding:10px 18px;font-size:14px}.sr-kit-links{margin-top:12px!important}.sr-kit-links a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
@media(max-width:760px){.sr-head{padding:18px 16px 4px}.sr-head h2{font-size:24px}.sr-kit{padding:0 16px}.sr-stage{min-height:420px}.sr-card{flex-basis:120px}}
@media(prefers-reduced-motion:reduce){.sr-card{transition:none}}