.shelf-main{max-width:720px;margin:0 auto;padding:0 24px 120px}
.shelf-head{padding:58px 0 40px;border-bottom:1px solid var(--line)}
.shelf-kicker{font-size:11px;font-weight:650;letter-spacing:.12em;text-transform:uppercase;color:var(--orange)}
.shelf-head h1{font-size:clamp(38px,8vw,62px);letter-spacing:-.035em;line-height:1;margin:16px 0 0;font-weight:600}
.shelf-stand{margin:20px 0 0;font-size:19px;line-height:1.55;color:#454c58;max-width:34rem}
.shelf-intro{padding:36px 0 8px;max-width:34rem}
.shelf-intro p{margin:0 0 16px;font-size:15px;line-height:1.72;color:#5f6773}
.shelf-intro p:last-child{margin-bottom:0}

.shelf-item{padding:46px 0;border-top:1px solid var(--line)}
.shelf-num{font-size:12px;font-variant-numeric:tabular-nums;letter-spacing:.06em;color:#a8adb6}
.shelf-item h2{margin:9px 0 0;font-size:27px;letter-spacing:-.022em;line-height:1.2;font-weight:600}
.shelf-meta{margin:7px 0 0;font-size:12px;color:#8f959e}
.shelf-note{margin:15px 0 0;font-size:15px;line-height:1.72;color:#4d545f;max-width:34rem}

/* Demos are authored at a fixed 325px so they never reflow. The card is capped
   near that width rather than stretched, so the demo reads as a plate on the
   page instead of a small thing lost in a wide grey field. */
.shelf-demo{max-width:421px;margin:24px auto 0;border:1px solid var(--line);border-radius:13px;background:#fff;overflow:hidden}
.shelf-stage{position:relative;overflow:hidden;background:#eceef3}
.shelf-stage iframe{border:0;display:block;transform-origin:0 0}
.shelf-bar{display:flex;align-items:center;gap:12px;justify-content:space-between;
  padding:10px 14px;border-top:1px solid var(--line);font-size:13px;background:#fbfbfc}
.shelf-state{display:inline-flex;align-items:center;gap:8px;min-width:0;color:#6b7280}
.shelf-state i{width:7px;height:7px;border-radius:50%;background:#cbd0d8;flex:none}
.shelf-demo[data-on="1"] .shelf-state i{background:#4f9268}
.shelf-demo[data-on="0"] .shelf-state i{background:#c9603f}
.shelf-state span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shelf-open{flex:none;color:#7a818b;text-decoration:none;border-bottom:1px solid #dfe2e8}
.shelf-open:hover{color:var(--ink);border-color:var(--ink)}

.shelf-foot{margin-top:56px;padding-top:26px;border-top:1px solid var(--line);
  font-size:14px;line-height:1.7;color:#7a818b;max-width:34rem}
.shelf-foot a{color:#5f6773}
@media (max-width:560px){.shelf-head{padding-top:36px}.shelf-item{padding:34px 0}
 .shelf-bar{flex-wrap:wrap}.shelf-state{order:3;width:100%}.shelf-open{margin-left:auto}}