/* OMS sign-in page (Pages/Authentication/Login.razor): the LEN office in the light of the time of day (pagi, siang,
   sore, senja, malam, tengah malam), the Truk Kanal badge and the sign-in card.
   Generated from the OMS login proposal (redesign-proposal/oms-login/v2, source/export-app.mjs): change the
   proposal and export again rather than editing this file. Poppins is self-hosted (fonts/, SIL OFL). */
@font-face { font-family: Poppins; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/poppins-latin-700.woff2) format('woff2'); }
@font-face { font-family: Poppins; font-style: normal; font-weight: 800; font-display: swap; src: url(../fonts/poppins-latin-800.woff2) format('woff2'); }

.lpc { container-type: size; position: relative; width: 100%; height: var(--lp-h, 100vh); }
.lp { position: absolute; inset: 0; overflow: hidden; font-family: var(--len-sans, 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif); font-size: 15px; line-height: 1.45; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
:where(.lp) *, :where(.lp) *::before, :where(.lp) *::after { box-sizing: border-box; }
:where(.lp) :where(h1, h2, p, ul, figure) { margin: 0; padding: 0; }
:where(.lp) :where(button, input) { font: inherit; color: inherit; }
.lp [hidden] { display: none !important; }
.lp .i { display: block; flex: none; }
@keyframes oms-lp-spin { to { transform: rotate(360deg); } }
@keyframes oms-lp-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes oms-lp-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.lp-o { --page: #0e1830; background: var(--page); color: #0f1b2d; transition: background-color 1s; }
.lp-o, .lp-o[data-tod="malam"] {
  --sk0: #030a1c; --sk1: #0a1d48; --sk2: #173e86; --sk3: #2c62b4; --stars: 1; --moon: 1; --moon-x: 1180px; --moon-y: 128px; --sun-o: 0; --sun-x: 1190px; --sun-y: 120px; --sun-s: 1; --sun: #fff4c4; --sun-glow: rgba(255,240,190,.5);
  --cloud: rgba(130,160,220,.16); --city: #0a1a3c; --city-lit: .85; --wall: #213761; --wall2: #24406f; --clad: rgba(255,255,255,.035); --roof: #1dace4; --cap: #172a4d; --slab: rgba(0,0,0,.18);
  --win: #0c1a35; --win-hi: rgba(255,255,255,0); --win-lit: #ffd47e; --rib: #0c1a35; --rib-lit: #ffcf73; --mull: rgba(0,0,0,.3); --frame: #172a4d; --pdoor: #1a2d52; --band: #0d3465;
  --door: #2b4270; --slat: rgba(255,255,255,.07); --door-in: #0a1630; --door-light: 1; --spill: .9; --cone: 1; --sign-glow: .6; --rack: rgba(255,214,150,.25);
  --pave: #1a2846; --curb: #24365b; --road: #0e1830; --lane: rgba(255,255,255,.3); --apron: #22314f; --tree: #143450; --tree2: #0f2a43; --trunk: #0b1c33; --pole: #31476f;
  --lamp: 1; --headlight: 1; --tail: 1; --cab: #1b2c4a; --cargo: #dfe7f3; --beacon: 1; --arrow-glow: .65; --tank: #2c4570; --tank-top: #375485; --ac: #2a4068; --shadow: .35; --guard: 1; --bird: #3b4a63;
  --canopy: #12709d; --raft: rgba(0,0,0,.28); --dframe: #d39020; --vent: #1b2d52; --vent-lit: #ffcf73; --wframe: #1d4f96; --edge: #1a5fb4; --awn: #1b2f55; --balrail: #b8674f; --recess: rgba(0,0,0,.14); --bayshade: .55; --baylit: rgba(255,255,255,.06);
}
.lp-o[data-tod="pagi"] {
  --sk0: #5aa7e3; --sk1: #93c8ef; --sk2: #ead9c8; --sk3: #ffcf9c; --stars: 0; --moon: 0; --sun-o: 1; --sun-x: 600px; --sun-y: 372px; --sun-s: 1.25; --sun: #fff3d0; --sun-glow: rgba(255,214,150,.75);
  --cloud: rgba(255,247,240,.92); --city: #b6c9df; --city-lit: 0; --wall: #f6f8fb; --wall2: #ffffff; --clad: rgba(13,52,101,.055); --cap: #d5dde8; --slab: rgba(13,52,101,.08);
  --win: #39699c; --win-hi: rgba(255,240,226,.42); --win-lit: #39699c; --rib: #4f7fb0; --rib-lit: #4f7fb0; --mull: rgba(255,255,255,.55); --frame: #c5cfdc; --pdoor: #9fb0c6; --band: #0d3465;
  --door: #b9c5d5; --slat: rgba(13,52,101,.14); --door-in: #2a3a57; --door-light: .4; --spill: 0; --cone: 0; --sign-glow: 0; --rack: rgba(255,255,255,.22);
  --pave: #d7dee7; --curb: #eef2f6; --road: #6a788f; --lane: rgba(255,255,255,.85); --apron: #e4e9ef; --tree: #4aa37f; --tree2: #3a8c6b; --trunk: #6b4f3a; --pole: #7d8ea5;
  --lamp: 0; --headlight: 0; --tail: .3; --cab: #a9dcf3; --cargo: #ffffff; --beacon: 0; --arrow-glow: 0; --tank: #e2e8ef; --tank-top: #f2f5f9; --ac: #cfd8e3; --shadow: .2; --guard: 0; --bird: #3b4a63; --page: #eaf1f8;
  --canopy: #168bbf; --raft: rgba(255,255,255,.3); --dframe: #f2a516; --vent: #e2eaf3; --wframe: #2a6fd0; --edge: #2a78d6; --awn: #cbd7e6; --balrail: #e98a6b; --recess: rgba(13,52,101,.05); --bayshade: .16; --baylit: rgba(255,255,255,.9);
}
.lp-o[data-tod="siang"] {
  --sk0: #1f7fd6; --sk1: #4aa3ea; --sk2: #9fd1f6; --sk3: #e0f2fd; --stars: 0; --moon: 0; --sun-o: 1; --sun-x: 980px; --sun-y: 150px; --sun-s: .9; --sun: #fffbe6; --sun-glow: rgba(255,250,225,.75);
  --cloud: rgba(255,255,255,.95); --city: #a8c6e2; --city-lit: 0; --wall: #ffffff; --wall2: #ffffff; --clad: rgba(13,52,101,.05); --cap: #d5dde8; --slab: rgba(13,52,101,.08);
  --win: #24578f; --win-hi: rgba(255,255,255,.42); --win-lit: #24578f; --rib: #3b74ad; --rib-lit: #3b74ad; --mull: rgba(255,255,255,.55); --frame: #c5cfdc; --pdoor: #9fb0c6; --band: #0d3465;
  --door: #b9c5d5; --slat: rgba(13,52,101,.14); --door-in: #33415c; --door-light: .25; --spill: 0; --cone: 0; --sign-glow: 0; --rack: rgba(255,255,255,.2);
  --pave: #d9e0e8; --curb: #eef2f6; --road: #66758c; --lane: rgba(255,255,255,.85); --apron: #e6ebf1; --tree: #3e9d77; --tree2: #2f8463; --trunk: #6b4f3a; --pole: #7a8aa0;
  --lamp: 0; --headlight: 0; --tail: .3; --cab: #9fd8f2; --cargo: #ffffff; --beacon: 0; --arrow-glow: 0; --tank: #e2e8ef; --tank-top: #f2f5f9; --ac: #cfd8e3; --shadow: .25; --guard: 0; --page: #e9eff6;
  --canopy: #168bbf; --raft: rgba(255,255,255,.3); --dframe: #f2a516; --vent: #e4ecf5; --wframe: #2a6fd0; --edge: #2a78d6; --awn: #cbd7e6; --balrail: #e98a6b; --recess: rgba(13,52,101,.05); --bayshade: .16; --baylit: rgba(255,255,255,.9);
}
.lp-o[data-tod="sore"] {
  --sk0: #34478f; --sk1: #7d62a3; --sk2: #e98a62; --sk3: #ffc27a; --stars: .2; --moon: 0; --sun-o: 1; --sun-x: 1238px; --sun-y: 566px; --sun-s: 1.5; --sun: #ffb15c; --sun-glow: rgba(255,170,90,.6);
  --cloud: rgba(255,196,170,.5); --city: #5b4f7c; --city-lit: .35; --wall: #f3e7de; --wall2: #f7ece4; --clad: rgba(80,40,30,.06); --cap: #d9c5c0; --slab: rgba(80,40,30,.1);
  --win: #4b4e80; --win-hi: rgba(255,196,140,.42); --win-lit: #ffc867; --rib: #5a5a8a; --rib-lit: #ffd27e; --mull: rgba(255,255,255,.4); --frame: #cdb9b4; --pdoor: #a796a8; --band: #0d3465;
  --door: #b8a8ba; --slat: rgba(60,40,70,.14); --door-in: #1f2142; --door-light: .75; --spill: .45; --cone: .35; --sign-glow: .2; --rack: rgba(255,214,150,.25);
  --pave: #b9adc0; --curb: #cfc4d2; --road: #4d4a6b; --lane: rgba(255,255,255,.55); --apron: #c6bccd; --tree: #4d5b80; --tree2: #3f4b6f; --trunk: #3a3350; --pole: #5a5880;
  --lamp: .55; --headlight: .45; --tail: .7; --cab: #9db9d8; --cargo: #f6efea; --beacon: .7; --arrow-glow: .3; --tank: #dacbc9; --tank-top: #e8dcda; --ac: #cbbcbf; --shadow: .3; --guard: .6; --bird: #4a3d5c; --page: #3a3560;
  --canopy: #1a7fae; --raft: rgba(255,255,255,.18); --dframe: #e39a2a; --vent: #e8dbd5; --wframe: #3d5fa8; --edge: #3366b8; --awn: #cdbfc6; --balrail: #d77d66; --recess: rgba(70,30,40,.07); --bayshade: .25; --baylit: rgba(255,230,210,.7);
}
/* senja: the sun is just down (its glow stays behind the city on the right), the blue hour, lamps and half the windows on */
.lp-o[data-tod="senja"] {
  --sk0: #111a46; --sk1: #2d3272; --sk2: #81508b; --sk3: #f08a5c; --stars: .5; --moon: 0; --sun-o: 1; --sun-x: 1236px; --sun-y: 800px; --sun-s: 2.8; --sun: #ff8d57; --sun-glow: rgba(255,132,84,.62);
  --cloud: #56478a; --city: #262a58; --city-lit: .7; --wall: #48527f; --wall2: #4e5988; --clad: rgba(255,255,255,.05); --cap: #39426d; --slab: rgba(0,0,0,.14);
  --win: #262f5a; --win-hi: rgba(255,190,170,.1); --win-lit: #ffd27e; --rib: #2c3562; --rib-lit: #ffcf73; --mull: rgba(0,0,0,.25); --frame: #3a426b; --pdoor: #3c4570; --band: #0d3465;
  --door: #4b5682; --slat: rgba(255,255,255,.07); --door-in: #141b3a; --door-light: .9; --spill: .75; --cone: .8; --sign-glow: .5; --rack: rgba(255,214,150,.25);
  --pave: #3a3f63; --curb: #474d74; --road: #23284a; --lane: rgba(255,255,255,.4); --apron: #3f4569; --tree: #22385a; --tree2: #1c2f4d; --trunk: #161f38; --pole: #48507a;
  --lamp: .9; --headlight: .85; --tail: .9; --cab: #5d77a8; --cargo: #e6e9f2; --beacon: 1; --arrow-glow: .5; --tank: #4a5482; --tank-top: #56619a; --ac: #444e7a; --shadow: .3; --guard: 1; --bird: #2a2d4a; --page: #1e2448;
  --canopy: #156f9e; --raft: rgba(0,0,0,.22); --dframe: #dc9628; --vent: #3b4472; --vent-lit: #ffcf73; --wframe: #2b4f97; --edge: #2a62b8; --awn: #3a4470; --balrail: #b8705a; --recess: rgba(0,0,0,.12); --bayshade: .45; --baylit: rgba(255,220,200,.25);
}
.lp-o[data-tod="tengahmalam"] {
  --sk0: #01040e; --sk1: #04102c; --sk2: #0a2252; --sk3: #173a74; --stars: 1; --moon: 1; --moon-x: 1010px; --moon-y: 150px; --sun-o: 0;
  --cloud: rgba(110,140,200,.1); --city: #071330; --city-lit: .32; --wall: #1b2e52; --wall2: #1d3459; --clad: rgba(255,255,255,.03); --cap: #132440;
  --win: #0a1530; --rib: #0a1530; --rib-lit: #ffcf73; --door: #26395f; --door-in: #08122a; --door-light: 0; --spill: 0; --cone: .8; --sign-glow: .45;
  --pave: #152240; --curb: #1d2f52; --road: #0b1428; --lane: rgba(255,255,255,.22); --apron: #1b2947; --tree: #102b45; --tree2: #0c2238; --trunk: #091629; --pole: #2b3f63;
  --tank: #253c63; --tank-top: #2f4a78; --ac: #233759; --arrow-glow: .5; --page: #0b1428;
  --canopy: #0e5f88; --dframe: #a8761a; --vent: #172848; --wframe: #173f7a; --edge: #164f96; --awn: #172a4b; --balrail: #8a5244; --recess: rgba(0,0,0,.18); --bayshade: .6;
}

.lp-o .c-scene { position: absolute; inset: 0; overflow: hidden; animation: oms-lp-fade 1s ease both; }
.lp-o .c-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lp-o .c-sk0 { stop-color: var(--sk0); } .lp-o .c-sk1 { stop-color: var(--sk1); } .lp-o .c-sk2 { stop-color: var(--sk2); } .lp-o .c-sk3 { stop-color: var(--sk3); }
.lp-o :is(.c-sk0, .c-sk1, .c-sk2, .c-sk3) { transition: stop-color 1s; }
.lp-o .c-stars { opacity: var(--stars); transition: opacity 1s; }
.lp-o .c-stars circle { animation: oms-c-twinkle 3s ease-in-out infinite alternate; }
@keyframes oms-c-twinkle { from { opacity: .25; } to { opacity: 1; } }
.lp-o .c-moon { opacity: var(--moon); transform: translate(var(--moon-x), var(--moon-y)); transition: opacity 1s, transform 1.4s cubic-bezier(.4,0,.2,1); }
.lp-o .c-sun { opacity: var(--sun-o); transform: translate(var(--sun-x), var(--sun-y)) scale(var(--sun-s)); transition: opacity 1s, transform 1.4s cubic-bezier(.4,0,.2,1); }
.lp-o .c-sundisc { fill: var(--sun); transition: fill 1s; }
.lp-o .c-sunglow0 { stop-color: var(--sun-glow); transition: stop-color 1s; } .lp-o .c-sunglow1 { stop-color: var(--sun-glow); stop-opacity: 0; }
.lp-o .c-clouds { fill: var(--cloud); transition: fill 1s; }
.lp-o .c-cloud { animation: oms-c-cloud 120s linear infinite; }
@keyframes oms-c-cloud { from { transform: translateX(700px); } to { transform: translateX(-1300px); } }
.lp-o .c-city { fill: var(--city); transition: fill 1s; }
.lp-o .c-citylit { opacity: var(--city-lit); transition: opacity 1s; }
.lp-o .c-pave { fill: var(--pave); } .lp-o .c-curb { fill: var(--curb); } .lp-o .c-road { fill: var(--road); } .lp-o .c-apron { fill: var(--apron); }
.lp-o :is(.c-pave, .c-curb, .c-road, .c-apron, .c-wall, .c-wall2, .c-door, .c-cap, .c-door-in, .c-tree, .c-tree2, .c-trunk, .c-pole, .o-cargo, .o-cabglass, .c-pdoor, .c-frame, .c-tankb, .c-tankt, .c-ac, .rib,
  .c-canopy, .c-raft, .c-dframe, .c-vent, .c-awn, .c-balrail, .c-edge, .c-recess, .c-baylit, .w-frame, .w-mull) { transition: fill 1s, stroke 1s; }
.lp-o .c-lane { stroke: var(--lane); fill: none; }
.lp-o .c-tree { fill: var(--tree); } .lp-o .c-tree2 { fill: var(--tree2); } .lp-o .c-trunk { fill: var(--trunk); }
.lp-o .c-pole { fill: var(--pole); stroke: var(--pole); }
.lp-o .c-lamphead { fill: #ffe7a6; }
.lp-o .c-lampglow { opacity: var(--lamp); transition: opacity 1s; }
.lp-o .c-spill { opacity: var(--spill); transition: opacity 1s; }
.lp-o .c-cone { opacity: var(--cone); transition: opacity 1s; }
.lp-o .c-bld { animation: oms-c-rise 1.1s cubic-bezier(.2,.8,.2,1) .15s both; }
@keyframes oms-c-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.lp-o .c-wall { fill: var(--wall); } .lp-o .c-wall2 { fill: var(--wall2); }
.lp-o .c-clad { stroke: var(--clad); stroke-width: 1.2; fill: none; }
.lp-o .c-roof { fill: var(--roof); } .lp-o .c-cap { fill: var(--cap); } .lp-o .c-slab { fill: var(--slab); } .lp-o .c-slabun { fill: rgba(0,0,0,.12); }
.lp-o .c-band { fill: var(--band); } .lp-o .c-frame { fill: var(--frame); } .lp-o .c-pdoor { fill: var(--pdoor); }
.lp-o .c-signglow { opacity: var(--sign-glow); transition: opacity 1s; }
.lp-o .c-canopy { fill: var(--canopy); } .lp-o .c-raft { stroke: var(--raft); stroke-width: 1.2; fill: none; }
.lp-o .c-dframe { fill: var(--dframe); }
.lp-o .c-vent { fill: var(--vent); } .lp-o .c-ventl { stroke: rgba(13,52,101,.16); stroke-width: .8; fill: none; }
.lp-o:is([data-tod="sore"], [data-tod="senja"], [data-tod="malam"]) .c-vent { fill: var(--vent-lit); }
.lp-o .c-edge { fill: var(--edge); } .lp-o .c-awn { fill: var(--awn); } .lp-o .c-balrail { fill: var(--balrail); }
.lp-o .c-recess { fill: var(--recess); } .lp-o .c-bayshade { opacity: var(--bayshade); transition: opacity 1s; }
.lp-o .c-baylit { stroke: var(--baylit); stroke-width: 1.4; fill: none; }
.lp-o .c-door { fill: var(--door); }
.lp-o .c-slat { stroke: var(--slat); stroke-width: 1.2; fill: none; }
.lp-o .c-door-in { fill: var(--door-in); }
.lp-o .c-door-light { opacity: var(--door-light); transition: opacity 1s; }
.lp-o .c-rack { stroke: var(--rack); stroke-width: 2; fill: none; }
.lp-o .c-tankb { fill: var(--tank); } .lp-o .c-tankt { fill: var(--tank-top); } .lp-o .c-ac { fill: var(--ac); }
.lp-o .w { fill: var(--win); transition: fill 1s; }
.lp-o .w-hi { fill: var(--win-hi); transition: fill 1s; pointer-events: none; }
.lp-o .w-mull { stroke: var(--mull); stroke-width: 1.4; fill: none; }
.lp-o .w-mull.f { stroke: var(--wframe); stroke-width: 1.3; }
.lp-o .w-frame { fill: none; stroke: var(--wframe); stroke-width: 1.8; }
.lp-o .rib { fill: var(--rib); }
/* lights: sore = a few, senja = more, malam = most, tengah malam = the night shift and security only */
.lp-o[data-tod="sore"] .w:is(.b1, .b2), .lp-o[data-tod="senja"] .w:is(.b1, .b2, .b3), .lp-o[data-tod="malam"] .w:is(.b1, .b2, .b3, .b4), .lp-o[data-tod="tengahmalam"] .w.b1,
.lp-o:is([data-tod="sore"], [data-tod="senja"], [data-tod="malam"]) .lobby, .lp-o:is([data-tod="senja"], [data-tod="malam"], [data-tod="tengahmalam"]) .guard { fill: var(--win-lit); animation: oms-c-on .01s steps(1) var(--d, 0s) backwards; }
.lp-o:is([data-tod="sore"], [data-tod="senja"], [data-tod="malam"]) .rib, .lp-o[data-tod="tengahmalam"] .rib.n { fill: var(--rib-lit); animation: oms-c-on-rib .01s steps(1) var(--d, 0s) backwards; }
@keyframes oms-c-on { from { fill: var(--win); } }
@keyframes oms-c-on-rib { from { fill: var(--rib); } }
.lp-o .o-guard { fill: #1b2c4a; opacity: var(--guard); transition: opacity 1s; }
.lp-o .c-beacon { fill: #ec241c; opacity: var(--beacon); animation: oms-c-blink 1.6s steps(1) infinite; }
@keyframes oms-c-blink { 0%, 60% { fill-opacity: 1; } 61%, 100% { fill-opacity: .15; } }
.lp-o .c-arrow { animation: oms-c-wipe 1.4s cubic-bezier(.65,0,.25,1) 1s backwards; }
@keyframes oms-c-wipe { from { clip-path: inset(-10% 100% -10% -10%); } to { clip-path: inset(-10% -10% -10% -10%); } }
.lp-o .c-arrow-glow { fill: #38bdf8; opacity: var(--arrow-glow); transition: opacity 1s; }

/* the dock: the shutter rolls up when the page opens; after midnight it stays down */
.lp-o .o-shutter { transform-box: fill-box; transform-origin: 50% 0; transform: scaleY(.1); animation: oms-o-roll-up 1.4s cubic-bezier(.4,0,.2,1) .9s backwards; }
@keyframes oms-o-roll-up { from { transform: scaleY(1); } }
.lp-o[data-tod="tengahmalam"] .o-shutter { transform: none; animation: none; }
.lp-o[data-tod="tengahmalam"] .o-forkpos { display: none; }
.lp-o .o-forkpos { transform: translate(800px, 688px); animation: oms-o-fork 10s ease-in-out 1.6s infinite; }
@keyframes oms-o-fork { 0%, 6% { transform: translate(758px, 688px); } 34%, 52% { transform: translate(818px, 688px); } 82%, 100% { transform: translate(758px, 688px); } }
.lp-o .o-forks { animation: oms-o-forks 10s ease-in-out 1.6s infinite; }
@keyframes oms-o-forks { 0%, 36% { transform: none; } 42%, 48% { transform: translateY(-12px); } 54%, 100% { transform: none; } }

/* vehicles */
.lp-o .o-act { display: none; }
.lp-o[data-tod="pagi"] :is(.o-van, .o-pass, .o-birds),
.lp-o[data-tod="siang"] :is(.o-van, .o-pass),
.lp-o[data-tod="sore"] :is(.o-truck, .o-van2),
.lp-o[data-tod="senja"] :is(.o-van, .o-pass),
.lp-o[data-tod="malam"] :is(.o-truck, .o-van2, .o-pass),
.lp-o[data-tod="tengahmalam"] .o-pass { display: inline; }
.lp-o .o-shadow { fill: #000; opacity: var(--shadow); }
.lp-o .o-cargo { fill: var(--cargo); } .lp-o .o-cabglass { fill: var(--cab); }
.lp-o .o-beam { opacity: var(--headlight); transition: opacity 1s; }
.lp-o .o-head { fill: #ffe7a3; } .lp-o .o-tail { fill: #ef4444; opacity: var(--tail); }
.lp-o .o-wheel { transform-box: fill-box; transform-origin: center; }
.lp-o .o-bird { stroke: var(--bird); transform-box: fill-box; transform-origin: center; animation: oms-o-flap .45s ease-in-out infinite alternate; }
@keyframes oms-o-flap { to { transform: scaleY(.35); } }
.lp-o .o-birds { transform: translate(760px, 250px); animation: oms-o-birds 34s linear 1s infinite backwards; }
@keyframes oms-o-birds { 0% { transform: translate(380px, 270px); } 100% { transform: translate(1460px, 200px); } }

/* wingbox (sore, malam): arrives, lifts its wing at the dock, gets loaded, closes, leaves */
.lp-o .o-truck { transform: translate(714px, 784px); animation: oms-o-truck 30s linear .4s infinite backwards; }
.lp-o .o-truck .o-wheel { animation: oms-o-truck-w 30s linear .4s infinite backwards; }
.lp-o .o-truck .o-wing { transform-box: fill-box; transform-origin: 50% 0; transform: scaleY(.07); animation: oms-o-wing 30s linear .4s infinite backwards; }
.lp-o .o-truck .o-wingup { fill: var(--cargo); transform-box: fill-box; transform-origin: 50% 100%; animation: oms-o-wingup 30s linear .4s infinite backwards; }
.lp-o .o-truck .o-bx { animation: oms-o-bx 30s linear infinite backwards; }
@keyframes oms-o-truck {
  0% { transform: translate(-340px, 784px); animation-timing-function: cubic-bezier(.22,.61,.36,1); }
  20% { transform: translate(714px, 784px); }
  72% { transform: translate(714px, 784px); animation-timing-function: cubic-bezier(.55,.06,.68,.19); }
  92%, 100% { transform: translate(1600px, 784px); }
}
@keyframes oms-o-truck-w {
  0% { transform: rotate(0deg); animation-timing-function: cubic-bezier(.22,.61,.36,1); }
  20% { transform: rotate(4147.65deg); }
  72% { transform: rotate(4147.65deg); animation-timing-function: cubic-bezier(.55,.06,.68,.19); }
  92%, 100% { transform: rotate(7634.19deg); }
}
@keyframes oms-o-wing { 0%, 23% { transform: scaleY(1); } 29%, 63% { transform: scaleY(.07); } 69%, 100% { transform: scaleY(1); } }
@keyframes oms-o-wingup { 0%, 27% { opacity: 0; transform: scaleY(0); } 30%, 62% { opacity: 1; transform: none; } 65%, 100% { opacity: 0; transform: scaleY(0); } }
@keyframes oms-o-bx { 0% { opacity: 0; transform: translateY(-9px); } 1.4% { opacity: 1; transform: none; } 60% { opacity: 1; } 60.5%, 100% { opacity: 0; } }

/* blind van at the dock: pagi = loads parcels for the morning round; siang = brings the pickups back; senja = brings the day's returns back */
.lp-o .o-van { transform: translate(745px, 784px); animation: oms-o-van 24s linear .4s infinite backwards; }
.lp-o .o-van .o-wheel { animation: oms-o-van-w 24s linear .4s infinite backwards; }
.lp-o .o-van .o-vdoor { transform: translateX(-38px); animation: oms-o-vdoor 24s linear .4s infinite backwards; }
.lp-o[data-tod="pagi"] .o-van .o-pc0 { animation: oms-o-pc-in0 24s linear .4s infinite backwards; }
.lp-o[data-tod="pagi"] .o-van .o-pc1 { animation: oms-o-pc-in1 24s linear .4s infinite backwards; }
.lp-o[data-tod="pagi"] .o-van .o-pc2 { animation: oms-o-pc-in2 24s linear .4s infinite backwards; }
.lp-o:is([data-tod="siang"], [data-tod="senja"]) .o-van .o-pc0 { animation: oms-o-pc-out0 24s linear .4s infinite backwards; }
.lp-o:is([data-tod="siang"], [data-tod="senja"]) .o-van .o-pc1 { animation: oms-o-pc-out1 24s linear .4s infinite backwards; }
.lp-o:is([data-tod="siang"], [data-tod="senja"]) .o-van .o-pc2 { animation: oms-o-pc-out2 24s linear .4s infinite backwards; }
@keyframes oms-o-van {
  0% { transform: translate(-220px, 784px); animation-timing-function: cubic-bezier(.22,.61,.36,1); }
  18% { transform: translate(745px, 784px); }
  62% { transform: translate(745px, 784px); animation-timing-function: cubic-bezier(.55,.06,.68,.19); }
  82%, 100% { transform: translate(1500px, 784px); }
}
@keyframes oms-o-van-w {
  0% { transform: rotate(0deg); animation-timing-function: cubic-bezier(.22,.61,.36,1); }
  18% { transform: rotate(4569.46deg); }
  62% { transform: rotate(4569.46deg); animation-timing-function: cubic-bezier(.55,.06,.68,.19); }
  82%, 100% { transform: rotate(8144.53deg); }
}
@keyframes oms-o-vdoor { 0%, 20% { transform: none; } 24%, 56% { transform: translateX(-38px); } 60%, 100% { transform: none; } }
@keyframes oms-o-pc-in0 { 0%, 27% { opacity: 0; transform: translateY(-7px); } 28.5%, 70% { opacity: 1; transform: none; } 71%, 100% { opacity: 0; } }
@keyframes oms-o-pc-in1 { 0%, 34% { opacity: 0; transform: translateY(-7px); } 35.5%, 70% { opacity: 1; transform: none; } 71%, 100% { opacity: 0; } }
@keyframes oms-o-pc-in2 { 0%, 41% { opacity: 0; transform: translateY(-7px); } 42.5%, 70% { opacity: 1; transform: none; } 71%, 100% { opacity: 0; } }
@keyframes oms-o-pc-out0 { 0%, 30% { opacity: 1; transform: none; } 32%, 100% { opacity: 0; transform: translateX(-10px); } }
@keyframes oms-o-pc-out1 { 0%, 38% { opacity: 1; transform: none; } 40%, 100% { opacity: 0; transform: translateX(-10px); } }
@keyframes oms-o-pc-out2 { 0%, 46% { opacity: 1; transform: none; } 48%, 100% { opacity: 0; transform: translateX(-10px); } }

/* the far lane: a blind van on its way back (sore, malam, right to left) and box trucks that only pass */
.lp-o :is(.o-van2, .o-pass) { opacity: 0; }
.lp-o[data-tod="sore"] .o-van2 { animation: oms-o-van-back 26s linear 5s infinite backwards; }
.lp-o[data-tod="malam"] .o-van2 { animation: oms-o-van-back 26s linear 2s infinite backwards; }
.lp-o .o-van2 .o-wheel { animation: oms-o-spin .4s linear infinite; }
.lp-o .o-pass .o-wheel { animation: oms-o-spin .7s linear infinite; }
@keyframes oms-o-spin { to { transform: rotate(360deg); } }
@keyframes oms-o-van-back { 0% { opacity: 1; transform: translate(1480px, 748px); } 36% { opacity: 1; transform: translate(-240px, 748px); } 36.5%, 100% { opacity: 0; transform: translate(-240px, 748px); } }
/* box trucks that only pass: pagi = out on a delivery, siang = coming back, senja = the first line-haul out, malam = heading out of town, tengah malam = the odd late one */
.lp-o[data-tod="pagi"] .o-pass { animation: oms-o-pass-lr 26s linear 9s infinite backwards; }
.lp-o[data-tod="siang"] .o-pass { animation: oms-o-pass-rl 30s linear 7s infinite backwards; }
.lp-o[data-tod="senja"] .o-pass { animation: oms-o-pass-lr 26s linear 2s infinite backwards; }
.lp-o[data-tod="malam"] .o-pass { animation: oms-o-pass-rl 30s linear 15s infinite backwards; }
.lp-o[data-tod="tengahmalam"] .o-pass { animation: oms-o-pass-lr 26s linear 3s infinite backwards; }
.lp-o .o-pass .o-plogo.r, .lp-o:is([data-tod="siang"], [data-tod="malam"]) .o-pass .o-plogo { display: none; }
.lp-o:is([data-tod="siang"], [data-tod="malam"]) .o-pass .o-plogo.r { display: inline; }
@keyframes oms-o-pass-rl { 0% { opacity: 1; transform: translate(1520px, 748px) scale(-1, 1); } 36% { opacity: 1; transform: translate(-260px, 748px) scale(-1, 1); } 36.5%, 100% { opacity: 0; transform: translate(-260px, 748px) scale(-1, 1); } }
@keyframes oms-o-pass-lr { 0% { opacity: 1; transform: translate(-480px, 748px); } 40% { opacity: 1; transform: translate(1500px, 748px); } 40.5%, 100% { opacity: 0; transform: translate(1500px, 748px); } }

/* Less motion: a still picture of the same moment (vehicles parked, dock open, nothing driving). */
@media (prefers-reduced-motion: reduce) {
  .lp-o .c-svg * { animation: none !important; transition: none !important; }
}

.ob { --bd: .35s; }
.ob { animation: oms-ob-pop .6s cubic-bezier(.34,1.56,.64,1) var(--bd) both; }
.ob .om-glyph { animation: oms-ob-rise .55s cubic-bezier(.2,.8,.2,1) calc(var(--bd) + .25s) both; }
.ob .om-arrow { animation: oms-ob-wipe .8s cubic-bezier(.65,0,.25,1) calc(var(--bd) + .75s) backwards; }
.ob .om-trukkanal .om-glyph { animation: none; }
.ob .om-trukkanal .g-ride { animation: oms-ob-drive 1s cubic-bezier(.2,.9,.3,1.06) calc(var(--bd) + .2s) both; }
.ob .om-trukkanal .g-wheel { transform-box: fill-box; transform-origin: center; animation: oms-ob-roll 1s cubic-bezier(.2,.9,.3,1) calc(var(--bd) + .2s) both; }
/* the body dips as the truck stops, then rocks back */
.ob .om-trukkanal .g-truck { transform-box: fill-box; transform-origin: 50% 100%; animation: oms-ob-pitch .75s ease-out calc(var(--bd) + .62s) both; }
.ob .om-trukkanal .g-chan path { stroke-dasharray: 16; animation: oms-ob-draw-c .55s ease calc(var(--bd) + 1.05s) both; }
.ob .om-trukkanal .g-dots circle { transform-box: fill-box; transform-origin: center; animation: oms-ob-pop .35s cubic-bezier(.34,1.56,.64,1) calc(var(--bd) + .95s) both; }
@keyframes oms-ob-draw-c { from { stroke-dashoffset: 16; } to { stroke-dashoffset: 0; } }
@keyframes oms-ob-pitch { 0% { transform: none; } 30% { transform: rotate(2.6deg); } 58% { transform: rotate(-.9deg); } 82% { transform: rotate(.3deg); } 100% { transform: none; } }
@keyframes oms-ob-pop { from { opacity: 0; transform: scale(.55); } to { opacity: 1; transform: none; } }
@keyframes oms-ob-rise { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
@keyframes oms-ob-drive { from { transform: translateX(-44px); } to { transform: none; } }
@keyframes oms-ob-roll { from { transform: rotate(-640deg); } to { transform: none; } }
@keyframes oms-ob-wipe { from { clip-path: inset(-20% 100% -20% -20%); } to { clip-path: inset(-20% -20% -20% -20%); } }

/* clock chip (desktop only) */
.lp-o .o-chip { position: absolute; top: 22px; right: 26px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 11px; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; background: rgba(6,18,46,.42); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: rgba(235,242,255,.86); font-size: 13px; animation: oms-lp-fade .8s ease .4s both; transition: background-color 1s, color 1s, border-color 1s; }
.lp-o .o-chip .i { display: none; width: 16px; height: 16px; color: #7dd3fc; }
.lp-o[data-tod="pagi"] .o-chip .i-sunrise, .lp-o[data-tod="siang"] .o-chip .i-sun, .lp-o[data-tod="sore"] .o-chip .i-sunset, .lp-o[data-tod="senja"] .o-chip .i-dusk, .lp-o[data-tod="malam"] .o-chip .i-moon, .lp-o[data-tod="tengahmalam"] .o-chip .i-stars { display: block; }
.lp-o .o-chip b { color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }
.lp-o:is([data-tod="pagi"], [data-tod="siang"]) .o-chip { border-color: rgba(13,52,101,.1); background: rgba(255,255,255,.72); color: #3a4d66; }
.lp-o:is([data-tod="pagi"], [data-tod="siang"]) .o-chip .i { color: #0a84c6; }
.lp-o:is([data-tod="pagi"], [data-tod="siang"]) .o-chip b { color: #0d3465; }

/* layout and card */
.lp-o .o-main { position: absolute; inset: 0; display: flex; padding: 60px 80px 28px; overflow-y: auto; }
.lp-o .o-card { position: relative; flex: none; width: 420px; margin: auto 0; padding: 48px 32px 18px; border-radius: 24px; background: #fff; color: #0f1b2d; box-shadow: 0 44px 90px -30px rgba(2,8,24,.72), 0 0 0 1px rgba(13,52,101,.06); animation: oms-o-card .8s cubic-bezier(.2,.8,.2,1) .2s both; }
@keyframes oms-o-card { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.lp-o .o-badge { position: absolute; top: -36px; left: 30px; width: 72px; height: 72px; border-radius: 17px; box-shadow: 0 0 0 5px #fff, 0 16px 30px -12px rgba(4,16,42,.6); }
.lp-o .o-badge .omark { display: block; width: 100%; height: 100%; overflow: visible; }
.lp-o .o-brand { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 12px; margin-bottom: 18px; animation: oms-lp-up .6s cubic-bezier(.2,.8,.2,1) .5s both; }
.lp-o .o-name { font-family: Poppins, var(--len-sans, 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif); font-weight: 800; font-size: 42px; line-height: 1; letter-spacing: -.015em; color: #0d3465; }
.lp-o .o-sys { color: #5d6673; font-size: 11.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; }

/* form */
.lp-o .lf { --lf-accent: #0a84c6; --lf-title: #0d3465; --lf-muted: #5d6673; --lf-label: #22303f; --lf-line: #d6dce5; --lf-line-strong: #b5c0ce; --lf-bg: #f7f9fc; --lf-focus: #1dace4; --lf-ring: rgba(29,172,228,.22); --lf-icon: #8a96a8; --lf-text: #0f1b2d; --lf-ph: #9aa5b5; --lf-err: #b42318; --lf-err-bg: #fef3f2; --lf-err-line: #fecdca; --lf-err-strong: #e5484d; position: relative; display: flex; flex-direction: column; }
.lp-o .lf > *, .lp-o .o-alt, .lp-o .o-foot { animation: oms-lp-up .55s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(.55s + var(--i, 0) * 55ms); }
.lp-o .lf > .lf-err, .lp-o .lf > .lf-tip { animation: oms-lp-up .3s ease both; animation-delay: 0s; }
.lp-o .lf-head { margin-bottom: 18px; padding-top: 16px; border-top: 1px solid #e6eaf0; }
.lp-o .lf-greet { margin-bottom: 6px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--lf-accent); }
.lp-o .lf-title { font-family: Poppins, var(--len-sans, 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif); font-weight: 700; font-size: 24px; line-height: 1.15; letter-spacing: -.01em; color: var(--lf-title); }
.lp-o .lf-sub { margin-top: 5px; font-size: 14px; color: var(--lf-muted); }
.lp-o .lf-err { display: flex; gap: 8px; align-items: flex-start; margin: -4px 0 14px; padding: 10px 12px; border: 1px solid var(--lf-err-line); border-radius: 10px; background: var(--lf-err-bg); color: var(--lf-err); font-size: 13px; line-height: 1.4; }
.lp-o .lf-err .i { width: 18px; height: 18px; }
.lp-o .lf-field { margin-bottom: 14px; }
.lp-o .lf-label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--lf-label); }
.lp-o .lf-box { position: relative; display: flex; align-items: center; height: 48px; border: 1.5px solid var(--lf-line); border-radius: 12px; background: var(--lf-bg); transition: border-color .15s, background-color .15s, box-shadow .15s; }
.lp-o .lf-box:hover { border-color: var(--lf-line-strong); }
.lp-o .lf-box:focus-within { border-color: var(--lf-focus); background: #fff; box-shadow: 0 0 0 4px var(--lf-ring); }
.lp-o .lf-box > .i { width: 18px; height: 18px; margin: 0 10px 0 14px; color: var(--lf-icon); transition: color .15s; }
.lp-o .lf-box:focus-within > .i { color: var(--lf-focus); }
.lp-o .lf-box input { flex: 1; min-width: 0; height: 100%; padding: 0 14px 0 0; border: 0; outline: 0; background: transparent; font-size: 15px; color: var(--lf-text); }
.lp-o .lf-box input::placeholder { color: var(--lf-ph); }
.lp-o .lf-box.bad { border-color: var(--lf-err-strong); }
.lp-o .lf-box.bad > .i { color: var(--lf-err-strong); }
.lp-o .lf-eye { display: grid; place-items: center; flex: none; width: 40px; height: 40px; margin-right: 4px; border: 0; border-radius: 9px; background: transparent; color: var(--lf-icon); cursor: pointer; }
.lp-o .lf-eye:hover { background: #eef2f7; color: var(--lf-text); }
.lp-o .lf-eye:focus-visible { outline: 2px solid var(--lf-focus); outline-offset: -2px; }
.lp-o .lf-eye .i { grid-area: 1 / 1; width: 19px; height: 19px; }
.lp-o .lf-eye .i-eyeoff, .lp-o .lf-eye.on .i-eye { display: none; }
.lp-o .lf-eye.on .i-eyeoff { display: block; }
.lp-o .lf-msg { margin-top: 6px; font-size: 12.5px; color: var(--lf-err); }
.lp-o .lf-caps { display: flex; align-items: center; gap: 7px; margin-top: 7px; font-size: 12.5px; color: #92400e; }
.lp-o .lf-caps b { padding: 1px 5px; border-radius: 4px; background: #fef3c7; font-size: 10.5px; letter-spacing: .06em; }
.lp-o .lf-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; margin: -4px 0 12px; }
.lp-o .lf-check { display: inline-flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 13px; color: var(--lf-label); cursor: pointer; user-select: none; }
.lp-o .lf-check input { appearance: none; -webkit-appearance: none; display: grid; place-items: center; flex: none; width: 18px; height: 18px; margin: 0; border: 1.5px solid var(--lf-line-strong); border-radius: 5px; background: #fff; cursor: pointer; transition: background-color .15s, border-color .15s, box-shadow .15s; }
.lp-o .lf-check input::before { content: ''; width: 10px; height: 10px; background: #fff; clip-path: polygon(14% 52%, 0 66%, 38% 100%, 100% 22%, 86% 8%, 38% 70%); transform: scale(0); transition: transform .15s cubic-bezier(.34,1.56,.64,1); }
.lp-o .lf-check input:checked { border-color: var(--lf-accent); background: var(--lf-accent); }
.lp-o .lf-check input:checked::before { transform: none; }
.lp-o .lf-check:hover input:not(:checked) { border-color: var(--lf-focus); }
.lp-o .lf-check input:focus-visible { outline: 0; box-shadow: 0 0 0 4px var(--lf-ring); border-color: var(--lf-focus); }
.lp-o .lf-help { display: inline-flex; align-items: center; gap: 6px; padding: 4px 2px; border: 0; background: none; color: #0a7fb5; font-size: 13px; font-weight: 600; cursor: pointer; }
.lp-o .lf-help .i { width: 15px; height: 15px; }
.lp-o .lf-help:hover { text-decoration: underline; }
.lp-o .lf-help:focus-visible { outline: 2px solid var(--lf-focus); outline-offset: 2px; border-radius: 6px; }
.lp-o .lf-tip { margin: -4px 0 12px; padding: 9px 12px; border-radius: 10px; background: #eef6fc; color: #1d3a5c; font-size: 12.5px; line-height: 1.45; }
.lp-o .lf-submit { position: relative; display: grid; place-items: center; width: 100%; height: 50px; margin-top: 4px; border: 0; border-radius: 12px; background: linear-gradient(120deg, #1aa3db, #0d3465 75%); color: #fff; font-size: 15px; font-weight: 700; letter-spacing: .01em; cursor: pointer; overflow: hidden; box-shadow: 0 14px 28px -14px rgba(13,52,101,.8); transition: transform .15s, box-shadow .2s, filter .2s; }
.lp-o .lf-submit > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 9px; transition: opacity .2s, transform .25s; }
.lp-o .lf-submit .i { width: 18px; height: 18px; stroke-width: 2.2; transition: transform .2s; }
.lp-o .lf-submit:hover { filter: brightness(1.08); transform: translateY(-1px); }
.lp-o .lf-submit:hover .lf-s-idle .i { transform: translateX(4px); }
.lp-o .lf-submit:focus-visible { outline: 0; box-shadow: 0 0 0 4px var(--lf-ring), 0 14px 28px -14px rgba(13,52,101,.8); }
.lp-o .lf-submit::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%); transform: translateX(-120%); pointer-events: none; }
.lp-o .lf-submit:hover::after { animation: oms-lf-shine .8s ease; }
.lp-o .lf-s-busy { opacity: 0; transform: translateY(10px); }
.lp-o .lf-submit.busy { cursor: default; transform: none; filter: saturate(.8); }
.lp-o .lf-submit.busy .lf-s-idle { opacity: 0; transform: translateY(-10px); }
.lp-o .lf-submit.busy .lf-s-busy { opacity: 1; transform: none; }
.lp-o .lf-spin { width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: oms-lp-spin .7s linear infinite; }
.lp-o .o-card.shake { animation: oms-lf-shake .42s cubic-bezier(.36,.07,.19,.97); }
@keyframes oms-lf-shine { to { transform: translateX(120%); } }
@keyframes oms-lf-shake { 10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(3px); } 30%, 50%, 70% { transform: translateX(-6px); } 40%, 60% { transform: translateX(6px); } }

/* no account: track a shipment */
.lp-o .o-alt { display: grid; gap: 9px; margin-top: 16px; padding: 11px 12px 12px; border-radius: 14px; background: #f2f5f9; text-align: center; }
.lp-o .o-alt p { font-size: 12.5px; line-height: 1.4; color: #4b5869; text-wrap: balance; }
.lp-o .o-track { display: inline-flex; align-items: center; justify-content: center; gap: 7px; width: 100%; height: 40px; padding: 0 13px; border: 1.5px solid #c9d3e0; border-radius: 10px; background: #fff; color: #0d3465; font-size: 13.5px; font-weight: 700; cursor: pointer; transition: border-color .15s, color .15s; }
.lp-o .o-track .i { width: 16px; height: 16px; }
.lp-o .o-track:hover { border-color: #1dace4; color: #0a7fb5; }
.lp-o .o-track:focus-visible { outline: 0; box-shadow: 0 0 0 4px var(--lf-ring, rgba(29,172,228,.22)); border-color: #1dace4; }
.lp-o .o-foot { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 9px; margin-top: 14px; font-size: 11.5px; color: #7a8698; }
.lp-o .o-foot .sep { width: 3px; height: 3px; border-radius: 50%; background: #c2cad6; }
.lp-o .o-live { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; letter-spacing: .08em; color: #15803d; }
.lp-o .o-live i { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.18); animation: oms-o-pulse 2s ease-in-out infinite; }
.lp-o .o-live.off { color: #b42318; }
.lp-o .o-live.off i { background: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,.16); animation: none; }
@keyframes oms-o-pulse { 50% { box-shadow: 0 0 0 5px rgba(34,197,94,.05); } }

/* narrower desktops */
@container (max-width: 1100px) { .lp-o .o-main { padding-left: 40px; } }
/* short desktops (1366 x 768, 1280 x 720) */
@container (max-height: 800px) {
  .lp-o .o-main { padding-top: 50px; padding-bottom: 16px; }
  .lp-o .o-card { padding: 44px 30px 14px; }
  .lp-o .o-brand { margin-bottom: 12px; }
  .lp-o .o-name { font-size: 38px; }
  .lp-o .lf-head { margin-bottom: 12px; padding-top: 12px; }
  .lp-o .lf-title { font-size: 22px; }
  .lp-o .lf-field { margin-bottom: 11px; }
  .lp-o .lf-box { height: 44px; }
  .lp-o .lf-submit { height: 46px; }
  .lp-o .o-alt { gap: 7px; margin-top: 12px; padding: 9px 10px 10px; }
  .lp-o .o-track { height: 38px; }
  .lp-o .o-foot { margin-top: 10px; }
}
/* portrait screens and phones: the office as a band on top, the card below it on the street */
@container (max-width: 640px) or (orientation: portrait) {
  .lp-o { --W: min(191cqw, 105cqh); background: linear-gradient(var(--road), color-mix(in srgb, var(--road) 72%, #000)); }
  .lp-o .c-scene { bottom: auto; height: calc(var(--W) * .3906); }
  .lp-o .c-svg { inset: auto; left: calc(50cqw - var(--W) * .7383); top: calc(var(--W) * -.2344); width: var(--W); height: calc(var(--W) * .625); }
  .lp-o .o-chip { display: none; }
  .lp-o .o-main { display: block; padding: calc(var(--W) * .3828) 12px 16px; }
  .lp-o .o-card { width: auto; max-width: 440px; margin: 0 auto; padding: 42px 20px 14px; border-radius: 22px; }
  .lp-o .o-badge { top: -31px; left: 20px; width: 60px; height: 60px; border-radius: 14px; }
  .lp-o .o-brand { margin-bottom: 14px; }
  .lp-o .o-name { font-size: 32px; }
  .lp-o .o-sys { font-size: 10.5px; }
  .lp-o .lf-head { margin-bottom: 14px; padding-top: 14px; }
  .lp-o .lf-field { margin-bottom: 12px; }
  .lp-o .lf-box { height: 48px; }
  .lp-o .lf-box input { font-size: 16px; }
  .lp-o .lf-sub { font-size: 13px; }
}

/* less motion: everything is already in place */
@media (prefers-reduced-motion: reduce) {
  .lp-o *, .lp-o *::before, .lp-o *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* In the app: the page fills the window, whatever the layout around it */
.lpc { position: fixed; inset: 0; width: auto; height: auto; }
/* Blazor's form validation (EditForm, DataAnnotations): the message under the field and the red box */
.lp-o .lf-field .validation-message { margin-top: 6px; font-size: 12.5px; line-height: 1.4; color: var(--lf-err); }
.lp-o .lf-box:has(input.invalid) { border-color: var(--lf-err-strong); }
.lp-o .lf-box:has(input.invalid) > .i { color: var(--lf-err-strong); }
/* each failed try shakes the card again: the page switches between two classes with the same motion */
.lp-o .o-card.shake2 { animation: oms-lf-shake2 .42s cubic-bezier(.36,.07,.19,.97); }
@keyframes oms-lf-shake2 { 10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(3px); } 30%, 50%, 70% { transform: translateX(-6px); } 40%, 60% { transform: translateX(6px); } }
/* less motion: the light on the brand arrow is SMIL; the page pauses it, and it is hidden too */
@media (prefers-reduced-motion: reduce) { .lp-o .smil { display: none; } }