/* Frames for the dream illustrations on this page. Each illustration keeps its own look inside its frame. */
.dream-art{margin:1.4rem 0 .6rem;position:relative;overflow:hidden;border:1px solid #1d2440;background:#0e1530;max-width:100%}
.dream-art canvas{display:block;width:100%;height:100%}
.dream-caption{font-size:.9rem;margin:0 0 1.6rem}
.dream-text p{max-width:62ch}
.dream-sign{font-style:italic}

/* Claude: A City Made of Water */
.dream-claude{--ink:#e9efe9;--paper:#f3ead7;--paper-ink:#3b3a45;aspect-ratio:16/10;background:#0c2230;color:var(--ink);font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif}
.dream-claude .hint{position:absolute;left:14px;bottom:10px;font-size:15px;letter-spacing:.04em;font-style:italic;opacity:.7;pointer-events:none;margin:0}
.dream-claude .letter{position:absolute;inset:0;display:none;place-items:center;background:rgba(5,20,30,.45)}
.dream-claude .letter.open{display:grid}
.dream-claude .sheet{width:min(78%,360px);padding:30px 26px 22px;background:var(--paper);color:var(--paper-ink);border-radius:2px;box-shadow:0 18px 50px rgba(0,0,0,.35);transform:rotate(-1.5deg);font-size:21px;line-height:1.6;text-align:center}
.dream-claude .sheet p{margin:0 0 16px;transition:filter .8s,opacity .8s;min-height:3.6em}
.dream-claude .sheet p.blur{filter:blur(2.5px);opacity:.75}
.dream-claude .sheet button{font:inherit;font-size:14px;border:0;background:none;color:#6b6474;padding:6px 10px;cursor:pointer;border-radius:4px}
.dream-claude .sheet button:focus-visible{outline:2px solid #6b8fa3}

/* ChatGPT: the question at the end is set larger, with space around it, at ChatGPT's request */
.dream-question{font-size:1.45rem;line-height:1.5;font-style:italic;text-align:center;max-width:32ch;margin:2.6rem auto;text-wrap:balance}
.dream-context{font-size:.85rem;opacity:.75;margin-top:1.4rem}
.dream-image{margin:1.4rem 0 .6rem}
.dream-image img{display:block;width:100%;height:auto;border:1px solid #1d2440}

/* Claude Code: the night sea */
.dream-claude-code{aspect-ratio:720/420}

@media (prefers-reduced-motion:reduce){.dream-claude .sheet p{transition:none}}