:root{
  --color-bg-page:#FFFFFF;
  --color-bg-surface:#FFFFFF;
  --color-ink:#141414;
  --color-grey-700:#4A4540;
  --color-grey-600:#6E6862;
  --color-grey-500:#8A847D;
  --color-grey-400:#949494;
  --color-grey-300:#C4C4C4;
  --color-grey-200:#D5D5D5;
  --color-grey-100:#E2E2E2;
  --color-grey-50:#EAEAEA;
  --color-accent-yellow:#FFDB03;
  --color-accent-jacred:#CB0108;
  --color-seat-free-fill:#DDEFE0;
  --color-seat-free-edge:#5E8F69;
  --color-seat-selected:#1C7F45;
  --color-seat-selected-edge:#14663A;
  --color-seat-unavailable-edge:#8A847D;
  --color-status-success:#14663A;
  --color-status-error:#A04A00;
  --color-status-warning-fill:#FFDB03;
  --color-status-info:#4A4540;
  --color-disabled-fill:#D5D5D5;
  --color-disabled-ink:#4A4540;
  --color-thirdparty-tile-dark:#141414;
  --font-family:'Plus Jakarta Sans', sans-serif;
  --font-weight-regular:500;
  --font-weight-semibold:600;
  --font-weight-bold:700;
  --font-weight-extrabold:800;
  --size-text-min:30px;
  --size-text-body:32px;
  --size-text-label:36px;
  --size-text-button:44px;
  --size-text-title:68px;
  --size-text-price:56px;
  --size-text-display:80px;
  --space-1:8px;
  --space-2:16px;
  --space-3:24px;
  --space-4:32px;
  --space-5:48px;
  --space-6:64px;
  --space-edge:48px;
  --radius-sm:16px;
  --radius-md:28px;
  --radius-lg:48px;
  --radius-pill:68px;
  --radius-seat:36px 36px 22px 22px;
  --elevation-0:none;
  --elevation-1:0 2px 4px rgba(20,20,20,.06),0 12px 24px rgba(20,20,20,.10),0 32px 64px rgba(20,20,20,.12);
  --elevation-2:0 4px 8px rgba(20,20,20,.10),0 20px 40px rgba(20,20,20,.18),0 48px 96px rgba(20,20,20,.20);
  --elevation-bar:0 -1px 0 #D5D5D5,0 -16px 40px rgba(20,20,20,.08);
  --target-min:48px;
  --target-preferred:64px;
  --target-key:84x96px;
  --target-keypad:200x120px;
  --target-primary-height:136px;
  --target-header-button:96px;
  --time-idle:60s;
  --time-idle-warning:20s;
  --time-ticket-return:20s;
  --time-seat-hold:270s;
}
/* Draft · not for distribution. Rules: red only on seat screens; yellow only as small accents; no blue (third-party brand marks excepted). */

/* Draft · not for distribution. Imported from proto-v4d/index.html. Do not edit by hand: edit tools/import_proto.py or tokens.css. */
:root{/* colour tokens (generated by tools/import_proto.py from proto-v4d) */
--backdrop:#0B0B0B;--c-e2e2e2:#E2E2E2;--grey:#4A4540;--xgrey:#8A847D;--c-rgba-255-255-255-82:rgba(255,255,255,.82);--ink:#141414;--c-rgba-20-20-20-18:rgba(20,20,20,.18);--c-rgba-20-20-20-0:rgba(20,20,20,0);--c-rgba-12-12-12-55:rgba(12,12,12,.55);--c-rgba-12-12-12-25:rgba(12,12,12,.25);--c-rgba-12-12-12-0:rgba(12,12,12,0);--c-rgba-0-0-0-9:rgba(0,0,0,.9);--c-rgba-0-0-0-0:rgba(0,0,0,0);--c-rgba-255-255-255-80:rgba(255,255,255,.80);--c-rgba-255-255-255-65:rgba(255,255,255,.65);--c-rgba-20-20-20-16:rgba(20,20,20,.16);--white:#FFFFFF;--c-rgba-0-0-0-8:rgba(0,0,0,.8);--c-2a2724:#2A2724;--c-rgba-255-255-255-07:rgba(255,255,255,.07);--c-rgba-176-164-150-28:rgba(176,164,150,.28);--c-rgba-176-164-150-0:rgba(176,164,150,0);--c-rgba-255-255-255-10:rgba(255,255,255,.10);--c-rgba-255-255-255-22:rgba(255,255,255,.22);--c-rgba-0-0-0-35:rgba(0,0,0,.35);--c-rgba-255-255-255-85:rgba(255,255,255,.85);--c-rgba-255-255-255-96:rgba(255,255,255,.96);--c-rgba-0-0-0-25:rgba(0,0,0,.25);--c-6e6862:#6E6862;--c-949494:#949494;--c-rgba-20-20-20-06:rgba(20,20,20,.06);--c-rgba-20-20-20-10:rgba(20,20,20,.10);--c-rgba-20-20-20-12:rgba(20,20,20,.12);--c-rgba-20-20-20-20:rgba(20,20,20,.20);--c-d5d5d5:#D5D5D5;--c-rgba-20-20-20-08:rgba(20,20,20,.08);--c-rgba-20-20-20-28:rgba(20,20,20,.28);--c-b1b1b1:#B1B1B1;--c-eaeaea:#EAEAEA;--c-c4c4c4:#C4C4C4;--c-rgba-255-255-255-0:rgba(255,255,255,0);--c-5e8f69:#5E8F69;--c-14663a:#14663A;--c-rgba-20-20-20-30:rgba(20,20,20,.30);--c-rgba-20-20-20-15:rgba(20,20,20,.15);--c-rgba-20-20-20-82:rgba(20,20,20,.82);--c-dcdcdc:#DCDCDC;--c-rgba-0-0-0-3:rgba(0,0,0,.3);--c-rgba-20-20-20-55:rgba(20,20,20,.55);--c-rgba-10-10-10-75:rgba(10,10,10,.75);--c-rgba-10-10-10-35:rgba(10,10,10,.35);--c-rgba-10-10-10-0:rgba(10,10,10,0);--c-999999:#999999;--c-rgba-0-0-0-85:rgba(0,0,0,.85);--c-rgba-0-0-0-4:rgba(0,0,0,.4);--c-rgba-15-16-15-7:rgba(15,16,15,.7);--c-rgba-15-16-15-3:rgba(15,16,15,.3);--yellow:#FFDB03;--green:#1C7F45;--green-pale:#DDEFE0;--green-edge:#8FBF9A;--jacred:#CB0108;--page:#FFFFFF;

 /* sampled from the operator logo; seat screen accent only (CEO word) */
--sel:var(--yellow);--sel-ink:var(--ink); /* SWITCH */}
*{box-sizing:border-box;margin:0;padding:0}
button{font:inherit;color:inherit;background:none;border:0;text-align:inherit;cursor:pointer}
html,body{width:100%;height:100%;overflow:hidden;background:var(--backdrop);font-family:var(--font);color:var(--ink);-webkit-font-smoothing:antialiased}
#stage{position:absolute;left:0;top:0;width:1080px;height:1920px;transform-origin:0 0;overflow:hidden;background:var(--page)}
.scr{position:absolute;inset:0;display:none;background:var(--page);overflow:hidden}.scr.on{display:block}
.ph{display:inline-flex;align-items:center;height:44px;padding:0 14px;border-radius:22px;background:var(--c-e2e2e2);color:var(--grey);font-size:30px;font-weight:700;letter-spacing:.3px;vertical-align:middle;border:2px dashed var(--xgrey);white-space:nowrap}
.phn{display:block;font-size:30px;color:var(--c-rgba-255-255-255-82);margin-top:8px;font-weight:500}
.plate{position:absolute;inset:0;width:1080px;height:1920px;display:block;object-fit:cover}
.shade{position:absolute;inset:0;background:linear-gradient(180deg,var(--c-rgba-20-20-20-18) 0%,var(--c-rgba-20-20-20-0) 28%)}
#shadow{position:absolute;left:0;top:0;border-radius:50%;background:radial-gradient(closest-side,var(--c-rgba-12-12-12-55),var(--c-rgba-12-12-12-25) 55%,var(--c-rgba-12-12-12-0));opacity:0;transform-origin:50% 50%}
#refl{position:absolute;left:0;top:0;width:1238px;height:832px;opacity:0;transform-origin:0 0;filter:blur(3px);-webkit-mask-image:linear-gradient(180deg,transparent 0,transparent 400px,var(--c-rgba-0-0-0-9) 640px,var(--c-rgba-0-0-0-0) 668px)}
#bus{position:absolute;left:0;top:0;width:1238px;height:832px;opacity:0;transform-origin:0 0}
.bar{position:absolute;left:86px;right:86px;top:178px;height:173px;border-radius:45px;display:flex;align-items:center;justify-content:center;background:var(--c-rgba-255-255-255-80);-webkit-backdrop-filter:blur(26px);backdrop-filter:blur(26px);border:2.7px solid var(--c-rgba-255-255-255-65);box-shadow:0 19px 39px var(--c-rgba-20-20-20-18),0 47px 86px var(--c-rgba-20-20-20-16);font-size:60px;font-weight:700;color:var(--ink);text-align:center}
.afoot{position:absolute;left:0;right:0;bottom:24px;text-align:center;font-size:30px;color:var(--white);text-shadow:0 2px 6px var(--c-rgba-0-0-0-8)}
/* task screen frame (from S1/S3/S5/S7 v6) */
.stage{position:absolute;left:0;top:0;width:100%;height:820px;border-radius:0 0 72px 72px;background:linear-gradient(160deg,var(--c-2a2724) 0%,var(--ink) 55%,var(--backdrop) 100%);overflow:hidden}
.ring{position:absolute;border-radius:50%;border:2px solid var(--c-rgba-255-255-255-07)}
.glow{position:absolute;border-radius:50%;background:radial-gradient(circle,var(--c-rgba-176-164-150-28),var(--c-rgba-176-164-150-0) 70%)}
.z1{position:absolute;top:0;left:0;right:0;height:150px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;color:var(--white);z-index:5}
.hbtn{height:96px;min-width:96px;padding:0 28px;border-radius:48px;display:flex;align-items:center;gap:12px;font-size:32px;font-weight:600;color:var(--white);background:var(--c-rgba-255-255-255-10);border:2px solid var(--c-rgba-255-255-255-22)}
.hbtn svg{width:36px;height:36px}
.logoplate{position:absolute;left:50%;top:11px;transform:translateX(-50%);width:128px;height:128px;border-radius:32px;background:var(--white);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px var(--c-rgba-0-0-0-35)}
.logoplate img{width:108px;height:108px;object-fit:contain}
.idle{font-size:30px;color:var(--c-rgba-255-255-255-85);display:flex;align-items:center;gap:10px}.idle b{font-weight:800;color:var(--white)}
.z2{position:absolute;top:150px;left:0;right:0;height:320px;padding:20px 56px 0;z-index:5;color:var(--white)}
.prog{display:inline-flex;gap:6px;align-items:center;background:var(--c-rgba-255-255-255-96);border-radius:40px;padding:10px 28px;height:64px;font-size:30px;color:var(--grey);box-shadow:0 8px 24px var(--c-rgba-0-0-0-25)}
.prog b{color:var(--ink);font-weight:800;border-bottom:4px solid var(--ink);padding-bottom:2px}.prog span.d{color:var(--ink);font-weight:600}.prog em{font-style:normal;color:var(--c-6e6862);padding:0 6px}
h1{font-size:68px;line-height:1.1;font-weight:800;letter-spacing:-1px;margin-top:26px}
.help{font-size:36px;line-height:1.3;color:var(--c-rgba-255-255-255-80);margin-top:12px;font-weight:500}
.z3{position:absolute;top:470px;left:0;right:0;height:1200px;padding:24px 48px;z-index:6}
.card{position:relative;display:block;width:100%;background:var(--white);border-radius:28px;border:2px solid var(--c-949494);box-shadow:0 2px 4px var(--c-rgba-20-20-20-06),0 12px 24px var(--c-rgba-20-20-20-10),0 32px 64px var(--c-rgba-20-20-20-12)}
.card.sel{border:3px solid var(--ink);box-shadow:0 4px 8px var(--c-rgba-20-20-20-10),0 20px 40px var(--c-rgba-20-20-20-18),0 48px 96px var(--c-rgba-20-20-20-20)}
.card.sel:before{content:"";position:absolute;left:-3px;top:24px;bottom:24px;width:12px;border-radius:0 8px 8px 0;background:var(--sel)}
.pill{display:none;align-items:center;gap:8px;background:var(--sel);color:var(--sel-ink);font-weight:800;font-size:30px;height:56px;padding:0 22px;border-radius:28px}
.pill svg{width:28px;height:28px}.card.sel .pill{display:inline-flex}
.z4{position:absolute;left:0;right:0;bottom:0;height:250px;background:var(--white);z-index:8;box-shadow:0 -1px 0 var(--c-d5d5d5),0 -16px 40px var(--c-rgba-20-20-20-08);padding:22px 48px 0;display:flex;flex-direction:column}
.z4 .row{display:flex;align-items:center;justify-content:space-between;height:168px;gap:24px}
.foot{font-size:30px;color:var(--grey);text-align:center;margin-top:6px;line-height:1}
.primary{height:136px;min-width:360px;padding:0 48px;border-radius:68px;background:var(--ink);color:var(--white);font-size:44px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:16px;box-shadow:0 12px 28px var(--c-rgba-20-20-20-28);white-space:nowrap;text-align:center}
.primary svg{width:40px;height:40px}.primary[disabled]{background:var(--c-b1b1b1);box-shadow:none;cursor:default}
.sumk{font-size:30px;color:var(--grey);font-weight:600;display:flex;align-items:center;gap:12px}
.sumv{font-size:44px;font-weight:800;margin-top:4px}.sumv.big{font-size:56px}

.lang{height:200px;display:flex;align-items:center;padding:0 48px;margin-bottom:24px;gap:24px}
.ln{font-size:52px;font-weight:800;flex:1}
.lang.dis{background:var(--c-eaeaea);border:2px solid var(--c-c4c4c4);box-shadow:none;color:var(--xgrey);cursor:default}
.soon{font-size:30px;font-weight:700;color:var(--grey)}
/* search */
.dest{height:212px;display:flex;align-items:center;margin-bottom:20px;padding:16px}
.thumb{width:248px;height:180px;border-radius:20px;background-size:cover;flex:none}
.dtxt{flex:1;padding-left:32px}.dn{font-size:44px;font-weight:800;letter-spacing:-.5px;display:flex;align-items:center;gap:12px}.dm{font-size:30px;color:var(--grey);margin-top:6px}
.dp{text-align:right;padding-right:24px;display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-end;height:100%;padding-bottom:10px}
.dp span{font-size:30px;color:var(--grey)}.dp strong{font-size:56px;font-weight:800;letter-spacing:-1px;line-height:1.15}
.ip{height:48px;font-size:30px}
.pax{display:flex;gap:12px;margin-top:10px}.pax button{width:88px;height:88px;border-radius:20px;border:2px solid var(--c-949494);display:flex;align-items:center;justify-content:center;font-size:38px;font-weight:700;background:var(--white)}
.pax button.on{border:3px solid var(--ink);background:var(--sel);color:var(--sel-ink)}
/* seats */
.sz3{padding:24px 48px 0}
.tools{display:flex;align-items:center;justify-content:space-between;gap:16px}
.legend{height:84px;display:inline-flex;align-items:center;gap:24px;font-size:30px;font-weight:700;background:var(--white);border-radius:42px;padding:0 26px;box-shadow:0 8px 24px var(--c-rgba-0-0-0-25);white-space:nowrap}
.legend .it{display:flex;align-items:center;gap:10px}
.ms{width:48px;height:38px;border-radius:14px 14px 9px 9px;display:flex;align-items:center;justify-content:center}
.ms.fr{background:var(--green-pale);border:3px solid var(--green-edge)}.ms.ux{background:var(--white);border:3px solid var(--c-c4c4c4)}.ms.ux svg{width:26px;height:26px}
.ms.on{background:var(--green)}.ms.on svg{width:26px;height:26px}
.auto{height:84px;display:flex;align-items:center;gap:14px;padding:0 28px 0 18px;border-radius:42px;background:var(--white);font-size:30px;font-weight:800;box-shadow:0 8px 24px var(--c-rgba-0-0-0-25);white-space:nowrap;border:3px solid var(--white)}
.auto .box{width:48px;height:48px;border-radius:12px;border:3px solid var(--c-949494);display:flex;align-items:center;justify-content:center;color:transparent}.auto .box svg{width:32px;height:32px}
.auto.on{border-color:var(--green)}.auto.on .box{background:var(--green);border-color:var(--green);color:var(--white)}
.laytag{position:absolute;left:48px;right:48px;top:122px;display:flex;align-items:center;gap:14px;z-index:7}.laytag .phn{color:var(--grey);margin:0;font-size:30px;line-height:1.2}
.mapvp{position:absolute;left:48px;right:48px;top:212px;bottom:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:none}
.mapvp::-webkit-scrollbar{display:none}
.track{position:absolute;right:14px;top:224px;bottom:12px;width:8px;border-radius:4px;background:var(--c-rgba-20-20-20-10);z-index:7}
.thumbbar{position:absolute;left:0;top:0;width:100%;border-radius:4px;background:var(--grey)}
.fade{position:absolute;left:48px;right:48px;bottom:0;height:110px;z-index:6;pointer-events:none;background:linear-gradient(180deg,var(--c-rgba-255-255-255-0),var(--white) 85%)}
.hint{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);z-index:7;height:64px;padding:0 32px;border-radius:32px;background:var(--ink);color:var(--white);font-size:30px;font-weight:700;display:flex;align-items:center;pointer-events:none}
.bus{position:relative;width:940px;margin:16px 0 140px;background:var(--white);border:5px solid var(--c-949494);border-radius:150px 150px 60px 60px;padding:130px 36px 36px}
.bus:before{content:"";position:absolute;left:5px;right:5px;top:5px;height:100px;border-radius:145px 145px 0 0;background:linear-gradient(180deg,var(--white),var(--white))}
.grid5{display:grid;grid-template-columns:1fr 1fr 96px 1fr 1fr;grid-template-rows:repeat(14,110px);position:relative;z-index:2}
.cell{display:flex;align-items:center;justify-content:center}
.rn{font-size:30px;font-weight:700;color:var(--xgrey)}
.wheel svg{width:88px;height:88px}
.seat{width:156px;height:96px;border-radius:36px 36px 22px 22px;position:relative;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;user-select:none}
.seat:before{content:"";position:absolute;left:42px;right:42px;top:9px;height:16px;border-radius:9px;border:3px solid currentColor;opacity:.6}
.seat .n{font-size:36px;font-weight:800;line-height:1;margin-top:14px}
.seat .xs,.seat .pi{display:none;width:30px;height:30px;margin-top:14px}
.seat.f{background:var(--green-pale);border:4px solid var(--green-edge);color:var(--c-5e8f69)}.seat.f .n{color:var(--ink)}
.seat.x{background:var(--white);border:3px solid var(--c-c4c4c4);color:var(--c-c4c4c4);cursor:default}.seat.x .xs{display:block}.seat.x .n{color:var(--c-6e6862)}
.seat.on{background:var(--green);border:4px solid var(--c-14663a);color:var(--white);box-shadow:0 10px 24px var(--c-rgba-20-20-20-30)}.seat.on .n{color:var(--white)}.seat.on .pi{display:block}
.seat.cab .xs{margin-top:10px}
.blk{width:330px;height:96px;border-radius:20px;border:3px solid var(--c-b1b1b1);background:var(--white);display:flex;align-items:center;justify-content:center;gap:14px;font-size:30px;font-weight:700;color:var(--grey)}
.blk svg{width:56px;height:56px;flex:none}
.blk.tall{height:316px;flex-direction:column;background:repeating-linear-gradient(135deg,var(--white) 0 18px,var(--c-e2e2e2) 18px 21px)}.blk.tall svg{width:72px;height:72px}

.dgap{position:absolute;right:-8px;width:11px;background:var(--white);z-index:3}
.djamb{position:absolute;right:-16px;width:30px;height:6px;border-radius:3px;background:var(--grey);z-index:4}

/* payment */
.trip{height:176px;display:flex;align-items:center;padding:0 36px;margin-bottom:28px;background:var(--white);border-radius:28px;box-shadow:0 16px 40px var(--c-rgba-0-0-0-25)}
.trip .c{flex:1;min-width:0}.trip .c1{flex:1.6}.trip .k{font-size:30px;color:var(--grey)}.trip .v{font-size:40px;font-weight:800;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trip .sep{width:1px;height:96px;background:var(--c-d5d5d5);margin:0 24px;flex:none}
.pay{height:200px;display:flex;align-items:center;padding:0 32px;margin-bottom:20px}
.mark{width:136px;height:136px;border-radius:24px;background:var(--white);border:2px dashed var(--xgrey);display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:800;flex:none;text-align:center;line-height:1.1}
.ptxt{flex:1;padding-left:36px}
.radio{width:56px;height:56px;border-radius:50%;border:3px solid var(--c-949494)}.card.sel .radio{display:none}
/* ticket */
.tk{padding:0;overflow:hidden;margin-top:10px;border:3px solid var(--ink)}
.tkhead{height:220px;background:url(../jac-assets/dest-city.jpg) center 55%/cover;position:relative}
.tkhead:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--c-rgba-20-20-20-15),var(--c-rgba-20-20-20-82))}
.tkhead>div{position:absolute;left:40px;right:40px;bottom:24px;color:var(--white);z-index:2}.tkhead .k{font-size:30px}.tkhead .v{font-size:60px;font-weight:800}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:24px 32px;padding:32px 40px}
.grid .k{font-size:30px;color:var(--grey)}.grid .v{font-size:46px;font-weight:800;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.perf{position:relative;height:2px;border-top:3px dashed var(--c-c4c4c4);margin:0 40px}
.codewrap{display:flex;align-items:center;gap:36px;padding:32px 40px 36px}
.code{width:240px;height:240px;display:grid;grid-template-columns:repeat(12,1fr);gap:3px;padding:16px;border:2px solid var(--ink);border-radius:16px;flex:none}
.code i{background:var(--ink);border-radius:2px}
.codewrap .t{font-size:36px;font-weight:700;display:flex;align-items:center;gap:12px}.codewrap .s{font-size:30px;color:var(--grey);margin-top:8px;line-height:1.35}
.rear{display:flex;justify-content:space-between;width:100%;padding:0 10px}
.legend{gap:18px;padding:0 20px}.legend .it{gap:8px}
.auto{font-size:30px;gap:10px;padding:0 20px 0 14px}.auto .box{width:44px;height:44px}
.laytag .phn{color:var(--c-rgba-255-255-255-85)}
.legend{gap:14px;padding:0 16px}.tools{gap:12px}.auto{gap:8px;padding:0 16px 0 12px}
/* v1.1 clean top (owner request 31 Oct): no logo, no dark header band */
.stage,.logoplate,.shade{display:none!important}
.z1{color:var(--ink)}
.hbtn{color:var(--ink);background:var(--white);border:2px solid var(--c-c4c4c4)}
.idle{color:var(--grey)}.idle b{color:var(--ink)}
.z2{color:var(--ink)}
.help{color:var(--grey)}
.phn,.laytag .phn{color:var(--grey)}
.prog,.legend,.auto{box-shadow:none;border:2px solid var(--c-c4c4c4)}
/* ---- v2 ---- */
.ph{font-size:30px;height:46px;padding:0 14px;border-radius:23px}
.rn{font-size:30px}.legend{font-size:30px}.auto{font-size:30px}.foot{font-size:30px}
.z1{height:150px}.z1 .hbtn{color:var(--ink);background:var(--white);border:3px solid var(--c-c4c4c4)}
.z2{top:130px}
.idlel{font-size:30px;color:var(--c-6e6862);text-align:center;display:flex;justify-content:center;align-items:center;gap:10px;margin-top:-6px;margin-bottom:6px}.idlel b{color:var(--grey)}
.z4{height:290px;padding-top:12px}.z4 .row{height:150px}
.z3{top:450px;height:1180px}
.sumv.sm{font-size:36px}
.olink{display:flex;align-items:center;gap:12px;height:88px;font-size:32px;font-weight:700;text-decoration:underline;margin:4px auto 0}.olink svg{width:32px;height:32px}
.bus1{height:180px;display:flex;align-items:center;padding:0 28px;margin-bottom:18px;gap:24px}
.bt{font-size:48px;font-weight:800;width:250px;flex:none}.btx{flex:1}.bpill{position:absolute;right:28px;top:14px;height:46px;font-size:30px}
.bus1 .dp{height:auto;padding:0}.bus1.sel .dp{padding-top:40px}
.note{font-size:30px;color:var(--grey);text-align:center;margin-top:18px;line-height:1.3}
/* seat red accent (CEO: red on the seat screen only) */
.seat.on{outline:4px solid var(--jacred);outline-offset:4px}
.ms.on{box-shadow:0 0 0 3px var(--jacred)}
.seatsum{display:inline-block;border-bottom:5px solid var(--jacred);padding-bottom:2px}
.hold{display:inline-flex;align-items:center;gap:12px;height:64px;padding:0 24px;border-radius:32px;border:3px solid var(--c-c4c4c4);font-size:32px;background:var(--white);margin-bottom:20px}
.chk{padding:16px 40px 24px}.cr{display:flex;justify-content:space-between;align-items:center;min-height:92px;border-bottom:2px solid var(--c-eaeaea);font-size:32px;gap:20px}.cr span{color:var(--grey)}.cr b{font-size:36px;text-align:right;display:flex;align-items:center;gap:10px}
.cr.tot{border:0}.cr.tot b{font-size:52px}
.ftbtn{height:96px;width:100%;margin:16px 0;border-radius:48px;border:3px solid var(--ink);font-size:34px;font-weight:600;text-align:center}
.mark.logo{width:220px;background:var(--white);border:2px solid var(--c-dcdcdc)}
.mark.logo img{height:48px;max-width:180px;object-fit:contain;display:block}
.lph{font-size:30px;font-weight:700;color:var(--grey);text-align:center;line-height:1.2;display:flex;flex-direction:column;align-items:center;gap:6px}
.mark.logo:has(.lph){border:2px dashed var(--xgrey)}
.pay .dm{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.primary.ghost{background:var(--white);color:var(--ink);border:3px solid var(--ink);box-shadow:none}
.cent{display:flex;flex-direction:column;align-items:center;padding-top:80px}
.spin{width:200px;height:200px;border-radius:50%;border:16px solid var(--c-e2e2e2);border-top-color:var(--ink);animation:sp 1.1s linear infinite}@keyframes sp{to{transform:rotate(360deg)}}
.big2{font-size:80px;font-weight:800;margin-top:48px}
.demo{margin-top:60px;height:88px;padding:0 28px;border-radius:44px;border:2px dashed var(--xgrey);font-size:30px;color:var(--grey);display:flex;align-items:center;gap:12px}
.act{height:190px;padding:0 44px;margin-bottom:24px;display:flex;flex-direction:column;justify-content:center}
.info{padding:40px 44px}.info ol,.steps{font-size:34px;line-height:1.45;margin:20px 0 0 44px}.info li{margin-bottom:12px}
.refbox{height:150px;border-radius:28px;border:3px solid var(--ink);background:var(--white);font-size:72px;font-weight:800;display:flex;align-items:center;padding:0 40px;letter-spacing:4px}
.caret{width:5px;height:80px;background:var(--ink);margin-left:6px;animation:bl 1s steps(1) infinite}@keyframes bl{50%{opacity:0}}
.kb{margin-top:28px;display:flex;flex-direction:column;gap:14px;align-items:center}.krow{display:flex;gap:12px}
.key{width:84px;height:96px;border-radius:16px;background:var(--white);border:2px solid var(--c-949494);font-size:36px;font-weight:700;text-align:center}.key.wide{width:190px;font-size:30px}
.tkhead{display:flex;justify-content:space-between;align-items:flex-end}
.tklogo{position:absolute;right:32px;top:24px;width:140px;height:140px;border-radius:28px;background:var(--white);display:flex;align-items:center;justify-content:center;z-index:3;box-shadow:0 8px 20px var(--c-rgba-0-0-0-3)}
.tklogo img{width:118px;height:118px;object-fit:contain}
/* sheets */
.dim{position:absolute;inset:0;background:var(--c-rgba-20-20-20-55);display:none;z-index:20}.dim.on{display:block}
.sheet{position:absolute;left:0;right:0;bottom:0;background:var(--page);border-radius:48px 48px 0 0;padding:44px 48px 28px;z-index:21;display:none;flex-direction:column;gap:20px}.sheet.on{display:flex}
.sh{display:flex;align-items:center;gap:20px}.sheet h2{font-size:56px;font-weight:800}
.fare{height:150px;display:flex;align-items:center;padding:0 36px}.fare .pill{margin-left:auto}
.full{width:100%}.big3{font-size:40px;line-height:1.35}
.tog{height:110px;display:flex;align-items:center;gap:20px;padding:0 32px;font-size:36px;font-weight:700}.tog .box{width:52px;height:52px;border-radius:12px;border:3px solid var(--c-949494);display:flex;align-items:center;justify-content:center;color:transparent}.tog.on .box{background:var(--sel);color:var(--sel-ink);border-color:var(--ink)}
/* attract */
#att{position:absolute;inset:0;overflow:hidden}
#busw{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
#bus{display:block;width:1300px;height:850px}
#cshadow{position:absolute;left:0;top:0;border-radius:50%;background:radial-gradient(closest-side,var(--c-rgba-10-10-10-75),var(--c-rgba-10-10-10-35) 60%,var(--c-rgba-10-10-10-0));transform-origin:0 0}
/* screen index (review only, ?index=1) */
#idx{position:fixed;right:8px;top:8px;z-index:99;font:600 14px sans-serif;display:none}#idx.on{display:block}
#idxb{background:var(--white);border:1px solid var(--c-999999);padding:4px 8px;border-radius:6px}
#idxl{list-style:none;background:var(--white);border:1px solid var(--c-999999);border-radius:6px;margin-top:4px;padding:4px;display:none;max-height:80vh;overflow:auto}#idx.open #idxl{display:block}
#idxl button{display:block;width:100%;padding:3px 8px;text-align:left}
.wsh{position:absolute;height:44px;border-radius:50%;background:radial-gradient(closest-side,var(--c-rgba-0-0-0-85),var(--c-rgba-0-0-0-4) 60%,var(--c-rgba-0-0-0-0))}
#busw img{position:relative}
.gsh{position:absolute;left:20px;top:700px;width:1290px;height:190px;border-radius:50%;background:radial-gradient(closest-side,var(--c-rgba-15-16-15-7),var(--c-rgba-15-16-15-3) 65%,var(--c-rgba-0-0-0-0));transform:skewY(5deg) translateX(-20px)}
#busw #bus{opacity:1;position:relative;transform:none;left:auto;top:auto}
.tkhead>.tklogo{left:auto;bottom:auto;right:32px;top:24px}
.trip{padding:0 28px}.trip .v{font-size:34px}.trip .c,.trip .c1{flex:1 1 auto}.trip .sep{margin:0 18px}
.dest{height:176px;margin-bottom:16px}.thumb{height:144px;width:220px}
.srch{width:100%;height:96px;border-radius:48px;border:3px solid var(--c-c4c4c4);background:var(--white);font-size:34px;font-weight:600;color:var(--grey);padding:0 36px;margin-bottom:20px;text-align:left}.srch span{color:var(--ink);font-weight:800}
.noq{display:none;font-size:32px;color:var(--grey);padding:20px}
.tabs{display:flex;gap:16px;margin-bottom:20px}.tabs button{height:88px;padding:0 40px;border-radius:44px;border:3px solid var(--c-c4c4c4);background:var(--white);font-size:34px;font-weight:700}.tabs button.on{border-color:var(--ink);background:var(--sel);color:var(--sel-ink)}
.cent2{flex-direction:column;align-items:center;gap:30px;padding:120px 0}
.bus1{height:170px;margin-bottom:16px}
.qrph{flex-direction:column;align-items:center;gap:24px;margin-top:30px}.qrbox{width:420px;height:420px;border:4px dashed var(--xgrey);border-radius:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;font-size:40px;font-weight:800;background:var(--white);text-align:center}
#m-card{margin-top:30px}.spin.sm{width:110px;height:110px;border-width:12px;margin-top:40px}
.okc{width:180px;height:180px;border-radius:50%;background:var(--ink);color:var(--white);display:flex;align-items:center;justify-content:center}.okc svg{width:100px;height:100px}
.kp{display:grid;grid-template-columns:repeat(3,200px);gap:18px;justify-content:center;margin-top:36px}.key.big{width:200px;height:120px;font-size:48px}.kp .key.big[data-m=DEL]{font-size:32px}
#q2{height:120px;font-size:56px}

/* v3: bus features (placeholders) */
.bus{margin-bottom:24px}.blk.tall.t2{height:206px}.tri svg{width:64px;height:64px}.blk.wc{gap:10px}.blk.wc svg{width:44px;height:44px}.blk.wc .ph{height:40px;padding:0 10px}.fsw{flex:none;width:56px;height:56px;display:flex;align-items:center;justify-content:center}.fsw.rl:before{content:"";width:14px;height:52px;border-radius:7px;background:repeating-linear-gradient(180deg,var(--c-b1b1b1) 0 10px,var(--xgrey) 10px 13px)}.fsw.ld{width:40px;height:56px;margin:0 8px;border-radius:12px;background:var(--grey)}.fsw.ld svg{width:28px;height:28px}.fsw.ic svg{width:52px;height:52px}
.mark.logo.dk{background:var(--ink);border-color:var(--ink)} /* v3: Maya mint mark on a dark tile for contrast; logo pixels unchanged */
.mark.logo:has(.lic){flex-direction:column;gap:12px}.ph.lic{height:40px;padding:0 12px} /* v3: logo licence not confirmed, so tagged */

/* v4: clean default view; ?ph=1 review mode */
html:not(.rv) .ph,html:not(.rv) .afoot,html:not(.rv) .hint,html:not(.rv) .demo,html:not(.rv) .scr:not(#s0) .foot,html:not(.rv) .sheet .foot,html:not(.rv) .rvo{display:none!important}
.prog{gap:12px!important;padding:0 24px!important;height:40px!important}
.prog em{display:none}
.prog span,.prog b{display:inline-block;width:44px;height:8px;border-radius:4px;background:var(--c-d5d5d5);border:0!important;padding:0!important}
.prog span.d{background:var(--grey)}.prog b{background:var(--ink);width:72px}
#pgcap{position:fixed;left:8px;top:4px;font:14px sans-serif;color:var(--c-6e6862);z-index:0}
.rgt{display:flex;gap:20px;align-items:center}.z1 .hbtn.lo{height:96px}html:not(.rv) #s2 .z3{top:315px;height:1315px}html:not(.rv) #s3 .z3{top:315px;height:1315px}html:not(.rv) #s4 .z3{top:315px;height:1315px}html:not(.rv) #s5 .z3{top:303px;height:1327px}html:not(.rv) #s6 .z3{top:269px;height:1361px}html:not(.rv) #s7 .z3{top:315px;height:1315px}html:not(.rv) #s8a .z3{top:315px;height:1315px}html:not(.rv) #s8b .z3{top:315px;height:1315px}html:not(.rv) #s8 .z3{top:265px;height:1365px}html:not(.rv) #s12 .z3{top:240px;height:1390px}html:not(.rv) #s12f .z3{top:275px;height:1355px}

/* Draft · not for distribution. App tokens layered over the imported proto tokens (proto.css :root). */
:root{
  --font:'Plus Jakarta Sans',system-ui,'DejaVu Sans',sans-serif;
  --att-bg-1:#FFFFFF;  /* attract (text-only) background, neutral */
  --att-bg-2:#FFFFFF;  /* v4d: pure white base, no gradient */
  --att-ink:#141414;
  --att-accent:#1C7F45; /* green line under the name; red stays on the seat screen only */
  --qr-ink:#141414; --qr-bg:#FFFFFF;
  --status-ink:#4A4540;
  --success-mark:var(--color-status-success); /* success circles/ticks (pack #14663A); never ink/black (CEO 31 Oct 18:25) */
  --success-mark-ink:#FFFFFF;
  --error-mark:var(--jacred); /* CEO 31 Oct 18:28: error/negative states use red #CB0108 (pack color-status-error #A04A00 superseded) */
  --burst-ms:900ms; --pop-ms:300ms;
  /* Optional circular icon slot for tiles and buttons (design pending, NOT applied). Empty by default. */
  --ico-size:96px; --ico-glyph:48px; --ico-ring:var(--c-d5d5d5); --ico-ring-w:2px; --ico-bg:var(--white); --ico-ink:var(--ink); --ico-gap:24px;
  --hero-top:0px; --hero-height:1920px; --hero-fit:cover; /* S0 hero slot (empty by default) */
}

@font-face{font-family:'Plus Jakarta Sans';src:url(../jac-assets/fonts/PlusJakartaSans-VariableFont_wght.ttf) format('truetype');font-weight:200 800;font-display:block} /* bundled with the app (no installed font needed); SIL OFL 1.1, see LICENSES/PlusJakartaSans-OFL-1.1.txt */
/* Draft · not for distribution. M14 app layer over the imported prototype. All colours via tokens. */
/* Livery switch: html.livery is set only when config showLiveryAssets is true */
html:not(.livery) #att{display:none}
html.livery #atttext{display:none}
html:not(.livery) .tklogo img{display:none}
html.livery .tkname{display:none}
.atttext{position:absolute;inset:0;background:linear-gradient(180deg,var(--att-bg-1),var(--att-bg-2));overflow:hidden}
.attglow{display:none} /* v4d: no grey glow; calm motion is the line + name drift */
.attname{position:absolute;left:0;right:0;top:820px;text-align:center;font-size:150px;font-weight:800;letter-spacing:2px;color:var(--att-ink);animation:attfade 24s ease-in-out infinite}
.attline{position:absolute;left:50%;top:1010px;width:240px;height:10px;margin-left:-120px;border-radius:5px;background:var(--att-accent);transform-origin:50% 50%;animation:attline 24s ease-in-out infinite}
@keyframes attdrift{0%,100%{transform:translateY(-120px)}50%{transform:translateY(160px)}}
@keyframes attfade{0%,100%{opacity:.88;transform:translateY(0)}50%{opacity:1;transform:translateY(-14px)}}
@keyframes attline{0%,100%{transform:scaleX(.6)}50%{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.attglow,.attname,.attline{animation:none}}
.tkname{font-size:44px;font-weight:800;color:var(--ink);white-space:nowrap}
.qrimg{display:block;width:100%;height:100%;object-fit:contain;image-rendering:pixelated;background:var(--qr-bg)}
.codewrap .qrimg{width:260px;height:260px;flex:none}
.qrbox .qrimg{width:380px;height:380px}
.qrbox{overflow:hidden}
/* landscape safety: the stage keeps 1080x1920 and is scaled to fit (letterboxed) */
html:not(.livery) .tklogo{width:auto;min-width:0;padding:0 28px;display:flex;align-items:center}
/* S0 hero slot: empty-safe; image fills the slot only when loaded (html.has-hero). Text and bar stay on top. */
.heroslot{position:absolute;left:0;right:0;top:var(--hero-top);height:var(--hero-height);overflow:hidden;pointer-events:none}
.heroslot img{width:100%;height:100%;object-fit:var(--hero-fit);display:block}.heroslot img[hidden]{display:none}
#s0 .atttext,#s0 .bar{z-index:2}html.has-hero .atttext{background:transparent}
/* success marks use the success-green token (CEO 31 Oct 18:25) */
.okc{background:var(--success-mark);color:var(--success-mark-ink)}
/* Thank-you (ty): title + neutral SAMPLE QR, nothing else in clean view */
#sty .z2{text-align:center}
/* State colour map (docs/STATE-COLOUR-MAP-M14.md): success titles green, error titles red */
#s8a h1,#s8 h1,#sty h1,#s12f h1{color:var(--success-mark)}
#s9 h1,#s8f h1,#s12n h1,#s11 h1,#s11p h1{color:var(--error-mark)}
/* 8a: green circle pops in, ONE sparkle burst, soft fade; plays once on arrival, then settles */
#s8a .okc{position:relative;animation:okpop var(--pop-ms) cubic-bezier(.2,.9,.3,1.2) 1 both}
#s8a .okc::before,#s8a .okc::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:transparent;pointer-events:none;opacity:0;
  box-shadow:0 -140px 0 var(--success-mark),99px -99px 0 var(--success-mark),140px 0 0 var(--success-mark),99px 99px 0 var(--success-mark),0 140px 0 var(--success-mark),-99px 99px 0 var(--success-mark),-140px 0 0 var(--success-mark),-99px -99px 0 var(--success-mark);
  animation:okburst var(--burst-ms) ease-out 150ms 1 both}
#s8a .okc::after{transform:rotate(22.5deg) scale(.8);animation-name:okburst2;box-shadow:0 -120px 0 var(--yellow),85px -85px 0 var(--yellow),120px 0 0 var(--yellow),85px 85px 0 var(--yellow),0 120px 0 var(--yellow),-85px 85px 0 var(--yellow),-120px 0 0 var(--yellow),-85px -85px 0 var(--yellow)}
@keyframes okpop{0%{transform:scale(.6);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes okburst{0%{opacity:0;transform:scale(.4)}20%{opacity:1}100%{opacity:0;transform:scale(1.15)}}
@keyframes okburst2{0%{opacity:0;transform:rotate(22.5deg) scale(.35)}20%{opacity:1}100%{opacity:0;transform:rotate(22.5deg) scale(1)}}
@media (prefers-reduced-motion:reduce){#s8a .okc,#s8a .okc::before,#s8a .okc::after{animation:none}#s8a .okc::before,#s8a .okc::after{opacity:0}}
/* Shared circular icon slot: one component for every tile/button. Only renders when an element with class .ico is present
   inside a tile (.card) or button (.primary/.olink); no markup uses it yet (design pending, CEO 31 Oct 18:21). */
.ico{flex:0 0 var(--ico-size);width:var(--ico-size);height:var(--ico-size);border-radius:50%;border:var(--ico-ring-w) solid var(--ico-ring);background:var(--ico-bg);color:var(--ico-ink);display:inline-flex;align-items:center;justify-content:center;margin-right:var(--ico-gap)}
.ico:empty{display:none}.ico svg,.ico img{width:var(--ico-glyph);height:var(--ico-glyph)}
/* Seat map in one view: ported from proto-v4e CHANGES section d only (Designer DRAFT, not yet CEO-accepted).
   Seat 156x84, numbers 36 px, row pitch 92, title 56, bottom bar 190, bus outline 14x92+40+border. */
#s4 .z2 h1{font-size:56px;margin-top:14px}
#s4 .z3{top:272px!important;height:1458px!important;padding-top:4px}
#s4 .mapvp{top:100px;overflow:hidden!important}
#s4 .track,#s4 .fade,#s4 .hint,#s4 .laytag{display:none!important}
#s4 .bus{margin:0;padding:20px 36px;border-radius:60px 60px 40px 40px}
#s4 .bus:before{display:none}
#s4 .grid5{grid-template-rows:repeat(14,92px)}
#s4 .seat{height:84px}
#s4 .seat:before{top:7px;height:13px}
#s4 .seat .n{margin-top:10px}
#s4 .z4{height:190px;padding-top:10px}
#s4 .z4 .row{height:150px}
/* v4e door markers for 92 px pitch (proto-v4e values: front 24/21/105, back 1128/1125/1209, height 84) */
#s4 .dgap{height:84px!important;top:24px!important}
#s4 .grid5~.djamb{top:21px!important}
#s4 .grid5~.djamb~.djamb{top:105px!important}
#s4 .dgap~.dgap{top:1128px!important}
#s4 .dgap~.dgap~.djamb{top:1125px!important}
#s4 .dgap~.dgap~.djamb~.djamb{top:1209px!important}
/* 3n Bus, no results = ERROR (CEO ruling relayed 19:36, as proto-v4e): red title + red cross circle */
#s3.nores h1{color:var(--error-mark)}
.stc{flex:none;width:84px;height:84px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#fff;margin-right:24px;vertical-align:middle}
.stc svg{width:48px;height:48px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.stc.err{background:var(--error-mark)}

/* Brand accents (CEO ruling 20:56; copied from proto-v4e-r3 "v4e r3 brand accents"; see docs/ACCENT-MAP-M14.md).
   Seat red #CB0108 + existing yellow token. Flat colour only: no filter, no animation, no gradient. Never on error screens. */
.prog b{background:var(--jacred)!important;width:72px!important}
#s3.nores .prog b{background:var(--ink)!important}
.acc-tk{display:flex;position:absolute;left:0;right:0;top:0;height:12px;z-index:9}
.acc-ty{display:flex;position:absolute;left:0;right:0;top:0;height:12px;width:auto;margin:0}
.acc-tk .r,.acc-ty .r{flex:2;background:var(--jacred)}
.acc-tk .y,.acc-ty .y{flex:1;background:var(--yellow)}
/* Error circle before the heading on 9 (also 9c, 9g), 8f, 11, 11p, 12n: same .stc.err as 3n */
h1.st{display:flex;align-items:center}
/* Thank-you (CEO ruling 20:57; r3 layout, Designer 21:00; +91px matches the r3 PNG text centre at about y 981 of 1920): only 'Thank you, and have a safe journey.', 68 px, centred vertically; no QR */
#sty .z2{position:absolute;left:0;right:0;top:calc(50% + 91px);transform:translateY(-50%);padding:0 96px}
#sty h1{font-size:68px;line-height:1.2;max-width:820px;margin:0 auto;text-align:center}
#sty .z3{display:none} /* empty since the QR went; it sat above the text in hit-testing */
/* proto-v4e r4 progress indicator (delegated decision 21:20; copied from the r4 "progress indicator" block). Three states differ by SHAPE:
   done = 28 px success circle + white check, current = brand red pill 96x16 + 2 px ink outline (aria-current="step"), future = 44x8 bar --xgrey.
   Flat CSS, no animation; .prog stays 40 px tall. Done circle uses M14's existing --success-mark (success green is an open CEO question). */
.prog{gap:12px!important}
.prog span{width:44px!important;height:8px!important;border-radius:4px!important;background:var(--xgrey)!important}
.prog span.d{width:28px!important;height:28px!important;border-radius:50%!important;background:var(--success-mark) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/22px 22px no-repeat!important}
.prog b{width:96px!important;height:16px!important;border-radius:8px!important;background:var(--jacred)!important;box-shadow:0 0 0 2px var(--ink)!important}
#s3.nores .prog b{background:var(--ink)!important}
/* Touch hardening (overnight 1-2 Nov): no pinch/double-tap zoom, no overscroll bounce or swipe-back, no text selection,
   no press-and-hold callout or tap flash. Buttons keep normal taps (touch-action: manipulation removes the double-tap delay). */
html,body{overscroll-behavior:none;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
#stage,#stage *{touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#stage input,#stage textarea{-webkit-user-select:text;user-select:text}
img,svg{-webkit-user-drag:none;user-drag:none}

/* Polish P9: optional on-screen sound control (config voice.onScreenMute). New element only; no existing size or spacing changed. z-index 19: under the sheet backdrop (.dim 20) so it is covered while a pop-up sheet is open.  D8: label font-size uses the text floor token (--min-text, default 36px = 14.4px at 1366x768). */
#sndctl{position:absolute;right:24px;top:24px;z-index:19;display:flex;gap:16px}
#sndctl .sndb{min-width:120px;min-height:120px;padding:0 28px;border-radius:24px;border:2px solid var(--xgrey);background:var(--white);color:var(--ink,#111);font-family:inherit;font-size:var(--min-text,36px);font-weight:700;line-height:1}
#sndctl .sndb[aria-pressed="true"]{background:var(--c-e2e2e2)}
#sndctl .sndb:disabled{opacity:.5}

/* Polish P10/item 4: Draft chrome. Smaller and quieter while shown (review mode .rv, demoChrome true); hidden entirely when demoChrome is false. */
html.rv .scr .foot,html.rv .sheet .foot{font-size:22px;opacity:.55;letter-spacing:.2px}
html.rv .afoot{font-size:22px;opacity:.6;text-shadow:none}
html.nochrome .ph,html.nochrome .afoot,html.nochrome .foot,html.nochrome .demo,html.nochrome .rvo{display:none!important}