/* Learn tutorial snippets. The figure reserves the 16:10 stage before any code
   loads, so nothing on the page moves. Studio colours follow the Chart Maker
   shell tokens (platform/routes/chart-maker-shell/src/styles-controls.css). */

.learn-snippet {
  width: min(960px, calc(100vw - 48px));
  margin: 18px 0 8px calc(50% - min(480px, 50vw - 24px));
}

.learn-snippet-frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: #121419;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
}

.learn-snippet-stage {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-origin: 0 0;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  color: #e9eef4;
  line-height: 1.3;
  -webkit-font-smoothing: antialiased;
}

.learn-snippet figcaption {
  margin-top: 12px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 15px;
  line-height: 1.5;
  text-align: center;
}

.learn-snippet-pending {
  display: grid;
  place-items: center;
  height: 100%;
  margin: 0;
  font-size: 15px;
}

.learn-snippet-controls {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 5;
  display: flex;
  gap: 6px;
}

.learn-snippet-button {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: rgba(10, 11, 15, 0.82);
  color: #fff;
  cursor: pointer;
}

.learn-snippet-button svg {
  width: 14px;
  height: 14px;
}

.learn-snippet-button:hover,
.learn-snippet-button:focus-visible {
  border-color: rgba(50, 197, 253, 0.6);
  color: #32c5fd;
}

.learn-snippet.is-still .learn-snippet-controls {
  display: none;
}

/* ---------- studio copy ---------- */

.ls-app {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #121419;
  font-size: 13px;
}

.ls-app [hidden] {
  display: none !important;
}

.ls-top {
  position: absolute;
  inset: 0 0 auto 0;
  height: 44px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.ls-top img {
  width: 108px;
  height: auto;
}

.ls-col {
  position: absolute;
  top: 44px;
  left: 0;
  bottom: 0;
  width: 292px;
  padding: 10px 10px 0;
  background: #0a0b0f;
}

.ls-col-scroll {
  position: absolute;
  top: 146px;
  left: 10px;
  right: 10px;
  bottom: 0;
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 10px;
}

.ls-col-inner {
  display: grid;
  gap: 8px;
  transition: none;
}

.ls-card {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(30, 35, 44, 0.96), rgba(22, 26, 33, 0.98));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 18px 36px rgba(0, 0, 0, 0.45);
}

.ls-eyebrow {
  color: rgba(181, 194, 208, 0.62);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.ls-step {
  margin: 4px 2px -2px;
}

.ls-row3,
.ls-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}

.ls-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 30px;
  border-radius: 8px;
  background: #2e3541;
  color: #f1f5f9;
  font-size: 13px;
  font-weight: 500;
  transition: background 0.15s, transform 0.12s;
}

.ls-btn.is-primary {
  background: linear-gradient(180deg, #4dd2ff, #2bc3fd);
  color: #08131a;
}

.ls-btn.is-pressed,
.ls-tool.is-pressed,
.ls-de-btn.is-pressed,
.ls-de-choose.is-pressed {
  transform: scale(0.95);
}

.ls-scrub {
  position: relative;
  height: 5px;
  margin: 6px 4px 0;
  border-radius: 3px;
  background: #3a4250;
}

.ls-scrub-fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 3px;
  background: #3cc3f0;
}

.ls-scrub-knob {
  position: absolute;
  top: 50%;
  width: 13px;
  height: 13px;
  margin: -6.5px 0 0 -6.5px;
  border-radius: 50%;
  background: #3cc3f0;
}

.ls-times {
  display: flex;
  justify-content: space-between;
  color: rgba(211, 221, 231, 0.62);
  font-size: 10px;
}

.ls-select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 32px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 9px;
  background: #0f1217;
  color: #f1f5f9;
  font-size: 12px;
}

.ls-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.ls-fields label,
.ls-field {
  display: grid;
  gap: 5px;
  color: rgba(211, 221, 231, 0.7);
  font-size: 11px;
}

.ls-input {
  display: flex;
  align-items: center;
  height: 30px;
  padding: 0 10px;
  border-radius: 8px;
  background: #0f1217;
  color: #fff;
  font-size: 12px;
}

.ls-input.is-focus {
  box-shadow: 0 0 0 1.5px #3cc3f0;
}

.ls-seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 3px;
  border-radius: 9px;
  background: #0f1217;
  font-size: 12px;
  text-align: center;
}

.ls-seg span {
  padding: 5px 0;
  border-radius: 7px;
  color: rgba(211, 221, 231, 0.7);
}

.ls-seg .is-on {
  background: #2e3541;
  color: #fff;
}

/* inspector card for a selected element */
.ls-inspector-title {
  color: rgba(211, 221, 231, 0.7);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ls-note {
  color: rgba(211, 221, 231, 0.62);
  font-size: 11px;
}

.ls-drawer {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: rgba(15, 18, 23, 0.4);
}

.ls-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 34px;
  padding: 0 10px;
  color: #f1f5f9;
  font-size: 12.5px;
}

.ls-drawer-body {
  display: grid;
  gap: 8px;
  padding: 0 10px 10px;
}

.ls-switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: rgba(211, 221, 231, 0.75);
  font-size: 11.5px;
}

.ls-switch {
  position: relative;
  width: 32px;
  height: 18px;
  border-radius: 9px;
  background: #3a4250;
  transition: background 0.2s;
}

.ls-switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #c9d2dc;
  transition: transform 0.2s, background 0.2s;
}

.ls-switch.is-on {
  background: #1f6d8a;
}

.ls-switch.is-on::after {
  transform: translateX(14px);
  background: #3cc3f0;
}

.ls-select.ls-select-soft {
  background: #2e3541;
  border-color: transparent;
}

.ls-wide-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: #2e3541;
  color: #f1f5f9;
  font-size: 12px;
}

.ls-wide-btn.is-active {
  border-color: #3cc3f0;
  box-shadow: 0 0 0 1px rgba(60, 195, 240, 0.35);
}

.ls-highlight {
  box-shadow: 0 0 0 1.5px #3cc3f0 !important;
}

/* canvas area */
.ls-canvas-area {
  position: absolute;
  top: 44px;
  left: 292px;
  right: 0;
  bottom: 0;
}

.ls-toolbar {
  position: absolute;
  top: 10px;
  left: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  gap: 5px;
  height: 46px;
  padding: 0 8px;
  border-radius: 12px;
  background: #1b2028;
}

.ls-tool {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #262c36;
  color: #e6edf3;
  transition: background 0.15s, transform 0.12s;
}

.ls-tool-flat {
  background: transparent;
}

.ls-tool.is-active {
  background: #1d3a48;
  color: #3cc3f0;
  box-shadow: inset 0 0 0 1px rgba(60, 195, 240, 0.5);
}

.ls-tool-sep {
  width: 1px;
  height: 24px;
  margin: 0 3px;
  background: rgba(255, 255, 255, 0.1);
}

.ls-bg {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 8px 0 2px;
  border-radius: 8px;
  background: #262c36;
  font-size: 12px;
}

.ls-swatch {
  width: 18px;
  height: 18px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 5px;
  background: #000;
}

.ls-tip {
  position: absolute;
  z-index: 3;
  padding: 5px 8px;
  border-radius: 6px;
  background: #e9eef4;
  color: #0a0b0f;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  transform: translateX(-50%);
}

.ls-chart-host {
  position: absolute;
  top: 70px;
  left: 50%;
  width: 470px;
  height: 470px;
  margin-left: -235px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.ls-chart {
  display: block;
  width: 100%;
  height: 100%;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
}

.lc-title { fill: #fff; font-size: 66px; font-weight: 700; }
.lc-sub { fill: #fff; font-size: 24px; }
.lc-date { fill: #fff; font-size: 40px; font-weight: 700; }
.lc-axis { stroke: #fff; stroke-width: 1.6; }
.lc-tick { fill: #fff; font-size: 22px; }
.lc-line { fill: none; stroke: #35c4c9; stroke-width: 4; stroke-linejoin: round; stroke-linecap: round; }
.lc-end-tick { stroke: #fff; stroke-width: 1.5; }
.lc-end { fill: #fff; font-size: 22px; }
.lc-total { fill: #fff; font-size: 36px; }
.lc-built { fill: #fff; font-size: 22px; font-weight: 700; }
.lc-source { fill: #fff; font-size: 21px; }
.lc-dot { fill: #fff; stroke: #000; stroke-width: 2; }
.lc-dot.is-selected { stroke: #3cc3f0; stroke-width: 4; }

/* Data Editor: the studio's light, full-screen sheet */
.ls-de {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: #fff;
  color: #14171c;
  font-size: 12px;
}

.ls-de-head {
  padding: 14px 18px 8px;
}

.ls-de-title {
  font-size: 17px;
  font-weight: 700;
}

.ls-de-sub {
  margin-top: 2px;
  color: #5b6573;
  font-size: 11.5px;
}

.ls-de-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px 10px;
  border-bottom: 1px solid #e6e9ee;
}

.ls-de-spacer {
  flex: 1;
}

.ls-de-btn {
  padding: 6px 11px;
  border: 1px solid #c9ced6;
  border-radius: 9px;
  background: #f7f8fa;
  font-size: 12px;
  transition: transform 0.12s;
}

.ls-de-apply {
  font-weight: 700;
}

.ls-de-formula {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 12px;
  padding: 6px 10px;
  border: 1px solid #dfe3e8;
  border-radius: 10px;
}

.ls-de-ref {
  padding: 3px 10px;
  border: 1px solid #dfe3e8;
  border-radius: 6px;
  font-weight: 600;
}

.ls-de-sum {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: #14171c;
  color: #fff;
}

.ls-de-fx {
  color: #2563eb;
  font-style: italic;
  font-weight: 700;
}

.ls-de-body {
  position: absolute;
  top: 150px;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: 1fr 300px;
}

.ls-de-grid {
  overflow: hidden;
}

.ls-de-grid table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 11.5px;
}

.ls-de-grid th,
.ls-de-grid td {
  height: 24px;
  border: 1px solid #e3e6ea;
  padding: 0 6px;
  overflow: hidden;
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ls-de-grid th {
  background: #f3f4f6;
  color: #3c4450;
  font-weight: 500;
}

.ls-de-grid thead th:first-child,
.ls-de-grid tbody th {
  width: 34px;
}

.ls-de-grid td.is-new {
  animation: ls-cell-in 0.35s ease-out both;
}

.ls-de-grid td.is-selected {
  box-shadow: inset 0 0 0 2px #2563eb;
}

@keyframes ls-cell-in {
  from { background: #e7f6fb; }
  to { background: transparent; }
}

.ls-de-map {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 10px;
  border-left: 1px solid #e6e9ee;
  background: #f5f6f8;
}

.ls-de-map-title {
  color: #3c4450;
  font-size: 12px;
}

.ls-de-q {
  display: grid;
  gap: 6px;
  padding: 9px 10px;
  border: 1px solid #e3e6ea;
  border-radius: 10px;
  background: #fff;
  font-size: 11.5px;
}

.ls-de-select {
  padding: 5px 9px;
  border: 1px solid #c9ced6;
  border-radius: 7px;
  font-size: 11.5px;
  transition: box-shadow 0.25s, background 0.25s;
}

.ls-de-select.is-detected {
  background: #ecf9fd;
  box-shadow: 0 0 0 2px rgba(43, 195, 253, 0.55);
}

.ls-de-series-head {
  display: flex;
  justify-content: space-between;
}

.ls-de-link {
  color: #2563eb;
}

.ls-de-series-row {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 4px;
}

.ls-de-check {
  width: 14px;
  height: 14px;
  border: 1.5px solid #9aa3af;
  border-radius: 3px;
}

.ls-de-check.is-on {
  border-color: #2563eb;
  background: #2563eb url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='white' stroke-width='2'/%3E%3C/svg%3E") center/12px no-repeat;
}

.ls-de-swatch {
  width: 18px;
  height: 18px;
  border-radius: 5px;
}

.ls-de-series-name {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ls-de-x {
  padding: 1px 6px;
  border: 1px solid #c9ced6;
  border-radius: 6px;
  color: #5b6573;
}

.ls-de-series-row.is-off .ls-de-series-name {
  color: #9aa3af;
}

.ls-de-import {
  position: absolute;
  top: 150px;
  left: 0;
  right: 300px;
  bottom: 0;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.86);
}

.ls-de-drop {
  display: grid;
  justify-items: center;
  gap: 8px;
  width: 420px;
  padding: 26px 20px;
  border: 2px dashed #b9c2cc;
  border-radius: 16px;
  background: #fafbfc;
  text-align: center;
  transition: border-color 0.2s, background 0.2s;
}

.ls-de-drop.is-over {
  border-color: #2bc3fd;
  background: #effaff;
}

.ls-de-drop-icon {
  color: #3c4450;
}

.ls-de-drop-title {
  font-size: 15px;
  font-weight: 700;
}

.ls-de-drop-copy,
.ls-de-drop-formats {
  color: #5b6573;
  font-size: 11.5px;
}

.ls-de-choose {
  padding: 6px 14px;
  border-radius: 9px;
  background: #14171c;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}

.ls-file {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  border: 1px solid #c9ced6;
  border-radius: 9px;
  background: #fff;
  color: #14171c;
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}

/* inspector extras */
.ls-field-label {
  color: rgba(211, 221, 231, 0.7);
  font-size: 11px;
}

.ls-row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.ls-timing,
.ls-keypoints {
  position: relative;
  height: 30px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: #0f1217;
}

.ls-timing-line {
  position: absolute;
  top: 50%;
  left: 8px;
  right: 8px;
  height: 2px;
  background: #3a4250;
}

.ls-timing-head {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 0;
  width: 2px;
  background: #3cc3f0;
}

.ls-diamond {
  position: absolute;
  top: 50%;
  width: 11px;
  height: 11px;
  margin: -5.5px 0 0 -5.5px;
  transform: rotate(45deg);
  border: 1.5px solid #fff;
}

.ls-diamond-in {
  background: #3ecf8e;
}

.ls-diamond-out {
  background: #f2b84b;
}

.ls-kp {
  position: absolute;
  top: 50%;
  width: 0;
  height: 0;
  margin-top: -7px;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
}

.ls-kp-start {
  left: 4px;
  border-left: 9px solid #3cc3f0;
}

.ls-kp-end {
  right: 4px;
  border-right: 9px solid #f2b84b;
}

.ls-kp-mid {
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border: 1.5px solid #fff;
  border-radius: 50%;
  background: #3cc3f0;
}

.ls-kf {
  display: grid;
  gap: 6px;
}

/* chart overlays */
.lc-hit { fill: transparent; }
.lc-select { fill: none; stroke: #3cc3f0; stroke-width: 3; stroke-dasharray: 10 7; }
.lc-note { fill: #fff; font-size: 25px; }
.lc-label { fill: #fff; font-size: 23px; }
.lc-plain-title { fill: #9aa3af; font-size: 66px; font-weight: 700; }
.lc-plain-source { fill: #9aa3af; font-size: 21px; }
.lc-plain-axis { stroke: #c9ced6; stroke-width: 1.6; }

/* Data Editor column menu */
.ls-de-menu {
  position: absolute;
  z-index: 3;
  display: grid;
  min-width: 170px;
  padding: 5px;
  border: 1px solid #dfe3e8;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
  font-size: 12px;
}

.ls-de-menu span {
  padding: 6px 9px;
  border-radius: 6px;
}

.ls-de-menu span.is-hover {
  background: #eef2f7;
}

.ls-de-x.is-pressed {
  background: #fde8e8;
}

/* dialogs */
.ls-modal-layer {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  background: rgba(4, 6, 10, 0.62);
}

.ls-modal {
  position: relative;
  display: grid;
  gap: 10px;
  width: 400px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  background: #171b22;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6);
}

.ls-modal-head {
  display: flex;
  justify-content: space-between;
}

.ls-modal-title {
  color: #fff;
  font-size: 15px;
  font-weight: 700;
}

.ls-modal-sub {
  margin-top: 2px;
  color: rgba(211, 221, 231, 0.62);
  font-size: 11.5px;
}

.ls-modal-close {
  color: rgba(211, 221, 231, 0.62);
  font-size: 18px;
  line-height: 1;
}

.ls-source {
  display: grid;
  gap: 3px;
  padding: 11px 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  background: #0f1217;
  font-size: 12.5px;
}

.ls-source span {
  color: rgba(211, 221, 231, 0.62);
  font-size: 11px;
}

.ls-source.is-on {
  border-color: #3cc3f0;
  box-shadow: 0 0 0 1px rgba(60, 195, 240, 0.35);
}

.ls-picker {
  width: 640px;
}

.ls-picker-body {
  display: grid;
  grid-template-columns: 1fr 190px;
  gap: 12px;
}

.ls-picker-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 9px;
}

.ls-thumb {
  display: grid;
  gap: 5px;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 9px;
  background: #0f1217;
}

.ls-thumb img,
.ls-thumb b {
  display: block;
  width: 100%;
  height: 92px;
  border-radius: 6px;
  object-fit: cover;
  background: #262c36;
}

.ls-thumb i {
  overflow: hidden;
  color: rgba(211, 221, 231, 0.7);
  font-size: 10.5px;
  font-style: normal;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ls-thumb.is-on {
  border-color: #3cc3f0;
  box-shadow: 0 0 0 1px rgba(60, 195, 240, 0.4);
}

.ls-picker-side {
  display: grid;
  align-content: start;
  gap: 8px;
}

.ls-picker-preview {
  height: 106px;
  border-radius: 8px;
  background: #0f1217 center / cover no-repeat;
}

.ls-picker-foot {
  display: flex;
  justify-content: flex-end;
}

/* S1 screens */
.ls-screen {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: #0a0b0f;
}

.ls-login {
  display: grid;
  place-items: center;
  background: #000;
}

.ls-login-card {
  display: grid;
  gap: 9px;
  width: 300px;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: #11161d;
}

.ls-login-card img {
  width: 84px;
  height: auto;
}

.ls-login-title {
  margin-top: 6px;
  color: #fff;
  font-size: 19px;
  font-weight: 800;
}

.ls-login-sub,
.ls-login-or,
.ls-login-new,
.ls-login-row {
  color: rgba(211, 221, 231, 0.7);
  font-size: 11px;
}

.ls-login-or {
  text-align: center;
}

.ls-login-row {
  display: flex;
  justify-content: space-between;
}

.ls-login-link {
  color: #3cc3f0;
}

.ls-login-submit {
  height: 34px;
}

.ls-library {
  background: #0d1015;
}

.ls-lib-top {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 52px;
  padding: 0 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 12px;
}

.ls-lib-top img {
  width: 96px;
  height: auto;
  margin-right: 14px;
}

.ls-lib-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 9px;
  color: rgba(211, 221, 231, 0.75);
}

.ls-lib-tab.is-on {
  border: 1px solid rgba(50, 197, 253, 0.16);
  background: linear-gradient(rgba(50, 197, 253, 0.09), rgba(50, 197, 253, 0.045));
  color: #fff;
}

.ls-lib-new {
  padding: 0 14px;
}

.ls-lib-side {
  position: absolute;
  top: 52px;
  left: 0;
  bottom: 0;
  display: grid;
  align-content: start;
  gap: 4px;
  width: 200px;
  padding: 18px 14px;
  font-size: 12px;
}

.ls-lib-side span {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 8px;
  color: rgba(211, 221, 231, 0.75);
}

.ls-lib-side span.is-on {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
}

.ls-lib-main {
  position: absolute;
  top: 52px;
  left: 200px;
  right: 0;
  bottom: 0;
  padding: 18px 22px;
}

.ls-lib-search {
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: #0f1217;
  color: rgba(211, 221, 231, 0.45);
  font-size: 12px;
}

.ls-lib-empty {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 150px;
}

.ls-lib-empty .ls-wide-btn {
  padding: 0 16px;
}

.ls-np {
  width: 330px;
}

.ls-np-label {
  display: grid;
  gap: 5px;
  color: rgba(211, 221, 231, 0.7);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ls-np-input {
  height: 28px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
}

.ls-np-input.is-focus {
  border-color: #3cc3f0;
}

.ls-np-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}

.ls-np-actions .ls-btn {
  padding: 0 14px;
}

.ls-np-actions .ls-wide-btn {
  padding: 0 14px;
}

.ls-np-list {
  position: absolute;
  left: 16px;
  right: 16px;
  top: 186px;
  display: grid;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  background: #1f252f;
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.5);
  font-size: 12px;
}

.ls-np-list-theme {
  top: 238px;
}

.ls-np-list span {
  padding: 6px 9px;
  border-radius: 7px;
}

.ls-np-list span.is-on {
  background: #2e3541;
}

/* cursor */
.ls-cursor {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 6;
  width: 24px;
  height: 24px;
  margin: -3px 0 0 -5px;
  pointer-events: none;
}

.ls-cursor svg {
  position: relative;
  z-index: 1;
  width: 24px;
  height: 24px;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45));
}

.ls-ripple {
  position: absolute;
  top: 3px;
  left: 5px;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  border-radius: 50%;
  background: rgba(60, 195, 240, 0.45);
  opacity: 0;
}

.ls-cursor.is-clicking .ls-ripple {
  animation: ls-ripple 0.45s ease-out;
}

@keyframes ls-ripple {
  from { opacity: 1; transform: scale(0.3); }
  to { opacity: 0; transform: scale(1.4); }
}

@media (max-width: 640px) {
  .learn-snippet-controls {
    right: 6px;
    bottom: 6px;
    gap: 4px;
  }

  .learn-snippet-button {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: rgba(10, 11, 15, 0.7);
  }

  .learn-snippet-button svg {
    width: 12px;
    height: 12px;
  }

  .learn-snippet figcaption {
    font-size: 14px;
  }
}

.lc-axis.is-selected {
  stroke: #3cc3f0;
  stroke-width: 6;
}

/* ---------- phones: the panel stacks under the chart canvas ----------
   Below 640px the player draws a 400 x 1025 stage (player.js NARROW_W/H):
   toolbar and chart on top, the control panel underneath at its full
   desktop height, so every scripted panel step stays in view. The figure
   reserves that shape from the first paint. */

@media (max-width: 687px) {
  .learn-snippet {
    width: min(calc(100vw - 48px), 440px);
    margin: 18px auto 8px;
  }

  .learn-snippet-frame {
    aspect-ratio: 400 / 1025;
  }
}

.learn-snippet.is-narrow .ls-top {
  display: none;
}

.learn-snippet.is-narrow .ls-canvas-area {
  top: 0;
  left: 0;
  right: 0;
  bottom: auto;
  height: 444px;
}

.learn-snippet.is-narrow .ls-toolbar {
  top: 8px;
  left: 8px;
  right: 8px;
  flex-wrap: wrap;
  row-gap: 6px;
  height: auto;
  padding: 6px 8px;
}

.learn-snippet.is-narrow .ls-chart-host {
  top: 98px;
  width: 336px;
  height: 336px;
  margin-left: -168px;
}

.learn-snippet.is-narrow .ls-col {
  top: 444px;
  right: 0;
  width: auto;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.learn-snippet.is-narrow .ls-de-body {
  grid-template-columns: 1fr;
  grid-template-rows: 432px auto;
}

.learn-snippet.is-narrow .ls-de-map {
  border-left: 0;
  border-top: 1px solid #e6e9ee;
}

.learn-snippet.is-narrow .ls-de-import {
  right: 0;
  bottom: auto;
  height: 432px;
}

.learn-snippet.is-narrow .ls-de-drop {
  width: 340px;
}

.learn-snippet.is-narrow .ls-modal {
  width: 360px;
}

.learn-snippet.is-narrow .ls-picker {
  width: 380px;
}

.learn-snippet.is-narrow .ls-picker-body {
  grid-template-columns: 1fr;
}

.learn-snippet.is-narrow .ls-np {
  width: 340px;
}

.learn-snippet.is-narrow .ls-lib-side,
.learn-snippet.is-narrow .ls-lib-tab:not(.is-on) {
  display: none;
}

.learn-snippet.is-narrow .ls-lib-main {
  left: 0;
}

.learn-snippet.is-narrow .ls-lib-empty {
  flex-direction: column;
  align-items: center;
}