@font-face { font-family: "IBM Plex Mono"; src: url("/fonts/IBMPlexMono-Regular.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Press Start 2P"; src: url("/fonts/PressStart2P-Regular.woff2") format("woff2"); font-display: swap; }

:root { --bg:#090a0a; --surface:#111313; --line:#303535; --muted:#89918d; --text:#e5e9e6; --warm:#e6d8bc; --error:#d68a82; --font:"IBM Plex Mono", ui-monospace, monospace; --font-pixel:"Press Start 2P", var(--font); }
* { box-sizing: border-box; }
html, body { min-height:100%; margin:0; }
body { background:var(--bg); color:var(--text); font:16px/1.6 var(--font); }
.field { position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; }
main { position:relative; z-index:1; width:min(100% - 2rem, 46rem); margin:auto; padding:4rem 0; }
h1, h2, p { margin:0; }
h1 { font-size:1rem; font-weight:400; letter-spacing:.03em; }
h2 { color:var(--muted); font-size:.76rem; font-weight:400; letter-spacing:.08em; text-transform:uppercase; }
a { color:var(--text); text-underline-offset:.18em; }
a:hover, a:focus-visible { color:var(--warm); }
button, textarea { font:inherit; }
button { border:1px solid var(--line); border-radius:0; background:transparent; color:var(--text); cursor:pointer; padding:.42rem .72rem; }
button:hover, button:focus-visible { border-color:var(--warm); color:var(--warm); }
button:disabled { cursor:default; opacity:.45; }

.journal { max-width:40rem; }
.page-intro, .workspace-intro { margin-bottom:2.5rem; }
.page-intro p, .workspace-intro p { color:var(--muted); margin-top:.45rem; }
.release { display:flex; flex-direction:column; gap:1rem; }
.entry { width:100%; resize:vertical; min-height:9rem; border:1px solid var(--line); background:rgba(17,19,19,.82); color:var(--text); padding:.9rem; outline:none; transition:color 2s ease; }
.entry.warming { color:var(--muted); transition:none; }
.entry:focus { border-color:var(--warm); }
.entry.flag { animation:flag .25s ease; border-color:var(--error); }
.anchor-input { width:100%; max-width:22rem; border:0; border-bottom:1px solid var(--line); background:transparent; color:var(--muted); font:inherit; font-size:.82rem; padding:.3rem 0; outline:none; }
.anchor-input::placeholder { color:var(--muted); opacity:.7; }
.anchor-input:focus { border-color:var(--warm); color:var(--text); }
@keyframes flag { 25% { transform:translateX(-4px); } 75% { transform:translateX(4px); } }
.actions { display:flex; gap:.65rem; }
.release-button { color:var(--warm); border-color:var(--warm); }
.release-note { color:var(--muted); font-size:.78rem; max-width:34rem; }
.journal-entries { border-top:1px solid var(--line); margin-top:3rem; padding-top:1.25rem; }
.entries-head { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.entries-io { display:flex; align-items:center; gap:.9rem; }
.entries-export { border:0; color:var(--muted); font-size:.73rem; padding:0; }
.entries-export:hover { color:var(--warm); }
.entries-import-label { color:var(--muted); font-size:.73rem; cursor:pointer; }
.entries-import-label:hover { color:var(--warm); }
.entries-import-note { color:var(--muted); font-size:.73rem; margin:.6rem 0 0; }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.entries-list { list-style:none; padding:0; margin:1rem 0 0; }
.entries-list li { border-top:1px solid #202424; padding:1rem 0; }
.entries-list p { white-space:pre-wrap; overflow-wrap:anywhere; }
.entries-list li.cold p { color:var(--muted); }
.entries-list small { color:var(--muted); display:inline-block; font-size:.73rem; margin-top:.45rem; }
.quiet-open { border:0; color:var(--muted); font-size:.73rem; padding:0; margin-right:.7rem; }
.quiet-open:hover { color:var(--warm); }
.quiet-delete { border:0; color:var(--muted); float:right; font-size:.73rem; padding:0; }
.quiet-delete:hover { color:var(--error); }
.rooms { color:var(--muted); font-size:.82rem; margin-top:3rem; }
.rooms a { color:var(--muted); text-decoration:none; }

.workspace { display:flex; flex-direction:column; min-height:100vh; padding-bottom:2rem; }
.workspace-intro { flex:none; }
.conversation { display:flex; flex:1; flex-direction:column; gap:1rem; min-height:14rem; overflow:auto; padding:1rem 0; }
.conversation p { margin:0; white-space:pre-wrap; overflow-wrap:anywhere; }
.said { color:var(--muted); }
.heard { color:var(--text); }
.heard.pending::after { content:"▋"; animation:blink 1s step-end infinite; }
.heard.error { color:var(--error); }
@keyframes blink { 50% { opacity:0; } }
.prompt, .artifacts { width:100%; }
.prompt { display:flex; flex-direction:column; gap:.75rem; }
.workspace .entry { min-height:6rem; max-height:16rem; }
.artifacts { margin-top:1.4rem; }
.artifacts-row { display:flex; gap:.6rem; }
.artifacts-list { list-style:none; margin:1rem 0 0; padding:0; border-top:1px solid var(--line); }
.artifacts-list li { display:flex; border-bottom:1px solid #202424; }
.artifact-open { display:flex; flex:1; justify-content:space-between; gap:1rem; border:0; color:var(--muted); padding:.7rem 0; text-align:left; }
.artifact-open:hover { color:var(--text); }
.artifact-title { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.artifact-time { color:var(--muted); flex:none; font-size:.72rem; }
.artifacts-list li.cold .artifact-open { opacity:.55; }
.artifact-delete { border:0; color:var(--muted); padding:.5rem; }
.artifact-delete:hover { color:var(--error); }
.journal-consent { display:flex; align-items:baseline; gap:.65rem; flex-wrap:wrap; margin-top:1.4rem; }
.journal-consent-toggle.on { color:var(--warm); border-color:var(--warm); }
.journal-consent-note { color:var(--muted); font-size:.78rem; }

.field-view { width:min(100% - 2rem, 56rem); min-height:100vh; padding:4rem 0; }
.field-intro { max-width:38rem; margin-bottom:3rem; }
.field-intro h1 { font-family:var(--font-pixel); font-size:.72rem; letter-spacing:.06em; }
.field-intro p { color:var(--muted); margin-top:.6rem; }
.trace-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(15rem, 1fr)); gap:1px; background:var(--line); border:1px solid var(--line); }
.trace { position:relative; background:rgba(17,19,19,.93); color:var(--text); margin:0; min-height:10rem; padding:1rem; transition:color .6s ease, background .6s ease; }
.trace:hover { background:#161a19; }
.trace-anchor { display:inline-block; font-family:var(--font-pixel); font-size:.5rem; letter-spacing:.04em; color:var(--muted); margin:0 0 .65rem; opacity:.75; text-decoration:none; }
.trace-anchor:hover, .trace-anchor:focus-visible { opacity:1; }
.trace-text { margin:0; white-space:pre-wrap; overflow-wrap:anywhere; }
.trace-fading { font-family:var(--font-pixel); margin:.85rem 0 0; color:var(--muted); font-size:.55rem; letter-spacing:.03em; }
.trace-keep { position:absolute; bottom:.7rem; right:.7rem; border-color:var(--line); color:var(--muted); font-size:.72rem; padding:.28rem .55rem; }
.trace-keep:hover { color:var(--warm); border-color:var(--warm); }
.trace-keep:disabled { opacity:.5; cursor:default; }
.field-view .empty { color:var(--muted); }

.about-page { max-width:38rem; }
.about-hero { position:relative; min-height:20rem; padding-top:2.5rem; margin-bottom:1rem; }
.about-hero .roots { position:absolute; inset:0; width:100%; height:100%; }
.about-kicker { position:relative; color:var(--muted); font-size:.78rem; letter-spacing:.06em; margin:0 0 1rem; }
.about-hero h1 { position:relative; font-size:1.35rem; font-weight:400; line-height:1.5; letter-spacing:0; max-width:30rem; color:var(--text); }
.about-block { margin-top:3rem; }
.about-block h2 { margin-bottom:1rem; }
.about-block p { color:var(--muted); max-width:34rem; margin-top:.9rem; }
.about-block p:first-of-type { margin-top:0; }
.about-rooms { margin:0; padding:0; }
.about-rooms > div { border-top:1px solid #202424; padding:1.1rem 0; }
.about-rooms > div:first-child { border-top:1px solid var(--line); }
.about-rooms dt { color:var(--warm); font-size:.85rem; margin-bottom:.4rem; }
.about-rooms dd { color:var(--muted); margin:0; max-width:34rem; }
.about-rooms-nav { margin-top:3.5rem; padding-top:1.5rem; border-top:1px solid var(--line); }

@media (max-width:600px) { main, .field-view { width:min(100% - 1.25rem, 56rem); padding:2rem 0; } .trace-grid { grid-template-columns:1fr; } .actions { flex-wrap:wrap; } .about-hero { min-height:16rem; } .about-hero h1 { font-size:1.12rem; } }
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; } }