/* Playbook header image + "Try it" exercise box (Docket style: light docket paper, navy ink, orange accents). */
.pb-hero{margin:22px 0 14px}
.pb-hero img{display:block;width:100%;height:auto;aspect-ratio:16/9;border-radius:16px;border:1px solid var(--bd,#22396f);background:#eef2fa}
.pb-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px!important;font-size:14px!important;line-height:1.2!important}
.pb-chips a,.pb-chips span{display:inline-flex;align-items:center;min-height:32px;padding:6px 12px;border-radius:999px;border:1.5px solid var(--bd,#22396f);color:#d7e0f4;font-weight:600}
.pb-chips a{background:var(--ac,#ff7a1a);border-color:var(--ac,#ff7a1a);color:#0b1630}
.pb-chips a:hover{filter:brightness(1.06)}
.tryit{margin:36px 0 28px;background:#eef2fa;color:#0b1630;border-radius:18px;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.25),0 10px 28px rgba(0,0,0,.3);border-left:10px solid #ff7a1a;scroll-margin-top:90px}
.tryit-head{background:#0b1630;padding:20px 24px 22px;border-bottom:4px solid #ff7a1a}
.tryit-tag{display:inline-block;background:#ff7a1a;color:#0b1630;font:800 13px/1 "Plus Jakarta Sans",Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;padding:8px 11px;border-radius:8px}
.tryit-level{margin-left:8px;color:#9fb0d6;font-size:13px;font-weight:600}
.tryit .tryit-head h2{margin:12px 0 4px;color:#eef2fa;font-size:26px}
.tryit .tryit-head p{margin:0;color:#9fb0d6;font-size:15.5px;line-height:1.5}
.tryit-body{padding:8px 24px 24px}
.tryit-steps{list-style:none;margin:0;padding:0;counter-reset:ti}
.tryit-steps>li{position:relative;padding:18px 0 4px 56px;counter-increment:ti}
.tryit-steps>li::before{content:counter(ti);position:absolute;left:0;top:16px;width:40px;height:40px;border-radius:50%;background:#ff7a1a;color:#0b1630;font:800 19px/40px "Plus Jakarta Sans",Inter,sans-serif;text-align:center}
.tryit h3{margin:0 0 4px;font-size:19px;line-height:1.3;color:#0b1630}
.tryit p{margin:0 0 10px;font-size:16px;line-height:1.6;color:#22396f}
.tryit a{color:#c2500a;font-weight:700;text-decoration:underline;text-underline-offset:2px}
.tryit-file{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:6px 0 10px}
.tryit-file a{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:8px 14px;border-radius:10px;background:#fff;border:2px solid #0b1630;color:#0b1630;text-decoration:none;font-size:15px}
.tryit-file a:hover{background:#ffe6d2}
.tryit-file small{color:#5b6b82;font-size:13px}
.tryit-paste{margin:8px 0 10px;background:#fff;border:2px solid #0b1630;border-radius:14px;overflow:hidden}
.tryit-paste-h{display:flex;justify-content:space-between;align-items:center;background:#0b1630;padding:8px 10px 8px 16px}
.tryit-paste-h span{color:#ffa45c;font:800 13px/1 "Plus Jakarta Sans",Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase}
.tryit-copy{min-height:34px;padding:6px 14px;border:0;border-radius:8px;background:#ff7a1a;color:#0b1630;font:700 14px Inter,sans-serif;cursor:pointer}
.tryit-copy:focus-visible{outline:2px solid #fff;outline-offset:2px}
.tryit .tryit-paste p{margin:0;padding:14px 16px;color:#0b1630;font-size:15.5px;line-height:1.6;white-space:pre-line}
.tryit-done{margin-top:18px;background:#fbe3cf;border-radius:14px;padding:16px 18px}
.tryit .tryit-done h3{font-size:14px;letter-spacing:.14em;text-transform:uppercase;margin:0 0 8px}
.tryit-done ul{list-style:none;margin:0;padding:0}
.tryit-done li{margin:6px 0}
.tryit-done label{display:flex;gap:12px;align-items:flex-start;cursor:pointer;font-size:16px;line-height:1.45;color:#0b1630;font-weight:500}
.tryit-done input{appearance:none;-webkit-appearance:none;flex:0 0 24px;width:24px;height:24px;margin:0;border:2.5px solid #0b1630;border-radius:7px;background:#fff;display:grid;place-content:center;cursor:pointer}
.tryit-done input::after{content:"";width:12px;height:7px;border-left:3.5px solid #ff7a1a;border-bottom:3.5px solid #ff7a1a;transform:translateY(-2px) rotate(-45deg);opacity:0}
.tryit-done input:checked::after{opacity:1}
.tryit-done input:focus-visible{outline:2px solid #0b1630;outline-offset:2px}
.tryit-msg{margin:10px 0 0!important;font-weight:700;color:#0b1630!important}
.tryit-foot{margin:14px 0 0!important;font-size:14px!important;color:#5b6b82!important}
@media (max-width:640px){.tryit{border-left-width:6px}.tryit-head,.tryit-body{padding-left:16px;padding-right:16px}.tryit-steps>li{padding-left:46px}.tryit-steps>li::before{width:34px;height:34px;line-height:34px;font-size:17px}.tryit-paste{margin-left:-46px}.tryit .tryit-head h2{font-size:23px}}

/* Watch on YouTube button (hidden until assets/videos.json has a link) */
.pb-chips a.pb-yt{gap:8px;background:var(--ac,#ff7a1a);border-color:var(--ac,#ff7a1a);color:#0b1630;font-weight:800;padding:6px 14px 6px 10px}
.pb-chips a.pb-yt svg{width:18px;height:18px;fill:#0b1630;background:#fff;border-radius:50%;padding:3px;box-sizing:content-box}
.pb-chips a.pb-yt:hover{filter:brightness(1.06)}
.pb-chips a.pb-yt[hidden]{display:none!important}