/* Martini demo */
.ck-lede { color: var(--on-night-2); font-size: 18px; max-width: 40em; margin-top: 18px; }
.case-page .case-hero { padding-bottom: 28px; }
.ck-band { background: var(--hero-bg); color: var(--on-night); padding: 0 0 64px; scroll-margin-top: var(--nav-h); }
.ck-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; align-items: start; }
.ck-main { max-width: 640px; width: 100%; justify-self: center; }
.ck-toolbar { margin-bottom: 12px; display: flex; justify-content: center; }
.ck-legend .lg { justify-content: center; }
.ck-stage { position: relative; width: 100%; margin: 0 auto; border-radius: 12px; overflow: hidden; border: 1px solid var(--night-line);
  background: radial-gradient(120% 90% at 50% 30%, #121c3a, #080e1e 70%); }
.ck-stage canvas { position: absolute; inset: 0; }
.ck-status[hidden] { display: none; }
.ck-status { position: absolute; inset: 0; display: grid; place-items: center; font: 400 13px var(--mono); color: var(--on-night-2); }
.ck-legend { margin-top: 12px; }
.seg { display: inline-flex; border: 1px solid var(--night-line); border-radius: 999px; padding: 3px; background: rgba(17,27,54,.6); }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span { display: block; padding: 7px 14px; border-radius: 999px; font-size: 13.5px; color: var(--on-night-2); cursor: pointer; transition: background .2s, color .2s; }
.seg input:checked + span { background: var(--blue); color: #fff; }
.seg input:focus-visible + span { outline: 2px solid var(--blue-2); outline-offset: 2px; }
.seg-sm span { padding: 5px 11px; font: 500 12.5px var(--mono); }
.lg { display: flex; align-items: center; gap: 10px; font: 400 11.5px var(--mono); color: var(--on-night-2); flex-wrap: wrap; }
.lg[hidden] { display: none; }
.lg em { font-style: normal; opacity: .85; }
.ramp { display: block; width: 160px; height: 8px; border-radius: 4px; }
.ramp.ck-temp { background: linear-gradient(90deg, #182268, #2a68d0, #60bee8, #e2ecfa, #f2ba6e, #d9603b); }
.ramp.ck-abv { background: linear-gradient(90deg, #46aaeb, #96c8d2, #ecc86a); }

.ck-panel { background: var(--night-2); border: 1px solid var(--night-line); border-radius: 12px; padding: 20px;
  display: flex; flex-direction: column; gap: 16px; position: sticky; top: calc(var(--nav-h) + 16px); }
.ck-clock { font: 400 13px var(--mono); color: var(--on-night-2); }
.ck-clock b { font: 400 34px/1.1 var(--serif); color: #fff; margin-left: 4px; }
.ck-transport { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#ck-scrub { width: 100%; accent-color: var(--blue-2); }
.ck-read div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--night-line); }
.ck-read dt { font-size: 13.5px; color: var(--on-night-2); }
.ck-read dd { font: 500 13px var(--mono); color: var(--on-night); text-align: right; }
.ck-chart { width: 100%; height: 90px; display: block; border-radius: 6px; background: rgba(8,14,30,.5); }
.ck-chart-key { font: 400 11px var(--mono); color: var(--on-night-2); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ck-chart-key i { display: inline-block; width: 12px; height: 3px; border-radius: 2px; margin-left: 6px; }

@media (max-width: 980px) {
  .ck-grid { grid-template-columns: 1fr; }
  .ck-panel { position: static; }
}
.ck-air-key { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; }
.ck-air-key i { width: 26px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, rgba(120,200,245,.15), rgba(40,110,220,.85)); }