.comic-stories{--comic-ink: color-mix(in oklab, var(--color-care) 80%, var(--color-text));--comic-muted: color-mix(in oklab, var(--color-text) 78%, var(--color-background));padding-block-start:var(--space-lg)}comic-stories{display:block;border-block-start:1px solid var(--color-rule);padding-block-start:var(--space-xl)}.comic-stories__intro{text-align:center;margin-block-end:var(--space-lg)}.comic-stories__intro h2{font-size:var(--text-3xl)}.comic-stories__intro p{color:var(--comic-muted);margin:var(--space-sm) auto 0;max-width:48ch}.comic-stories__library{display:grid;gap:var(--space-md);max-width:45rem;margin:0 auto var(--space-xl)}.comic-stories__card{display:grid;grid-template-columns:6rem minmax(0,1fr);align-items:center;gap:var(--space-md);color:var(--color-text);text-decoration:none;border:1px solid var(--color-rule);border-radius:var(--radius-card);padding:var(--space-sm);transition:border-color var(--transition),background var(--transition)}.comic-stories__card:hover,.comic-stories__card.is-active{border-color:var(--comic-ink);background:var(--color-accent-soft)}.comic-stories__cover{aspect-ratio:3 / 4;overflow:hidden;border-radius:8px}.comic-stories__cover .comic-stories__image{width:100%;height:100%;object-fit:contain}.comic-stories__card-copy h3{font-size:var(--text-lg);line-height:var(--leading-snug);overflow-wrap:anywhere}.comic-stories__card-copy p{color:var(--comic-muted);font-size:var(--text-sm);margin-block-start:var(--space-2xs)}.comic-stories__read-link{display:inline-flex;gap:var(--space-xs);align-items:center;min-height:3rem;color:var(--comic-ink);font-size:var(--text-sm)}.comic-stories__layout{display:grid;gap:var(--space-lg);max-width:62rem;margin-inline:auto}.comic-stories__reader{width:100%;min-width:0;max-width:43rem;margin-inline:auto;scroll-margin-block-start:var(--space-lg);border-radius:var(--radius-card)}.comic-stories__story{scroll-margin-block-start:var(--space-lg)}.comic-stories__story+.comic-stories__story{margin-block-start:var(--space-xl)}.is-ready .comic-stories__story{margin-block-start:0}.comic-stories__story-head{text-align:center;max-width:36rem;margin:0 auto var(--space-md)}.comic-stories__story-head h3{font-size:var(--text-2xl);line-height:1.3;overflow-wrap:anywhere}.comic-stories__story-head p{color:var(--comic-muted);font-size:var(--text-sm);margin-block-start:var(--space-xs)}.comic-stories__pages{max-width:35rem;margin-inline:auto}.comic-stories__page{margin:0 0 var(--space-lg);min-width:0}.is-ready .comic-stories__page{margin-block-end:0}.comic-stories__artwork{background:var(--color-surface);box-shadow:var(--shadow-card);border-radius:12px;overflow:hidden;touch-action:pan-y pinch-zoom}.comic-stories__image{display:block;width:100%;height:auto;object-fit:contain;touch-action:pan-y pinch-zoom}.comic-stories__image-error{padding:var(--space-md);border:1px solid var(--color-rule);border-radius:12px;text-align:center;color:var(--comic-ink);font-size:var(--text-sm)}.is-ready .comic-stories__artwork{animation:comic-page-enter .18s ease-out}@keyframes comic-page-enter{0%{transform:translate(4px)}to{transform:translate(0)}}.comic-stories__fallback-count{text-align:center;font-size:var(--text-sm);margin-block-start:var(--space-xs)}.is-ready .comic-stories__fallback-count{display:none}.comic-stories__controls{display:flex;justify-content:center;align-items:center;gap:var(--space-md)}.comic-stories__reader>.comic-stories__controls{margin-block-start:var(--space-md)}.comic-stories__turn,.comic-stories__close{display:inline-flex;justify-content:center;align-items:center;width:3rem;height:3rem;flex-shrink:0;border:1px solid var(--color-rule);border-radius:50%;color:var(--comic-ink);background:var(--color-background);cursor:pointer;transition:background var(--transition),border-color var(--transition)}.comic-stories__turn svg{width:1.375rem;height:1.375rem}.comic-stories__turn:hover:not(:disabled),.comic-stories__close:hover{background:var(--color-accent-soft);border-color:var(--comic-ink)}.comic-stories__turn:disabled{opacity:.35;cursor:default}.comic-stories__position{min-width:5rem;text-align:center;color:var(--color-text);font-size:var(--text-sm);font-variant-numeric:tabular-nums}.comic-stories__below{margin-block-start:var(--space-xs);text-align:center}.comic-stories__hint,.comic-stories__original{font-size:var(--text-xs);color:var(--comic-muted)}.comic-stories__text-button{display:inline-flex;justify-content:center;align-items:center;gap:var(--space-2xs);border:0;background:transparent;color:var(--comic-ink);min-height:3rem;padding:var(--space-2xs) var(--space-xs);cursor:pointer;font-size:var(--text-sm);text-underline-offset:.2em}.comic-stories__text-button:hover{text-decoration:underline}.comic-stories__ending{text-align:center;margin-block-start:var(--space-lg);padding-block-start:var(--space-lg);border-block-start:1px solid var(--color-rule)}.comic-stories__ending .hand{color:var(--comic-ink)}.comic-stories__ending-actions{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:var(--space-xs);margin-block-start:var(--space-sm)}.comic-stories__share-status{text-align:center;color:var(--comic-muted);font-size:var(--text-sm)}.comic-stories__share-status:empty{display:none}.comic-stories__dialog{color:var(--color-text);background:var(--color-background);border:0;border-radius:var(--radius-card);width:min(60rem,calc(100vw - 2rem));height:calc(100dvh - 2rem);max-width:none;max-height:none;padding:0;margin:auto}.comic-stories__dialog[open]{display:flex;flex-direction:column}.comic-stories__dialog::backdrop{background:color-mix(in oklab,var(--color-text) 55%,transparent)}.comic-stories__dialog-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);padding:var(--space-xs) var(--space-md);border-block-end:1px solid var(--color-rule);flex-shrink:0}.comic-stories__dialog-head p{font-size:var(--text-sm);line-height:var(--leading-snug);overflow-wrap:anywhere}.comic-stories__close{font-size:1.75rem}.comic-stories__dialog-surface{overflow:auto;min-height:0;flex:1;touch-action:pan-y pinch-zoom;overscroll-behavior:contain}.comic-stories__dialog-image{display:block;width:min(100%,50rem);height:auto;margin-inline:auto;object-fit:contain}.comic-stories__dialog-foot{flex-shrink:0;padding:var(--space-xs) var(--space-md);border-block-start:1px solid var(--color-rule);text-align:center}.comic-stories__original{display:inline-flex;min-height:2.75rem;align-items:center;text-underline-offset:.2em}.comic-stories :is(button,a,[data-reader]):focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}@media(min-width:48rem){.comic-stories__library{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-lg)}.comic-stories__card{display:flex;flex-direction:column;padding:var(--space-md);text-align:center}.comic-stories__cover{width:min(100%,15rem)}.comic-stories__card-copy{width:100%}.comic-stories__pages{max-width:min(35rem,max(22rem,calc(75svh - 12rem)))}}@media(min-width:60rem){.comic-stories__layout{grid-template-columns:minmax(0,1fr) 20rem;gap:var(--space-xl);align-items:start}}@media(max-width:39.99rem){comic-stories{padding-block-start:var(--space-lg)}.comic-stories__dialog{width:100%;height:100dvh;border-radius:0}.comic-stories__dialog-head{padding-block-start:max(var(--space-xs),env(safe-area-inset-top))}.comic-stories__dialog-foot{padding-block-end:max(var(--space-xs),env(safe-area-inset-bottom))}}@media(prefers-reduced-motion:reduce){.comic-stories *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}.comic-stories__pages{position:relative}.comic-stories__expand-icon{position:absolute;inset-block-start:12px;inset-inline-start:12px;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--color-rule);border-radius:50%;background:var(--color-background);color:var(--comic-ink);cursor:pointer}.comic-stories__expand-icon svg{width:22px;height:22px}.comic-stories__expand-icon:hover{background:var(--color-accent-soft)}.comic-stories__expand-icon:focus-visible{outline:2px solid var(--comic-ink);outline-offset:3px}.comic-stories__explore{display:inline-flex;align-items:center;gap:var(--space-xs);min-height:44px}
/*# sourceMappingURL=/cdn/shop/t/22/assets/comic-stories.css.map */