:root { color-scheme: light; /* Developer theme switch: - default: - inverse: You can also tweak the RGB triplets below for a custom palette. */ --bg-rgb: 255 255 255; --fg-rgb: 0 0 0; --bg: rgb(var(--bg-rgb)); --fg: rgb(var(--fg-rgb)); --hex-size: clamp(2.4rem, 4vw, 3.5rem); --chapter-width: calc(100vw - 0.02rem); --chapter-cell-font: clamp(1.12rem, 4.2vw, 1.42rem); --chapter-cell-min-height: min(13.75rem, calc(100vh - 0.75rem)); --chapter-cell-padding-block: 0.62rem; --chapter-cell-padding-inline: 0.48rem; } :root[data-color-scheme="ink"] { color-scheme: dark; --bg-rgb: 0 0 0; --fg-rgb: 255 255 255; } * { box-sizing: border-box; } html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--fg); font-family: "Times New Roman", Times, serif; } body { overflow: hidden; } button, input, textarea, select { font: inherit; } #app { min-height: 100vh; } .screen { position: relative; min-height: 100vh; width: 100%; } .contents-screen { overflow: hidden; } .contents-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: pointer; } .contents-fallback { min-height: 100vh; display: grid; grid-template-columns: repeat(auto-fit, minmax(3rem, 1fr)); gap: 0; place-items: center; align-content: center; width: min(100vw, 72rem); margin: 0 auto; } .hexagram-button { display: flex; align-items: center; justify-content: center; width: var(--hex-size); height: var(--hex-size); margin: 0; padding: 0; border: 0; background: transparent; color: var(--fg); font-size: calc(var(--hex-size) * 0.9); line-height: 1; cursor: pointer; } .hexagram-button:focus-visible { outline: 1px solid var(--fg); outline-offset: -0.15rem; } .chapter-screen { display: grid; place-items: center; padding: 0; } .chapter-overlay { position: absolute; inset: 0; } .chapter-body { position: relative; display: grid; place-items: center; width: var(--chapter-width); max-width: 100%; max-height: 100vh; min-height: auto; padding: 0; text-align: center; cursor: default; font-family: Helvetica, Arial, sans-serif; font-weight: 300; overflow: hidden; } .chapter-lines-table { position: relative; z-index: 1; border-collapse: separate; border-spacing: 0; table-layout: fixed; background: var(--bg); writing-mode: vertical-rl; width: auto; max-width: 100vw; max-height: 100%; margin: 0; border: 1px solid var(--fg); } .chapter-line-cell { border: 0; padding: var(--chapter-cell-padding-block) var(--chapter-cell-padding-inline); font-size: var(--chapter-cell-font); line-height: 1.45; text-align: start; font-weight: 300; min-height: var(--chapter-cell-min-height); vertical-align: top; animation: chapter-border-in 700ms ease-out both; } .chapter-line-row + .chapter-line-row .chapter-line-cell { border-right: 1px solid var(--fg); } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } @keyframes chapter-border-in { from { border-color: transparent; } to { border-color: var(--fg); } } @media (min-width: 641px) { :root { --chapter-cell-font: clamp(1.24rem, 2.25vw, 1.72rem); --chapter-cell-min-height: min(17.5rem, calc(100vh - 0.8rem)); --chapter-cell-padding-block: 0.76rem; --chapter-cell-padding-inline: 0.56rem; --chapter-width: min(100vw, 72rem); } .chapter-screen { padding: 0; } .chapter-body { max-height: 100vh; padding: 0; } } @media (min-width: 1025px) { :root { --chapter-width: min(100vw, 96rem); --chapter-cell-font: clamp(1.42rem, 1.7vw, 2.08rem); --chapter-cell-min-height: min(23.5rem, calc(100vh - 0.4rem)); --chapter-cell-padding-block: 0.88rem; --chapter-cell-padding-inline: 0.62rem; } .chapter-screen { padding: 0; } .chapter-body { max-height: 100vh; min-height: auto; padding: 0; } } @media (max-width: 640px) { :root { --hex-size: 2.8rem; } }