/* Shoring — one stylesheet for the whole site. Writer-facing components live in the "element palette" section near the end; those class names are the ones the sanitiser allows. */ /* ------------------------------------------------------------------ theming Each theme declares the same tokens once, using light-dark(). Switching between light and dark is therefore only a change of color-scheme on , not a second copy of every palette. picks the palette light | dark | system (system = omit or "system") assets/theme.js applies both before first paint so there is no flash. */ :root { color-scheme: light dark; --sans: 'Merriweather Sans', ui-sans-serif, system-ui, -apple-system, sans-serif; --serif: 'Merriweather', Georgia, 'Times New Roman', serif; --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; --prose-font: var(--serif); --radius: 12px; --shadow: 0 1px 2px rgb(0 0 0 / .05), 0 10px 30px -14px rgb(0 0 0 / .28); /* writer text tints, shared by every theme */ --tint-1: light-dark(#9a4b28, #dd8a5f); --tint-2: light-dark(#33506b, #8fb4d9); --tint-3: light-dark(#3f6b58, #93c4a6); --tint-4: light-dark(#6d3f63, #d09ac6); --tint-5: light-dark(#2c6a68, #7fc9c4); --tint-6: light-dark(#a33a2e, #f0897a); } :root[data-mode="light"] { color-scheme: light; } :root[data-mode="dark"] { color-scheme: dark; } /* ---- Default: pastel ---- */ :root, :root[data-theme="default"] { --bg: light-dark(#fbf7fa, #1a171f); --surface: light-dark(#ffffff, #221e29); --surface-2: light-dark(#f4eef3, #2a2533); --text: light-dark(#3a3340, #ece7ef); --muted: light-dark(#776d80, #a9a1b3); --faint: light-dark(#a096a8, #837b8d); --line: light-dark(#e8dfe8, #342e3d); --line-soft: light-dark(#f2ecf1, #2b2632); --accent: light-dark(#96628f, #d9a8d2); --accent-bg: light-dark(#f7edf6, #2f2537); --on-accent: light-dark(#ffffff, #241f28); --danger: light-dark(#b0475a, #f0899b); --warn: light-dark(#8d6316, #e0b060); } /* ---- Terminal: phosphor green, monospaced, sharp corners ---- */ :root[data-theme="terminal"] { --bg: light-dark(#eef4ee, #0a0e0a); --surface: light-dark(#ffffff, #0f150e); --surface-2: light-dark(#e2ece2, #151d14); --text: light-dark(#10240f, #b8f0c0); --muted: light-dark(#3f6b41, #6fae79); --faint: light-dark(#6d9070, #4d7d55); --line: light-dark(#cadfcb, #1e2a1d); --line-soft: light-dark(#dcebdc, #162015); --accent: light-dark(#1f7a3d, #4ade80); --accent-bg: light-dark(#dff2e3, #11241a); --on-accent: light-dark(#ffffff, #06170c); --danger: light-dark(#a32b2b, #ff7b72); --warn: light-dark(#8a6212, #d9b44a); --sans: var(--mono); --serif: var(--mono); --prose-font: var(--mono); --radius: 3px; } /* ---- Nature: moss and paper ---- */ :root[data-theme="nature"] { --bg: light-dark(#f7f5ec, #14180f); --surface: light-dark(#fffdf6, #1c2117); --surface-2: light-dark(#ebe8da, #232a1d); --text: light-dark(#2b2f22, #e3e7d9); --muted: light-dark(#636952, #a2ab90); --faint: light-dark(#8b917b, #7c8570); --line: light-dark(#ddd9c6, #2c331f); --line-soft: light-dark(#e9e6d7, #242a1b); --accent: light-dark(#4f6d2c, #a8c878); --accent-bg: light-dark(#eaf0dd, #1e2616); --on-accent: light-dark(#ffffff, #141a0d); --danger: light-dark(#9c3f27, #e89070); --warn: light-dark(#866112, #d8b45c); } /* ---- Evil: ash and blood ---- */ :root[data-theme="evil"] { --bg: light-dark(#f6f1f1, #0b0708); --surface: light-dark(#ffffff, #130d0f); --surface-2: light-dark(#eae0e1, #1b1215); --text: light-dark(#1d1113, #e8dcde); --muted: light-dark(#6d5457, #a08d91); --faint: light-dark(#93797d, #7d696d); --line: light-dark(#e0cfd1, #2a1c20); --line-soft: light-dark(#ece0e1, #1f1518); --accent: light-dark(#9c1f1f, #e24b4b); --accent-bg: light-dark(#f7e4e4, #2a1214); --on-accent: light-dark(#ffffff, #1a0c0d); --danger: light-dark(#7d1414, #ff6b6b); --warn: light-dark(#8a5a12, #d9a455); } /* ---- Book: cream stock and sepia ink ---- */ :root[data-theme="book"] { --bg: light-dark(#f3ebdd, #1b1611); --surface: light-dark(#fbf6ec, #231d16); --surface-2: light-dark(#e9dfcc, #2b2419); --text: light-dark(#3a2f24, #ebdfca); --muted: light-dark(#74634b, #ac9c82); --faint: light-dark(#9a896f, #877963); --line: light-dark(#ddcfb6, #342b1f); --line-soft: light-dark(#e8dcc6, #2a231a); --accent: light-dark(#8a5320, #d19a5c); --accent-bg: light-dark(#f1e4cf, #2c2216); --on-accent: light-dark(#ffffff, #1d1409); --danger: light-dark(#9c3b2b, #e58b76); --warn: light-dark(#826112, #d7b160); } /* An author's chosen accent tints their own profile and character pages only. It rides on , so it never overrides the reader's chosen site theme. */ body[data-accent="clay"] { --accent: light-dark(#9a4b28, #dd8a5f); --accent-bg: light-dark(#f6ede6, #2a211c); --on-accent: light-dark(#fff, #17120f); } body[data-accent="ink"] { --accent: light-dark(#33506b, #8fb4d9); --accent-bg: light-dark(#e9eef4, #1c2430); --on-accent: light-dark(#fff, #0f151c); } body[data-accent="moss"] { --accent: light-dark(#4a6b3a, #9cc281); --accent-bg: light-dark(#ecf1e7, #1d251a); --on-accent: light-dark(#fff, #111608); } body[data-accent="plum"] { --accent: light-dark(#6d3f63, #d09ac6); --accent-bg: light-dark(#f4ebf2, #2a1f28); --on-accent: light-dark(#fff, #180f16); } body[data-accent="sea"] { --accent: light-dark(#2c6a68, #7fc9c4); --accent-bg: light-dark(#e6f1f0, #162726); --on-accent: light-dark(#fff, #0a1918); } body[data-accent="ember"] { --accent: light-dark(#a33a2e, #f0897a); --accent-bg: light-dark(#f8eae7, #2c1a17); --on-accent: light-dark(#fff, #1c0d0a); } /* Browsers without light-dark() get the default light palette rather than unset tokens, which would render the site unreadable. */ @supports not (color: light-dark(#000, #fff)) { :root { --bg: #fbf7fa; --surface: #fff; --surface-2: #f4eef3; --text: #3a3340; --muted: #776d80; --faint: #a096a8; --line: #e8dfe8; --line-soft: #f2ecf1; --accent: #96628f; --accent-bg: #f7edf6; --on-accent: #fff; --danger: #b0475a; --warn: #8d6316; --tint-1: #9a4b28; --tint-2: #33506b; --tint-3: #3f6b58; --tint-4: #6d3f63; --tint-5: #2c6a68; --tint-6: #a33a2e; } } * { box-sizing: border-box; } /* A class that sets display (.comment-panel is flex) outranks the browser's own [hidden] { display: none }, so hiding such an element in JavaScript did nothing at all. This has to win outright. */ [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } a { color: inherit; } img { max-width: 100%; } /* ------------------------------------------------------------------ chrome */ .site-header { border-bottom: 1px solid var(--line); background: var(--bg); background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: saturate(1.4) blur(8px); position: sticky; top: 0; z-index: 40; } .site-header .inner { max-width: 68rem; margin: 0 auto; padding: 0 1.25rem; min-height: 58px; display: flex; align-items: center; gap: .75rem; } .brand { font-family: var(--serif); font-size: 1.3rem; font-weight: 600; text-decoration: none; margin-right: auto; } .brand span { color: var(--accent); } .nav { display: flex; align-items: center; gap: .25rem; } .nav a { text-decoration: none; color: var(--muted); font-size: .9rem; padding: .45rem .7rem; border-radius: 7px; white-space: nowrap; } .nav a:hover, .nav a[aria-current="page"] { color: var(--text); background: var(--surface-2); } .pip { display: inline-block; min-width: 17px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: .68rem; line-height: 17px; text-align: center; vertical-align: 1px; } .menu { position: relative; } .menu-trigger { border: 0; background: none; padding: 2px; cursor: pointer; border-radius: 999px; display: block; } .menu-trigger-icon { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; font-size: 1.05rem; color: var(--muted); border: 1px solid var(--line); background: var(--surface); } .menu-trigger-icon:hover { color: var(--text); background: var(--surface-2); } .menu-panel { position: absolute; right: 0; top: calc(100% + 8px); min-width: 200px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: .35rem; z-index: 50; } .menu-panel a, .menu-panel button { display: block; width: 100%; text-align: left; font: inherit; font-size: .88rem; padding: .5rem .6rem; border-radius: 7px; border: 0; background: none; color: var(--text); text-decoration: none; cursor: pointer; } .menu-panel a:hover, .menu-panel button:hover { background: var(--surface-2); } .menu-head { padding: .5rem .6rem .6rem; border-bottom: 1px solid var(--line-soft); margin-bottom: .35rem; font-weight: 600; font-size: .88rem; } .menu-head span { display: block; color: var(--faint); font-weight: 400; font-size: .8rem; } .avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; object-fit: cover; background: var(--surface-2); border: 1px solid var(--line); flex: none; } .avatar-letter { font-weight: 600; color: var(--muted); font-family: var(--serif); } .banner { background: var(--accent-bg); color: var(--text); border-bottom: 1px solid var(--line); padding: .7rem 1.25rem; font-size: .85rem; text-align: center; } .banner code { font-family: var(--mono); font-size: .9em; } .wrap { max-width: 68rem; margin: 0 auto; padding: 2.25rem 1.25rem 5rem; } .wrap.narrow { max-width: 30rem; } .reader-wrap { max-width: 46rem; } .site-footer { border-top: 1px solid var(--line); color: var(--faint); font-size: .82rem; text-align: center; padding: 1.75rem 1.25rem 2.5rem; } /* ------------------------------------------------------------------ toasts */ .toast-host { position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: .5rem; align-items: center; pointer-events: none; width: min(30rem, calc(100vw - 2rem)); } .toast { background: var(--text); color: var(--bg); padding: .6rem .95rem; border-radius: 999px; font-size: .86rem; box-shadow: var(--shadow); animation: rise .2s ease-out; max-width: 100%; } .toast.err { background: var(--danger); color: #fff; } .toast.ok { background: var(--accent); color: var(--on-accent); } .toast.leaving { opacity: 0; transition: opacity .3s; } @keyframes rise { from { opacity: 0; transform: translateY(8px); } } /* ------------------------------------------------------------------ controls */ .btn { font: inherit; font-size: .88rem; line-height: 1.2; padding: .6rem .9rem; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; white-space: nowrap; transition: background .12s, border-color .12s, opacity .12s; } .btn:hover { background: var(--surface-2); } .btn:disabled { opacity: .5; cursor: not-allowed; } .btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; } .btn-primary:hover { background: color-mix(in srgb, var(--accent) 85%, var(--text)); } .btn-ghost { border-color: transparent; background: transparent; color: var(--muted); } .btn-ghost:hover { background: var(--surface-2); color: var(--text); } .btn-danger { color: var(--danger); } .btn-sm { padding: .4rem .6rem; font-size: .8rem; } .btn-block { width: 100%; } .btn.react.on { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); } .link-btn { border: 0; background: none; padding: 0; font: inherit; font-size: inherit; color: var(--muted); cursor: pointer; text-decoration: underline; text-underline-offset: .15em; } .link-btn:hover { color: var(--text); } input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="datetime-local"], input[type="file"], textarea, select { font: inherit; font-size: 16px; width: 100%; padding: .6rem .75rem; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--text); } textarea { resize: vertical; } input:focus, textarea:focus, select:focus { outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 1px; border-color: var(--accent); } label.field { display: block; margin-bottom: 1rem; } label.field > span { display: block; font-size: .76rem; text-transform: uppercase; letter-spacing: .07em; color: var(--faint); margin-bottom: .35rem; } label.check { display: flex; align-items: center; gap: .5rem; margin-bottom: 1rem; font-size: .92rem; } label.check input { width: auto; } .hint { font-size: .8rem; color: var(--faint); margin: .35rem 0 0; } .tag-input { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; width: 100%; padding: .45rem .6rem; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); } .tag-input:focus-within { outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 1px; border-color: var(--accent); } .tag-chip { display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .3rem .25rem .6rem; border-radius: 999px; background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--text); font-size: .85rem; line-height: 1; } .tag-chip-remove { display: inline-flex; align-items: center; justify-content: center; width: 1.1rem; height: 1.1rem; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; font-size: .95rem; line-height: 1; } .tag-chip-remove:hover { background: color-mix(in srgb, var(--accent) 25%, transparent); } .tag-input-field { flex: 1; min-width: 6rem; border: 0; padding: .25rem 0; background: transparent; font: inherit; font-size: .92rem; width: auto; } .tag-input-field:focus { outline: none; } .form-error { background: color-mix(in srgb, var(--danger) 10%, transparent); border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent); color: var(--danger); padding: .6rem .75rem; border-radius: 8px; font-size: .86rem; margin: 0 0 1rem; } .tabs { display: flex; gap: 0; } .tabs button { flex: 1; font: inherit; font-size: .85rem; padding: .55rem; border: 1px solid var(--line); background: var(--surface); color: var(--muted); cursor: pointer; } .tabs button:first-child { border-radius: 8px 0 0 8px; } .tabs button:last-child { border-radius: 0 8px 8px 0; border-left: 0; } .tabs button[aria-selected="true"] { background: var(--accent-bg); color: var(--accent); border-color: var(--accent); } .seg { display: flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; flex: none; } .seg button { font: inherit; font-size: .82rem; padding: .5rem .75rem; border: 0; border-right: 1px solid var(--line); background: var(--surface); color: var(--muted); cursor: pointer; } .seg button:last-child { border-right: 0; } .seg button[aria-selected="true"] { background: var(--accent-bg); color: var(--accent); } .tag { display: inline-block; background: var(--surface-2); border: 1px solid var(--line-soft); padding: .1rem .45rem; border-radius: 999px; font-size: .72rem; color: var(--muted); font-family: var(--sans); } button.tag { cursor: pointer; } .tag-active { background: var(--accent-bg); color: var(--accent); border-color: var(--accent); } .tag-accent { background: var(--accent-bg); color: var(--accent); border-color: transparent; } .tag-warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 30%, transparent); } .tag-rating { text-transform: uppercase; letter-spacing: .06em; font-size: .66rem; } .rating-explicit { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, transparent); } .rating-questionable { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 35%, transparent); } .post-meta { font-size: .78rem; color: var(--faint); display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; } .loading { color: var(--faint); padding: 2.5rem 0; text-align: center; } .empty { border: 1px dashed var(--line); border-radius: var(--radius); padding: 3rem 1.5rem; text-align: center; color: var(--muted); } .empty h2 { font-family: var(--serif); margin: 0 0 .5rem; color: var(--text); } .empty p { margin: 0 0 1rem; } .page-head { margin-bottom: 2rem; } .page-head h1, .page-title { font-family: var(--serif); font-size: clamp(1.8rem, 5vw, 2.4rem); line-height: 1.15; margin: 0 0 .4rem; font-weight: 600; } .page-head p { color: var(--muted); margin: 0; } .row-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .section-title { font-family: var(--serif); font-size: 1.3rem; font-weight: 600; margin: 2.5rem 0 1rem; } .center-row { text-align: center; margin-top: 2rem; } /* ------------------------------------------------------------------ landing */ .hero { padding: 1.5rem 0 2.5rem; border-bottom: 1px solid var(--line-soft); margin-bottom: 2rem; } .hero h1 { font-family: var(--serif); font-size: clamp(2rem, 7vw, 3.2rem); line-height: 1.08; margin: 0 0 .6rem; font-weight: 600; letter-spacing: -.015em; } .hero h1 .slash { color: var(--accent); font-weight: 400; } .hero .tagline { font-family: var(--serif); font-size: clamp(1.05rem, 2.6vw, 1.35rem); line-height: 1.35; color: var(--text); font-style: italic; margin: 0 0 .75rem; max-width: 30ch; } .hero p { color: var(--muted); max-width: 44ch; margin: 0 0 1.5rem; font-size: 1rem; } .hero-actions { display: flex; gap: .6rem; flex-wrap: wrap; } .browse-bar { display: flex; gap: .6rem; margin: 0 0 1rem; flex-wrap: wrap; } .browse-bar input { flex: 1 1 14rem; } .tag-row { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.75rem; } .story-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; } .story-card { display: flex; gap: .9rem; padding: .85rem; border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--surface); text-decoration: none; transition: border-color .12s, transform .12s; } .story-card:hover { border-color: var(--accent); transform: translateY(-1px); } .cover { width: 62px; height: 88px; flex: none; border-radius: 6px; object-fit: cover; background: var(--surface-2); } .cover-blank { display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 1.6rem; color: var(--faint); border: 1px solid var(--line); } .story-card-body { display: flex; flex-direction: column; gap: .2rem; min-width: 0; } .story-card-title { font-family: var(--serif); font-size: 1.05rem; font-weight: 600; line-height: 1.25; } .story-card-author { font-size: .8rem; color: var(--muted); } .story-card-summary { font-size: .85rem; color: var(--muted); margin: .2rem 0 .35rem; } /* ------------------------------------------------------------------ story page */ .story-head { display: flex; gap: 1.75rem; margin-bottom: 1rem; flex-wrap: wrap; } .story-cover { width: 180px; height: 260px; flex: none; border-radius: var(--radius); object-fit: cover; background: var(--surface-2); font-size: 4rem; } .story-head-body { flex: 1 1 20rem; min-width: 0; } .story-head-body h1 { font-family: var(--serif); font-size: clamp(1.7rem, 5vw, 2.5rem); line-height: 1.15; margin: .4rem 0 .6rem; font-weight: 600; } .author-line { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; color: var(--muted); font-size: .92rem; margin-bottom: .75rem; } .author-line:hover { color: var(--text); } .story-summary { color: var(--text); margin: 0 0 1rem; max-width: 52ch; } .story-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; } .chapter-list { list-style: none; padding: 0; margin: 0; } .chapter-list li { border-top: 1px solid var(--line-soft); } .chapter-list li:last-child { border-bottom: 1px solid var(--line-soft); } .chapter-list a, .ch-locked { display: flex; gap: .9rem; padding: .9rem .4rem; text-decoration: none; align-items: baseline; border-radius: 8px; } .chapter-list a:hover { background: var(--surface-2); } .ch-locked { opacity: .55; } .ch-num { font-family: var(--serif); color: var(--faint); font-size: .95rem; min-width: 1.5rem; } .ch-body { display: flex; flex-direction: column; gap: .25rem; min-width: 0; } .ch-title { font-weight: 600; font-size: .98rem; } /* ------------------------------------------------------------------ reading */ .progress-bar { position: sticky; top: 58px; height: 2px; background: transparent; z-index: 30; } .progress-bar span { display: block; height: 100%; width: 0; background: var(--accent); transition: width .1s linear; } .reader-crumbs { font-size: .84rem; color: var(--muted); margin-bottom: 1.5rem; display: flex; gap: .45rem; flex-wrap: wrap; } .reader-crumbs a { color: var(--muted); } .reader-crumbs a:hover { color: var(--accent); } .article-head { margin: 0 auto 2.5rem; text-align: center; } .chapter-index { display: block; font-size: .74rem; letter-spacing: .22em; text-transform: uppercase; color: var(--faint); margin-bottom: .6rem; } .article-head h1 { font-family: var(--serif); font-size: clamp(1.7rem, 5vw, 2.6rem); line-height: 1.15; font-weight: 600; margin: 0 0 .8rem; } .article-head .post-meta { justify-content: center; } .chapter-hero { width: 100%; max-height: 340px; object-fit: cover; border-radius: var(--radius); margin-bottom: 2rem; } .reader-foot { margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; } .reader-nav { margin-left: auto; display: flex; gap: .5rem; flex-wrap: wrap; } /* prose */ .prose { font-family: var(--prose-font); font-size: var(--reading-size, 1.12rem); line-height: var(--reading-leading, 1.75); isolation: isolate; } /* The reader column follows the chosen measure; the editor preview does not, since it is already inside a narrow pane. */ .reader-wrap .prose, .reader-wrap .article-head, .reader-wrap .reader-foot { max-width: var(--reading-measure, 36rem); margin-left: auto; margin-right: auto; } .reader-wrap { max-width: min(58rem, 100%); } .prose > * + * { margin-top: 1.25em; } .prose h1, .prose h2, .prose h3, .prose h4 { font-weight: 600; line-height: 1.25; margin-top: 2em; } .prose h1 { font-size: 1.7em; } .prose h2 { font-size: 1.45em; } .prose h3 { font-size: 1.2em; } .prose h4 { font-size: 1.05em; } .prose .align-left { text-align: left; } .prose .align-center { text-align: center; } .prose .align-right { text-align: right; } .prose .font-serif { font-family: var(--serif); } .prose .font-sans { font-family: var(--sans); } .prose .font-mono { font-family: var(--mono); } /* Extra fonts a writer can apply to a selection (assets/fonts.js), loaded from the single combined Google Fonts request in every page's . Each falls back to the matching site-default stack if it's still loading or fails to load. */ .prose .font-lora { font-family: 'Lora', var(--serif); } .prose .font-playfair { font-family: 'Playfair Display', var(--serif); } .prose .font-cormorant { font-family: 'Cormorant Garamond', var(--serif); } .prose .font-crimson { font-family: 'Crimson Text', var(--serif); } .prose .font-garamond { font-family: 'EB Garamond', var(--serif); } .prose .font-bitter { font-family: 'Bitter', var(--serif); } .prose .font-inter { font-family: 'Inter', var(--sans); } .prose .font-poppins { font-family: 'Poppins', var(--sans); } .prose .font-nunito { font-family: 'Nunito', var(--sans); } .prose .font-oswald { font-family: 'Oswald', var(--sans); } .prose .font-courierprime{ font-family: 'Courier Prime', var(--mono); } .prose .font-spacemono { font-family: 'Space Mono', var(--mono); } .prose .font-cinzel { font-family: 'Cinzel', var(--serif); } .prose .font-bebas { font-family: 'Bebas Neue', var(--sans); letter-spacing: .03em; } .prose .font-specialelite{ font-family: 'Special Elite', var(--mono); } .prose .font-caveat { font-family: 'Caveat', cursive; } .prose .font-indieflower { font-family: 'Indie Flower', cursive; } .prose .font-shadows { font-family: 'Shadows Into Light', cursive; } .prose .font-dancing { font-family: 'Dancing Script', cursive; } /* Wider letter/word spacing, taller lines, and left-aligned text — the plain-CSS adjustments that help dyslexic readers most, with no font swap and no extra asset to load. */ [data-dyslexia="on"] .prose { letter-spacing: .02em; word-spacing: .12em; line-height: 1.9; text-align: left; } [data-dyslexia="on"] .prose p { margin-top: 1.5em; } .prose a { color: var(--accent); text-underline-offset: .18em; } .prose img { height: auto; border-radius: 6px; display: block; } .prose ul, .prose ol { padding-left: 1.3em; } .prose li + li { margin-top: .35em; } .prose blockquote { margin-left: 0; margin-right: 0; padding-left: 1.1em; border-left: 2px solid var(--accent); color: var(--muted); font-style: italic; } .prose code { font-family: var(--mono); font-size: .86em; background: var(--surface-2); border: 1px solid var(--line-soft); padding: .1em .35em; border-radius: 5px; } .prose pre { font-family: var(--mono); background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 1rem; overflow-x: auto; font-size: .85rem; } .prose pre code { background: none; border: 0; padding: 0; } .prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.5em 0; } .prose table { width: 100%; border-collapse: collapse; font-family: var(--sans); font-size: .92rem; } .prose th, .prose td { border: 1px solid var(--line); padding: .5rem .65rem; text-align: left; } .prose th { background: var(--surface-2); } .table-scroll { overflow-x: auto; } /* sentence anchors */ .sentence { transition: background .15s; border-radius: 3px; } .reading .sentence { cursor: pointer; } .reading .sentence:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); } .sentence.has-comments { background: color-mix(in srgb, var(--accent) 9%, transparent); box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--accent) 40%, transparent); } .sentence.active { background: color-mix(in srgb, var(--accent) 20%, transparent); } .comment-pin { display: inline-flex; align-items: center; justify-content: center; min-width: 1.35em; height: 1.35em; margin-left: .3em; padding: 0 .35em; border-radius: 999px; border: 0; background: var(--accent); color: var(--on-accent); font-family: var(--sans); font-size: .62em; font-weight: 700; cursor: pointer; vertical-align: .25em; line-height: 1; } /* comment panel */ .comment-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(24rem, 100vw); background: var(--surface); border-left: 1px solid var(--line); z-index: 120; display: flex; flex-direction: column; box-shadow: var(--shadow); } .panel-scrim { position: fixed; inset: 0; background: rgba(15, 14, 12, .3); z-index: 110; } .panel-head { display: flex; gap: .75rem; align-items: flex-start; padding: 1rem 1rem .75rem; border-bottom: 1px solid var(--line-soft); } .panel-label { font-size: .74rem; text-transform: uppercase; letter-spacing: .09em; color: var(--faint); } .panel-anchor { margin: .4rem 0 0; padding-left: .7rem; border-left: 2px solid var(--accent); font-family: var(--serif); font-size: .9rem; color: var(--muted); max-height: 5.5em; overflow: auto; } .panel-list { flex: 1; overflow-y: auto; padding: .5rem 1rem; } .panel-empty { padding: 1.5rem 0; text-align: center; } .comment { padding: .85rem 0; border-bottom: 1px solid var(--line-soft); } .comment:last-child { border-bottom: 0; } .comment-who { display: inline-flex; align-items: center; gap: .45rem; text-decoration: none; font-size: .85rem; font-weight: 600; } .comment-body { margin: .45rem 0 .35rem; font-size: .92rem; white-space: pre-wrap; overflow-wrap: anywhere; } .comment-foot { display: flex; gap: .75rem; font-size: .76rem; color: var(--faint); } .panel-form { border-top: 1px solid var(--line-soft); padding: .75rem 1rem 1rem; } .panel-form textarea { font-size: 16px; } .panel-form-actions { display: flex; align-items: center; gap: .6rem; margin-top: .5rem; } .panel-form-actions .hint { margin: 0; margin-right: auto; } body.panel-open { overflow: hidden; } /* ------------------------------------------------------------------ editor */ .editor-shell { max-width: 76rem; margin: 0 auto; padding: 1.5rem 1.25rem 2rem; } .editor-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem; align-items: start; } .title-input { font-family: var(--serif); font-size: clamp(1.5rem, 4.5vw, 2.1rem); font-weight: 600; border: 0; background: transparent; padding: .2rem 0; width: 100%; line-height: 1.2; } .title-input:focus { outline: 0; border-bottom: 1px solid var(--accent); } .meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; margin: 1rem 0; } .cover-row { display: flex; gap: 1rem; align-items: flex-start; } .cover-thumb { width: 84px; height: 118px; border-radius: 6px; object-fit: cover; flex: none; } .cover-thumb.wide { width: 150px; height: 84px; } .cover-row > div { flex: 1; min-width: 0; } .cover-row input[type="file"] { margin-bottom: .4rem; } /* Closed by default — desktop included — and opened with the round .toolbar-toggle button below; RichEdit in app.js flips the .toolbar-open class on both the toolbar and . A fixed bar pinned near the top of the page, centered over the editor column, rather than an in-flow row — it floats above the text instead of pushing it down, and closing it never changes the page's layout. The mobile block further down turns it into a vertical sidebar on the right edge instead. */ .toolbar { display: none; position: fixed; top: 7.65rem; left: 50%; transform: translateX(-50%); width: min(70rem, calc(100vw - 2.5rem)); max-height: 70vh; overflow-y: auto; flex-wrap: wrap; gap: .3rem; padding: .5rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); align-items: center; box-shadow: var(--shadow); z-index: 55; } .toolbar.toolbar-open { display: flex; } .toolbar button { font: inherit; font-size: .82rem; padding: .35rem .55rem; border-radius: 6px; border: 1px solid transparent; background: transparent; color: var(--muted); cursor: pointer; } .toolbar button:hover { background: var(--surface); color: var(--text); border-color: var(--line); } .toolbar select { width: auto; font-size: .82rem; padding: .3rem .4rem; } .toolbar .sep { width: 1px; height: 18px; background: var(--line); margin: 0 .25rem; } .toolbar .grow { margin-left: auto; } .rich-float-btn { position: fixed; z-index: 60; width: 28px; height: 22px; display: flex; align-items: center; justify-content: center; font-size: .7rem; line-height: 1; border-radius: 6px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); cursor: pointer; box-shadow: var(--shadow); } .rich-float-btn:hover { color: var(--text); background: var(--surface-2); } .rich-float-btn[hidden] { display: none; } /* The toolbar's open/close switch — see the RichEdit toggle wiring in app.js. Same button and behaviour on desktop and mobile; only its position changes, matching the toolbar's own shape at each width. */ .toolbar-toggle { display: flex; position: fixed; top: 4.75rem; right: 1.5rem; z-index: 56; width: 2.6rem; height: 2.6rem; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid var(--line); background: var(--accent); color: var(--on-accent); font-size: 1.05rem; cursor: pointer; box-shadow: var(--shadow); } .toolbar-toggle.is-open { background: var(--surface); color: var(--muted); } .toolbar .hint { margin: 0; } /* Distraction-free writing: everything marked data-focus-hide disappears (site header/footer, chapter metadata, author's note, the destructive action-bar buttons), leaving the title, the text itself, and the toolbar. The toggle button lives outside anything it hides, so it is always there to turn focus mode back off. */ .focus-toggle { display: flex; position: fixed; top: 4.75rem; left: 1.5rem; z-index: 56; width: 2.6rem; height: 2.6rem; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); font-size: 1.05rem; cursor: pointer; box-shadow: var(--shadow); } .focus-toggle[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); } body.focus-mode [data-focus-hide] { display: none !important; } body.focus-mode .editor-shell { max-width: 48rem; margin: 4.5rem auto 2rem; } body.focus-mode .panes textarea, body.focus-mode .wysiwyg-pane .prose { min-height: 74vh; } /* The toolbar is a fixed overlay now (open or closed, at any width), never part of the document flow above this box, so .panes always keeps its own full border on every side rather than assuming something else sits directly above it. */ .panes { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); } .panes textarea { font-family: var(--mono); font-size: 15px; line-height: 1.65; border: 0; border-right: 1px solid var(--line); border-radius: 0; padding: 1.5rem 1.25rem; min-height: 55vh; background: transparent; tab-size: 2; } /* Same focus treatment as the Basic pane below: a ring at the box's own edge, never at the text, since the padding above already sits between them — switching Advanced/Basic shouldn't feel like a different editor. */ .panes textarea:focus { outline: 0; box-shadow: inset 0 0 0 2px var(--accent-bg); } .preview-pane { padding: 1.5rem 1.25rem; overflow-y: auto; max-height: 80vh; background: var(--bg); } .preview-pane .prose { font-size: 1.02rem; line-height: 1.7; max-width: none; } .mode-switch { display: flex; align-items: baseline; gap: .9rem; flex-wrap: wrap; margin: .25rem 0 .6rem; } .mode-switch .hint { margin: 0; } .link-rows { display: flex; flex-direction: column; gap: .5rem; margin-bottom: .6rem; } .link-row { display: flex; gap: .5rem; align-items: center; } .link-row select { width: auto; flex: none; } .link-row input { flex: 1; min-width: 0; } .profile-links { display: flex; flex-wrap: wrap; gap: .5rem; margin: .75rem 0; } .profile-links a.tag { text-decoration: none; } .profile-links a.tag.tag-accent:hover { text-decoration: underline; } .wysiwyg-pane { display: none; overflow-y: auto; max-height: 80vh; background: var(--bg); } /* The padding lives on .prose itself, not the pane around it, so the focus ring below (drawn at .prose's own edge) always has that padding between it and the first/last letter — it can never end up hugging the text. */ .wysiwyg-pane .prose { padding: 1.5rem 1.25rem; font-size: 1.02rem; line-height: 1.7; max-width: none; min-height: 55vh; outline: 0; } .wysiwyg-pane .prose:focus { box-shadow: inset 0 0 0 2px var(--accent-bg); border-radius: var(--radius); } .panes[data-view="wysiwyg"] { grid-template-columns: 1fr; } .panes[data-view="wysiwyg"] textarea, .panes[data-view="wysiwyg"] .preview-pane { display: none; } .panes[data-view="wysiwyg"] .wysiwyg-pane { display: block; } .action-bar { position: sticky; bottom: 0; margin-top: 1rem; padding: .75rem 0 env(safe-area-inset-bottom); background: linear-gradient(to top, var(--bg) 70%, transparent); display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; z-index: 10; } .status { font-size: .8rem; color: var(--faint); margin-right: auto; } .status.ok { color: var(--accent); } .status.err { color: var(--danger); } .manage-list { list-style: none; padding: 0; margin: 0; } .manage-row { display: flex; align-items: center; gap: .75rem; border-top: 1px solid var(--line-soft); padding: .4rem 0; } .manage-row:last-child { border-bottom: 1px solid var(--line-soft); } .manage-main { flex: 1; display: flex; flex-direction: column; gap: .3rem; padding: .6rem .4rem; text-decoration: none; border-radius: 8px; min-width: 0; } .manage-main:hover { background: var(--surface-2); } .manage-title { font-weight: 600; font-size: .98rem; } .manage-actions { display: flex; gap: .35rem; flex: none; } /* ------------------------------------------------------------------ auth */ .auth-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 1.75rem; box-shadow: var(--shadow); margin-top: 2rem; } .auth-card h1 { font-family: var(--serif); font-size: 1.6rem; margin: 0 0 .3rem; font-weight: 600; } .auth-tabs { margin: 1.5rem 0; } .auth-foot { margin-top: 1rem; text-align: center; } /* ------------------------------------------------------------------ profile */ .profile-banner { height: 180px; border-radius: var(--radius); background: var(--surface-2); object-fit: cover; width: 100%; margin-bottom: -3.5rem; display: block; } .profile-head { display: flex; gap: 1.25rem; align-items: flex-end; margin-bottom: 1.5rem; flex-wrap: wrap; } .profile-avatar { width: 96px; height: 96px; border-radius: 999px; border: 3px solid var(--bg); object-fit: cover; background: var(--surface-2); flex: none; font-size: 2.4rem; } .profile-id { flex: 1 1 14rem; min-width: 0; } .profile-id h1 { font-family: var(--serif); font-size: 1.9rem; margin: 0; font-weight: 600; line-height: 1.15; } .profile-id .handle { color: var(--faint); font-size: .9rem; } .profile-actions { display: flex; gap: .5rem; flex-wrap: wrap; } .profile-bio { max-width: 44rem; margin-bottom: 2rem; } .profile-tabs { display: flex; gap: .3rem; border-bottom: 1px solid var(--line); margin-bottom: 1.75rem; flex-wrap: wrap; } .profile-tabs button { font: inherit; font-size: .9rem; padding: .6rem .8rem; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--muted); cursor: pointer; margin-bottom: -1px; } .profile-tabs button[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); } .oc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 1rem; } .oc-card { border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--surface); overflow: hidden; text-decoration: none; display: block; transition: border-color .12s, transform .12s; } .oc-card:hover { border-color: var(--accent); transform: translateY(-1px); } .oc-portrait { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: var(--surface-2); display: block; } .oc-card-body { padding: .75rem .85rem 1rem; } .oc-name { font-family: var(--serif); font-size: 1.08rem; font-weight: 600; display: block; } .oc-tagline { font-size: .84rem; color: var(--muted); display: block; margin-top: .2rem; } .oc-head { display: flex; gap: 1.75rem; flex-wrap: wrap; margin-bottom: 2rem; } .oc-head img, .oc-head .cover-blank { width: 220px; aspect-ratio: 3 / 4; border-radius: var(--radius); object-fit: cover; flex: none; } .oc-head-body { flex: 1 1 18rem; min-width: 0; } .oc-head-body h1 { font-family: var(--serif); font-size: 2rem; margin: 0 0 .3rem; font-weight: 600; } .swatches { display: flex; gap: .5rem; flex-wrap: wrap; } .swatch { width: 34px; height: 34px; border-radius: 999px; border: 2px solid var(--line); cursor: pointer; padding: 0; } .swatch[aria-pressed="true"] { border-color: var(--text); transform: scale(1.08); } /* theme picker */ .theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: .6rem; } .theme-card { font: inherit; text-align: left; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: .7rem; cursor: pointer; display: flex; flex-direction: column; gap: .1rem; } .theme-card:hover { border-color: var(--accent); } .theme-card[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); } .theme-name { font-weight: 600; font-size: .9rem; } .theme-note { font-size: .74rem; color: var(--faint); } .theme-swatch { display: flex; gap: 3px; margin-bottom: .5rem; } .theme-swatch i { width: 100%; height: 26px; border-radius: 4px; border: 1px solid rgb(0 0 0 / .08); } .theme-swatch.theme-default i:nth-child(1) { background: #fbf7fa; } .theme-swatch.theme-default i:nth-child(2) { background: #f4eef3; } .theme-swatch.theme-default i:nth-child(3) { background: #96628f; } .theme-swatch.theme-book i:nth-child(1) { background: #f3ebdd; } .theme-swatch.theme-book i:nth-child(2) { background: #e9dfcc; } .theme-swatch.theme-book i:nth-child(3) { background: #8a5320; } .theme-swatch.theme-nature i:nth-child(1) { background: #f7f5ec; } .theme-swatch.theme-nature i:nth-child(2) { background: #ebe8da; } .theme-swatch.theme-nature i:nth-child(3) { background: #4f6d2c; } .theme-swatch.theme-terminal i:nth-child(1) { background: #0a0e0a; } .theme-swatch.theme-terminal i:nth-child(2) { background: #151d14; } .theme-swatch.theme-terminal i:nth-child(3) { background: #4ade80; } .theme-swatch.theme-evil i:nth-child(1) { background: #0b0708; } .theme-swatch.theme-evil i:nth-child(2) { background: #1b1215; } .theme-swatch.theme-evil i:nth-child(3) { background: #e24b4b; } .notif-list { list-style: none; padding: 0; margin: 0; } .notif-list li { border-top: 1px solid var(--line-soft); } .notif-list li:last-child { border-bottom: 1px solid var(--line-soft); } .notif-list a { display: flex; gap: .7rem; align-items: center; padding: .85rem .4rem; text-decoration: none; border-radius: 8px; } .notif-list a:hover { background: var(--surface-2); } .notif-list .unread { background: var(--accent-bg); } .notif-text { font-size: .92rem; } .notif-text b { font-weight: 600; } dialog { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--text); padding: 1.5rem; max-width: 32rem; width: calc(100% - 2rem); box-shadow: var(--shadow); } dialog::backdrop { background: rgba(20, 19, 17, .45); } dialog h2 { font-family: var(--serif); margin: 0 0 .35rem; font-size: 1.3rem; } dialog .dialog-actions { display: flex; gap: .6rem; justify-content: flex-end; margin-top: 1.25rem; flex-wrap: wrap; } /* ================================================================== element palette Everything below is what writers can reach through the insert menu. The sanitiser allows these class names and nothing else, so this stylesheet is the only thing that decides what they do. Note the containment on the overlay components: they establish their own stacking context and clip their children, so nothing a writer inserts can cover the site's own interface. */ .prose .chapter-head { text-align: center; margin: 0 0 2.5rem; } .prose .chapter-head .num { display: block; font-family: var(--sans); font-size: .72em; letter-spacing: .3em; text-transform: uppercase; color: var(--faint); margin-bottom: .5em; } .prose .chapter-head .title { display: block; font-size: 1.7em; line-height: 1.2; font-weight: 600; } .prose .chapter-head .subtitle { display: block; font-size: .95em; color: var(--muted); font-style: italic; margin-top: .4em; } .prose .scene-break { text-align: center; margin: 2.5em 0; color: var(--faint); letter-spacing: .8em; text-indent: .8em; font-size: .9em; } .prose .ornament { margin: 2.5em auto; width: 40%; border-top: 1px solid var(--line); } .prose .spacer { height: 2.5em; } .prose .columns { columns: 2; column-gap: 2rem; } .prose .columns > * { margin-top: 0; break-inside: avoid; } .prose .columns > * + * { margin-top: 1em; } .prose .card { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.25rem; background: var(--surface); } .prose .card > * { margin-top: 0; } .prose .card > * + * { margin-top: .8em; } .prose .epigraph { font-style: italic; color: var(--muted); max-width: 28em; margin-left: auto; margin-right: auto; text-align: center; font-size: .96em; } .prose .epigraph cite { display: block; font-style: normal; font-size: .85em; margin-top: .6em; color: var(--faint); } .prose .dropcap::first-letter { float: left; font-size: 3.4em; line-height: .82; padding: .06em .09em 0 0; color: var(--accent); font-weight: 600; } .prose .pull-quote { font-family: var(--sans); font-size: 1.22em; line-height: 1.4; font-style: normal; color: var(--text); border-left: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 1rem 0; text-align: center; } .prose .note { display: block; font-family: var(--sans); font-size: .88em; line-height: 1.55; color: var(--muted); background: var(--surface-2); border-left: 2px solid var(--line); padding: .8rem 1rem; border-radius: 0 8px 8px 0; } .prose .callout { font-family: var(--sans); font-size: .95em; background: var(--accent-bg); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius: var(--radius); padding: 1rem 1.15rem; } .prose .callout > * { margin-top: 0; } .prose .verse { white-space: pre-wrap; font-style: italic; padding-left: 1.5em; line-height: 1.85; } /* An echoed line, repeated and receding — each repeat a touch smaller and fainter than the last, like a thought that won't stop replaying. */ .prose .echo-text { display: flex; flex-direction: column; align-items: center; gap: .15em; text-align: center; margin: 1.6em 0; } .prose .echo-text span { display: block; } .prose .echo-text span:nth-child(1) { opacity: 1; } .prose .echo-text span:nth-child(2) { opacity: .62; font-size: .96em; letter-spacing: .01em; } .prose .echo-text span:nth-child(3) { opacity: .36; font-size: .92em; letter-spacing: .02em; } .prose .echo-text span:nth-child(4) { opacity: .18; font-size: .88em; letter-spacing: .03em; } .prose .echo-text span:nth-child(n+5) { opacity: .1; font-size: .85em; letter-spacing: .04em; } /* Two (or more) lines stacked in the same space via CSS grid — a surface thought with something else showing through underneath. The second layer drifts in and out of view on a slow loop; prefers-reduced-motion above already flattens every animation on the site, this one included. */ .prose .overlap-text { position: relative; display: grid; place-items: center; margin: 1.8em 0; text-align: center; } .prose .overlap-text .overlap-layer { grid-area: 1 / 1; margin: 0; width: 100%; } .prose .overlap-text .overlap-alt { color: var(--danger); transform: rotate(-2deg) scale(1.04); animation: overlap-fade 6s ease-in-out infinite; } @keyframes overlap-fade { 0%, 100% { opacity: .15; } 50% { opacity: .6; } } .prose .letter { font-family: var(--serif); background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 1.5rem 1.6rem; font-style: italic; } .prose .letter > * { margin-top: 0; } .prose .letter > * + * { margin-top: .9em; } .prose .letter-head { font-style: normal; font-weight: 600; } .prose .letter-sign { text-align: right; font-style: normal; color: var(--muted); } .prose .chat { font-family: var(--sans); font-size: .92em; display: flex; flex-direction: column; gap: .4em; } .prose .chat .msg { margin: 0; padding: .55em .85em; border-radius: 16px; max-width: 78%; line-height: 1.45; overflow-wrap: anywhere; } .prose .chat .from-them { background: var(--surface-2); border-bottom-left-radius: 5px; align-self: flex-start; } .prose .chat .from-me { background: var(--accent); color: var(--on-accent); border-bottom-right-radius: 5px; align-self: flex-end; } .prose .chat .msg-name { display: block; font-size: .74em; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); margin-bottom: .2em; } /* pictures — the overlay pieces are clipped and self-contained on purpose */ .prose .hero-band { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--radius); min-height: 12rem; display: flex; align-items: flex-end; background: var(--surface-2); } .prose .hero-band .hero-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; z-index: 0; margin: 0; } .prose .hero-band .hero-text { position: relative; z-index: 1; width: 100%; padding: 2.5rem 1.5rem 1.5rem; background: linear-gradient(to top, rgba(0, 0, 0, .78), rgba(0, 0, 0, .25) 60%, transparent); color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .6); } .prose .hero-band .hero-title { display: block; font-size: 1.8em; line-height: 1.15; font-weight: 600; } .prose .hero-band .hero-sub { display: block; font-size: .9em; opacity: .85; margin-top: .25em; font-family: var(--sans); } .prose .banner-img { overflow: hidden; border-radius: var(--radius); } .prose .banner-img img { width: 100%; max-height: 22rem; object-fit: cover; border-radius: 0; } .prose .polaroid { background: #fff; padding: .7rem .7rem 0; border-radius: 3px; box-shadow: var(--shadow); max-width: 17rem; margin-left: auto; margin-right: auto; rotate: -1.5deg; } .prose .polaroid img { border-radius: 0; } .prose .polaroid figcaption { font-family: var(--sans); font-size: .8rem; color: #55504a; text-align: center; padding: .7rem .2rem .9rem; } .prose .float-left, .prose .float-right { max-width: 45%; margin-top: .4em; } .prose .float-left { float: left; margin-right: 1.4rem; } .prose .float-right { float: right; margin-left: 1.4rem; } .prose .float-left figcaption, .prose .float-right figcaption { font-family: var(--sans); font-size: .78rem; color: var(--muted); margin-top: .4rem; } .prose figure { margin-left: 0; margin-right: 0; } .prose figcaption { font-family: var(--sans); font-size: .82rem; color: var(--muted); margin-top: .5rem; } .prose .gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: .6rem; } .prose .gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; } /* flourishes */ .prose .pill-row { display: flex; flex-wrap: wrap; gap: .4rem; } .prose .pill { font-family: var(--sans); font-size: .78rem; background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: 999px; padding: .2rem .7rem; color: var(--muted); } .prose .caps { font-variant-caps: small-caps; text-transform: lowercase; } .prose .tracked { letter-spacing: .18em; } .prose .text-lg { font-size: 1.6em; line-height: 1.25; } .prose .text-sm { font-size: .85em; } .prose .muted { color: var(--muted); } .prose .center { text-align: center; } .prose .small { font-size: .88em; color: var(--muted); } .prose .highlight { background: color-mix(in srgb, var(--accent) 22%, transparent); border-radius: 3px; padding: 0 .15em; } .prose .tint-1 { color: var(--tint-1); } .prose .tint-2 { color: var(--tint-2); } .prose .tint-3 { color: var(--tint-3); } .prose .tint-4 { color: var(--tint-4); } .prose .tint-5 { color: var(--tint-5); } .prose .tint-6 { color: var(--tint-6); } /* clear floats at block boundaries so wrapped images stay inside their section */ .prose h2, .prose h3, .prose .scene-break, .prose .chapter-head { clear: both; } /* ------------------------------------------------------------------ responsive */ @media (max-width: 900px) { .editor-columns { grid-template-columns: 1fr; gap: 2rem; } } @media (max-width: 820px) { .wrap { padding: 1.75rem 1.1rem 4.5rem; } .editor-shell { padding: 1.25rem 1.1rem 1.5rem; } .meta-grid { grid-template-columns: 1fr; } .panes { grid-template-columns: 1fr; } /* The sidebar toolbar below floats over the right edge when open — margin-right only appears then, so closing it gives the full width back instead of leaving a permanent empty gutter. */ body.toolbar-open .panes { margin-right: 4.2rem; } .panes textarea { border-right: 0; min-height: 50vh; padding: 1.25rem 1rem; } .preview-pane { max-height: none; min-height: 50vh; padding: 1.25rem 1rem; } .wysiwyg-pane .prose { padding: 1.25rem 1rem; } .panes[data-view="write"] .preview-pane { display: none; } .panes[data-view="preview"] textarea { display: none; } .tabs { margin-bottom: -1px; } /* On a narrow screen a horizontal bar this wide would wrap into several rows and eat even more vertical space than before, so mobile gets its own shape here: a vertical strip pinned to the right edge instead, scrollable if it runs taller than the screen. Same toggle, same open/close behaviour, just a column instead of a row. */ .toolbar-toggle { top: 4.25rem; right: .6rem; } .focus-toggle { top: 4.25rem; left: .6rem; width: 2.3rem; height: 2.3rem; font-size: .95rem; } body.focus-mode .editor-shell { margin-top: 4rem; } .toolbar { top: 7.15rem; left: auto; right: .6rem; bottom: 5rem; transform: none; width: 3.4rem; max-height: none; flex-direction: column; flex-wrap: nowrap; padding: .5rem .3rem; } .toolbar .sep { width: 100%; height: 1px; margin: .1rem 0; } .toolbar .grow, .toolbar .hint { display: none; } .toolbar select { width: 100%; } .toolbar button { width: 100%; padding: .4rem .2rem; font-size: .72rem; line-height: 1.15; white-space: normal; word-break: break-word; } .comment-panel { top: auto; left: 0; right: 0; width: 100%; max-height: 78vh; border-left: 0; border-top: 1px solid var(--line); border-radius: var(--radius) var(--radius) 0 0; padding-bottom: env(safe-area-inset-bottom); } .story-cover { width: 120px; height: 172px; } .profile-banner { height: 130px; } .prose .columns { columns: 1; } .prose .float-left, .prose .float-right { float: none; max-width: 100%; margin-left: 0; margin-right: 0; } .prose .chat .msg { max-width: 88%; } .action-bar .status { width: 100%; order: -1; margin: 0 0 .25rem; } .progress-bar { top: 54px; } .prose .pov-divider { letter-spacing: .12em; gap: .6em; font-size: .76em; } .prose .diary-page { padding: 1rem; } .prose .qa { font-size: .92em; } .prose .quote-portrait { gap: .7rem; } .prose .quote-portrait img { width: 48px; height: 48px; } .prose .redacted { display: inline-block; padding: .1em .3em; } } @media (max-width: 420px) { .brand { font-size: 1.15rem; } .nav a { padding: .45rem .5rem; font-size: .85rem; } .story-grid { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation-duration: .001ms !important; transition-duration: .001ms !important; } } @media print { .site-header, .site-footer, .reader-foot, .comment-panel, .panel-scrim, .progress-bar, .action-bar { display: none !important; } body { background: #fff; color: #000; } .sentence.has-comments, .comment-pin { background: none !important; box-shadow: none !important; } .comment-pin { display: none; } } /* ================================================================== motion Each theme moves differently: pastel drifts, Book settles like a page, Nature grows, Terminal snaps in steps, Evil flickers. All of it routes through two custom properties so the accessibility switches below can disable the lot from one place. */ :root { --anim-enter: fade-up; --anim-dur: .34s; --anim-ease: cubic-bezier(.2, .7, .3, 1); --hover-lift: -1px; } :root[data-theme="book"] { --anim-enter: page-settle; --anim-dur: .5s; --anim-ease: cubic-bezier(.22, .61, .36, 1); } :root[data-theme="nature"] { --anim-enter: grow-in; --anim-dur: .55s; --anim-ease: cubic-bezier(.34, 1.3, .64, 1); } :root[data-theme="terminal"] { --anim-enter: term-in; --anim-dur: .16s; --anim-ease: steps(5, end); --hover-lift: 0px; } :root[data-theme="evil"] { --anim-enter: flicker-in; --anim-dur: .6s; --anim-ease: ease-out; } @keyframes fade-up { from { opacity: 0; transform: translateY(10px); } } @keyframes page-settle { from { opacity: 0; transform: translateY(-6px) rotate(-.4deg); } } @keyframes grow-in { from { opacity: 0; transform: scale(.96) translateY(6px); } } @keyframes term-in { from { opacity: 0; transform: translateX(-6px); } } @keyframes flicker-in { 0% { opacity: 0; } 30% { opacity: .7; } 40% { opacity: .2; } 60% { opacity: .9; } 70% { opacity: .45; } 100% { opacity: 1; } } @keyframes panel-in { from { transform: translateX(16px); opacity: 0; } } @keyframes sheet-in { from { transform: translateY(18px); opacity: 0; } } .hero, .page-head, .auth-card, .article-head, .story-head, .oc-head, .empty, .reader-crumbs { animation: var(--anim-enter) var(--anim-dur) var(--anim-ease) both; } /* A short stagger reads as one movement rather than eight separate ones. */ .story-grid > *, .oc-grid > *, .chapter-list > li, .manage-list > li { animation: var(--anim-enter) var(--anim-dur) var(--anim-ease) both; } .story-grid > :nth-child(1), .oc-grid > :nth-child(1) { animation-delay: 0ms; } .story-grid > :nth-child(2), .oc-grid > :nth-child(2) { animation-delay: 40ms; } .story-grid > :nth-child(3), .oc-grid > :nth-child(3) { animation-delay: 80ms; } .story-grid > :nth-child(4), .oc-grid > :nth-child(4) { animation-delay: 120ms; } .story-grid > :nth-child(5), .oc-grid > :nth-child(5) { animation-delay: 160ms; } .story-grid > :nth-child(n+6), .oc-grid > :nth-child(n+6) { animation-delay: 200ms; } .comment-panel { animation: panel-in .26s var(--anim-ease) both; } .story-card:hover, .oc-card:hover { transform: translateY(var(--hover-lift)); } .btn:active { transform: translateY(1px); } /* Terminal gets a blinking caret after the wordmark; nothing else blinks. */ :root[data-theme="terminal"] .brand::after { content: "_"; color: var(--accent); animation: caret 1.1s steps(2, end) infinite; } @keyframes caret { 50% { opacity: 0; } } @media (max-width: 820px) { .comment-panel { animation: sheet-in .24s var(--anim-ease) both; } } /* ================================================================== accessibility Reader-controlled, stored per device, and applied before first paint by assets/a11y.js. These rules deliberately sit last in the file and use !important where they must beat a trusted author's own stylesheet. */ /* ---- reduced motion ---- */ @media (prefers-reduced-motion: reduce) { :root:not([data-motion="full"]) *, :root:not([data-motion="full"]) *::before, :root:not([data-motion="full"]) *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } :root[data-motion="reduced"] *, :root[data-motion="reduced"] *::before, :root[data-motion="reduced"] *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } :root[data-motion="reduced"] { --hover-lift: 0px; } :root[data-motion="reduced"] .btn:active, :root[data-motion="reduced"] .story-card:hover, :root[data-motion="reduced"] .oc-card:hover { transform: none; } /* ---- seizure safety ---- A trusted author may write their own @keyframes inside their page. This is the override that stops it: animation is forced off everywhere, including inside their scoped container, and it cannot be out-specified. */ :root[data-safe="on"] *, :root[data-safe="on"] *::before, :root[data-safe="on"] *::after { animation: none !important; transition: none !important; } :root[data-safe="on"] .prose img, :root[data-safe="on"] [class*="ugc-"] img { /* Stops animated GIFs and APNGs from looping. */ animation-play-state: paused !important; } :root[data-safe="on"] video, :root[data-safe="on"] .prose video { display: none !important; } :root[data-safe="on"] { --hover-lift: 0px; } /* ---- colour vision ---- These are not simulations — they re-pick the palette so that meaning carried by colour survives. Each block also targets `body`, because an author's accent is set directly on that element and a variable set on the element itself beats one inherited from :root no matter how specific the selector. Red-green palettes come from the Okabe-Ito set, which is built to stay separable under protanopia and deuteranopia. Tritanopia moves to a red/teal axis instead, and achromatopsia abandons hue for spaced lightness. */ :root[data-vision="protanopia"], :root[data-vision="protanopia"] body, :root[data-vision="deuteranopia"], :root[data-vision="deuteranopia"] body { --accent: light-dark(#0072b2, #56b4e9); --accent-bg: light-dark(#e3f0f8, #10222e); --on-accent: light-dark(#ffffff, #05131c); --danger: light-dark(#d55e00, #ff9e5e); --warn: light-dark(#8a6d00, #f0e442); --tint-1: light-dark(#0072b2, #56b4e9); --tint-2: light-dark(#d55e00, #ff9e5e); --tint-3: light-dark(#005f56, #009e73); --tint-4: light-dark(#8a6d00, #f0e442); --tint-5: light-dark(#7a4f96, #cc79a7); --tint-6: light-dark(#4d4d4d, #b0b0b0); } :root[data-vision="tritanopia"], :root[data-vision="tritanopia"] body { --accent: light-dark(#b3116b, #f48fb1); --accent-bg: light-dark(#fae5ef, #2b101c); --on-accent: light-dark(#ffffff, #1c0810); --danger: light-dark(#c62828, #ef9a9a); --warn: light-dark(#00695c, #4db6ac); --tint-1: light-dark(#b3116b, #f48fb1); --tint-2: light-dark(#00695c, #4db6ac); --tint-3: light-dark(#c62828, #ef9a9a); --tint-4: light-dark(#5d4037, #bcaaa4); --tint-5: light-dark(#37474f, #b0bec5); --tint-6: light-dark(#6a1b9a, #ce93d8); } /* No usable hue discrimination: separate everything by lightness, and lean on borders and underlines so colour is never the only signal. */ :root[data-vision="achromatopsia"], :root[data-vision="achromatopsia"] body { --accent: light-dark(#2b2b2b, #e0e0e0); --accent-bg: light-dark(#e8e8e8, #2a2a2a); --on-accent: light-dark(#ffffff, #101010); --danger: light-dark(#111111, #ffffff); --warn: light-dark(#555555, #b5b5b5); --tint-1: light-dark(#111111, #f5f5f5); --tint-2: light-dark(#333333, #d0d0d0); --tint-3: light-dark(#555555, #ababab); --tint-4: light-dark(#6f6f6f, #8f8f8f); --tint-5: light-dark(#8a8a8a, #6f6f6f); --tint-6: light-dark(#a3a3a3, #545454); } :root[data-vision="achromatopsia"] .prose a, :root[data-vision="achromatopsia"] .post-meta .tag { text-decoration: underline; text-underline-offset: .18em; } :root[data-vision="achromatopsia"] .tag, :root[data-vision="achromatopsia"] .btn { border-color: var(--text); } /* Rating badges carry their meaning in the word as well as the colour, but when hue is unavailable the outline weight helps them separate at a glance. */ :root[data-vision="achromatopsia"] .rating-explicit { border-width: 2px; font-weight: 700; } :root[data-vision="achromatopsia"] .rating-questionable { border-style: dashed; } /* ---- accessibility page ---- */ .narrow-wide { max-width: 46rem; } .a11y-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: .6rem; } .a11y-card { font: inherit; text-align: left; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: .8rem; cursor: pointer; display: flex; flex-direction: column; gap: .15rem; } .a11y-card:hover { border-color: var(--accent); } .a11y-card[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); } .a11y-name { font-weight: 600; font-size: .92rem; } .a11y-note { font-size: .76rem; color: var(--faint); } .a11y-swatch { display: flex; gap: 2px; margin-top: .55rem; } .a11y-swatch i { width: 100%; height: 14px; border-radius: 3px; border: 1px solid rgb(0 0 0 / .1); } .vision-none i:nth-child(1) { background: #9a4b28; } .vision-none i:nth-child(2) { background: #33506b; } .vision-none i:nth-child(3) { background: #3f6b58; } .vision-none i:nth-child(4) { background: #6d3f63; } .vision-none i:nth-child(5) { background: #2c6a68; } .vision-none i:nth-child(6) { background: #a33a2e; } .vision-protanopia i:nth-child(1), .vision-deuteranopia i:nth-child(1) { background: #0072b2; } .vision-protanopia i:nth-child(2), .vision-deuteranopia i:nth-child(2) { background: #d55e00; } .vision-protanopia i:nth-child(3), .vision-deuteranopia i:nth-child(3) { background: #005f56; } .vision-protanopia i:nth-child(4), .vision-deuteranopia i:nth-child(4) { background: #8a6d00; } .vision-protanopia i:nth-child(5), .vision-deuteranopia i:nth-child(5) { background: #7a4f96; } .vision-protanopia i:nth-child(6), .vision-deuteranopia i:nth-child(6) { background: #4d4d4d; } .vision-tritanopia i:nth-child(1) { background: #b3116b; } .vision-tritanopia i:nth-child(2) { background: #00695c; } .vision-tritanopia i:nth-child(3) { background: #c62828; } .vision-tritanopia i:nth-child(4) { background: #5d4037; } .vision-tritanopia i:nth-child(5) { background: #37474f; } .vision-tritanopia i:nth-child(6) { background: #6a1b9a; } .vision-achromatopsia i:nth-child(1) { background: #111; } .vision-achromatopsia i:nth-child(2) { background: #333; } .vision-achromatopsia i:nth-child(3) { background: #555; } .vision-achromatopsia i:nth-child(4) { background: #6f6f6f; } .vision-achromatopsia i:nth-child(5) { background: #8a8a8a; } .vision-achromatopsia i:nth-child(6) { background: #a3a3a3; } .big-check { align-items: flex-start; gap: .7rem; } .big-check input { margin-top: .25rem; } .big-check b { font-size: .95rem; } .site-footer a { color: var(--muted); } .site-footer a:hover { color: var(--accent); } /* ---- crop dialog ---- */ .crop-dialog { max-width: 34rem; } .crop-dialog h2 { margin-bottom: .2rem; } .crop-stage { margin: 1rem 0; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; max-height: 58vh; } .crop-stage img { display: block; max-width: 100%; } .crop-stage.round .cropper-view-box, .crop-stage.round .cropper-face { border-radius: 50%; } .crop-tools { display: flex; gap: .4rem; flex-wrap: wrap; } /* ---- collaborator invite ---- */ .invite-row { display: flex; gap: .5rem; margin-top: .75rem; flex-wrap: wrap; } .invite-row input { flex: 1 1 10rem; } .invite-row select { flex: 0 1 10rem; width: auto; } .credit-line { color: var(--muted); font-size: .9rem; margin: 0 0 .6rem; } .credit-line a { color: var(--accent); } .version-line { color: var(--faint); font-size: .84rem; margin: .4rem 0 0; } .version-line a { color: var(--accent); } /* ---- account danger zone ---- */ .danger-zone { max-width: 42rem; } .danger-card { display: flex; gap: 1rem; align-items: center; justify-content: space-between; border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.15rem; margin-bottom: .8rem; flex-wrap: wrap; } .danger-card .hint { margin-top: .25rem; max-width: 48ch; } /* ---- share ---- */ .share-dialog { max-width: 26rem; } .share-targets { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; } /* ---- threaded comments ---- */ .thread { border-bottom: 1px solid var(--line-soft); padding-bottom: .4rem; } .thread:last-child { border-bottom: 0; } .thread .comment { border-bottom: 0; } .replies { margin-left: .9rem; padding-left: .9rem; border-left: 2px solid var(--line); } .comment.is-reply { padding: .6rem 0; } /* ---- the story's overflow menu ---- */ .story-menu { position: relative; } .story-menu-trigger { font: inherit; line-height: 1; border: 1px solid var(--line); background: var(--surface); color: var(--muted); border-radius: 8px; padding: .55rem .7rem; cursor: pointer; } .story-menu-trigger:hover { background: var(--surface-2); color: var(--text); } .story-menu-panel { position: absolute; right: 0; top: calc(100% + 6px); min-width: 15rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: .35rem; z-index: 60; } .story-menu-panel button { display: block; width: 100%; text-align: left; font: inherit; font-size: .88rem; padding: .55rem .6rem; border: 0; border-radius: 7px; background: none; color: var(--text); cursor: pointer; } .story-menu-panel button:hover { background: var(--surface-2); } .story-menu-panel button.danger { color: var(--danger); } .story-menu-panel .menu-sep { height: 1px; background: var(--line-soft); margin: .3rem 0; } /* ---- reading controls ---- */ .reading-pop { position: fixed; right: 1rem; bottom: 1rem; z-index: 70; } .reading-pop-btn { font-family: var(--serif); font-size: 1.05rem; line-height: 1; border: 1px solid var(--line); background: var(--surface); color: var(--text); border-radius: 999px; width: 46px; height: 46px; cursor: pointer; box-shadow: var(--shadow); } .reading-pop-panel { position: absolute; right: 0; bottom: calc(100% + .5rem); width: min(19rem, calc(100vw - 2rem)); max-height: min(28rem, calc(100vh - 6rem)); overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1rem; } .reading-pop-panel .field { margin-bottom: .75rem; } .reading-pop-panel .field:last-of-type { margin-bottom: 0; } .reading-pop-panel .seg { width: 100%; } .reading-pop-panel .seg button { flex: 1; padding: .45rem .3rem; font-size: .78rem; } @media print { .reading-pop { display: none; } } /* ---- mature content ---- */ .cover-veil { position: relative; display: inline-block; } .cover-veil > img { filter: blur(14px); } .cover-veil::after { content: "18+"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--sans); font-size: .72rem; font-weight: 700; letter-spacing: .06em; color: var(--on-accent); background: color-mix(in srgb, var(--danger) 70%, transparent); border-radius: 6px; } .gate { border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent); background: color-mix(in srgb, var(--danger) 8%, transparent); border-radius: var(--radius); padding: 1.5rem; max-width: 34rem; margin: 2rem auto; text-align: center; } .gate h2 { font-family: var(--serif); margin: 0 0 .5rem; } .gate p { color: var(--muted); margin: 0 0 1.2rem; } .gate .btn + .btn { margin-left: .5rem; } /* ---- series and shelves ---- */ .series-nav { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; border: 1px solid var(--line); border-radius: var(--radius); padding: .7rem .9rem; margin: 1.5rem 0; font-size: .9rem; background: var(--surface); } .series-nav .series-name { font-weight: 600; } .series-nav .spacer { margin-left: auto; } .shelf-card { display: block; border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--surface); padding: 1rem 1.15rem; text-decoration: none; transition: border-color .12s; } .shelf-card:hover { border-color: var(--accent); } .shelf-title { font-family: var(--serif); font-size: 1.1rem; font-weight: 600; display: block; } .shelf-desc { font-size: .88rem; color: var(--muted); display: block; margin-top: .25rem; } .shelf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .8rem; } /* ---- comment hearts ---- */ .heart-btn { border: 0; background: none; padding: 0; font: inherit; font-size: .78rem; color: var(--faint); cursor: pointer; display: inline-flex; align-items: center; gap: .2rem; } .heart-btn:hover { color: var(--accent); } .heart-btn.on { color: var(--accent); font-weight: 600; } /* ---- version history ---- */ .version-list { list-style: none; padding: 0; margin: 0; } .version-list li { border-top: 1px solid var(--line-soft); padding: .7rem 0; display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; } .version-list li:last-child { border-bottom: 1px solid var(--line-soft); } .version-when { font-size: .88rem; } .version-list .spacer { margin-left: auto; } .toc-list a { flex: 1; display: flex; gap: .75rem; align-items: baseline; min-width: 0; color: var(--text); text-decoration: none; } .toc-list a:hover .version-when { color: var(--accent); } .toc-list a span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .toc-list li.toc-current { background: var(--accent-bg); margin: 0 -1rem; padding-left: 1rem; padding-right: 1rem; border-radius: var(--radius); } /* Ad slots (assets/ads.js). The label stays even once the unit fills in, so it always reads as an ad rather than as the site's own content. The element sits in the page whether or not ads are on; Ads.mount() removes it outright when they are off, so an ad-free site never carries this box, the label, or the gap. */ .ad-slot { position: relative; max-width: var(--reading-measure, 36rem); margin: 2rem auto; padding: .6rem; border: 1px dashed var(--line); border-radius: var(--radius); text-align: center; overflow: hidden; } .ad-slot-label { display: block; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); margin-bottom: .5rem; } .ad-slot.ad-slot-wide { max-width: none; } .ad-slot-close { position: absolute; top: .4rem; right: .4rem; width: 1.6rem; height: 1.6rem; line-height: 1; border: 1px solid var(--line); border-radius: 50%; background: var(--bg); color: var(--faint); font-size: .75rem; cursor: pointer; } .ad-slot-close:hover { color: var(--text); border-color: var(--text); } /* A small, dismissable prompt shown after a reader closes any one ad slot — never on its own, never more than once per page. */ .ad-off-prompt-host { position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%); z-index: 200; width: min(24rem, calc(100vw - 2rem)); } .ad-off-prompt { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: .85rem .95rem; font-size: .86rem; animation: rise .2s ease-out; } .ad-off-prompt p { margin: 0 0 .6rem; } .ad-off-prompt-actions { display: flex; justify-content: flex-end; gap: .5rem; } .ad-off-prompt.leaving { opacity: 0; transition: opacity .25s; } /* ---- documents and artefacts ---- */ .prose details { border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem 1rem; background: var(--surface); } .prose details > * { margin-top: 0; } .prose details[open] > summary { margin-bottom: .8em; } .prose summary { cursor: pointer; font-family: var(--sans); font-size: .92em; font-weight: 600; } .prose .stat-block { display: grid; grid-template-columns: auto 1fr; gap: .35em 1em; font-family: var(--sans); font-size: .92em; } .prose .stat-block dt { color: var(--faint); text-transform: uppercase; letter-spacing: .06em; font-size: .82em; align-self: baseline; } .prose .stat-block dd { margin: 0; } .prose .dateline { font-family: var(--sans); font-size: .8em; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); text-align: center; } .prose .scene-heading { font-family: var(--mono); font-size: .9em; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; } .prose .clipping { font-family: var(--serif); background: light-dark(#f2efe6, #201d17); border: 1px solid var(--line); border-radius: 2px; padding: 1rem 1.2rem; box-shadow: 1px 1px 0 var(--line); filter: saturate(.6); } .prose .clipping > * { margin-top: 0; } .prose .clipping > * + * { margin-top: .6em; } .prose .clipping-head { font-family: var(--sans); font-weight: 700; letter-spacing: .12em; font-size: .74em; text-align: center; border-bottom: 2px solid currentColor; padding-bottom: .4em; } .prose .sticky-note { background: light-dark(#fdf4b8, #4a441f); color: light-dark(#3a3520, #f2ecc4); font-family: var(--sans); font-size: .95em; padding: 1.1rem 1.2rem; max-width: 17rem; rotate: -1deg; box-shadow: var(--shadow); border-radius: 2px; } .prose .sticky-note > * { margin-top: 0; } .prose .system-log { font-family: var(--mono); font-size: .86em; background: light-dark(#141414, #0b0b0b); color: light-dark(#8ae28a, #8ae28a); border-radius: var(--radius); padding: .9rem 1.1rem; overflow-x: auto; } .prose .system-log > * { margin-top: 0; } .prose .system-log > * + * { margin-top: .25em; } .prose .footnote { font-size: .84em; color: var(--muted); border-top: 1px solid var(--line); padding-top: .6em; } .prose .footnote sup { color: var(--accent); font-weight: 700; margin-right: .3em; } .prose .quote-portrait { display: flex; gap: 1rem; align-items: center; border-left: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 1rem 0; font-style: normal; color: var(--text); } .prose .quote-portrait img { width: 64px; height: 64px; border-radius: 999px; object-fit: cover; flex: none; } .prose .quote-portrait p { margin: 0; font-size: 1.1em; } .prose .pov-divider { display: flex; align-items: center; gap: 1em; margin: 2.5em 0; font-family: var(--sans); font-size: .82em; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--faint); } .prose .pov-divider::before, .prose .pov-divider::after { content: ''; flex: 1; border-top: 1px solid var(--line); } .prose .content-warning { font-family: var(--sans); font-size: .9em; background: color-mix(in srgb, var(--warn) 14%, var(--surface)); border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent); border-radius: var(--radius); padding: .85rem 1.1rem; color: var(--text); } .prose .content-warning strong { color: var(--warn); } .author-note { font-family: var(--sans); font-size: .9em; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius); padding: .85rem 1.1rem; margin: 1.2rem 0; color: var(--text); } .author-note strong { display: block; font-size: .78em; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin-bottom: .35rem; } .author-note p { margin: 0; white-space: pre-wrap; } details.field summary { cursor: pointer; font-weight: 600; padding: .3rem 0; } details.field textarea { margin-top: .5rem; width: 100%; } .prose .qa { font-family: var(--sans); font-size: .95em; } .prose .qa .qa-q { font-weight: 700; } .prose .qa .qa-a { color: var(--muted); } .prose .qa-label { color: var(--accent); font-weight: 700; margin-right: .4em; } .prose .diary-page { font-family: var(--serif); font-style: italic; background-image: linear-gradient(var(--line-soft) 1px, transparent 1px); background-size: 100% 1.6em; background-position: 0 2.9em; background-color: var(--surface); border: 1px solid var(--line); border-radius: 2px; padding: 1.2rem 1.3rem; box-shadow: var(--shadow); } .prose .diary-page > * { margin-top: 0; } .prose .diary-page > * + * { margin-top: 1.6em; } .prose .diary-date { font-family: var(--sans); font-style: normal; font-size: .78em; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .prose .redacted { background: light-dark(#1a1a1a, #000); color: transparent; border-radius: 2px; cursor: pointer; padding: 0 .15em; user-select: none; transition: color .15s ease, background-color .15s ease; } .prose .redacted.revealed { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--text); user-select: text; } .prose .reveal { cursor: pointer; } .prose .reveal .reveal-line { visibility: hidden; max-height: 0; margin-top: 0; overflow: hidden; } .prose .reveal .reveal-line:first-child, .prose .reveal .reveal-line.revealed { visibility: visible; max-height: none; overflow: visible; } .prose .reveal .reveal-line.revealed + .reveal-line { margin-top: 1em; } .prose .reveal:not(.done)::after { content: '— tap to continue —'; display: block; font-family: var(--sans); font-size: .78em; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); text-align: center; margin-top: 1em; } .prose .reveal:not(.done):hover::after, .prose .reveal:not(.done):focus-within::after { color: var(--accent); } .prose span.spoiler { background: light-dark(#1a1a1a, #000); color: transparent; border-radius: 2px; cursor: pointer; padding: 0 .15em; user-select: none; transition: color .15s ease, background-color .15s ease; } .prose span.spoiler.revealed { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--text); user-select: text; } .prose div.spoiler { position: relative; cursor: pointer; border-radius: var(--radius); overflow: hidden; } .prose div.spoiler > * { filter: blur(8px); pointer-events: none; user-select: none; transition: filter .2s ease; } .prose div.spoiler::after { content: '👁 tap to reveal'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--sans); font-size: .8em; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); text-align: center; background: color-mix(in srgb, var(--surface) 45%, transparent); } .prose div.spoiler.revealed { cursor: auto; } .prose div.spoiler.revealed > * { filter: none; pointer-events: auto; user-select: auto; } .prose div.spoiler.revealed::after { display: none; } /* ---- resizable images (editor only) ---- */ .wysiwyg-pane .prose img { cursor: pointer; } .wysiwyg-pane .prose img.img-selected { outline: 2px solid var(--accent); outline-offset: 2px; } .img-resize-handle { position: fixed; width: 22px; height: 22px; background: var(--accent); border: 3px solid var(--surface); border-radius: 50%; box-shadow: var(--shadow); cursor: nwse-resize; z-index: 60; touch-action: none; } .streak-recover-bar { position: fixed; left: 50%; top: calc(1rem + env(safe-area-inset-top, 0px)); transform: translateX(-50%); z-index: 70; display: flex; align-items: center; gap: .75rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: .6rem .9rem; font-family: var(--sans); font-size: .88rem; max-width: calc(100vw - 2rem); } .streak-badge { display: inline-flex; align-items: center; gap: .3rem; font-family: var(--sans); font-weight: 600; } .family-add { display: flex; gap: .5rem; margin-bottom: 1.25rem; flex-wrap: wrap; } .tree-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 1.5rem; padding: 1rem 0; position: relative; } .tree-row + .tree-row::before { content: ''; display: block; width: 2px; height: 1rem; background: var(--line); position: absolute; top: -1rem; left: 50%; } .tree-item { display: inline-flex; align-items: center; gap: .4rem; position: relative; } .tree-item-self .tree-node { border-color: var(--accent); } .tree-node { display: flex; flex-direction: column; align-items: center; gap: .35rem; text-decoration: none; color: inherit; border: 1px solid var(--line); border-radius: var(--radius); padding: .6rem .8rem; background: var(--surface); min-width: 6rem; text-align: center; } .tree-node.placeholder { border-style: dashed; color: var(--faint); } .tree-node-portrait { width: 2.4rem; height: 2.4rem; border-radius: 50%; overflow: hidden; display: flex; } .tree-node-portrait img { width: 100%; height: 100%; object-fit: cover; } .tree-node-portrait .cover-blank { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .tree-node-name { font-family: var(--sans); font-size: .82rem; font-weight: 600; } .tree-connector { font-family: var(--sans); color: var(--faint); font-size: 1.1rem; } .tree-edge-label { font-family: var(--sans); font-size: .72rem; color: var(--faint); font-style: italic; } .tree-remove { border: none; background: none; cursor: pointer; color: var(--faint); font-size: .85rem; line-height: 1; padding: .2rem; } .tree-remove:hover { color: var(--warn); } .skip-to-unread { position: fixed; left: 50%; bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 55; box-shadow: var(--shadow); } /* ---- element picker ---- */ .element-dialog { max-width: 54rem; width: calc(100% - 2rem); max-height: 88vh; overflow-y: auto; } .element-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .element-head h2 { margin: 0; } .element-group h3 { font-family: var(--sans); font-size: .76rem; text-transform: uppercase; letter-spacing: .1em; color: var(--faint); margin: 1.75rem 0 .7rem; } .element-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .7rem; } .element-card { font: inherit; text-align: left; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: .5rem; cursor: pointer; display: flex; flex-direction: column; gap: .45rem; overflow: hidden; } .element-card:hover { border-color: var(--accent); } .element-preview { display: block; height: 7.5rem; overflow: hidden; background: var(--bg); border-radius: 6px; padding: .6rem; pointer-events: none; position: relative; } /* The miniature is the real element, shrunk — not a drawing of it. */ .element-preview .prose { font-size: .62rem; line-height: 1.5; display: block; transform-origin: top left; } .element-preview .prose > * { margin-top: 0; } .element-preview img { max-height: 3.5rem; object-fit: cover; } .element-preview::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.8rem; background: linear-gradient(to top, var(--bg), transparent); } .element-name { font-size: .82rem; font-weight: 600; padding: 0 .2rem .2rem; } /* ---- punctuation marks ---- */ .mark-grid { grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); } .mark-card { align-items: center; text-align: center; } .mark-glyph { font-family: var(--serif); font-size: 2rem; line-height: 1; padding: .4rem 0; } .mark-desc { font-size: .74rem; color: var(--faint); line-height: 1.35; } .font-card { align-items: center; text-align: center; } .font-sample { font-size: 1.9rem; line-height: 1; padding: .5rem 0; } /* A mark a writer inserted, as it appears in a chapter: a faint dotted underline hints it can be tapped, without looking like a typo or a link. */ .punct-mark { cursor: help; border-bottom: 1px dotted var(--faint); } .punct-tip { position: absolute; z-index: 150; max-width: min(18rem, calc(100vw - 1.5rem)); background: var(--text); color: var(--bg); font-family: var(--sans); font-size: .78rem; line-height: 1.4; padding: .5rem .7rem; border-radius: 8px; box-shadow: 0 6px 20px rgba(0, 0, 0, .25); } /* ---- raw HTML editor (verified accounts) ---- */ .html-dialog { max-width: 60rem; width: calc(100% - 2rem); } .html-dialog textarea { font-family: var(--mono); font-size: 13px; min-height: 16rem; } .html-split { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; } .html-preview { border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; max-height: 22rem; overflow: auto; background: var(--bg); } @media (max-width: 760px) { .html-split { grid-template-columns: 1fr; } } /* ---- character sheet ---- */ .sheet-facts { display: flex; flex-wrap: wrap; gap: .4rem .5rem; margin: .8rem 0; } .sheet-fact { border: 1px solid var(--line); border-radius: 999px; padding: .28rem .8rem; font-size: .85rem; display: inline-flex; gap: .45rem; align-items: baseline; } .sheet-fact-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .07em; color: var(--faint); } .unspecified-inline { color: var(--faint); font-style: italic; } .unspecified { color: var(--faint); font-style: italic; margin: 0; font-size: .95rem; } .sheet { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .sheet-section { border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--surface); padding: 1rem 1.2rem; } .sheet-section.wide { grid-column: 1 / -1; } .sheet-section h2 { font-family: var(--sans); font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; color: var(--faint); margin: 0 0 .6rem; } .sheet-section .prose { font-size: 1rem; max-width: none; } @media (max-width: 760px) { .sheet { grid-template-columns: 1fr; } } /* ---- in-character posts ---- */ .oc-post { border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--surface); padding: 1rem 1.2rem; margin-bottom: .9rem; } .oc-post-head { display: flex; gap: .7rem; align-items: center; margin-bottom: .6rem; flex-wrap: wrap; } .oc-post-name { font-weight: 600; display: block; font-size: .95rem; } .oc-post-title { font-family: var(--serif); font-size: 1.2rem; margin: 0 0 .5rem; font-weight: 600; } .oc-post-image { width: 100%; max-height: 24rem; object-fit: cover; border-radius: var(--radius); margin-bottom: .7rem; } .oc-post .prose { font-size: 1rem; max-width: none; } /* ---- language chooser ---- */ .lang-dialog { max-width: 30rem; } .lang-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: .4rem; margin: 1rem 0; max-height: 50vh; overflow-y: auto; } .lang-option { font: inherit; text-align: left; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); padding: .55rem .7rem; cursor: pointer; font-size: .9rem; } .lang-option:hover { border-color: var(--accent); } .lang-option[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-bg); color: var(--accent); font-weight: 600; } /* ---- right-to-left ---- */ [dir="rtl"] .brand { margin-right: 0; margin-left: auto; } [dir="rtl"] .comment-panel { right: auto; left: 0; border-left: 0; border-right: 1px solid var(--line); } [dir="rtl"] .replies { border-left: 0; border-right: 2px solid var(--line); margin-left: 0; margin-right: .9rem; padding-left: 0; padding-right: .9rem; } [dir="rtl"] .prose blockquote { border-left: 0; border-right: 2px solid var(--accent); padding-left: 0; padding-right: 1.1em; } [dir="rtl"] .prose .note { border-left: 0; border-right: 2px solid var(--line); border-radius: 8px 0 0 8px; } [dir="rtl"] .prose .verse { padding-left: 0; padding-right: 1.5em; } [dir="rtl"] .prose .float-left { float: right; margin-right: 0; margin-left: 1.4rem; } [dir="rtl"] .prose .float-right { float: left; margin-left: 0; margin-right: 1.4rem; } [dir="rtl"] .prose .dropcap::first-letter { float: right; padding: .06em 0 0 .09em; } [dir="rtl"] .menu-panel, [dir="rtl"] .story-menu-panel { right: auto; left: 0; } [dir="rtl"] .reading-pop { right: auto; left: 1rem; } [dir="rtl"] .reading-pop-panel { right: auto; left: 0; } [dir="rtl"] .status { margin-right: 0; margin-left: auto; } [dir="rtl"] .toolbar .grow, [dir="rtl"] .series-nav .spacer { margin-left: 0; margin-right: auto; }