/* RouteLogic crew app.
   Desktop (>=940px): phone shell for supervisor training.
   Phone: shell disappears, app goes full-bleed. Same file, same code path. */

*, *::before, *::after { box-sizing: border-box; }

/* The stage around the phone is brand chrome and stays deep green in both
   themes, exactly like the green header on every other screen. What flips is
   the phone screen itself — which is the honest thing to show a crew, since
   this is the surface they hold in the sun or in a truck at 5am. */
:root {
  --cc-dk: #002B1B;

  --scr-bg:     #0f1714;
  --scr-card:   #16211c;
  --scr-alt:    #14261d;
  --scr-line:   #24352d;
  --scr-line-2: #375547;
  --scr-ink:    #e9f2ec;
  --scr-muted:  #93a79c;
  --scr-code:   linear-gradient(#16211c, #101b16);
  --scr-off:    #24352d;
  --scr-off-ink:#75897d;

  --warn-bg:  #2b2413;
  --warn-ink: #f0d9a0;

  --ink:  var(--scr-ink);
  --muted: var(--scr-muted);
  --line: var(--scr-line);
  --card: var(--scr-card);
}

:root[data-theme="light"] {
  --scr-bg:     #ffffff;
  --scr-card:   #ffffff;
  --scr-alt:    #f2f8f4;
  --scr-line:   #dfe4e1;
  --scr-line-2: #b9c6bf;
  --scr-ink:    #0c1410;
  --scr-muted:  #5f6b65;
  --scr-code:   linear-gradient(#fbfdfc, #f1f6f3);
  --scr-off:    #d6ddd9;
  --scr-off-ink:#8d9993;

  --warn-bg:  #fff6e0;
  --warn-ink: #4a3204;
}

/* Crew app scrolls on light surfaces, so the thumb is the brand green at low
   opacity rather than the planner's dark fill. Narrower too — this is a phone
   layout and the bar should not eat thumb-reach at the screen edge. */
@supports not selector(::-webkit-scrollbar) {
  * {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 72, 46, .28) transparent;
  }
}
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(0, 72, 46, .28);
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(0, 72, 46, .45); background-clip: padding-box; }
::-webkit-scrollbar-thumb:active { background: var(--cc); background-clip: padding-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--cc-dk);
  color: var(--ink);
  font: 400 17px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: auto;
}

/* ========================== presentation shell =========================== */

.stage {
  min-height: calc(100vh - 70px); min-height: calc(100dvh - 70px);
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "controls" "phone";
  align-items: center;
  justify-items: center;
  gap: 22px;
  padding: 28px 24px 34px;
  max-width: 1100px;
  margin: 0 auto;
  background:
    radial-gradient(1000px 600px at 12% 8%, rgba(13,107,71,.4), transparent 62%),
    radial-gradient(900px 700px at 96% 100%, rgba(0,72,46,.55), transparent 58%),
    var(--cc-dk);
}

.pitch { grid-area: controls; width: min(760px, 100%); max-width: none; color: #fff; }
.pitch > .logo, .pitch > .eyebrow, .pitch > .headline, .pitch > .dek, .pitch > .points { display: none; }
.logo { width: 210px; height: 141px; object-fit: cover; display: block; margin-bottom: 30px; border-radius: 18px; }
.eyebrow { margin: 0 0 10px; font-size: 12.5px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--cc-lt); }
.headline { margin: 0 0 14px; font-size: clamp(34px, 3.6vw, 50px); font-weight: 800; line-height: 1.05; letter-spacing: -.025em; }
.headline em { font-style: normal; color: var(--cc-lt); }
.dek { margin: 0 0 30px; font-size: 18px; line-height: 1.45; color: rgba(255,255,255,.8); }

.points { list-style: none; margin: 0 0 28px; padding: 0; }
.points li { position: relative; padding-left: 38px; margin-bottom: 13px; font-size: 16px; color: rgba(255,255,255,.75); }
.points b { color: #fff; font-weight: 700; }
.tick { position: absolute; left: 0; top: 1px; width: 24px; height: 24px; border-radius: 50%; background: rgba(127,211,172,.16); border: 1.5px solid rgba(127,211,172,.5); }
.tick::after { content: ""; position: absolute; left: 7.5px; top: 5px; width: 6px; height: 11px; border: solid var(--cc-lt); border-width: 0 2.4px 2.4px 0; transform: rotate(45deg); }

.sim { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; padding: 16px 18px; border: 1px solid rgba(255,255,255,.14); border-radius: 14px; background: rgba(0,0,0,.12); }
.sw-row { display: flex; align-items: center; gap: 10px; font-size: 15px; color: rgba(255,255,255,.82); cursor: pointer; margin: 0; }
.sw-row input { width: 18px; height: 18px; accent-color: var(--cc-lt); }
.sw-row i { font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: rgba(127,211,172,.7); margin-left: 5px; }

.crew-pick { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin: 0; }
.pick-k { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.crew-pick select {
  padding: 8px 12px; border-radius: 8px;
  border: 1.5px solid rgba(255,255,255,.3);
  background: rgba(255,255,255,.1); color: #fff;
  font: 600 15px/1 inherit; font-family: inherit; cursor: pointer;
}
.crew-pick option { color: #000; }

.back { color: rgba(255,255,255,.55); font-size: 14px; text-decoration: none; }
.sim .back[href="index.html"] { display: none; }
.sim .back[href="guide.html"] { order: -1; margin-left: 0 !important; }

.route-alert {
  flex: none;
  padding: 9px 16px;
  background: var(--warn-bg);
  color: var(--warn-ink);
  border-bottom: 1px solid var(--scr-line-2);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}
.back:hover { color: #fff; }

/* ================================ phone ================================== */

.phone { grid-area: phone; justify-self: center; }
.phone-body {
  position: relative;
  width: 392px;
  height: 806px;
  padding: 13px;
  border-radius: 54px;
  background: linear-gradient(160deg, #2c3330, #141917 60%);
  box-shadow: 0 0 0 2px rgba(255,255,255,.07), 0 50px 90px -20px rgba(0,0,0,.72);
}
.phone-pill { position: absolute; top: 26px; left: 50%; transform: translateX(-50%); width: 106px; height: 28px; border-radius: 999px; background: #0b0e0d; z-index: 4; }
.screen { position: relative; height: 100%; border-radius: 42px; background: var(--scr-bg); overflow: hidden; display: flex; flex-direction: column; }

/* ================================= app =================================== */

.bar { flex: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; background: var(--cc); color: #fff; padding: 62px 18px 14px; }
.bar-l { min-width: 0; }
.bar-r { flex: none; display: flex; flex-direction: column; align-items: center; gap: 7px; }
.crew-name { display: block; font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
.day-line { display: block; font-size: 13px; color: rgba(255,255,255,.72); margin-top: 1px; }
.lang-btn { flex: none; min-width: 52px; height: 36px; border: 2px solid rgba(255,255,255,.45); border-radius: 9px; background: transparent; color: #fff; font: 800 15px/1 inherit; font-family: inherit; cursor: pointer; }
.score-btn {
  min-width: 52px; height: 30px; padding: 0 9px;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  border: 1px solid rgba(255,255,255,.32); border-radius: 999px;
  background: rgba(0,0,0,.18); color: #fff;
  font: 800 13px/1 inherit; font-family: inherit; cursor: pointer;
}
.score-star { color: #ffd35a; font-size: 16px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.25)); }
.score-btn:focus-visible, .lang-btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

.prog { flex: none; padding: 11px 18px 12px; background: var(--cc); color: #fff; }
.prog-txt { font-size: 12.5px; font-weight: 700; color: rgba(255,255,255,.85); margin-bottom: 6px; }
.prog-bar { height: 6px; border-radius: 3px; background: rgba(255,255,255,.2); overflow: hidden; }
.prog-bar > div { height: 100%; background: var(--cc-lt); width: 0; transition: width .3s; }

/* Real map, same module as the planner. Kept short — a crew looks at this to
   orient, then works off the list underneath it. */
.map {
  flex: none; position: relative;
  width: 100%; height: 210px;
  background: var(--scr-alt);
  border-bottom: 1px solid var(--line);
}
/* No zoom buttons on a touch screen — pinch works, and the buttons would eat
   a tenth of a 210px-tall map. */
.map .maplibregl-ctrl-bottom-left { display: none; }

.map-tag {
  position: absolute; left: 10px; top: 10px; z-index: 2;
  padding: 4px 9px; border-radius: 999px;
  background: var(--glass); border: 1px solid var(--line);
  font-size: 11px; font-weight: 800; letter-spacing: .04em;
  color: var(--scr-muted);
  pointer-events: none;
}

.jobs { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 14px 26px; }

.job {
  position: relative;
  display: flex; gap: 10px; align-items: flex-start;
  width: 100%; padding: 13px 14px; margin-bottom: 9px;
  border: 2px solid var(--line); border-radius: 13px;
  background: var(--scr-card); color: var(--scr-ink); text-align: left;
}
.job:hover { border-color: var(--scr-line-2); }
.job.done { background: var(--scr-alt); border-color: var(--scr-line-2); }
.job.active { border-color: var(--cc); box-shadow: 0 0 0 3px rgba(0,72,46,.1); }

.job-open {
  position: static;
  flex: 1; min-width: 0;
  display: flex; gap: 12px; align-items: flex-start;
  padding: 0; border: 0;
  background: transparent; color: inherit;
  font: inherit; font-family: inherit; text-align: left;
  cursor: pointer;
}
.job-open::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 11px;
}
.job-open:focus-visible { outline: none; }
.job:has(.job-open:focus-visible) {
  outline: 3px solid var(--cc-lt);
  outline-offset: 2px;
}
.job-n { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--cc); color: #fff; font-size: 13.5px; font-weight: 800; }
.job.done .job-n { background: var(--cc-lt); color: var(--accent-on); }
.job-b { flex: 1; min-width: 0; }
.job-name { font-size: 15.5px; font-weight: 700; line-height: 1.3; }
.job-meta { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.job-side {
  position: relative;
  z-index: 1;
  flex: none;
  min-width: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}
.job-code-line { display: flex; align-items: center; justify-content: center; gap: 5px; }
.job-code { flex: none; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 17px; font-weight: 700; color: var(--code-ink); letter-spacing: .08em; }
.job-tick { flex: none; color: var(--cc-lt); font-size: 19px; font-weight: 800; }
.job-nav {
  width: 34px; height: 30px;
  display: grid; place-items: center;
  border: 1px solid var(--scr-line-2);
  border-radius: 9px;
  background: var(--cc);
  color: #fff;
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0,72,46,.2);
  -webkit-tap-highlight-color: transparent;
}
.job-nav:hover { filter: brightness(1.08); }
.job-nav:active { transform: translateY(1px); }
.job-nav:focus-visible { outline: 3px solid var(--cc-lt); outline-offset: 2px; }

.yard-card {
  display: flex; align-items: center; gap: 11px;
  width: 100%; padding: 14px; margin-top: 4px;
  border: 2px solid var(--cc); border-radius: 13px;
  background: linear-gradient(135deg, var(--scr-alt), var(--scr-card));
  color: var(--scr-ink); text-decoration: none;
  box-shadow: 0 8px 24px rgba(0,72,46,.12);
}
.yard-icon { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--cc); color: #fff; }
.yard-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.yard-body strong { font-size: 16px; }
.yard-body span { color: var(--muted); font-size: 12px; line-height: 1.35; }
.yard-go { flex: none; color: var(--cc); font-size: 12px; font-weight: 800; }
.yard-card:focus-visible { outline: 3px solid var(--cc-lt); outline-offset: 2px; }

.availability-card {
  display: flex; align-items: center; gap: 11px;
  width: 100%; padding: 14px; margin: 0 0 10px;
  border: 2px solid var(--scr-line-2); border-radius: 13px;
  background: var(--scr-alt); color: var(--scr-ink);
}
.availability-card.assigned { border-color: var(--cc-lt); background: var(--ok-bg); }
.availability-body { min-width: 0; display: flex; flex-direction: column; }
.availability-body strong { font-size: 14px; line-height: 1.3; }
.availability-body span { margin-top: 3px; color: var(--muted); font-size: 11px; line-height: 1.4; }
.availability-icon { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--cc); color: #fff; font-weight: 900; }
.availability-spinner { flex: none; width: 32px; height: 32px; border: 4px solid var(--track); border-top-color: var(--cc-lt); border-radius: 50%; animation: availability-spin .8s linear infinite; }
@keyframes availability-spin { to { transform: rotate(360deg); } }

/* ============================== job detail =============================== */

.detail {
  position: absolute; inset: 0; z-index: 6;
  background: var(--scr-bg); color: var(--scr-ink); display: flex; flex-direction: column;
  animation: slide .18s ease-out;
}
.detail[hidden] { display: none; }
@keyframes slide { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }

.d-head { flex: none; display: flex; align-items: center; gap: 12px; padding: 62px 16px 14px; background: var(--cc); color: #fff; }
.d-back { border: 0; background: rgba(255,255,255,.16); color: #fff; width: 36px; height: 36px; border-radius: 9px; font: 700 19px/1 inherit; font-family: inherit; cursor: pointer; flex: none; }
.d-title { font-size: 16.5px; font-weight: 800; line-height: 1.3; }

.d-body { flex: 1; min-height: 0; overflow-y: auto; }

.code-block { padding: 16px; text-align: center; background: var(--scr-code); border-bottom: 2px solid var(--line); }
.code-k { display: block; font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.code-v { display: block; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 60px; font-weight: 700; letter-spacing: .14em; text-indent: .14em; line-height: 1.12; color: var(--code-ink); }
.nav-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  margin-top: 14px; padding: 12px 20px;
  border-radius: 11px; background: var(--cc); color: #fff;
  font-size: 15px; font-weight: 800; letter-spacing: .01em;
  text-decoration: none; cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 72, 46, .28);
  -webkit-tap-highlight-color: transparent;
}
.nav-btn:active { transform: translateY(1px); }
.nav-ic { font-size: 15px; transform: rotate(0deg); }

.f { display: flex; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.f-k { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 1px; }
.f-v { font-size: 15.5px; line-height: 1.4; }
.f-v a { color: var(--cc); font-weight: 700; text-decoration: none; }
.f.note { background: var(--warn-bg); }
.f.note .f-v { font-weight: 600; color: var(--warn-ink); }

.actual { padding: 12px 16px; background: var(--scr-alt); border-bottom: 1px solid var(--line); font-size: 14px; font-weight: 600; color: var(--cc); }
.sim-tag { display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 4px; background: #b4740a; color: #fff; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }

.d-foot { flex: none; padding: 14px 16px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--scr-bg); }

.geo { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); margin-bottom: 10px; }
.geo-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--danger); flex: none; }
.geo.ok .geo-dot { background: var(--cc-lt); }
.geo.ok { color: var(--cc); font-weight: 600; }

.act {
  width: 100%; height: 56px; border: 0; border-radius: 13px;
  background: var(--cc); color: #fff;
  font: 800 17px/1 inherit; font-family: inherit; cursor: pointer;
}
.act:disabled { background: var(--scr-off); color: var(--scr-off-ink); cursor: not-allowed; }
.act.working { background: #a9730d; }

/* ====================== points panel and celebration ===================== */

.score-panel, .celebration { position: absolute; inset: 0; z-index: 20; }
.score-panel[hidden], .celebration[hidden] { display: none; }
.score-scrim { position: absolute; inset: 0; width: 100%; border: 0; background: rgba(2,12,8,.72); backdrop-filter: blur(4px); }
.score-card {
  position: absolute; left: 14px; right: 14px; top: 106px;
  max-height: calc(100% - 126px); overflow-y: auto;
  padding: 18px; border: 1px solid var(--scr-line-2); border-radius: 20px;
  background: var(--scr-card); color: var(--scr-ink);
  box-shadow: 0 24px 60px rgba(0,0,0,.4);
  animation: score-in .22s cubic-bezier(.2,.9,.25,1.15);
}
@keyframes score-in { from { transform: translateY(-8px) scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }
.score-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.score-kicker { display: block; color: var(--muted); font-size: 10.5px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.score-head h2 { margin: 1px 0 0; color: #e6ae18; font-size: 30px; line-height: 1.1; }
.score-close { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; background: var(--scr-alt); color: var(--scr-ink); font-size: 22px; cursor: pointer; }
.score-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 17px 0 12px; }
.score-metric { padding: 12px; border-radius: 12px; background: var(--scr-alt); border: 1px solid var(--line); }
.score-metric strong, .score-metric span { display: block; }
.score-metric strong { font-size: 23px; line-height: 1; }
.score-metric span { margin-top: 5px; color: var(--muted); font-size: 11px; font-weight: 700; }
.score-metric.earned strong { color: var(--cc-lt); }
.score-metric.pending strong { color: #e6ae18; }
.score-quality { display: flex; flex-direction: column; padding: 12px; border-radius: 12px; background: var(--scr-alt); border: 1px solid var(--line); }
.score-quality strong { margin-top: 3px; font-size: 15px; }
.score-quality > span:last-child { color: var(--muted); font-size: 11px; }
.score-recent { margin-top: 10px; border-top: 1px solid var(--line); }
.score-row { display: flex; justify-content: space-between; gap: 10px; padding: 9px 2px; border-bottom: 1px solid var(--line); font-size: 11.5px; }
.score-row span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.score-row strong { flex: none; color: var(--cc); }
.score-explain { margin: 12px 1px 0; color: var(--muted); font-size: 11.5px; line-height: 1.45; }

.celebration {
  display: grid; place-items: center; padding: 18px;
  background: radial-gradient(circle at 50% 35%, rgba(28,143,90,.38), rgba(1,17,10,.93) 60%);
  cursor: pointer; overflow: hidden;
}
.celebrate-card { position: relative; z-index: 2; width: 100%; padding: 30px 22px 23px; border: 1px solid rgba(255,255,255,.16); border-radius: 24px; background: var(--scr-card); color: var(--scr-ink); text-align: center; box-shadow: 0 30px 70px rgba(0,0,0,.48); animation: celebrate-in .55s cubic-bezier(.16,1.25,.3,1); }
@keyframes celebrate-in { 0% { transform: translateY(40px) scale(.75); opacity: 0; } 65% { transform: translateY(-5px) scale(1.03); } 100% { transform: none; opacity: 1; } }
.thumb { width: 112px; height: 112px; margin: 0 auto 10px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(145deg, #85eab6, #12a566); box-shadow: 0 0 0 10px rgba(74,222,128,.11), 0 16px 35px rgba(0,72,46,.32); font-size: 62px; animation: thumb-pop .7s .15s both cubic-bezier(.2,1.5,.4,1); }
@keyframes thumb-pop { from { transform: rotate(-16deg) scale(.4); } to { transform: rotate(0) scale(1); } }
.celebrate-card h2 { margin: 12px 0 5px; font-size: 22px; }
.points-pop { color: #f3c740; font-size: 44px; font-weight: 900; letter-spacing: -.04em; line-height: 1.05; }
.points-label { display: block; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; }
.celebrate-card p { margin: 12px auto 18px; max-width: 270px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.celebrate-go { width: 100%; height: 50px; border: 0; border-radius: 13px; background: var(--cc); color: #fff; font: 800 16px/1 inherit; font-family: inherit; cursor: pointer; }
.confetti { position: absolute; inset: 0; pointer-events: none; }
.confetti i { --a: calc(var(--i) * 22.5deg); position: absolute; left: 50%; top: 42%; width: 8px; height: 18px; border-radius: 3px; background: hsl(calc(var(--i) * 45deg), 78%, 58%); transform: rotate(var(--a)) translateY(-40px); animation: confetti 1.2s calc(var(--i) * 18ms) both ease-out; }
@keyframes confetti { to { transform: rotate(calc(var(--a) + 190deg)) translateY(-330px); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .001ms !important; }
}

/* ============================ phone / narrow ============================= */

@media (min-width: 701px), (pointer: fine) {
  html, body { min-width: 760px; min-height: 894px; }
  .stage { min-width: 760px; min-height: 824px; }
  .headline { font-size: 46px; }
  .crew-pick { flex-wrap: nowrap; }
}

@media (max-width: 700px) and (pointer: coarse) {
  html, body { min-width: 0; min-height: 0; }
  body { background: var(--scr-bg); }
  .stage { display: block; padding: 0; max-width: none; background: none; }
  .pitch { display: none; }
  .phone-body { width: auto; height: 100dvh; padding: 0; border-radius: 0; background: none; box-shadow: none; }
  .phone-pill { display: none; }
  .screen { border-radius: 0; }
  .bar, .d-head { padding-top: calc(14px + env(safe-area-inset-top)); }
  .code-v { font-size: 68px; }
}