:root {
  color-scheme: light;
  --forest: #153d30;
  --forest-2: #245c47;
  --cream: #f7efd9;
  --paper: #fffdf7;
  --red: #a73a2c;
  --gold: #e1b65c;
  --ink: #20372d;
  --muted: #6e7d75;
  --turn: 720ms;
  --spread-ratio: 1.414;
}

* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; }
body { color: var(--ink); background: var(--cream); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input { font: inherit; }
button { color: inherit; }
button:focus-visible, label:has(input:focus-visible) { outline: 3px solid var(--gold); outline-offset: 3px; }
[hidden] { display: none !important; }

.setup-view {
  min-height: 100dvh;
  background:
    radial-gradient(circle at 10% 36%, rgba(225, 182, 92, .22), transparent 26%),
    radial-gradient(circle at 90% 72%, rgba(72, 126, 93, .16), transparent 25%),
    linear-gradient(135deg, #fbf6e8, #efe3c2);
}

.setup-view::before {
  position: fixed; inset: 0; pointer-events: none; content: ""; opacity: .25;
  background-image: repeating-linear-gradient(0deg, rgba(68, 46, 20, .07) 0 1px, transparent 1px 7px);
  mix-blend-mode: multiply;
}

.setup-header, .reader-header {
  position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between;
  min-height: 72px; padding: 12px clamp(18px, 4vw, 60px); border-bottom: 1px solid rgba(21, 61, 48, .13);
}

.logo { display: flex; align-items: center; gap: 11px; color: var(--forest); font-family: Georgia, serif; font-size: 22px; font-weight: 700; text-decoration: none; }
.logo-mark { position: relative; display: flex; width: 38px; height: 29px; perspective: 100px; }
.logo-mark i { width: 19px; height: 27px; background: var(--forest); border: 2px solid var(--forest); }
.logo-mark i:first-child { border-radius: 5px 0 0 5px; transform: skewY(7deg); transform-origin: right bottom; }
.logo-mark i:last-child { background: var(--red); border-color: var(--red); border-radius: 0 5px 5px 0; transform: skewY(-7deg); transform-origin: left bottom; }
.privacy-note { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
.privacy-note b { width: 8px; height: 8px; background: #4b936a; border: 2px solid rgba(75,147,106,.24); border-radius: 50%; box-shadow: 0 0 0 3px rgba(75,147,106,.15); }

.setup-main { position: relative; z-index: 1; width: min(980px, calc(100% - 36px)); margin: 0 auto; padding: clamp(48px, 8vh, 90px) 0 44px; }
.intro { max-width: 700px; margin: 0 auto clamp(34px, 5vh, 54px); text-align: center; }
.eyebrow { margin: 0 0 12px; color: var(--red); font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.intro h1 { margin: 0; color: var(--forest); font-family: Georgia, "Times New Roman", serif; font-size: clamp(38px, 6vw, 68px); font-weight: 500; line-height: 1.02; letter-spacing: -.035em; }
.lead { max-width: 590px; margin: 20px auto 0; color: #68766f; font-size: clamp(15px, 1.7vw, 18px); line-height: 1.65; }

.file-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.file-card { position: relative; display: grid; justify-items: center; min-height: 275px; padding: 27px 30px 25px; cursor: pointer; text-align: center; background: rgba(255,253,247,.78); border: 1px dashed rgba(21,61,48,.34); border-radius: 18px; box-shadow: 0 14px 35px rgba(63,45,17,.07); transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease; }
.file-card:hover, .file-card.is-dragging { transform: translateY(-3px); background: #fffdf7; border-color: var(--forest-2); box-shadow: 0 18px 38px rgba(63,45,17,.11); }
.file-card.has-file { border-style: solid; border-color: #4b936a; background: rgba(244,252,244,.92); }
.file-card input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.file-number { position: absolute; top: 18px; left: 20px; color: #9da9a2; font: 700 10px ui-monospace, monospace; letter-spacing: .12em; }
.file-icon { display: grid; place-items: center; width: 58px; height: 58px; margin: 9px 0 13px; color: white; background: var(--red); border-radius: 50%; font-size: 29px; box-shadow: 0 8px 18px rgba(167,58,44,.23); }
.file-icon--book { background: var(--forest-2); box-shadow: 0 8px 18px rgba(36,92,71,.23); }
.file-card strong { color: var(--forest); font-family: Georgia, serif; font-size: 23px; }
.file-help { max-width: 290px; min-height: 42px; margin: 7px 0 16px; color: #7a8780; font-size: 13px; line-height: 1.5; }
.file-action { padding: 8px 14px; color: var(--forest); background: #f0e7cc; border-radius: 999px; font-size: 12px; font-weight: 750; }
.file-name { display: none; max-width: 100%; margin-top: 10px; overflow: hidden; color: #34704f; font-size: 12px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.has-file .file-name { display: block; }
.has-file .file-action { color: #fff; background: #4b936a; }

.create-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 22px; }
.create-row p { margin: 0; color: #74827a; font-size: 12px; }
.create-row p span { color: var(--red); }
.create-button { display: flex; align-items: center; gap: 18px; min-height: 54px; padding: 0 8px 0 23px; cursor: pointer; color: white; background: var(--forest); border: 0; border-radius: 999px; font-weight: 750; box-shadow: 0 10px 24px rgba(21,61,48,.22); transition: transform 180ms ease, opacity 180ms ease; }
.create-button b { display: grid; place-items: center; width: 39px; height: 39px; color: var(--forest); background: var(--gold); border-radius: 50%; font-size: 20px; }
.create-button:not(:disabled):hover { transform: translateY(-2px); }
.create-button:disabled { cursor: default; opacity: .35; box-shadow: none; }
.setup-footer { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 16px; padding: 18px; color: #839088; border-top: 1px solid rgba(21,61,48,.1); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.setup-footer i { width: 3px; height: 3px; background: var(--gold); border-radius: 50%; }

.processing { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 20px; background: rgba(17,43,34,.7); backdrop-filter: blur(12px); }
.processing-card { width: min(460px, 100%); padding: 40px; text-align: center; background: #fffaf0; border: 1px solid rgba(255,255,255,.5); border-radius: 22px; box-shadow: 0 28px 80px rgba(0,0,0,.25); }
.processing-card h2 { margin: 0; color: var(--forest); font: 500 30px Georgia, serif; }
.processing-card > p:not(.eyebrow) { min-height: 20px; margin: 11px 0 24px; color: var(--muted); font-size: 13px; }
.processing-book { position: relative; display: flex; justify-content: center; width: 88px; height: 54px; margin: 0 auto 25px; perspective: 160px; }
.processing-book i { position: absolute; bottom: 0; width: 42px; height: 50px; background: var(--forest); border-radius: 5px 1px 1px 5px; transform-origin: right center; animation: flutter 1.2s ease-in-out infinite; }
.processing-book i:nth-child(2) { background: var(--red); animation-delay: .18s; }
.processing-book i:nth-child(3) { background: var(--gold); animation-delay: .36s; }
@keyframes flutter { 0%,100% { transform: translateX(-21px) rotateY(0); } 50% { transform: translateX(-21px) rotateY(-155deg); } }
.processing-track { height: 8px; overflow: hidden; background: #e6ddc5; border-radius: 999px; }
.processing-track div { width: 0; height: 100%; background: linear-gradient(90deg, var(--forest-2), var(--gold)); border-radius: inherit; transition: width 250ms ease; }
.processing-card > strong { display: block; margin-top: 9px; color: var(--forest); font-size: 12px; }

.error-toast { position: fixed; right: 20px; bottom: 20px; z-index: 1100; display: grid; max-width: 390px; gap: 7px; padding: 18px; color: white; background: #822d24; border-radius: 13px; box-shadow: 0 16px 40px rgba(0,0,0,.25); }
.error-toast span { color: rgba(255,255,255,.8); font-size: 13px; line-height: 1.45; }
.error-toast button { justify-self: start; padding: 6px 11px; cursor: pointer; color: #822d24; background: white; border: 0; border-radius: 7px; font-size: 12px; font-weight: 700; }

.reader-view { display: grid; grid-template-rows: auto minmax(0,1fr) auto; height: 100dvh; overflow: hidden; background: radial-gradient(circle at 50% 40%, #fbf3dc, #e6d4a9); }
.reader-header { min-height: 68px; color: #fffaf0; background: linear-gradient(100deg, #123528, var(--forest) 65%, #245541); border-color: rgba(255,255,255,.14); box-shadow: 0 8px 24px rgba(38,31,14,.18); }
.text-button { padding: 8px 11px; cursor: pointer; color: rgba(255,255,255,.8); background: transparent; border: 0; border-radius: 8px; font-size: 12px; }
.text-button:hover { background: rgba(255,255,255,.1); }
.reader-title { position: absolute; left: 50%; display: grid; max-width: 45vw; text-align: center; transform: translateX(-50%); }
.reader-title strong, .reader-title span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reader-title strong { font-family: Georgia, serif; font-size: 18px; }
.reader-title span { color: rgba(255,255,255,.57); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.reader-actions { display: flex; gap: 8px; }
.round-button { display: grid; place-items: center; width: 39px; height: 39px; padding: 0; cursor: pointer; color: white; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); border-radius: 50%; }
.reader-main { display: grid; grid-template-columns: minmax(44px,1fr) auto minmax(44px,1fr); align-items: center; min-height: 0; padding: 15px 8px 8px; }
.book-stage { position: relative; width: min(82vw, calc((100dvh - 155px) * var(--spread-ratio))); max-width: 1120px; aspect-ratio: var(--spread-ratio) / 1; perspective: 2600px; user-select: none; touch-action: pan-y; }
.book-stage::after { position: absolute; right: 5%; bottom: -3%; left: 5%; z-index: 0; height: 6%; content: ""; background: rgba(49,36,15,.35); border-radius: 50%; filter: blur(14px); }
.book { position: absolute; inset: 0; z-index: 1; cursor: pointer; transform-style: preserve-3d; transition: transform var(--turn) cubic-bezier(.22,.72,.18,1); }
.book.is-front-closed { transform: translateX(-25%) scale(.985); }
.book.is-back-closed { transform: translateX(25%) scale(.985); }
.sheet { position: absolute; top: 0; left: 50%; width: 50%; height: 100%; transform: rotateY(0); transform-origin: left center; transform-style: preserve-3d; transition: transform var(--turn) cubic-bezier(.58,.02,.3,.98); will-change: transform; }
.sheet.is-flipped { transform: rotateY(-180deg); }
.page-face { position: absolute; inset: 0; overflow: hidden; background: var(--paper); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.page-front { border-radius: 0 7px 7px 0; box-shadow: inset 9px 0 17px -16px rgba(0,0,0,.72), 4px 3px 10px rgba(47,35,16,.16); }
.page-back { border-radius: 7px 0 0 7px; transform: rotateY(180deg); box-shadow: inset -9px 0 17px -16px rgba(0,0,0,.72), -4px 3px 10px rgba(47,35,16,.16); }
.page-face img { display: block; width: 100%; height: 100%; pointer-events: none; object-fit: contain; background: white; }
.page-cover { background: var(--forest); box-shadow: 7px 7px 18px rgba(43,30,10,.3); }
.blank-page { background: radial-gradient(circle at 50% 45%, rgba(225,182,92,.13), transparent 31%), linear-gradient(100deg,#eee4ce,#fffdf5 14%,#fffdf5 86%,#eee4ce); }
.turn-button { justify-self: center; display: grid; place-items: center; width: clamp(44px,4vw,58px); height: clamp(44px,4vw,58px); padding: 0 0 5px; cursor: pointer; color: var(--forest); background: rgba(255,250,235,.75); border: 1px solid rgba(21,61,48,.13); border-radius: 50%; box-shadow: 0 5px 16px rgba(47,35,16,.12); font: 42px Arial,sans-serif; backdrop-filter: blur(7px); }
.turn-button:disabled { cursor: default; opacity: .22; box-shadow: none; }
.gesture-hint { position: absolute; bottom: 4%; left: 50%; z-index: 100; margin: 0; padding: 9px 14px; color: white; background: rgba(21,61,48,.9); border-radius: 999px; font-size: 11px; white-space: nowrap; box-shadow: 0 5px 18px rgba(0,0,0,.2); transform: translateX(-50%); transition: opacity 250ms ease, transform 250ms ease; }
.gesture-hint.is-hidden { pointer-events: none; opacity: 0; transform: translate(-50%,8px); }
.reader-footer { width: min(82vw,1000px); margin: 0 auto; padding: 0 0 10px; }
.progress-track { height: 5px; overflow: hidden; background: rgba(21,61,48,.14); border-radius: 99px; }
.progress-bar { width: 0; height: 100%; background: linear-gradient(90deg,var(--forest-2),var(--red)); border-radius: inherit; transition: width 350ms ease; }
.page-row { display: flex; justify-content: space-between; align-items: center; min-height: 27px; color: #78847d; font-size: 11px; }
.page-row strong { color: var(--forest); }
kbd { display: inline-grid; place-items: center; min-width: 21px; height: 20px; margin-left: 3px; color: var(--forest); background: rgba(255,255,255,.45); border: 1px solid rgba(21,61,48,.18); border-bottom-width: 2px; border-radius: 5px; }

@media (max-width: 700px) {
  .privacy-note { display: none; }
  .setup-main { padding-top: 42px; }
  .file-grid { grid-template-columns: 1fr; }
  .create-row { align-items: stretch; flex-direction: column; }
  .create-row p { text-align: center; }
  .create-button { justify-content: space-between; }
  .setup-footer { flex-wrap: wrap; }
  .reader-title { max-width: 40vw; }
  .reader-title strong { font-size: 14px; }
  .text-button { width: 42px; overflow: hidden; white-space: nowrap; }
  .reader-main { grid-template-columns: 42px auto 42px; padding-inline: 2px; }
  .book-stage { width: min(82vw,calc((100dvh - 150px) * var(--spread-ratio))); }
  .reader-footer { width: 91vw; }
  .page-row span { display: none; }
}

@media (max-height: 570px) and (orientation: landscape) {
  .reader-header { min-height: 54px; padding-block: 6px; }
  .reader-main { padding-top: 7px; }
  .book-stage { width: min(78vw,calc((100dvh - 100px) * var(--spread-ratio))); }
  .reader-footer { padding-bottom: 3px; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --turn: 1ms; }
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}