/* The Pro library is an illustration of access, not a download control. */
body.dd-pro .energy-subscription.pro-library-card {
  display:grid; grid-template-columns:minmax(0,1fr); gap:22px;
  margin:8px 0; padding:24px; border:1px solid var(--stroke); border-radius:24px;
  background:var(--panel); color:var(--text); overflow:hidden;
}
.pro-library-card .pro-library-intro,.pro-library-card .pro-library-inclusions { min-width:0; }
.pro-library-heading { display:flex; align-items:center; gap:10px; margin-bottom:18px; }
body.dd-pro .pro-library-card .energy-subscription-mark {
  flex:0 0 auto; width:auto; height:auto; padding:7px 10px;
  border:1px solid color-mix(in srgb,var(--game-energy-ink) 32%,transparent);
  border-radius:7px; background:color-mix(in srgb,var(--game-energy-ink) 9%,transparent);
  color:var(--game-energy-ink); font-size:12px; line-height:1; font-weight:800; letter-spacing:1.3px;
}
.pro-library-edition { min-width:0; color:var(--muted); font-size:12px; font-weight:650; line-height:1.4; }
.pro-library-active { margin-left:auto; color:var(--answer-good-ink); font-size:12px; font-weight:650; }
body.dd-pro .pro-library-card h2 { display:block; margin:0 0 12px; white-space:pre-line; font-size:clamp(26px,4vw,34px); line-height:1.17; letter-spacing:-.9px; font-weight:750; text-wrap:balance; }
body.dd-pro .pro-library-card .pro-library-description { margin:0 0 14px; color:var(--muted); font-size:14px; line-height:1.6; }
.pro-library-card .energy-subscription-copy>small,.pro-library-card .energy-subscription-copy>a { display:block; }
.pro-library-card .energy-subscription-copy { text-align:left; }
.pro-library-visual { min-width:0; margin:0; align-self:center; }
.pro-library-devices { position:relative; isolation:isolate; width:100%; max-width:430px; min-height:300px; aspect-ratio:.97; margin:0 auto; }
.pro-library-devices::before { content:""; position:absolute; z-index:-1; inset:10% 1% 3%; border:1px solid color-mix(in srgb,var(--brand) 15%,transparent); border-radius:30px; background:radial-gradient(ellipse at 80% 12%,color-mix(in srgb,var(--game-energy-ink) 13%,transparent),transparent 60%),color-mix(in srgb,var(--brand) 5%,transparent); }
.pro-library-tablet { position:absolute; left:2%; top:2%; width:78%; height:93%; padding:10px; border:1px solid #4d4b65; border-radius:23px; background:#262538; box-shadow:0 12px 22px #0002; transform:rotate(-2deg); }
.pro-library-tablet-camera { position:absolute; top:4px; left:50%; width:3px; height:3px; border-radius:50%; background:#737188; }
.pro-library-screen { display:grid; grid-template-rows:auto auto minmax(0,1fr) auto; gap:10px; height:100%; padding:12px; border:1px solid #e5dcec; border-radius:14px; background:radial-gradient(ellipse at top right,#f4ebd2,transparent 62%),#f8f8fc; color:#302e46; overflow:hidden; }
.pro-library-screen-head { display:flex; align-items:center; justify-content:space-between; gap:5px; font-size:9px; font-weight:750; line-height:1.1; }
.pro-library-screen-head b { border:1px solid #c7a868; border-radius:4px; padding:3px 4px; background:#f5e8c7; color:#765822; font-size:7px; letter-spacing:1px; box-shadow:0 2px 0 #b89b6530; }
.pro-library-screen-title { display:flex; align-items:baseline; justify-content:space-between; gap:4px; line-height:1.1; }
.pro-library-screen-title strong { font-size:12px; letter-spacing:-.2px; }
.pro-library-screen-title>span { color:#77728e; font-size:7px; font-weight:650; white-space:nowrap; }
.pro-library-shelf { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:repeat(3,minmax(0,1fr)); gap:12px 9px; min-height:0; padding-top:2px; }
.pro-library-lesson { display:flex; flex-direction:column; align-items:center; gap:6px; min-width:0; min-height:0; }
.pro-library-lesson>strong { flex:0 0 auto; max-width:100%; font-size:10px; font-weight:650; line-height:1.2; letter-spacing:-.2px; white-space:nowrap; }
.pro-library-book-pair { position:relative; isolation:isolate; flex:1; min-height:0; width:100%; max-width:88px; }
.pro-library-book-pair::after { content:""; position:absolute; z-index:-1; bottom:-3px; left:0; right:0; height:4px; border:1px solid #c7c1d3; border-radius:3px; background:#e5dfed; box-shadow:0 2px 0 #302e460c; }
.pro-library-book { position:absolute; width:59%; height:100%; }
.pro-library-book-theory { left:3%; transform:rotate(-6deg); }
.pro-library-book-question { right:4%; transform:rotate(6deg); }
.pro-library-screen-foot { display:flex; justify-content:space-between; gap:4px; border-top:1px solid #e2dfef; padding-top:7px; font-size:7px; color:#77728e; line-height:1.1; }
.pro-library-phone { position:absolute; right:1%; bottom:2%; width:26%; height:61%; padding:6px; background:#262538; border:1px solid #5b586f; border-radius:20px; transform:rotate(4deg); box-shadow:-4px 8px 18px #0003; }
.pro-library-phone-camera { position:absolute; top:9px; left:37%; width:26%; height:6px; background:#262538; border-radius:5px; }
.pro-library-phone-screen { display:flex; flex-direction:column; gap:8px; height:100%; padding:20px 8px 7px; border-radius:14px; background:#f8f8fc; color:#302e46; overflow:hidden; }
.pro-library-phone-brand { font-size:7px; font-weight:750; white-space:nowrap; }
.pro-library-phone-tag { color:#77728e; font-size:6px; font-weight:700; letter-spacing:.6px; }
.pro-library-phone-book { display:block; flex:1; min-height:0; margin:1px 2px 2px 0; }
.pro-library-phone-question { padding:7px 6px; border:1px solid #e2dfee; border-radius:7px; background:#eeedf7; }
.pro-library-phone-question>span { display:block; margin-bottom:5px; font-size:7px; font-weight:650; }
.pro-library-phone-question>div { display:flex; gap:3px; }
.pro-library-phone-question i { display:grid; place-items:center; width:13px; height:13px; border:1px solid #cecbdf; border-radius:4px; background:#f8f8fc; color:#655d96; font-size:6px; font-style:normal; }
.pro-library-phone-question i.is-selected { border-color:#285f52; background:#357661; color:white; box-shadow:0 2px 0 #224e4140; }
.pro-library-phone-home { align-self:center; width:35%; height:2px; border-radius:2px; background:#9390a6; }
.pro-library-visual figcaption { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px 14px; margin-top:16px; color:var(--muted); font-size:11px; font-weight:600; }
.pro-library-visual figcaption>span { display:flex; align-items:center; gap:5px; }
.pro-library-visual figcaption svg { width:15px; height:15px; color:var(--brand); }
.pro-library-card .energy-library { display:flex; align-items:center; gap:12px; margin:0 0 17px; padding:0 0 17px; border-top:0; border-bottom:1px solid var(--stroke); }
.pro-library-card .energy-library>div { display:flex; align-items:baseline; gap:8px; }
.pro-library-card .energy-library strong { font-size:30px; font-weight:750; }
.pro-library-card .energy-library>div>span { font-size:12px; color:var(--muted); white-space:nowrap; }
.pro-library-card .energy-library>.pro-library-access { margin-left:auto; font-size:11px; line-height:1.4; text-align:right; }
.pro-library-card .energy-benefits { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 16px; margin:0; font-size:12px; line-height:1.4; }
.pro-library-card .energy-benefits li { display:flex; align-items:flex-start; gap:7px; min-width:0; text-align:left; }
.pro-library-card .energy-benefits li>span { flex-shrink:0; color:var(--brand); font-weight:750; }
body.dd-pro .pro-library-card .energy-subscription-actions { display:flex; flex-direction:column; width:100%; gap:8px; padding-top:18px; border-top:1px solid var(--stroke); }
body.dd-pro .pro-library-card .energy-subscription-actions>.btn { width:100%; min-height:48px; }
.pro-library-card .subscription-platform-label,.pro-library-card .subscription-active-label { align-self:center; min-height:0; font-size:12px; font-weight:650; }
.pro-library-card .subscription-notice { padding:8px 10px; border-radius:8px; background:var(--panel2); }
.cg-topic-dialog.cg-pro-offer { width:min(720px,calc(100vw - 24px)); }
body.dd-pro .cg-pro-offer .energy-subscription.pro-library-card { margin:0; padding:4px; border:0; border-radius:0; background:transparent; }
@media(min-width:720px) {
  body.dd-pro .energy-subscription.pro-library-card { grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-areas:"intro visual" "inclusions visual" "actions actions"; column-gap:26px; padding:30px; }
  .pro-library-intro { grid-area:intro; }
  .pro-library-visual { grid-area:visual; }
  .pro-library-inclusions { grid-area:inclusions; }
  .pro-library-card .energy-subscription-actions { grid-area:actions; }
  .pro-library-card .energy-library { flex-wrap:wrap; }
  .pro-library-card .energy-library>.pro-library-access { margin-left:0; text-align:left; }
  body.dd-pro .pro-library-card .energy-subscription-actions { flex-direction:row; align-items:center; }
  body.dd-pro .pro-library-card .energy-subscription-actions>.primary { flex:1; }
  body.dd-pro .pro-library-card .energy-subscription-actions>.ghost { flex:0 1 auto; width:auto; }
  .pro-library-card .subscription-platform-label,.pro-library-card .subscription-active-label { margin-inline:auto; }
}
@media(max-width:360px) {
  body.dd-pro .energy-subscription.pro-library-card { padding:18px; gap:20px; }
  .pro-library-screen { padding:9px; gap:7px; }
  .pro-library-screen-title strong { font-size:10px; }
  .pro-library-screen-title>span { font-size:6px; }
  .pro-library-shelf { gap:10px 5px; }
  .pro-library-lesson>strong { font-size:9px; }
  .pro-library-phone-screen { gap:5px; padding-inline:5px; }
  .pro-library-phone-question { padding:5px 3px; }
  .pro-library-phone-question i { width:11px; height:11px; }
  .pro-library-card .energy-library { flex-wrap:wrap; gap:8px; }
  .pro-library-card .energy-library>.pro-library-access { margin-left:0; text-align:left; }
  .pro-library-card .energy-benefits { column-gap:12px; font-size:11px; }
}