.mm-home {
–ink: #14110f; –ink2: #1f1b18; –paper: #fbf7f0; –card: #ffffff; –line: #e8dfd0;
–text: #26211c; –muted: #7a6f63; –saffron: #e8851a; –up: #0b8a5a; –down: #d23a3a;
font-family: -apple-system, “Segoe UI”, Roboto, sans-serif; color: var(–text); box-sizing: border-box;
}
.mm *, .mm *::before, .mm *::after { box-sizing: border-box; }
.mm-home { display: grid; gap: 20px; max-width: 1200px; margin: 0 auto; }
.mm .up, .mm-card.up .mm-card__price { color: var(–up); }
.mm .down { color: var(–down); }
/* Ticker */
.mm-ticker { display: flex; align-items: center; background: var(–ink); color: #f3ece1; border-radius: 10px; overflow: hidden; font-size: 14px; }
.mm-status { flex: none; padding: 10px 14px; font-weight: 700; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; background: var(–saffron); color: var(–ink); }
.mm-status.is-closed { background: #5b5249; color: #f3ece1; }
.mm-ticker__track { overflow: hidden; flex: 1; }
.mm-ticker__inner { display: inline-flex; white-space: nowrap; animation: mm-scroll 40s linear infinite; }
.mm-ticker:hover .mm-ticker__inner { animation-play-state: paused; }
.mm-tick { padding: 10px 26px; display: inline-flex; gap: 10px; align-items: baseline; }
.mm-tick b { color: var(–saffron); font-weight: 700; }
.mm-tick em { font-style: normal; font-weight: 600; }
.mm-ticker .up { color: #4fd39b; } .mm-ticker .down { color: #ff7d7d; }
@keyframes mm-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .mm-ticker__inner { animation: none; } }
/* Index cards */
.mm-indices { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.mm-card { background: var(–card); border: 1px solid var(–line); border-top: 4px solid var(–up); border-radius: 12px; padding: 16px 18px; }
.mm-card.down { border-top-color: var(–down); }
.mm-card header { display: flex; justify-content: space-between; align-items: baseline; font-weight: 700; letter-spacing: .05em; font-size: 13px; }
.mm-card header small { font-weight: 400; color: var(–muted); letter-spacing: 0; }
.mm-card__price { font-family: Georgia, “Times New Roman”, serif; font-size: 34px; font-weight: 700; margin: 8px 0 2px; font-variant-numeric: tabular-nums; }
.mm-card.down .mm-card__price { color: var(–down); }
.mm-card__chg { font-weight: 600; font-size: 14px; }
.mm-range { margin-top: 14px; }
.mm-range__bar { position: relative; height: 4px; background: var(–line); border-radius: 4px; }
.mm-range__bar i { position: absolute; top: -4px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(–saffron); border: 2px solid #fff; box-shadow: 0 0 0 1px var(–saffron); }
.mm-range__lbl { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; color: var(–muted); }
.mm-range__lbl b { color: var(–text); font-weight: 600; }
/* Layout */
.mm-home__cols { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 860px) { .mm-home__cols { grid-template-columns: 1fr; } }
/* News */
.mm-news { background: var(–card); border: 1px solid var(–line); border-radius: 12px; padding: 18px 20px; }
.mm-h, .mm-sip h3 { margin: 0 0 12px; font-family: Georgia, serif; font-size: 22px; padding-bottom: 8px; border-bottom: 2px solid var(–saffron); display: inline-block; }
.mm-news__grid { display: grid; gap: 0; }
.mm-story { display: block; padding: 12px 0; border-top: 1px solid var(–line); text-decoration: none; color: inherit; }
.mm-story:first-child { border-top: 0; }
.mm-story strong { display: block; font-size: 16px; line-height: 1.35; font-weight: 600; }
.mm-story:hover strong { color: var(–saffron); }
.mm-story__meta { display: block; font-size: 12px; color: var(–muted); margin-bottom: 4px; text-transform: uppercase; letter-spacing: .04em; }
.mm-story.is-lead strong { font-family: Georgia, serif; font-size: 24px; }
.mm-story p { margin: 6px 0 0; color: var(–muted); font-size: 14px; }
/* SIP */
.mm-sip { background: var(–ink); color: #f3ece1; border-radius: 12px; padding: 20px; }
.mm-sip h3 { color: #fff; }
.mm-sip label { display: block; font-size: 13px; margin: 14px 0 0; color: #cfc4b4; }
.mm-sip output { float: right; color: var(–saffron); font-weight: 700; font-size: 14px; }
.mm-sip input[type=range] { width: 100%; margin-top: 8px; accent-color: var(–saffron); }
.mm-sip__out { display: grid; grid-template-columns: 110px 1fr; gap: 16px; align-items: center; margin-top: 20px; padding-top: 18px; border-top: 1px solid #3a332d; }
.mm-donut { width: 110px; height: 110px; }
.mm-donut circle { fill: none; stroke-width: 16; }
.mm-donut__bg { stroke: var(–saffron); }
.mm-donut__fg { stroke: #6b625a; transition: stroke-dasharray .3s; }
.mm-sip dl { margin: 0; display: grid; gap: 8px; }
.mm-sip dl div { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 2px 8px; font-size: 14px; }
.mm-sip dt { display: flex; align-items: center; gap: 6px; color: #cfc4b4; }
.mm-sip dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.mm-sip i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.mm-sip i.k1 { background: #6b625a; } .mm-sip i.k2 { background: var(–saffron); }
.mm-sip .total { padding-top: 8px; border-top: 1px solid #3a332d; font-size: 16px; }
.mm-sip .total dd { color: var(–saffron); font-size: 20px; }
.mm-sip .total small { width: 100%; text-align: right; color: #a89c8c; }
.mm-note { margin: 16px 0 0; font-size: 11px; color: #a89c8c; }
.mm-empty { color: var(–muted); }