/* The "Try scrawLFO" tour (try-scrawlfo.html). Hand-written, not made by the Site Manager.
   The plug-in is drawn in its Studio skin: kalikoDSP's light greys, the engines in the logo's coat
   deepened for a light screen. */

.tut-intro { padding: 48px 24px 24px; }
/* "Try" and then scrawLFO's lettering as the start page's card wears it, drawn twice the size:
   the "LFO" is tuned to whole pixels at 28px (style.css), and doubled it stays on them. "Try" is
   a soft grey, so the coloured name leads. */
.tut-intro h1.product-logo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  font-family: var(--brand);
  font-size: 56px;
  line-height: 1;
  letter-spacing: 0;
}
.tut-intro .tut-try { font-weight: 500; letter-spacing: -0.02em; color: #9a9a96; }
/* On a very narrow screen the name drops under "Try". */
.tut-intro .tut-logo { display: inline-flex; align-items: center; gap: inherit; white-space: nowrap; }
.tut-intro .tut-word { font-family: var(--brand); white-space: nowrap; }
/* Plain white letters, as kalikoDSP's "DSP" in the header: no grey edge on the page's grey. */
.tut-intro .product-logo b {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='22' viewBox='0 -1 60 22'%3E%3Cg fill='%23fff'%3E%3Cpath d='M2 0H6V16H15V20H2Z'/%3E%3Cpath d='M20 0H33V4H24V8H32V12H24V20H20Z'/%3E%3Cpath fill-rule='evenodd' d='M36 10a10 10.2 0 1 0 20 0a10 10.2 0 1 0-20 0ZM40.3 10a5.7 6.1 0 1 0 11.4 0a5.7 6.1 0 1 0-11.4 0Z'/%3E%3C/g%3E%3C/svg%3E");
  background-position: 2px 8px; background-size: 120px 44px;
}
@media (max-width: 600px) {
  .tut-intro h1.product-logo { font-size: 42px; gap: 8px 12px; }
  .tut-intro .product-logo b { background-position: 1.5px 6px; background-size: 90px 33px; }
}
/* At the logo's own size (style.css draws its "LFO" for 28px) on the narrowest phones. */
@media (max-width: 400px) {
  .tut-intro h1.product-logo { font-size: 28px; gap: 6px 10px; }
  .tut-intro .product-logo b { background-position: 1px 4px; background-size: 60px 22px; }
}
/* On a computer the page's header and footer run as wide as the tour. */
header .wrap, footer .wrap { max-width: 1280px; }
.tut-stage { padding: 8px 0 72px; }
.tut-noscript { padding: 24px; border: 1px solid var(--outline); border-radius: 14px; background: var(--surface); }

.st-root {
  --e1: #2b8a72; --e2: #8a6bc8; --e3: #c9644d; --e4: #3a80b3;
  --t1: #dcefe8; --t2: #ebe4f6; --t3: #f6e2dc; --t4: #dde9f3;
  --ink: #2a2a28;
  --dim: #8a8a86;
  --box: #ffffff;
  --well: #e9e9e7;
  --focus: #5b8def;
  display: grid;
  gap: 14px;
  font-family: var(--brand);
  color: var(--ink);
}
.st-root { --spot: var(--fg); --spot-tint: #e4e4e1; }
#scrawl-tutorial.st-root, .tut-intro.wrap, .tut-small.wrap { max-width: 1280px; }
.st-main { display: grid; gap: 14px; min-width: 0; }
/* On a narrow screen its parts join the page's grid: the transport above the plug-in, the step
   card fixed to the foot of the screen. */
.st-aside { display: contents; }
.st-root button, .st-root select, .st-root input { font: inherit; color: inherit; }
.st-root [hidden], .st-menu[hidden] { display: none !important; }
.st-root button { cursor: pointer; }
.st-root :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Coach: the step card above the plug-in. */
.st-coach {
  border: 1px solid var(--outline);
  border-radius: 14px;
  background: var(--paper);
  padding: 20px 22px 16px;
  display: grid;
  gap: 10px;
}
.st-coach-top { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; }
.st-count {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.st-dots { display: flex; gap: 6px; }
.st-dot {
  width: 10px; height: 10px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--outline);
  background: transparent;
}
.st-dot.is-done { background: var(--outline); }
.st-dot.is-here { background: var(--fg); border-color: var(--fg); }
.st-coach h2 { font-size: 1.35rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; }
.st-coach p { font-family: var(--sans); color: var(--text); max-width: 68ch; }
.st-body { display: grid; gap: 8px; }
.st-coach kbd {
  font-family: var(--mono);
  font-size: 0.85em;
  padding: 0 5px;
  border: 1px solid var(--outline);
  border-radius: 4px;
  background: var(--surface);
}
.st-coach-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.st-goal { font-family: var(--sans); font-size: 0.92rem; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.st-goal::before {
  content: "";
  flex: none;
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 1.5px dashed var(--outline);
}
.st-goal.is-met { color: var(--e1); }
.st-goal.is-met::before {
  border: 0;
  background: var(--e1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.3 2.3 4.7-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
}
.st-nav { display: flex; gap: 8px; }
.st-btn {
  padding: 7px 18px;
  border: 1px solid var(--outline);
  border-radius: 999px;
  background: transparent;
  font-family: var(--mono) !important;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
}
.st-btn:hover { background: var(--surface); border-color: var(--fg); }
.st-btn:disabled { opacity: 0.35; cursor: default; border-color: var(--outline); background: transparent; }
.st-btn.is-primary { background: var(--fg); border-color: var(--fg); color: var(--paper); }
.st-btn.is-primary:hover { background: #000; }
.st-btn.is-ready { animation: st-nudge 1.6s ease-in-out infinite; }
.st-links { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 2px; }
.st-links a.st-btn { text-decoration: none; display: inline-block; color: var(--fg); }
.st-links a.st-btn.is-primary { color: var(--paper); }

/* What a step points at. */
.st-spot { position: relative; z-index: 1; border-radius: 10px; box-shadow: 0 0 0 2px var(--spot), 0 0 0 6px color-mix(in srgb, var(--spot) 20%, transparent); animation: st-glow 1.8s ease-in-out infinite; }
.st-host .st-spot { box-shadow: 0 0 0 2px var(--mint), 0 0 0 6px rgba(143, 216, 194, 0.3); animation-name: st-glow-dark; }
@keyframes st-glow-dark { 50% { box-shadow: 0 0 0 2px var(--mint), 0 0 0 9px rgba(143, 216, 194, 0.1); } }
@keyframes st-glow { 50% { box-shadow: 0 0 0 2px var(--spot), 0 0 0 9px color-mix(in srgb, var(--spot) 6%, transparent); } }
.st-root .st-flash { position: relative; z-index: 2; box-shadow: 0 0 0 3px #f2b300, 0 0 0 8px rgba(242, 179, 0, 0.3) !important; animation: none; }
.st-root .is-dim { opacity: 0.45; transition: opacity 0.25s; }
.st-root .is-dim:hover, .st-root .is-dim:focus-within { opacity: 0.85; }
.st-host, .st-plugin > .st-card, .st-lane { transition: opacity 0.25s; }
/* Words in a step that name a control: point at one to find it. */
.st-coach b[data-ref] {
  font-weight: 600;
  cursor: pointer;
  border-radius: 4px;
  padding: 0 3px;
  margin: 0 -1px;
  background: var(--spot-tint);
  box-shadow: inset 0 -1.5px 0 var(--spot);
}
/* The Play chip wears the Play button's pill and triangle, so it reads as the thing to press. */
.st-coach b.st-ref-play {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 0 9px 0 7px; margin: 0 3px; border-radius: 999px; vertical-align: 1px; line-height: 1.5;
  background: #ededea; color: #1e1e1e; font-weight: 500;
  box-shadow: 0 0 0 2px var(--mint);
}
.st-coach b.st-ref-play svg { width: 0.7em; height: 0.7em; }
.st-coach b[data-ref]:hover, .st-coach b[data-ref]:focus-visible { background: #fbe7a6; box-shadow: inset 0 -1.5px 0 #f2b300; outline: none; }
.st-where { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.st-badge { white-space: nowrap; padding: 2px 8px; border-radius: 999px; background: var(--spot-tint); color: var(--spot); font-size: 0.78rem; font-weight: 500; }
.st-fold { display: none; padding: 3px 10px; border: 1px solid var(--outline); border-radius: 999px; background: transparent; font-family: var(--mono) !important; font-size: 0.75rem; }
@keyframes st-nudge { 50% { box-shadow: 0 0 0 5px rgba(30, 30, 30, 0.15); } }
@media (prefers-reduced-motion: reduce) {
  .st-spot, .st-btn.is-ready { animation: none; }
}

/* The DAW's transport, a dark strip so it doesn't read as part of the plug-in. */
.st-host {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 10px;
  border-radius: 12px;
  background: #2b2b2a;
  color: #ededea;
}
.st-host-label { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: #9a9a95; margin: 0 4px; }
.st-play {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 16px 6px 12px;
  border: 0;
  border-radius: 999px;
  background: #ededea;
  color: #1e1e1e !important;
  font-weight: 500;
}
.st-play svg { width: 14px; height: 14px; }
.st-play.is-on { background: var(--mint); }
.st-host-field { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 0.85rem; color: #cfcfca; }
.st-toggle {
  padding: 4px 10px;
  border: 1px solid #4a4a47;
  border-radius: 999px;
  background: transparent;
  color: #9a9a95 !important;
  font-family: var(--mono) !important;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
}
.st-toggle[aria-pressed="true"] { color: #ededea !important; border-color: #8a8a85; }
.st-host-spacer { flex: 1; }
.st-beat { display: flex; gap: 4px; }
.st-beat i { width: 7px; height: 7px; border-radius: 50%; background: #4a4a47; }
.st-beat i.is-on { background: var(--mint); }

/* The plug-in window. */
.st-plugin {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--outline);
  border-radius: 16px;
  background: #ececea;
}
.st-card {
  position: relative;
  border: 1px solid #d6d6d3;
  border-radius: 12px;
  background: #f5f5f3;
  padding: 10px 12px 12px 40px;
}
.st-side {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 30px;
  border-right: 1px solid #e0e0dd;
  display: flex; align-items: center; justify-content: center;
}
.st-side span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dim);
  white-space: nowrap;
}
.st-side span b { font-weight: 500; }

.st-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.st-tabs { display: flex; gap: 2px; }
.st-tab {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-size: 1rem;
  font-weight: 500;
  color: var(--c) !important;
  opacity: 0.7;
}
.st-tab svg { width: 20px; height: 12px; }
.st-tab:hover { opacity: 1; }
.st-tab[aria-selected="true"] { background: var(--t); opacity: 1; box-shadow: inset 0 -2px 0 var(--c); }
.st-sep { width: 1px; height: 22px; background: #d6d6d3; margin: 0 4px; }
.st-tool {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px;
  border: 1px solid #d6d6d3;
  border-radius: 8px;
  background: #ebebe9;
  font-size: 0.9rem;
}
.st-tool:hover { background: var(--box); }
.st-tool svg { width: 18px; height: 18px; }
.st-tool.is-icon { padding: 5px 7px; }
.st-tool[aria-pressed="true"] { background: var(--box); border-color: #a9a9a5; box-shadow: inset 0 0 0 1px #a9a9a5; }
.st-tool svg.st-glyph, .st-menu button svg.st-glyph { width: 16px; height: 16px; }
.st-toolgroup { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.st-bar-spacer { flex: 1; }

.st-canvas-wrap {
  position: relative;
  border: 1px solid #cfcfcc;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}
.st-canvas-wrap canvas {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  touch-action: none;
  cursor: crosshair;
}
.st-empty {
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  color: #b0b0ab;
  font-size: 1.05rem;
  text-align: center;
  padding: 24px;
}
.st-hint { display: flex; justify-content: space-between; gap: 12px; padding: 6px 2px 0; font-size: 0.85rem; color: #6a6a66; }
.st-readout { font-family: var(--mono); white-space: nowrap; }
.st-readout b { color: var(--c); font-weight: 500; margin: 0 10px 0 6px; }

/* Group headings, as the plug-in letters them. */
.st-group { font-size: 0.74rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; }
.st-label { font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); }

.st-play-card { display: flex; flex-wrap: wrap; gap: 14px 36px; align-items: flex-end; }
.st-field { display: grid; gap: 6px; }
.st-seg { display: inline-flex; border: 1px solid #d0d0cd; border-radius: 8px; overflow: hidden; background: var(--box); }
.st-seg button { padding: 5px 14px; border: 0; background: transparent; }
.st-seg button + button { border-left: 1px solid #e0e0dd; }
.st-seg button[aria-pressed="true"] { background: var(--fg); color: var(--paper) !important; }
/* Value wells, as the plug-in draws its values: drag one up or down. */
.st-well {
  position: relative;
  min-width: 6.5em;
  padding: 5px 10px;
  border: 1px solid #d0d0cd;
  border-radius: 8px;
  background: var(--box);
  font-family: var(--mono);
  text-align: right;
  white-space: nowrap;
  cursor: ns-resize;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.st-well:hover { background: #f7f7f5; border-color: #b9b9b5; }
.st-well.is-choice { text-align: left; padding-right: 20px; }
.st-well.is-choice::after { content: "▾"; position: absolute; right: 7px; top: 50%; transform: translateY(-50%); font-size: 0.7em; color: var(--dim); }
.st-well input { width: 100%; min-width: 0; padding: 0; border: 0; background: transparent; text-align: inherit; font-family: var(--mono) !important; outline: none; }
.st-well.is-dark { min-width: 3.6em; padding: 3px 6px; border-color: #4a4a47; background: #1f1f1e; color: #ededea; }
.st-well.is-dark:hover { background: #2f2f2d; border-color: #6a6a66; }
.st-loop-note { font-family: var(--sans); font-size: 0.85rem; color: #6a6a66; padding-bottom: 6px; }

/* LANES */
.st-lanes { display: grid; gap: 4px; }
.st-lane, .st-lane-head {
  display: grid;
  grid-template-columns: 34px 46px 98px 54px 54px 44px 44px 58px 70px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
}
.st-lane-head { padding: 0 6px 2px; }
.st-lane-head .st-label:nth-child(n+4):nth-child(-n+5) { text-align: right; padding-right: 8px; }
.st-lane { padding: 5px 6px; border-radius: 9px; }
.st-lane.is-on { background: var(--t); }
.st-power { width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--c) !important; opacity: 0.45; }
.st-power svg { width: 22px; height: 22px; display: block; margin: auto; }
.st-lane.is-on .st-power { opacity: 1; }
.st-lane .st-well { min-width: 0; width: 100%; padding: 4px 6px; border-radius: 7px; font-size: 0.9rem; }
.st-lane .st-well.is-choice { padding-right: 16px; text-align: center; }
.st-lane .st-well.is-choice::after { right: 5px; }
.st-lane .st-well.st-eng { border-color: transparent; font-family: var(--brand); font-weight: 500; background: var(--et); color: var(--ec); }
.st-source { display: inline-flex; gap: 2px; }
.st-source button {
  width: 30px; height: 28px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #b4b4b0 !important;
}
.st-source button svg { width: 18px; height: 18px; display: block; margin: auto; }
.st-source button[aria-pressed="true"] { background: var(--et); color: var(--ec) !important; }
.st-source.is-lfo button { opacity: 0.35; }
.st-pill {
  padding: 3px 0;
  border: 1px solid #c8c8c4;
  border-radius: 999px;
  background: transparent;
  font-family: var(--mono) !important;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: #9a9a96 !important;
}
.st-pill[aria-pressed="true"] { background: #f1ead7; border-color: #cbbf9c; color: #3a3426 !important; }
.st-out { display: flex; align-items: center; justify-content: flex-end; gap: 8px; font-family: var(--mono); font-size: 0.95rem; }
.st-meter { position: relative; width: 6px; height: 26px; border-radius: 3px; background: #dededb; overflow: hidden; }
.st-meter i { position: absolute; left: 0; right: 0; bottom: 0; background: var(--c); border-radius: 3px; }
.st-sends { font-family: var(--mono); font-size: 0.78rem; color: #7a7a76; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-sends b { color: var(--ink); font-weight: 500; }

/* Menus: the engine tabs' Scrawl / LFO, Shapes, Grid, Templates. */
.st-menu {
  position: absolute;
  z-index: 50;
  min-width: 150px;
  padding: 5px;
  border: 1px solid #cfcfcc;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14);
  font-family: var(--brand);
}
.st-menu button {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  padding: 7px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  text-align: left;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
}
.st-menu button:hover, .st-menu button:focus-visible { background: #f0f0ee; outline: none; }
.st-menu button svg { width: 20px; height: 12px; flex: none; }
.st-menu .st-check { width: 12px; flex: none; text-align: center; }
.st-menu button + .st-menu-title { margin-top: 6px; border-top: 1px solid #ececea; padding-top: 8px; }
.st-menu-title { padding: 4px 10px 6px; font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); }

.st-cell { display: block; }
.st-cell-label { display: none; }
.tut-small { margin-top: 18px; font-size: 0.75rem; color: var(--muted); }

@media (min-width: 1100px) {
  .st-root { grid-template-columns: minmax(300px, 360px) minmax(0, 1fr); align-items: start; gap: 18px; }
  /* The step card with the transport underneath, held in view while the plug-in scrolls. */
  .st-aside { display: grid; gap: 14px; position: sticky; top: 16px; max-height: calc(100vh - 32px); grid-template-rows: minmax(0, 1fr) auto; }
  .st-coach { overflow: auto; }
  /* Too narrow for one row, so two, each spread across the bar: the label, Sound and Click
     above; Play, the tempo in the middle and the beat dots under Click below. */
  .st-host {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    grid-template-areas: "label . sound click" "play bpm beat beat";
    align-items: center;
    gap: 12px 8px;
    padding: 12px 14px;
  }
  .st-host-spacer { display: none; }
  .st-host-label { grid-area: label; margin: 0; }
  .st-host .st-play { grid-area: play; }
  .st-host-field { grid-area: bpm; justify-self: center; }
  .st-host .st-beat { grid-area: beat; justify-self: end; margin-right: 4px; }
  .st-host .st-toggle { padding: 2px 9px; font-size: 0.7rem; }
  .st-host .st-toggle[data-key="sound"] { grid-area: sound; }
  .st-host .st-toggle[data-key="beat"] { grid-area: click; }
  /* Short enough that the pad and the lanes fit on one screen with the step beside them. */
  .st-canvas-wrap canvas { aspect-ratio: auto; height: clamp(240px, 38vh, 420px); }
}
@media (max-width: 1099px) {
  .st-coach {
    order: 2;
    position: sticky;
    bottom: 8px;
    z-index: 30;
    max-height: 44vh;
    overflow: auto;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.22);
  }
  .st-host { order: -1; }
  .st-fold { display: inline-block; margin-left: auto; }
  .st-coach.is-folded .st-body { display: none; }
}
@media (max-width: 760px) {
  .st-coach { max-height: 38vh; padding: 12px 14px; gap: 6px; }
  .st-coach h2 { font-size: 1.1rem; }
  .st-coach p { font-size: 0.92rem; line-height: 1.45; }
  .st-coach-foot { margin-top: 0; }
  .st-dot { width: 8px; height: 8px; }
  .st-dots { gap: 5px; }
  .st-btn { padding: 5px 14px; }
}

@media (max-width: 760px) {
  .st-card { padding-left: 12px; }
  .st-side { display: none; }
  .st-canvas-wrap canvas { aspect-ratio: 1 / 1; }
  .st-lane-head { display: none; }
  .st-lane {
    grid-template-columns: 34px minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.1fr);
    grid-template-areas: "pw en src out" "pw mn mx clk" "pw pol inv sd";
    row-gap: 6px;
  }
  .st-lane > :nth-child(1) { grid-area: pw; align-self: start; }
  .st-lane > :nth-child(2) { grid-area: en; }
  .st-lane > :nth-child(3) { grid-area: src; }
  .st-lane > :nth-child(4) { grid-area: mn; }
  .st-lane > :nth-child(5) { grid-area: mx; }
  .st-lane > :nth-child(6) { grid-area: pol; }
  .st-lane > :nth-child(7) { grid-area: inv; }
  .st-lane > :nth-child(8) { grid-area: clk; }
  .st-lane > :nth-child(9) { grid-area: out; }
  .st-lane > :nth-child(10) { grid-area: sd; }
  .st-sep { display: none; }
  .st-source button { width: 26px; }
  .st-cell { display: flex; align-items: center; gap: 5px; min-width: 0; }
  .st-cell .st-well { flex: 1 1 0; min-width: 0; padding: 5px 4px; }
  .st-cell .st-well.is-choice { padding-right: 14px; }
  .st-cell-label { display: inline; font-size: 0.64rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dim); }
  .st-sends { white-space: normal; }
  .st-hint .st-hint-text { display: none; }
}
@media (max-width: 420px) {
  .st-coach { padding: 16px; }
  .st-plugin { padding: 6px; }
  .st-tab { padding: 5px 7px; }
  .st-tab svg { display: none; }
}