:root{--text-primary:#211e18;--text-secondary:#35312a;--text-muted:#766e63;--text-ghost:#766e63;--accent:#004996;--border-light:#e4e0da;--bg-primary:#fafafa;--bg-secondary:#f1f0ed;--font-serif:'Michelangelus',Georgia,serif}
:root.dark{color-scheme:dark;--text-primary:#eeeae3;--text-secondary:#ddd8cf;--text-muted:#b0aaa0;--text-ghost:#aaa49a;--accent:#8bb8e8;--border-light:#393630;--bg-primary:#211e18;--bg-secondary:#2b2822}
body.reading{background:var(--bg-primary);color:var(--text-primary);font-size:18px}
.reading button{font:inherit;color:inherit;cursor:pointer}
.reading button:focus-visible,.reading a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.reading a{color:var(--accent)}
.reading a.quiet-link,.reading button.quiet-link,.reading a.answer-link,.reading button.answer-link,.reading .pane-urls a,.reading .msg-mirror a{
  color:var(--text-muted);display:inline;text-decoration:underline;text-decoration-line:underline;text-decoration-color:var(--border-light);text-underline-offset:3px;-webkit-text-decoration-line:underline;-webkit-text-decoration-color:var(--border-light)
}
.reading .pane-intro a{color:inherit;text-decoration-color:var(--border-light)}
.reading .reader-shell button:hover:not(.quiet-link):not(.answer-copy){color:var(--text-primary)}
.reading button:disabled{cursor:default}
.reader-loading{max-width:28rem;margin:clamp(3rem,18vh,8rem) auto;padding:0 1.5rem}
.reader-loading p{margin:0;color:var(--text-muted);font-size:1.05rem;line-height:1.65;text-wrap:pretty}
.reader-invitation a{color:var(--text-primary);text-decoration-color:var(--border-light);text-underline-offset:3px}
.reader-invitation button:not(.invite-box){display:inline-block;margin-top:1.25rem;background:none;border:0;padding:0;color:var(--text-primary);text-decoration:underline;text-decoration-color:var(--border-light);text-underline-offset:3px}
.reader-invitation p+p{margin-top:1.25rem}
.reading .reader-shell .reader-prose h1:first-child{margin-top:0}
.reading .reader-shell footer{font-size:14px}
.reading .reader-shell textarea{color:var(--text-primary)}
.reading .reader-shell .pane-history button{line-height:1.4}
.reading [hidden]{display:none!important}
.pdf-text{white-space:pre-wrap;line-height:1.7}
.chat-hist-row{background:transparent;min-width:0;max-width:100%}
.chat-hist-open{transition:color .14s ease}
.chat-hist-row:hover .chat-hist-open{color:var(--text-primary)}
.chat-hist-actions{position:absolute;top:0;right:.4rem;bottom:0;z-index:1;display:flex;align-items:center;gap:.1rem;opacity:0;pointer-events:none;transition:opacity .14s ease}
.chat-hist-row:hover .chat-hist-actions,.chat-hist-row:focus-within .chat-hist-actions{opacity:1;pointer-events:auto}
.chat-hist-act{position:relative;display:flex;align-items:center;justify-content:center;border:none;background:none;cursor:pointer;padding:.28rem;color:var(--text-ghost)}
.chat-hist-act:hover{color:var(--text-primary)}.chat-hist-act::after{content:'';position:absolute;inset:-6px}
@media(max-width:900px){
  .reading .doc-vis,.reading .doc-div{display:none!important}
  .reading .ask-dock,.reading .piece-ask{overflow:visible!important}
}
@keyframes pb-caret-blink{0%,100%{opacity:1}50%{opacity:.05}}
@media(prefers-reduced-motion:reduce){.reading *{animation:none!important;scroll-behavior:auto!important}.piece-invite-go{transition:none}}

/* Utilities used by the shared components; the host has no Tailwind runtime. */
.fixed{position:fixed}.right-1{right:.25rem}.top-1{top:.25rem}.z-\[200\]{z-index:200}
.bg-transparent{background:transparent}.border-none{border:0}.cursor-pointer{cursor:pointer}
.opacity-40{opacity:.4}.inline-flex{display:inline-flex}.items-center{align-items:center}.justify-center{justify-content:center}
.transition-opacity{transition:opacity .15s ease}
.hover\:opacity-60:hover{opacity:.6}.hover\:opacity-65:hover{opacity:.65}.hover\:opacity-70:hover{opacity:.7}.hover\:opacity-80:hover{opacity:.8}

/* Access belongs inside the reader; the entrance remains the same chrome. */
.reader-gate { min-height: 100dvh; display: flex; flex-direction: column; background: var(--bg-primary); font-family: var(--font-serif); }
.reader-gate .reader-global-head { flex: none; display: flex; align-items: center; gap: .65rem; height: 48px; padding: 0 .25rem 0 .7rem; }
.reader-gate-back { color: var(--text-muted); display: flex; flex: none; text-decoration: none; }
.reader-gate-spacer { margin-left: auto; }
.reader-gate > footer { flex: none; display: flex; justify-content: center; align-items: center; gap: 1.6rem; padding: 1rem 1.2rem; }
.reader-gate-wordmark { font-style: italic; color: var(--text-ghost); font-size: .85rem; text-decoration: none; }
.reader-gate-wordmark span { font-style: normal; }
.reader-gate .doc-title-row { display: inline-flex; align-items: baseline; min-width: 0; line-height: 1; }
.reader-gate .doc-title { font-style: italic; font-size: 1.05rem; color: var(--text-primary); line-height: 1; }
.reader-gate .doc-div { font-style: normal; font-size: .72rem; line-height: 1; color: var(--text-ghost); padding: 0 .55rem; }
.reader-gate .doc-vis { font-style: normal; font-size: .72rem; letter-spacing: .08em; color: var(--text-ghost); line-height: 1; }
.reader-invitation-stage {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 0 1.5rem 8vh; text-align: center;
}
.reader-invitation-stage p { margin: 0; color: var(--text-muted); font-size: 1.05rem; line-height: 1.65; text-wrap: pretty; }
.reader-invitation-stage a, .reader-invitation-stage a.piece-sign-in {
  color: var(--text-primary); text-decoration-color: var(--border-light); text-underline-offset: 3px;
}
.reader-invitation-stage button:not(.piece-invite-go):not(.invite-box) {
  display: inline-block; margin-top: 1.4rem; background: none; border: 0; padding: 0;
  color: var(--text-ghost); text-decoration: underline; text-decoration-color: var(--border-light); text-underline-offset: 3px;
}
.reader-invitation-stage p+p { margin-top: 1.25rem; font-size: .85rem; color: var(--text-ghost); }
.reader-invitation-stage p+p a { color: inherit; }
.reader-invitation-stage .reader-access { padding: 0; max-width: none; }
.reader-access { padding: 2rem clamp(1.4rem,4vw,3rem); color: var(--text-muted); max-width: 34rem; line-height: 1.65; }
.reader-access-note { color: var(--text-muted); font-size: .86rem; margin-top: 1.2rem; }
.reader-access a, .reader-access-note a { color: var(--text-primary); text-decoration-color: var(--border-light); text-underline-offset: 3px; }
.reading a.piece-sign-in, .reading .reader-invitation a, .reading .reader-access a, .reading .reader-invitation-stage a { color: var(--text-primary); }
.reading .reader-gate-back { color: var(--text-muted); }
.reading .reader-gate-wordmark { color: var(--text-ghost); }

.reader-access form { display: flex; align-items: baseline; gap: .75rem; margin: 1.4rem 0 0; }
.reader-access input { min-width: 0; flex: 1; background: transparent; border: none; border-bottom: 1px solid var(--border-light); border-radius: 0; padding: .2rem 0; color: var(--text-primary); font: inherit; outline: none; }
.reader-access input:focus { border-bottom-color: var(--text-muted); }
.reader-access button { background: none; color: var(--text-muted); border: 0; padding: 0; cursor: pointer; font: inherit; }
.reader-access button:disabled { opacity: .4; cursor: default; }
.reader-access .reader-access-pay { margin-top: 1.25rem; text-decoration: underline; text-decoration-color: var(--border-light); text-underline-offset: 3px; color: var(--text-primary); }
.reader-access .reader-access-retry { display: block; margin-top: 1.3rem; font-size: .8rem; text-decoration: underline; text-underline-offset: 3px; }
@media(max-width:900px){
  .reader-invitation-stage { padding: 0 1.2rem 12vh; }
  .reader-access { padding: 1.4rem 1.2rem 2.2rem; }
  .reader-access form { flex-wrap: wrap; }
}
/* Host: quiet reader chrome. Once words are typed the send arrow is house grey,
   like the homepage arrow, never accent blue; the header names the piece
   without an access label (a visitor sees the piece or meets its gate). */
.reading .pb-send { color: var(--text-muted) !important; }
.reading .pb-send:hover { color: var(--text-primary) !important; }
.reading .doc-title-row .doc-div, .reading .doc-title-row .doc-vis { display: none; }
/* The code on a locked piece: the word, a hairline, an arrow to press, the
   field reading left to right so the caret never sits on the words. */
.piece-invite { margin-top: 1.4rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .55rem; }
.reader-invitation-stage .piece-invite { justify-content: center; }
.piece-invite-word { color: var(--text-ghost); font-size: .88rem; }
.piece-invite-line { position: relative; display: inline-flex; align-items: center; width: 7.5rem; }
.piece-invite input { display: block; width: 100%; margin: 0; background: transparent; border: none; border-bottom: 1px solid color-mix(in srgb, var(--text-ghost) 32%, transparent); border-radius: 0; padding: .15rem 0 .2rem; color: var(--text-primary); font: inherit; font-size: .9rem; line-height: 1.2; letter-spacing: .03em; outline: none; text-align: left; }
.piece-invite input:focus { border-bottom-color: color-mix(in srgb, var(--text-ghost) 60%, transparent); }
.piece-invite-go { position: absolute; left: 100%; top: 50%; transform: translateY(-50%); margin-left: .3rem; width: 1.6rem; height: 1.6rem; display: flex; align-items: center; justify-content: center; padding: 0; background: none; border: 0; color: var(--text-muted); cursor: pointer; transition: opacity .2s ease; }
.piece-invite-go:hover { color: var(--text-primary); }
.piece-invite-go:disabled { opacity: .35; cursor: default; }
.piece-invite-go svg { display: block; }
/* While the reader loads, the page's no-script copy stays out of sight, so it
   never flashes before the page arrives (founder, 7 October 2026: "you see
   that like there's some type of error and then it loads"); if the reader
   never comes, the copy shows after a few seconds. */
html.js #reader > .page { visibility: hidden; animation: reader-no-script 0s linear 4s forwards !important; }
@keyframes reader-no-script { to { visibility: visible; } }