/* ============================================================
   SYBIL — the windowsill
   you are inside the box. cardboard walls, hazard tape, shipping stamps.
   parchment ink. cat-eye yellow. green only for the chain. pink for the mirror.
   ============================================================ */

:root {
  --bg: #0b0906;
  --bg2: #110d08;
  --ink: #d9d2c0;
  --dim: #7d7460;
  --dimmer: #3f3628;
  --tan: #9c7a48;
  --tan-dim: #5a4629;
  --eye: #f2c230;
  --green: #00c805;
  --pink: #ff3d8a;
  --violet: #8a6cff;
  --mono: "IBM Plex Mono", "Cascadia Mono", "Consolas", "Menlo", "Courier New", monospace;
}

* { box-sizing: border-box; }
html { color-scheme: dark; }
body {
  margin: 0; background: var(--bg); color: var(--ink); font-family: var(--mono); font-size: 14px; line-height: 1.6;
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(242,194,48,.05), transparent 55%),
    repeating-linear-gradient(90deg, transparent 0 39px, rgba(255,255,255,.012) 39px 40px);
}
a { color: var(--eye); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, input:focus-visible { outline: 1px dashed var(--eye); outline-offset: 2px; }
::selection { background: var(--eye); color: #000; }
pre { margin: 0; font-family: var(--mono); white-space: pre; line-height: 1.2; }
b { font-weight: normal; color: var(--ink); }
i { color: var(--dim); }

/* --- the box: walls, flaps, tape --- */
.wall {
  position: fixed; top: 0; bottom: 0; width: 34px; z-index: 0; color: var(--tan-dim); font-size: 11px; letter-spacing: 3px;
  border-left: 1px dashed var(--tan-dim); border-right: 1px dashed var(--tan-dim); overflow: hidden; pointer-events: none;
}
.wall span { display: block; writing-mode: vertical-rl; white-space: nowrap; padding: 14px 0; animation: crawl-v 90s linear infinite; }
.wall.left { left: calc(50% - 500px); }
.wall.right { right: calc(50% - 500px); }
.wall.right span { transform: rotate(180deg); }
@keyframes crawl-v { to { transform: translateY(-50%); } }
.wall.right span { animation-direction: reverse; }
@media (max-width: 1100px) { .wall { display: none; } }

.eyes-margin { position: fixed; z-index: 0; color: var(--eye); font-size: 12px; opacity: 0; transition: opacity .6s; pointer-events: none; text-shadow: 0 0 14px rgba(242,194,48,.5); }
.eyes-margin.on { opacity: .9; }

.wrap { max-width: 960px; margin: 0 auto; padding: 0 22px 40px; position: relative; z-index: 1; }

.tape {
  margin: 14px -22px 26px; padding: 5px 0; overflow: hidden; white-space: nowrap;
  background: repeating-linear-gradient(-45deg, var(--eye) 0 14px, #0b0906 14px 28px);
  border-top: 1px solid #000; border-bottom: 1px solid #000; transform: rotate(-.6deg);
}
.tape span { display: inline-block; background: var(--eye); color: #000; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; padding: 1px 12px; margin-left: 4%; }
.tape.thin { margin: 34px -22px 22px; padding: 2px 0; transform: rotate(.4deg); }
.tape.thin span { font-size: 10px; padding: 0 10px; }

/* --- the banner: full-bleed pixel letters, scrolling --- */
.banner { width: 100%; overflow: hidden; white-space: nowrap; padding: 14px 0 6px; border-bottom: 1px solid #000; background: #000; position: relative; z-index: 1; }
.pixel {
  display: inline-block; font-size: clamp(9px, 1.6vw, 22px); line-height: .95; letter-spacing: 0;
  color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: repeating-linear-gradient(0deg, var(--eye) 0 3px, #a8861f 3px 5px, var(--eye) 5px 7px, #6d5612 7px 9px);
  animation: tile 80s linear infinite; filter: drop-shadow(0 0 10px rgba(242,194,48,.35));
}
@keyframes tile { to { transform: translateX(-16.667%); } }

.glitchline { color: var(--tan-dim); font-size: 11px; letter-spacing: 2px; white-space: nowrap; overflow: hidden; text-align: center; padding: 4px 0; background: #000; border-bottom: 1px dashed var(--tan-dim); position: relative; z-index: 1; }

/* paw cursor. cats do not recognize pointers. */
body, a, .chip, .bigbtn { cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><g fill='%23f2c230' stroke='%23000' stroke-width='1'><ellipse cx='11' cy='14' rx='5' ry='4'/><circle cx='4.5' cy='8' r='2.2'/><circle cx='9' cy='4.5' r='2.2'/><circle cx='14' cy='4.5' r='2.2'/><circle cx='18' cy='8' r='2.2'/></g></svg>") 11 11, auto; }

/* --- the ledger --- */
.ledger { margin: 0 0 22px; }
.lstats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin: 0 0 14px; }
.lstats div { border: 1px dashed var(--tan-dim); padding: 8px 12px; background: #000; }
.lstats div span, .lstats div b { display: block; }
.lstats div b { font-size: 16px; color: var(--eye); margin: 2px 0; }
.lstats div .dim { font-size: 11px; }
.ltable { border-top: 1px solid var(--dimmer); }
.lrow { display: grid; grid-template-columns: 11ch 16ch 1fr 14ch 2ch; gap: 0 12px; padding: 7px 4px; border-bottom: 1px solid var(--dimmer); align-items: baseline; }
.lrow.head { color: var(--tan-dim); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; }
.lrow.burn span:nth-child(2) { color: var(--pink); }
.lrow.buyback span:nth-child(2) { color: var(--green); }
.lrow .lnote { grid-column: 1 / -1; font-size: 12px; }
@media (max-width: 640px) { .lrow { grid-template-columns: 1fr 1fr; } .lrow.head { display: none; } .lrow span:nth-child(4), .lrow span:nth-child(5) { grid-column: span 1; } }
.small { font-size: 12px; }

/* --- header --- */
.site-tag { font-size: 26px; font-weight: normal; color: var(--ink); text-align: center; margin: 26px 0 8px; letter-spacing: .5px; }
.about { color: var(--ink); margin: 0 auto; max-width: 96ch; text-align: center; line-height: 1.7; }
.about b { color: var(--eye); }
.statusline { color: var(--dim); font-size: 12px; text-align: center; margin: 10px 0 0; }
.statusline .lives { color: var(--eye); letter-spacing: 2px; }
nav.cmd { margin: 22px 0 8px; line-height: 2.4; text-align: center; }
nav.cmd .navlabel { color: var(--ink); margin-right: 6px; }
nav.cmd a, .chip { display: inline-block; background: var(--eye); color: #000; padding: 0 10px; line-height: 1.9; font-size: 13px; white-space: nowrap; margin: 0 2px; }
nav.cmd a.on, .chip.on { background: #000; color: var(--eye); box-shadow: inset 0 0 0 1px var(--eye); }
nav.cmd a:hover, .chip:hover { text-decoration: none; background: #fff; color: #000; }
nav.cmd a.x { background: var(--ink); }
a.x svg, .xlink svg { width: 12px; height: 12px; vertical-align: -1px; fill: currentColor; margin-right: 6px; }

.whatis { max-width: 78ch; margin: 0 auto 6px; border-left: 2px solid var(--tan-dim); padding-left: 14px; }
.whatis p { margin: 0 0 10px; }
.whatis b { color: var(--eye); }

/* --- query, big button, sort --- */
.query { display: flex; align-items: center; gap: 10px; border: 1px solid var(--ink); background: #000; padding: 8px 12px; margin: 22px 0 12px; }
.query .qmark { color: var(--eye); }
.query input { flex: 1; background: transparent; border: 0; color: var(--ink); font-family: var(--mono); font-size: 15px; outline: none; }
.query input::placeholder { color: var(--dim); }
.bigbtn { display: block; border: 1px solid var(--eye); background: #000; color: var(--eye); text-align: center; padding: 14px; margin: 0 0 22px; text-decoration: underline; letter-spacing: .3px; }
.bigbtn:hover { background: var(--eye); color: #000; text-decoration: none; }
.sortrow { text-align: center; color: var(--ink); margin: 0 0 18px; }

/* --- files: every reading is a .txt in the box --- */
.files { margin: 0 auto 10px; max-width: 900px; }
.file { display: flex; align-items: baseline; gap: 12px; padding: 8px 4px; border-bottom: 1px solid var(--dimmer); }
.file .v { color: var(--ink); font-size: 12px; min-width: 8ch; white-space: nowrap; }
.file a { color: var(--eye); text-decoration: underline; word-break: break-all; }
.file .k { color: var(--dim); font-size: 12px; margin-left: auto; white-space: nowrap; }
.fname { color: var(--eye); }
.center { text-align: center; }

/* --- stamps (section headers) --- */
h1 { font-size: 18px; font-weight: normal; color: var(--eye); margin: 0 0 6px; }
h2 { font-size: 13px; font-weight: normal; margin: 0 0 14px; }
.stamp {
  display: inline-block; border: 2px solid var(--tan); color: var(--tan); padding: 2px 12px; letter-spacing: 3px; text-transform: uppercase;
  transform: rotate(-1.4deg); box-shadow: inset 0 0 0 1px var(--bg), inset 0 0 0 2px var(--tan-dim); background: var(--bg);
}
h2:nth-of-type(even) .stamp { transform: rotate(1.1deg); }
h2 .dim { font-size: 12px; margin-left: 8px; text-transform: none; letter-spacing: 0; }
.sub { color: var(--dim); margin: 0 0 18px; max-width: 78ch; }
p { margin: 0 0 14px; max-width: 78ch; }
.dim { color: var(--dim); }
.tan { color: var(--tan); }
.eye { color: var(--eye); }
.green { color: var(--green); }
.pink { color: var(--pink); }
.warn { color: var(--eye); font-size: 12px; letter-spacing: .5px; margin: 0 0 14px; text-align: center; }
.warn a { text-decoration: underline; }
.center { text-align: center; }
.greeting { color: var(--dim); margin: 16px 0 0; text-align: center; }
.tagline { color: var(--eye); font-size: 17px; margin: 2px 0 18px; text-align: center; text-shadow: 0 0 18px rgba(242,194,48,.25); }
.intro { max-width: 70ch; margin: 0 auto; }
.links { text-align: center; }
.links a { margin: 0 6px; }
.hb { color: var(--ink); }
.li { margin: 0 0 8px; }
.kv .dim, .kv .eye { display: inline-block; min-width: 18ch; }
.kv-c { margin-left: 18ch; display: block; }
@media (max-width: 600px) { .kv .dim, .kv .eye { display: block; min-width: 0; } .kv-c { margin-left: 0; } }
.strike { text-decoration: line-through; text-decoration-color: var(--dimmer); color: var(--dim); }

/* --- ascii --- */
.art { color: var(--ink); font-size: 12px; overflow-x: auto; margin: 6px 0 14px; }
.art.eye { color: var(--eye); text-shadow: 0 0 14px rgba(242,194,48,.2); }
.art.pink { color: var(--pink); }
.art.dim { color: var(--dim); font-size: 11px; }
.art.hero { font-size: clamp(7px, 1.25vw, 13px); margin: 6px auto 0; display: table; color: var(--ink); text-shadow: 0 0 10px rgba(217,210,192,.08); }

/* --- rows (lists with dates) --- */
.rows { margin: 0 0 8px; }
.row { display: grid; grid-template-columns: 7ch 11ch 1fr 6ch; gap: 0 14px; padding: 3px 0; align-items: baseline; border-bottom: 1px dotted var(--dimmer); }
.row .d { color: var(--dim); font-size: 12px; }
.row .v { color: var(--dim); font-size: 12px; text-align: right; }
.row.dispute { grid-template-columns: 7ch 1fr 12ch 6ch; }
.row .q { color: var(--ink); }
.row .st { font-size: 12px; }
.rows.head { display: grid; grid-template-columns: 7ch 1fr 12ch 6ch; gap: 0 14px; color: var(--tan-dim); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; padding-bottom: 4px; margin-bottom: 4px; }
@media (max-width: 600px) {
  .row { grid-template-columns: 7ch 1fr; }
  .row .d, .row .v { display: none; }
  .row.dispute { grid-template-columns: 7ch 1fr; }
  .row.dispute .st, .row.dispute .wbar { display: none; }
  .rows.head { display: none; }
}
.wbar { color: var(--eye); letter-spacing: 1px; font-size: 12px; }
.st-open .st { color: var(--green); }
.st-bleeding .st { color: var(--pink); animation: blink 1.6s steps(1) infinite; }
.st-bleeding .wbar { color: var(--pink); }
.st-locked .st { color: var(--dim); }
.st-disputed .st { color: var(--violet); }
.st-redacted .st { color: var(--dimmer); }
.st-both .st { color: var(--eye); }
.dispute-full { border-top: 1px dashed var(--dimmer); padding: 14px 0 4px; max-width: 78ch; }
.dispute-full .meta { color: var(--dim); font-size: 12px; margin-bottom: 4px; }
.hit { background: rgba(242,194,48,.06); }

.reading { border-top: 1px dashed var(--dimmer); padding: 14px 0 6px; max-width: 78ch; }
.reading .meta { color: var(--dim); font-size: 12px; margin: 0 0 2px; }
.reading .title { color: var(--eye); margin: 0 0 8px; }
.reading .lines { line-height: 1.7; }
.purr { color: var(--dim); }
.purr:hover { color: var(--eye); text-decoration: none; }

.lives-bar { color: var(--eye); letter-spacing: 2px; margin: 6px 0 14px; }
.life { border-top: 1px dashed var(--dimmer); padding: 12px 0 2px; max-width: 78ch; }
.life .lt { margin: 0 0 4px; }
.life .n { color: var(--tan); }
.life.spent .n { color: var(--pink); text-decoration: line-through; }
.life.current .n { color: var(--eye); }
.life.sealed .lt, .life.sealed .lx { color: var(--dim); }

.page { border-top: 1px dashed var(--dimmer); padding: 14px 0 4px; max-width: 70ch; }
.page .meta { color: var(--dim); font-size: 12px; margin: 0 0 8px; }
.page .ptext { line-height: 1.75; font-size: 14.5px; }

.tx { white-space: pre-wrap; line-height: 1.55; max-width: 80ch; color: var(--ink); }
.tx .who-a { color: var(--eye); }
.tx .who-b { color: var(--violet); }
.tx .who-q { color: var(--pink); }

.m-latest { color: var(--pink); font-size: 18px; letter-spacing: 1px; }
.mirror { color: var(--pink); max-width: 70ch; transform: scaleX(-1); transition: transform .5s ease; display: inline-block; }
.mirror.flat { transform: none; }
.mirror p { margin: 0 0 6px; }
.mirror-art { transform: scaleX(-1); opacity: .75; display: inline-block; }

/* --- forms --- */
form.retro label { display: block; margin: 0 0 10px; color: var(--dim); }
form.retro input:not([type="checkbox"]), form.retro select, form.retro textarea {
  background: var(--bg2); border: 1px dashed var(--tan-dim); color: var(--ink); font-family: var(--mono); font-size: 13px; padding: 4px 8px; width: 100%; max-width: 52ch;
}
form.retro select { width: auto; max-width: 100%; }
form.retro textarea { display: block; margin-top: 4px; }
form.retro label.check { color: var(--ink); }
.form-out { color: var(--eye); white-space: pre-wrap; margin: 0 0 12px; min-height: 1.6em; font-family: var(--mono); }

/* --- oracle --- */
.oracle-in { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; max-width: 78ch; }
.oracle-in .prompt { color: var(--green); }
.oracle-in input { flex: 1; min-width: 200px; background: transparent; border: 0; border-bottom: 1px dashed var(--tan-dim); color: var(--ink); font-family: var(--mono); font-size: 14px; padding: 6px 4px; outline: none; }
.oracle-in input:focus { border-color: var(--eye); }
.oracle-out { margin: 18px 0 22px; min-height: 100px; max-width: 64ch; line-height: 1.7; }
.oracle-out .l { display: block; opacity: 0; animation: reveal .5s ease forwards; }
.oracle-out .l:nth-child(1) { animation-delay: .1s; }
.oracle-out .l:nth-child(2) { animation-delay: .9s; }
.oracle-out .l:nth-child(3) { animation-delay: 1.8s; color: var(--eye); }
.oracle-out .l:nth-child(4) { animation-delay: 2.6s; color: var(--dim); font-size: 12px; }
@keyframes reveal { to { opacity: 1; } }
.cursor::after { content: "_"; animation: blink 1s steps(1) infinite; color: var(--eye); }
@keyframes blink { 50% { opacity: 0; } }
.contract { color: var(--green); word-break: break-all; }

/* --- footer --- */
footer { color: var(--dim); font-size: 12px; margin-top: 10px; text-align: center; }
footer p { margin: 0 0 10px; max-width: none; }
footer .badges { color: var(--tan); font-size: 11px; line-height: 1.15; display: inline-block; text-align: left; margin: 6px 0 10px; }
footer .counter { color: var(--eye); letter-spacing: 2px; }

/* --- boot: the box opens (unchanged) --- */
#boot { position: fixed; inset: 0; z-index: 3000; background: #050508; display: none; align-items: center; justify-content: center; flex-direction: column; cursor: pointer; }
#boot.on { display: flex; }
#boot.out { animation: bootout .65s ease forwards; }
@keyframes bootout { to { opacity: 0; transform: scale(1.02); } }
#boot pre { font-size: clamp(8px, 1.4vw, 13px); color: #d6d0c0; min-height: 22em; }
#boot .bline { margin-top: 26px; min-height: 6em; color: var(--eye); font-size: 14px; text-align: center; line-height: 1.6; padding: 0 16px; }
#boot .bhint { position: fixed; bottom: 18px; color: #3c3944; font-size: 11px; }

#eternal { position: fixed; inset: 0; z-index: 2000; background: #000; display: none; color: var(--ink); cursor: none; align-items: center; justify-content: center; flex-direction: column; }
#eternal.on { display: flex; }
#eternal pre { font-size: 12px; color: var(--eye); }
#eternal .line { margin-top: 30px; font-size: 16px; max-width: 60ch; text-align: center; min-height: 3em; transition: opacity 1.2s; padding: 0 20px; }
#eternal .hint { position: fixed; bottom: 18px; color: var(--dimmer); font-size: 11px; }

.toast { position: fixed; bottom: 20px; right: 20px; background: var(--bg); border: 1px solid var(--eye); color: var(--eye); padding: 6px 10px; font-size: 12px; z-index: 1500; display: none; }
.toast.on { display: block; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }