/* Fonts: Barlow Semi Condensed, SIL Open Font License (see fonts/README.txt),
   copied into the site so no request leaves the page for them. */
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/barlow-semi-condensed-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/barlow-semi-condensed-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/barlow-semi-condensed-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/barlow-semi-condensed-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/barlow-semi-condensed-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/barlow-semi-condensed-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* The darkroom.
   Three deliberate choices, each with a job:
   1. A dark, untinted surround. Photo editors use neutral gray around a
      picture because the color next to it changes how you judge it, and
      here the pictures should be the brightest things on the page. No warm
      or cool cast on the background, for the same reason.
   2. Red means one thing: the shutter is open. It's the safelight of a
      darkroom, and it's used for the shutter while it's recording, and
      nothing else (not delete, not error; the red playhead line is gone).
   3. A condensed, DIN-like face (Barlow Semi Condensed, self-hosted in
      fonts/) so a lot of controls fit in a small space and read quickly. */

:root {
  color-scheme: dark; /* native sliders, scrollbars, search fields and file pickers go dark too */

  --bg: #101010;      /* the page */
  --panel: #1b1b1b;   /* an empty picture; app.js paints it into the exposure canvas too */
  --raised: #262626;  /* a control under the pointer */
  --line: #333;       /* quiet dividers: the timeline track, tick marks */
  --edge: #707070;    /* the outline of anything you can press (3.7:1 on --bg) */
  --ink: #f0f0f0;     /* text, and a chosen option's fill */
  --on-ink: #101010;  /* text on --ink */
  --muted: #a8a8a8;   /* secondary text: 7.7:1 on --bg, 7:1 on --panel */

  --red: #d92d24;     /* the shutter, while it's open (white on it: 4.8:1) */
  --on-red: #fff;
  --focus: #8ab4ff;

  --radius: 6px;
  --font: 'Barlow Semi Condensed', system-ui, -apple-system, sans-serif;
}

body {
  margin: 0;
  font: 18px/1.4 var(--font);
  color: var(--ink);
  background: var(--bg);
}

button, input, select { font-family: inherit; }

main {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
}

/* The header holds only the page's title, for screen readers (visually hidden). */

main {
  padding-top: 24px; /* nothing above the pictures: no title, no tagline */
  padding-bottom: 56px;
  /* A white tab at the very end of the timeline sticks out half its width;
     on a phone that made the page scroll sideways. It stays visible: the
     page padding is wider than the overhang. */
  overflow-x: clip;
}
/* Everything is as wide as the two pictures: as wide as the page, but each
   picture is no taller than 56% of the window, so the shutter below stays in
   view. app.js sets --ratio. */
main > * {
  max-width: min(100%, max(380px, calc(2 * 56vh * var(--ratio, 1.7778) + 20px)));
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 860px) {
  main { padding-left: 16px; padding-right: 16px; }
  main > * { max-width: none; }
}

h2 { font-size: 1.1rem; font-weight: 600; margin: 0 0 8px; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- Buttons ----
   Three kinds, so the weight of a button says what it is:
   filled  = the one thing to do here (shutter, Search)
   outline = everything else (.view-toggle, .small, Save, Surprise me)
   chosen  = an option that's selected (segments, below) */

.view-toggle,
.small,
#save,
.search button.secondary {
  font: inherit;
  font-weight: 500;
  min-height: 40px;
  padding: 4px 16px;
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  background: none;
  color: var(--ink);
  cursor: pointer;
}
.view-toggle { flex: none; }
.small { min-width: 40px; padding: 4px 12px; font-size: 0.95rem; min-height: 36px; }
.view-toggle:hover,
.small:hover,
#save:hover,
.search button.secondary:hover { background: var(--raised); border-color: var(--ink); }
.small:disabled,
#save:disabled { opacity: 0.4; cursor: default; background: none; border-color: var(--edge); }

.view-toggle:focus-visible,
.small:focus-visible,
#save:focus-visible,
#shutter:focus-visible,
.search button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

@media (pointer: coarse) {
  .small { min-height: 44px; min-width: 44px; }
}

/* ---- Choose a video (the picker) ----
   The page looks the same empty as loaded: two pictures with their controls
   under them. Before anything is chosen (body.empty) the controls are dimmed
   and switched off (`inert`), the right picture says what it's waiting for, and
   the picker is the empty state of the left picture: a panel over it (a phone:
   in the page's flow, since the picture there is too small to hold it). After,
   "Choose a video" brings it back as a layer over the whole clip column (a
   phone: over the whole window), so the <video> under it keeps drawing and a
   running exposure keeps going. Searching, in either state, uses the whole
   column, for the results. */

.browse {
  position: fixed;
  inset: 0;
  z-index: 10;
  overflow-y: auto;
  background: var(--bg);
}
.browse[hidden] { display: none; }
@media (max-width: 860px) {
  body.browsing:not(.empty) { overflow: hidden; } /* only the layer scrolls */
}
@media (min-width: 861px) {
  .col-clip { position: relative; }
  .browse { position: absolute; z-index: 5; }
  body.browsing #open-browse { visibility: hidden; } /* it's already open */

  /* The empty state: exactly where the clip's picture will be, centered in it. */
  body.empty:not(.searching) .browse {
    inset: 0 0 auto 0;
    aspect-ratio: 16 / 9; /* as tall as the picture it stands in for, or taller if it needs to be */
    overflow: visible;
    display: flex;
    background: var(--panel);
  }
  body.empty:not(.searching) .browse-inner { width: 100%; margin: auto 0; padding: 20px 24px; }
  body.empty:not(.searching) .own { margin: 12px 0 0; }
}
body.empty #open-browse { display: none; } /* it's already open (and it'd squeeze the tagline on a phone) */

/* A little room all round, so the chosen tile's ring isn't clipped by the scroll box. */
.browse-inner { padding: 6px 12px 40px 6px; }
@media (max-width: 860px) {
  .browse-inner { padding: 16px 16px 48px; }
}

.browse-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.browse-bar h2 { font-size: 1.5rem; line-height: 1.1; margin: 0; }
body.empty .browse-bar { display: none; } /* nothing to go back to */

/* Before anything is chosen: the same layout, with nothing to use yet. */
body.empty .col-controls { opacity: 0.4; }
body.empty .timeline > :not(.track),
body.empty .overview,
body.empty .hint { visibility: hidden; }
@media (max-width: 860px) {
  /* A phone: just the picker under the header. */
  body.empty .browse { position: static; z-index: auto; overflow: visible; }
  body.empty .browse-inner { padding: 0 0 48px; }
  body.empty .col-clip > .pane,
  body.empty .col-clip > .col-controls,
  body.empty .col-exposure { display: none; }
}

/* What the empty exposure says. */
.pane { position: relative; }
.pane-empty {
  display: none;
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 24px;
  place-items: center;
  text-align: center;
  color: var(--muted);
}
body.empty .pane-empty { display: grid; }

.search {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.search input {
  flex: 1 1 280px;
  min-width: 0;
  font: inherit;
  font-size: 1.2rem;
  padding: 10px 16px;
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--ink);
}
.search input::placeholder { color: var(--muted); opacity: 1; }
.search input:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--ink); }
.search button { min-height: 52px; }
.search button[type="submit"] {
  font: inherit;
  font-weight: 600;
  padding: 0 24px;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--on-ink);
  cursor: pointer;
}
.search button[type="submit"]:hover { background: #fff; }
.search button:disabled { opacity: 0.5; cursor: default; }
#search-status { margin: 8px 0 0; }
#search-status:empty { display: none; } /* it only speaks when a search has something to say */

/* Your own video: a quiet row under the search, which is the main way in. */
.own {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 16px 0 28px;
}
.tile.own-card {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--edge);
  border-radius: var(--radius);
}
.tile.own-card:hover { border-color: var(--ink); background: var(--raised); }
.tile.own-card:focus-visible,
#upload-tile:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.tile.own-card[aria-pressed="true"],
#upload-tile.chosen { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.own-card .tile-title { margin: 0; font-size: 1rem; }
.own-card .tile-note { max-width: 14em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.own-card .tile-note:empty { display: none; }

/* The clips and the search results share one grid. */
.results-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin-bottom: 10px;
}
.results-head h2 { font-size: 1.3rem; margin: 0; }
.results-head button { margin-left: auto; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 18px 14px;
}
.results-section { margin: 20px 0 28px; }
body.searching .own { display: none; }
.results-section .grid:empty { display: none; }
#more-results { margin-top: 16px; }

/* ---- Tiles ---- */

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
/* .tile sets display, which would otherwise beat the hidden attribute. */
.tile[hidden] { display: none; }

.tile img {
  box-sizing: border-box;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 4px;
  background: var(--panel);
  object-fit: cover;
  outline: 3px solid transparent;
  outline-offset: 2px;
}

/* The chosen clip gets a light ring; hover shows the same ring, dimmer. */
.tile:hover img { outline-color: var(--edge); }
.tile[aria-pressed="true"] img { outline-color: var(--ink); }
.tile:focus-visible { outline: none; }
.tile:focus-visible img { outline-color: var(--focus); }

.tile-title { margin-top: 6px; font-size: 1rem; font-weight: 600; line-height: 1.2; }
.tile-note { font-size: 0.9rem; color: var(--muted); overflow-wrap: anywhere; }

.credit { font-size: 0.95rem; overflow-wrap: anywhere; }
.credit a { color: inherit; text-underline-offset: 2px; }

/* The file picker itself is invisible; the whole card is its label. */
#upload-tile input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* While a file is dragged over the page. */
body.dropping::after {
  content: 'Drop the video to open it';
  position: fixed;
  z-index: 20; /* above Choose a video too */
  inset: 12px;
  display: grid;
  place-items: center;
  border: 3px dashed var(--ink);
  border-radius: 12px;
  background: rgb(16 16 16 / 0.92);
  font-size: 1.5rem;
  font-weight: 600;
  pointer-events: none;
}

/* ---- The two pictures ----
   The clip and its exposure, side by side. Both keep the clip's shape;
   16:9 holds the space until it loads. The <video> lies under the frame
   canvas at full size: a video that is hidden or tiny can stop drawing. */
canvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: auto 16 / 9;
  background: var(--panel);
}
/* Two columns: each a picture with its own controls under it. */
.stage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 20px;
  align-items: start;
}
.col, .col-controls, .pane { min-width: 0; } /* a wide strip must not stretch the page */
.stage h2 { margin-bottom: 6px; }
.source {
  position: relative;
}
.source video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}
.source #frame { position: relative; }
/* While the page can't read the film's pixels (Safari, streaming) the clip
   pane shows the <video> itself, cropped to the part being stacked.
   app.js sets --crop-x/y/w/h as fractions of the video's picture. */
.source.native-video { overflow: hidden; }
.source.native-video #frame { visibility: hidden; }
.source.native-video video {
  inset: auto;
  width: calc(100% / var(--crop-w));
  height: calc(100% / var(--crop-h));
  left: calc(-100% * var(--crop-x) / var(--crop-w));
  top: calc(-100% * var(--crop-y) / var(--crop-h));
}
/* On a narrow screen: the clip, then the clip's controls with the shutter right
   under it, then the exposure (still in view while the shutter is held), then
   its look and brightness. The clip's controls come apart (display: contents)
   so the how-to and the credit can sit out of the way, below the exposure. */
@media (max-width: 860px) {
  .stage { grid-template-columns: 1fr; row-gap: 0; }
  .col { display: contents; }
  .col-clip > .pane { order: 1; }
  .col-clip > .col-controls { display: contents; }
  .col-clip > .col-controls > * { order: 6; } /* status and the how-to: just under the shutter */
  .col-clip > .col-controls > .transport { order: 2; }
  .col-clip > .col-controls > .timeline { order: 3; }
  .col-clip > .col-controls > .overview { order: 4; }
  .col-clip > .col-controls > .actions { order: 5; }
  .col-exposure > .pane { order: 7; margin-top: 16px; }
  .col-exposure > .col-controls { order: 8; }
  .col-clip > .col-controls > .credit { order: 9; margin-top: 16px; }
}

/* A film has no shutter: its white tabs choose the frames and the exposure
   follows them. Only the camera and a shared screen have one. */
body:not(.live) .col-clip > .col-controls > .actions { display: none; }

/* ---- Live camera ----
   With the camera or a shared screen, there's no clip to mark: the
   timeline and its controls step aside. The camera's preview is mirrored,
   like a mirror, and so is its exposure (app.js flips it), so the picture
   matches what you saw. */

.live-hint { display: none; }
body.live .live-hint { display: block; }
body.live #timeline,
body.live #overview,
body.live .frames-row { display: none; }
body.live.mirror #frame { transform: scaleX(-1); }
body.live.mirror .screen-hint,
body.live:not(.mirror) .camera-hint { display: none; }

/* ---- Timeline ---- */

.timeline {
  position: relative;
  height: 64px;
  margin-top: 8px;
  cursor: grab; /* the stretch moves as a whole, as well as by its tabs */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.timeline.locked {
  pointer-events: none;
  opacity: 0.6;
}

.track,
.span {
  position: absolute;
  top: 21px;
  height: 6px;
}

.track { left: 0; right: 0; background: var(--line); border-radius: 3px; }
.span { background: var(--ink); }

/* The two tabs are handles: a light tab with a dark grip line in it. */
.mark {
  position: absolute;
  top: 4px;
  box-sizing: border-box;
  width: 16px;
  height: 40px;
  margin-left: -8px;
  background: var(--ink);
  border: 2px solid var(--bg);
  border-radius: 4px;
  cursor: ew-resize;
}
.mark::after {
  content: '';
  position: absolute;
  top: 9px;
  bottom: 9px;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  background: var(--on-ink);
  opacity: 0.55;
}

.mark:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* Time labels under the track. */
.ticks { position: absolute; left: 0; right: 0; top: 42px; height: 20px; pointer-events: none; }
.tick {
  position: absolute;
  top: 0;
  padding-left: 4px;
  border-left: 1px solid var(--edge);
  font-size: 0.85rem;
  line-height: 1;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---- Zoom ---- */

.transport {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-top: 12px;
}

/* The whole clip in miniature. */
.overview {
  position: relative;
  height: 16px;
  margin-top: 4px;
  border-radius: 3px;
  background: var(--panel);
  cursor: pointer;
  touch-action: none;
}
.overview[hidden] { display: none; }
.ov-span { position: absolute; top: 5px; bottom: 5px; background: var(--muted); }
.ov-window {
  position: absolute;
  top: 0;
  bottom: 0;
  box-sizing: border-box;
  min-width: 6px;
  border: 2px solid var(--ink);
  border-radius: 3px;
}

.hint { margin: 6px 0 0; max-width: 62ch; font-size: 0.95rem; color: var(--muted); }
body.recorded .hint { display: none; } /* a how-to is for before the first time you use the shutter */

/* ---- Exposure controls ----
   Each is a row: its name, then its choices as segments. The radio is
   still a real radio (it's what the keyboard and screen readers use); it's
   hidden and its label is drawn as the segment. A chosen segment is filled
   light. */

.looks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
  border: 0;
}

.looks label {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  min-height: 40px;
  padding: 3px 14px;
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  line-height: 1.15;
  cursor: pointer;
}
.looks label:hover { background: var(--raised); border-color: var(--ink); }
.looks label:has(input:checked) { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.looks label:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.looks input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: inherit; }

.looks:disabled { opacity: 0.45; }
.looks:disabled label { cursor: default; }
.looks:disabled label:hover { background: none; border-color: var(--edge); }
.looks:disabled label:has(input:checked):hover { background: var(--ink); border-color: var(--ink); }

@media (pointer: coarse) {
  .looks label { min-height: 44px; }
}

/* Brightness: label, slider, value in three columns. */
.sliders {
  display: grid;
  grid-template-columns: 6.5em minmax(120px, 280px) auto; /* one label width, so stacked sliders line up */
  align-items: center;
  gap: 8px 12px;
  margin-top: 16px;
}
@media (max-width: 860px) {
  .sliders { grid-template-columns: 6.5em minmax(100px, 1fr) auto; }
}
.sliders label, .sliders .row-name { font-weight: 600; }
/* Flash's Poses: two segments where a slider and its value would be. */
.sliders .flash-mode { grid-column: 2 / -1; margin: 0; }
.sliders .flash-mode label { font-weight: inherit; min-height: 32px; }
@media (pointer: coarse) {
  .sliders .flash-mode label { min-height: 44px; }
}
.sliders output { color: var(--muted); font-variant-numeric: tabular-nums; }
.sliders[hidden] { display: none; } /* (the grid above would otherwise win over `hidden`) */
.frames-row output { min-width: 7.5em; } /* "every 12th frame" must not squeeze the slider */
.flash-row output, .slices-row output { min-width: 4.5em; } /* "as filmed" */
.sliders input[type="range"] { accent-color: var(--ink); height: 28px; margin: 0; }

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  margin-top: 14px;
}

/* ---- The shutter ----
   Light and filled while it waits, red while it's open. The width is fixed
   so the label changing (Hold to record / Recording… / Release to stop /
   Tap to stop / Cancel) never moves anything. */

#shutter {
  flex: 1 1 12em; /* the one big thing in its column */
  min-height: 52px;
  font: inherit;
  font-size: 1.2rem;
  font-weight: 600;
  padding: 8px 28px;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--on-ink);
  cursor: pointer;
  /* Held down to record: no long-press menu, no text selection, no panning. */
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
#shutter:hover:not(:disabled) { background: #fff; }
#shutter.recording,
#shutter.recording:hover { background: var(--red); border-color: var(--red); color: var(--on-red); }
#shutter.recording::before {
  content: '';
  display: inline-block;
  width: 0.6em;
  height: 0.6em;
  margin-right: 0.5em;
  border-radius: 50%;
  background: currentColor;
}
#shutter:disabled { opacity: 0.4; cursor: default; }

@media (max-width: 860px) {
  #shutter { min-height: 56px; }
}

#status:empty { margin: 0; }

.readout {
  margin: 8px 0 0;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}