:root {
  --bg: #F6F7F9;
  --card: #FFFFFF;
  --line: #DFE3EA;
  --line-soft: #EDEFF4;
  --ink: #14181F;
  --ink-soft: #59616F;
  --ink-faint: #646C7A;
  --accent: #1D5FD8;
  --accent-soft: #E4EBFB;
  --good: #157048;
  --warn: #96501A;
  --bad: #A32C3C;
  --accent-hover: #17439B;
  --on-accent: #FFFFFF;
  --radius: 10px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0E1116;
    --card: #171B22;
    --line: #2A3038;
    --line-soft: #21262E;
    --ink: #E6EAF0;
    --ink-soft: #A2AAB8;
    --ink-faint: #8A93A1;
    --accent: #6E9BFF;
    --accent-soft: #1A2440;
    --accent-hover: #93B4FF;
    --on-accent: #0E1116;
    --good: #4CB98A;
    --warn: #D19A48;
    --bad: #E37383;
  }
}

* { box-sizing: border-box; }

/* Atribut hidden harus menang atas display:flex/grid milik komponen.
   Tanpa ini, panel opsi yang disembunyikan tetap terlihat. */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 780px; margin: 0 auto; padding: 0 16px 64px; }

/* ---------- header ---------- */

header.bar {
  border-bottom: 1px solid var(--line);
  background: var(--card);
  position: sticky;
  top: 0;
  z-index: 10;
}
header.bar .wrap {
  padding-block: 12px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.logo {
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -.02em;
  color: var(--ink);
  text-decoration: none;
}
nav { display: flex; gap: 16px; flex-wrap: wrap; }
nav a {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: .92rem;
}
nav a:hover, nav a[aria-current="page"] { color: var(--accent); }

/* ---------- teks ---------- */

h1 {
  font-size: clamp(1.55rem, 4.5vw, 2.1rem);
  line-height: 1.15;
  letter-spacing: -.025em;
  margin: 32px 0 8px;
  text-wrap: balance;
}
h2 {
  font-size: 1.15rem;
  letter-spacing: -.015em;
  margin: 36px 0 10px;
}
.sub { color: var(--ink-soft); margin: 0 0 24px; max-width: 60ch; }
p { margin: 0 0 14px; }
a { color: var(--accent); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .78rem;
  color: var(--good);
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 3px 10px;
  margin-bottom: 18px;
}

/* ---------- kartu & dropzone ---------- */

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 16px;
}

#drop {
  border: 2px dashed var(--line);
  border-radius: var(--radius);
  background: var(--card);
  padding: 40px 20px;
  text-align: center;
  cursor: pointer;
  transition: border-color .12s, background .12s;
}
#drop:hover, #drop.over, #drop:focus-visible {
  border-color: var(--accent);
  background: var(--accent-soft);
  outline: none;
}
#drop b { display: block; font-size: 1.05rem; margin-bottom: 4px; }
#drop span { color: var(--ink-faint); font-size: .88rem; }
input[type=file] { display: none; }

/* ---------- opsi ---------- */

#options { display: flex; flex-direction: column; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

select, input[type=number], input[type=text] {
  font: inherit;
  font-size: .95rem;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--bg);
  color: var(--ink);
  min-width: 0;
}
input[type=number] { width: 110px; }
select:focus, input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

input[type=range] { flex: 1; min-width: 160px; accent-color: var(--accent); }
.rangeval {
  font-variant-numeric: tabular-nums;
  font-size: .9rem;
  color: var(--ink-soft);
  min-width: 44px;
  text-align: right;
}
.hint { font-size: .84rem; color: var(--ink-faint); }

.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg label {
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 7px 12px;
  font-size: .9rem;
  cursor: pointer;
  background: var(--bg);
}
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg input:checked + span { color: var(--accent); font-weight: 600; }
.seg label:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.seg label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ---------- tombol ---------- */

.btn {
  font: inherit;
  font-size: .92rem;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--bg);
  color: var(--ink);
  cursor: pointer;
}
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn.primary {
  color: var(--on-accent);
  background: var(--accent);
  border-color: var(--accent);
  font-weight: 600;
  padding: 11px 20px;
  font-size: 1rem;
}
.btn.primary:hover { background: var(--accent-hover); color: var(--on-accent); }
.btn.primary:disabled { opacity: .45; cursor: not-allowed; filter: none; }
.btn.wide { width: 100%; margin-bottom: 12px; }

/* ---------- daftar berkas & hasil ---------- */

ul.files { list-style: none; margin: 12px 0 0; padding: 0; }
ul.files li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-top: 1px solid var(--line-soft);
  font-size: .92rem;
}
ul.files li:first-child { border-top: 0; }

/* Baris ini TIDAK BOLEH mendorong halaman melebar ke samping.

   Sampai 18 September 2026 ia memakai nowrap bawaan flex. Akibatnya, pada saat
   sebuah konversi BERHASIL — satu-satunya saat yang menentukan apakah orang
   merasa situs ini berguna — tombol Download terdorong ke luar layar:

       320px  0 piksel terlihat   (tombolnya hilang sama sekali)
       360px  22 piksel
       390px  52 piksel
       414px  76 piksel dari 103

   Diukur, bukan dikira. Halaman bersih SEBELUM konversi dan melebar SESUDAHNYA,
   yang menjelaskan kenapa smoke-test tidak pernah menangkapnya: ia hanya pernah
   mengukur keadaan sebelum tombol Process ditekan.

   `wrap` di sini sudah cukup menghapus pelebarannya di semua lebar layar: kalau
   isinya muat, barisnya tetap satu baris dan tampilan desktop tidak berubah
   sedikit pun. Aturan di bawahnya hanya membuat hasil di layar sempit terlihat
   disengaja, bukan acak-acakan. */
ul.files li { flex-wrap: wrap; }

@media (max-width: 560px) {
  #results li { row-gap: 8px; }
  /* Nama berkas satu baris penuh, lalu angka penghematan satu baris penuh —
     "−33%" itu justru hadiah yang orang datang untuk melihatnya. */
  #results li > .fname,
  #results li > .meta { flex: 1 0 100%; }
  /* Tombol berbagi rata satu baris: sasaran jempol yang lebar, bukan sisa
     ruang yang terpotong tepi layar. */
  #results li > .btn { flex: 1 1 0; }
}
.fname {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fsize, .meta {
  color: var(--ink-faint);
  font-size: .84rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.meta b { font-weight: 600; }
.meta .good { color: var(--good); }
.meta .warn { color: var(--warn); }
li.bad { color: var(--bad); }
.rm {
  border: 0;
  background: transparent;
  color: var(--ink-faint);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.rm:hover { color: var(--bad); }

/* ---------- progres ---------- */

#bar {
  height: 4px;
  background: var(--line-soft);
  border-radius: 2px;
  overflow: hidden;
  margin: 14px 0 8px;
}
#bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .15s; }
#status { font-size: .88rem; color: var(--ink-soft); min-height: 1.4em; }

/* ---------- grid tool di beranda ---------- */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin: 20px 0 8px;
}
.grid a {
  display: block;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  text-decoration: none;
  color: var(--ink);
}
.grid a:hover { border-color: var(--accent); }
.grid b { display: block; margin-bottom: 4px; }
.grid span { color: var(--ink-soft); font-size: .88rem; }

/* ---------- footer ---------- */

footer {
  border-top: 1px solid var(--line);
  margin-top: 48px;
  padding-top: 20px;
  font-size: .85rem;
  color: var(--ink-faint);
}
footer a { color: var(--ink-soft); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

ul.files li.zipRow { display: block; border-top: 0; padding: 0 0 12px; }

/* Baris ajakan memasang. Sengaja dibuat TENANG: ini bukan iklan, ini catatan
   kecil yang muncul setelah orang mendapatkan berkasnya. Tidak ada warna
   mencolok, tidak mengambang, tidak menutupi apa pun. Kalau orang
   mengabaikannya, ia hanya sebaris teks abu-abu di bawah hasilnya. */
ul.files li.installRow { gap: 10px; }
.installText {
  flex: 1;
  min-width: 0;
  color: var(--ink-faint);
  font-size: .86rem;
}
@media (max-width: 560px) {
  #results li.installRow > .installText { flex: 1 0 100%; }
  #results li.installRow > .btn { flex: 1 1 auto; }
}
.note { font-style: normal; color: var(--warn); font-size: .84rem; }

/* ---------- footer links ---------- */
.footlinks a { margin-right: 2px; }

/* ---------- pemotong gambar ---------- */

.stage {
  position: relative;
  margin: 16px 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  display: flex;
  justify-content: center;
  overflow: hidden;
  touch-action: none;
}
.stage img {
  display: block;
  max-width: 100%;
  max-height: 62vh;
  width: auto;
  user-select: none;
  -webkit-user-drag: none;
}
.stage .shade {
  position: absolute;
  inset: 12px;
  background: rgba(10, 14, 20, .55);
  pointer-events: none;
}
.cropbox {
  position: absolute;
  border: 1.5px solid #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,.45);
  cursor: move;
  touch-action: none;
}
.cropbox::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, transparent 33.33%, rgba(255,255,255,.35) 33.33%, rgba(255,255,255,.35) calc(33.33% + 1px), transparent calc(33.33% + 1px),
      transparent 66.66%, rgba(255,255,255,.35) 66.66%, rgba(255,255,255,.35) calc(66.66% + 1px), transparent calc(66.66% + 1px)),
    linear-gradient(to bottom, transparent 33.33%, rgba(255,255,255,.35) 33.33%, rgba(255,255,255,.35) calc(33.33% + 1px), transparent calc(33.33% + 1px),
      transparent 66.66%, rgba(255,255,255,.35) 66.66%, rgba(255,255,255,.35) calc(66.66% + 1px), transparent calc(66.66% + 1px));
  pointer-events: none;
}
.cropbox i {
  position: absolute;
  width: 20px; height: 20px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.35);
  border-radius: 3px;
}
.cropbox i[data-h=nw] { left: -10px; top: -10px; cursor: nwse-resize; }
.cropbox i[data-h=ne] { right: -10px; top: -10px; cursor: nesw-resize; }
.cropbox i[data-h=sw] { left: -10px; bottom: -10px; cursor: nesw-resize; }
.cropbox i[data-h=se] { right: -10px; bottom: -10px; cursor: nwse-resize; }

#cx, #cy, #cw, #ch { width: 84px; }

/* ---------- gambar ke PDF ---------- */

.pageno {
  font-variant-numeric: tabular-nums;
  font-size: .78rem;
  color: var(--ink-faint);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 4px;
  min-width: 26px;
  text-align: center;
  padding: 1px 4px;
}
.rm:disabled { opacity: .25; cursor: not-allowed; }

/* ---------- metadata ---------- */

.meta-card { margin-top: 14px; }
.meta-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--line-soft);
}
.meta-head b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clean { color: var(--good); }
.gpswarn {
  color: var(--bad);
  border: 1px solid currentColor;
  border-radius: 7px;
  padding: 10px 12px;
  font-size: .92rem;
  line-height: 1.45;
  margin-bottom: 12px;
}
.metalist {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(120px, auto) 1fr;
  gap: 6px 16px;
  font-size: .9rem;
}
.metalist dt { color: var(--ink-faint); }
.metalist dt.sensitive { color: var(--warn); font-weight: 600; }
.metalist dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* Sidik jari SHA-256 di halaman lisensi: 64 huruf tanpa satu pun spasi. Tanpa
   aturan ini, ponsel selebar 360px terpaksa bisa digeser ke samping — sudah
   terjadi sekali dan ditangkap smoke-test (licenses.html melebar 278px). */
code.hash { overflow-wrap: anywhere; }

@media (max-width: 520px) {
  .metalist { grid-template-columns: 1fr; gap: 2px 0; }
  .metalist dd { margin-bottom: 8px; }
  .cropbox i { width: 26px; height: 26px; }
  .cropbox i[data-h=nw] { left: -13px; top: -13px; }
  .cropbox i[data-h=ne] { right: -13px; top: -13px; }
  .cropbox i[data-h=sw] { left: -13px; bottom: -13px; }
  .cropbox i[data-h=se] { right: -13px; bottom: -13px; }
}

#drop.compact { padding: 14px 20px; }
#drop.compact b { font-size: .95rem; font-weight: 600; }

/* ============================================================
   Panduan / artikel
   ============================================================ */

.crumb { font-size: .84rem; color: var(--ink-faint); margin: 0 0 10px; }
.crumb a { color: var(--ink-soft); text-decoration: none; }
.crumb a:hover { color: var(--accent); text-decoration: underline; }

.artmeta { font-size: .84rem; color: var(--ink-faint); margin: -12px 0 26px; }

article h2 { font-size: 1.28rem; margin: 34px 0 12px; }
article h3 { font-size: 1.05rem; margin: 24px 0 8px; font-weight: 600; }
article p, article li { max-width: 68ch; }
article ul, article ol { margin: 0 0 16px; padding-left: 22px; }
article li { margin-bottom: 7px; }
article strong { font-weight: 600; }

.toc {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin: 0 0 30px;
}
.toc b { display: block; font-size: .84rem; text-transform: uppercase;
  letter-spacing: .04em; color: var(--ink-faint); margin-bottom: 8px; }
.toc ol { margin: 0; padding-left: 20px; }
.toc li { margin-bottom: 4px; }

.tablewrap { overflow-x: auto; margin: 0 0 20px; }
table {
  border-collapse: collapse;
  width: 100%;
  min-width: 420px;
  font-size: .92rem;
}
th, td {
  text-align: left;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}
th {
  font-weight: 600;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--ink-faint);
  border-bottom: 1px solid var(--line);
}
tbody tr:last-child td { border-bottom: 0; }

.callout {
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 14px 16px;
  margin: 0 0 20px;
}
.callout p:last-child { margin-bottom: 0; }

.usebox {
  display: block;
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin: 0 0 22px;
  text-decoration: none;
  color: inherit;
}
.usebox:hover { border-color: var(--accent); }
.usebox b { display: block; color: var(--accent); margin-bottom: 3px; }
.usebox span { color: var(--ink-soft); font-size: .9rem; }

.guidelist { list-style: none; margin: 0; padding: 0; }
.guidelist li { border-top: 1px solid var(--line-soft); padding: 16px 0; }
.guidelist li:first-child { border-top: 0; }
.guidelist a { font-weight: 600; text-decoration: none; }
.guidelist a:hover { text-decoration: underline; }
.guidelist p { margin: 4px 0 0; color: var(--ink-soft); font-size: .92rem; }

.seealso { border-top: 1px solid var(--line); margin-top: 40px; padding-top: 20px; }
.seealso b { display: block; font-size: .84rem; text-transform: uppercase;
  letter-spacing: .04em; color: var(--ink-faint); margin-bottom: 10px; }

/* Kontras teks bantuan tidak boleh memburuk justru saat pengguna berinteraksi. */
#drop:hover span, #drop.over span, #drop:focus-visible span { color: var(--ink-soft); }

/* Pesan peringatan pada baris status — harus terbaca, bukan abu-abu samar. */
.warnmsg { color: var(--warn); font-weight: 500; }

/* ============================================================
   Pembanding sebelum / sesudah
   ============================================================ */

body.noscroll { overflow: hidden; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(8, 11, 16, .97);
  display: flex;
  flex-direction: column;
  color: #fff;
}
.lbbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.16);
  flex-wrap: wrap;
}
.lbname {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .95rem;
}
.lbnums {
  font-size: .86rem;
  font-variant-numeric: tabular-nums;
  color: rgba(255,255,255,.75);
  white-space: nowrap;
}
.lbnums .good { color: #6FDCAA; }
.lbnums .warn { color: #F0B65E; }
.lightbox .btn {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.28);
  color: #fff;
}
.lightbox .btn:hover { background: rgba(255,255,255,.18); border-color: #fff; color: #fff; }
.lbclose { font-size: 1.2rem; line-height: 1; padding: 6px 12px; }

.lbstage {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 4px;
}
.lbstage.zoomed {
  overflow: auto;
  align-items: flex-start;
  justify-content: flex-start;
}
.lbpair {
  position: relative;
  flex: none;
  overflow: hidden;
  touch-action: none;
  cursor: ew-resize;
  /* Kotak-kotak abu supaya bagian transparan terlihat sebagai transparan,
     bukan sebagai putih atau hitam. */
  background:
    conic-gradient(from 90deg, #6b7280 25%, #4b5563 0 50%, #6b7280 0 75%, #4b5563 0) 0 0/18px 18px;
}
.lbpair img {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}
.lbclip {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 50%;
  overflow: hidden;
}
.lbhandle {
  position: absolute;
  top: 0; bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,.4);
}
.lbhandle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 34px; height: 34px;
  margin: -17px 0 0 -17px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: rgba(0,0,0,.35);
  box-shadow: 0 0 0 1px rgba(0,0,0,.4);
}
.lbhandle:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.lbtag {
  position: absolute;
  top: 8px;
  font-size: .74rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: rgba(0,0,0,.55);
  padding: 3px 8px;
  border-radius: 4px;
  pointer-events: none;
}
.lbtag.left { left: 8px; }
.lbtag.right { right: 8px; }
.lbmsg { text-align: center; padding: 0 12px 14px; font-size: .9rem; }

@media (max-width: 520px) {
  .lbname { flex-basis: 100%; }
}

/* Baris pemilih folder — hanya muncul di peramban yang mendukungnya. */
.folderrow {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 12px;
}
.folderrow .hint { flex: 1; min-width: 200px; }

/* Kotak centang — dipakai di alat ubah ukuran. */
label.check {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: .95rem;
  cursor: pointer;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  color: var(--ink);
}
label.check input { accent-color: var(--accent); margin-top: 3px; flex: none; }

/* Tombol yang tampil seperti tautan — dipakai pada baris "setelan dipulihkan". */
.linkbtn {
  font: inherit;
  font-size: inherit;
  background: none;
  border: 0;
  padding: 0;
  color: var(--accent);
  text-decoration: underline;
  cursor: pointer;
}
.linkbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.restored { margin: 0; }

/* ============================================================
   Navigasi di layar sempit

   Dengan tujuh alat ditambah Panduan, baris navigasi membungkus jadi tiga
   baris di ponsel — dan karena kepalanya menempel di atas, seperempat layar
   hilang permanen sebelum isinya sempat mulai. Di layar sempit navigasinya
   digulir mendatar dalam satu baris; kepalanya tinggal satu baris lagi.
   ============================================================ */
@media (max-width: 700px) {
  header.bar .wrap {
    flex-wrap: nowrap;
    gap: 14px;
    padding-block: 10px;
  }
  header.bar .logo { flex: none; }
  header.bar nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 14px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    /* Tepi kanan dibuat memudar supaya terlihat masih ada isi di sebelahnya.
       Safari masih perlu awalan -webkit-. */
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent);
  }
  header.bar nav::-webkit-scrollbar { display: none; }
  header.bar nav a { white-space: nowrap; }
}