:root{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-optical-sizing:auto;color:#0c0c0c;background:#eaf0f5;font-synthesis:none;--blue:#0c80db;--cyan:#00afd5;--green:#51d23c;--muted:#999;--nav:84px}*{box-sizing:border-box}body{margin:0}button{font:inherit;color:inherit;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}button:disabled{cursor:default;opacity:1}button:focus-visible{outline:3px solid #eeab00;outline-offset:5px}button:not(:disabled):active{filter:brightness(.96)}h1,h2,h3,p{margin:0}svg{width:32px;height:32px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.svg-library{position:absolute;width:0;height:0;overflow:hidden}[hidden]{display:none!important}.app{max-width:470px;margin:auto;min-height:100dvh;background:#fff;position:relative;box-shadow:0 0 64px #102b4220}.view{min-height:100dvh}.home-view{background:linear-gradient(180deg,#00a9d9 0,var(--blue) 110px,var(--blue) 442px,#fdfcfd 442px);padding-bottom:calc(var(--nav) + env(safe-area-inset-bottom) + 18px)}.balance{color:white;text-align:center;padding:calc(18px + env(safe-area-inset-top)) 20px 18px}.brand{display:flex;justify-content:flex-end;align-items:center;gap:5px;font-size:12px;letter-spacing:2px;font-weight:700}.brand-symbol{font-size:22px;line-height:1}.balance>p{font-size:16px;font-weight:600;margin-top:39px}.balance h1{font-size:58px;line-height:1.15;letter-spacing:-1px;margin-top:5px}.add{display:block;border-radius:50%;background:white;color:#080808;font-size:38px;font-weight:300;line-height:54px;width:54px;height:54px;margin:23px auto 15px}.balance h2{font-size:25px;line-height:1.3}.cards{padding:0 21px}.card{display:block;width:100%;border-radius:19px;background:white;overflow:hidden;box-shadow:0 2px 9px #00000020;text-align:center;margin-bottom:18px}.card h3{font-size:16px;color:white;line-height:1.25;padding:12px 8px;font-weight:700}.travelcard h3,.buy{background:#a2d89c}.travel-body{padding:9px 28px 12px}.travel-body p{font-weight:600;line-height:1.18;font-size:16px}.buy{color:#fff;width:62%;padding:12px;border-radius:40px;margin-top:12px;font-weight:700}.active-ticket h3{background:var(--green)}.ticket-body{padding:13px 17px 10px}.ticket-grid{display:grid;grid-template-columns:1fr 1.1fr 1.95fr}.ticket-grid>div+div{border-left:1px solid #999}.ticket-grid span,.purchase-row span{color:var(--muted);font-size:14px;font-weight:700;display:block}.ticket-grid strong{display:block;font-size:24px;font-weight:400;padding:16px 0 0;font-variant-numeric:tabular-nums}.ticket-grid .card-time{font-size:24px;white-space:nowrap;letter-spacing:-.5px}.departure{border-top:1px solid #a3a3a3;color:var(--muted);text-align:left;font-size:15px;font-weight:700;margin-top:13px;padding-top:11px}.purchases{margin-top:25px}.purchases h3{background:#a1a1a1}.purchase-row{display:grid;grid-template-columns:1fr 1.1fr 1.3fr 46px;margin:0 17px;padding:14px 0;align-items:center}.purchase-row+.purchase-row{border-top:1px solid #999}.purchase-row>div+div{border-left:1px solid #999}.purchase-row strong{font-size:23px;font-weight:400;display:block;margin-top:4px}.purchase-row button{height:43px;width:43px;border:1.5px solid #058bd2;border-radius:50%;color:#058bd2;background:white;display:grid;place-items:center}.purchase-row svg{width:25px;height:25px}.start-hint{font-size:13px;text-align:center;color:#727d85;line-height:1.5;padding:0 8px 5px}.bottom-nav{position:fixed;z-index:5;bottom:0;width:100%;max-width:470px;display:grid;grid-template-columns:repeat(5,1fr);background:#fff;box-shadow:0 -3px 9px #0000000c;padding-bottom:env(safe-area-inset-bottom)}.bottom-nav button{height:var(--nav);background:white;display:flex;align-items:center;justify-content:center;gap:4px;flex-direction:column;position:relative;border-bottom:5px solid transparent;padding:6px 0 8px;font-size:14px}.bottom-nav svg{width:32px;height:32px;stroke-width:2.2}.bottom-nav .selected{color:var(--cyan);border-color:var(--cyan)}.more i{font-size:14px;font-weight:700;font-style:normal;border-radius:50%;width:27px;height:27px;line-height:27px;background:var(--cyan);color:white;position:absolute;right:13px;top:-8px}.detail-view{padding-bottom:calc(var(--nav) + env(safe-area-inset-bottom));background:#fdfcfd}.detail-header{background:linear-gradient(180deg,#00aad9 0,var(--blue) 115px);color:white;text-align:center;padding:calc(20px + env(safe-area-inset-top)) 15px 32px}.title-row{display:grid;grid-template-columns:40px 1fr 56px;align-items:center}.title-row h1{font-size:24px}.back{color:white;background:transparent;width:40px;height:44px;display:grid;place-items:center}.back svg{width:24px;height:24px}.demo-logo{font-size:33px;line-height:1;display:flex;flex-direction:column;align-items:center}.demo-logo small{font-size:12px;font-weight:700;letter-spacing:1.5px;margin-top:3px}.status-pill{background:#6bd34c;border-radius:30px;display:inline-block;padding:5px 18px;font-size:14px;font-weight:700;margin-top:29px}.large-time{font-size:clamp(44px,12.5vw,62px);font-weight:700;line-height:1.2;letter-spacing:-1.5px;font-variant-numeric:tabular-nums;margin:10px -4px 13px;white-space:nowrap}.ticket-info p{font-size:16px;line-height:1.5}.qr-section{text-align:center;padding:9px 20px 28px}.qr-section>p:first-child{font-size:16px;margin-bottom:6px}.qr-button{background:transparent;display:flex;align-items:center;flex-direction:column;margin:auto;color:#009bd9;font-size:17px;font-weight:700}.qr-button img{width:190px;height:190px;display:block}.qr-button span{display:flex;align-items:center;margin-top:8px}.qr-button svg{height:22px;width:22px;margin-right:3px}.demo-caption{font-size:12px;color:#8a8a8a;font-weight:600;letter-spacing:.6px;margin-top:16px}.zoom-view{background:white;padding:calc(24px + env(safe-area-inset-top)) 12px calc(30px + env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:24px;height:100dvh;min-height:420px}.zoom-label{color:#878787;font-size:16px;font-weight:700;text-align:center;letter-spacing:3px}.zoom-label span{display:block;font-size:12px;font-weight:400;letter-spacing:1px;margin-top:5px}.full-qr{width:100%;max-height:65dvh;object-fit:contain;aspect-ratio:1}.close-qr{background:transparent;display:flex;align-items:center;flex-direction:column;gap:8px;color:#888}.close-qr>span{width:50px;height:50px;border-radius:50%;background:#c0c0c0;color:#fff;font-size:35px;line-height:47px}.close-qr small{font-size:14px}.expired .ticket-status{background:#999}@media(min-width:600px){.app{min-height:100dvh}}@media(max-width:360px){.cards{padding:0 14px}.travel-body{padding-left:18px;padding-right:18px}.ticket-grid .card-time{font-size:21px}.ticket-grid span,.purchase-row span{font-size:12px}.ticket-info p{font-size:14px}.title-row h1{font-size:22px}.more i{right:8px}}@media(prefers-reduced-motion:no-preference){.view{animation:appear .16s ease-out}@keyframes appear{from{opacity:.8}to{opacity:1}}}

/* Native, gently spaced typography, matching the iOS reference. */
body{letter-spacing:-.012em}button{letter-spacing:inherit}.balance h1,.balance h2,.title-row h1,.large-time{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,"Helvetica Neue",sans-serif}.balance h1{font-weight:700;letter-spacing:-.025em}.balance h2,.title-row h1{font-weight:650;letter-spacing:-.025em}.large-time{font-weight:700;letter-spacing:-.025em}.card h3,.balance>p{font-weight:600;letter-spacing:0}.travel-body p{font-weight:600;line-height:1.22;letter-spacing:-.015em}.ticket-grid span,.purchase-row span{font-weight:600;letter-spacing:.015em}.ticket-grid strong,.purchase-row strong{font-weight:400;letter-spacing:-.025em}.departure{font-weight:600;letter-spacing:-.012em}.ticket-info{font-weight:400;letter-spacing:-.015em}.ticket-info b{font-weight:650}.status-pill{font-weight:650;letter-spacing:.01em;text-transform:uppercase}.bottom-nav button{font-weight:400;letter-spacing:-.01em}.qr-button{font-weight:600}.brand,.demo-logo small,.demo-caption{font-weight:600}

/* Compact phone proportions, with a decorative iPhone status bar. */
:root{--nav:64px;--status-height:0px}
.app,.bottom-nav{max-width:430px}
.view{min-height:calc(100dvh - var(--status-height) - env(safe-area-inset-top))}
.home-view{background:linear-gradient(180deg,#00a9d9 0,var(--blue) 85px,var(--blue) 348px,#fdfcfd 348px)}
.balance{position:relative;padding:60px 18px 16px}
.brand{position:absolute;right:19px;top:11px;font-size:10px;letter-spacing:1.5px}.brand-symbol{font-size:17px}
.balance>p{font-size:14px;margin-top:0}.balance h1{font-size:52px;line-height:1.15;margin-top:5px}.add{font-size:33px;line-height:48px;width:48px;height:48px;margin:20px auto 14px}.balance h2{font-size:21px;line-height:1.3}
.cards{padding:0 20px}.card{border-radius:17px;margin-bottom:16px}.card h3{font-size:14px;line-height:1.2;padding:10px 7px}.travel-body{padding:8px 25px 11px}.travel-body p{font-size:14px;line-height:1.2}.buy{font-size:14px;width:60%;padding:10px;margin-top:10px}.ticket-body{padding:12px 15px 10px}.ticket-grid span,.purchase-row span{font-size:13px}.ticket-grid strong{font-size:21px;padding-top:15px}.ticket-grid .card-time{font-size:21px}.departure{font-size:13px;margin-top:12px;padding-top:10px}.purchases{margin-top:23px}.purchase-row{grid-template-columns:1fr 1.1fr 1.3fr 40px;margin:0 15px;padding:12px 0}.purchase-row strong{font-size:21px;margin-top:3px}.purchase-row button{width:38px;height:38px}.purchase-row svg{width:23px;height:23px}.start-hint{font-size:12px}
.bottom-nav button{font-size:13px;gap:3px;border-bottom-width:4px;padding:4px 0 6px}.bottom-nav svg{width:28px;height:28px}.more i{width:24px;height:24px;line-height:24px;font-size:13px;right:13px;top:-8px}
.detail-header{padding:5px 14px 29px;background:linear-gradient(180deg,#00a9d9 0,var(--blue) 60px)}.title-row{grid-template-columns:35px 1fr 48px}.title-row h1{font-size:21px}.back{width:35px;height:40px}.back svg{width:21px;height:21px}.demo-logo{font-size:29px}.demo-logo small{font-size:10px}.status-pill{font-size:13px;padding:4px 16px;margin-top:23px}.large-time{font-size:clamp(42px,13vw,55px);margin:10px -3px 11px;line-height:1.15}.ticket-info p{font-size:14px;line-height:1.45}.qr-section{padding:8px 18px 24px}.qr-section>p:first-child{font-size:14px;margin-bottom:5px}.qr-button{font-size:15px}.qr-button img{width:170px;height:170px}.qr-button span{margin-top:6px}.qr-button svg{width:20px;height:20px}.demo-caption{margin-top:13px;font-size:11px}
.zoom-view{height:calc(100dvh - var(--status-height) - env(safe-area-inset-top));padding:18px 12px calc(30px + env(safe-area-inset-bottom));min-height:380px}.zoom-label{font-size:14px}.zoom-label span{font-size:11px}.close-qr>span{width:44px;height:44px;line-height:41px;font-size:31px}.close-qr small{font-size:13px}
@media(max-width:360px){.cards{padding:0 16px}.phone-status{padding-left:7%;padding-right:7%}.phone-time{font-size:15px}.phone-indicators{gap:6px}.phone-signal{gap:1.5px}.ticket-grid span,.purchase-row span{font-size:12px}.ticket-grid .card-time{font-size:19px}.travel-body{padding-left:18px;padding-right:18px}.ticket-info p{font-size:13px}.more i{right:9px}}

/* Paint the real iOS safe area instead of drawing system indicators. */
html,body{background:#00a9d9;min-height:100%}
.app{background:#00a9d9;padding-top:env(safe-area-inset-top)}
.brand{top:11px}
@media(min-width:600px){html,body{background:#eaf0f5}}
@media(display-mode:standalone){html,body{background:#00a9d9}.app{max-width:none;box-shadow:none}.bottom-nav{max-width:none}}

/* Reference name with an explicit demo subtitle. */
.brand,.demo-logo{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;letter-spacing:0}.brand-name{font-size:16px;line-height:1.1;font-weight:700;white-space:nowrap}.brand small,.demo-logo small{font-size:11px;line-height:1.2;font-weight:700;letter-spacing:1.2px;margin:0}.title-row{grid-template-columns:35px 1fr 62px}

.demo-logo .idsbk-mark{display:block;width:70px;height:38px;object-fit:contain}.demo-logo .brand-name{font-size:14px;font-weight:400;letter-spacing:-.4px}.demo-logo .brand-name b{font-weight:700}.demo-logo small{font-size:11px;letter-spacing:1px}.title-row{grid-template-columns:76px 1fr 76px}.detail-header .status-pill{margin-top:15px}