.native-transition {
  position: absolute;
  left: max(12px, env(safe-area-inset-left));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 35;
  box-sizing: border-box;
  width: min(300px, calc(100% - 24px));
  max-height: min(440px, 62dvh);
  overflow: auto;
  padding: 16px;
  border: 1px solid #4fe4ef;
  border-top: 4px solid #ffd24d;
  border-radius: 6px;
  background: #063d70f2;
  color: #f4fcff;
  box-shadow: 0 6px 24px #00152670;
  font: 14px/1.4 Arial, sans-serif;
  letter-spacing: 0;
  text-align: left;
  pointer-events: auto;
  isolation: isolate;
}
.native-transition[hidden], .native-transition [hidden] { display: none !important; }
.native-transition--completion { left:auto;right:18px;bottom:20px;width:min(340px,calc(100% - 36px));border:2px solid #44d9ff;border-radius:26px;background:#063b71ed;box-shadow:0 0 0 4px #b7ecff88,0 0 28px #24c9ff77; }
.native-transition--completion .native-transition__action { border:2px solid #fff;border-radius:22px;background:#ffd32f;color:#102b54;min-height:50px;font-weight:800; }
.native-transition--completion .native-transition__stations li { padding:8px;border-radius:10px;background:#0c694a;color:#e1fff1; }
.native-transition--completion details { font-size:12px;margin-top:12px; }
.native-transition--completion summary { cursor:pointer; }
.native-completion-banner { position:absolute;top:110px;left:50%;transform:translateX(-50%);z-index:34;display:grid;gap:5px;width:min(600px,calc(100% - 40px));box-sizing:border-box;padding:16px 24px;text-align:center;border:2px solid #ffe490;border-radius:28px;background:#fffdf4f2;color:#07346a;box-shadow:0 0 0 3px #ffffff88,0 0 35px #ffd44eaa;font:18px/1.3 Arial;pointer-events:none; }
.native-completion-banner strong { font-size:32px; }.native-completion-banner[hidden] { display:none!important; }
.city-stage2-workspace { position:fixed;inset:5dvh 5vw;z-index:120;display:flex;flex-direction:column;padding:12px;border:2px solid #62d6fc;border-radius:24px;background:#eaf8fff5;box-shadow:0 0 0 5px #ffffff9c,0 12px 40px #123c6a66; }
.city-stage2-workspace>button { align-self:flex-end;margin-bottom:8px;padding:10px 16px;border:1px solid #7cb5dc;border-radius:12px;background:white;color:#075799;font-weight:700;cursor:pointer; }
.city-stage2-workspace iframe { width:100%;flex:1;min-height:0;border:0;border-radius:12px;background:#fff; }
@media(max-width:700px){.native-completion-banner{top:82px;padding:12px;font-size:14px;border-radius:20px}.native-completion-banner strong{font-size:23px}.native-transition--completion{right:10px;bottom:14px;max-height:38dvh;width:calc(100% - 20px)}.city-stage2-workspace{inset:10px;padding:8px}}
.native-transition *, .native-transition *::before, .native-transition *::after { box-sizing: border-box; letter-spacing: 0; }
.native-transition__badge { display: block; color: #7cf5ff; font-size: 11px; }
.native-transition h2 { margin: 6px 0; font-size: 21px; line-height: 1.15; color: #ffdf70; overflow-wrap: anywhere; }
.native-transition p { margin: 8px 0; overflow-wrap: anywhere; }
.native-transition__stations { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 10px; list-style: none; margin: 12px 0; padding: 0; font-size: 12px; }
.native-transition__stations li { min-width: 0; color: #e1eff9; overflow-wrap: anywhere; }
.native-transition__stations li[data-passed="true"] { color: #8ff0c3; }
.native-transition__action {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid #fff0a8;
  border-radius: 4px;
  background: #ffcf45;
  color: #08375c;
  font: 800 13px/1.3 Arial, sans-serif;
  white-space: normal;
  overflow-wrap: anywhere;
  cursor: pointer;
  touch-action: manipulation;
}
.native-transition__action:hover:enabled { background: #ffe48d; }
.native-transition__action:focus-visible { outline: 3px solid #7cf5ff; outline-offset: 3px; }
.native-transition__action:disabled { background: #bad2df; color: #214d68; border-color: #aac4d3; cursor: default; }
.native-transition__notice { min-height: 1.4em; color: #e1f8ff; font-size: 12px; }
@media (max-width: 700px) {
  .native-transition { left: max(8px, env(safe-area-inset-left)); bottom: max(86px, calc(env(safe-area-inset-bottom) + 72px)); width: min(244px, calc(100% - 24px)); padding: 10px; max-height: 43dvh; }
  .native-transition h2 { font-size: 17px; }
  .native-transition__stations { font-size: 11px; gap: 3px 6px; margin: 8px 0; }
}
@media (max-height: 500px) {
  .native-transition { bottom: 8px; max-height: 68dvh; padding: 10px; }
  .native-transition__stations { margin: 6px 0; }
}