@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/cormorant-regular.ttf') format('truetype'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500; font-display: swap; src: url('../assets/fonts/cormorant-medium.ttf') format('truetype'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 400; font-display: swap; src: url('../assets/fonts/cormorant-italic.ttf') format('truetype'); }
:root {
  color-scheme: dark;
  --h3ll-ink: #09090c; --h3ll-surface: #101015; --h3ll-paper: #d5c9bd; --h3ll-muted: #b9aaa4; --h3ll-bronze: #8e795c;
  --h3ll-space-sm: 8px; --h3ll-space-md: 16px; --h3ll-space-lg: 24px; --h3ll-radius: 24px; --h3ll-touch: 44px;
  --h3ll-font: 'Cormorant Garamond', Georgia, serif;
  --character-accent: #a777c1; --character-focus: #e2b7f4;
  --character-city: url('../assets/backgrounds/city.webp');
  --paper: var(--h3ll-paper); --muted: var(--h3ll-muted); --gold: var(--h3ll-bronze); --violet: var(--character-accent);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { min-width: 0; min-height: 100svh; margin: 0; background: #070709; color: var(--paper); font-family: var(--h3ll-font); -webkit-font-smoothing: antialiased; }
button, input { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--character-focus); outline-offset: 4px; }
button:disabled { cursor: default; }
.app { width: min(100%, 660px); margin: 0 auto; padding: max(8px, env(safe-area-inset-top, 0px), var(--tg-content-safe-area-inset-top, 0px)) max(8px, env(safe-area-inset-right, 0px), var(--tg-content-safe-area-inset-right, 0px)) max(12px, env(safe-area-inset-bottom, 0px), var(--tg-content-safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px), var(--tg-content-safe-area-inset-left, 0px)); }
.frame { position: relative; isolation: isolate; border-radius: var(--h3ll-radius); background: linear-gradient(#09090cc2, #09090ce8), url('../assets/textures/velvet.webp') center / 500px; overflow: hidden; }
.frame::after { content: ''; position: absolute; z-index: 10; inset: 0; border: 28px solid transparent; border-image: url('../assets/oracle/outer-frame.png') 56 / 28px / 0 stretch; pointer-events: none; }
.hero { position: relative; min-height: 25.5rem; height: clamp(25.5rem, 105.5vw, 38.75rem); isolation: isolate; overflow: hidden; }
.city { position: absolute; inset: 0; background: linear-gradient(90deg,#05040866,transparent 60%), var(--character-city) center / cover; opacity: .76; }
.character { position: absolute; width: 124%; aspect-ratio: 1; top: 0; left: -4%; z-index: 2; pointer-events: none; mask-image: linear-gradient(#000 62%,#000e 76%,transparent 99%); }
.character img, .character canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.character img { filter: brightness(.89) saturate(.94); }
.character canvas { display: none; filter: brightness(.94) saturate(.98); }
.portrait-source { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.hero-shade { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(90deg,#050407b8 0%,#05040780 27%,transparent 53%),linear-gradient(0deg,var(--h3ll-ink) 0%,#09090c99 13%,transparent 38%); }
.hero-atmosphere { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: radial-gradient(ellipse at 78% 17%, #71369b13, transparent 55%); }
.hero-grain { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: .06; mix-blend-mode: soft-light; background-size: 128px 128px; }
.icon-button { display: grid; place-items: center; width: var(--h3ll-touch); min-width: var(--h3ll-touch); height: var(--h3ll-touch); min-height: var(--h3ll-touch); padding: 10px; border: 1px solid #8e795c9c; border-radius: 50%; background: #09090cba; color: var(--paper); transition: background .18s, border-color .18s, transform .18s; }
.icon-button img { width: 22px; height: 22px; filter: invert(.75) sepia(.2); }
.icon-button:hover { background: #201824; border-color: var(--character-accent); }
.icon-button:active { transform: scale(.96); }
.portrait-options { position: absolute; top: 14px; right: 14px; z-index: 6; }
.identity { position: relative; z-index: 5; width: 59%; padding: clamp(4.05rem,12vw,5.4rem) 0 2rem clamp(18px,4.6vw,30px); text-shadow: 0 2px 12px #000; }
.sigil { display: block; width: clamp(32px,7vw,42px); height: auto; margin: 0 0 6px 28%; filter: brightness(1.35); }
.identity h1 { margin: 0; width: max-content; max-width: 100%; color: #ccc0c9; font-weight: 400; font-size: clamp(2.9rem,13.5vw,5.5rem); line-height: .95; letter-spacing: -.055em; background: linear-gradient(110deg,#bfb0bf,#8f8091 47%,#c4b8c5),url('../assets/textures/stone.webp'); background-blend-mode: screen; background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.eyebrow { margin: 8px 0 12px; color: var(--character-accent); font-size: clamp(.875rem,3.5vw,1.25rem); font-weight: 500; white-space: nowrap; letter-spacing: .035em; line-height: 1.25; }
.identity-rule { display: block; width: 88%; height: 14px; object-fit: contain; opacity: .85; }
.identity blockquote { margin: 18px 0 0; color: #b28ac9; font-size: clamp(1.125rem,4.6vw,1.5rem); font-style: italic; line-height: 1.28; }
.neon-inscription { position: absolute; right: 6%; top: 65px; z-index: 1; width: 50px; color: #a364c5; opacity: .8; font-family: Arial,sans-serif; font-size: clamp(.75rem,2.8vw,1.125rem); line-height: 1.25; text-shadow: 0 0 7px #9550a9; transform: rotate(-2deg); }
.neon-inscription img { width: 22px; display: block; margin: 7px auto 0; filter: brightness(1.8); }
.lore-button { position: absolute; right: 20px; bottom: 26px; z-index: 6; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 58px; min-width: 44px; min-height: 112px; padding: 13px 5px 8px; border: 1px solid #968568; border-radius: 34px; color: #c6b79e; background: #09090ccb; box-shadow: inset 0 0 0 3px #09090c,inset 0 0 0 4px #8e795c21; font-size: .875rem; line-height: 1.18; letter-spacing: .04em; transition: background .2s,border-color .2s; }
.lore-button:hover { background: #26192ede; border-color: #c59bd1; }
.lore-button:active { background: #38233b; }
.lore-eye { width: 25px; height: 13px; object-fit: contain; }
.lore-seal { width: 10px; height: 12px; filter: grayscale(1) sepia(.4) brightness(1.8); }
.essence { position: relative; z-index: 4; padding: 3px 18px 18px; text-align: center; }
.essence h2 { margin: 0; font-weight: 400; font-size: 1.125rem; letter-spacing: .27em; line-height: 1.4; }
.essence-divider { display: flex; align-items: center; justify-content: center; gap: 3px; height: 24px; }
.essence-divider::before,.essence-divider::after { content:''; width: 62px; height: 1px; background: linear-gradient(90deg,transparent,#75508d66); }
.essence-divider::after { transform: rotate(180deg); }
.essence-divider img { width: 17px; height: 17px; filter: brightness(1.45); }
.essence p { margin: 1px 0 0; color: var(--paper); font-size: clamp(1.25rem,4.8vw,1.625rem); line-height: 1.22; }
.stories { padding: 0 clamp(16px,4.6vw,30px); }
.section-heading { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 6px 0 14px; }
.section-heading h2 { margin: 0; font-size: clamp(1.125rem,4.6vw,1.625rem); letter-spacing: .13em; font-weight: 400; white-space: nowrap; }
.section-heading img { min-width: 0; width: 22%; height: 8px; object-fit: contain; opacity: .8; }
#story-list { display: grid; gap: 8px; }
.story-card { isolation: isolate; position: relative; display: grid; grid-template-columns: 34px 1fr 16px; align-items: center; gap: 12px; overflow: hidden; width: 100%; min-height: 104px; padding: 14px 12px; border: 1px solid #79664a70; border-radius: 9px; background: linear-gradient(90deg,#08070b,#121017),var(--character-city); color: var(--paper); text-align: left; transition: border-color .2s,background .2s; }
.story-card::after { content:''; position:absolute; inset:3px; border:1px solid #89765a12; border-radius:6px; pointer-events:none; }
.story-card:hover { border-color:#b490bd; background-color:#1e1424; }
.story-card:active { border-color:#d5acd9; }
.story-art { position: absolute; z-index: -2; width: 88%; max-width:none; height: auto; aspect-ratio:1; top: -50%; right: -18%; object-fit: contain; filter: brightness(.93) saturate(.92); pointer-events:none; }
.story-card::before { content:''; position:absolute; z-index:-1; inset:0; background:linear-gradient(90deg,#09090c 4%,#09090cef 37%,#09090ca8 57%,#09090c15 80%,#09090c8c); }
.story-card:nth-child(2) .story-art { top:-63%; right:-15%; }
.story-card:nth-child(3) .story-art { top:-39%; right:-12%; }
.story-number { position:relative; display:flex; align-items:center; min-height:68px; height:100%; color:#bca98a; font-size:1.375rem; border-right:1px solid #8e795c55; }
.story-number img { position:absolute; width:9px; height:9px; top:calc(50% - 4px); right:-5px; background:#0a090e; }
.story-copy { display:grid; gap:3px; position:relative; }
.story-title { font-size:clamp(1.125rem,4.8vw,1.625rem); line-height:1.1; letter-spacing:.035em; font-weight:500; }
.story-teaser { max-width:90%; font-size:1.0625rem; line-height:1.15; color:#c8b9b5; }
.story-arrow { width:16px; height:22px; filter:invert(.8) sepia(.15); }
.frame-footer { display:flex; justify-content:center; align-items:center; padding:12px 20px 8px; min-height:44px; }
.frame-footer img { width:min(76%,291px); height:auto; }
dialog {
  width: min(540px, calc(100vw - 20px));
  max-width: none;
  max-height: calc(100dvh - 24px);
  overflow: hidden;
  padding: 0;
  border: 1px solid #a38862;
  border-radius: 20px;
  background: #100e14;
  color: var(--paper);
  box-shadow: 0 24px 90px #000d, 0 0 35px #8a4ca628;
}
dialog::backdrop { background: #020106cf; backdrop-filter: blur(7px); }
.dialog-inner { position: relative; max-height: calc(100dvh - 26px); overflow: hidden; }
.close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  font-family: Arial, sans-serif;
  font-size: 28px;
  line-height: 1;
}
#panel-content { max-height: calc(100dvh - 26px); overflow-y: auto; overscroll-behavior: contain; }
#panel-title:focus { outline: none; }
.panel-kicker { margin: 0 0 8px; color: #c5a678; }
.simple-panel { padding: 38px clamp(24px, 7vw, 44px) 36px; }
.panel-sigil {
  display: block;
  width: 38px;
  height: 38px;
  margin: 0 0 25px;
  object-fit: contain;
}
.simple-panel h2, .reader-body h2 {
  margin: 0 0 19px;
  font-size: clamp(28px, 7vw, 36px);
  font-weight: 400;
  line-height: 1.08;
}
.simple-panel p:not(.panel-kicker) {
  color: #d6c9bc;
  font-size: 16px;
  line-height: 1.6;
}
.lore-panel blockquote {
  margin: 28px 0;
  padding-left: 17px;
  border-left: 2px solid #a977b4;
  color: #e1c6e5;
  font-size: 18px;
  font-style: italic;
  line-height: 1.5;
}
.panel-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  min-height: 48px;
  margin-top: 22px;
  padding: 10px 14px;
  border: 1px solid #9d7f5e;
  border-radius: 9px;
  background: #251c2c;
  color: var(--paper);
  text-align: left;
}
.panel-link:hover { background: #382641; }
.panel-link span { color: #d6aee0; font-size: 23px; }
.reader-art {
  position: relative;
  height: clamp(185px, 47vw, 260px);
  overflow: hidden;
  background:
    linear-gradient(0deg, #100e14 1%, #100e1488 20%, #100e1422 70%),
    url('../assets/backgrounds/city.webp') center 48% / cover;
}
.reader-art img {
  position: absolute;
  top: -15%;
  left: 25%;
  width: 75%;
  height: 135%;
  object-fit: contain;
  filter: brightness(.86) saturate(.9);
}
.reader-index {
  position: absolute;
  bottom: 18px;
  left: clamp(23px, 6vw, 38px);
  color: #e4c999;
  font-size: 11px;
  letter-spacing: .18em;
}
.reader-body { padding: 14px clamp(23px, 6vw, 38px) 30px; }
.reader-body h2 { margin-bottom: 7px; }
.reader-lead {
  margin: 0 0 22px;
  color: #d1aada;
  font-size: 17px;
  font-style: italic;
  line-height: 1.4;
}
.reader-prose p {
  margin: 0 0 17px;
  color: #e0d4c7;
  font-size: 16px;
  line-height: 1.64;
}
.reader-navigation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 23px;
  padding-top: 14px;
  border-top: 1px solid #9b7c6a5c;
  color: #b69d7d;
  font-size: 12px;
}
.reader-navigation button {
  min-width: 87px;
  min-height: 44px;
  padding: 7px 9px;
  border: 1px solid #94775374;
  border-radius: 8px;
  background: #211a25;
  color: #ecddcd;
  font-size: 13px;
}
.reader-navigation button:not(:disabled):hover { background: #34233c; }
.reader-navigation button:disabled { opacity: .35; cursor: default; }
.settings-panel p:not(.panel-kicker) { margin-bottom: 24px; }
.setting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  border-top: 1px solid #6f5d4a7d;
  color: #eadfd2;
  font-size: 16px;
}
.setting output { color: #d9a6e7; }
.setting input[type='checkbox'] {
  width: 24px;
  height: 24px;
  accent-color: #a56ac0;
}
.speed-setting { border-bottom: 0; }
#speed {
  width: 100%;
  min-height: 44px;
  margin: 0;
  accent-color: #b278cc;
}


/* Readers share the same Oracle typography and delicate surfaces. */
dialog { background:linear-gradient(#0b090fef,#0b090ff5),url('../assets/textures/velvet.webp'); }
.panel-sigil { mix-blend-mode:normal; filter:brightness(1.4); }
.panel-kicker,.reader-index { font-size:.875rem; letter-spacing:.15em; }
.simple-panel p:not(.panel-kicker),.reader-prose p { font-size:1.25rem; line-height:1.5; }
.simple-panel h2,.reader-body h2 { font-size:2rem; }
.reader-lead { font-size:1.25rem; }
.reader-navigation { font-size:1rem; }
.reader-navigation button { font-size:1rem; }
.setting { font-size:1.125rem; gap:12px; }
.setting input[type='checkbox'] { width:44px; height:44px; flex-shrink:0; }
.panel-link { font-size:1.125rem; }
.close img { width:20px; height:20px; }
@media (max-width:360px) {
 .identity { padding-top:72px; width:65%; }
 .identity h1 { font-size:2.9rem; }
 .eyebrow { white-space:normal; font-size:.875rem; }
 .neon-inscription { right:5%; }
 .story-card { grid-template-columns:27px 1fr 13px; gap:9px; padding:13px 9px; }
 .story-title { font-size:1.125rem; }
 .story-teaser { max-width:100%; }
 .story-art { width:105%; top:-42%; right:-27%; opacity:.8; }
 .section-heading { gap:8px; }
 .section-heading h2 { letter-spacing:.08em; }
}
@media (min-width:600px) {
 .app { padding-top:12px; }
 .identity { width:57%; }
 .lore-button { width:68px; min-height:126px; right:32px; bottom:28px; font-size:1rem; }
 .story-card { min-height:112px; grid-template-columns:44px 1fr 20px; padding:16px 18px; gap:18px; }
 .story-teaser { font-size:1.25rem; max-width:68%; }
 .story-art { width:70%; top:-75%; right:-9%; }
 .story-card:nth-child(2) .story-art { top:-89%; right:-7%; }
 .story-card:nth-child(3) .story-art { top:-66%; right:-5%; }
}
@media (max-width:280px) {
 .hero { min-height:32rem; height:auto; }
 .identity { width:100%; padding-right:18px; }
 .identity h1 { font-size:2.5rem; }
 .identity blockquote { margin-top:22px; }
 .neon-inscription { display:none; }
 .lore-button { position:relative; bottom:auto; right:auto; margin:0 18px 24px auto; }
 .section-heading img { display:none; }
 .section-heading h2 { white-space:normal; text-align:center; }
 .story-card { grid-template-columns:1fr 16px; }
 .story-number { grid-column:1/-1; min-height:0; height:auto; border:0; }
 .story-number img { display:none; }
 .story-art { opacity:.3; }
 .reader-navigation { flex-wrap:wrap; }
 .reader-navigation>span { order:-1; width:100%; text-align:center; }
 .reader-navigation button { min-width:0; }
}
@media (max-height:500px) and (orientation:landscape) { .reader-art { height:145px; }.reader-art img { top:-70%;height:220%; } }
@media (prefers-contrast:more) { .story-teaser,.essence p,.reader-prose p,.simple-panel p:not(.panel-kicker) { color:#f3e8dc; }.story-card,.lore-button,dialog { border-color:#e1c49a; } }
@media (prefers-reduced-motion:reduce) { html {scroll-behavior:auto;} *,*::before,*::after {animation:none!important;transition:none!important;} }
/* Let enlarged text grow without cropping the title or section labels. */
.hero { height:auto; min-height:clamp(25.5rem,105.5vw,38.75rem); }
.identity h1 { overflow-wrap:anywhere; }
.eyebrow { white-space:normal; }
.section-heading h2 { white-space:normal; text-align:center; }
.story-copy { min-width:0; overflow-wrap:anywhere; }
.story-number { white-space:nowrap; }
.story-card { grid-template-columns:max(34px,1.45em) minmax(0,1fr) 16px; }
.lore-button { width:max(58px,4.15em); }
@media(max-width:350px) { .story-card { grid-template-columns:max(27px,1.45em) minmax(0,1fr) 13px; } }
@media(min-width:700px) { .story-card { grid-template-columns:max(44px,1.45em) minmax(0,1fr) 20px; }.lore-button { width:max(68px,4.15em); } }
@media(max-width:280px) { .story-card { grid-template-columns:1fr 16px; } }
/* Reference capsule finials: hairline cross strokes, independent of its corners. */
.lore-button::before,.lore-button::after { content:''; position:absolute; left:calc(50% - 3px); width:6px; height:7px; background:linear-gradient(var(--gold),var(--gold)) center/1px 7px no-repeat,linear-gradient(var(--gold),var(--gold)) center/6px 1px no-repeat; }
.lore-button::before { top:-3px; }
.lore-button::after { bottom:-3px; }