/* StorySphere reader refinement v1.
 * Load after the captured application stylesheet; opt in on <html>.
 * Browsing surfaces only. Reading engines, reader preferences, fixed chrome,
 * voice controls, dialogs and the existing viewport/safe-area offsets retain
 * their own layout. Values below alias the live ShowWeld core theme.
 */
html[data-storysphere-refinement="1"] {
  --ssr-width: 80rem;
  --ssr-gutter: clamp(1rem, 2.5vw, 2rem);
  --ssr-ink: var(--sw-text-primary, var(--text-primary, CanvasText));
  --ssr-muted: var(--sw-text-secondary, var(--text-secondary, CanvasText));
  --ssr-line: var(--sw-border-color, var(--border-primary, GrayText));
  --ssr-panel: var(--sw-layer-default, var(--surface-primary, Canvas));
  --ssr-raised: var(--sw-layer-raised, var(--surface-secondary, Canvas));
  --ssr-accent: var(--accent-primary, var(--sw-accent-primary, Highlight));
  --ssr-selected: var(--sw-layer-selected, var(--surface-active, Canvas));
  --ssr-action-bg: color-mix(in srgb, var(--ssr-accent) 45%, black);
  --ssr-on-accent: white;
  --ssr-radius: var(--sw-panel-radius, var(--sw-radius-lg, 1rem));
  --ssr-control-radius: var(--sw-action-radius, var(--sw-control-radius, var(--sw-radius-md, .65rem)));
}

/* A shared reading-library measure; main's inline chrome clearance is intact. */
html[data-storysphere-refinement="1"] .sphere-main :is(.ss-reader-home, .webtoons-page, .sphere-discovery, .sphere-library, .reader-profile-page) {
  min-inline-size: 0;
  color: var(--ssr-ink);
  font-family: var(--sw-font-family-base, inherit);
}
html[data-storysphere-refinement="1"] .sphere-main :is(.sphere-discovery, .sphere-library, .webtoons-page) {
  box-sizing: border-box;
  width: min(100%, var(--ssr-width));
  max-width: var(--ssr-width);
  margin-inline: auto;
  padding-inline-start: max(var(--ssr-gutter), var(--safe-area-inset-left, env(safe-area-inset-left, 0px)));
  padding-inline-end: max(var(--ssr-gutter), var(--safe-area-inset-right, env(safe-area-inset-right, 0px)));
  padding-block-start: clamp(1.25rem, 3vw, 2.5rem);
}
html[data-storysphere-refinement="1"] .sphere-main .ss-reader-home .storysphere-home-stream {
  /* Supersede only the component's inline full-viewport sizing and top gap. */
  width: min(100%, var(--ssr-width)) !important;
  max-width: var(--ssr-width) !important;
  padding-top: clamp(1.5rem, 3vw, 2.75rem) !important;
  box-sizing: border-box;
  margin-inline: auto;
  padding-inline-start: max(var(--ssr-gutter), var(--safe-area-inset-left, env(safe-area-inset-left, 0px)));
  padding-inline-end: max(var(--ssr-gutter), var(--safe-area-inset-right, env(safe-area-inset-right, 0px)));
  gap: 1.5rem;
}
html[data-storysphere-refinement="1"] .sphere-main :is(.sphere-section-heading, .sphere-library__heading, .sphere-discovery__heading) {
  gap: 1rem;
  align-items: center;
}
html[data-storysphere-refinement="1"] .sphere-main :is(.sphere-library__heading h1, .sphere-discovery__heading h1, .sphere-visual-heading__title-row h1) {
  max-inline-size: none;
  margin: 0;
  font-family: var(--sw-font-family-heading, inherit);
  font-size: clamp(1.8rem, 2.7vw, 2.4rem);
  font-weight: 650;
  line-height: 1.15;
  letter-spacing: -.035em;
  text-transform: none;
  text-wrap: balance;
  color: var(--ssr-ink);
}
html[data-storysphere-refinement="1"] .sphere-main .sphere-section-heading h2 {
  font-size: clamp(1.3rem, 2vw, 1.75rem);
  font-weight: 620;
  line-height: 1.25;
  letter-spacing: -.025em;
  margin-block-start: .4rem;
}
html[data-storysphere-refinement="1"] .sphere-main :is(.sphere-text-action, .sphere-library__sync) {
  min-block-size: 2.75rem;
  color: var(--ssr-muted);
  font-size: .875rem;
  font-weight: 550;
  text-underline-offset: .25em;
}
html[data-storysphere-refinement="1"] .sphere-main :is(.sphere-eyebrow, .sw-community-card__eyebrow) {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .1em;
  line-height: 1.5;
  color: var(--ssr-muted);
}

/* A greeting with editorial presence and a compact, genuine continue card. */
html[data-storysphere-refinement="1"] .sphere-main .sphere-reader-welcome {
  grid-template-columns: minmax(0, 1.1fr) minmax(19rem, .95fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  padding: 0 0 1.75rem;
  border-block-end: 1px solid var(--ssr-line);
}
html[data-storysphere-refinement="1"] .sphere-main .sphere-reader-welcome h1 {
  max-inline-size: none;
  margin-block: 0 .65rem;
  color: var(--ssr-ink);
  font-family: var(--sw-font-family-heading, inherit);
  font-size: clamp(1.9rem, 3.2vw, 2.8rem);
  font-weight: 650;
  letter-spacing: -.045em;
  line-height: 1.12;
  text-wrap: balance;
}
html[data-storysphere-refinement="1"] .sphere-main .sphere-reader-welcome__intro > p {
  max-inline-size: 42ch;
  color: var(--ssr-muted);
  font-size: 1rem;
  line-height: 1.6;
}
html[data-storysphere-refinement="1"] .sphere-main .sphere-reader-welcome__actions {
  gap: .5rem 1.5rem;
  margin-block-start: .75rem;
}
html[data-storysphere-refinement="1"] .sphere-main .sphere-reading-preview {
  display: grid;
  grid-template-columns: 4.75rem minmax(0, 1fr);
  align-items: center;
  gap: 1.2rem;
  width: 100%;
  max-width: 31rem;
  margin-inline-start: auto;
  padding: 1.25rem;
  border: 1px solid var(--ssr-line);
  border-radius: var(--ssr-radius);
  background: var(--ssr-panel);
  box-shadow: none;
}
html[data-storysphere-refinement="1"] .sphere-main .sphere-reading-preview > .sphere-book-cover {
  width: 100%;
  min-width: 0;
}
html[data-storysphere-refinement="1"] .sphere-main .sphere-reading-preview__copy {
  min-width: 0;
}
html[data-storysphere-refinement="1"] .sphere-main .sphere-reading-preview h2 {
  margin-block: .35rem;
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  line-height: 1.3;
  letter-spacing: -.02em;
  font-weight: 620;
  overflow-wrap: anywhere;
}
html[data-storysphere-refinement="1"] .sphere-main .sphere-reading-preview progress {
  margin-block: .85rem .6rem;
  block-size: .25rem;
}
html[data-storysphere-refinement="1"] .sphere-main .ss-reader-home :is(.sphere-home-formats, .sphere-home-tools) > summary {
  min-block-size: 2.75rem;
  padding-block: .75rem;
  color: var(--ssr-muted);
  font-size: .8125rem;
}

/* Books lead. Their complete existing images and all story actions remain. */
html[data-storysphere-refinement="1"] .sphere-main :is(.sphere-home-books, .discover-results-grid) {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 2rem clamp(.875rem, 2vw, 1.5rem);
}
html[data-storysphere-refinement="1"] .sphere-main :is(.ss-reader-home, .sphere-discovery) .sphere-story-tile {
  min-inline-size: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
html[data-storysphere-refinement="1"] .sphere-main :is(.sphere-story-tile__book, .sphere-library-book__cover, .sphere-reading-preview) > .sphere-book-cover {
  border-radius: var(--sw-radius-sm, .45rem);
  background: var(--ssr-panel);
  box-shadow: none;
  border: 1px solid var(--ssr-line);
}
html[data-storysphere-refinement="1"] .sphere-main :is(.ss-reader-home, .sphere-discovery) .sphere-story-tile__book h3 {
  margin-block: .8rem .3rem;
  color: var(--ssr-ink);
  font-size: .9375rem;
  font-weight: 620;
  line-height: 1.4;
  letter-spacing: -.01em;
  overflow-wrap: anywhere;
}
html[data-storysphere-refinement="1"] .sphere-main :is(.ss-reader-home, .sphere-discovery) .sphere-story-tile__book p {
  color: var(--ssr-muted);
  font-size: .8125rem;
  line-height: 1.5;
}
html[data-storysphere-refinement="1"] .sphere-main .sphere-story-tile__metadata {
  color: var(--ssr-muted);
  font-size: .75rem;
}
html[data-storysphere-refinement="1"] .sphere-main .sphere-story-tile__options > div {
  padding: .5rem;
  border: 1px solid var(--ssr-line);
  border-radius: var(--ssr-control-radius);
  background: var(--ssr-panel);
}
html[data-storysphere-refinement="1"] .sphere-main :is(.sphere-home-feed-controls, .sphere-discovery__lanes, .sphere-discovery__genres) {
  border-color: var(--ssr-line);
}
html[data-storysphere-refinement="1"] .sphere-main :is(.sphere-home-tabs, .sphere-discovery__lanes) {
  gap: .25rem;
  scrollbar-width: thin;
  scrollbar-color: var(--ssr-line) transparent;
}
html[data-storysphere-refinement="1"] .sphere-main :is(.sphere-home-tabs, .sphere-discovery__lanes) button {
  min-block-size: 2.75rem;
  padding: .65rem .8rem;
  color: var(--ssr-muted);
  font-size: .875rem;
  font-weight: 550;
  white-space: nowrap;
}
html[data-storysphere-refinement="1"] .sphere-main :is(.sphere-home-tabs, .sphere-discovery__lanes) button[aria-pressed="true"] {
  color: var(--ssr-ink);
  border-bottom-color: var(--ssr-accent);
}

/* Webtoons: one compact format strip and two efficient desktop control rows. */
html[data-storysphere-refinement="1"] .sphere-main .webtoons-page {
  background: transparent;
}
html[data-storysphere-refinement="1"] .sphere-main .sphere-visual-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(17rem, 26rem);
  grid-template-areas: "formats formats" "title search" "lanes genres";
  align-items: center;
  gap: .75rem 2rem;
  position: relative;
  top: auto;
  padding: 0 0 1.25rem;
  border: 0;
  border-radius: 0;
  background: transparent !important; /* Override the core header's important raised surface. */
  box-shadow: none;
  backdrop-filter: none;
}
html[data-storysphere-refinement="1"] .sphere-main .sphere-visual-heading > .sphere-browse-nav {
  grid-area: formats;
  display: flex;
  flex-wrap: nowrap;
  gap: .5rem;
  margin: 0 0 .5rem;
  padding-block: .25rem;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--ssr-line) transparent;
  overscroll-behavior-inline: contain;
}
html[data-storysphere-refinement="1"] .sphere-main .sphere-visual-heading .sphere-browse-nav > a {
  position: relative;
  flex: 0 0 auto;
  min-block-size: 2.75rem;
  min-width: 0;
  gap: .5rem;
  padding: .6rem .9rem;
  border: 1px solid transparent;
  border-radius: var(--ssr-control-radius);
  background: transparent;
  box-shadow: none;
}
html[data-storysphere-refinement="1"] .sphere-main .sphere-visual-heading .sphere-browse-nav strong {
  font-size: .8125rem;
  font-weight: 550;
  white-space: nowrap;
}
html[data-storysphere-refinement="1"] .sphere-main .sphere-visual-heading .sphere-browse-nav > a > svg {
  inline-size: 1.05rem;
  block-size: 1.05rem;
  color: var(--ssr-muted);
}
html[data-storysphere-refinement="1"] .sphere-main .sphere-visual-heading .sphere-browse-nav > a > svg:last-child {
  display: none; /* Decorative arrow; the format link and first icon remain. */
}
html[data-storysphere-refinement="1"] .sphere-main .sphere-visual-heading .sphere-browse-nav small {
  /* Keep the secondary hint in the accessible name without a tall tile row. */
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
html[data-storysphere-refinement="1"] .sphere-main .sphere-visual-heading .sphere-browse-nav > a[aria-current="page"] {
  background: var(--ssr-selected);
  border-color: var(--ssr-line);
  color: var(--ssr-accent);
}
html[data-storysphere-refinement="1"] .sphere-main .sphere-visual-heading__title-row { grid-area: title; min-inline-size: 0; }
html[data-storysphere-refinement="1"] .sphere-main .sphere-visual-heading__title-row button {
  min-inline-size: 2.75rem;
  min-block-size: 2.75rem;
  color: var(--ssr-ink);
}
html[data-storysphere-refinement="1"] .sphere-main .sphere-visual-heading__search { grid-area: search; min-inline-size: 0; }
html[data-storysphere-refinement="1"] .sphere-main .sphere-visual-heading > .sphere-discovery__lanes { grid-area: lanes; min-inline-size: 0; }
html[data-storysphere-refinement="1"] .sphere-main .sphere-visual-heading > .sphere-discovery__genres { grid-area: genres; min-inline-size: 0; align-self: start; }
html[data-storysphere-refinement="1"] .sphere-main :is(.sphere-visual-heading__search > div, .sphere-discovery__search, .sphere-library__search) {
  min-block-size: 2.875rem;
  border: 1px solid var(--ssr-line);
  border-radius: var(--ssr-control-radius);
  background: var(--ssr-panel);
  padding: .65rem .85rem;
  box-shadow: none;
}
html[data-storysphere-refinement="1"] .sphere-main :is(.sphere-visual-heading__search, .sphere-discovery__search, .sphere-library__search) input {
  min-inline-size: 0;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--ssr-ink);
  background: transparent !important; /* The themed wrapper owns the field surface. */
  box-shadow: none;
}
html[data-storysphere-refinement="1"] .sphere-main .sphere-discovery__genres {
  margin-block: 0;
  color: var(--ssr-ink);
}
html[data-storysphere-refinement="1"] .sphere-main .sphere-discovery__genres > summary {
  min-block-size: 2.75rem;
  padding-block: .75rem;
  font-size: .8125rem;
}
html[data-storysphere-refinement="1"] .sphere-main .sphere-discovery__genres button {
  min-block-size: 2.75rem;
  padding: .55rem .85rem;
  border-radius: var(--ssr-control-radius);
  border-color: var(--ssr-line);
  box-shadow: none;
  color: var(--ssr-muted);
  background: var(--ssr-panel);
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
}
html[data-storysphere-refinement="1"] .sphere-main .sphere-discovery__genres button[aria-pressed="true"] {
  color: var(--ssr-accent);
  background: var(--ssr-selected);
  border-color: var(--ssr-accent);
}
html[data-storysphere-refinement="1"] .sphere-main .webtoons-page .visual-discovery-stack {
  padding-block: 1rem 1.5rem;
}
html[data-storysphere-refinement="1"] .sphere-main .webtoons-page .visual-discovery-stack > div {
  padding-inline: 0;
  margin-inline: 0;
}
html[data-storysphere-refinement="1"] .sphere-main .webtoons-page .visual-discovery-stack > div + div {
  margin-block-start: 2rem;
}
html[data-storysphere-refinement="1"] .sphere-main .webtoons-page .sphere-discovery__genres {
  margin-inline: 0;
}

html[data-storysphere-refinement="1"] .sphere-main .sphere-visual-heading__intro { margin: .35rem 0 0; color: var(--ssr-muted); font-size: .8125rem; line-height: 1.5; }

/* The feature is an actual cover and copy, not text painted over cropped art.
 * These stable hooks are added to the existing React wrappers; no new controls.
 */
html[data-storysphere-refinement="1"] .sphere-main .sphere-visual-hero {
  display: flex;
  flex-direction: column;
  height: auto;
  min-height: 0;
  border: 1px solid var(--ssr-line);
  border-radius: var(--ssr-radius);
  background: var(--ssr-panel);
  color: var(--ssr-ink);
  box-shadow: none;
}
html[data-storysphere-refinement="1"] .sphere-main .sphere-visual-hero__slide {
  position: relative;
  inset: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(9.5rem, 19vw, 14rem);
  align-items: center;
  gap: clamp(1.25rem, 4vw, 3.5rem);
  padding: 1rem clamp(1.25rem, 3vw, 2rem) 3.25rem;
}
html[data-storysphere-refinement="1"] .sphere-main .sphere-visual-hero__slide > img {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  width: 100%;
  height: auto;
  max-height: 16.5rem;
  object-fit: contain;
  object-position: center;
  border-radius: var(--sw-radius-sm, .45rem);
  transform: none;
  filter: none;
}
html[data-storysphere-refinement="1"] .sphere-main .sphere-visual-hero__slide > div:first-child:not(.sphere-visual-hero__copy):not(.sphere-visual-hero__scrim) {
  /* The existing missing-cover gradient occupies the same art column. */
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  max-height: 16.5rem;
  border-radius: var(--sw-radius-sm, .45rem);
}
html[data-storysphere-refinement="1"] .sphere-main .sphere-visual-hero__scrim {
  background: none;
}
html[data-storysphere-refinement="1"] .sphere-main .sphere-visual-hero__copy {
  position: static;
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-inline-size: 0;
  gap: .75rem;
}
html[data-storysphere-refinement="1"] .sphere-main .sphere-visual-hero__copy > * + * {
  margin-block: 0;
}
html[data-storysphere-refinement="1"] .sphere-main .sphere-visual-hero__copy h2 {
  max-inline-size: 22ch;
  font-family: var(--sw-font-family-heading, Georgia, serif);
  font-size: clamp(1.6rem, 3.1vw, 2.65rem);
  line-height: 1.12;
  font-weight: 650;
  font-style: normal;
  letter-spacing: -.035em;
  text-transform: none;
  color: var(--ssr-ink);
  text-shadow: none;
  filter: none;
}
html[data-storysphere-refinement="1"] .sphere-main .sphere-visual-hero__copy p {
  max-inline-size: 60ch;
  color: var(--ssr-muted);
  font-size: .9375rem;
  line-height: 1.6;
}
html[data-storysphere-refinement="1"] .sphere-main .sphere-visual-hero__copy > div:first-child > :is(span, div) {
  border: 1px solid var(--ssr-line);
  background: var(--ssr-raised);
  color: var(--ssr-muted);
  backdrop-filter: none;
  box-shadow: none;
  font-size: .6875rem;
  font-weight: 550;
  letter-spacing: .02em;
  text-transform: none;
}
html[data-storysphere-refinement="1"] .sphere-main .sphere-visual-hero__copy > div:last-child {
  flex-wrap: wrap;
  gap: .5rem;
  padding-block-start: .25rem;
}
html[data-storysphere-refinement="1"] .sphere-main .sphere-visual-hero__copy button {
  min-inline-size: 2.75rem;
  min-block-size: 2.75rem;
  padding: .65rem .85rem;
  border: 1px solid var(--ssr-line);
  border-radius: var(--ssr-control-radius);
  box-shadow: none;
  backdrop-filter: none;
  background: var(--ssr-raised);
  color: var(--ssr-ink);
  font-size: .875rem;
  font-weight: 600;
}
html[data-storysphere-refinement="1"] .sphere-main .sphere-visual-hero__copy .sphere-workspace-button--primary {
  border-color: var(--ssr-accent);
  background: var(--ssr-action-bg);
  color: var(--ssr-on-accent);
}
html[data-storysphere-refinement="1"] .sphere-main .sphere-visual-hero__copy button svg {
  color: inherit;
}
html[data-storysphere-refinement="1"] .sphere-main .sphere-visual-hero__facts {
  position: relative;
  inset: auto;
  order: -1;
  gap: 1rem;
  margin: .9rem clamp(1.25rem, 3vw, 2rem) 0;
}
html[data-storysphere-refinement="1"] .sphere-main .sphere-visual-hero__facts > div:first-child {
  border-color: var(--ssr-line);
  background: var(--ssr-raised);
  border-radius: var(--ssr-control-radius);
  box-shadow: none;
  backdrop-filter: none;
}
html[data-storysphere-refinement="1"] .sphere-main .sphere-visual-hero__facts > div:last-child:not(:first-child) > div:empty {
  display: none; /* Empty rings only; preserve the rating and any real follower count. */
}
html[data-storysphere-refinement="1"] .sphere-main .sphere-visual-hero__facts span { color: var(--ssr-muted); }
html[data-storysphere-refinement="1"] .sphere-main .sphere-visual-hero__pagination {
  bottom: .4rem;
  gap: 0;
}
html[data-storysphere-refinement="1"] .sphere-main .sphere-visual-hero__pagination button {
  position: relative;
  width: 2.75rem;
  height: 2.75rem;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0;
  border: 0;
  background: transparent;
}
html[data-storysphere-refinement="1"] .sphere-main .sphere-visual-hero__pagination button::after {
  content: "";
  display: block;
  width: .375rem;
  height: .375rem;
  margin: auto;
  border-radius: 1rem;
  background: var(--ssr-muted);
}
html[data-storysphere-refinement="1"] .sphere-main .sphere-visual-hero__pagination :is(button[aria-pressed="true"], button[aria-current="true"], button.w-6)::after {
  width: 1.4rem;
  background: var(--ssr-accent);
}

/* Visual shelves share the same restrained page rhythm as book shelves. */
html[data-storysphere-refinement="1"] .sphere-main .visual-discovery-row {
  margin-inline: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
html[data-storysphere-refinement="1"] .sphere-main .visual-discovery-row > div:first-child {
  padding-inline: 0;
  gap: 1rem;
}
html[data-storysphere-refinement="1"] .sphere-main .visual-discovery-row h3 {
  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
  line-height: 1.3;
  font-weight: 620;
  font-style: normal;
  letter-spacing: -.025em;
  text-transform: none;
}
html[data-storysphere-refinement="1"] .sphere-main .visual-discovery-row > div:first-child p {
  margin-block-start: .3rem;
  color: var(--ssr-muted);
  font-size: .8125rem;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
}
html[data-storysphere-refinement="1"] .sphere-main .visual-discovery-row > div:first-child > button {
  min-block-size: 2.75rem;
  font-size: .8125rem;
  font-weight: 550;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ssr-accent);
}
html[data-storysphere-refinement="1"] .sphere-main .visual-discovery-row__rail {
  gap: clamp(.875rem, 2vw, 1.5rem);
  padding: .25rem .2rem .75rem;
  margin-inline: -.2rem;
  scroll-padding-inline: .2rem;
  scrollbar-width: thin;
  scrollbar-color: var(--ssr-line) transparent;
  overscroll-behavior-inline: contain;
}
html[data-storysphere-refinement="1"] .sphere-main .visual-discovery-row__card {
  width: clamp(9rem, 16vw, 11rem);
  inline-size: clamp(9rem, 16vw, 11rem);
  min-inline-size: 0;
}
html[data-storysphere-refinement="1"] .sphere-main .visual-discovery-row__card > div:first-child {
  aspect-ratio: 2 / 3;
  border-radius: var(--sw-radius-sm, .45rem);
  border-color: var(--ssr-line);
  background: var(--ssr-panel);
  box-shadow: none;
}
html[data-storysphere-refinement="1"] .sphere-main .visual-discovery-row__card h4 {
  -webkit-line-clamp: 2;
  color: var(--ssr-ink);
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -.01em;
}
html[data-storysphere-refinement="1"] .sphere-main .visual-discovery-row__card p {
  color: var(--ssr-muted);
  font-size: .75rem;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
}
html[data-storysphere-refinement="1"] .sphere-main .sphere-visual-view-tools {
  padding-inline: 0;
}
html[data-storysphere-refinement="1"] .sphere-main .sphere-visual-view-tools button {
  min-block-size: 2.75rem;
  min-inline-size: 2.75rem;
  border-radius: var(--ssr-control-radius);
  box-shadow: none;
}

/* Library and discovery retain their existing shelf/list/detail mechanics. */
html[data-storysphere-refinement="1"] .sphere-main .ss-format-tabs {
  box-sizing: border-box;
  width: min(100%, var(--ssr-width));
  max-width: var(--ssr-width);
  margin-inline: auto;
  gap: .5rem;
  padding-inline: var(--ssr-gutter);
}
html[data-storysphere-refinement="1"] .sphere-main .ss-format-tabs a {
  border-radius: var(--ssr-control-radius);
  min-block-size: 2.75rem;
  color: var(--ssr-muted);
}
html[data-storysphere-refinement="1"] .sphere-main .ss-format-tabs a[aria-current="page"] {
  color: var(--ssr-accent);
  background: var(--ssr-selected);
}
html[data-storysphere-refinement="1"] .sphere-main .sphere-library__heading {
  margin-block-end: 1.25rem;
}
html[data-storysphere-refinement="1"] .sphere-main .sphere-library__continuity {
  margin-block-end: 1.5rem;
}
html[data-storysphere-refinement="1"] .sphere-main .sphere-library__continuity .sphere-library__resume {
  min-block-size: 4.25rem;
  padding: .85rem 1rem;
  border: 1px solid var(--ssr-line);
  border-radius: var(--ssr-radius);
  background: var(--ssr-panel);
  color: var(--ssr-ink);
}
html[data-storysphere-refinement="1"] .sphere-main .sphere-library:not([data-library-view="list"]) .sphere-library__books {
  grid-template-columns: repeat(auto-fill, minmax(min(10.25rem, 100%), 1fr));
  gap: 1.75rem 1.5rem;
}
html[data-storysphere-refinement="1"] .sphere-main .sphere-library-book__copy h2 {
  font-size: .9375rem;
  font-weight: 620;
  line-height: 1.4;
  color: var(--ssr-ink);
}
html[data-storysphere-refinement="1"] .sphere-main .sphere-library-book__copy > p {
  color: var(--ssr-muted);
  font-size: .8125rem;
  line-height: 1.5;
}
html[data-storysphere-refinement="1"] .sphere-main .sphere-library__shelves > button[aria-pressed="true"] {
  color: var(--ssr-accent);
  background: var(--ssr-selected);
}
html[data-storysphere-refinement="1"] .sphere-main .sphere-discovery > .discover-shelf-section {
  margin-block-start: 1.75rem;
}
html[data-storysphere-refinement="1"] .sphere-main :is(.ss-reader-home, .webtoons-page) .sw-community-card {
  gap: 1.5rem;
  padding: 1.5rem;
  border: 1px solid var(--ssr-line);
  border-radius: var(--ssr-radius);
  background: var(--ssr-panel);
  box-shadow: none;
}
html[data-storysphere-refinement="1"] .sphere-main :is(.sphere-profile-tools, .sphere-profile-bio) {
  border-color: var(--ssr-line);
  color: var(--ssr-muted);
}

/* Profile keeps its identity and useful actions while quieting decorative panels. */
html[data-storysphere-refinement="1"] .sphere-main .reader-profile-page {
  /* Override the component's fixed blue inline wash with the active canvas. */
  background: var(--sw-layer-canvas, var(--background-primary, Canvas)) !important;
}
html[data-storysphere-refinement="1"] .sphere-main .reader-profile-page > main {
  box-sizing: border-box;
  max-width: var(--ssr-width);
  margin-inline: auto;
  padding-inline: var(--ssr-gutter);
}
html[data-storysphere-refinement="1"] .sphere-main .reader-profile-page :is(.reader-command-center, .reader-action-card, .reader-system-card, .reader-profile-score, section.rounded-lg) {
  border: 1px solid var(--ssr-line);
  border-radius: var(--ssr-radius);
  background: var(--ssr-panel);
  color: var(--ssr-ink);
  box-shadow: none;
}
html[data-storysphere-refinement="1"] .sphere-main .reader-profile-page :is(.reader-command-center, .reader-action-card, .reader-system-card, section.rounded-lg) :is(h2, h3, .reader-system-card__value) {
  color: var(--ssr-ink);
  text-shadow: none;
}
html[data-storysphere-refinement="1"] .sphere-main .reader-profile-page :is(.reader-command-center, .reader-action-card, .reader-system-card, section.rounded-lg) p {
  color: var(--ssr-muted);
  line-height: 1.6;
}
html[data-storysphere-refinement="1"] .sphere-main .reader-profile-page :is(.reader-action-card, .reader-system-card)::before {
  box-shadow: none;
  background: none;
}
html[data-storysphere-refinement="1"] .sphere-main .reader-profile-page :is(.sphere-reader-identity, header) button {
  color: var(--ssr-ink);
  background: var(--ssr-panel);
  border-color: var(--ssr-line);
  box-shadow: none;
}
html[data-storysphere-refinement="1"] .sphere-main .reader-profile-page .sphere-reader-identity__name {
  font-size: clamp(1.6rem, 2.8vw, 2.25rem);
  line-height: 1.2;
  letter-spacing: -.035em;
}
html[data-storysphere-refinement="1"] .sphere-main .reader-profile-tabs {
  /* Replace the bundled mobile-only !important tile grid and overflow rule. */
  display: flex !important;
  gap: .25rem !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  border-bottom: 1px solid var(--ssr-line);
  background: var(--ssr-panel);
  box-shadow: none;
  scrollbar-width: thin;
  scrollbar-color: var(--ssr-line) transparent;
  overscroll-behavior-inline: contain;
}
html[data-storysphere-refinement="1"] .sphere-main .reader-profile-tabs > button {
  flex: 0 0 auto;
  width: auto;
  min-width: max-content !important;
  min-height: 2.75rem;
  padding: .7rem .85rem !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  color: var(--ssr-muted);
  background: transparent !important;
  box-shadow: none !important;
  font-size: .8125rem;
  font-weight: 550;
}
html[data-storysphere-refinement="1"] .sphere-main .reader-profile-tabs > button[aria-pressed="true"] {
  color: var(--ssr-ink);
  border-bottom-color: var(--ssr-accent) !important;
}

/* Book details are a separate browsing page. No .reader-page/content rules. */
html[data-storysphere-refinement="1"] .sphere-main .book-details-page .sphere-book-page {
  box-sizing: border-box;
  max-width: 72rem;
  padding: clamp(1.5rem, 3vw, 2.5rem) var(--ssr-gutter) max(2.5rem, var(--storysphere-bottom-stack, 0px));
}
html[data-storysphere-refinement="1"] .sphere-main .book-details-page .sphere-book-overview__title {
  font-family: var(--sw-font-family-heading, Georgia, serif);
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  font-weight: 500;
  letter-spacing: -.035em;
  line-height: 1.16;
  color: var(--ssr-ink);
}
html[data-storysphere-refinement="1"] .sphere-main .book-details-page :is(.sphere-book-overview__stats, .book-details-chapters-section) :is(h3, span) {
  color: var(--ssr-ink);
}
html[data-storysphere-refinement="1"] .sphere-main .book-details-page .sphere-book-overview__stats > div > span:first-child {
  color: var(--ssr-muted);
  font-size: .6875rem;
  font-weight: 550;
  letter-spacing: .06em;
}
html[data-storysphere-refinement="1"] .sphere-main .book-details-page .sphere-book-actions > button {
  min-block-size: 2.75rem;
  border: 1px solid var(--ssr-line);
  border-radius: var(--ssr-control-radius);
  background: var(--ssr-panel);
  color: var(--ssr-ink);
  box-shadow: none;
}
html[data-storysphere-refinement="1"] .sphere-main .book-details-page .sphere-book-actions > .sphere-book-actions__primary {
  border-color: var(--ssr-accent);
  background: var(--ssr-action-bg);
  color: var(--ssr-on-accent);
}
html[data-storysphere-refinement="1"] .sphere-main .book-details-page .sphere-book-description {
  max-inline-size: 70ch;
  color: var(--ssr-muted);
  font-size: 1rem;
  line-height: 1.75;
}
html[data-storysphere-refinement="1"] .sphere-main .book-details-page .book-details-chapters-section > .grid > div {
  min-inline-size: 0;
  min-block-size: 3.5rem;
  padding: 1rem;
  border: 1px solid var(--ssr-line);
  border-radius: var(--ssr-control-radius);
  background: var(--ssr-panel);
  box-shadow: none;
}
html[data-storysphere-refinement="1"] .sphere-main .book-details-page .book-details-chapters-section > .grid > div > div {
  min-inline-size: 0;
  gap: 1rem;
}
html[data-storysphere-refinement="1"] .sphere-main .book-details-page .book-details-chapters-section span {
  overflow-wrap: anywhere;
}

/* Interaction affordances apply to browsing roots, never chapter typography. */
html[data-storysphere-refinement="1"] .sphere-main :is(.ss-reader-home, .webtoons-page, .sphere-discovery, .sphere-library, .ss-format-tabs, .reader-profile-page, .book-details-page) :is(a, button, input, select, summary, [tabindex="0"]):focus-visible {
  outline: 2px solid var(--ssr-accent);
  outline-offset: 3px;
}
html[data-storysphere-refinement="1"] .sphere-main :is(.sphere-visual-heading__search > div, .sphere-discovery__search, .sphere-library__search):focus-within {
  border-color: var(--ssr-accent);
}
@media (hover: hover) and (pointer: fine) {
  html[data-storysphere-refinement="1"] .sphere-main :is(.sphere-text-action, .sphere-library__sync):hover { color: var(--ssr-accent); }
  html[data-storysphere-refinement="1"] .sphere-main :is(.sphere-reading-preview, .sphere-library__resume):hover { border-color: var(--ssr-accent); }
  html[data-storysphere-refinement="1"] .sphere-main .sphere-visual-heading .sphere-browse-nav > a:hover { background: var(--ssr-selected); }
}
@media (max-width: 1100px) {
  html[data-storysphere-refinement="1"] .sphere-main :is(.sphere-home-books, .discover-results-grid) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  html[data-storysphere-refinement="1"] .sphere-main .sphere-reader-welcome { gap: 1.5rem; grid-template-columns: minmax(0, 1fr) minmax(18rem, 1fr); }
}
@media (max-width: 900px) {
  html[data-storysphere-refinement="1"] .sphere-main .sphere-visual-heading { grid-template-columns: minmax(0, 1fr); grid-template-areas: "formats" "title" "search" "lanes" "genres"; gap: .65rem; }
}
@media (max-width: 767px) {
  html[data-storysphere-refinement="1"] .sphere-main .sphere-reader-welcome { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; padding-block-end: 1.25rem; }
  html[data-storysphere-refinement="1"] .sphere-main .sphere-reading-preview { max-width: none; margin-inline-start: 0; padding: 1rem; }
  html[data-storysphere-refinement="1"] .sphere-main .sphere-visual-heading { grid-template-columns: minmax(0, 1fr); grid-template-areas: "formats" "title" "search" "lanes" "genres"; gap: .65rem; }
  html[data-storysphere-refinement="1"] .sphere-main .sphere-visual-heading > .sphere-browse-nav { margin-block-end: .25rem; }
  html[data-storysphere-refinement="1"] .sphere-main .sphere-visual-hero__slide { grid-template-columns: minmax(0, 1fr) 7.5rem; gap: 1.25rem; padding: 1rem 1.25rem 3.25rem; }
  html[data-storysphere-refinement="1"] .sphere-main .sphere-visual-hero__copy h2 { font-size: 1.65rem; }
  html[data-storysphere-refinement="1"] .sphere-main .sphere-visual-hero__copy p { font-size: .8125rem; }
  html[data-storysphere-refinement="1"] .sphere-main .sphere-visual-hero__facts { margin-inline: 1.25rem; }
  html[data-storysphere-refinement="1"] .sphere-main .visual-discovery-row__card { width: 9rem; inline-size: 9rem; }
  html[data-storysphere-refinement="1"] .sphere-main .visual-discovery-row > div:first-child { align-items: start; }
  html[data-storysphere-refinement="1"] .sphere-main .sphere-library__continuity { margin-block-end: 1.25rem; }
}
@media (max-width: 599px) {
  html[data-storysphere-refinement="1"] .sphere-main .sphere-visual-heading__title-row h1 { font-size: 1.5rem; }
  html[data-storysphere-refinement="1"] .sphere-main :is(.sphere-home-books, .discover-results-grid) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1rem; }
  html[data-storysphere-refinement="1"] .sphere-main .sphere-library:not([data-library-view="list"]) .sphere-library__books { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1rem; }
  html[data-storysphere-refinement="1"] .sphere-main .sphere-visual-hero__slide { grid-template-columns: minmax(0, 1fr) 5.25rem; gap: .8rem; padding-inline: 1rem; align-items: start; }
  html[data-storysphere-refinement="1"] .sphere-main .sphere-visual-hero__copy { gap: .65rem; }
  html[data-storysphere-refinement="1"] .sphere-main .sphere-visual-hero__copy h2 { font-size: 1.4rem; line-height: 1.2; }
  html[data-storysphere-refinement="1"] .sphere-main .sphere-visual-hero__copy button { padding-inline: .65rem; font-size: .8125rem; }
  html[data-storysphere-refinement="1"] .sphere-main .sphere-visual-hero__facts { margin-inline: 1rem; }
  html[data-storysphere-refinement="1"] .sphere-main .sphere-home-feed-controls { align-items: start; gap: 0 .5rem; }
  html[data-storysphere-refinement="1"] .sphere-main .sphere-library__tools { grid-template-columns: minmax(0, 1fr); }
  html[data-storysphere-refinement="1"] .sphere-main .sphere-library__tools > .sphere-library__display { justify-self: start; }
  html[data-storysphere-refinement="1"] .sphere-main :is(.ss-reader-home, .webtoons-page) .sw-community-card { padding: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-storysphere-refinement="1"] .sphere-main :is(.sphere-reading-preview, .sphere-browse-nav a, .sphere-story-tile, .sphere-library-book, .visual-discovery-row__card, .sphere-visual-hero img, .sphere-visual-hero button) {
    animation: none !important;
    transition: none !important;
  }
  html[data-storysphere-refinement="1"] .sphere-main :is(.visual-discovery-row__rail, .sphere-browse-nav, .sphere-discovery__lanes) { scroll-behavior: auto; }
}
@media (forced-colors: active) {
  html[data-storysphere-refinement="1"] .sphere-main :is(.sphere-reading-preview, .sphere-library__resume, .sphere-visual-hero) { border-color: CanvasText; }
  html[data-storysphere-refinement="1"] .sphere-main .sphere-visual-hero__pagination button::after { background: ButtonText; }
  html[data-storysphere-refinement="1"] .sphere-main .sphere-visual-hero__pagination button[aria-pressed="true"] { outline: 2px solid Highlight; outline-offset: -5px; }
}