:root {
  color-scheme: dark;
  --ink: #eaf4ef;
  --muted: #84958e;
  --line: rgba(171, 199, 187, 0.13);
  --panel: rgba(12, 24, 21, 0.88);
  --panel-soft: rgba(18, 34, 29, 0.72);
  --background: #07100e;
  --mint: #66e0b3;
  --mint-bright: #98f2cf;
  --coral: #ff896f;
  --amber: #efc56f;
  --paper: #f2f0e8;
  --paper-line: rgba(48, 77, 65, 0.09);
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.34);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--background); color: var(--ink); }
body {
  background:
    radial-gradient(circle at 18% -10%, rgba(58, 143, 110, 0.18), transparent 33rem),
    radial-gradient(circle at 100% 20%, rgba(255, 137, 111, 0.07), transparent 28rem),
    linear-gradient(145deg, #081310 0%, #060d0c 65%, #091511 100%);
  letter-spacing: -0.01em;
}
button, input { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }

.topbar {
  min-height: 86px;
  padding: 17px 28px;
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(6, 15, 13, 0.9);
  backdrop-filter: blur(22px);
}
.brand-block { display: flex; align-items: center; gap: 12px; }
.brand-mark { width: 35px; height: 35px; display: flex; align-items: end; justify-content: center; gap: 3px; padding: 7px; border: 1px solid rgba(102,224,179,.45); border-radius: 10px; background: rgba(102,224,179,.08); transform: rotate(-3deg); }
.brand-mark span { width: 4px; border-radius: 4px; background: var(--mint); transform: rotate(12deg); }
.brand-mark span:nth-child(1) { height: 12px; }
.brand-mark span:nth-child(2) { height: 19px; }
.brand-mark span:nth-child(3) { height: 15px; }
.brand-mark.large { width: 54px; height: 54px; padding: 11px; margin-bottom: 12px; }
.brand-mark.large span { width: 6px; }
.brand-mark.large span:nth-child(1) { height: 18px; }
.brand-mark.large span:nth-child(2) { height: 29px; }
.brand-mark.large span:nth-child(3) { height: 23px; }
.brand { font-size: 21px; font-weight: 760; line-height: 1; letter-spacing: -.04em; }
.product-label { color: var(--muted); font-size: 9px; font-weight: 700; letter-spacing: .14em; margin-top: 5px; }
.session-heading { text-align: center; }
.session-heading p { color: var(--coral); font-size: 9px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; margin: 0 0 4px; }
.session-heading h1 { font-size: 17px; margin: 0; font-weight: 620; }
.connection-wrap { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.connection-wrap div { display: flex; flex-direction: column; align-items: flex-start; min-width: 126px; }
.connection-wrap strong { font-size: 12px; font-weight: 650; }
.connection-wrap span:last-child { color: var(--muted); font-size: 10px; margin-top: 3px; }
.connection-dot { width: 9px; height: 9px; border-radius: 50%; background: #64706b; box-shadow: 0 0 0 5px rgba(132,149,142,.08); }
.connection-dot.online { background: var(--mint); box-shadow: 0 0 0 5px rgba(102,224,179,.1), 0 0 18px rgba(102,224,179,.55); }
.connection-dot.error { background: var(--coral); }

.workspace { padding: 18px; display: grid; grid-template-columns: minmax(600px, 1.55fr) minmax(340px, .78fr); gap: 14px; max-width: 1700px; margin: 0 auto; }
.panel { border: 1px solid var(--line); background: linear-gradient(145deg, rgba(14, 27, 23, .96), rgba(8, 18, 15, .96)); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; }
.panel-heading { min-height: 72px; padding: 17px 19px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.panel-heading.compact { min-height: 64px; padding-block: 14px; }
.eyebrow { color: var(--mint); font-size: 9px; font-weight: 800; letter-spacing: .16em; }
.panel-heading h2 { font-size: 16px; margin: 4px 0 0; font-weight: 620; letter-spacing: -.02em; }
.toolbar { display: flex; gap: 8px; align-items: center; }
.role-badge, .live-pill { font-size: 9px; font-style: normal; font-weight: 800; letter-spacing: .1em; padding: 7px 9px; border-radius: 7px; background: rgba(102,224,179,.09); color: var(--mint-bright); border: 1px solid rgba(102,224,179,.18); }
.ble-button { border: 1px solid rgba(102,224,179,.4); color: var(--mint-bright); border-radius: 8px; background: rgba(102,224,179,.09); padding: 8px 11px; font-size: 11px; font-weight: 700; transition: .18s ease; }
.ble-button:hover { background: rgba(102,224,179,.16); border-color: var(--mint); transform: translateY(-1px); }
.ble-button.connected { color: #071710; background: var(--mint); }
.ble-status { font-size: 8px; font-weight: 800; letter-spacing: .08em; padding: 7px 8px; border-radius: 7px; border: 1px solid var(--line); color: var(--muted); display: inline-flex; align-items: center; gap: 5px; }
.ble-status i { width: 6px; height: 6px; border-radius: 50%; background: #64706b; }
.ble-status.connected { color: var(--mint-bright); border-color: rgba(102,224,179,.28); }
.ble-status.connected i { background: var(--mint); box-shadow: 0 0 8px var(--mint); }
.ble-status.error { color: var(--coral); border-color: rgba(255,137,111,.25); }
.ble-status.error i { background: var(--coral); }
.live-pill { display: flex; align-items: center; gap: 6px; }
.live-pill i { width: 5px; height: 5px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 8px var(--mint); }
.quiet-button, .primary-button, .export-button { border: 1px solid var(--line); color: var(--ink); border-radius: 8px; background: rgba(255,255,255,.035); padding: 8px 11px; font-size: 11px; font-weight: 650; transition: .18s ease; }
.quiet-button:hover { border-color: rgba(102,224,179,.35); background: rgba(102,224,179,.08); }
.primary-button { color: #062017; border-color: var(--mint); background: var(--mint); box-shadow: 0 8px 24px rgba(102,224,179,.14); }
.primary-button:hover { background: var(--mint-bright); transform: translateY(-1px); }
.primary-button.wide { width: 100%; padding: 12px 16px; margin-top: 14px; }

.canvas-shell { position: relative; margin: 15px; height: clamp(405px, 48vh, 650px); border-radius: 10px; overflow: hidden; background-color: var(--paper); background-image: linear-gradient(var(--paper-line) 1px, transparent 1px), linear-gradient(90deg, var(--paper-line) 1px, transparent 1px); background-size: 28px 28px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.7), 0 14px 34px rgba(0,0,0,.24); }
.canvas-shell.portrait { height: min(70vh, 700px); width: min(calc(100% - 30px), calc(min(70vh, 700px) * .713)); margin-left: auto; margin-right: auto; }
.canvas-shell.sender { cursor: crosshair; touch-action: none; }
.page-meta { position: absolute; z-index: 3; inset: 13px 15px auto 15px; display: flex; justify-content: space-between; color: rgba(42,69,59,.48); font-size: 8px; font-weight: 750; letter-spacing: .12em; pointer-events: none; }
.page-controls { pointer-events: auto; display: inline-flex; gap: 4px; }
.page-controls button { width: 22px; height: 18px; border: 1px solid rgba(42,69,59,.24); border-radius: 4px; background: rgba(255,255,255,.6); color: #24473b; font-weight: 800; line-height: 1; }
#inkCanvas { width: 100%; height: 100%; display: block; position: relative; z-index: 2; }
.canvas-empty { position: absolute; z-index: 1; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #486357; pointer-events: none; transition: opacity .3s ease; }
.canvas-empty.gone { opacity: 0; }
.canvas-empty strong { color: #2a473b; font-size: 14px; margin-top: 13px; }
.canvas-empty span { font-size: 11px; margin-top: 6px; opacity: .7; }
.pen-orbit { width: 51px; height: 51px; border: 1px solid rgba(42,71,59,.2); border-radius: 50%; display: grid; place-items: center; position: relative; }
.pen-orbit::after { content: ""; position: absolute; width: 5px; height: 5px; background: var(--coral); border-radius: 50%; top: 2px; left: 12px; }
.pen-orbit i { width: 3px; height: 23px; background: #2e5142; border-radius: 3px; transform: rotate(35deg); }
.canvas-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; padding: 0 18px 15px; color: var(--muted); font-size: 10px; }
.canvas-footer span:last-child { margin-left: auto; }
.legend-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; margin-right: 6px; }
.legend-dot.measured { background: var(--mint); }
.legend-dot.derived { background: var(--coral); }

.signals-panel { grid-row: span 2; }
.hero-metric { padding: 17px 19px; display: grid; grid-template-columns: 1fr 1.7fr auto; gap: 12px; align-items: center; border-bottom: 1px solid var(--line); }
.hero-metric > div:first-child { display: flex; flex-direction: column; }
.hero-metric span, .metric-grid span, .section-label { color: var(--muted); font-size: 8px; font-weight: 800; letter-spacing: .12em; }
.hero-metric strong { font-size: 29px; font-weight: 520; font-variant-numeric: tabular-nums; margin-top: 3px; }
.hero-metric small, .metric-grid small { color: var(--muted); font-size: 9px; }
.pressure-meter { height: 5px; border-radius: 6px; background: rgba(255,255,255,.07); overflow: hidden; }
.pressure-meter i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--mint), var(--amber), var(--coral)); transition: width .14s linear; }
.metric-grid { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); }
.metric-grid article { min-height: 99px; padding: 17px 19px; display: flex; flex-direction: column; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.metric-grid article:nth-child(even) { border-right: 0; }
.metric-grid article:nth-child(n+3) { border-bottom: 0; }
.metric-grid strong { font-size: 22px; font-weight: 540; margin: 8px 0 2px; font-variant-numeric: tabular-nums; }
.rhythm-card, .feature-feed { padding: 17px 19px; border-bottom: 1px solid var(--line); }
.section-label { display: flex; justify-content: space-between; }
.section-label span:last-child { color: rgba(132,149,142,.65); letter-spacing: 0; font-weight: 550; }
#signalChart { width: 100%; height: 93px; display: block; margin-top: 11px; }
.feature-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; max-height: 235px; overflow: auto; }
.feature-empty { color: var(--muted); font-size: 11px; padding: 18px 0; text-align: center; }
.feature-item { padding: 10px 11px; background: rgba(255,255,255,.025); border: 1px solid var(--line); border-left: 2px solid var(--coral); border-radius: 7px; display: grid; grid-template-columns: 1fr auto; gap: 4px; animation: feature-in .28s ease; }
.feature-item strong { font-size: 11px; font-weight: 640; text-transform: capitalize; }
.feature-item span { color: var(--coral); font-size: 11px; font-variant-numeric: tabular-nums; }
.feature-item small { color: var(--muted); font-size: 9px; grid-column: 1 / -1; }
@keyframes feature-in { from { opacity: 0; transform: translateY(-5px); } }

.stream-panel, .delivery-panel { min-height: 310px; }
.stream-stats { display: flex; gap: 8px; }
.stream-stats span { color: var(--muted); border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; font-size: 9px; font-variant-numeric: tabular-nums; }
.event-stream { height: 247px; overflow: auto; padding: 13px 17px 18px; background: #050c0a; font: 10px/1.62 ui-monospace, SFMono-Regular, Menlo, monospace; }
.code-line { white-space: pre-wrap; overflow-wrap: anywhere; border-bottom: 1px solid rgba(171,199,187,.045); padding: 5px 0; animation: feature-in .2s ease; }
.code-line .key { color: #8aa99c; }
.code-line .string { color: #8fe7c4; }
.code-line .number { color: #f2c878; }
.code-line .type { color: #ff9a83; }
.code-line.muted { color: #52645d; }

.delivery-panel { padding-bottom: 14px; }
.layer-list { padding: 8px 18px; }
.layer-list article { min-height: 58px; display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); }
.layer-number { color: var(--muted); font-size: 9px; font-variant-numeric: tabular-nums; }
.layer-list div { display: flex; flex-direction: column; gap: 3px; }
.layer-list strong { font-size: 11px; font-weight: 650; }
.layer-list small { color: var(--muted); font-size: 9px; }
.status-check { color: var(--mint); font-style: normal; font-size: 8px; font-weight: 800; letter-spacing: .08em; }
.status-check.derived-status { color: var(--coral); }
.export-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 8px 18px; }
.export-button { text-align: left; padding: 10px; display: flex; flex-direction: column; gap: 3px; }
.export-button:hover { background: rgba(102,224,179,.07); border-color: rgba(102,224,179,.28); }
.export-button span { color: var(--mint-bright); font-size: 10px; font-weight: 760; }
.export-button small { color: var(--muted); font-size: 8px; }
.disclaimer { color: var(--muted); font-size: 9px; line-height: 1.55; margin: 5px 18px 0; padding: 10px 11px; border-radius: 7px; background: rgba(255,137,111,.045); border: 1px solid rgba(255,137,111,.11); }
.disclaimer strong { color: #c4d1cb; }

.access-overlay { position: fixed; z-index: 50; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(3,10,8,.88); backdrop-filter: blur(18px); }
.access-overlay.hidden { display: none; }
.access-card { width: min(440px, 100%); padding: 32px; border: 1px solid rgba(102,224,179,.2); border-radius: 18px; background: linear-gradient(145deg, #10251e, #091511); box-shadow: 0 34px 100px rgba(0,0,0,.55); }
.access-card h2 { font-size: 25px; margin: 9px 0 7px; }
.access-card p { color: var(--muted); font-size: 12px; line-height: 1.6; margin: 0 0 20px; }
.access-card > small { display: block; color: var(--muted); font-size: 9px; text-align: center; margin-top: 12px; line-height: 1.5; }
.access-fields { display: grid; gap: 11px; }
.access-fields label { color: #b9c9c2; font-size: 10px; font-weight: 650; display: grid; gap: 6px; }
.access-fields input { width: 100%; border: 1px solid var(--line); border-radius: 8px; outline: 0; background: #07110e; color: var(--ink); padding: 11px 12px; font-size: 12px; }
.access-fields input:focus { border-color: rgba(102,224,179,.6); box-shadow: 0 0 0 3px rgba(102,224,179,.08); }
.toast { position: fixed; z-index: 70; bottom: 22px; left: 50%; transform: translate(-50%, 15px); padding: 10px 14px; border-radius: 8px; background: var(--ink); color: #07100e; font-size: 11px; font-weight: 650; opacity: 0; pointer-events: none; transition: .22s ease; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 1050px) {
  .topbar { grid-template-columns: 1fr 1fr; }
  .session-heading { display: none; }
  .workspace { grid-template-columns: 1fr; }
  .signals-panel { grid-row: auto; }
}
@media (max-width: 650px) {
  .topbar { padding: 14px 16px; }
  .product-label { display: none; }
  .connection-wrap div { min-width: auto; }
  .workspace { padding: 8px; gap: 8px; }
  .panel { border-radius: 12px; }
  .panel-heading { padding: 14px; align-items: flex-start; gap: 10px; }
  .toolbar { flex-wrap: wrap; justify-content: flex-end; }
  .quiet-button { display: none; }
  .canvas-shell { margin: 8px; height: 410px; }
  .canvas-footer { padding: 4px 11px 12px; gap: 8px; }
  .canvas-footer span:last-child { width: 100%; margin-left: 0; }
  .export-row { grid-template-columns: 1fr; }
}

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