:root {
  --ink: #171715;
  --ink-soft: #343431;
  --graphite: #6a6963;
  --muted: #8a8982;
  --line: #d6d3ca;
  --line-strong: #b8b5ab;
  --paper: #f4f2ec;
  --paper-deep: #e8e5dc;
  --white: #fff;
  --red: #e9472f;
  --red-dark: #c93622;
  --red-soft: #fee7e1;
  --sage: #cbd3c2;
  --success: #26734a;
  --success-soft: #e2f2e8;
  --warning: #8a5a10;
  --warning-soft: #fbefd5;
  --danger: #b92f24;
  --danger-soft: #fbe5e2;
  --reader: #11110f;
  --reader-soft: #1d1d1a;
  --font-sans: "Archivo", "Arial Narrow", Arial, sans-serif;
  --font-mono: "Fragment Mono", Consolas, monospace;
  --shell: min(1360px, calc(100vw - 64px));
  --radius-xs: 3px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --shadow-publication: 18px 30px 56px rgba(23, 23, 21, 0.22), 3px 5px 12px rgba(23, 23, 21, 0.14);
  --shadow-overlay: 12px 24px 60px rgba(0, 0, 0, 0.24);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-standard: cubic-bezier(.2, .8, .2, 1);
  --duration-fast: 160ms;
  --duration: 260ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font-sans); color: var(--ink); background: var(--paper); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
body, button, input { font: inherit; }
img, svg { display: block; }
img { max-width: 100%; }
button, input { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
button { border: 0; }
p, h1, h2, h3 { margin-top: 0; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
[hidden] { display: none !important; }

::selection { color: var(--white); background: var(--red); }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }

.shell { width: var(--shell); margin-inline: auto; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.skip-link { position: fixed; z-index: 9999; top: 12px; left: 12px; padding: 12px 16px; color: var(--white); background: var(--ink); transform: translateY(-160%); transition: transform var(--duration) var(--ease-out); }
.skip-link:focus { transform: translateY(0); }

.brand { display: inline-flex; align-items: baseline; width: max-content; color: var(--ink); font-size: 25px; font-weight: 800; line-height: 1; letter-spacing: -.045em; text-decoration: none; }
.brand span { color: var(--red); }
.brand--inverse { color: var(--white); }
.brand--footer { font-size: 31px; }

.button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 11px; padding: 0 20px; border: 1px solid transparent; border-radius: var(--radius-sm); font-size: 14px; font-weight: 680; line-height: 1; letter-spacing: -.01em; text-decoration: none; cursor: pointer; transition: background-color var(--duration-fast) ease, color var(--duration-fast) ease, border-color var(--duration-fast) ease, transform var(--duration-fast) var(--ease-out); }
.button svg { width: 18px; height: 18px; }
.button:hover:not(:disabled) { transform: translateY(-2px); }
.button:active:not(:disabled) { transform: translateY(0); }
.button:disabled { cursor: not-allowed; opacity: .48; }
.button--primary { color: var(--white); background: var(--red); }
.button--primary:hover:not(:disabled) { background: var(--red-dark); }
.button--secondary { color: var(--ink); background: transparent; border-color: var(--line-strong); }
.button--secondary:hover:not(:disabled) { color: var(--white); background: var(--ink); border-color: var(--ink); }
.button--text { min-height: 44px; padding-inline: 6px; color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-strong); }
.button--small { min-height: 44px; padding-inline: 15px; font-size: 13px; }
.button--wide { width: 100%; }
.button--danger { color: var(--white); background: var(--danger); }
.button--danger:hover:not(:disabled) { background: #902219; }
.button--light { color: var(--ink); background: var(--white); }
.button--light:hover { background: var(--paper); }
.button--reader { min-height: 44px; padding-inline: 13px; color: #efeee9; background: #282824; border-color: #42423d; }
.button--reader:hover { background: #373732; }
.button__loader { display: none; width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
.button.is-loading .button__loader { display: block; }
.button.is-loading > svg { display: none; }

.icon-button, .reader-control { width: 44px; height: 44px; display: inline-grid; place-items: center; padding: 0; border-radius: var(--radius-sm); color: var(--ink); background: transparent; cursor: pointer; transition: color var(--duration-fast) ease, background-color var(--duration-fast) ease, transform var(--duration-fast) var(--ease-out); }
.icon-button svg, .reader-control svg { width: 20px; height: 20px; }
.icon-button:hover:not(:disabled) { background: var(--paper-deep); }
.icon-button:active:not(:disabled) { transform: scale(.96); }
.icon-button:disabled { opacity: .42; cursor: not-allowed; }
.icon-button--light { color: var(--white); }
.icon-button--light:hover:not(:disabled) { background: rgba(255, 255, 255, .1); }
.icon-button--danger { color: var(--danger); }
.icon-button--danger:hover { background: var(--danger-soft); }
.text-link { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; text-decoration: none; }
.text-link:hover { text-decoration: underline; }
.text-link svg { width: 17px; height: 17px; }

.section-kicker { margin-bottom: 19px; color: var(--red); font-family: var(--font-mono); font-size: 11px; line-height: 1.4; letter-spacing: .02em; text-transform: uppercase; }

/* Shared headers */
.site-header { position: sticky; z-index: 100; top: 0; color: var(--ink); background: rgba(244, 242, 236, .93); border-bottom: 1px solid transparent; backdrop-filter: blur(12px); transition: border-color var(--duration) ease; }
.site-header--scrolled { border-bottom-color: var(--line); }
.site-header__inner, .app-header__inner { min-height: 72px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; }
.site-nav, .app-nav { display: flex; align-items: center; gap: 28px; }
.site-nav a, .app-nav a { position: relative; padding-block: 8px; color: var(--ink-soft); font-size: 13px; font-weight: 560; text-decoration: none; }
.site-nav a::after, .app-nav a::after { position: absolute; right: 0; bottom: 2px; left: 0; height: 1px; content: ""; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform var(--duration) var(--ease-out); }
.site-nav a:hover::after, .app-nav a:hover::after, .app-nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.site-header__actions { display: flex; justify-content: flex-end; align-items: center; gap: 22px; }
.nav-toggle { display: none; justify-self: end; }

/* Landing */
.hero { min-height: calc(100svh - 72px); display: grid; grid-template-columns: minmax(380px, 5fr) minmax(540px, 7fr); grid-template-rows: 1fr auto; align-items: center; column-gap: clamp(42px, 6vw, 96px); padding-block: clamp(64px, 8vh, 110px) 28px; overflow: hidden; }
.hero__copy { position: relative; z-index: 3; align-self: center; padding-bottom: 28px; }
.hero__kicker { display: flex; align-items: center; gap: 10px; margin-bottom: 26px; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; }
.hero__kicker span { width: 25px; height: 2px; background: var(--red); }
.hero h1 { max-width: 730px; margin-bottom: 28px; font-size: clamp(54px, 6.4vw, 92px); font-stretch: 82%; font-weight: 750; line-height: .93; letter-spacing: -.04em; }
.hero h1 em { color: var(--red); font-style: normal; font-weight: 450; }
.hero__lead { max-width: 590px; margin-bottom: 31px; color: var(--ink-soft); font-size: clamp(17px, 1.3vw, 20px); line-height: 1.55; }
.hero__actions { display: flex; align-items: center; gap: 22px; margin-bottom: 21px; }
.hero__note { max-width: 470px; margin: 0; color: var(--graphite); font-size: 12px; line-height: 1.55; }

.hero-publication { position: relative; width: min(100%, 790px); aspect-ratio: 1.38; justify-self: end; perspective: 1700px; transform: rotate(-2.8deg); }
.hero-publication__shadow { position: absolute; z-index: 0; inset: 12% 3% 2% 4%; background: rgba(0, 0, 0, .25); filter: blur(28px); transform: translate(20px, 26px) rotate(2deg); }
.hero-publication__page { position: absolute; top: 7%; bottom: 7%; width: 49%; padding: clamp(24px, 3vw, 48px); overflow: hidden; background: var(--white); box-shadow: 5px 9px 19px rgba(23, 23, 21, .13); }
.hero-publication__page::after { position: absolute; top: 0; bottom: 0; width: 32px; content: ""; pointer-events: none; }
.hero-publication__page--left { left: 1.4%; transform-origin: right center; transform: rotateY(4deg); }
.hero-publication__page--left::after { right: 0; background: linear-gradient(to left, rgba(20, 20, 18, .18), transparent); }
.hero-publication__page--right { right: 1.4%; transform-origin: left center; transform: rotateY(-4deg); }
.hero-publication__page--right::after { left: 0; background: linear-gradient(to right, rgba(20, 20, 18, .14), transparent); }
.hero-publication .folio { font-family: var(--font-mono); font-size: 10px; }
.hero-publication__page--left strong { display: block; margin-top: 18%; font-size: clamp(42px, 5vw, 78px); font-stretch: 80%; font-weight: 800; line-height: .85; letter-spacing: -.04em; }
.hero-publication__page--left p { position: absolute; right: clamp(24px, 3vw, 48px); bottom: 8%; left: clamp(24px, 3vw, 48px); max-width: 25ch; margin: 0; color: var(--graphite); font-size: clamp(11px, 1vw, 15px); line-height: 1.45; }
.hero-publication__page--right p { position: absolute; right: 9%; bottom: 8%; left: 14%; max-width: 22ch; margin: 0; font-size: clamp(13px, 1.3vw, 18px); font-weight: 650; line-height: 1.3; }
.hero-publication__page--right .folio { position: absolute; right: 8%; bottom: 8%; }
.editorial-scene { position: absolute; inset: 0 0 38%; 0; overflow: hidden; background: var(--sage); }
.editorial-scene::before { position: absolute; right: 0; bottom: 0; left: 0; height: 55%; content: ""; background: var(--ink); clip-path: polygon(0 76%, 31% 22%, 47% 60%, 70% 11%, 100% 74%, 100% 100%, 0 100%); }
.editorial-scene::after { position: absolute; top: 16%; right: 13%; width: 28%; aspect-ratio: 1; content: ""; background: var(--red); border-radius: 50%; }
.editorial-scene span { position: absolute; z-index: 1; bottom: 0; width: 2px; height: 44%; background: var(--paper); opacity: .78; }
.editorial-scene span:nth-child(1) { left: 24%; }
.editorial-scene span:nth-child(2) { left: 50%; height: 63%; }
.editorial-scene span:nth-child(3) { left: 76%; height: 31%; }
.hero-publication__turn { position: absolute; z-index: 5; top: -2%; right: 7%; width: 43%; height: 91%; overflow: hidden; color: var(--white); background: #d7d5ce; box-shadow: -14px 18px 30px rgba(23, 23, 21, .25); clip-path: polygon(10% 0, 100% 9%, 84% 100%, 0 88%); transform-origin: left center; transform: rotateY(-56deg) rotateZ(4deg); animation: hero-page-settle 1.15s var(--ease-out) both; }
.hero-publication__turn::after { position: absolute; inset: 0; content: ""; background: linear-gradient(105deg, rgba(0, 0, 0, .34), transparent 42%, rgba(255, 255, 255, .7) 78%, rgba(0, 0, 0, .12)); }
.hero-publication__turn span { position: absolute; z-index: 2; top: 13%; left: 24%; color: var(--ink); font-family: var(--font-mono); font-size: 13px; }
.hero-publication__turn i { position: absolute; inset: 32% 12% 12% 18%; background: var(--red); }
.crop-mark { position: absolute; z-index: 8; width: 31px; height: 31px; }
.crop-mark::before, .crop-mark::after { position: absolute; content: ""; background: var(--red); }
.crop-mark::before { width: 31px; height: 1px; }
.crop-mark::after { width: 1px; height: 31px; }
.crop-mark--tl { top: 0; left: 0; }
.crop-mark--br { right: 0; bottom: 0; transform: rotate(180deg); }
.hero__instruction { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; padding-top: 21px; border-top: 1px solid var(--line); color: var(--graphite); font-size: 12px; }
.hero__instruction svg { width: 20px; height: 20px; color: var(--red); }

.demo-section { padding-block: clamp(90px, 12vw, 170px); color: var(--white); background: var(--reader); }
.demo-section__heading { display: grid; grid-template-columns: 1.1fr .9fr; gap: 12%; align-items: end; margin-bottom: 62px; }
.demo-section h2, .workflow h2, .uses h2, .final-cta h2 { margin-bottom: 0; font-size: clamp(43px, 5vw, 75px); font-stretch: 82%; font-weight: 680; line-height: .98; letter-spacing: -.035em; }
.demo-section__heading > p { max-width: 48ch; margin: 0 0 5px; color: #bdbcb6; font-size: 16px; line-height: 1.65; }
.demo-stage { width: min(1500px, calc(100vw - 30px)); min-height: min(790px, 78vw); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; margin-inline: auto; padding: 36px clamp(12px, 4vw, 64px) 24px; background: radial-gradient(circle at 50% 45%, #292923 0, #181816 58%, #11110f 100%); }
.demo-book { width: min(1050px, 78vw); height: min(700px, 57vw); }
.demo-page { position: relative; width: 100%; height: 100%; padding: clamp(22px, 3vw, 52px); overflow: hidden; color: var(--ink); background: var(--white); }
.demo-page::after { position: absolute; z-index: 10; top: 0; bottom: 0; left: 0; width: 22px; content: ""; background: linear-gradient(to right, rgba(0, 0, 0, .13), transparent); pointer-events: none; }
.demo-page > span { position: relative; z-index: 2; font-family: var(--font-mono); font-size: clamp(7px, .75vw, 11px); }
.demo-page h3 { position: relative; z-index: 2; font-size: clamp(30px, 4.3vw, 67px); font-stretch: 78%; line-height: .91; letter-spacing: -.035em; }
.demo-page p { position: relative; z-index: 2; max-width: 29ch; margin-bottom: 0; font-size: clamp(10px, 1.1vw, 15px); line-height: 1.5; }
.demo-page--cover { color: var(--ink); background: var(--red); }
.demo-page--cover::before { position: absolute; right: -20%; bottom: -8%; width: 115%; height: 54%; content: ""; background: var(--ink); transform: rotate(-17deg); }
.demo-page--cover h3 { margin-top: 18%; }
.demo-page--cover p { position: absolute; right: 12%; bottom: 8%; color: var(--paper); }
.demo-page--essay h3 { margin-top: 54%; }
.demo-page--essay p { color: var(--graphite); }
.demo-page__art { position: absolute; top: 0; right: 0; left: 0; height: 47%; overflow: hidden; }
.demo-page__art--green { background: var(--sage); }
.demo-page__art--green::before { position: absolute; right: 0; bottom: 0; left: 0; height: 75%; content: ""; background: #64775f; clip-path: polygon(0 100%, 0 71%, 25% 31%, 43% 62%, 68% 12%, 100% 66%, 100% 100%); }
.demo-page__art--green::after { position: absolute; top: 17%; right: 14%; width: 22%; aspect-ratio: 1; content: ""; background: var(--red); border-radius: 50%; }
.demo-page--dark { color: var(--paper); background: var(--ink); }
.demo-page--dark h3 { margin-top: 57%; }
.demo-page--dark p { color: #c5c3bb; }
.demo-page__art--red { right: 10%; left: 10%; height: 44%; background: var(--red); }
.demo-page__art--red::after { position: absolute; right: -20%; bottom: -30%; width: 85%; aspect-ratio: 1; content: ""; background: var(--paper); border-radius: 50%; }
.demo-page__art--land { background: #ded9cc; }
.demo-page__art--land::before { position: absolute; inset: 0; content: ""; background: #4e6254; clip-path: polygon(0 100%, 0 79%, 20% 51%, 41% 72%, 62% 38%, 100% 86%, 100% 100%); }
.demo-page--back { color: var(--paper); background: var(--red); }
.demo-page--back h3 { margin-top: 35%; }
.demo-page--back p { position: absolute; bottom: 8%; }
.demo-book--fallback { width: min(520px, 90vw); }
.demo-book--fallback .demo-page { display: none; }
.demo-book--fallback .demo-page--fallback-active { display: block; }
.demo-controls { min-height: 54px; display: flex; align-items: center; gap: 12px; padding: 5px 7px; color: var(--white); background: #20201d; border: 1px solid #373732; border-radius: var(--radius-md); }
.demo-controls p { min-width: 70px; margin: 0; font-family: var(--font-mono); font-size: 12px; text-align: center; }
.demo-controls__open { min-height: 44px; display: inline-flex; align-items: center; gap: 9px; margin-left: 5px; padding: 0 12px 0 16px; border-left: 1px solid #42423d; font-size: 12px; text-decoration: none; }
.demo-controls__open:hover { color: #fff; text-decoration: underline; }
.demo-controls__open svg { width: 16px; height: 16px; }

.workflow { display: grid; grid-template-columns: 4fr 8fr; gap: 8%; padding-block: clamp(100px, 13vw, 185px); }
.workflow__intro { align-self: start; position: sticky; top: 112px; }
.workflow__intro h2 { margin-bottom: 30px; }
.workflow__intro > p:last-child { max-width: 42ch; margin: 0; color: var(--graphite); font-size: 16px; line-height: 1.65; }
.workflow__steps { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.workflow__steps li { display: grid; grid-template-columns: 70px 68px 1fr; grid-template-rows: auto auto; gap: 7px 24px; align-items: center; padding: 34px 0; border-bottom: 1px solid var(--line); }
.workflow__number { grid-row: 1 / 3; align-self: start; font-family: var(--font-mono); font-size: 12px; }
.workflow__steps svg { grid-row: 1 / 3; width: 32px; height: 32px; color: var(--red); }
.workflow__steps h3 { margin: 0; font-size: clamp(24px, 2.4vw, 34px); font-stretch: 90%; font-weight: 620; line-height: 1.1; letter-spacing: -.02em; }
.workflow__steps p { max-width: 44ch; margin: 0; color: var(--graphite); font-size: 14px; line-height: 1.55; }
.workflow__progress { grid-row: 1 / 3; width: 36px; height: 36px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 3px; }
.workflow__progress i { background: var(--red); }
.workflow__progress i:nth-child(2), .workflow__progress i:nth-child(3) { opacity: .28; }
.workflow__progress i:nth-child(4) { opacity: .55; }

.before-start { display: grid; grid-template-columns: 4fr 8fr; gap: 8%; padding-bottom: clamp(100px, 12vw, 165px); }
.before-start header { align-self: start; }
.before-start h2 { max-width: 560px; margin: 0; font-size: clamp(38px, 4.4vw, 63px); font-stretch: 82%; font-weight: 680; line-height: .98; letter-spacing: -.035em; }
.before-start dl { margin: 0; border-top: 1px solid var(--ink); }
.before-start dl > div { min-height: 68px; display: grid; grid-template-columns: minmax(110px, 1fr) 2fr; gap: 24px; align-items: center; border-bottom: 1px solid var(--line); }
.before-start dt { color: var(--graphite); font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; }
.before-start dd { margin: 0; font-size: 14px; font-weight: 570; }

.uses { padding-block: clamp(90px, 11vw, 155px); background: var(--white); border-block: 1px solid var(--line); }
.uses__heading { display: grid; grid-template-columns: 3fr 7fr; align-items: end; gap: 6%; margin-bottom: 66px; }
.uses__heading .section-kicker { align-self: start; margin-top: 9px; }
.uses__heading h2 { max-width: 900px; }
.uses__rail { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 2vw, 30px); align-items: end; }
.use-publication { position: relative; min-height: 380px; display: flex; flex-direction: column; justify-content: flex-end; padding: 28px; color: var(--ink); border-radius: var(--radius-xs); box-shadow: var(--shadow-publication); transition: transform var(--duration) var(--ease-out), box-shadow var(--duration) ease; }
.use-publication:hover { transform: translateY(-9px) rotate(-.5deg); box-shadow: 22px 38px 65px rgba(23, 23, 21, .24), 3px 6px 14px rgba(23, 23, 21, .13); }
.use-publication::after { position: absolute; top: 12px; right: -5px; bottom: 8px; width: 5px; content: ""; background: repeating-linear-gradient(to bottom, var(--paper) 0 2px, var(--line) 2px 3px); }
.use-publication span { position: absolute; top: 24px; left: 27px; font-family: var(--font-mono); font-size: 10px; }
.use-publication h3 { margin: 0 0 10px; font-size: clamp(25px, 2vw, 34px); font-stretch: 85%; line-height: 1; letter-spacing: -.025em; }
.use-publication p { margin: 0; font-size: 13px; line-height: 1.45; }
.use-publication--red { min-height: 440px; color: var(--paper); background: var(--red); }
.use-publication--ink { min-height: 380px; color: var(--paper); background: var(--ink); }
.use-publication--paper { min-height: 480px; background: var(--paper); }
.use-publication--sage { min-height: 410px; background: var(--sage); }
.uses__aside { max-width: 64ch; margin: 50px 0 0 auto; color: var(--graphite); font-size: 14px; line-height: 1.6; text-align: right; }

.final-cta { min-height: 590px; display: grid; grid-template-columns: 2fr 7fr auto; align-items: center; gap: 5%; padding-block: 90px; }
.final-cta__mark { position: relative; width: 116px; height: 150px; }
.final-cta__mark span { position: absolute; inset: 0; background: var(--white); border: 1px solid var(--line); box-shadow: 8px 12px 18px rgba(23, 23, 21, .08); }
.final-cta__mark span:nth-child(1) { transform: translate(-20px, 15px) rotate(-8deg); }
.final-cta__mark span:nth-child(2) { background: var(--red); transform: translate(12px, 7px) rotate(7deg); }
.final-cta__mark span:nth-child(3) { transform: rotate(-1deg); }
.final-cta h2 { max-width: 820px; }

.site-footer { color: #d1d0ca; background: var(--ink); }
.site-footer__inner { min-height: 190px; display: grid; grid-template-columns: 1fr 2fr 1fr auto; align-items: center; gap: 40px; }
.site-footer p { margin: 0; color: #adaca6; font-size: 13px; }
.site-footer nav { display: flex; gap: 24px; }
.site-footer nav a { font-size: 13px; text-decoration: none; }
.site-footer nav a:hover { color: var(--white); text-decoration: underline; }
.site-footer__legal { font-family: var(--font-mono); }

/* Auth */
.auth-page { min-height: 100svh; background: var(--white); }
.auth-layout { min-height: 100svh; display: grid; grid-template-columns: minmax(480px, 1.05fr) minmax(520px, .95fr); }
.auth-visual { position: relative; min-height: 720px; display: flex; flex-direction: column; padding: clamp(38px, 4.5vw, 72px); overflow: hidden; color: var(--white); background: var(--ink); }
.auth-visual::after { position: absolute; top: 0; right: 16%; bottom: 0; width: 1px; content: ""; background: rgba(255, 255, 255, .13); }
.auth-visual__content { position: relative; z-index: 2; margin-top: clamp(80px, 12vh, 150px); }
.auth-visual__folio { margin-bottom: 27px; color: #aaa9a2; font-family: var(--font-mono); font-size: 11px; }
.auth-visual h1 { max-width: 730px; margin-bottom: 27px; font-size: clamp(50px, 5.4vw, 82px); font-stretch: 78%; font-weight: 700; line-height: .96; letter-spacing: -.04em; }
.auth-visual__content > p:last-child { max-width: 46ch; margin: 0; color: #c4c2bb; font-size: 16px; line-height: 1.6; }
.auth-visual__caption { position: relative; z-index: 2; margin: auto 0 0; color: #97968f; font-size: 12px; }
.auth-stack { position: absolute; right: -1%; bottom: 7%; width: min(49%, 430px); height: 48%; perspective: 1200px; }
.auth-stack__book { position: absolute; right: 0; width: 66%; height: 82%; display: flex; flex-direction: column; justify-content: space-between; padding: 24px; color: var(--ink); background: var(--paper); border-radius: var(--radius-xs); box-shadow: var(--shadow-publication); transform-origin: bottom center; }
.auth-stack__book span { max-width: 8ch; font-size: clamp(20px, 2vw, 32px); font-stretch: 80%; font-weight: 700; line-height: .95; }
.auth-stack__book b { font-family: var(--font-mono); font-size: 10px; }
.auth-stack__book--back { color: var(--paper); background: #56685a; transform: translate(-48%, -12%) rotate(-13deg); }
.auth-stack__book--mid { background: var(--sage); transform: translate(-23%, -4%) rotate(-5deg); }
.auth-stack__book--front { background: var(--red); transform: rotate(5deg); }
.auth-panel { min-height: 100svh; display: flex; flex-direction: column; padding: clamp(28px, 4.5vw, 72px); }
.auth-panel__top { display: flex; justify-content: flex-end; }
.auth-panel__mobile-brand { display: none; }
.auth-form-wrap { width: min(100%, 520px); margin: auto; padding-block: 60px; }
.auth-form__heading { margin-bottom: 38px; }
.auth-form__heading h2 { margin-bottom: 13px; font-size: clamp(38px, 4vw, 58px); font-stretch: 84%; font-weight: 680; line-height: .98; letter-spacing: -.035em; }
.auth-form__heading > p:last-child { margin: 0; color: var(--graphite); font-size: 15px; line-height: 1.55; }
.auth-panel__foot { margin: auto auto 0; color: var(--muted); font-size: 11px; text-align: center; }
.auth-spread { position: absolute; right: 4%; bottom: 10%; width: min(54%, 500px); aspect-ratio: 1.46; display: grid; grid-template-columns: 1fr 1fr; transform: rotate(-6deg); }
.auth-spread > div { position: relative; padding: 26px; overflow: hidden; background: var(--paper); box-shadow: var(--shadow-publication); }
.auth-spread > div:first-child { color: var(--ink); transform: rotateY(5deg); }
.auth-spread > div:last-child { color: var(--ink); background: var(--red); transform: rotateY(-5deg); }
.auth-spread span { font-family: var(--font-mono); font-size: 10px; }
.auth-spread i { display: block; width: 80%; height: 4px; margin-top: 24px; background: var(--line-strong); }
.auth-spread i + i { width: 58%; margin-top: 11px; }
.auth-spread i + i + i { width: 69%; }
.auth-spread b { position: absolute; bottom: 28px; left: 27px; font-size: clamp(28px, 3vw, 49px); font-stretch: 77%; line-height: .87; }

.form-stack { display: grid; gap: 22px; }
.form-stack--compact { gap: 17px; }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: grid; gap: 9px; }
.field label { width: max-content; font-size: 13px; font-weight: 640; }
.field input { width: 100%; height: 52px; padding: 0 15px; color: var(--ink); background: var(--white); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); outline: 0; transition: border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease, background-color var(--duration-fast) ease; }
.field input::placeholder { color: #77766f; opacity: 1; }
.field input:hover:not(:disabled) { border-color: var(--graphite); }
.field input:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(233, 71, 47, .18); }
.field input:disabled { color: var(--graphite); background: var(--paper-deep); cursor: not-allowed; }
.field--large input { height: 60px; font-size: 17px; }
.field--error input { border-color: var(--danger); background: #fffafa; }
.field--error input:focus { box-shadow: 0 0 0 3px rgba(185, 47, 36, .16); }
.field__error { min-height: 0; margin: -2px 0 0; color: var(--danger); font-size: 12px; line-height: 1.4; }
.field__error:empty { display: none; }
.field__meta { display: flex; justify-content: space-between; gap: 15px; color: var(--graphite); font-size: 12px; line-height: 1.4; }
.field__meta p { margin: 0; }
.field__meta span { flex: 0 0 auto; font-family: var(--font-mono); }
.field__meta b { font-weight: 400; }
.password-field { position: relative; }
.password-field input { padding-right: 54px; }
.password-toggle { position: absolute; top: 4px; right: 4px; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; color: var(--graphite); background: transparent; border-radius: 6px; cursor: pointer; }
.password-toggle:hover { color: var(--ink); background: var(--paper); }
.password-toggle svg { width: 19px; height: 19px; }
.auth-switch { margin: 25px 0 0; color: var(--graphite); font-size: 13px; text-align: center; }
.auth-switch a { color: var(--ink); font-weight: 650; }
.alert { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 24px; padding: 14px 15px; border-radius: var(--radius-sm); font-size: 13px; line-height: 1.5; }
.alert svg { flex: 0 0 auto; width: 19px; height: 19px; margin-top: 1px; }
.alert p { margin: 0; }
.alert--error { color: #822118; background: var(--danger-soft); }
.alert--success { color: #1d5d3b; background: var(--success-soft); }
.alert--warning { color: #70490d; background: var(--warning-soft); }

/* App shell and library */
.app-page { min-height: 100svh; background: var(--paper); }
.app-header { position: sticky; z-index: 90; top: 0; background: rgba(244, 242, 236, .95); border-bottom: 1px solid var(--line); backdrop-filter: blur(12px); }
.app-nav a[aria-current="page"] { color: var(--ink); font-weight: 650; }
.account-menu { display: flex; justify-content: flex-end; align-items: center; gap: 11px; }
.account-menu__initial { width: 34px; height: 34px; display: grid; place-items: center; color: var(--white); background: var(--ink); border-radius: 50%; font-size: 12px; font-weight: 700; }
.account-menu__name { max-width: 160px; overflow: hidden; font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.library { padding-block: clamp(60px, 7vw, 100px) 120px; }
.library__flash { margin-bottom: 42px; }
.library__header { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 68px; }
.library__header h1, .upload-workspace__header h1 { margin-bottom: 13px; font-size: clamp(50px, 6vw, 82px); font-stretch: 79%; font-weight: 720; line-height: .92; letter-spacing: -.04em; }
.library__header > div > p:last-child, .upload-workspace__header > div > p:last-child { max-width: 55ch; margin: 0; color: var(--graphite); font-size: 15px; line-height: 1.6; }
.library__meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 19px; padding-bottom: 13px; border-bottom: 1px solid var(--ink); color: var(--graphite); font-family: var(--font-mono); font-size: 11px; }
.library__meta p { margin: 0; }
.library__meta span { color: var(--ink); }

.publication-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(28px, 3vw, 48px) clamp(20px, 2vw, 34px); }
.publication-card { min-width: 0; }
.publication-card__cover { position: relative; aspect-ratio: 3 / 4; margin: 0 9px 22px 0; background: var(--white); border-radius: var(--radius-xs); box-shadow: 9px 15px 28px rgba(23, 23, 21, .14), 2px 3px 6px rgba(23, 23, 21, .1); transition: transform var(--duration) var(--ease-out), box-shadow var(--duration) ease; }
.publication-card__cover::after { position: absolute; z-index: -1; top: 5px; right: -8px; bottom: 5px; width: 8px; content: ""; background: repeating-linear-gradient(to bottom, #faf9f6 0 2px, #d9d6cc 2px 3px); border-radius: 0 2px 2px 0; }
.publication-card:hover .publication-card__cover { transform: translateY(-6px) rotate(-.4deg); box-shadow: 13px 23px 40px rgba(23, 23, 21, .17), 2px 4px 8px rgba(23, 23, 21, .1); }
.publication-card__cover img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.publication-card__fallback { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(20px, 2vw, 32px); overflow: hidden; color: var(--paper); background: var(--red); border-radius: inherit; }
.publication-card__fallback::after { position: absolute; right: -27%; bottom: -13%; width: 105%; aspect-ratio: 1; content: ""; background: var(--ink); transform: rotate(-16deg); }
.publication-card__fallback span { position: relative; z-index: 1; font-family: var(--font-mono); font-size: 10px; }
.publication-card__fallback b { position: relative; z-index: 1; max-height: 6.6em; overflow: hidden; font-size: clamp(26px, 2.7vw, 43px); font-stretch: 78%; font-weight: 750; line-height: .93; letter-spacing: -.03em; overflow-wrap: anywhere; }
.publication-card__fallback--1 { color: var(--paper); background: #526555; }
.publication-card__fallback--2 { color: var(--ink); background: var(--sage); }
.publication-card__fallback--2::after { background: var(--red); }
.publication-card__fallback--3 { color: var(--paper); background: #343a50; }
.status-badge { position: absolute; right: 12px; bottom: 12px; min-height: 28px; display: inline-flex; align-items: center; padding-inline: 10px; border-radius: 999px; font-size: 11px; font-weight: 680; }
.status-badge--published { color: #174f32; background: #d9f1e2; }
.status-badge--processing { color: #69460f; background: #f8e6bf; }
.status-badge--processing::before { width: 6px; height: 6px; margin-right: 7px; content: ""; background: currentColor; border-radius: 50%; animation: pulse 1.3s ease-in-out infinite; }
.status-badge--failed { color: #7e211a; background: #f8deda; }
.publication-card__date { margin-bottom: 8px; color: var(--graphite); font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; }
.publication-card__body h2 { min-height: 2.2em; margin-bottom: 20px; font-size: clamp(20px, 1.8vw, 27px); font-stretch: 90%; font-weight: 620; line-height: 1.1; letter-spacing: -.02em; }
.publication-card__actions { display: flex; align-items: center; gap: 6px; }
.publication-card__actions .button { margin-right: auto; }
.publication-card__actions form { margin: 0; }

.library-empty { min-height: 540px; display: grid; grid-template-columns: minmax(270px, 4fr) minmax(340px, 5fr) 2fr; align-items: center; gap: clamp(45px, 7vw, 100px); padding: 60px clamp(30px, 5vw, 78px); background: var(--white); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); }
.blank-publication { position: relative; width: min(100%, 330px); aspect-ratio: 3 / 4; margin-inline: auto; }
.blank-publication > span { position: absolute; inset: 0; background: var(--paper); border: 1px solid var(--line); box-shadow: 8px 14px 22px rgba(23, 23, 21, .1); }
.blank-publication > span:nth-child(1) { transform: translate(-20px, 15px) rotate(-5deg); }
.blank-publication > span:nth-child(2) { transform: translate(15px, 8px) rotate(4deg); }
.blank-publication > span:nth-child(3) { transform: translate(-5px, 2px) rotate(-1deg); }
.blank-publication > div { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 29px; color: var(--paper); background: var(--ink); transform: rotate(1deg); }
.blank-publication i { font-family: var(--font-mono); font-size: 10px; font-style: normal; }
.blank-publication b { font-size: clamp(33px, 3.2vw, 51px); font-stretch: 77%; line-height: .86; letter-spacing: -.03em; }
.library-empty__copy h2 { margin-bottom: 24px; font-size: clamp(40px, 4.2vw, 63px); font-stretch: 81%; font-weight: 680; line-height: .98; letter-spacing: -.035em; }
.library-empty__copy > p:not(.section-kicker) { max-width: 50ch; margin-bottom: 30px; color: var(--graphite); font-size: 15px; line-height: 1.65; }
.library-empty__hint { align-self: end; margin: 0; color: var(--graphite); font-family: var(--font-mono); font-size: 10px; line-height: 1.6; writing-mode: vertical-rl; }
.library-empty__hint span { color: var(--red); }

.confirm-dialog, .share-dialog { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; color: var(--ink); background: rgba(17, 17, 15, .68); border: 0; }
.confirm-dialog[open], .share-dialog[open] { display: grid; place-items: center; }
.confirm-dialog::backdrop, .share-dialog::backdrop { background: rgba(17, 17, 15, .68); backdrop-filter: blur(4px); }
.confirm-dialog__surface, .share-dialog__surface { width: min(520px, calc(100vw - 32px)); display: grid; grid-template-columns: 55px 1fr; gap: 24px; padding: clamp(26px, 4vw, 42px); background: var(--white); border-radius: var(--radius-md); box-shadow: var(--shadow-overlay); animation: dialog-in .28s var(--ease-out) both; }
.confirm-dialog__mark { width: 52px; height: 52px; display: grid; place-items: center; color: var(--danger); background: var(--danger-soft); border-radius: 50%; }
.confirm-dialog__mark svg { width: 23px; height: 23px; }
.confirm-dialog h2, .share-dialog h2 { margin-bottom: 13px; font-size: 31px; font-stretch: 84%; line-height: 1; }
.confirm-dialog p:not(.section-kicker), .share-dialog p:not(.section-kicker) { margin: 0; color: var(--graphite); font-size: 14px; line-height: 1.55; }
.confirm-dialog strong { color: var(--ink); }
.confirm-dialog__actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 10px; padding-top: 7px; }

/* Upload */
.upload-workspace { padding-block: 48px 120px; }
.upload-workspace__header { display: grid; grid-template-columns: 150px 1fr; margin-bottom: 57px; }
.back-link { display: inline-flex; align-items: center; align-self: start; gap: 8px; margin-top: 9px; color: var(--graphite); font-size: 13px; text-decoration: none; }
.back-link:hover { color: var(--ink); text-decoration: underline; }
.back-link svg { width: 17px; height: 17px; }
.upload-layout { display: grid; grid-template-columns: minmax(0, 8fr) minmax(290px, 4fr); gap: clamp(35px, 6vw, 90px); align-items: start; }
.upload-form { padding: clamp(28px, 4vw, 52px); background: var(--white); border-top: 2px solid var(--ink); }
.file-picker { position: relative; min-height: 310px; display: grid; place-items: center; margin-top: 33px; overflow: hidden; background: var(--paper); border: 1px dashed var(--line-strong); border-radius: var(--radius-md); transition: color var(--duration-fast) ease, background-color var(--duration-fast) ease, border-color var(--duration-fast) ease; }
.file-picker:hover, .file-picker--dragging { color: var(--red); background: #fff7f4; border-color: var(--red); }
.file-picker--error { background: #fffafa; border-color: var(--danger); }
.file-picker__input { position: absolute; z-index: 3; inset: 0; width: 100%; height: 100%; padding: 0; opacity: 0; cursor: pointer; }
.file-picker__input:focus-visible + .file-picker__idle { outline: 3px solid var(--red); outline-offset: -6px; }
.file-picker__idle { display: grid; justify-items: center; gap: 22px; padding: 36px; text-align: center; pointer-events: none; }
.file-picker__icon { width: 64px; height: 64px; display: grid; place-items: center; color: var(--red); background: var(--white); border: 1px solid var(--line); border-radius: 50%; }
.file-picker__icon svg { width: 27px; height: 27px; }
.file-picker h2 { margin-bottom: 7px; color: var(--ink); font-size: 25px; font-stretch: 90%; font-weight: 620; }
.file-picker__idle p { margin: 0; color: var(--graphite); font-size: 13px; }
.file-picker__idle p span { color: var(--ink); font-weight: 650; text-decoration: underline; }
.file-picker__limit { font-family: var(--font-mono); font-size: 10px !important; }
.file-picker__selected { position: relative; z-index: 4; width: calc(100% - 48px); display: grid; grid-template-columns: 60px 1fr auto; align-items: center; gap: 18px; padding: 20px; color: var(--ink); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm); pointer-events: auto; }
.file-picker__pdf { width: 54px; height: 62px; display: grid; place-items: center; color: var(--white); background: var(--red); border-radius: 3px; font-family: var(--font-mono); font-size: 10px; }
.file-picker__selected h2 { max-width: 40ch; margin-bottom: 7px; overflow: hidden; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
.file-picker__selected p { margin: 0; color: var(--graphite); font-family: var(--font-mono); font-size: 10px; }
.file-error { margin-top: 10px; }
.upload-form__footer { display: flex; justify-content: space-between; align-items: center; gap: 28px; margin-top: 28px; }
.upload-form__footer p { max-width: 47ch; display: flex; align-items: flex-start; gap: 10px; margin: 0; color: var(--graphite); font-size: 11px; line-height: 1.5; }
.upload-form__footer p svg { flex: 0 0 auto; width: 19px; height: 19px; color: var(--red); }
.upload-aside { position: sticky; top: 110px; padding-top: 19px; border-top: 1px solid var(--ink); }
.upload-aside__label { margin-bottom: 28px; font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; }
.upload-aside ol { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.upload-aside li { display: grid; grid-template-columns: 34px 1fr; gap: 15px; padding-block: 22px; border-bottom: 1px solid var(--line); }
.upload-aside li > span { width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; font-family: var(--font-mono); font-size: 9px; }
.upload-aside strong { display: block; margin-bottom: 6px; font-size: 14px; }
.upload-aside li p { margin: 0; color: var(--graphite); font-size: 12px; line-height: 1.55; }
.upload-aside__note { display: flex; gap: 12px; margin-top: 28px; padding: 16px; color: #70490d; background: var(--warning-soft); border-radius: var(--radius-sm); }
.upload-aside__note svg { flex: 0 0 auto; width: 19px; height: 19px; }
.upload-aside__note p { margin: 0; font-size: 11px; line-height: 1.55; }

.processing-panel { scroll-margin-top: 100px; margin-top: 70px; padding: clamp(30px, 5vw, 62px); color: var(--white); background: var(--ink); border-radius: var(--radius-sm); }
.processing-panel__top { display: flex; justify-content: space-between; gap: 30px; align-items: flex-start; }
.processing-panel__top h2 { margin-bottom: 9px; font-size: clamp(30px, 4vw, 51px); font-stretch: 84%; font-weight: 640; line-height: 1; letter-spacing: -.03em; }
.processing-panel__top > div > p:last-child { margin: 0; color: #b7b5ae; font-size: 13px; }
.processing-panel__percent { font-family: var(--font-mono); font-size: clamp(30px, 4vw, 52px); }
.processing-panel__metrics { display: grid; justify-items: end; gap: 14px; }
.progress-track { height: 5px; margin-block: 35px 45px; overflow: hidden; background: #3b3b36; }
.progress-track i { width: 0; height: 100%; display: block; background: var(--red); transition: width .24s linear; }
.processing-pages { display: grid; grid-template-columns: minmax(180px, 3fr) minmax(310px, 7fr); gap: clamp(35px, 7vw, 100px); align-items: center; }
.processing-page-preview { position: relative; width: min(220px, 100%); aspect-ratio: 3 / 4; display: flex; flex-direction: column; padding: 23px; color: var(--ink); background: var(--paper); box-shadow: 12px 20px 36px rgba(0, 0, 0, .28); }
.processing-page-preview::before, .processing-page-preview::after { position: absolute; inset: 0; content: ""; background: #d7d4ca; transform: translate(10px, 7px); z-index: -1; }
.processing-page-preview::after { background: #aaa79e; transform: translate(18px, 13px); z-index: -2; }
.processing-page-preview span { font-family: var(--font-mono); font-size: 10px; }
.processing-page-preview i { height: 5px; margin-top: 33px; background: var(--line-strong); }
.processing-page-preview i + i { width: 65%; margin-top: 10px; }
.processing-page-preview i + i + i { width: 82%; }
.stage-list { display: grid; margin: 0; padding: 0; list-style: none; }
.stage-list li { display: grid; grid-template-columns: 20px 1fr auto; gap: 15px; align-items: center; min-height: 52px; color: #7e7d77; border-bottom: 1px solid #34342f; transition: color var(--duration) ease; }
.stage-list li > span { width: 10px; height: 10px; justify-self: center; background: #494943; border-radius: 50%; transition: background-color var(--duration) ease, transform var(--duration) var(--ease-out); }
.stage-list p { margin: 0; font-size: 13px; }
.stage-list b { font-family: var(--font-mono); font-size: 10px; font-weight: 400; }
.stage-list li.is-active { color: var(--white); }
.stage-list li.is-active > span { background: var(--red); transform: scale(1.35); }
.stage-list li.is-complete { color: #b7b5ae; }
.stage-list li.is-complete > span { background: var(--success); }
.processing-error, .processing-success { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 17px; margin-top: 38px; padding: 17px; border-radius: var(--radius-sm); }
.processing-error { color: #ffd9d5; background: #48201d; }
.processing-success { color: #d9f4e4; background: #173e2a; }
.processing-error > svg, .processing-success > span { width: 38px; height: 38px; display: grid; place-items: center; }
.processing-error > svg { width: 22px; height: 22px; }
.processing-success > span { background: var(--success); border-radius: 50%; }
.processing-success > span svg { width: 20px; height: 20px; }
.processing-error strong, .processing-success strong { display: block; margin-bottom: 4px; font-size: 13px; }
.processing-error p, .processing-success p { margin: 0; color: inherit; font-size: 11px; line-height: 1.5; }

/* Public viewer */
.viewer-document,
.viewer-document body { width: 100%; height: 100%; min-height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; scrollbar-width: none; -ms-overflow-style: none; }
.viewer-document::-webkit-scrollbar,
.viewer-document body::-webkit-scrollbar,
.viewer-page .reader-stage::-webkit-scrollbar { width: 0; height: 0; display: none; }
.viewer-page { width: 100%; height: 100%; min-height: 0; overflow: hidden; overscroll-behavior: none; color: #efeee9; background: var(--reader); scrollbar-width: none; -ms-overflow-style: none; }
.viewer-page .skip-link { color: var(--ink); background: var(--white); }
.reader { --reader-header-height: 70px; --reader-toolbar-height: 70px; width: 100%; height: 100vh; height: 100dvh; max-height: 100%; min-height: 0; display: grid; grid-template-rows: var(--reader-header-height) minmax(0, 1fr) var(--reader-toolbar-height); overflow: hidden; overscroll-behavior: none; background: var(--reader); }
.reader-header { position: relative; z-index: 20; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; padding-inline: clamp(18px, 3vw, 46px); border-bottom: 1px solid #30302b; }
.reader-header__title { min-width: 0; text-align: center; }
.reader-header__title span { display: block; margin-bottom: 4px; color: #8d8c85; font-family: var(--font-mono); font-size: 8px; letter-spacing: .04em; }
.reader-header h1 { max-width: 50vw; margin: 0; overflow: hidden; color: #e5e4de; font-size: 15px; font-stretch: 95%; font-weight: 560; text-overflow: ellipsis; white-space: nowrap; }
.reader-header .button { justify-self: end; }
.reader-stage { position: relative; min-width: 0; min-height: 0; display: grid; place-items: center; overflow: hidden; overflow: clip; overscroll-behavior: none; contain: layout paint size; background: radial-gradient(ellipse at center, #25251f 0, #181816 54%, #11110f 100%); scrollbar-width: none; -ms-overflow-style: none; }
.reader--zoomed .reader-stage { overflow: auto; }
.reader-stage__ambient { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.reader-stage__ambient span:first-child { position: absolute; right: 17%; bottom: 3%; left: 17%; height: 9%; background: rgba(0, 0, 0, .45); filter: blur(30px); }
.reader-stage__ambient span:last-child { position: absolute; top: 0; right: 0; left: 0; height: 1px; background: rgba(255, 255, 255, .04); }
.reader-book-wrap { --reader-zoom: 1; position: relative; z-index: 2; width: min(78vw, calc((100dvh - 176px) * 1.5), 1340px); max-width: 100%; height: min(calc(100dvh - 176px), 894px); max-height: 100%; min-width: 0; min-height: 0; display: grid; place-items: center; contain: layout size; transform: scale(var(--reader-zoom)); transform-origin: center; transition: transform var(--duration) var(--ease-out); }
.reader-book { width: 100%; height: 100%; }
.viewer-page .reader-book.stf__parent { min-width: 0 !important; min-height: 0 !important; max-width: none !important; touch-action: none; overscroll-behavior: none; }
.viewer-page .stf__block { touch-action: none; }
.reader-page { width: 100%; height: 100%; overflow: hidden; background: var(--white); }
.reader-page img { width: 100%; height: 100%; object-fit: contain; background: var(--white); user-select: none; }
.reader-page[data-density="hard"] { background: var(--white); }
.reader--fallback .reader-book { display: grid; place-items: center; }
.reader--fallback .reader-page { display: none; width: min(63vh, 90vw); height: auto; aspect-ratio: 3 / 4; box-shadow: var(--shadow-publication); }
.reader--fallback .reader-page--fallback-active { display: block; }
.reader-hint { position: absolute; z-index: 10; bottom: 18px; left: 50%; display: flex; align-items: center; gap: 10px; padding: 8px 12px; color: #bbb9b1; background: rgba(17, 17, 15, .84); border: 1px solid #3c3c36; border-radius: 999px; transform: translateX(-50%); transition: opacity var(--duration) ease, transform var(--duration) var(--ease-out); pointer-events: none; }
.reader-hint span { width: 18px; height: 18px; border: 1px solid #85847d; border-radius: 50%; }
.reader-hint p { margin: 0; font-size: 10px; }
.reader-hint--hidden { opacity: 0; transform: translate(-50%, 8px); }
.reader-toolbar { position: relative; z-index: 20; display: flex; align-items: center; justify-content: center; gap: 15px; padding: 8px 20px calc(8px + env(safe-area-inset-bottom)); background: #161614; border-top: 1px solid #30302b; }
.reader-toolbar__group { display: flex; align-items: center; gap: 3px; }
.reader-toolbar__divider { width: 1px; height: 25px; background: #373732; }
.reader-control { width: 44px; height: 44px; color: #c9c8c1; }
.reader-control:hover:not(:disabled) { color: var(--white); background: #292925; }
.reader-control:disabled { color: #5e5e58; cursor: not-allowed; }
.reader-control[aria-pressed="true"] { color: #ff8a76; background: #35211e; }
.page-jump { min-width: 88px; height: 44px; display: flex; align-items: center; justify-content: center; gap: 7px; color: #84837c; font-family: var(--font-mono); font-size: 11px; }
.page-jump input { width: 31px; padding: 4px 2px; color: var(--white); background: transparent; border: 0; border-bottom: 1px solid #575751; border-radius: 0; font-family: inherit; font-size: 11px; text-align: center; appearance: textfield; }
.page-jump input::-webkit-inner-spin-button { display: none; }
.page-jump input:focus { outline: 2px solid var(--red); outline-offset: 2px; }
.page-jump b { color: #b6b5ae; font-weight: 400; }
.reader-zoom { min-width: 44px; color: #8f8e87; font-family: var(--font-mono); font-size: 9px; text-align: center; }
.reader--fullscreen { --reader-header-height: 58px; --reader-toolbar-height: 64px; }

.share-dialog { color: var(--ink); }
.share-dialog__surface { position: relative; display: block; padding: 38px; }
.share-dialog__close { position: absolute; top: 17px; right: 17px; }
.share-dialog h2 { max-width: 85%; }
.share-link { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-block: 25px 12px; }
.share-link input { min-width: 0; height: 44px; padding: 0 13px; color: var(--graphite); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: 10px; }

.viewer-not-found { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 24px; text-align: center; }
.viewer-not-found .brand { position: absolute; top: 32px; left: 32px; }
.viewer-not-found__page { position: relative; width: 130px; height: 178px; display: flex; flex-direction: column; justify-content: space-between; margin-bottom: 38px; padding: 20px; color: var(--ink); background: var(--paper); box-shadow: 9px 16px 27px rgba(0, 0, 0, .3); transform: rotate(-4deg); }
.viewer-not-found__page::after { position: absolute; inset: 0; content: ""; border: 1px solid var(--paper); transform: translate(10px, 8px) rotate(6deg); }
.viewer-not-found__page span { font-family: var(--font-mono); font-size: 13px; }
.viewer-not-found__page i { height: 55%; background: var(--red); }
.viewer-not-found h1 { margin-bottom: 15px; font-size: clamp(41px, 5vw, 68px); font-stretch: 80%; line-height: .95; letter-spacing: -.035em; }
.viewer-not-found > p:not(.section-kicker) { max-width: 48ch; margin-bottom: 28px; color: #aeada6; font-size: 14px; line-height: 1.6; }

/* Toasts */
.toast-region { position: fixed; z-index: 1000; right: 22px; bottom: 22px; width: min(390px, calc(100vw - 32px)); display: grid; gap: 10px; pointer-events: none; }
.toast-region--viewer { bottom: 86px; }
.toast { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; min-height: 64px; padding: 12px; color: var(--ink); background: var(--white); border-radius: var(--radius-sm); box-shadow: var(--shadow-overlay); opacity: 0; transform: translateY(12px); transition: opacity var(--duration) ease, transform var(--duration) var(--ease-out); pointer-events: auto; }
.toast--visible { opacity: 1; transform: translateY(0); }
.toast--leaving { opacity: 0; transform: translateY(7px); }
.toast__mark { width: 36px; height: 36px; display: grid; place-items: center; color: var(--white); background: var(--success); border-radius: 50%; }
.toast--error .toast__mark { background: var(--danger); }
.toast__mark svg { width: 18px; height: 18px; }
.toast p { margin: 0; font-size: 13px; font-weight: 580; line-height: 1.4; }
.toast button { width: 38px; height: 38px; display: grid; place-items: center; padding: 0; color: var(--graphite); background: transparent; border-radius: 6px; cursor: pointer; }
.toast button:hover { color: var(--ink); background: var(--paper); }
.toast button svg { width: 17px; height: 17px; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%, 100% { opacity: .45; transform: scale(.85); } 50% { opacity: 1; transform: scale(1); } }
@keyframes dialog-in { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes hero-page-settle { from { opacity: 0; transform: rotateY(-82deg) rotateZ(7deg); } to { opacity: 1; transform: rotateY(-56deg) rotateZ(4deg); } }

/* Laptop */
@media (max-width: 1280px) {
  :root { --shell: min(1180px, calc(100vw - 48px)); }
  .hero { grid-template-columns: minmax(360px, 5fr) minmax(480px, 7fr); column-gap: 38px; }
  .hero h1 { font-size: clamp(53px, 6vw, 76px); }
  .publication-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .auth-layout { grid-template-columns: 1fr 1fr; }
  .auth-stack { width: 45%; opacity: .92; }
}

/* Tablet landscape */
@media (max-width: 1024px) {
  :root { --shell: min(944px, calc(100vw - 40px)); }
  .site-header__inner, .app-header__inner { grid-template-columns: auto 1fr auto; }
  .hero { min-height: auto; grid-template-columns: minmax(350px, 1fr) minmax(420px, 1.12fr); padding-block: 78px 26px; }
  .hero h1 { font-size: clamp(52px, 6.3vw, 65px); }
  .hero-publication { transform: rotate(-1.5deg) translateX(5%); }
  .demo-stage { min-height: 680px; }
  .workflow { gap: 5%; }
  .uses__rail { grid-template-columns: repeat(2, 1fr); align-items: stretch; }
  .use-publication, .use-publication--red, .use-publication--ink, .use-publication--paper, .use-publication--sage { min-height: 360px; }
  .final-cta { grid-template-columns: 130px 1fr; }
  .final-cta .button { grid-column: 2; justify-self: start; }
  .site-footer__inner { grid-template-columns: 1fr 2fr auto; padding-block: 35px; }
  .site-footer__legal { grid-column: 3; }
  .site-footer nav { grid-column: 1 / -1; }
  .auth-visual { padding: 42px; }
  .auth-visual h1 { font-size: 58px; }
  .auth-stack, .auth-spread { opacity: .72; }
  .auth-panel { padding: 35px; }
  .form-grid-2 { grid-template-columns: 1fr; }
  .publication-grid { grid-template-columns: repeat(3, 1fr); }
  .library-empty { grid-template-columns: 4fr 5fr; }
  .library-empty__hint { display: none; }
  .upload-workspace__header { grid-template-columns: 125px 1fr; }
  .upload-layout { grid-template-columns: minmax(0, 2fr) minmax(250px, 1fr); gap: 32px; }
  .upload-form { padding: 32px; }
  .reader-book-wrap { width: min(92vw, calc((100dvh - 176px) * 1.5)); }
}

/* Tablet and mobile navigation */
@media (max-width: 860px) {
  :root { --shell: calc(100vw - 36px); }
  .site-header__inner { grid-template-columns: 1fr auto; }
  .nav-toggle { display: inline-grid; }
  .site-nav, .site-header__actions { position: fixed; z-index: 99; right: 0; left: 0; display: none; background: var(--paper); }
  .site-nav { top: 72px; flex-direction: column; align-items: stretch; gap: 0; padding: 24px 18px 8px; border-top: 1px solid var(--line); }
  .site-nav a { padding: 17px 0; border-bottom: 1px solid var(--line); font-size: 16px; }
  .site-nav a::after { display: none; }
  .site-header__actions { top: 271px; padding: 13px 18px 24px; box-shadow: 0 18px 28px rgba(23, 23, 21, .12); }
  .site-header__actions .text-link, .site-header__actions .button { flex: 1; }
  .nav-open { overflow: hidden; }
  .nav-open .site-nav, .nav-open .site-header__actions { display: flex; }
  .hero { grid-template-columns: 1fr; grid-template-rows: auto auto auto; gap: 52px; overflow: visible; }
  .hero__copy { max-width: 710px; padding: 0; }
  .hero h1 { font-size: clamp(60px, 11vw, 84px); }
  .hero-publication { width: min(90%, 720px); justify-self: center; }
  .hero__instruction { margin-top: 10px; }
  .demo-section__heading { grid-template-columns: 1fr; gap: 24px; }
  .demo-stage { min-height: 650px; }
  .workflow { grid-template-columns: 1fr; gap: 56px; }
  .workflow__intro { position: static; }
  .workflow__intro > p:last-child { max-width: 60ch; }
  .before-start { grid-template-columns: 1fr; gap: 46px; }
  .uses__heading { grid-template-columns: 1fr; gap: 12px; }
  .final-cta { min-height: 500px; grid-template-columns: 110px 1fr; }
  .auth-layout { grid-template-columns: 1fr; }
  .auth-visual { min-height: 520px; }
  .auth-visual__content { margin-top: 70px; }
  .auth-visual h1 { max-width: 620px; }
  .auth-stack, .auth-spread { right: 2%; bottom: -15%; width: 39%; height: 63%; }
  .auth-panel { min-height: auto; }
  .auth-panel__mobile-brand { display: inline-flex; }
  .auth-panel__top { justify-content: space-between; align-items: center; }
  .form-grid-2 { grid-template-columns: 1fr 1fr; }
  .app-header__inner { grid-template-columns: auto 1fr auto; }
  .account-menu__name { display: none; }
  .library__header { align-items: flex-start; }
  .publication-grid { grid-template-columns: repeat(2, 1fr); }
  .library-empty { min-height: auto; grid-template-columns: minmax(220px, 1fr) 1.25fr; padding-block: 55px; }
  .upload-workspace__header { grid-template-columns: 1fr; gap: 31px; }
  .upload-layout { grid-template-columns: 1fr; }
  .upload-aside { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
  .upload-aside ol { grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
  .upload-aside li { grid-template-columns: 30px 1fr; border-right: 1px solid var(--line); padding-right: 18px; }
  .upload-aside li:last-child { border-right: 0; }
  .upload-aside__note { margin: 0; grid-column: 1 / -1; }
}

/* Tablet portrait */
@media (max-width: 768px) {
  :root { --shell: calc(100vw - 32px); }
  .site-header__inner, .app-header__inner { min-height: 66px; }
  .site-nav { top: 66px; }
  .site-header__actions { top: 265px; }
  .hero { padding-top: 61px; }
  .hero h1 { font-size: clamp(54px, 12vw, 75px); }
  .hero-publication { width: 96%; }
  .demo-stage { min-height: 590px; }
  .demo-book { width: 88vw; height: 62vw; }
  .demo-page h3 { font-size: clamp(26px, 5.5vw, 47px); }
  .workflow__steps li { grid-template-columns: 50px 54px 1fr; }
  .uses__rail { gap: 18px; }
  .use-publication, .use-publication--red, .use-publication--ink, .use-publication--paper, .use-publication--sage { min-height: 320px; }
  .final-cta { grid-template-columns: 80px 1fr; gap: 28px; }
  .final-cta__mark { width: 72px; height: 100px; }
  .site-footer__inner { min-height: 230px; grid-template-columns: 1fr auto; }
  .site-footer__inner > p:nth-of-type(1) { grid-column: 1 / -1; }
  .site-footer__legal { grid-column: 2; grid-row: 1; }
  .auth-visual { min-height: 480px; padding: 32px; }
  .auth-visual__content { margin-top: 65px; }
  .auth-visual h1 { font-size: 52px; }
  .auth-visual__content > p:last-child { max-width: 36ch; }
  .auth-stack, .auth-spread { width: 42%; opacity: .6; }
  .auth-panel { padding: 28px; }
  .auth-form-wrap { padding-block: 58px; }
  .library { padding-top: 55px; }
  .library__header { margin-bottom: 50px; }
  .library-empty { grid-template-columns: 1fr; text-align: center; }
  .blank-publication { width: 220px; }
  .library-empty__copy > p:not(.section-kicker) { margin-inline: auto; }
  .upload-workspace { padding-top: 34px; }
  .upload-aside { display: block; }
  .upload-aside ol { display: grid; grid-template-columns: 1fr; }
  .upload-aside li { border-right: 0; }
  .upload-aside__note { margin-top: 24px; }
  .processing-pages { grid-template-columns: 1fr; }
  .processing-page-preview { display: none; }
  .reader { --reader-header-height: 62px; --reader-toolbar-height: 68px; }
  .reader-header { grid-template-columns: auto 1fr auto; padding-inline: 13px; }
  .reader-header__title { text-align: left; }
  .reader-header h1 { max-width: 38vw; }
  .reader-header .button span { display: none; }
  .reader-header .button { width: 42px; padding: 0; }
  .reader-book-wrap { width: min(95vw, calc((100dvh - 158px) * .75)); height: min(calc(100dvh - 158px), 1060px); }
  .reader-toolbar { gap: 7px; padding-inline: 9px; }
  .reader-control { width: 44px; }
  .reader-zoom { display: none; }
  .reader-toolbar__divider { margin-inline: 2px; }
}

/* Mobile */
@media (max-width: 600px) {
  :root { --shell: calc(100vw - 28px); }
  .button { min-height: 48px; }
  .hero { gap: 35px; padding-top: 45px; }
  .hero__kicker { margin-bottom: 20px; }
  .hero h1 { margin-bottom: 24px; font-size: clamp(48px, 14.2vw, 69px); line-height: .92; }
  .hero__lead { font-size: 16px; }
  .hero__actions { align-items: stretch; flex-direction: column; gap: 7px; }
  .hero__actions .button { width: 100%; }
  .hero-publication { width: 106%; margin-left: -3%; }
  .hero-publication__turn { top: 1%; right: 3%; width: 35%; height: 86%; opacity: .92; transform: rotateY(-61deg) rotateZ(4deg); }
  .hero-publication__turn span { font-size: 8px; }
  .hero-publication__page { padding: 20px; }
  .hero-publication__page--left strong { font-size: clamp(35px, 10vw, 53px); }
  .hero-publication__page--right p { font-size: 11px; }
  .hero__instruction { padding-bottom: 5px; }
  .demo-section { padding-block: 86px; }
  .demo-section h2, .workflow h2, .uses h2, .final-cta h2 { font-size: clamp(39px, 12vw, 57px); }
  .demo-section__heading { margin-bottom: 40px; }
  .demo-stage { width: 100%; min-height: 610px; padding-inline: 6px; }
  .demo-book { width: 94vw; height: 126vw; max-height: 560px; }
  .demo-page { padding: 24px; }
  .demo-page h3 { font-size: clamp(35px, 11vw, 51px); }
  .demo-page--essay h3, .demo-page--dark h3 { margin-top: 65%; }
  .demo-controls__open { min-width: 86px; justify-content: center; padding-inline: 9px; font-size: 10px; }
  .workflow { padding-block: 92px; }
  .before-start { padding-bottom: 92px; }
  .before-start dl > div { grid-template-columns: 1fr; gap: 7px; align-content: center; padding-block: 15px; }
  .workflow__steps li { grid-template-columns: 40px 1fr; grid-template-rows: auto auto auto; gap: 9px 12px; }
  .workflow__number { grid-row: 1; }
  .workflow__steps svg, .workflow__progress { grid-column: 2; grid-row: 1; width: 28px; height: 28px; }
  .workflow__steps h3 { grid-column: 2; font-size: 26px; }
  .workflow__steps p { grid-column: 2; }
  .uses { padding-block: 85px; }
  .uses__heading { margin-bottom: 45px; }
  .uses__rail { display: flex; gap: 17px; padding: 12px 14px 30px; margin-inline: -14px; overflow-x: auto; scroll-snap-type: x mandatory; }
  .use-publication, .use-publication--red, .use-publication--ink, .use-publication--paper, .use-publication--sage { min-width: 72vw; min-height: 390px; scroll-snap-align: start; }
  .uses__aside { margin-top: 28px; text-align: left; }
  .final-cta { min-height: 540px; grid-template-columns: 1fr; gap: 30px; }
  .final-cta__mark { width: 66px; height: 86px; }
  .final-cta .button { grid-column: 1; width: 100%; }
  .site-footer__inner { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 25px; padding-block: 50px; }
  .site-footer__legal { align-self: flex-start; }
  .auth-visual { min-height: 410px; padding: 24px; }
  .auth-visual::after { right: 9%; }
  .auth-visual__content { margin-top: 54px; }
  .auth-visual h1 { font-size: 45px; }
  .auth-visual__content > p:last-child { max-width: 31ch; font-size: 14px; }
  .auth-stack, .auth-spread { display: none; }
  .auth-visual__caption { display: none; }
  .auth-panel { padding: 22px 18px; }
  .auth-panel__top .text-link { font-size: 12px; }
  .auth-form-wrap { padding-block: 50px 32px; }
  .auth-form__heading h2 { font-size: 42px; }
  .form-grid-2 { grid-template-columns: 1fr; }
  .app-header__inner { grid-template-columns: auto 1fr auto; min-height: 64px; }
  .app-nav { justify-self: center; }
  .app-nav a { display: none; }
  .app-nav a[aria-current="page"] { display: block; font-size: 12px; }
  .account-menu__initial { display: none; }
  .library { padding-block: 43px 80px; }
  .library__header { align-items: stretch; flex-direction: column; gap: 27px; margin-bottom: 45px; }
  .library__header h1, .upload-workspace__header h1 { font-size: 54px; }
  .library__header .button { width: 100%; }
  .publication-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 31px 16px; }
  .publication-card__cover { margin-bottom: 17px; }
  .publication-card__fallback { padding: 15px; }
  .publication-card__fallback b { font-size: 25px; }
  .publication-card__body h2 { min-height: auto; margin-bottom: 14px; font-size: 18px; }
  .publication-card__actions { flex-wrap: wrap; }
  .publication-card__actions .button { width: 100%; margin: 0 0 3px; }
  .publication-card__actions .icon-button { width: 40px; height: 40px; }
  .status-badge { right: 7px; bottom: 7px; min-height: 25px; padding-inline: 8px; font-size: 9px; }
  .library-empty { padding: 46px 22px; }
  .blank-publication { width: 170px; }
  .library-empty__copy h2 { font-size: 40px; }
  .upload-workspace { padding-bottom: 80px; }
  .upload-workspace__header { margin-bottom: 38px; }
  .upload-form { padding: 25px 18px; }
  .file-picker { min-height: 270px; }
  .file-picker__selected { width: calc(100% - 24px); grid-template-columns: 48px 1fr auto; gap: 12px; padding: 12px; }
  .file-picker__pdf { width: 44px; height: 52px; }
  .upload-form__footer { align-items: stretch; flex-direction: column; }
  .upload-form__footer .button { width: 100%; }
  .processing-panel { margin-top: 44px; padding: 25px 18px; }
  .processing-panel__top { display: block; }
  .processing-panel__percent { display: block; margin-top: 22px; }
  .progress-track { margin-block: 20px 30px; }
  .processing-error, .processing-success { grid-template-columns: auto 1fr; }
  .processing-error .button, .processing-success .button { grid-column: 1 / -1; width: 100%; }
  .confirm-dialog__surface { grid-template-columns: 1fr; gap: 16px; }
  .confirm-dialog__actions { flex-direction: column-reverse; }
  .confirm-dialog__actions .button { width: 100%; }
  .share-dialog__surface { padding: 30px 20px 22px; }
  .share-link { grid-template-columns: 1fr; }
  .share-link .button { width: 100%; }
  .reader-header .brand { font-size: 20px; }
  .reader-header h1 { max-width: 40vw; font-size: 12px; }
  .reader-header__title span { font-size: 7px; }
  .reader-book-wrap { width: min(96vw, calc((100dvh - 151px) * .75)); height: min(calc(100dvh - 151px), 900px); }
  .reader-hint { display: none; }
  .reader-toolbar { justify-content: space-between; gap: 2px; padding-inline: 5px; }
  .reader-toolbar__group { gap: 0; }
  .reader-control { width: 44px; }
  .reader-toolbar__divider { display: none; }
  .page-jump { min-width: 74px; gap: 4px; }
  .page-jump input { width: 27px; }
  .toast-region { right: 14px; bottom: 14px; width: calc(100vw - 28px); }
  .toast-region--viewer { bottom: 78px; }
}

@media (max-width: 430px) {
  .site-header__actions { flex-direction: column; align-items: stretch; }
  .site-header__actions .text-link { justify-content: center; min-height: 44px; }
  .hero h1 { font-size: clamp(47px, 14.5vw, 62px); }
  .hero-publication { width: 111%; margin-left: -5%; }
  .demo-book { max-height: 525px; }
  .publication-grid { grid-template-columns: 1fr 1fr; gap-inline: 13px; }
  .publication-card__fallback b { font-size: 22px; }
  .reader-control--fullscreen { display: none; }
  .reader-toolbar { justify-content: center; }
}

@media (max-width: 390px) {
  :root { --shell: calc(100vw - 24px); }
  .brand { font-size: 23px; }
  .hero { padding-top: 36px; }
  .hero h1 { font-size: clamp(44px, 14vw, 55px); }
  .hero-publication__page--left strong { font-size: 34px; }
  .demo-book { height: 132vw; max-height: 510px; }
  .demo-controls { gap: 4px; }
  .workflow__steps li { grid-template-columns: 33px 1fr; }
  .auth-visual { min-height: 390px; }
  .auth-visual h1 { font-size: 40px; }
  .library__header h1, .upload-workspace__header h1 { font-size: 49px; }
  .publication-card__date { font-size: 8px; }
  .publication-card__body h2 { font-size: 16px; }
  .page-jump { min-width: 68px; }
  .reader-control { width: 44px; height: 44px; }
}

@media (max-width: 360px) {
  .hero h1 { font-size: 45px; }
  .hero__note { font-size: 11px; }
  .demo-stage { min-height: 545px; }
  .demo-book { max-height: 475px; }
  .demo-page { padding: 20px; }
  .demo-page h3 { font-size: 37px; }
  .use-publication, .use-publication--red, .use-publication--ink, .use-publication--paper, .use-publication--sage { min-width: 78vw; }
  .auth-panel__top .text-link { font-size: 0; }
  .auth-panel__top .text-link svg { width: 20px; height: 20px; }
  .publication-grid { grid-template-columns: 1fr; }
  .publication-card { max-width: 260px; margin-inline: auto; }
  .publication-card__fallback b { font-size: 32px; }
  .processing-panel__top h2 { font-size: 28px; }
  .reader-header__title { display: none; }
  .reader-header { grid-template-columns: 1fr auto; }
  .reader-toolbar__group:not(.reader-toolbar__group--pages) .reader-control { width: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-publication__turn { animation: none; }
  .status-badge--processing::before, .button__loader { animation: none; }
  .status-badge--processing::before { opacity: 1; transform: none; }
  .button__loader { border-right-color: currentColor; }
  .toast, .reader-book-wrap, .progress-track i, .hero-publication__page, .publication-card__cover, .use-publication { transition: none; }
}

@media (prefers-contrast: more) {
  :root { --line: #8a8982; --line-strong: #595852; }
  .button--secondary, .field input, .file-picker { border-width: 2px; }
}