/*
 * A tool page's hero: the words and the facts at the start, the tool at the end (1.1 parts to the words' 0.9) from
 * 1200 px; below that one column: the words, the tool, then the facts. In the site's frame.
 */

.thr { position: relative; padding-block: clamp(20px, 3.4vw, 48px) clamp(40px, 6vw, 88px); }
.thr-grid { display: grid; gap: 28px; grid-template-areas: 'copy' 'tool' 'facts'; }
.thr-copy { grid-area: copy; display: grid; justify-items: start; align-content: center; gap: 20px; }
.thr-tool { grid-area: tool; min-width: 0; }
.thr-facts { grid-area: facts; align-self: start; }
/* the title's coloured half on a line of its own where the column is wide enough to hold it */
@media (min-width: 640px) { .thr-copy .h1 em { display: block; } }
@media (min-width: 1200px) {
  .thr-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); grid-template-areas: 'copy tool' 'facts tool'; grid-template-rows: auto 1fr; gap: 28px clamp(28px, 3vw, 56px); }
  .thr-copy { align-content: end; padding-top: 24px; }
  .thr-facts { flex-wrap: nowrap; gap: 12px 20px; }
  .thr-facts li + li { padding-inline-start: 20px; }
}
/*
 * ToolBox: the glass box (E2) of a tool, its canvas and its foot. The canvas is the tool's own (its background, its
 * aspect), wearing `tbx-canvas`: a rounded window whose views (`[data-on]`) share one cell and crossfade. The foot's
 * panes share one cell too; inside them, `tbx-row` is a row of controls and `tbx-line` a sentence with its icon.
 */

.tbx { position: relative; display: grid; gap: 8px; padding: 10px; border-radius: var(--radius-card); background: var(--glass-strong); border: 1px solid var(--edge); box-shadow: var(--shadow-tile); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  transition: border-color var(--d-default) ease, box-shadow var(--d-enter) var(--ease-out); }
.tbx.drag { border-color: var(--edge-strong); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent), var(--shadow-tile-hover); }

.tbx-canvas { position: relative; display: grid; border-radius: 18px; overflow: hidden; isolation: isolate; container-type: inline-size; color: var(--white); }
.tbx-canvas > [data-on] { grid-area: 1 / 1; min-width: 0; min-height: 0; transition: opacity 340ms var(--ease-out), filter 340ms var(--ease-out), visibility 0s linear 340ms; }
.tbx-canvas > [data-on='false'] { opacity: 0; filter: blur(4px); visibility: hidden; pointer-events: none; }
.tbx-canvas > [data-on='true'] { opacity: 1; filter: none; visibility: visible; transition-delay: 0s; }

.tbx-foot { display: grid; padding: 8px 6px 4px; }
.tbx-pane { grid-area: 1 / 1; display: grid; align-content: center; gap: 14px; min-width: 0; transition: opacity 260ms var(--ease-out), translate 260ms var(--ease-out), visibility 0s linear 260ms; }
.tbx-pane[data-on='false'] { opacity: 0; translate: 0 4px; visibility: hidden; }
.tbx-pane[data-on='true'] { transition-delay: 80ms, 80ms, 0s; }
.tbx-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.tbx-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--fg-muted); font-size: var(--text-subhead); line-height: var(--lh-subhead); }
.tbx-line b { color: var(--fg); }
.tbx-line .i { width: 18px; height: 18px; color: var(--accent); }
.tbx-line.warn { color: var(--reward-ink); }
.tbx-line.grow { flex: 1 1 18rem; }
.tbx-spin { width: 18px; height: 18px; border-radius: var(--radius-pill); border: 2px solid color-mix(in srgb, var(--accent) 22%, transparent); border-top-color: var(--accent); animation: tbx-spin 700ms linear infinite; }
@keyframes tbx-spin { to { rotate: 360deg; } }
/* ToolChip: white glass on a dark canvas, 30 px, 12 px from its corner. */

.tchip { position: absolute; top: 12px; z-index: 4; display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: var(--radius-pill); background: var(--white-10); border: 1px solid var(--white-15); color: var(--white); font-size: var(--text-label); line-height: 1; font-weight: 700; backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
.tchip.start { inset-inline-start: 12px; }
.tchip.end { inset-inline-end: 12px; }
.tchip-dot { width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--white-60); }
.tchip[data-state='busy'] .tchip-dot { background: var(--main-dark-from); animation: tchip-pulse 1s ease-in-out infinite; }
.tchip[data-state='done'] .tchip-dot { background: var(--hand-left-light); }
.tchip .i { width: 15px; height: 15px; color: var(--main-dark-from); }
@keyframes tchip-pulse { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .tchip[data-state='busy'] .tchip-dot { animation: none; } }
/* Stages: equal columns, a 4 px bar over a numbered line each; two by two on a phone when there are four. */

.stg { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 12px; }
.stg li { display: grid; align-content: start; gap: 9px; min-width: 0; }
.stg-bar { height: 4px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--fg) 9%, transparent); overflow: hidden; }
/* the page is right to left: a bar fills from its start, the right (100%) */
.stg-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent-deep), var(--accent)); transform: scaleX(0); transform-origin: 100% 50%; }
.stg [data-s='on'] .stg-bar i { animation: stg-fill var(--ms) var(--ease-in-out, ease-in-out) forwards; }
.stg [data-s='done'] .stg-bar i { transform: none; background: var(--success); }
@keyframes stg-fill { from { transform: scaleX(0.06); } to { transform: scaleX(0.94); } }
.stg-t { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--fg-faint); font-size: var(--text-footnote); line-height: 1.4; font-weight: 600; transition: color var(--d-default) ease; }
.stg [data-s='on'] .stg-t { color: var(--fg); }
.stg [data-s='done'] .stg-t { color: var(--fg-muted); }
.stg-n { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--fg) 7%, transparent); font-size: var(--text-caption); font-weight: 800; transition: background-color var(--d-default) ease, color var(--d-default) ease; }
.stg-n .i { width: 13px; height: 13px; }
.stg [data-s='on'] .stg-n { background: var(--accent); color: var(--on-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
.stg [data-s='done'] .stg-n { background: var(--success-soft); color: var(--success-ink); }
@media (max-width: 559px) { .stg[data-n='4'] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 10px; } }
@media (prefers-reduced-motion: reduce) { .stg [data-s='on'] .stg-bar i { animation-duration: 0s; } }
/* Tags: 30 px pills; plain on a faint tint with a hairline, ok on the success tint, warn on the reward tint. */

.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: var(--radius-pill); font-size: var(--text-label); font-weight: 700; border: 1px solid transparent; }
.tag .i { width: 16px; height: 16px; }
.tag small { font-weight: 600; opacity: 0.8; margin-inline-start: 2px; }
.tag.plain { background: color-mix(in srgb, var(--fg) 4%, transparent); border-color: var(--line); color: var(--fg); }
.tag.ok { background: var(--success-soft); color: var(--success-ink); }
.tag.warn { background: var(--reward-soft); color: var(--reward-ink); }
.tag-dots { display: inline-flex; }
.tag-dots i { width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--hand-right); }
.tag-dots i + i { background: var(--hand-left); margin-inline-start: -3px; }
/* LockedLinks: 34 px dashed pills; the pointer gives them the accent's tint and edge. */

.lkl { display: flex; flex-wrap: wrap; gap: 6px; }
.lkl-a { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: var(--radius-pill); border: 1px dashed var(--line-strong); color: var(--fg-muted); font-size: var(--text-label); font-weight: 700; transition: color var(--d-default) ease, border-color var(--d-default) ease, background-color var(--d-default) ease; }
.lkl-a .i { width: 14px; height: 14px; }
.lkl-a:active { scale: 0.97; }
@media (hover: hover) and (pointer: fine) { .lkl-a:hover { color: var(--accent-ink); border-color: var(--edge-strong); background: color-mix(in srgb, var(--accent-soft) 60%, transparent); } }
/* StepCard: a dark card (night-card, a faint lavender light in its corner), a glass inset, an outlined number. */

.stepc { position: relative; display: grid; align-content: start; gap: 6px; padding: 10px; border-radius: var(--radius-card); color: var(--white); overflow: hidden; isolation: isolate;
  background: radial-gradient(80% 50% at 85% 0%, color-mix(in srgb, var(--main-dark-from) 14%, transparent), transparent 70%), linear-gradient(165deg, var(--night-card-top), var(--night-card-bottom));
  border: 1px solid var(--white-10); box-shadow: var(--shadow-tile); transition: translate var(--d-default) var(--ease-out), box-shadow var(--d-enter) var(--ease-out), border-color var(--d-default) ease; }
@media (hover: hover) and (pointer: fine) { .stepc:hover { translate: 0 -3px; border-color: var(--white-18); box-shadow: var(--shadow-tile-hover); } }
.stepc-vis { position: relative; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; container-type: inline-size; background: radial-gradient(90% 70% at 50% 0%, var(--white-7), transparent 70%), var(--white-3); border: 1px solid var(--white-8); }
.stepc-vis .staff .line { stroke: var(--white); stroke-opacity: 0.35; }
.stepc-vis .staff :is(.glyph, .stem, .beam, .ledger, .barline) { fill: var(--white); stroke: var(--white); }
.stepc-vis svg { display: block; width: 100%; height: auto; }
.stepc-body { display: grid; gap: 8px; padding: 14px 10px 12px; }
.stepc-n { font-size: 3.25rem; line-height: 1; font-weight: 800; color: transparent; -webkit-text-stroke: 1.5px var(--white-28); }
.stepc-body h3 { font-size: var(--text-title-3); line-height: var(--lh-title-3); font-weight: 800; }
.stepc-body p { color: var(--white-65); font-size: var(--text-callout); line-height: var(--lh-callout); text-wrap: pretty; }
/*
 * «بعد از تبدیل»: the ear's card (a picture under a dark layer, its staff on glass) spans two columns and two rows at the
 * start from 1024 px; four glass cards beside it, two by two. On a tablet the ear's card takes the whole first row; on a
 * phone everything stacks. Every card answers the pointer (a lift onto its brand edge).
 */

.taf { padding-block: 0 var(--section); }
.taf-grid { display: grid; gap: 16px; }
@media (min-width: 640px) { .taf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .taf-ear { grid-column: 1 / -1; } }
@media (min-width: 1024px) { .taf-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .taf-ear { grid-column: span 2; grid-row: span 2; } }

/* the ear: hands at a piano, Pianom listening */
.taf-ear { position: relative; display: grid; align-content: space-between; gap: 24px; min-height: 460px; padding: 18px; border-radius: var(--radius-card); overflow: hidden; isolation: isolate; color: var(--white); background: var(--night-card-bottom); border: 1px solid var(--edge); box-shadow: var(--shadow-tile);
  transition: translate var(--d-default) var(--ease-out), box-shadow var(--d-enter) var(--ease-out); }
.taf-ear img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: scale var(--d-media) var(--ease-out); }
.taf-ear::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, var(--night-shade-top), transparent 30%, var(--night-shade-bottom) 72%); }
@media (hover: hover) and (pointer: fine) { .taf-ear:hover { translate: 0 -3px; box-shadow: var(--shadow-tile-hover); } .taf-ear:hover img { scale: 1.04; } }
.taf-ear-live { display: grid; gap: 12px; justify-self: start; width: min(100%, 460px); padding: 14px 16px 6px; border-radius: 20px; background: color-mix(in srgb, var(--night-card-bottom) 55%, transparent); border: 1px solid var(--white-15); backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4); }
.taf-mic { display: inline-flex; align-items: center; gap: 8px; justify-self: start; font-size: var(--text-label); font-weight: 700; color: var(--white); }
.taf-mic i { width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--danger); box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 25%, transparent); animation: taf-pulse 1.2s ease-in-out infinite; }
.taf-ear-st svg { display: block; width: 100%; height: auto; margin-block: -3% -4%; }
.taf-ear-st .staff .line { stroke: var(--white); stroke-opacity: 0.4; }
.taf-ear-st .staff :is(.glyph, .stem, .beam, .ledger, .barline) { fill: var(--white); stroke: var(--white); }
.taf-ear-st .staff .ev :is(.glyph, .stem, .beam) { transition: fill 120ms ease, stroke 120ms ease; }
.taf-ear-st .staff .ev.heard :is(.glyph, .stem, .beam) { fill: var(--hand-left-light); stroke: var(--hand-left-light); }
.taf-ear-t { display: grid; gap: 10px; max-width: 34rem; }
.taf-ear-t h3 { font-size: var(--text-title-1); line-height: var(--lh-title-1); font-weight: 800; }
.taf-ear-t p { color: var(--white-65); font-size: var(--text-callout); line-height: var(--lh-callout); }
.taf-ear .taf-ico { background: var(--white-12); border-color: var(--white-18); color: var(--white); }
@keyframes taf-pulse { 50% { opacity: 0.4; } }

/* the four cards */
.taf-card { display: grid; align-content: start; gap: 14px; padding: 12px 12px 16px; border-radius: var(--radius-card); background: var(--glass-strong); border: 1px solid var(--edge); box-shadow: var(--shadow-tile); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  transition: translate var(--d-default) var(--ease-out), box-shadow var(--d-enter) var(--ease-out), border-color var(--d-default) ease; }
@media (hover: hover) and (pointer: fine) { .taf-card:hover { translate: 0 -3px; border-color: var(--edge-strong); box-shadow: var(--shadow-tile-hover); } }
.taf-head { display: flex; align-items: start; gap: 12px; padding-inline: 4px; }
.taf-head h3 { font-size: var(--text-headline); line-height: var(--lh-headline); font-weight: 800; }
.taf-head p { color: var(--fg-muted); font-size: var(--text-subhead); line-height: var(--lh-subhead); margin-top: 2px; }
.taf-ico { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--accent-soft); border: 1px solid var(--edge); color: var(--accent-ink); }
.taf-ico .i { width: 20px; height: 20px; }

/* hands: a grand staff whose switched-off hand dims */
.taf-hands { display: grid; padding: 10px 12px 2px; border-radius: 16px; background: var(--white); border: 1px solid var(--line); }
.taf-hands svg { display: block; width: 100%; height: auto; }
.taf-hands > div + div { margin-top: -8%; }
.taf-hands > div { transition: opacity var(--d-enter) ease; }
.taf-hands > div.off { opacity: 0.22; }
.taf-hands .staff .line { stroke: var(--score-ink); stroke-opacity: 0.45; }
.taf-hands .staff :is(.glyph, .stem, .beam, .ledger, .barline) { fill: var(--score-ink); stroke: var(--score-ink); }
.taf-hands [data-hand='right'] .staff .ev :is(.glyph, .stem, .beam) { fill: var(--hand-right); stroke: var(--hand-right); }
.taf-hands [data-hand='left'] .staff .ev :is(.glyph, .stem, .beam) { fill: var(--hand-left); stroke: var(--hand-left); }
.taf-toggles { display: flex; gap: 8px; padding-inline: 4px; }
.taf-toggle { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: var(--radius-pill); border: 1px solid var(--edge); background: var(--surface); font-size: var(--text-label); font-weight: 700; box-shadow: var(--shadow-tile); transition: background-color var(--d-default) ease, color var(--d-default) ease, box-shadow var(--d-default) ease; }
.taf-toggle i { width: 10px; height: 10px; border-radius: var(--radius-pill); background: var(--hand-right); transition: opacity var(--d-default) ease, scale var(--d-default) var(--ease-out); }
.taf-toggle[data-hand='left'] i { background: var(--hand-left); }
.taf-toggle[aria-pressed='false'] { background: transparent; color: var(--fg-muted); box-shadow: none; }
.taf-toggle[aria-pressed='false'] i { opacity: 0.3; scale: 0.7; }
.taf-toggle:active { scale: 0.97; }

/* tempo: a metronome and a number that rolls */
.taf-tempo { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 104px; padding: 12px 18px; border-radius: 16px; background: color-mix(in srgb, var(--accent-soft) 70%, transparent); border: 1px solid var(--edge); }
.taf-bpm { display: grid; justify-items: end; }
.taf-bpm .odo { font-size: 2.75rem; line-height: 1; font-weight: 800; color: var(--accent-ink); }
.taf-bpm small { color: var(--fg-muted); font-size: var(--text-footnote); font-weight: 600; }
.taf-metro { position: relative; width: 54px; height: 70px; flex: none; clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%); background: linear-gradient(180deg, var(--accent), var(--accent-deep)); border-radius: 6px; }
.taf-metro i { position: absolute; bottom: 10px; inset-inline-start: calc(50% - 1.5px); width: 3px; height: 54px; border-radius: 2px; background: var(--white); transform-origin: 50% 100%; rotate: -14deg; }
.taf-metro i::after { content: ''; position: absolute; top: 12px; inset-inline-start: -4px; width: 11px; height: 8px; border-radius: 2px; background: var(--white); }
.taf-metro.on i { animation: taf-swing calc(var(--beat) * 2) ease-in-out infinite; }
@keyframes taf-swing { 0%, 100% { rotate: -16deg; } 50% { rotate: 16deg; } }
.taf-range { width: calc(100% - 8px); margin: 0 4px 2px; height: 6px; appearance: none; -webkit-appearance: none; border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--accent) var(--p), color-mix(in srgb, var(--fg) 10%, transparent) var(--p)); cursor: pointer; }
.taf-range::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: var(--radius-pill); background: var(--surface); border: 2px solid var(--accent); box-shadow: var(--shadow-tile); transition: scale var(--d-press) var(--ease-out); }
.taf-range::-moz-range-thumb { width: 18px; height: 18px; border-radius: var(--radius-pill); background: var(--surface); border: 2px solid var(--accent); }
.taf-range:active::-webkit-slider-thumb { scale: 1.12; }

/* the piano roll: notes fall onto the keys, each hand in its colour */
.taf-roll { position: relative; height: 140px; border-radius: 16px; overflow: hidden; background: linear-gradient(180deg, var(--night-card-top), var(--night-card-bottom)); --u: 9px; }
.taf-roll i { position: absolute; inset-inline-start: calc(var(--lane) * 100% / 14 + 2px); width: calc(100% / 14 - 4px); bottom: calc(30px + var(--at) * var(--u)); height: calc(var(--len) * var(--u) - 2px); border-radius: 3px; background: linear-gradient(180deg, color-mix(in srgb, var(--hand-right) 55%, transparent), var(--hand-right)); transition: translate var(--d-media) var(--ease-out); }
.taf-roll i[data-hand='l'] { background: linear-gradient(180deg, color-mix(in srgb, var(--hand-left) 55%, transparent), var(--hand-left)); }
.taf-keys { position: absolute; inset-inline: 0; bottom: 0; height: 28px; display: grid; grid-template-columns: repeat(14, 1fr); gap: 1px; padding: 0 1px 1px; background: var(--key-white-edge); }
.taf-keys b { background: var(--key-white); border-radius: 0 0 3px 3px; }
@media (hover: hover) and (pointer: fine) { .taf-card:hover .taf-roll i { translate: 0 6px; } }

/* exports: three files and what each is for */
.taf-files { display: grid; gap: 8px; }
.taf-files li { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 14px; background: color-mix(in srgb, var(--surface) 70%, transparent); border: 1px solid var(--line); }
.taf-doc { position: relative; display: grid; place-items: end center; width: 36px; height: 44px; padding-bottom: 6px; border-radius: 4px 12px 4px 4px; background: var(--surface); border: 1px solid var(--line-strong); color: var(--accent-ink); font-size: 9px; font-weight: 800; flex: none; box-shadow: var(--shadow-tile); }
.taf-file-t { display: grid; flex: 1; min-width: 0; line-height: 1.4; }
.taf-plan { flex: none; padding: 2px 9px; border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent-ink); font-size: var(--text-caption); font-weight: 700; }
.taf-file-t b { font-size: var(--text-subhead); font-weight: 700; }
.taf-file-t small { color: var(--fg-muted); font-size: var(--text-footnote); }
@media (prefers-reduced-motion: reduce) { .taf-metro.on i { animation: none; } .taf-mic i { animation: none; } }
/*
 * The sound tips' scenes (AudioScene.tsx): a dark screen with a piano's waveform in the accent's light; the layers that
 * make it wrong wait unseen, and each right scene has its own sign (a keyboard under a solo piano, a level meter for a
 * near microphone, the file's kind for an original file, a short clock for one piece).
 */

.ttip-aud { position: absolute; inset: 0; z-index: 1; display: block; container-type: inline-size; background: radial-gradient(70% 60% at 50% 0%, color-mix(in srgb, var(--main-dark-from) 18%, transparent), transparent 70%), linear-gradient(165deg, var(--night-card-top), var(--night-card-bottom)); }
.ttip-bars, .ttip-voice, .ttip-noise { position: absolute; inset: 20% 9% 26%; display: flex; align-items: center; gap: 1.1cqi; transition: inset 520ms var(--ease-in-out), gap 520ms var(--ease-in-out), filter 400ms ease, opacity 400ms ease; }
.ttip-bars i, .ttip-voice i, .ttip-noise i { flex: 1; height: calc(var(--h) * 100%); border-radius: 1cqi; transition: transform 520ms var(--ease-in-out), height 400ms ease, background-color 400ms ease; }
.ttip-bars i { background: linear-gradient(180deg, var(--main-dark-from), var(--main-dark-to)); }
.ttip-voice { opacity: 0; }
.ttip-voice i { background: color-mix(in srgb, var(--reward) 75%, transparent); transform: scaleY(0.2); }
.ttip-noise { gap: 0.5cqi; opacity: 0; }
.ttip-noise i { background: var(--white-28); }
.ttip-clock { position: absolute; bottom: 7%; inset-inline-start: 9%; display: grid; font-size: 4.4cqi; font-weight: 800; color: var(--white-60); }
.ttip-clock b { grid-area: 1 / 1; transition: opacity 300ms ease; }
.ttip-clock b + b { opacity: 0; color: var(--reward); }

/* each right scene's own sign */
.ttip-aud[data-sign='piano']::after { content: ''; position: absolute; inset-inline: 9%; bottom: 7%; height: 9%; border-radius: 0.8cqi; background: repeating-linear-gradient(90deg, var(--white-60) 0 5.2cqi, var(--black-55) 5.2cqi 5.6cqi); opacity: 0.8; }
.ttip-aud[data-sign='near']::after { content: ''; position: absolute; inset-inline-end: 4%; top: 20%; bottom: 26%; width: 2.4cqi; border-radius: 1cqi; background: linear-gradient(0deg, var(--hand-left-light) 0 78%, var(--white-12) 78%); }
.ttip-aud[data-sign='file']::after { content: 'WAV'; position: absolute; top: 8%; inset-inline-start: 9%; padding: 0.6cqi 2cqi; border-radius: 1.6cqi; background: var(--white-12); color: var(--white); font-size: 3.8cqi; font-weight: 800; }
.ttip-aud:not([data-sign='length']) .ttip-clock { display: none; }
.ttip-aud[data-sign='length'] .ttip-clock { display: grid; }

/* the wrong scenes */
.ttip-card.wrong[data-tip='solo'] .ttip-voice { opacity: 1; }
.ttip-card.wrong[data-tip='solo'] .ttip-voice i { transform: none; }
.ttip-card.wrong[data-tip='near'] .ttip-bars i { transform: scaleY(0.26); background: var(--white-28); }
.ttip-card.wrong[data-tip='near'] .ttip-noise { opacity: 1; }
.ttip-card.wrong[data-tip='near'] .ttip-aud[data-sign='near']::after { background: linear-gradient(0deg, var(--reward) 0 22%, var(--white-12) 22%); }
.ttip-card.wrong[data-tip='source'] .ttip-bars { filter: blur(1.6px); }
.ttip-card.wrong[data-tip='source'] .ttip-bars i { height: min(calc(var(--h) * 100%), 38%); }
.ttip-card.wrong[data-tip='source'] .ttip-aud[data-sign='file']::after { content: 'MP3'; background: color-mix(in srgb, var(--reward) 35%, transparent); }
.ttip-card.wrong[data-tip='length'] .ttip-bars { inset: 42% 6% 44%; gap: 0.25cqi; }
.ttip-card.wrong[data-tip='length'] .ttip-clock b:first-child { opacity: 0; }
.ttip-card.wrong[data-tip='length'] .ttip-clock b + b { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .ttip-bars, .ttip-bars i, .ttip-voice i { transition-duration: 0s; } }
/*
 * «چه عکسی خوب خونده میشه؟»: four tiles in one row from 1200 px (two from 640, one below). A tile: a photograph drawn on
 * the desk (4:3), a «درست / اشتباه» switch, the tip and its words. The wrong photo comes from the right one by a move
 * (cut off, dark, from the side, blurred) on the same page, so the change itself shows the mistake.
 */

.ttip { padding-block: 0 var(--section); }
.ttip-grid { display: grid; gap: 16px; }
@media (min-width: 640px) { .ttip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .ttip-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ttip-card { display: grid; align-content: start; gap: 14px; padding: 10px 10px 16px; border-radius: var(--radius-card); background: var(--glass-strong); border: 1px solid var(--edge); box-shadow: var(--shadow-tile); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  transition: translate var(--d-default) var(--ease-out), box-shadow var(--d-enter) var(--ease-out), border-color var(--d-default) ease; }
@media (hover: hover) and (pointer: fine) { .ttip-card:hover { translate: 0 -3px; border-color: var(--edge-strong); box-shadow: var(--shadow-tile-hover); } }

/* the photograph */
.ttip-shot { position: relative; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; isolation: isolate; container-type: inline-size; background: radial-gradient(90% 70% at 30% 8%, var(--white-12), transparent 60%), linear-gradient(160deg, var(--desk-top), var(--desk-bottom)); }
.ttip-vf { position: absolute; inset: 9% 20%; z-index: 3; }
.ttip-vf i { position: absolute; width: 12%; aspect-ratio: 1; border: 0 solid var(--white-60); }
.ttip-vf i:nth-child(1) { top: 0; inset-inline-start: 0; border-top-width: 2px; border-inline-start-width: 2px; }
.ttip-vf i:nth-child(2) { top: 0; inset-inline-end: 0; border-top-width: 2px; border-inline-end-width: 2px; }
.ttip-vf i:nth-child(3) { bottom: 0; inset-inline-start: 0; border-bottom-width: 2px; border-inline-start-width: 2px; }
.ttip-vf i:nth-child(4) { bottom: 0; inset-inline-end: 0; border-bottom-width: 2px; border-inline-end-width: 2px; }
.ttip-page { position: absolute; inset: 15% 26%; display: grid; align-content: space-evenly; padding: 0 9%; border-radius: 2px; background: var(--paper); box-shadow: 0 16px 26px -14px var(--black-90);
  transition: transform 520ms var(--ease-in-out), filter 520ms ease, background-color 520ms ease; }
.ttip-page i { display: block; height: 5cqi; background: repeating-linear-gradient(180deg, color-mix(in srgb, var(--paper-ink) 60%, transparent) 0 1px, transparent 1px 1.25cqi); }
.ttip-shade { position: absolute; inset: 0; z-index: 2; opacity: 0; transition: opacity 520ms ease; background: radial-gradient(40% 55% at 70% 60%, var(--black-55), transparent 70%), var(--black-55); }
.ttip-mark { position: absolute; top: 10px; inset-inline-end: 10px; z-index: 4; display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--radius-pill); background: var(--success); color: var(--white); box-shadow: 0 6px 14px -6px var(--black-80); transition: background-color var(--d-default) ease; }
.ttip-mark .i { width: 16px; height: 16px; }
.ttip-card.wrong .ttip-mark { background: var(--reward); }

/* each right photo's own sign: the frame lit; a lamp; the phone's edge right above the page; a focus square */
.ttip-extra { position: absolute; z-index: 3; pointer-events: none; transition: opacity 400ms ease; }
.ttip-card[data-tip='frame'] .ttip-vf i { border-color: var(--main-dark-from); transition: border-color 400ms ease; }
.ttip-card[data-tip='light'] .ttip-extra { inset: -30% 10% 50%; background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--reward) 26%, transparent), transparent 70%); }
.ttip-card[data-tip='light'] .ttip-page { filter: brightness(1.06); }
.ttip-card[data-tip='flat'] .ttip-extra { inset: 4% 14%; border-radius: 14px; border: 2px solid var(--white-28); box-shadow: inset 0 0 0 5px var(--black-20); }
.ttip-card[data-tip='sharp'] .ttip-extra { inset: 38% 34% 36%; border: 1.5px solid var(--hand-left-light); border-radius: 3px; }
.ttip-card.wrong .ttip-extra { opacity: 0; }
.ttip-card.wrong[data-tip='frame'] .ttip-vf i { border-color: var(--white-60); }

/* the wrong photographs */
.ttip-card.wrong[data-tip='frame'] .ttip-page { transform: translate(-34%, 30%) rotate(-6deg); }
.ttip-card.wrong[data-tip='light'] .ttip-page { filter: brightness(0.55) saturate(0.7); }
.ttip-card.wrong[data-tip='light'] .ttip-shade { opacity: 0.85; }
.ttip-card.wrong[data-tip='flat'] .ttip-page { transform: perspective(300px) rotateX(48deg) rotate(-10deg) scale(1.05); }
.ttip-card.wrong[data-tip='sharp'] .ttip-page { transform: scale(0.62); filter: blur(2.4px); }

/* the switch */
.ttip-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 3px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--fg) 6%, transparent); }
.ttip-switch button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; border-radius: var(--radius-pill); color: var(--fg-muted); font-size: var(--text-label); font-weight: 700; transition: background-color var(--d-default) ease, color var(--d-default) ease, box-shadow var(--d-default) ease; }
.ttip-switch button .i { width: 16px; height: 16px; }
.ttip-switch button[aria-pressed='true'] { background: var(--surface); color: var(--success-ink); box-shadow: var(--shadow-tile); }
.ttip-switch button[aria-pressed='true']:last-child { color: var(--reward-ink); }
.ttip-switch button:active { scale: 0.97; }
@media (hover: hover) and (pointer: fine) { .ttip-switch button[aria-pressed='false']:hover { color: var(--fg); } }

.ttip-t { display: grid; gap: 6px; padding-inline: 6px; }
.ttip-t h3 { font-size: var(--text-title-3); line-height: var(--lh-title-3); font-weight: 800; }
.ttip-t p { min-height: calc(2 * var(--lh-callout)); color: var(--fg-muted); font-size: var(--text-callout); line-height: var(--lh-callout); transition: color var(--d-default) ease; }
.ttip-card.wrong .ttip-t p { color: var(--reward-ink); }
@media (prefers-reduced-motion: reduce) { .ttip-page { transition-duration: 0s; } }
/*
 * The tools' cost: the question on a dark card at the start (1.15 parts), the plan that answers it on glass at the end
 * (1 part) from 1024 px; the packs as three tiles under them, the promises last. The slider is left to right like
 * every number line on the site (the tempo's too); its track shows the plans' zones and fills to the thumb.
 */

.tcr { padding-block: 0 var(--section); }
.tcr-grid { display: grid; gap: 16px; }
@media (min-width: 1024px) { .tcr-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } }

/* the question */
.tcr-ask { position: relative; display: grid; align-content: center; gap: 18px; padding: clamp(22px, 3vw, 36px); border-radius: var(--radius-card); color: var(--white); overflow: hidden; isolation: isolate;
  background: radial-gradient(70% 60% at 85% 0%, color-mix(in srgb, var(--main-dark-from) 22%, transparent), transparent 70%), linear-gradient(165deg, var(--night-card-top), var(--night-card-bottom)); border: 1px solid var(--white-10); box-shadow: var(--shadow-tile); }
.tcr-ask h3 { font-size: var(--text-title-2); line-height: var(--lh-title-2); font-weight: 800; }
.tcr-pages { display: flex; align-items: baseline; gap: 12px; }
.tcr-pages .odo { font-size: clamp(3.5rem, 2.6rem + 3vw, 5.25rem); line-height: 1; font-weight: 800; }
.tcr-pages-t { color: var(--white-65); font-size: var(--text-headline); font-weight: 600; }
.tcr-slider { display: grid; gap: 12px; }
.tcr-slider input { width: 100%; height: 10px; margin: 0; appearance: none; -webkit-appearance: none; cursor: pointer; border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--main-dark-from) var(--p), transparent var(--p)), linear-gradient(90deg, var(--white-12) 0 var(--free), var(--white-18) var(--free) var(--plus), var(--white-28) var(--plus)); }
.tcr-slider input::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; border-radius: var(--radius-pill); background: var(--white); border: 0; box-shadow: 0 0 0 6px color-mix(in srgb, var(--main-dark-from) 30%, transparent), 0 6px 14px -4px var(--black-80); transition: scale var(--d-press) var(--ease-out); }
.tcr-slider input::-moz-range-thumb { width: 24px; height: 24px; border-radius: var(--radius-pill); background: var(--white); border: 0; }
.tcr-slider input:active::-webkit-slider-thumb { scale: 1.1; }
.tcr-slider input:focus-visible { outline: 2px solid var(--main-dark-from); outline-offset: 6px; }
.tcr-zones { display: grid; grid-template-columns: var(--free) calc(var(--plus) - var(--free)) 1fr; font-size: var(--text-label); font-weight: 700; color: var(--white-60); }
.tcr-zones span { padding-top: 2px; border-top: 2px solid var(--white-15); text-align: center; transition: color var(--d-default) ease, border-color var(--d-default) ease; }
.tcr-zones span + span { margin-inline-start: 4px; }
.tcr-zones span[data-on='true'] { color: var(--white); border-color: var(--main-dark-from); }

/* the plan that answers it */
.tcr-plan { display: grid; align-content: start; gap: 18px; padding: clamp(20px, 2.6vw, 30px); border-radius: var(--radius-card); background: var(--glass-strong); border: 1px solid var(--edge); box-shadow: var(--shadow-tile); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
.tcr-pick { display: inline-flex; align-items: center; gap: 6px; justify-self: start; height: 28px; padding: 0 12px; border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent-ink); font-size: var(--text-label); font-weight: 700; }
.tcr-pick .i { width: 15px; height: 15px; }
.tcr-name { display: flex; align-items: center; gap: 14px; }
.tcr-name div { display: grid; }
.tcr-name b { font-size: var(--text-title-2); line-height: var(--lh-title-2); font-weight: 800; animation: tcr-in 360ms var(--ease-out); }
.tcr-name small { color: var(--fg-muted); font-size: var(--text-subhead); }
.tcr-ico { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 14px; background: linear-gradient(160deg, var(--accent-soft), color-mix(in srgb, var(--accent-soft) 55%, transparent)); border: 1px solid var(--edge); color: var(--accent-ink); }
.tcr-ico .i { width: 24px; height: 24px; }
.tcr-price { display: flex; align-items: baseline; gap: 10px; min-height: 56px; }
.tcr-amt { font-size: 2.75rem; line-height: 1.1; font-weight: 800; }
.tcr-unit { color: var(--fg-muted); font-size: var(--text-subhead); font-weight: 600; }
.tcr-facts { display: grid; gap: 8px; padding-block: 14px; border-block: 1px solid var(--line); }
.tcr-facts li { display: flex; align-items: center; gap: 10px; font-size: var(--text-callout); font-weight: 600; }
.tcr-facts .i { width: 19px; height: 19px; color: var(--accent); }
@keyframes tcr-in { from { opacity: 0; translate: 0 6px; filter: blur(2px); } }

/* the packs */
.tcr-packs { display: grid; gap: 12px; }
.tcr-packs-h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.tcr-packs-h b { font-size: var(--text-title-3); line-height: var(--lh-title-3); font-weight: 800; }
.tcr-packs-h span { display: inline-flex; align-items: center; gap: 6px; color: var(--success-ink); font-size: var(--text-label); font-weight: 700; }
.tcr-packs-h .i { width: 16px; height: 16px; }
.tcr-packs ul { display: grid; gap: 12px; }
@media (min-width: 640px) { .tcr-packs ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tcr-packs li { position: relative; display: grid; gap: 4px; padding: 18px 20px; border-radius: 20px; background: var(--surface); border: 1px solid var(--edge); box-shadow: var(--shadow-tile); transition: translate var(--d-default) var(--ease-out), border-color var(--d-default) ease, box-shadow var(--d-enter) var(--ease-out); }
.tcr-packs li[data-best] { border-color: var(--edge-strong); }
@media (hover: hover) and (pointer: fine) { .tcr-packs li:hover { translate: 0 -3px; border-color: var(--edge-strong); box-shadow: var(--shadow-tile-hover); } }
.tcr-packs li > b { font-size: var(--text-title-3); font-weight: 800; }
.tcr-pack-p { font-size: var(--text-title-2); font-weight: 800; color: var(--accent-ink); }
.tcr-pack-p small { color: var(--fg-muted); font-size: var(--text-subhead); font-weight: 600; }
.tcr-packs li > small { color: var(--fg-muted); font-size: var(--text-footnote); }
.tcr-best { position: absolute; top: 16px; inset-inline-end: 16px; padding: 3px 10px; border-radius: var(--radius-pill); background: var(--success-soft); color: var(--success-ink); font-size: var(--text-caption); font-weight: 800; }

.tcr-promises { display: flex; flex-wrap: wrap; gap: 10px 28px; }
.tcr-promises li { display: inline-flex; align-items: center; gap: 8px; color: var(--fg-muted); font-size: var(--text-subhead); }
.tcr-promises .i { width: 18px; height: 18px; color: var(--success); }