/* muse on fomo — the light hybrid.
   A white page like the logo, black and blush from the character, and the green
   CRT kept as the one dark object. One centred column, a handful of sections,
   long lists folded behind a button. Bracket buttons, the tape and the mono type
   carry over from the old den. */

:root{
  --page:#fffdf8; --ink:#111; --muted:#777; --panel:#fff; --line:#111;
  --shadow:4px 4px 0 #111; --row:#faf6ee; --link:#1a1a8c;
  --blush:#ff8fa3; --blush-soft:#ffd9e0;
  --green:#2ee85f; --green-dark:#04441e; --yellow:#ffdd00; --red:#c11515;
  --indigo:#1a1a8c; --silver:#c0c0c0;
  --mono:"Courier Prime","Courier New",monospace;
  --comic:"Comic Neue","Comic Sans MS",cursive;
}

*{box-sizing:border-box}
body{margin:0;background:var(--page);color:var(--ink);font-family:var(--mono);font-size:14px;line-height:1.55}
.den{max-width:760px;margin:0 auto;padding:22px 16px 56px}
a{color:var(--link)}
[hidden]{display:none !important}
.defs{position:absolute;width:0;height:0;overflow:hidden}

/* ---------- the lockup ---------- */
.lockup{display:flex;align-items:center;justify-content:center;gap:18px;margin:4px 0 16px;padding:8px 12px}
.wordmark{font-family:"Pacifico",cursive;font-size:74px;line-height:1;color:#111;position:relative;padding-right:26px}
.wordmark::after{content:"";position:absolute;right:0;top:4px;width:26px;height:26px;transform:rotate(28deg);
  background:
    linear-gradient(#111,#111) 4px 12px/4px 12px no-repeat,
    linear-gradient(#111,#111) 12px 6px/4px 12px no-repeat,
    linear-gradient(#111,#111) 20px 12px/4px 12px no-repeat}
.tagline{font-size:13px;letter-spacing:.34em;margin-top:6px;text-align:center}
.lockup svg{width:112px;height:126px;flex:none}

/* ---------- the contract address ---------- */
.ca{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 10px;
  margin:0 0 14px;padding:7px 10px;background:#fff;border:2px solid var(--line);box-shadow:var(--shadow)}
.ca-k{font-weight:700;font-size:11px;letter-spacing:.1em;background:#111;color:#fff;padding:1px 7px}
.ca code{font-family:var(--mono);font-size:13px;word-break:break-all;background:none;border:none;padding:0;
  user-select:all}
.ca-note{font-size:11px;color:var(--muted);flex-basis:100%;text-align:center}

/* ---------- the tape ---------- */
.ticker{overflow:hidden;background:#000;border:2px solid var(--line);margin:0 0 14px;padding:4px 0;border-radius:2px}
/* the list is rendered twice, so sliding exactly half its width loops with no gap */
.ticker-in{display:inline-block;white-space:nowrap;font-size:11.5px;color:var(--green);animation:crawl 70s linear infinite}
.ticker-in.quiet{animation:none;display:block;text-align:center;color:#888}
.ticker:hover .ticker-in{animation-play-state:paused}
.ticker-in .tok{color:var(--yellow);font-weight:700}
.ticker-in .up{color:var(--green)} .ticker-in .down{color:#ff7a7a} .ticker-in .flat{color:var(--silver)}
.ticker-in .vol{color:#888} .ticker-in .sep{color:#444}
@keyframes crawl{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- panels ---------- */
.panel{background:var(--panel);border:2px solid var(--line);box-shadow:var(--shadow);padding:14px 16px;margin:0 0 22px}
.panel h2,.closes h2{margin:0 0 10px;font-family:var(--comic);font-size:19px;color:#111;
  border-bottom:1px dashed #999;padding-bottom:5px}
.panel h2.second{margin-top:16px}
.panel p{margin:0 0 9px;font-size:13.5px}
.panel p:last-child{margin-bottom:0}
.sub{font-size:12px;color:#555}
.empty{color:#777;font-style:italic}
.follow{margin-top:11px !important}
.follow a{font-weight:700}

.facts{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.fact{font-size:11px;border:1.5px solid #111;padding:1px 7px;background:var(--blush-soft)}
.fact b{font-weight:700}

/* ---------- the book: a CRT with muse sitting on it ---------- */
.desk{position:relative;margin:74px 0 22px}
.desk .sitter{position:absolute;top:-92px;right:34px;width:96px;height:108px;z-index:2}
.crt{background:#0b0b0b;border:2px solid var(--line);box-shadow:var(--shadow);border-radius:10px;
  padding:14px 10px;overflow-x:auto;text-align:center}
.crt pre{display:inline-block;text-align:left;margin:0;font-family:var(--mono);font-size:12px;line-height:1.2;
  color:var(--green);text-shadow:0 0 5px rgba(0,255,68,.18)}
.caption{font-size:11px;color:var(--muted);text-align:center;margin:8px 0 0}

/* ---------- close signals ---------- */
.closes{background:#fff0f0;border:2px solid var(--red);box-shadow:4px 4px 0 var(--red);padding:12px 16px;margin:0 0 22px}
.closes h2{color:var(--red);border-bottom-color:#e0a0a0}
.closes ul{list-style:none;margin:0;padding:0;font-size:12.5px}
.closes li{padding:4px 0;border-bottom:1px dotted #e0a0a0;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
.closes li:last-child{border-bottom:none}
.closes .verb{font-weight:700;color:#fff;background:var(--red);padding:0 6px;font-size:10.5px;letter-spacing:.06em}
.closes .when{color:#8a5050;font-size:11px;margin-left:auto}

/* ---------- muse's latest trade ---------- */
.trade-panel{background:var(--blush-soft)}
.trade-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;font-size:15px}
.trade-head .verb{font-weight:700;color:#fff;background:#0a7a2f;padding:0 7px;font-size:12px;letter-spacing:.06em}
.trade-head .verb.sell{background:var(--red)}
.trade-head .sym{font-size:18px}
.trade-head .when{margin-left:auto;font-size:11px;color:#555}
.trade-grid{display:grid;grid-template-columns:repeat(4,auto);gap:4px 18px;justify-content:start;font-size:12.5px;margin:8px 0}
.trade-grid .k{font-size:10px;color:#555;text-transform:uppercase;letter-spacing:.07em;display:block}
.address{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:11.5px;background:#fff;border:1.5px solid #111;
  padding:4px 8px;margin-top:8px;word-break:break-all}
.address code{background:none;border:none;padding:0;flex:1 1 200px}

/* ---------- the ranked list ---------- */
.prop{display:grid;grid-template-columns:30px 1fr 86px 54px 104px;gap:8px;align-items:center;
  padding:8px;border-bottom:1px dotted #bbb;font-size:12.5px}
.prop:nth-child(even){background:var(--row)}
.prop.top{border:2px solid #111;background:#fff;margin-bottom:8px;box-shadow:3px 3px 0 #111}
.prop.top.taken{background:#efffef}
.rank{font-family:var(--comic);font-size:16px;color:var(--red)}
.sym{font-weight:700}
.meta{font-size:11px;color:#666}
.lane{font-size:10px;padding:0 5px;border:1px solid currentColor;margin-left:5px;letter-spacing:.05em}
.lane.fresh{color:#c2185b;background:var(--blush-soft)}
.lane.settled{color:var(--indigo)}
.conf{display:flex;gap:2px;align-items:center}
.conf i{display:block;width:6px;height:10px;border:1px solid #111;background:#fff}
.conf i.on{background:#111}
.conf b{font-size:10.5px;margin-left:4px;font-weight:400;color:#444}
.size{text-align:right;font-variant-numeric:tabular-nums}
.chip{font-size:9.5px;font-weight:700;letter-spacing:.06em;text-align:center;padding:2px 4px;border:1.5px solid #111}
.chip.taken{background:var(--green);color:#032b12}
.chip.refused{background:#fff0f0;color:#8a1010;border-style:dashed;border-color:var(--red)}
.chip.watching{background:#eee;color:#444}
.why{grid-column:2 / -1;font-size:11.5px;color:#444;margin-top:-3px}
.why.bad{color:#8a1010}

/* ---------- buttons, dropdowns, tabs ---------- */
.btn,details.more summary{font-family:var(--mono);font-size:12px;cursor:pointer;background:var(--silver);
  border:2px outset var(--silver);color:#000;padding:1px 8px}
details.more{margin-top:10px}
details.more summary{list-style:none;display:inline-block}
details.more summary::-webkit-details-marker{display:none}
details.more[open] summary{border-style:inset;background:var(--yellow);margin-bottom:8px}
.tabs{display:flex;gap:4px;margin-bottom:8px}
.btn[aria-selected="true"]{border-style:inset;background:var(--yellow);font-weight:700}
.btn.copy{font-size:11px;padding:0 6px}

/* ---------- muse says ---------- */
.bubble{display:flex;gap:12px;align-items:flex-start}
.bubble svg{width:62px;height:70px;flex:none}
.say{position:relative;background:var(--blush-soft);border:2px solid #111;border-radius:14px;padding:10px 13px;font-size:13px;flex:1}
.say::before{content:"";position:absolute;left:-11px;top:20px;border:9px solid transparent;border-right-color:#111;border-left:0}
.say::after{content:"";position:absolute;left:-7px;top:22px;border:7px solid transparent;border-right-color:var(--blush-soft);border-left:0}
.say small{display:block;margin-top:6px;color:#666;font-size:11px}
.rounds{list-style:none;margin:0;padding:0;font-size:12px}
.rounds li{padding:3px 0;border-bottom:1px dotted #ccc;display:flex;gap:10px}
.rounds .t{color:#666;flex:none;width:44px}
.rounds .none{color:#888}

/* ---------- tables + rules ---------- */
.scroll-x{overflow-x:auto;max-width:100%}
.grid{width:100%;border-collapse:collapse;font-size:12px;min-width:420px}
.grid th{background:#111;color:#fff;text-align:left;padding:4px 6px;font-weight:400;font-size:11px}
.grid td{border-bottom:1px dotted #bbb;padding:4px 6px;vertical-align:top}
.grid .num{text-align:right;font-variant-numeric:tabular-nums}
.up{color:#0a7a2f;font-weight:700} .down{color:var(--red);font-weight:700}
.tag-book{font-size:10px;border:1px solid currentColor;padding:0 4px;letter-spacing:.05em}
.tag-book.real{color:#0a7a2f} .tag-book.paper{color:#666}
ol.rules{margin:0;padding-left:21px;font-size:12.5px}
ol.rules li{margin-bottom:5px}
ol.rules li::marker{color:var(--red);font-weight:700}

footer{text-align:center;font-size:10.5px;color:var(--muted);margin-top:30px;line-height:1.9}

@media (max-width:640px){
  .wordmark{font-size:52px} .lockup svg{width:84px;height:94px}
  .prop{grid-template-columns:24px 1fr 96px}
  .prop .conf,.prop .size{display:none}
  .desk .sitter{right:14px;width:80px;height:90px;top:-77px}
  .crt pre{font-size:10px}
  .trade-grid{grid-template-columns:repeat(2,auto)}
}
@media (prefers-reduced-motion:reduce){ .ticker-in{animation:none} }