/* A reading companion: the page and the assistant occupy adjacent space. */
:root { --public-guide-width:420px; --public-guide-space:0px; --public-guide-ease:cubic-bezier(.22,.61,.36,1); }
.public-guide-page { width:calc(100% - var(--public-guide-space)); min-width:0; container:public-page / inline-size; transition:width .28s var(--public-guide-ease),transform .28s var(--public-guide-ease); }
html.public-guide-open { --public-guide-space:var(--public-guide-width); }
.public-guide-launcher { position:fixed;right:24px;bottom:24px;z-index:45;display:flex;align-items:center;gap:10px;min-height:48px;padding:12px 18px;border:1px solid #b9945960;border-radius:30px;background:#142a24;color:#e7d2ac;box-shadow:0 8px 24px #0005;font:500 12px 'DM Sans',sans-serif;cursor:pointer;transition:opacity .18s,transform .24s; }
.public-guide-launcher[hidden],.public-guide [hidden] { display:none!important; }
.public-guide-launcher:hover { background:#204036; }
.public-guide-launcher svg,.public-guide button svg { width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5; }
.public-guide-launcher:focus-visible,.public-guide :focus-visible { outline:2px solid #efbd7b;outline-offset:3px; }
.public-guide { position:fixed;inset:0 0 0 auto;width:var(--public-guide-width);max-width:100%;height:100dvh;z-index:60;display:flex;flex-direction:column;min-width:0;box-sizing:border-box;padding:0;border:0;border-left:1px solid #b9945945;background:#0b201b;color:#efe9dc;box-shadow:-8px 0 28px #0002;font:14px/1.6 'DM Sans',sans-serif;transform:translateX(100%);visibility:hidden;transition:transform .28s var(--public-guide-ease),visibility 0s .28s; }
.public-guide.is-open { transform:translateX(0);visibility:visible;transition:transform .28s var(--public-guide-ease),visibility 0s; }
.public-guide-heading { display:flex;justify-content:space-between;align-items:center;padding:24px 22px 12px;gap:12px;flex-shrink:0; }
.public-guide-heading small { font-size:8px;color:#c3a778;letter-spacing:.15em; }
.public-guide .public-guide-heading h2 { font:500 27px/1.2 'Playfair Display',serif;margin:5px 0 0;letter-spacing:-.02em; }
.public-guide-actions { display:flex;gap:5px; }
.public-guide-actions button { display:grid;place-items:center;width:36px;height:36px;padding:0;background:none;border:1px solid #b9945930;border-radius:50%;color:#e7d2ac;cursor:pointer; }
.public-guide-actions button:hover { background:#c4a56b16;border-color:#b9945970; }
.public-guide-intro { color:#a9bbb1;font-size:12px;margin:0;padding:0 22px 18px;border-bottom:1px solid #b994592a;flex-shrink:0; }
.public-guide-conversation { position:relative;flex:1;min-height:0;display:flex; }
.public-guide-messages { flex:1;min-width:0;overflow-y:auto;overflow-x:hidden;padding:22px;overscroll-behavior:contain;scrollbar-gutter:stable;display:flex;flex-direction:column;gap:22px;scroll-behavior:auto; }
.public-guide-message { flex-shrink:0;min-width:0;animation:guide-message-in .22s ease both; }
.public-guide-answer,.public-guide-query { margin:0;font-size:14px;line-height:1.8;overflow-wrap:anywhere; }
.public-guide-query { padding:11px 15px;border:1px solid #b9945920;border-radius:14px 14px 3px 14px;background:#c49a4f16;align-self:flex-end;max-width:94%;color:#e7d2ac;white-space:pre-wrap; }
.public-guide-answer { position:relative; }
.public-guide-answer-label { display:flex;align-items:center;gap:7px;color:#bba777;font-size:10px;letter-spacing:.08em;margin-bottom:8px; }
.public-guide-answer-label::before { content:'';width:5px;height:5px;border-radius:50%;background:#d2aa65; }
.public-guide-answer p { margin:0;white-space:pre-wrap; }
.public-guide-answer-text p+p,.public-guide-answer-text ul,.public-guide-answer-text ol { margin-top:10px; }
.public-guide-answer-text ul,.public-guide-answer-text ol { padding-left:22px;margin-bottom:10px; }.public-guide-answer-text li+li{margin-top:5px}.public-guide-answer-text strong{color:#f0e7d3;font-weight:600}.public-guide-answer-text code{font-size:.9em;color:#e2c998;background:#b9945910;padding:1px 4px;border-radius:3px}
.public-guide-answer.is-streaming .public-guide-answer-label::before { animation:guide-breathe 1.5s ease-in-out infinite; }
.public-guide-answer.is-streaming .public-guide-answer-text::after { content:'';display:inline-block;width:4px;height:13px;background:#d2aa65;vertical-align:baseline;margin-left:5px;animation:guide-breathe 1.5s ease-in-out infinite; }
.public-guide-answer.is-pending .public-guide-answer-text { min-height:25px;color:#a9bbb1; }
.public-guide-sources { margin-top:14px;border-top:1px solid #b9945925;padding-top:10px; }
.public-guide-sources summary { color:#bfad84;font-size:11px;cursor:pointer; }.public-guide-sources summary:hover{color:#e7d2ac}
.public-guide-sources small { display:block;font-size:10px;color:#8fa798;line-height:1.5;margin-block:10px; }
.public-guide-sources a { display:block;margin-top:6px;padding:4px 9px;border:1px solid #b994592d;border-radius:5px;color:#d9c498;font-size:11px;text-decoration:none; }
.public-guide-sources a:hover { background:#c4a56b16;border-color:#b9945970; }
.public-guide-error { color:#ddb7a8;font-size:12px;margin:12px 0 0; }
.public-guide-retry { margin-top:10px;padding:5px 11px;border:1px solid #b9945950;border-radius:5px;background:none;color:#e7d2ac;font:12px 'DM Sans',sans-serif;cursor:pointer; }
.public-guide-suggestions { display:flex;flex-wrap:wrap;gap:6px;padding:8px 22px 5px;flex-shrink:0; }
.public-guide-suggestions button { border:1px solid #b9945950;border-radius:16px;background:none;padding:7px 10px;color:#d5c09c;font:11px 'DM Sans',sans-serif;cursor:pointer; }
.public-guide-suggestions button:hover { background:#c4a56b16; }
.public-guide-status { flex-shrink:0;min-height:25px;padding:3px 22px 7px;margin:0;color:#a4b9aa;font-size:11px;line-height:1.4; }
.public-guide-form { padding:12px 20px max(17px,env(safe-area-inset-bottom));border-top:1px solid #b994592a;flex-shrink:0; }
.public-guide-form label { display:block;font-size:11px;color:#b7c4b9;margin-bottom:8px; }
.public-guide-compose { display:flex;align-items:flex-end;gap:8px; }
.public-guide-form textarea { display:block;box-sizing:border-box;min-width:0;flex:1;min-height:46px;max-height:min(132px,22dvh);resize:none;border:1px solid #9caa8c50;border-radius:8px;padding:12px;color:#efe9dc;background:#071710;font:14px/1.5 'DM Sans',sans-serif;scrollbar-width:thin; }
.public-guide-compose button { display:grid;place-items:center;flex-shrink:0;width:44px;height:46px;padding:0;border:0;border-radius:8px;background:#d2aa65;color:#10221a;cursor:pointer; }
.public-guide-compose button:hover { background:#e1bf81; }
.public-guide button:disabled { opacity:.45;cursor:default; }
.public-guide-form>small { font-size:10px;line-height:1.6;color:#8ba595;display:block;margin-top:9px; }
.public-guide-form>small a { color:#c3b487;text-decoration:underline;text-underline-offset:3px; }
.public-guide-latest { position:absolute;bottom:10px;left:50%;transform:translateX(-50%);white-space:nowrap;border:1px solid #b9945960;background:#18382d;color:#e7d2ac;border-radius:20px;padding:8px 13px;box-shadow:0 4px 18px #0005;font:11px 'DM Sans',sans-serif;cursor:pointer; }
.public-guide-resize { position:absolute;inset:0 auto 0 -6px;width:12px;z-index:2;cursor:col-resize;touch-action:none;display:grid;place-items:center; }
.public-guide-resize>span { display:block;width:3px;height:40px;border-radius:4px;background:#b9945970;transition:height .18s,background .18s; }
.public-guide-resize:hover>span,.public-guide-resize:focus-visible>span { height:60px;background:#d2aa65; }
.public-guide-resizing,.public-guide-resizing * { cursor:col-resize!important;user-select:none!important; }
.public-guide-resizing .public-guide-page,.public-guide-resizing .public-guide { transition:none; }
.public-guide-page .listen-bar { right:var(--public-guide-space);transition:right .28s var(--public-guide-ease); }
.public-guide-page .reading-hero { padding-inline:max(24px,calc((100% - 900px)/2)); }
.public-guide-page .reading-body { padding-inline:max(24px,calc((100% - 900px)/2)); }
.public-guide-page .portal-flash-stack { right:calc(var(--public-guide-space) + 24px); }
body:has(.listen-bar:not([hidden])) .public-guide-launcher { bottom:88px; }
@container public-page (max-width:1120px) {
  .public-header { padding-inline:24px; }
  .portal-hero { grid-template-columns:1fr;gap:10px;padding-top:45px; }
  .portal-hero h1 { font-size:clamp(44px,7cqw,68px); }
  .portal-art { height:440px; }
  .portal-path-grid { gap:12px; }
  .portal-path { padding:22px 18px; }
  .portal-about-strip { grid-template-columns:50px 1fr; }
  .portal-about-strip>.portal-text-link { grid-column:2; }
  .portal-character-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .portal-book-layout { gap:36px; }
  .portal-about-content { gap:35px; }
  .portal-contact { gap:35px; }
  .portal-footer { flex-wrap:wrap; }
}
@container public-page (max-width:820px) {
  .portal-hero,.portal-paths,.portal-about-strip,.portal-page-intro,.portal-book-layout,.portal-character-grid,.portal-about-content,.portal-author,.portal-contact { width:calc(100% - 40px); }
  .portal-path-grid,.portal-about-content,.portal-contact { grid-template-columns:1fr; }
  .portal-section-heading { display:block; }
  .portal-section-heading .portal-kicker { margin-bottom:12px; }
  .listen-bar { height:132px;display:grid;grid-template-columns:38px minmax(70px,1fr) auto 28px;grid-template-rows:38px 18px 26px;gap:5px 9px;padding:10px 14px; }
  .listen-bar-play { grid-area:1 / 1; }.listen-bar-info { grid-area:1 / 2;width:auto; }.listen-bar-rate { grid-area:1 / 3; }.listen-bar-close { grid-area:1 / 4; }.listen-bar-progress { grid-area:2 / 1 / 3 / -1;width:100%;min-width:0; }.listen-bar-seek-actions { grid-area:3 / 1 / 4 / 3; }.listen-bar-volume { grid-area:3 / 3 / 4 / -1;justify-content:flex-end; }
}
@media(max-width:820px) { body:has(.listen-bar:not([hidden])) .public-guide-launcher { bottom:152px; } }
@media(max-width:760px) {
  html.public-guide-open { --public-guide-space:0px;overflow:hidden; }
  html.public-guide-open body { overflow:hidden; }
  .public-guide-page { width:100%; }
  html.public-guide-open .public-guide-page { transform:translateX(-100%); }
  .public-guide { width:100%;border:0;box-shadow:none; }
  .public-guide-resize { display:none; }
  .public-guide-launcher { bottom:16px;right:16px;min-height:48px;padding:13px; }
  .public-guide-launcher>span { display:none; }
  .public-guide-heading { padding:18px 18px 10px; }
  .public-guide .public-guide-heading h2 { font-size:25px; }
  .public-guide-intro { padding:0 18px 13px; }
  .public-guide-messages { padding:18px;gap:20px; }
  .public-guide-suggestions { padding-inline:18px; }
  .public-guide-status { padding-inline:18px; }
  .public-guide-form { padding-inline:16px; }
  .public-guide-form textarea { font-size:16px; }
}
@media(max-height:550px) { .public-guide-heading{padding-top:12px}.public-guide-intro{display:none}.public-guide-suggestions{display:none}.public-guide-form{padding-block:9px}.public-guide-form>small{margin-top:5px}.public-guide-status{min-height:20px} }
@media(prefers-reduced-motion:reduce) { .public-guide-page,.public-guide,.public-guide *,.public-guide-launcher { animation:none!important;transition:none!important;scroll-behavior:auto!important; } }
@keyframes guide-message-in { from { opacity:0;transform:translateY(4px); } to { opacity:1;transform:none; } }
@keyframes guide-breathe { 0%,100%{opacity:.35}50%{opacity:1} }

@container public-page (max-width:1120px){.portal-stat-strip,.portal-game-invite{width:calc(100% - 64px);grid-template-columns:1fr;gap:34px}.portal-stat-copy h2{max-width:600px}.portal-game-invite{padding:62px 0}.portal-game-invite-copy{max-width:650px}.portal-journey-steps{max-width:650px}}
@container public-page (max-width:820px){.portal-stat-strip,.portal-game-invite{width:calc(100% - 40px)}.portal-stat-strip{padding:42px 0}.portal-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.portal-stat-grid>div{padding:17px 14px;border-bottom:1px solid #b9945930}.portal-stat-grid>div:nth-child(odd){border-left:0}.portal-stat-grid>div:nth-last-child(-n+2){border-bottom:0}.portal-stat-grid dd{font-size:31px}.portal-game-invite{padding:50px 0;gap:28px}.portal-game-invite-copy h2{font-size:clamp(34px,10cqw,46px)}.portal-game-invite-copy>p:not(.portal-kicker):not(.portal-note){font-size:14px;margin:18px 0}.portal-journey-steps{padding:14px;gap:7px}.portal-journey-steps li{min-height:72px;padding:14px}.portal-journey-steps strong{font-size:18px}}
@container public-page (max-width:460px){.portal-journey-steps{grid-template-columns:1fr}.portal-journey-steps li:last-child{grid-column:auto}}
@container public-page (max-width:1120px){.portal-media-band,.portal-game-band{padding:62px 0}.portal-media-inner,.portal-game-invite{width:calc(100% - 64px);grid-template-columns:1fr;gap:34px}.portal-media-copy h2{max-width:600px}.portal-game-invite{padding:0}.portal-media-grid,.portal-game-dashboard{max-width:650px}}
@container public-page (max-width:820px){.portal-media-band,.portal-game-band{padding:52px 0}.portal-media-inner,.portal-game-invite{width:calc(100% - 40px)}.portal-media-copy h2{font-size:clamp(35px,10cqw,47px)}.portal-media-copy>p:not(.portal-kicker){font-size:14px;margin:18px 0}.portal-media-grid>div{min-height:128px;padding:20px 15px}.portal-media-grid dd{font-size:42px}.portal-game-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.portal-game-stat-grid>div{padding:16px 14px;border-left:1px solid #e3c47a2c;border-top:1px solid #e3c47a2c}.portal-game-stat-grid>div:nth-child(odd){border-left:0}.portal-game-stat-grid>div:nth-child(-n+2){border-top:0}.portal-game-stat-grid dd{font-size:33px}}
