/* The notch, the status bar and the home indicator: zero unless the page reaches the screen's edges (viewport-fit=cover
   on an iPhone, in the iOS app, in a browser drawing under the phone's bars). The controls keep clear of them. */
:root { --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px); --sal: env(safe-area-inset-left, 0px); --sar: env(safe-area-inset-right, 0px); }
:root { --accent: #1f9d55; --accent-ink: #fff; --ink: #17202a; --muted: #5f6b76; --line: #e3e7ea; --panel: #ffffff; --field: #ffd400; --bar: #111820; --bar-2: #1a232d; --bar-line: #2b3642; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; font: 15px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: var(--ink); background: #0d1117; }
a { color: var(--accent); }
#map { position: absolute; inset: calc(52px + var(--sat)) 0 0 0; }
#map .maplibregl-ctrl-bottom-left, #map .maplibregl-ctrl-top-left { left: var(--sal); }
#map .maplibregl-ctrl-bottom-right, #map .maplibregl-ctrl-top-right { right: var(--sar); }
#map .maplibregl-ctrl-bottom-left, #map .maplibregl-ctrl-bottom-right { bottom: var(--sab); }
.bar { position: absolute; inset: 0 0 auto 0; height: calc(52px + var(--sat)); display: flex; gap: 8px; align-items: center; padding: var(--sat) calc(12px + var(--sar)) 0 calc(12px + var(--sal)); background: var(--bar); color: #fff; z-index: 3; }
.brand { white-space: nowrap; margin-right: 4px; }
.brand span { color: var(--field); }
.search { flex: 1; max-width: 380px; min-width: 0; }
.search input { width: 100%; height: 34px; border-radius: 8px; border: 1px solid var(--bar-line); background: var(--bar-2); color: #fff; padding: 0 10px; font: inherit; }
button { font: inherit; border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 10px; padding: 8px 12px; cursor: pointer; }
.bar button { background: var(--bar-2); color: #fff; border-color: var(--bar-line); white-space: nowrap; height: 34px; padding: 0 12px; }
.bar button.icon { padding: 0 9px; }
.bar .account { margin-left: auto; max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.bar .account.signed { background: var(--accent); border-color: var(--accent); }
button.primary, .bar button.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
button:disabled { opacity: .45; cursor: default; }
button.wait { opacity: .45; cursor: default; }
button.primary.counting { opacity: .8; } /* result is ready, the label counts the last seconds down */
button.wide { width: 100%; }
.tools { position: absolute; top: calc(60px + var(--sat)); left: calc(10px + var(--sal)); right: calc(10px + var(--sar)); z-index: 2; display: flex; gap: 6px; overflow-x: auto; pointer-events: none; scrollbar-width: none; }
.tools > * { pointer-events: auto; flex: none; }
.tools button, .tools select { height: 34px; border-radius: 17px; border: 0; background: rgba(17,24,32,.86); color: #fff; padding: 0 12px; font: inherit; box-shadow: 0 2px 10px rgba(0,0,0,.25); }
.tools button.primary { background: var(--accent); }
.tools select { max-width: 190px; }
.tools .netchip { display: flex; align-items: center; gap: 8px; height: 34px; border-radius: 17px; background: #f2c94c; color: #17202a; padding: 0 6px 0 12px; font-size: 13px; font-weight: 600; box-shadow: 0 2px 10px rgba(0,0,0,.25); }
.tools .netchip button { height: 26px; border-radius: 13px; background: #17202a; padding: 0 10px; font-size: 13px; box-shadow: none; }
.pending { font-size: 12px; color: #8a5a00; white-space: nowrap; }
.todayfield { border-top: 1px solid var(--line); padding: 10px 0; }
.todayfield p { margin: 4px 0; }
.todayfield .frost { color: #1c5d99; font-weight: 600; }
.todayfield button { margin-top: 4px; }
.todaypush { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 4px; }
.todaypush label { display: inline-flex; gap: 6px; align-items: center; }
#toast { position: absolute; left: 50%; top: calc(104px + var(--sat)); transform: translateX(-50%); background: rgba(17,24,32,.94); color: #fff; padding: 10px 14px; border-radius: 10px; z-index: 20; max-width: 90vw; display: none; pointer-events: none; } /* a tap on the message reaches the map: the point is put where the person taps */
#drawbar { position: absolute; left: 50%; bottom: calc(20px + var(--sab)); transform: translateX(-50%); background: #fff; padding: 10px 12px; border-radius: 12px; z-index: 4; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; align-items: center; width: max-content; max-width: calc(100vw - 24px - var(--sal) - var(--sar)); box-shadow: 0 6px 24px rgba(0,0,0,.25); }
#drawHint { flex-basis: 100%; text-align: center; }
#drawbar:not(.cut) #cutKeep, #drawbar:not(.cut) #cutRemove, #drawbar.cut #drawDone { display: none; }
body.drawing .maplibregl-ctrl-bottom-right, body.drawing .maplibregl-ctrl-bottom-left { margin-bottom: var(--drawbar, 0px); }
.hint { position: absolute; left: calc(12px + var(--sal)); bottom: calc(34px + var(--sab)); width: 340px; max-width: calc(100% - 24px - var(--sal) - var(--sar)); background: #fff; border-radius: 14px; padding: 14px 16px; z-index: 3; box-shadow: 0 8px 30px rgba(0,0,0,.3); }
.hint p { margin: 6px 0 0; color: var(--muted); }
.x { position: absolute; right: 8px; top: 8px; border: 0; font-size: 20px; padding: 2px 8px; background: transparent; }
.hint .x { right: 4px; top: 4px; }
#panel { position: absolute; top: calc(104px + var(--sat)); right: calc(12px + var(--sar)); width: 380px; max-height: calc(100% - 116px - var(--sat) - var(--sab)); overflow: auto; background: var(--panel); border-radius: 14px; padding: 16px; z-index: 4; box-shadow: 0 8px 30px rgba(0,0,0,.3); }
.fname { font-weight: 600; margin-right: 28px; overflow-wrap: anywhere; }
.area { font-size: 26px; font-weight: 700; }
.area small { font-size: 15px; color: var(--muted); font-weight: 400; }
.src { color: var(--muted); font-size: 13px; margin: 2px 0 12px; }
.stack { display: grid; gap: 8px; margin: 10px 0; }
.stack > button { width: 100%; text-align: left; }
h3 { margin: 0 0 6px; }
h4 { margin: 14px 0 6px; font-size: 14px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.card dl { display: grid; grid-template-columns: 120px 1fr; gap: 4px 10px; margin: 0; }
.card dt { color: var(--muted); }
.card dd { margin: 0; }
.card ul { margin: 0; padding-left: 18px; }
.muted { color: var(--muted); font-size: 13px; }
.credit { color: var(--muted); font-size: 11px; margin-top: 14px; }
.chart svg { width: 100%; height: auto; display: block; }
.chart { cursor: pointer; touch-action: manipulation; }
.warn { background: #fff4d6; border: 1px solid #f0d58a; border-radius: 10px; padding: 10px 12px; margin: 4px 0 10px; font-size: 14px; }
.warn p { margin: 0 0 8px; }
.edge { display: inline-block; background: #fff4d6; color: #7a5200; border: 1px solid #f0d58a; border-radius: 6px; padding: 0 6px; font-size: 12px; white-space: nowrap; }
.mapbar { display: flex; align-items: center; gap: 8px; margin: 10px 0 8px; }
.mapbar .mapdate { flex: 1; text-align: center; font-size: 13px; }
.mapbar .nav { padding: 6px 14px; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin-bottom: 6px; }
.seg button { border: 0; border-radius: 0; padding: 6px 14px; }
.seg button + button { border-left: 1px solid var(--line); }
.seg button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.legend { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.legend i { flex: 1; height: 8px; border-radius: 4px; background: linear-gradient(90deg, #a5673f, #d9b26a, #f2e86d, #8fd14f, #2f9e44, #0b6b2f); }
.modal { position: fixed; inset: 0; background: rgba(5,9,14,.72); z-index: 10; display: flex; align-items: center; justify-content: center; padding: calc(16px + var(--sat)) calc(16px + var(--sar)) calc(16px + var(--sab)) calc(16px + var(--sal)); }
.sheet { background: #fff; border-radius: 16px; padding: 18px; width: min(460px, 100%); max-height: calc(92vh - var(--sat) - var(--sab)); overflow: auto; }
.waitbox { position: relative; border-radius: 12px; height: 220px; background: linear-gradient(135deg, #1f6f43, #13291c); color: #fff; display: flex; align-items: center; justify-content: center; text-align: center; padding: 34px 22px 20px; font-size: 17px; }
.waittag { position: absolute; left: 10px; top: 10px; font-size: 11px; background: rgba(255,255,255,.18); padding: 2px 8px; border-radius: 6px; }
.waittimer { position: absolute; right: 10px; top: 8px; font-size: 13px; background: rgba(0,0,0,.35); padding: 2px 8px; border-radius: 6px; }
.progress { height: 8px; background: #edf0f2; border-radius: 4px; overflow: hidden; margin: 14px 0 6px; }
.progress div { height: 100%; width: 0; background: var(--accent); transition: width .4s; }
.row { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; flex-wrap: wrap; }
.row.left { justify-content: flex-start; margin-top: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
.chips button { padding: 6px 10px; border-radius: 16px; }
.chips button.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.mic { display: block; margin: 16px auto 6px; width: 84px; height: 84px; border-radius: 50%; font-size: 34px; background: var(--accent); color: #fff; border: 0; }
.mic.on { background: #d62f2f; animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 12px rgba(214,47,47,.15); } }
.center { text-align: center; }
.status { margin-top: 8px; min-height: 1.2em; }
.quote { background: #f5f7f8; border-radius: 10px; padding: 10px 12px; margin: 8px 0; }
.wish { border-top: 1px solid var(--line); padding: 8px 0; }
.pill { display: inline-block; font-size: 12px; padding: 1px 8px; border-radius: 10px; background: #edf0f2; color: var(--muted); margin-left: 6px; }
.pill.done { background: #d8f3e3; color: #15703c; }
.pill.in_progress, .pill.accepted { background: #fff3c4; color: #7a5d00; }
.pill.declined { background: #f6dede; color: #8a2525; }
.google { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; font-weight: 600; }
.google .g { font-weight: 800; color: #4285f4; }
.or { text-align: center; color: var(--muted); font-size: 13px; margin: 14px 0 8px; }
.emailform { display: flex; gap: 8px; }
.emailform input { flex: 1; min-width: 0; height: 40px; border-radius: 10px; border: 1px solid var(--line); padding: 0 10px; font: inherit; }
.fine { color: var(--muted); font-size: 12px; margin: 12px 0 0; }
.menu { display: grid; gap: 6px; margin: 12px 0; }
.menu button { text-align: left; }
.menu button.danger { color: #b42318; }
.langpick { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.langpick select { height: 34px; border-radius: 8px; border: 1px solid var(--line); font: inherit; padding: 0 6px; }
.who { display: flex; align-items: center; gap: 10px; }
.avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; flex: none; }
.myfield { display: flex; gap: 8px; align-items: center; border-top: 1px solid var(--line); padding: 10px 0; }
.myfield .go { flex: 1; min-width: 0; overflow-wrap: anywhere; text-align: left; border: 0; padding: 0; background: transparent; }
.myfield .go b, .myfield .go span { display: block; }
.short { display: none; }

/* field card: actions, tabs */
.actions { margin: 8px 0 4px; }
.actions button { padding: 7px 11px; }
.menu.more { margin: 6px 0 4px; gap: 4px; }
.menu.more button { padding: 7px 11px; }
.tabs { display: flex; border-bottom: 1px solid var(--line); margin: 10px -16px 8px; padding: 0 10px; position: sticky; top: -16px; background: var(--panel); z-index: 1; }
.tabs button { flex: 1; border: 0; border-radius: 0; background: transparent; padding: 10px 4px 8px; color: var(--muted); border-bottom: 3px solid transparent; font-weight: 600; font-size: 14px; }
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.seg.small button { padding: 5px 10px; font-size: 13px; }
#panel .seg { flex-wrap: wrap; }
#panel .seg button { padding: 6px 10px; }
.legend.moist i { background: linear-gradient(90deg, #8c510a, #d8b365, #f6e8c3, #c7eae5, #5ab4ac, #01665e); }
.legend.zones i { background: linear-gradient(90deg, #d73027 0 33%, #fee08b 33% 66%, #1a9850 66%); }
.trust { color: var(--muted); font-size: 12px; margin: 8px 0 0; }
/* weather */
.totals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 6px 0; }
.totals div { background: #f3f7fa; border-radius: 10px; padding: 8px; }
.totals b { display: block; font-size: 20px; }
.totals span { display: block; font-size: 12px; color: var(--muted); }
.totals .low b { color: #b45309; }
.totals .high b { color: #1d4ed8; }
.wxchart svg, .spray svg { width: 100%; height: auto; display: block; }
.spray { margin: 6px 0; }
.spray rect { cursor: pointer; }
.caution { color: #7a4f00; background: #fff4dc; border-radius: 8px; padding: 6px 9px; font-size: 13px; margin: 6px 0; }
.spray rect.sel { stroke: #17202a; stroke-width: 1.5; }
.windows { margin: 4px 0 8px; padding-left: 18px; }
.inline { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 6px 0; }
.inline input { height: 36px; border-radius: 8px; border: 1px solid var(--line); padding: 0 8px; font: inherit; min-width: 0; }
.inline input[type="number"] { width: 84px; }
.gauge { list-style: none; padding: 0; margin: 4px 0; font-size: 13px; }
.gauge li { display: flex; justify-content: space-between; border-top: 1px solid var(--line); padding: 4px 0; }
.gauge button { border: 0; padding: 0 4px; color: #b42318; background: transparent; }
table.days { width: 100%; border-collapse: collapse; font-size: 13px; }
table.days th, table.days td { text-align: right; padding: 4px 3px; border-top: 1px solid var(--line); }
table.days th:first-child, table.days td:first-child { text-align: left; }
table.days th { color: var(--muted); font-weight: 500; }
.hourinfo { min-height: 1.2em; }
/* soil and relief */
.facts { display: grid; grid-template-columns: 120px 1fr; gap: 4px 10px; margin: 4px 0 8px; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; }
/* work log */
.logform { display: grid; gap: 8px; background: #f6f8f9; border-radius: 12px; padding: 10px; margin: 8px 0; }
.logform .chips { margin: 0; }
.logform input, .logform select, .logform textarea { width: 100%; height: 38px; border-radius: 8px; border: 1px solid var(--line); padding: 0 8px; font: inherit; background: #fff; }
.logform textarea { height: 64px; padding: 6px 8px; resize: vertical; }
.logform .two { display: grid; grid-template-columns: 1fr 120px; gap: 8px; }
.logform .thumb { max-width: 120px; max-height: 90px; border-radius: 8px; display: block; }
.entry { border-top: 1px solid var(--line); padding: 8px 0; }
.entry.plan { opacity: .8; }
.entry .top { display: flex; gap: 8px; align-items: baseline; justify-content: space-between; }
.entry .etools { display: flex; gap: 4px; flex: none; }
.entry .etools button { padding: 2px 8px; font-size: 13px; }
.entry img { max-width: 100%; max-height: 160px; border-radius: 8px; margin-top: 6px; display: block; }
.entry .kind { font-weight: 600; }
.entry.hl { background: #fff8db; }
.year { margin: 12px 0 0; font-weight: 700; color: var(--muted); font-size: 13px; }
.entry .edet { color: var(--muted); font-size: 13px; }
.logform .two.even { grid-template-columns: 1fr 1fr; }
.logform label.muted { display: grid; gap: 2px; font-size: 12px; }
.logform .sum { font-weight: 600; min-height: 1.2em; }
.wxrec { font-size: 14px; display: grid; gap: 4px; }
.wxrec p { margin: 0; }
.wxin { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.wxv.l0 { color: #1d7a3a; }
.wxv.l1 { color: #8a5a00; }
.wxv.l2 { color: #b3261e; font-weight: 600; }
.entry .wxsrc { opacity: .8; }
.logform input:disabled, .logform select:disabled { background: #eef1f3; color: var(--muted); }
/* money of the field */
.money { background: #f6f8f9; border-radius: 12px; padding: 8px 10px; margin: 8px 0; }
.money .mhead { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.money .mhead b { margin-right: auto; }
.money select, .mymoney select { height: 32px; border-radius: 8px; border: 1px solid var(--line); background: #fff; font: inherit; font-size: 13px; padding: 0 6px; }
.money .totals { grid-template-columns: 1fr 1fr; }
.money .totals b { font-size: 16px; }
.money .totals div { background: #fff; }
.money .mbig { display: flex; gap: 4px 10px; align-items: baseline; flex-wrap: wrap; margin: 6px 0; }
.money .mbig b { font-size: 22px; }
.money .mbig span { color: var(--muted); font-size: 13px; }
.money .mbig.gain b { color: #15803d; }
.money .mbig.loss b { color: #b42318; }
.money p { margin: 4px 0 0; }
.totals .gain b, .gain { color: #15803d; }
.totals .loss b, .loss { color: #b42318; }
.mymoney { margin: 4px 0 0; font-weight: 600; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mymoney:empty { display: none; }
.myfield .mline { font-size: 13px; }
/* the spraying and fertilizer register */
.regfarm { display: flex; gap: 8px; align-items: center; margin: 6px 0; }
.regfarm input { flex: 1; min-width: 0; height: 38px; border-radius: 10px; border: 1px solid var(--line); padding: 0 10px; font: inherit; }
#regBody { overflow-x: auto; }
.reghead h2 { margin: 8px 0 2px; font-size: 18px; }
.reghead p { margin: 0 0 6px; color: var(--muted); }
table.reg { width: 100%; border-collapse: collapse; font-size: 12px; margin: 4px 0 12px; }
table.reg th, table.reg td { border: 1px solid var(--line); padding: 4px 5px; text-align: left; vertical-align: top; }
table.reg th { background: #f3f6f8; font-weight: 600; }
/* share */
.check { display: flex; gap: 8px; align-items: center; margin: 10px 0; }
.linkrow { display: flex; gap: 8px; margin: 8px 0; }
.linkrow input { flex: 1; min-width: 0; height: 40px; border-radius: 10px; border: 1px solid var(--line); padding: 0 10px; font: inherit; background: #f6f8f9; }
a.btn { display: inline-block; text-decoration: none; border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; color: var(--ink); }
button.danger { color: #b42318; }
/* my fields */
.sheet.wide { width: min(640px, 100%); }
.mytools { margin: 10px 0 6px; align-items: center; }
.mytools select { height: 38px; border-radius: 10px; border: 1px solid var(--line); font: inherit; padding: 0 8px; background: #fff; }
.filebtn { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; cursor: pointer; background: #fff; }
.filebtn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.grouphead { display: flex; justify-content: space-between; margin: 14px 0 2px; font-weight: 700; }
.grouphead span { color: var(--muted); font-weight: 400; font-size: 13px; }
.myfield .ndvi { font-size: 13px; }
.up { color: #15803d; }
.down { color: #b42318; }
.myfield a { font-size: 13px; white-space: nowrap; }
@media (max-width: 640px) {
  #panel { left: calc(8px + var(--sal)); right: calc(8px + var(--sar)); width: auto; top: auto; bottom: calc(8px + var(--sab)); max-height: 62%; }
  .brand span, .long { display: none; }
  .short { display: inline; }
  .bar { gap: 6px; padding: var(--sat) calc(8px + var(--sar)) 0 calc(8px + var(--sal)); }
  .bar .account { max-width: 96px; padding: 0 10px; }
  .hint { bottom: calc(16px + var(--sab)); }
  .totals b { font-size: 17px; }
  .logform .two { grid-template-columns: 1fr 100px; }
  .tabs button { font-size: 13px; }
}
@media (max-height: 520px) { /* a phone turned sideways: the hint must leave the fields free to tap */
  .hint { width: 520px; bottom: calc(12px + var(--sab)); padding: 10px 14px; font-size: 13px; }
  .hint p { margin-top: 4px; }
  .hint .trust { display: none; }
}
@media print {
  .noprint { display: none !important; }
  html, body { background: #fff; height: auto; } /* an app's web view (Android) prints the page's backgrounds too */
  body.printing > :not(#regModal) { display: none !important; }
  body.printing #regModal { position: static; display: block; background: none; padding: 0; }
  body.printing #regModal .sheet { width: auto; max-height: none; overflow: visible; box-shadow: none; padding: 0; border-radius: 0; }
  body.printing #regBody { overflow: visible; }
  body.printing table.reg { font-size: 9pt; }
  body.printing table.reg tr { break-inside: avoid; }
}
@page { size: A4 landscape; margin: 10mm; }

/* today's spraying windows on the field card, and the offer of the morning message */
.spraytoday { margin: 8px 0 4px; }
.spraytoday .spraylines { display: block; width: 100%; text-align: left; background: #f1f8f2; border: 1px solid #cfe6d3; border-radius: 10px; padding: 8px 10px; font: inherit; color: inherit; cursor: pointer; }
.spraytoday .spraylines p { margin: 2px 0; font-size: 14px; }
.offer { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 14px; }
.offer span { flex: 1; }
.offer .x { position: static; }
#toast button { pointer-events: auto; margin-left: 8px; background: #fff; color: #111820; border: 0; border-radius: 8px; padding: 4px 10px; font: inherit; font-weight: 600; }

/* a question of ours: a card at the bottom, over the map and the windows, closable */
.ask { position: fixed; left: 50%; bottom: calc(16px + var(--sab)); transform: translateX(-50%); width: min(420px, calc(100vw - 24px)); background: #fff; border-radius: 14px; padding: 14px 40px 12px 16px; z-index: 9; box-shadow: 0 8px 30px rgba(0,0,0,.35); }
.ask.over { z-index: 30; } /* asked from a dialog ("Было не так" on "Today", why the morning was turned off): over it */
.ask p { margin: 0 0 10px; font-weight: 600; }
.ask .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ask .x { position: absolute; top: 8px; right: 8px; }
.linkbtn { background: none; border: 0; padding: 2px 0; color: var(--muted); text-decoration: underline; font: inherit; font-size: 13px; cursor: pointer; }
.notetext { margin-top: 10px; }
.notetext textarea { width: 100%; box-sizing: border-box; font: inherit; border: 1px solid var(--line); border-radius: 10px; padding: 8px; }
.notetext button { margin-top: 6px; }
