/* HALYON — mocks.css · in-frame product UIs */
.canvas .mk { position: absolute; inset: 0; padding: 18px; }

/* ── Aperture ──────────────────────────────────────────────────── */
.mk-ap { display: grid; grid-template-columns: 48px 1fr; gap: 14px; }
.mk-ap .mk-side { display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding-top: 4px; border-right: 1px solid var(--line-soft); }
.mk-logo { width: 22px; height: 22px; border-radius: 7px; background: var(--gradient);
  box-shadow: 0 0 16px rgba(217,107,255,0.5); }
.mk-nav { width: 22px; height: 22px; border-radius: 7px; background: rgba(255,255,255,0.05); }
.mk-nav.on { background: rgba(255,255,255,0.16); }
.mk-main { display: flex; flex-direction: column; gap: 11px; padding-right: 6px; }
.mk-q { align-self: flex-end; background: rgba(255,255,255,0.10); border-radius: 12px 12px 4px 12px;
  padding: 9px 13px; font-size: 12px; color: var(--ink); max-width: 70%; }
.mk-a { background: var(--bg-3); border: 1px solid var(--line-soft); border-radius: 12px 12px 12px 4px;
  padding: 12px; display: flex; flex-direction: column; gap: 7px; max-width: 88%; }
.mk-line { height: 6px; border-radius: 4px; background: rgba(255,255,255,0.14); }
.mk-line.w90 { width: 90%; } .mk-line.w80 { width: 80%; } .mk-line.w70 { width: 70%; }
.mk-line.w60 { width: 60%; } .mk-line.w50 { width: 50%; }
.mk-cite { display: flex; gap: 5px; margin-top: 2px; }
.mk-cite span { width: 26px; height: 12px; border-radius: 4px;
  background: linear-gradient(90deg, rgba(255,170,140,0.35), rgba(138,92,255,0.35)); }
.mk-chart { margin-top: auto; display: flex; align-items: flex-end; gap: 8px; height: 64px; }
.mk-chart span { flex: 1; border-radius: 4px 4px 0 0;
  background: linear-gradient(var(--g-violet), rgba(138,92,255,0.15)); opacity: 0.85; }
.mk-chart span:last-child { background: linear-gradient(var(--g-peach), rgba(255,170,140,0.2)); }

/* ── Cadence ───────────────────────────────────────────────────── */
.mk-cd { display: flex; flex-direction: column; gap: 12px; }
.mk-flow { position: relative; flex: 1; display: flex; align-items: center;
  justify-content: space-between; padding: 8px 4px; }
.mk-col { display: flex; flex-direction: column; gap: 14px; z-index: 2; }
.nd { width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--line);
  background: var(--bg-3); }
.nd.live { border-color: transparent; background: var(--gradient);
  box-shadow: 0 0 18px rgba(217,107,255,0.5); animation: ndpulse 2.4s ease-in-out infinite; }
@keyframes ndpulse { 0%,100%{box-shadow:0 0 12px rgba(217,107,255,0.35)} 50%{box-shadow:0 0 26px rgba(217,107,255,0.7)} }
.mk-wires { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; }
.mk-wires path { fill: none; stroke: rgba(255,255,255,0.18); stroke-width: 1.4;
  stroke-dasharray: 4 4; animation: dash 14s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -200; } }
.mk-log { display: flex; flex-direction: column; gap: 6px; padding: 10px;
  background: var(--bg-3); border: 1px solid var(--line-soft); border-radius: 10px; }
.mk-log span { height: 6px; border-radius: 4px; background: rgba(255,255,255,0.12); }
.mk-log span.w80 { width: 80%; } .mk-log span.w70 { width: 70%; } .mk-log span.w60 { width: 60%; }

/* ── Lumen ─────────────────────────────────────────────────────── */
.mk-lm { display: grid; grid-template-columns: 1fr 0.9fr; gap: 16px; align-items: center; }
.mk-phone { background: var(--bg-3); border: 1px solid var(--line-soft); border-radius: 18px;
  padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.mk-balance small { font-family: var(--mono); font-size: 9px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-faint); }
.mk-balance b { display: block; font-size: 26px; font-weight: 600; letter-spacing: -0.03em; margin-top: 3px; }
.mk-balance b i { color: var(--ink-faint); font-style: normal; font-size: 17px; }
.mk-acts { display: flex; gap: 8px; }
.mk-acts span { flex: 1; height: 30px; border-radius: 9px; background: rgba(255,255,255,0.05); }
.mk-acts span:first-child { background: var(--gradient); box-shadow: 0 0 16px rgba(217,107,255,0.4); }
.mk-tx { display: flex; align-items: center; gap: 9px; }
.mk-tx .av { width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,0.08); flex: none; }
.mk-tx .ln { height: 7px; border-radius: 4px; background: rgba(255,255,255,0.13); flex: 1; }
.mk-tx .ln.w70 { max-width: 70%; } .mk-tx .ln.w60 { max-width: 60%; } .mk-tx .ln.w50 { max-width: 50%; }
.mk-tx .amt { width: 34px; height: 7px; border-radius: 4px; background: rgba(255,255,255,0.2); flex: none; }
.mk-cards { position: relative; height: 150px; }
.mk-cc { position: absolute; left: 0; right: 8px; height: 92px; border-radius: 14px;
  box-shadow: 0 14px 40px rgba(0,0,0,0.5); }
.mk-cc.c1 { top: 6px; transform: rotate(-5deg);
  background: linear-gradient(135deg, #1a1a22, #0a0a0e); border: 1px solid var(--line); }
.mk-cc.c2 { top: 34px; transform: rotate(4deg); background: var(--gradient); opacity: 0.92; }

@media (max-width: 560px) {
  .mk-lm { grid-template-columns: 1fr; } .mk-cards { display: none; }
  .mk-chart { height: 44px; }
}