/* Scene styles. */
.ct-host { position: relative; overflow: hidden; background: var(--pf-bg-panel); contain: layout paint; }
.ct-canvas {
  position: absolute; left: 0; top: 0; width: 940px; height: 588px; transform-origin: 0 0;
  font-family: var(--font-sans); color: var(--pf-text-3);
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
  -webkit-font-smoothing: antialiased; user-select: none;
}
.ct-canvas svg { position: absolute; overflow: visible; }
.ct-world { position: absolute; inset: 0; }
.ct-world > * { position: absolute; }
.ct-mono { font-family: var(--font-mono); }


.ct-bg { left: 0; top: 0; width: 940px; height: 588px; pointer-events: none; }
.ct-bg .dot { fill: var(--pf-chart-grid); }
.ct-bg .crop { fill: none; stroke: var(--pf-text-4); stroke-width: 1; opacity: .7; }


.ct-ghost .gh { fill: none; stroke: var(--pf-border-strong); stroke-width: 1; stroke-dasharray: 2 4; }
.ct-ghost .gx { fill: none; stroke: var(--pf-text-4); stroke-width: 1; }


.ct-lab {
  display: flex; align-items: center; gap: 8px; height: 12px;
  font: 500 9.5px/12px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--pf-text-4);
  white-space: nowrap;
}
.ct-lab b { font-weight: 500; color: var(--pf-text-3); transition: color 200ms ease; }
.ct-lab.is-now b { color: var(--pf-text-hero); }
.ct-lab i { font-style: normal; color: var(--pf-border-strong); }
.ct-lab--r { justify-content: flex-end; text-align: right; }
.ct-lab--r b { color: var(--pf-text-2); }


.ct-hostline { display: flex; align-items: center; gap: 7px; height: 14px; font: 400 11px/14px var(--font-mono); color: var(--pf-text-4); white-space: nowrap; }
.ct-hostline svg { position: static; width: 12px; height: 12px; stroke-width: 2; color: var(--pf-text-4); }
.ct-hostline em { font-style: normal; color: var(--pf-text-3); }

.ct-hash { height: 28px; font: 400 22px/28px var(--font-mono); letter-spacing: 0; white-space: pre; color: var(--pf-text-hero); }
.ct-hash span { display: inline-block; transition: color 240ms ease; }
.ct-hash span.is-x { color: var(--pf-text-4); }
.ct-hash span.is-pre { color: var(--pf-text-3); }
.ct-hash.is-settled span:not(.is-pre) { color: var(--pf-text); }
.ct-head { width: 1.5px; height: 36px; background: var(--pf-text-hero); }

.ct-ruler line { stroke: var(--pf-text-4); stroke-width: 1; shape-rendering: crispEdges; }
.ct-ruler line.is-major { stroke: var(--pf-text-3); }
.ct-ruler line.is-base { stroke: var(--pf-text-3); }
.ct-rlab { font: 500 9.5px/12px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--pf-text-4); white-space: nowrap; }
.ct-rlab b { font-weight: 500; color: var(--pf-text-2); }


.ct-ring { width: 44px; height: 44px; }
.ct-ring circle, .ct-ring path { fill: none; stroke: var(--pf-text-hero); stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.ct-ring .ct-ring__track { stroke: var(--pf-border-strong); }
.ct-vname { font: 500 17px/22px var(--font-sans); letter-spacing: -.01em; color: var(--pf-text-hero); white-space: nowrap; }
.ct-vsub { font: 400 12px/16px var(--font-sans); color: var(--pf-text-3); white-space: nowrap; }
.ct-vmeta { font: 400 10.5px/14px var(--font-mono); color: var(--pf-text-4); white-space: nowrap; }
.ct-vmeta b { font-weight: 400; color: var(--pf-text-2); }


.ct-hair { height: 1px; background: var(--pf-border); }
.ct-hair i { position: absolute; inset: 0; background: var(--pf-text-hero); transform-origin: 0 50%; transform: scaleX(0); }


.ct-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 16px; grid-template-rows: 12px 18px; column-gap: 8px; row-gap: 5px; align-content: center; height: 46px; border-bottom: 1px solid var(--pf-border); }
.ct-row:last-of-type { border-bottom: 0; }
.ct-row__k { grid-column: 1; grid-row: 1; font: 500 9.5px/12px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--pf-text-4); }
.ct-row__v { grid-column: 1 / 3; grid-row: 2; overflow: hidden; text-overflow: clip; white-space: nowrap; font: 400 11.5px/18px var(--font-mono); color: var(--pf-text-3); transition: color 200ms ease; }
.ct-row.is-reading .ct-row__v { color: var(--pf-text-hero); }
.ct-row.is-ok .ct-row__v { color: var(--pf-text-2); }
.ct-row__m { grid-column: 2; grid-row: 1; font: 500 9.5px/12px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--pf-text-2); }
.ct-row__mark { grid-column: 3; grid-row: 1; position: relative; width: 16px; height: 12px; }
.ct-row__mark > span { position: absolute; left: 1px; top: -1px; width: 14px; height: 14px; display: grid; place-items: center; }
.ct-row__mark svg { position: static; width: 14px; height: 14px; }
.ct-row__mark .o svg { color: var(--pf-text-4); stroke-width: 2; }
.ct-row__mark .k svg { color: var(--pf-text-hero); stroke-width: 3; }


.ct-cal { width: 344px; height: 42px; }
.ct-cal i { position: absolute; width: 9px; height: 9px; border: 0 solid var(--pf-text-hero); }
.ct-cal i:nth-child(1) { left: 0; top: 0; border-left-width: 1.5px; border-top-width: 1.5px; }
.ct-cal i:nth-child(2) { right: 0; top: 0; border-right-width: 1.5px; border-top-width: 1.5px; }
.ct-cal i:nth-child(3) { left: 0; bottom: 0; border-left-width: 1.5px; border-bottom-width: 1.5px; }
.ct-cal i:nth-child(4) { right: 0; bottom: 0; border-right-width: 1.5px; border-bottom-width: 1.5px; }


.ct-grid path { fill: none; stroke: var(--pf-border-strong); stroke-width: 1; shape-rendering: crispEdges; }
.ct-grid path.is-in { stroke: var(--pf-border); }
.ct-cell { display: grid; align-content: start; row-gap: 3px; padding: 11px 13px 0; box-sizing: border-box; }
.ct-cell__n { font: 400 12.5px/16px var(--font-mono); color: var(--pf-text); white-space: nowrap; transition: color 200ms ease; }
.ct-cell__w { font: 400 11px/14px var(--font-sans); color: var(--pf-text-4); white-space: nowrap; }
.ct-cell__fx { display: flex; align-items: center; gap: 5px; margin-top: 3px; font: 500 9px/12px var(--font-mono); letter-spacing: .11em; text-transform: uppercase; color: var(--pf-text-4); white-space: nowrap; transition: color 200ms ease; }
.ct-cell__fx svg { position: static; width: 10px; height: 10px; stroke-width: 2.25; }
.ct-cell__fx .lk { display: none; }
.ct-cell.is-limit .ct-cell__fx { color: var(--pf-text-2); }
.ct-cell.is-limit .ct-cell__fx .lk { display: inline-grid; }
.ct-cell.is-hot .ct-cell__n { color: var(--pf-text-hero); }
.ct-cell.is-hot .ct-cell__fx { color: var(--pf-text-hero); }
.ct-cell__hot { position: absolute; inset: 0; box-shadow: inset 0 0 0 1px var(--pf-text-hero); background: rgb(255 255 255 / .035); opacity: 0; pointer-events: none; }


.ct-band .box { fill: none; stroke: var(--pf-border-strong); stroke-width: 1; }
.ct-band .bus { fill: none; stroke: var(--pf-text-3); stroke-width: 1; }
.ct-band .w { stroke: var(--pf-text-hero); stroke-width: 1.25; }
.ct-band .w.is-no { stroke: var(--pf-text-4); stroke-width: 1; stroke-dasharray: 3 4; }
.ct-band .cap { stroke: var(--pf-text-2); stroke-width: 2; }
.ct-band .node { fill: var(--pf-text-hero); }
.ct-band .pk { fill: var(--pf-text-hero); }
.ct-say { display: grid; grid-template-columns: 16px minmax(0, 1fr); column-gap: 10px; padding: 14px 16px; box-sizing: border-box; }
.ct-say svg { position: static; width: 16px; height: 16px; stroke-width: 1.75; color: var(--pf-text-2); margin-top: 1px; }
.ct-say p { margin: 0; font: 400 13.5px/19px var(--font-sans); letter-spacing: -.005em; color: var(--pf-text-2); text-wrap: balance; }
.ct-say p b { font-weight: 500; color: var(--pf-text-hero); }
.ct-term {
  display: flex; align-items: center; justify-content: center; height: 22px; box-sizing: border-box;
  border: 1px solid var(--pf-border-strong); border-radius: 4px; background: var(--pf-bg-panel);
  font: 500 9.5px/12px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--pf-text-3);
  transition: color 200ms ease, border-color 200ms ease, background-color 200ms ease;
}
.ct-term.is-lit { border-color: var(--pf-text-hero); color: var(--pf-text-hero); }
.ct-term.is-flash { background: var(--pf-text-hero); color: var(--pf-bg); }
.ct-term.is-no { border-style: dashed; color: var(--pf-text-4); }
.ct-fns { height: 22px; display: flex; align-items: center; font: 400 10.5px/14px var(--font-mono); color: var(--pf-text-3); white-space: nowrap; }
.ct-fns i { font-style: normal; color: var(--pf-text-4); padding: 0 6px; }
.ct-fns.is-no { font-family: var(--font-sans); font-size: 11.5px; color: var(--pf-text-4); }