#peterpen-page-designs .lp-section{min-width:0;padding:12px 14px;border:1px solid light-dark(#d5e2f5,#38506f);border-radius:12px;background:light-dark(#f7faff,#1d2b3d);color:var(--ink)}
#peterpen-page-designs .lp-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 8px}#peterpen-page-designs .lp-head .lp-heading{margin:0}#peterpen-page-designs .lp-shelf-toggle{flex:none;min-height:30px;padding:4px 11px;border:0;border-radius:999px;background:color-mix(in oklab,var(--green) 9%,transparent);color:var(--accent-text);font:inherit;font-size:12px;font-weight:600;cursor:pointer}@media (hover:hover) and (pointer:fine){#peterpen-page-designs .lp-shelf-toggle:hover{background:color-mix(in oklab,var(--green) 16%,transparent)}}#peterpen-page-designs .lp-shelf-toggle:focus-visible{outline:2px solid var(--green);outline-offset:2px}#peterpen-page-designs .lp-heading{display:flex;align-items:center;gap:7px;margin:0 0 8px;font-size:18px;line-height:1.3;font-weight:700}
#peterpen-page-designs .lp-heading .ui-icon{width:17px;height:17px;flex:none}
#peterpen-page-designs .lp-head .lp-heading{flex:1;min-width:0}#peterpen-page-designs .lp-heading-link{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-width:0;padding:2px 0;border:0;border-radius:4px;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}#peterpen-page-designs .lp-heading-name{display:inline-flex;align-items:center;gap:7px;min-width:0}#peterpen-page-designs .lp-more{flex:none;color:var(--muted);font-size:12px;font-weight:400;white-space:nowrap}@media (hover:hover) and (pointer:fine){#peterpen-page-designs .lp-heading-link:hover{color:var(--accent-text);text-decoration:none}}#peterpen-page-designs .lp-heading-link:focus-visible{outline:2px solid var(--green);outline-offset:2px}
#peterpen-page-designs .lp-my-setting{padding:7px 0;font-size:13px}
#peterpen-page-designs .lp-my-setting label{display:flex;align-items:center;gap:7px;width:max-content;max-width:100%;cursor:pointer}
#peterpen-page-designs .lp-my-setting input{accent-color:var(--green)}
#peterpen-page-designs .lp-my-setting input:focus-visible{outline:2px solid var(--green);outline-offset:2px}
#peterpen-page-designs .lp-preference-status:not(:empty){display:block;margin-top:5px;color:light-dark(#a73535,#ff9b9b);font-size:12px}
#peterpen-page-designs .lp-books{display:flex;gap:12px;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;scroll-snap-type:x proximity;padding:14px 2px 12px}
#peterpen-page-designs .lp-books::-webkit-scrollbar{display:none}
#peterpen-page-designs .lp-shelf.shelf-wrap .shelf-arrow{top:74px}
#peterpen-page-designs .phone .lp-shelf.shelf-wrap .shelf-arrow{top:68px}
#peterpen-page-designs .lp-books:focus-visible{outline:2px solid var(--green);outline-offset:2px;border-radius:5px}
#peterpen-page-designs .lp-book{flex:0 0 98px;min-width:0;text-align:center;scroll-snap-align:start}
/* PC: the shelf keeps its width and the covers grow (never below today's 98px slot) so the last one shows about half. */
#peterpen-page-designs .pc .lp-shelf.shelf-wrap{container-type:inline-size}
#peterpen-page-designs .pc .lp-shelf.shelf-wrap>*{--lp-col:calc((100cqw - 96px) / 8.5)}
@container (max-width:928px){#peterpen-page-designs .pc .lp-shelf.shelf-wrap>*{--lp-col:calc((100cqw - 84px) / 7.5)}}
@container (max-width:818px){#peterpen-page-designs .pc .lp-shelf.shelf-wrap>*{--lp-col:calc((100cqw - 72px) / 6.5)}}
@container (max-width:708px){#peterpen-page-designs .pc .lp-shelf.shelf-wrap>*{--lp-col:calc((100cqw - 60px) / 5.5)}}
#peterpen-page-designs .pc .lp-shelf.shelf-wrap .lp-book{flex-basis:var(--lp-col)}
#peterpen-page-designs .pc .lp-shelf.shelf-wrap .lp-cover{width:calc(var(--lp-col) - 18px)}
#peterpen-page-designs .pc .lp-shelf.shelf-wrap :is(.lp-title,.lp-author){width:calc(var(--lp-col) - 18px);margin-inline:auto}
#peterpen-page-designs .pc .lp-shelf.shelf-wrap>.shelf-arrow[data-shelf]{top:calc(14px + (var(--lp-col) - 18px) * .75)}
#peterpen-page-designs .lp-read{font:inherit;cursor:pointer}
#peterpen-page-designs .lp-read{display:block;width:100%;padding:0;border:0;background:transparent;color:inherit;text-align:center}
#peterpen-page-designs .lp-cover{position:relative;display:block;width:80px;aspect-ratio:2/3;margin:auto;border-radius:5px 7px 7px 5px;background:var(--soft);box-shadow:2px 4px 8px #07182e30;transition:transform .18s ease,box-shadow .18s ease}
#peterpen-page-designs .lp-cover::before{content:"";position:absolute;z-index:1;inset:0 auto 0 0;width:8px;border-radius:5px 0 0 5px;background:linear-gradient(90deg,#15283b75,transparent);pointer-events:none}
#peterpen-page-designs .lp-cover img{display:block;width:100%;height:100%;border-radius:inherit;object-fit:cover}
#peterpen-page-designs .lp-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;margin-top:6px;font-size:11px;line-height:16px;font-weight:700;overflow-wrap:anywhere}
#peterpen-page-designs .lp-author{display:block;width:100%;min-height:16px;margin:2px auto 0;padding:0;border:0;background:transparent;color:var(--muted);font:inherit;font-size:11px;line-height:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}@media (hover:hover) and (pointer:fine){#peterpen-page-designs .lp-author:hover{text-decoration:underline;text-underline-offset:2px}}#peterpen-page-designs .lp-author:focus-visible{outline:2px solid var(--green);outline-offset:2px;border-radius:5px}
.lp-popover{position:fixed;inset:auto;margin:0;box-sizing:border-box;width:min(372px,calc(100vw - 16px));max-height:calc(100vh - 16px);overflow:auto;padding:20px 20px 14px;border:1px solid #526d8c;border-radius:16px;background:linear-gradient(160deg,#243750 0%,#19283a 42%);color:#f4f8ff;box-shadow:0 20px 48px #0d203452,0 3px 9px #0d20341c;font:13px/1.55 system-ui,'Malgun Gothic',sans-serif;color-scheme:dark}
.lp-popover[data-appearance="dark"]{background:linear-gradient(160deg,#243750 0%,#19283a 42%)}
@supports (anchor-name:--lp-card){
  .lp-popover{position-anchor:--lp-card;position-area:bottom;margin:10px 8px 8px;position-try-order:most-height;position-try-fallbacks:flip-block,--lp-below-scroll,--lp-above-scroll;position-visibility:anchors-visible}
  .lp-popover[data-beside-list]{position-area:none;top:max(8px,anchor(--lp-card top));right:anchor(--lp-list left);margin:0 10px 0 0;max-height:calc(100vh - 16px);position-try-order:normal;position-try-fallbacks:--lp-list-bottom,flip-inline,--lp-list-bottom flip-inline}
}
@position-try --lp-below-scroll{position-area:bottom;max-height:calc(100% - 18px)}
@position-try --lp-above-scroll{position-area:top;margin:8px 8px 10px;max-height:calc(100% - 18px)}
@position-try --lp-list-bottom{top:auto;bottom:8px}
@media (prefers-reduced-motion:no-preference){
  .lp-popover{transition:opacity .16s ease,translate .2s cubic-bezier(.2,.8,.2,1),overlay .2s allow-discrete,display .2s allow-discrete}
  .lp-popover:not(:popover-open){opacity:0;translate:0 6px}
  @starting-style{.lp-popover:popover-open{opacity:0;translate:0 6px}}
}
.lp-popover-heading{display:flex;align-items:start;justify-content:space-between;gap:12px}
.lp-popover-head-main{display:flex;flex-wrap:wrap;align-items:baseline;gap:5px 8px;min-width:0}
.lp-popover-title{display:block;font-size:19px;line-height:1.35;letter-spacing:-.025em;overflow-wrap:anywhere}
.lp-popover-badges{display:inline-flex;flex-wrap:wrap;gap:5px}
.lp-popover-badges[hidden]{display:none}
.lp-popover-badges span{padding:2px 7px;border:1px solid #617f9f;border-radius:999px;background:#304b68;color:#e0efff;font-size:10px;font-weight:700;letter-spacing:0;white-space:nowrap}
.lp-popover-close{display:grid;place-items:center;flex:none;width:32px;height:32px;margin:-5px -5px 0 0;border:0;border-radius:8px;background:transparent;color:#c3d4e8;font:23px/1 system-ui;cursor:pointer}
@media (hover:hover) and (pointer:fine){.lp-popover-close:hover{background:#354f6b;color:#fff}}
.lp-popover-meta{margin:8px 0 13px;color:#c0d0e2;font-size:13px}
.lp-popover-intro{margin:0 0 15px;color:#edf4fd;font-size:14px;line-height:1.65;overflow-wrap:anywhere;word-break:keep-all}
.lp-popover-tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px}
.lp-popover-tags[hidden]{display:none}
.lp-popover-tags span{max-width:100%;padding:4px 9px;border:1px solid #526f8e;border-radius:999px;background:#2b435d;color:#dcecff;font-size:12px;line-height:1.4;overflow-wrap:anywhere}
.lp-popover-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:2px 12px;margin:0 -20px -14px;padding:9px 20px 10px;border-top:1px solid #435b76;background:#1c2e43;color:#c2d1e3;font-size:12px}
:is(#peterpen-page-designs,body) .lp-popover .lp-popover-disable.pp-btn-line{border-color:#617f9f;background:#2b435d;color:#e0efff}
:is(#peterpen-page-designs,body) .lp-popover .lp-popover-disable.pp-btn-line:active{background:#354f6b}
@media (hover:hover) and (pointer:fine){:is(#peterpen-page-designs,body) .lp-popover .lp-popover-disable.pp-btn-line:hover{background:#354f6b}}
:is(#peterpen-page-designs,body) .lp-popover .lp-popover-disable.pp-btn-line:focus-visible{outline:2px solid #84bdff;outline-offset:2px}
.lp-popover :is(button):focus-visible{outline:2px solid #84bdff;outline-offset:2px}
#peterpen-page-designs .lp-read:focus-visible{outline:2px solid var(--green);outline-offset:2px;border-radius:5px}
@media (prefers-reduced-motion:no-preference){@media (hover:hover) and (pointer:fine){#peterpen-page-designs .lp-read:hover .lp-cover{transform:translateY(-7px);box-shadow:3px 7px 12px #07182e40}}#peterpen-page-designs .lp-read:focus-visible .lp-cover{transform:translateY(-7px);box-shadow:3px 7px 12px #07182e40}}
#peterpen-page-designs .phone .lp-section{padding:11px 10px}
#peterpen-page-designs .phone .lp-heading{font-size:17px}
#peterpen-page-designs .phone .lp-books{gap:9px}
#peterpen-page-designs .phone .lp-book{flex-basis:89px}
#peterpen-page-designs .phone .lp-cover{width:72px}
@media (prefers-reduced-motion:reduce){#peterpen-page-designs .lp-cover{transition:none}}