/* Shared chrome for the film and the four faces: icons on buttons, the riyal sign, the closing "Start a project" band. */
[data-ic=""]::before { content: none !important; }
[data-ic]::before { content: ""; display: inline-block; flex: none; width: 1.2em; height: 1.2em; vertical-align: -.24em; margin-inline-end: .45em; background: currentColor; -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; transition: transform .22s cubic-bezier(.2,.8,.2,1); transform-origin: 50% 50%; }
[data-ic]:hover::before, [data-ic]:focus-visible::before { transform: var(--hv, none); }
[data-ic].ic-go::before { animation: var(--an) .55s cubic-bezier(.2,.8,.2,1); }
[data-ic].ic-wait::before { animation: ic-blink 1.4s ease-in-out infinite; }
@keyframes ic-fly { 40% { transform: translateX(8px); opacity: 0; } 41% { transform: translateX(-8px); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes ic-back { 45% { transform: translateX(-5px); } 100% { transform: none; } }
@keyframes ic-spin { to { transform: rotate(-360deg); } }
@keyframes ic-flip { 50% { transform: scaleX(0); } 100% { transform: none; } }
@keyframes ic-wig { 25% { transform: rotate(-24deg); } 60% { transform: rotate(16deg); } 100% { transform: none; } }
@keyframes ic-pop { 35% { transform: scale(.72); } 70% { transform: scale(1.14); } 100% { transform: none; } }
@keyframes ic-wob { 20% { transform: rotate(14deg); } 45% { transform: rotate(-11deg); } 70% { transform: rotate(6deg); } 100% { transform: none; } }
@keyframes ic-rise { 0% { transform: translateY(5px); opacity: .2; } 100% { transform: none; opacity: 1; } }
@keyframes ic-lift { 40% { transform: translateY(-3px); } 100% { transform: none; } }
@keyframes ic-up { 0% { transform: translate(-4px, 4px); opacity: .3; } 100% { transform: none; opacity: 1; } }
@keyframes ic-swing { 25% { transform: rotate(-18deg); } 60% { transform: rotate(10deg); } 100% { transform: none; } }
@keyframes ic-drive { 0% { transform: translateX(-7px); opacity: .2; } 70% { transform: translateX(1px); } 100% { transform: none; opacity: 1; } }
@keyframes ic-drop { 0% { transform: translateY(-7px); opacity: .2; } 60% { transform: translateY(1px); } 80% { transform: translateY(-1px); } 100% { transform: none; opacity: 1; } }
@keyframes ic-roll { 0% { transform: translateX(-5px) rotate(-200deg); } 100% { transform: none; } }
@keyframes ic-grow { 0% { transform: scaleY(.25); transform-origin: 50% 85%; } 100% { transform: none; transform-origin: 50% 85%; } }
@keyframes ic-blink { 0%, 100% { opacity: 1; } 30% { opacity: .15; } 60% { opacity: .9; } 80% { opacity: .25; } }
html.embed .face { padding-bottom: 104px !important; }
html.embed .cta-end { margin-bottom: 120px; }
/* a phone's film keeps a slimmer hour bar (film.html), so the face leaves less room for it */
@media (max-width: 640px) { html.embed.mstage .face { padding-bottom: 62px !important; } html.embed.mstage.mst-end .face { padding-bottom: 14px !important; } }
@media (max-width: 400px) { [role="tab"][data-ic]::before { display: block; margin: 0 auto 3px; } }
@media (prefers-reduced-motion: reduce) { [data-ic]::before { transition: none; animation: none !important; } }
[data-ic="send"] { --ic: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 12h14M12.5 6l6 6-6 6%22/%3E%3C/svg%3E"); --an: ic-fly; --hv: translateX(2px); }
[dir="rtl"] [data-ic="send"]::before { scale: -1 1; }
[data-ic="back"] { --ic: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M20 12H6M11.5 6l-6 6 6 6%22/%3E%3C/svg%3E"); --an: ic-back; --hv: translateX(-2px); }
[dir="rtl"] [data-ic="back"]::before { scale: -1 1; }
[data-ic="go"] { --ic: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%2210%22 y=%223.5%22 width=%224%22 height=%2217%22 fill=%22%23000%22/%3E%3C/svg%3E"); --an: ic-blink; --hv: scaleY(1.08); }
[data-ic="lang"] { --ic: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 6h9M7.5 4v2M5 6c.9 3.6 3.4 6.4 6.5 7.6M10.2 6c-.9 3.6-3.3 6.4-6.4 7.6%22/%3E%3Cpath d=%22M13 21l4-10 4 10M14.5 17.5h5%22/%3E%3C/svg%3E"); --an: ic-flip; --hv: none; }
[data-ic="restart"] { --ic: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 12a8 8 0 1 0 2.4-5.7%22/%3E%3Cpath d=%22M4 4v4.5h4.5%22/%3E%3C/svg%3E"); --an: ic-spin; --hv: rotate(-25deg); }
[dir="rtl"] [data-ic="restart"]::before { scale: -1 1; }
[data-ic="speed"] { --ic: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 17a8 8 0 1 1 16 0%22/%3E%3Cpath d=%22M12 17l4.5-5%22/%3E%3C/svg%3E"); --an: ic-wig; --hv: rotate(8deg); }
[data-ic="replay"] { --ic: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Cpath d=%22M10 8.5v7l5.5-3.5z%22/%3E%3C/svg%3E"); --an: ic-pop; --hv: scale(1.08); }
[dir="rtl"] [data-ic="replay"]::before { scale: -1 1; }
[data-ic="skip"] { --ic: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4.5 6l7 6-7 6zM12.5 6l7 6-7 6z%22/%3E%3C/svg%3E"); --an: ic-fly; --hv: translateX(2px); }
[dir="rtl"] [data-ic="skip"]::before { scale: -1 1; }
[data-ic="turn"] { --ic: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M11 5h2v14h-2z%22/%3E%3Cpath d=%22M4.5 9.5C2.5 10.6 2 11.6 2.6 12.6c1.3 2.2 8.2 3.1 14.4 1.9M19.5 9.5c2 1.1 2.5 2.1 1.9 3.1%22/%3E%3Cpath d=%22M15 12.6l2 1.9-2.2 1.6%22/%3E%3C/svg%3E"); --an: ic-spin; --hv: rotate(-12deg); }
[dir="rtl"] [data-ic="turn"]::before { scale: -1 1; }
[data-ic="chat"] { --ic: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 5h16v11H9l-5 4z%22/%3E%3Cpath d=%22M8 9.5h8M8 12.5h5%22/%3E%3C/svg%3E"); --an: ic-pop; --hv: translateY(-1px); }
[dir="rtl"] [data-ic="chat"]::before { scale: -1 1; }
[data-ic="moon"] { --ic: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M19 14.5A7.5 7.5 0 0 1 9.5 5a7.5 7.5 0 1 0 9.5 9.5z%22/%3E%3C/svg%3E"); --an: ic-wob; --hv: rotate(-10deg); }
[data-ic="sun"] { --ic: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M7 16a5 5 0 0 1 10 0M3 16h18M5 20h14M12 5.5v2.5M5.6 9.4l1.6 1.4M18.4 9.4l-1.6 1.4%22/%3E%3C/svg%3E"); --an: ic-rise; --hv: translateY(-1px); }
[data-ic="store"] { --ic: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 9l1.5-5h13L20 9M4 9v11h16V9M4 9h16M10 20v-6h4v6%22/%3E%3C/svg%3E"); --an: ic-lift; --hv: translateY(-1px); }
[data-ic="receipt"] { --ic: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M6 3h12v18l-3-2-3 2-3-2-3 2z%22/%3E%3Cpath d=%22M9 8h6M9 12h6M9 16h3%22/%3E%3C/svg%3E"); --an: ic-rise; --hv: translateY(-1px); }
[data-ic="month"] { --ic: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%224%22 y=%225%22 width=%2216%22 height=%2215%22 rx=%221.5%22/%3E%3Cpath d=%22M4 10h16M8 3v4M16 3v4M8 14h2M14 14h2M8 17h2%22/%3E%3C/svg%3E"); --an: ic-lift; --hv: translateY(-1px); }
[data-ic="doors"] { --ic: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%224%22 y=%224%22 width=%227%22 height=%2216%22 rx=%221.5%22/%3E%3Crect x=%2213%22 y=%224%22 width=%227%22 height=%2216%22 rx=%221.5%22/%3E%3C/svg%3E"); --an: ic-pop; --hv: translateY(-1px); }
[data-ic="calc"] { --ic: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%225%22 y=%223%22 width=%2214%22 height=%2218%22 rx=%221.5%22/%3E%3Cpath d=%22M8.5 7h7M8.5 12h1.5M14 12h1.5M8.5 16h1.5M14 16h1.5%22/%3E%3C/svg%3E"); --an: ic-pop; --hv: translateY(-1px); }
[data-ic="check"] { --ic: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5 12.5l4.5 4.5L19 7.5%22/%3E%3C/svg%3E"); --an: ic-pop; --hv: scale(1.1); }
[data-ic="card"] { --ic: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%223%22 y=%226%22 width=%2218%22 height=%2213%22 rx=%221.5%22/%3E%3Cpath d=%22M3 10h18M7 15h4%22/%3E%3C/svg%3E"); --an: ic-fly; --hv: translateX(2px); }
[dir="rtl"] [data-ic="card"]::before { scale: -1 1; }
[data-ic="up"] { --ic: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 17l6-6 4 4 7-7%22/%3E%3Cpath d=%22M15 8h5v5%22/%3E%3C/svg%3E"); --an: ic-up; --hv: translate(1px,-1px); }
[dir="rtl"] [data-ic="up"]::before { scale: -1 1; }
[data-ic="tag"] { --ic: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 12V4h8l10 10-8 8z%22/%3E%3Ccircle cx=%227.5%22 cy=%228.5%22 r=%221.5%22/%3E%3C/svg%3E"); --an: ic-swing; --hv: rotate(-8deg); }
[data-ic="van"] { --ic: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M2.5 6.5h11v9.5h-11zM13.5 10h4l3.5 3.5V16h-7.5%22/%3E%3Ccircle cx=%226.5%22 cy=%2217.5%22 r=%222%22/%3E%3Ccircle cx=%2217%22 cy=%2217.5%22 r=%222%22/%3E%3C/svg%3E"); --an: ic-drive; --hv: translateX(2px); }
[dir="rtl"] [data-ic="van"]::before { scale: -1 1; }
[data-ic="percent"] { --ic: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M6 18L18 6%22/%3E%3Ccircle cx=%227.5%22 cy=%227.5%22 r=%222%22/%3E%3Ccircle cx=%2216.5%22 cy=%2216.5%22 r=%222%22/%3E%3C/svg%3E"); --an: ic-spin; --hv: rotate(15deg); }
[data-ic="cake"] { --ic: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 20h16M5 20v-7h14v7M5 15.5c2.3 1.3 4.7 1.3 7 0s4.7-1.3 7 0M12 13V9.5%22/%3E%3Cpath d=%22M12 7.5c-.9-.8-.9-2 0-3 .9 1 .9 2.2 0 3z%22/%3E%3C/svg%3E"); --an: ic-pop; --hv: translateY(-1px); }
[data-ic="bag"] { --ic: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M7 7h10l1.5 14h-13zM7 7l1-4h8l1 4M10 12h4%22/%3E%3C/svg%3E"); --an: ic-pop; --hv: translateY(-1px); }
[data-ic="hanger"] { --ic: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M10 5a2 2 0 1 1 2 2v1.5L3 15.5h18L12 8.5%22/%3E%3C/svg%3E"); --an: ic-swing; --hv: rotate(-6deg); }
[data-ic="bottle"] { --ic: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M11 3h2v3h-2zM10 6h4v3h-4zM8 9h8a1 1 0 0 1 1 1v10H7V10a1 1 0 0 1 1-1zM7 14h10%22/%3E%3C/svg%3E"); --an: ic-pop; --hv: translateY(-1px); }
[data-ic="box"] { --ic: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 8l9-5 9 5-9 5zM3 8v8l9 5 9-5V8M12 13v8%22/%3E%3C/svg%3E"); --an: ic-drop; --hv: translateY(-1px); }
[data-ic="repeat"] { --ic: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 10a7 7 0 0 1 12.5-4.3L18 7.5M20 14a7 7 0 0 1-12.5 4.3L6 16.5%22/%3E%3Cpath d=%22M18 3.5v4h-4M6 20.5v-4h4%22/%3E%3C/svg%3E"); --an: ic-spin; --hv: rotate(20deg); }
[data-ic="pin"] { --ic: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 21s-6-5.3-6-10a6 6 0 0 1 12 0c0 4.7-6 10-6 10z%22/%3E%3Ccircle cx=%2212%22 cy=%2211%22 r=%222%22/%3E%3C/svg%3E"); --an: ic-drop; --hv: translateY(-2px); }
[data-ic="cone"] { --ic: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M9.5 4h5l4 15h-13z%22/%3E%3Cpath d=%22M8 10h8M6.8 14.5h10.4M3 19h18%22/%3E%3C/svg%3E"); --an: ic-drop; --hv: translateY(-1px); }
[data-ic="whistle"] { --ic: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%228.5%22 cy=%2214.5%22 r=%225%22/%3E%3Cpath d=%22M11 10l9.5-3v4.5L13.4 14M6 4l1 2M10 3v2.2%22/%3E%3C/svg%3E"); --an: ic-wob; --hv: rotate(-8deg); }
[data-ic="tyre"] { --ic: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%223.5%22/%3E%3Cpath d=%22M12 3v5.5M12 15.5V21M3 12h5.5M15.5 12H21%22/%3E%3C/svg%3E"); --an: ic-roll; --hv: rotate(30deg); }
[data-ic="signal"] { --ic: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4.5 10.5a11 11 0 0 1 15 0M8 14a6 6 0 0 1 8 0%22/%3E%3Ccircle cx=%2212%22 cy=%2218%22 r=%221%22/%3E%3Cpath d=%22M4 4l16 16%22/%3E%3C/svg%3E"); --an: ic-blink; --hv: none; }
[data-ic="chev-l"] { --ic: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M15 5l-7 7 7 7%22/%3E%3C/svg%3E"); --an: ic-back; --hv: translateX(-2px); }
[data-ic="chev-r"] { --ic: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M9 5l7 7-7 7%22/%3E%3C/svg%3E"); --an: ic-fly; --hv: translateX(2px); }
[data-ic="report"] { --ic: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 20h16M7 20v-6M12 20V8M17 20V11%22/%3E%3C/svg%3E"); --an: ic-grow; --hv: scaleY(1.08); }
.sr { display: inline-block; width: .82em; height: .92em; vertical-align: -.08em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1124.14 1256.39%22%3E%3Cpath fill=%22%23000%22 d=%22M699.62,1113.02h0c-20.06,44.48-33.32,92.75-38.4,143.37l424.51-90.24c20.06-44.47,33.31-92.75,38.4-143.37l-424.51,90.24Z%22/%3E%3Cpath fill=%22%23000%22 d=%22M1085.73,895.8c20.06-44.47,33.32-92.75,38.4-143.37l-330.68,70.33v-135.2l292.27-62.11c20.06-44.47,33.32-92.75,38.4-143.37l-330.68,70.27V66.13c-50.67,28.45-95.67,66.32-132.25,110.99v403.35l-132.25,28.11V0c-50.67,28.44-95.67,66.32-132.25,110.99v525.69l-295.91,62.88c-20.06,44.47-33.33,92.75-38.42,143.37l334.33-71.05v170.26l-358.3,76.14c-20.06,44.47-33.32,92.75-38.4,143.37l375.04-79.7c30.53-6.35,56.77-24.4,73.83-49.24l68.78-101.97v-.02c7.14-10.55,11.3-23.27,11.3-36.97v-149.98l132.25-28.11v270.4l424.53-90.28Z%22/%3E%3C/svg%3E%0A") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1124.14 1256.39%22%3E%3Cpath fill=%22%23000%22 d=%22M699.62,1113.02h0c-20.06,44.48-33.32,92.75-38.4,143.37l424.51-90.24c20.06-44.47,33.31-92.75,38.4-143.37l-424.51,90.24Z%22/%3E%3Cpath fill=%22%23000%22 d=%22M1085.73,895.8c20.06-44.47,33.32-92.75,38.4-143.37l-330.68,70.33v-135.2l292.27-62.11c20.06-44.47,33.32-92.75,38.4-143.37l-330.68,70.27V66.13c-50.67,28.45-95.67,66.32-132.25,110.99v403.35l-132.25,28.11V0c-50.67,28.44-95.67,66.32-132.25,110.99v525.69l-295.91,62.88c-20.06,44.47-33.33,92.75-38.42,143.37l334.33-71.05v170.26l-358.3,76.14c-20.06,44.47-33.32,92.75-38.4,143.37l375.04-79.7c30.53-6.35,56.77-24.4,73.83-49.24l68.78-101.97v-.02c7.14-10.55,11.3-23.27,11.3-36.97v-149.98l132.25-28.11v270.4l424.53-90.28Z%22/%3E%3C/svg%3E%0A") center / contain no-repeat; }
.amt { direction: ltr; unicode-bidi: isolate; white-space: nowrap; display: inline-flex; align-items: baseline; gap: .18em; }
.cta-end { max-width: 1204px; margin: 56px auto 8px; padding: 28px 0 8px; border-top: 1px solid rgba(241,238,228,.14); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px; }
.cta-end h3 { margin: 0; font: 600 clamp(20px, 2.4vw, 28px)/1.25 var(--mono, monospace); color: #F1EEE4; text-wrap: balance; letter-spacing: -.01em; }
[lang="ar"] .cta-end h3 { letter-spacing: 0; line-height: 1.5; }
.cta-end p { margin: 6px 0 0; font: 14.5px/1.55 var(--sans, sans-serif); color: rgba(241,238,228,.62); max-width: 52ch; }
.cta-end > div { min-width: 0; flex: 1 1 320px; }
.mkey { display: inline-flex; text-decoration: none; align-items: center; font: 600 14px var(--mono, monospace); color: #fff; padding: 0 20px; min-height: 50px; border: 0; border-radius: 3px; cursor: pointer; white-space: nowrap; background: linear-gradient(180deg, #5470ff 0%, #3D5BFF 45%, #2f49d6 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -2px 0 rgba(0,0,0,.25), 0 0 0 1px #0a0a09, 0 8px 22px -8px rgba(61,91,255,.8); }
[lang="ar"] .mkey { font-family: var(--ar, var(--sans, sans-serif)); font-size: 15px; }
.mkey:hover, .mkey:focus-visible { outline: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 0 0 1px #0a0a09, 0 0 0 4px rgba(61,91,255,.35), 0 8px 26px -6px rgba(61,91,255,.9); }
.mkey:active { transform: translateY(1px); }

/* The faces' headline and panels wait for frame.js, which adds the problem, cost and solution around them: shown
   once in place, never pushed down after the first paint. If frame.js never runs, they show anyway after 1.5 s. */
html:not(.mready) .head, html:not(.mready) .grid { visibility: hidden; animation: mready 0s 1.5s forwards; }
@keyframes mready { to { visibility: visible; } }
/* Every box on a face has its full size from the start, like a phone screen: it never grows or shrinks. Inside it,
   the one main box (the phone, the system's steps, the result) fills the space and scrolls its own content; the
   label, the options under the phone, tabs and buttons stay put. --p0 keeps a box at least as tall as fixed content
   it starts with (the Rush hour map). The scroller follows new content smoothly (mono-ui.js). */
.grid > .panel { height: max(var(--p0, 0px), min(80svh, 780px)); overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(241,238,228,.22) transparent; }
.grid > .panel > * { flex-shrink: 0; min-height: auto; }
/* the main boxes have a height of their own, so a note or hint appearing beside them never resizes them */
.grid > .panel > :is(.engine, .kscreen, .recs, .screen) { flex: none; height: min(60svh, 540px); min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; scrollbar-width: thin; scrollbar-color: rgba(241,238,228,.22) transparent; }
.grid > .panel > :is(.engine, .kscreen, .recs, .screen) > * { flex-shrink: 0; }
.grid > .panel > .phone { flex: none; height: min(44svh, 400px); display: flex; flex-direction: column; }
.grid > .panel > .phone > * { flex-shrink: 0; }
.grid > .panel > .phone > .thread { flex: 1 1 0; min-height: 0; max-height: none; overflow-y: auto; overscroll-behavior-y: contain; }
@media (max-width: 900px) { .grid > .panel { height: max(var(--p0, 0px), min(80svh, 680px)); } .grid > .panel > :is(.engine, .kscreen, .recs, .screen) { height: min(58svh, 500px); } .grid > .panel > .phone { height: min(40svh, 350px); } }
/* a box with no scrolling content of its own (the Rush hour map) is exactly as tall as what it holds, which never changes */
.grid > .panel:has(> .map) { height: auto; }
/* on a wide screen all three boxes of that face take the map box's height, so they line up and all driver cards show */
@media (min-width: 901px) { .grid:has(> .panel > .map) > .panel { height: auto; } }

/* numbers that change never shift the layout: every digit takes the same width */
body { font-variant-numeric: tabular-nums; }