/* Cuts visual language — web tokens.
   Transcribed from Packages/CutsDesign (CutsColors phase 4a, CutsMotion,
   CutsFonts) on 2026-08-16. Both modes are first-class. Paste as-is;
   change values only by changing the Swift tokens first.
   Only the @font-face block differs from the canonical file: this site
   ships Latin woff2 subsets instead of the full TTFs. */

/* ---- fonts (the apps' three families, no others) ---- */
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/eb-garamond-400-latin.woff2') format('woff2')}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/eb-garamond-500-latin.woff2') format('woff2')}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/eb-garamond-600-latin.woff2') format('woff2')}
@font-face{font-family:'EB Garamond';font-style:italic;font-weight:400;font-display:swap;src:url('fonts/eb-garamond-400-italic-latin.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('fonts/inter-latin.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/jetbrains-mono-400-latin.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/jetbrains-mono-500-latin.woff2') format('woff2')}

/* ---- the achromatic ramp (light is the default, dark by preference) ---- */
:root{
  --paper:#F5F5F5;      /* the page */
  --surface:#FFFFFF;    /* one step up: cards, panels */
  --surface2:#F0F0F0;   /* second step: tracks, hover, segmented track */
  --raised:#FAFAFA;     /* a floating step */
  --ink:#1A1A1A;        /* primary text, primary button fill */
  --ink-2:#333333;      /* body */
  --ink-3:#666666;      /* secondary */
  --ink-4:#999999;      /* labels — the last legible step, never lighter */
  --line:#E8E8E8;       /* hairline */
  --line-2:#CCCCCC;     /* stronger rule */
  --on-ink:var(--paper);/* text on an inked button — paper, not white */
  --scene:#0D0D0D;      /* cinema field behind footage, both modes */

  /* the editing language — on the VALUE only, never a background */
  --azure:#0D8FF0;      /* LIVE: caret, playhead, selection wash, active */
  --red:#E25940;        /* cut / removed — and the interrupt (error) */
  --magenta:#D5579D;    /* pasted (moved) */
  --teal:#01A290;       /* B-roll */
  --amber:#BE7B01;      /* zoom */
  --purple:#A969DC;     /* speed */
  --indigo:#757CF3;     /* retake */
  --green:#24A745;      /* visual transcript */
  --success:#4A9E5C;
  --warning:#9B7418;
  --error:var(--red);

  --serif:'EB Garamond',Georgia,serif;
  --sans:'Inter',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,monospace;

  /* motion */
  --settle:cubic-bezier(0.22,0.65,0.3,1.0);  /* the cushion */
  --tick:180ms;         /* D2 single-phase, ease-out */
  --tick-fill:120ms;    /* D2 two-phase: the fill snaps… */
  --tick-settle:180ms;  /* …then the content settles on the cushion */
  --rise:450ms;         /* D1 entrance duration */
  --stagger:70ms;       /* D1 stagger per item, capped at the 7th */
  --press:80ms;         /* D3 press-in */
  --release:150ms;      /* D3 release, on the cushion */
  --radius-btn:8px;     /* the technical rectangle (owner: r7–11, never capsule) */
  --radius-card:12px;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#0E0E0E;--surface:#161616;--surface2:#1D1D1D;--raised:#202020;
    --ink:#F1F1F1;--ink-2:#CFCFCF;--ink-3:#8E8E8E;--ink-4:#5E5E5E;
    --line:#262626;--line-2:#343434;
    --azure:#1E97F2;--red:#E6634D;--magenta:#D861A5;--teal:#03A995;
    --amber:#C48301;--purple:#B171DE;--indigo:#8182F5;--green:#37AC50;
    --success:#4A9E5C;--warning:#D4A843;
  }
}
/* explicit theme toggle, if the page has one */
:root[data-theme="dark"]{
  --paper:#0E0E0E;--surface:#161616;--surface2:#1D1D1D;--raised:#202020;
  --ink:#F1F1F1;--ink-2:#CFCFCF;--ink-3:#8E8E8E;--ink-4:#5E5E5E;
  --line:#262626;--line-2:#343434;
  --azure:#1E97F2;--red:#E6634D;--magenta:#D861A5;--teal:#03A995;
  --amber:#C48301;--purple:#B171DE;--indigo:#8182F5;--green:#37AC50;
  --success:#4A9E5C;--warning:#D4A843;
}
:root[data-theme="light"]{
  --paper:#F5F5F5;--surface:#FFFFFF;--surface2:#F0F0F0;--raised:#FAFAFA;
  --ink:#1A1A1A;--ink-2:#333333;--ink-3:#666666;--ink-4:#999999;
  --line:#E8E8E8;--line-2:#CCCCCC;
  --azure:#0D8FF0;--red:#E25940;--magenta:#D5579D;--teal:#01A290;
  --amber:#BE7B01;--purple:#A969DC;--indigo:#757CF3;--green:#24A745;
  --success:#4A9E5C;--warning:#9B7418;
}

/* ---- base ---- */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink-2);font-family:var(--sans);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
::selection{background:var(--ink);color:var(--paper)}   /* selection is inverted ink, not azure */

/* ---- the three voices ---- */
.voice{font-family:var(--serif);font-weight:400;letter-spacing:-.02em;line-height:1.08;color:var(--ink)}       /* the event: one headline per screen */
.voice-caption{font-family:var(--serif);font-style:italic;font-weight:400;font-size:18px;color:var(--ink-3)}
.lbl{font-family:var(--mono);font-weight:500;font-size:10px;line-height:1;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4)}  /* the instrument label */
.data{font-family:var(--mono);font-weight:500;font-variant-numeric:tabular-nums;color:var(--ink)}               /* timecodes, counts */
.body{font-family:var(--sans);font-size:15px;line-height:1.55;color:var(--ink-3);max-width:48ch}                /* running text, invisible */

/* ---- buttons: the technical rectangle ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 18px;
  font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  border:1px solid transparent;border-radius:var(--radius-btn);cursor:pointer;
  transition:transform var(--press) ease-out,background var(--tick) var(--settle),color var(--tick) ease,border-color var(--tick) ease}
.btn:active{transform:scale(.97);transition-duration:var(--press)}          /* pressTick */
.btn-solid{background:var(--ink);color:var(--on-ink)}
.btn-ghost{background:transparent;color:var(--ink-2);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink-4);background:var(--surface)}
.btn-danger{background:transparent;color:var(--red);border-color:var(--red)}
.btn[disabled]{color:var(--ink-4);background:var(--surface2);cursor:default}

/* ---- segmented control ---- */
.seg{display:inline-flex;gap:1px;padding:2px;background:var(--surface2);border-radius:9px}
.seg > button{font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;
  padding:6px 11px;border:0;border-radius:7px;background:transparent;color:var(--ink-3);cursor:pointer;
  transition:background var(--tick-fill) ease-out,color var(--tick-settle) var(--settle)}
.seg > button[aria-pressed="true"]{background:var(--surface);color:var(--ink)}
.seg > button:active{transform:scale(.97)}

/* ---- badge (a badge is a physical thing: capsule allowed) ---- */
.badge{display:inline-flex;align-items:center;gap:3px;font-family:var(--mono);font-weight:500;font-size:9px;letter-spacing:.12em;text-transform:uppercase;
  padding:1.5px 5px;border-radius:999px;background:color-mix(in srgb,var(--ink) 16%,transparent);color:var(--ink)}
.badge.on-ink{background:color-mix(in srgb,var(--on-ink) 22%,transparent);color:var(--on-ink)}
.badge.on-artwork{background:rgba(0,0,0,.55);color:#fff}

/* ---- status readout / telemetry ---- */
.status{font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-variant-numeric:tabular-nums}
.status.ok{color:var(--success)} .status.warn{color:var(--warning)} .status.err{color:var(--error)}
.tel{font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-variant-numeric:tabular-nums}
.tel .was{color:var(--ink-4)}
.tel .arrow{color:var(--ink-4);margin:0 6px}
.tel .delta{color:var(--red)}
.tel .sep{color:var(--ink-4);margin:0 7px}

/* ---- the transcript specimen ---- */
.spec-body{font-family:var(--mono);font-size:15px;line-height:2.2;color:var(--ink-2);letter-spacing:-.01em}
.spec-body .w{cursor:pointer;padding:1px 1px;border-radius:1px;transition:background var(--tick) ease}
.spec-body .w:hover{background:color-mix(in srgb,var(--red) 10%,transparent)}
.spec-body .w.cut{color:var(--red);text-decoration:line-through;text-decoration-color:var(--red);opacity:.7}
.spec-body .w.cut.t-retake{color:var(--indigo);text-decoration-color:var(--indigo)}
.spec-body .w.zoomed{border-bottom:2px solid var(--amber)}
.pause{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.08em;color:var(--ink-4);border:1px solid var(--line);padding:1px 7px;margin:0 2px;white-space:nowrap;user-select:none;border-radius:4px}
.pause.cut{color:var(--ink-3);border-color:var(--line-2);text-decoration:line-through}

/* ---- the lamp (a live caret is on or off — steps, never a fade) ---- */
.caret{display:inline-block;width:2px;height:.82em;background:var(--azure);margin-left:2px;border-radius:1px;vertical-align:-.04em;animation:lamp 1s steps(1) infinite}
@keyframes lamp{50%{opacity:.2}}

/* ---- D1 entrance: add .rise to a group's children, set --i per child ---- */
.rise{opacity:0;transform:translateY(12px);
  transition:opacity var(--rise) ease-out,transform var(--rise) ease-out;
  transition-delay:calc(min(var(--i,0),6) * var(--stagger))}
.rise.in{opacity:1;transform:none}

/* ---- D4 block progress: n blocks, fill by class ---- */
.blocks{display:inline-flex;gap:3px}
.blocks i{width:10px;height:6px;background:var(--line-2)}
.blocks i.on{background:var(--ink);transition:background var(--tick-fill) ease-out}

/* ---- dot-matrix motif (drawn, never a font) ---- */
.dot-field{background-image:radial-gradient(circle,var(--line-2) 1px,transparent 1.2px);background-size:15px 15px;opacity:.6}
.empty{font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4)} /* [NO PROJECTS — IMPORT A VIDEO] */

/* ---- cards: one surface step, no outline, no shadow ---- */
.card{background:var(--surface);border-radius:var(--radius-card)}
.card.receded{opacity:.62;filter:saturate(.6)}   /* siblings of the selected card recede; the bright one IS the selection */
.hairline{height:1px;background:var(--line)}     /* the seam between two lists */

/* ---- the wordmark lockup, TYPESET fallback only — the rendered asset is the rule.
   Scoped to `.lock-typeset` so it never collides with an image lockup named `.lock`. ---- */
.lock-typeset{display:inline-flex;align-items:baseline;line-height:1;white-space:nowrap}
.lock-typeset .cl-word{font-family:var(--sans);font-weight:700;font-variation-settings:'opsz' 32,'wght' 700;letter-spacing:-.050em;font-kerning:none;color:var(--ink)}
.lock-typeset .cl-caret{display:inline-block;border-radius:999px;width:.129em;height:.82em;margin-left:-.06em;transform:translateY(.02em);background:var(--azure)}

/* ---- Reduce Motion: a state simply IS in its new state ---- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .rise{opacity:1;transform:none}
  .caret{animation:none;opacity:1}
}