/* HM5 tactical skin (2026-11-05): the tactical Call of Duty look on the whole desk.
   Gunmetal panels with cut corners, condensed caps for headings and labels, the darkened battle art behind everything,
   scan lines and a vignette, a glass door bar with an accent hairline. Colors and sizes only: no number, flow or paywall is touched.
   Applies only under html.hm5-cod (hm5-cod.js adds it in Dark and takes it off in Light, so Light stays the plain Apple look).
   Accent is green (--acc). Amber stays reserved for real-money states. Transform and opacity for motion; prefers-reduced-motion cuts it. */
:root{
  --cod-ui:'Rajdhani','Barlow Condensed','Arial Narrow',Inter,-apple-system,sans-serif;
  --cod-num:'Barlow Condensed','Rajdhani','Arial Narrow',Inter,-apple-system,sans-serif;
  --cut:14px;--cut-s:8px;
  --steel-1:#232a33;--steel-2:#171c23;--steel-3:#0f1318;--edge:#323b47;--edge-hi:#4a5666;
  --metal:linear-gradient(158deg,rgba(35,42,51,.97) 0%,rgba(20,25,31,.97) 52%,rgba(14,17,22,.98) 100%);
  --ease-o:cubic-bezier(.16,.84,.3,1);
  --acc:#1fd18a;--acc-soft:#17a06a;--acc-ink:#06130d;--acc-glow:rgba(31,209,138,.3);--tile:#0d1014;--raise:#181c22;--hair:#22262d;--hair-2:#2c3139;
}

/* ---- tokens: every page's surfaces map onto the steel palette (theme.css maps their own names onto these) ---- */
html.hm5-cod{
  --bg:#0b0e12;--bg2:#0f1318;--surface:#151a21;--card:#151a21;--panel:#151a21;--surface-1:#151a21;--surface-2:#10141a;--surface-3:#1a2028;
  --line:#323c48;--border:#323c48;--line-2:#4a5768;--border-soft:#283039;
  --hm5-bg:#0b0e12;--hm5-surface:#151a21;--hm5-line:#2a323d;--hm5-line-2:#3b4655;--hm5-sel:rgba(255,255,255,.06);--hm5-glass:rgba(12,15,19,.84);
  --gm-bg:#0b0e12;--gm-surface:#151a21;
  --hm5-accent:#1fd18a;--hm5-accent-ink:#06130d;
  background:#080a0d;
}
html.hm5-cod body{background:transparent;background-color:transparent}

/* ---- the scene behind everything: the battle art, darkened, drifting slower than the panels ---- */
.hm5-cod-art{display:none}
html.hm5-cod .hm5-cod-art{display:block;position:fixed;inset:0;z-index:-1;pointer-events:none;background:#0a0d11;overflow:hidden}
html.hm5-cod .hm5-cod-art:before{content:"";position:absolute;inset:-3%;background:url(cod-bg.jpg) center 40%/cover no-repeat;opacity:0;transition:opacity .8s ease;will-change:transform;transform:translate3d(var(--px,0px),var(--py,0px),0) scale(1.06)}
html.hm5-cod.cod-art-on .hm5-cod-art:before{opacity:1}
html.hm5-cod .hm5-cod-art:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,8,11,.86) 0%,rgba(6,8,11,.9) 50%,rgba(6,8,11,.95) 100%)}
/* the landing and sign-up pages let the art show more: it is the first thing a visitor sees */
html.hm5-cod.cod-front .hm5-cod-art:after{background:linear-gradient(180deg,rgba(6,8,11,.5) 0%,rgba(6,8,11,.68) 55%,rgba(6,8,11,.88) 100%)}
/* fine scan lines and a vignette: depth without another image */
html.hm5-cod:after{content:"";position:fixed;inset:0;z-index:60;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.022) 0 1px,transparent 1px 3px);mix-blend-mode:overlay}
html.hm5-cod:before{content:"";position:fixed;inset:0;z-index:59;pointer-events:none;background:radial-gradient(120% 90% at 50% 40%,transparent 55%,rgba(0,0,0,.55) 100%)}

/* ---- type: condensed caps for headlines and labels, condensed numerals for the big numbers ---- */
html.hm5-cod :is(h1,h2,h3){font-family:var(--cod-ui);text-transform:uppercase;letter-spacing:.04em;font-weight:700}
html.hm5-cod h1{font-size:clamp(30px,3.9vw,50px);line-height:1.04}
html.hm5-cod h2{font-size:clamp(24px,2.5vw,30px);line-height:1.1}
html.hm5-cod h3{font-size:22px;line-height:1.15}
html.hm5-cod :is(.kick,.hm5-side-k,.ms-k,.jp-r em,.db-kicker,.shead .kick){font-family:var(--cod-ui);letter-spacing:.18em;font-weight:700}
html.hm5-cod .kick:before{content:"";display:inline-block;width:8px;height:8px;margin-right:8px;background:var(--acc);clip-path:polygon(0 0,100% 50%,0 100%);vertical-align:0}
html.hm5-cod :is(th,.tb-head span){font-family:var(--cod-ui);letter-spacing:.14em;text-transform:uppercase;font-weight:700}
html.hm5-cod :is(.pill,.badge,.chip,.scn-chip,.stk,.bk-badge,.tb-tab,.hm5-bpill,.tf,.ptab){font-family:var(--cod-ui);letter-spacing:.1em;text-transform:uppercase;font-weight:700}
html.hm5-cod .num,html.hm5-cod .big,html.hm5-cod [class*="big-"],html.hm5-cod .stat b{font-family:var(--cod-num)}

/* ---- panels: gunmetal, a bevel light on the top edge, two cut corners ---- */
html.hm5-cod :is(.card,.listcard,.board-card,.gm-card,.pv-w,.pv-path,.bk-tile,.arena,.ls-course,.ls-check,.ls-drill,.ls-note,.acct-bar,.pmodal-box,.tut-card,.form-section),html.hm5-cod details.tk{
  --cut:12px;background-color:transparent;background-image:var(--metal);border:1px solid var(--edge);border-radius:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),inset 0 -1px 0 rgba(0,0,0,.55);
  clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)));
  transition:border-color .25s,box-shadow .25s,transform .25s var(--ease-o)}
/* small inner boxes: the same metal and edge, no cut corner (they sit inside the big panels) */
html.hm5-cod :is(.step,.ev,.lrow,.result,.post,.promise>div,.stat>div){background-color:transparent;background-image:var(--metal);border:1px solid var(--edge);border-radius:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
html.hm5-cod .g{border-radius:0}
html.hm5-cod :is(.callout,.info,.success){border-radius:0;border-color:var(--edge-hi)}
html.hm5-cod .table-wrap{border-radius:0;border-color:var(--edge);background:rgba(10,13,17,.6)}
@media(hover:hover){
  html.hm5-cod :is(.card,.listcard,.board-card,.gm-card,.pv-w,.pv-path,.bk-tile,.ls-course,.post):hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 -1px 0 rgba(0,0,0,.55),inset 3px 0 0 var(--acc)}
}

/* ---- buttons: caps, cut corners, a press you can feel; their own colors stay ---- */
html.hm5-cod :is(.btn,.go,.next,.ls-btn,.dr-send,.gm-wgo,.gm-wcalm,.pl-go,.tr-go,.tr-off,.hm5-take-go,.ov-pm,.hm5-foot-sub button){
  font-family:var(--cod-ui);text-transform:uppercase;letter-spacing:.1em;font-weight:700;border-radius:0;
  clip-path:polygon(0 0,calc(100% - var(--cut-s)) 0,100% var(--cut-s),100% 100%,var(--cut-s) 100%,0 calc(100% - var(--cut-s)))}
html.hm5-cod :is(.btn,.go,.next,.ls-btn,.dr-send):not(:disabled):hover{filter:brightness(1.15)}
html.hm5-cod :is(.btn,.go,.next,.ls-btn,.dr-send):not(:disabled):active{transform:translateY(1px) scale(.975);filter:brightness(1.25)}
html.hm5-cod :is(.tf,.seg,.seg button,.tb-tab,.nav-tab,.ptab){border-radius:0}
html.hm5-cod :is(.pill,.badge,.chip,.scn-chip,.stk,.bk-badge,.hm5-bpill){border-radius:0;clip-path:polygon(0 0,calc(100% - 6px) 0,100% 6px,100% 100%,6px 100%,0 calc(100% - 6px))}
html.hm5-cod :is(input,select,textarea){border-radius:0;box-shadow:inset 0 2px 6px rgba(0,0,0,.55);transition:border-color .2s,box-shadow .2s}
html.hm5-cod :is(input,select,textarea):focus{border-color:var(--acc);box-shadow:inset 0 2px 6px rgba(0,0,0,.55),0 0 0 1px var(--acc),0 0 14px -2px var(--acc-glow)}
html.hm5-cod :is(input[type=checkbox],input[type=radio],input[type=range]){box-shadow:none}
html.hm5-cod :focus-visible{outline-color:var(--acc)}
html.hm5-cod ::selection{background:var(--acc);color:var(--acc-ink)}

/* ---- tables: a bar slides in on the row under the pointer ---- */
html.hm5-cod table{background:transparent}
html.hm5-cod th{background:rgba(255,255,255,.03);color:#8a93a0;border-bottom:1px solid var(--hair-2)}
html.hm5-cod td{border-color:var(--hair)}
html.hm5-cod tbody tr{transition:background .2s}
html.hm5-cod tbody tr:hover td{background:rgba(255,255,255,.035)}
html.hm5-cod tbody tr:hover td:first-child{box-shadow:inset 3px 0 0 var(--acc)}

/* ---- the door bar: glass metal, an accent hairline with a light that sweeps along it, slanted plates under the doors ---- */
html.hm5-cod .hm5-topnav{background:linear-gradient(180deg,rgba(23,28,35,.94),rgba(11,14,18,.9));border-bottom:1px solid var(--edge);box-shadow:0 10px 30px -14px rgba(0,0,0,.9)}
html.hm5-cod .hm5-topnav:after{content:"";position:absolute;left:0;bottom:-1px;height:1px;opacity:.45;width:140px;pointer-events:none;background:linear-gradient(90deg,transparent,var(--acc),transparent);animation:hm5CodScan 7s linear infinite;will-change:transform}
@keyframes hm5CodScan{from{transform:translateX(-160px)}to{transform:translateX(100vw)}}
html.hm5-cod .hm5-topnav .hm5-tabs{gap:4px}
/* the bar's own rule uses !important for size, case and color, so these match it with a heavier selector */
html.hm5-cod .hm5-topnav .hm5-tabs>.hm5-door,html.hm5-cod .hm5-topnav .hm5-more-b{position:relative;isolation:isolate;border-radius:0!important;background:transparent!important;
  height:38px!important;padding:0 11px!important;font-family:var(--cod-ui);font-size:17px!important;font-weight:700!important;letter-spacing:.1em!important;text-transform:uppercase!important;color:#8d98a7!important;
  animation:hm5CodNavIn .6s var(--ease-o) both;transition:color .2s,text-shadow .2s}
html.hm5-cod .hm5-topnav .hm5-tabs>.hm5-door .hm5-door-l{font-size:inherit!important;flex:none;overflow:visible;white-space:nowrap}
@media(min-width:1500px){html.hm5-cod .hm5-topnav .hm5-tabs>.hm5-door,html.hm5-cod .hm5-topnav .hm5-more-b{font-size:19px!important;letter-spacing:.14em!important;padding:0 15px!important}}
html.hm5-cod .hm5-topnav .hm5-tabs>.hm5-door:nth-child(2){animation-delay:.07s}html.hm5-cod .hm5-topnav .hm5-tabs>.hm5-door:nth-child(3){animation-delay:.14s}
html.hm5-cod .hm5-topnav .hm5-tabs>.hm5-door:nth-child(4){animation-delay:.21s}html.hm5-cod .hm5-topnav .hm5-tabs>.hm5-door:nth-child(5){animation-delay:.28s}html.hm5-cod .hm5-topnav .hm5-tabs>.hm5-door:nth-child(6){animation-delay:.35s}
@keyframes hm5CodNavIn{from{opacity:0;transform:translateY(-12px) skewX(-14deg)}to{opacity:1;transform:none}}
html.hm5-cod .hm5-topnav .hm5-tabs>.hm5-door:before,html.hm5-cod .hm5-topnav .hm5-more-b:before{content:"";position:absolute;inset:5px 0;z-index:-1;transform:skewX(-16deg) scaleX(0);transform-origin:left center;background:linear-gradient(90deg,var(--acc-glow),rgba(255,255,255,.04));border-left:2px solid var(--acc);transition:transform .32s var(--ease-o)}
html.hm5-cod .hm5-topnav .hm5-tabs>.hm5-door:hover,html.hm5-cod .hm5-topnav .hm5-more-b:hover{color:#fff!important;background:transparent!important;text-shadow:0 0 12px var(--acc-glow)}
html.hm5-cod .hm5-topnav .hm5-tabs>.hm5-door:hover:before,html.hm5-cod .hm5-topnav .hm5-more-b:hover:before{transform:skewX(-16deg) scaleX(1)}
html.hm5-cod .hm5-topnav .hm5-tabs>.hm5-door.on,html.hm5-cod .hm5-topnav .hm5-more-b.on{color:#fff!important;font-weight:700!important;background:transparent!important;box-shadow:inset 0 -3px 0 var(--acc)!important;text-shadow:0 0 14px var(--acc-glow)}
html.hm5-cod .hm5-topnav .hm5-tabs>.hm5-door.on:before,html.hm5-cod .hm5-topnav .hm5-more-b.on:before{transform:skewX(-16deg) scaleX(1);opacity:.7}
html.hm5-cod .hm5-topnav .hm5-tabs>.hm5-door:active{transform:translateY(1px)}
html.hm5-cod .hm5-topnav .hm5-tabs>.hm5-door .hm5-live{background:var(--acc)!important;box-shadow:0 0 8px var(--acc)!important;margin-left:8px!important}
/* More, Account, Search, Unlock, Coaching wear the same metal */
html.hm5-cod :is(.hm5-acct-b,.hm5-jump-top,.hm5-moon-top,.hm5-nav-coach,.hm5-learnbtn){border-radius:0;font-family:var(--cod-ui);letter-spacing:.1em;text-transform:uppercase;background:#10141a;border:1px solid var(--edge);clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px))}
html.hm5-cod :is(.hm5-acct-b,.hm5-jump-top,.hm5-nav-coach):hover{border-color:var(--acc);color:#fff}
html.hm5-cod .hm5-topnav .hm5-search{border-radius:0;background:#0b0e12;box-shadow:inset 0 2px 6px rgba(0,0,0,.55)}
html.hm5-cod .hm5-nav-cta{border-radius:0;font-family:var(--cod-ui);font-size:17px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;background:linear-gradient(180deg,var(--acc),var(--acc-soft));color:var(--acc-ink)!important;
  clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,9px 100%,0 calc(100% - 9px))}
html.hm5-cod .hm5-menu{border-radius:0;background:var(--metal),#151a21;border:1px solid var(--edge-hi);box-shadow:0 24px 60px rgba(0,0,0,.7)}
html.hm5-cod .hm5-menu .hm5-door{border-radius:0;font-family:var(--cod-ui);font-size:17px;letter-spacing:.12em;text-transform:uppercase}
html.hm5-cod .hm5-mi{border-radius:0;font-family:var(--cod-ui);font-size:17px;letter-spacing:.08em;text-transform:uppercase}
html.hm5-cod .hm5-mi:hover{background:rgba(31,209,138,.1);box-shadow:inset 3px 0 0 var(--acc)}
html.hm5-cod .hm5-jump .jp-in,html.hm5-cod .hm5-msheet .ms-in{border-radius:0;background:var(--metal),#151a21;border:1px solid var(--edge-hi);clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px))}
html.hm5-cod .hm5-jump .jp-r{border-radius:0;font-family:var(--cod-ui);font-size:18px;letter-spacing:.04em}
html.hm5-cod .hm5-jump .jp-r.on,html.hm5-cod .hm5-jump .jp-r:hover{background:rgba(31,209,138,.1);box-shadow:inset 3px 0 0 var(--acc)}

/* ---- the side spine, the ticker, the phone bar, the footer ---- */
html.hm5-cod .hm5-side{background:linear-gradient(180deg,rgba(23,28,35,.95),rgba(11,14,18,.95));border-right:1px solid var(--edge)}
html.hm5-cod .hm5-side-title{font-family:var(--cod-ui);font-size:19px;letter-spacing:.1em;text-transform:uppercase}
html.hm5-cod .hm5-side .hm5-app,html.hm5-cod .hm5-side .hm5-app-l{font-family:var(--cod-ui)!important;font-size:17px;text-transform:uppercase!important;letter-spacing:.08em!important;font-weight:600}
html.hm5-cod .hm5-side .hm5-app{border-radius:0;position:relative;transition:background .2s,color .2s}
html.hm5-cod .hm5-side .hm5-app:hover{background:rgba(31,209,138,.08);box-shadow:inset 3px 0 0 var(--acc)}
html.hm5-cod .hm5-side .hm5-app.on{background:rgba(31,209,138,.12);box-shadow:inset 3px 0 0 var(--acc);color:#fff}
html.hm5-cod .hm5-side-tog{border-radius:0}
html.hm5-cod .hm5-tape{background:linear-gradient(180deg,#171c23,#0b0e12);border-top:1px solid var(--edge)}
html.hm5-cod .hm5-tape:before{font-family:var(--cod-ui);letter-spacing:.2em;color:var(--acc)}
html.hm5-cod .hm5-tape .tp-i{font-family:var(--cod-num);font-size:17px;letter-spacing:.03em}
html.hm5-cod .hm5-tabbar{background:linear-gradient(180deg,#171c23,#0b0e12);border-top:1px solid var(--edge)}
html.hm5-cod .hm5-tabbar a{font-family:var(--cod-ui);letter-spacing:.1em;text-transform:uppercase;font-weight:700}
html.hm5-cod .hm5-tabbar a.on{color:var(--acc)}
html.hm5-cod .hm5-foot-sub{border-radius:0;border-color:var(--edge);background:var(--metal)}
html.hm5-cod .hm5-foot-links a{font-family:var(--cod-ui);letter-spacing:.1em;text-transform:uppercase;font-size:17px}
html.hm5-cod .hm5-foot-links a:hover{color:var(--acc)}

/* ---- pop-ups: the site's own dialogs wear the same metal (hm5-dialog.js keeps its behavior) ---- */
html.hm5-cod .hm5-dlg{background:rgba(3,6,10,.72)}
html.hm5-cod .hm5-dlg-box{position:relative;border-radius:0;background:var(--metal),#151a21;border:1px solid var(--edge-hi);padding:22px 22px 18px;
  clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px))}
html.hm5-cod .hm5-dlg-box:before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:3px;background:var(--acc)}
html.hm5-cod .hm5-dlg-k{font-family:var(--cod-ui);font-size:15px;letter-spacing:.18em;color:var(--acc)}
html.hm5-cod .hm5-dlg-k.danger{color:#f2566a}
html.hm5-cod .hm5-dlg input{border-radius:0;background:rgba(0,0,0,.35);border-color:var(--edge-hi)}
html.hm5-cod .hm5-dlg input:focus{border-color:var(--acc)}
html.hm5-cod .hm5-dlg-b button{border-radius:0;font-family:var(--cod-ui);letter-spacing:.12em;text-transform:uppercase;min-width:104px;background:linear-gradient(180deg,#242b34,#171c23);
  clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,9px 100%,0 calc(100% - 9px))}
html.hm5-cod .hm5-dlg-b button.ok{background:var(--acc);border-color:var(--acc);color:var(--acc-ink)}
html.hm5-cod .hm5-dlg-b button.ok.danger{background:#f2566a;border-color:#f2566a;color:#fff}

/* ---- scrollbars that match the panels ---- */
html.hm5-cod ::-webkit-scrollbar{width:10px;height:10px}
html.hm5-cod ::-webkit-scrollbar-thumb{background:#2a313b;border:2px solid #0f1318;border-radius:6px}
html.hm5-cod ::-webkit-scrollbar-thumb:hover{background:#3a4452}
html.hm5-cod ::-webkit-scrollbar-track{background:transparent}
html.hm5-cod .hm5-tabs::-webkit-scrollbar,html.hm5-cod .hm5-side::-webkit-scrollbar{display:none}

/* ---- the course pages (start.html and its lessons) ---- */
html.hm5-cod :is(.ls-course,.ls-check,.ls-drill,.ls-note,.ls-tile){border-color:var(--edge)}
html.hm5-cod .ls-tile{border-radius:0;border:1px solid var(--edge);background-image:var(--metal)}
html.hm5-cod .ls-tile:hover{border-color:var(--acc)}
html.hm5-cod :is(.ls-title,.ls-h,.lesson-title,.ls-course h3){font-family:var(--cod-ui);text-transform:uppercase;letter-spacing:.04em}

/* ---- a spoken-word keyline under the main page title, the way a mission brief opens ---- */
html.hm5-cod :is(.hero,.hm5-hero,.pagehead,.ph) h1:after{content:"";display:block;width:84px;height:3px;margin-top:12px;background:linear-gradient(90deg,var(--acc),transparent)}

/* ---- phones: sixteen-pixel gutters, no sideways scroll, doors that fit ---- */
@media(max-width:700px){
  html.hm5-cod,html.hm5-cod body{overflow-x:hidden}
  html.hm5-cod h1{font-size:clamp(30px,9vw,42px)}
  html.hm5-cod .hm5-topnav .hm5-tabs>.hm5-door,html.hm5-cod .hm5-topnav .hm5-more-b{font-size:16px!important;letter-spacing:.07em!important;padding:0 9px!important;height:36px!important}
  html.hm5-cod .hm5-topnav .hm5-tabs>.hm5-door:before{inset:4px 0}
  html.hm5-cod :is(.card,.listcard,.board-card,.gm-card){--cut:9px}
}
@media(max-width:560px){ html.hm5-cod .hm5-topnav:after{width:90px} html.hm5-cod .hm5-search-ph{display:none} }

/* ---- people who asked for less motion get the look without the movement ---- */
@media (prefers-reduced-motion:reduce){
  html.hm5-cod .hm5-topnav:after,html.hm5-cod .hm5-topnav .hm5-tabs>.hm5-door{animation:none!important}
  html.hm5-cod .hm5-cod-art:before{transform:scale(1.06)!important;transition:none}
}
/* slow phones: keep the look, drop the overlays and motion */
html.hm5-cod.cod-lite:before,html.hm5-cod.cod-lite:after{display:none}
html.hm5-cod.cod-lite .hm5-cod-art:before{transform:scale(1.06)!important;will-change:auto}
html.hm5-cod.cod-lite .hm5-topnav:after{animation:none}

/* ---- THE TACTICAL EXTRAS (2026-11-05): the pieces the first pass left out ---- */
/* panel corner hairlines and the accent tab that slides in on the header */
html.hm5-cod :is(.card,.op,.num,.bchip){position:relative}
html.hm5-cod :is(.card,.op,.num,.bchip):before{content:"";position:absolute;right:0;top:0;width:var(--cut,12px);height:var(--cut,12px);pointer-events:none;z-index:1;background:linear-gradient(45deg,transparent calc(50% - 1px),var(--edge-hi) calc(50% - 1px),var(--edge-hi) calc(50% + 1px),transparent calc(50% + 1px))}
html.hm5-cod :is(.card,.op,.num,.bchip):after{content:"";position:absolute;left:0;bottom:0;width:var(--cut,12px);height:var(--cut,12px);pointer-events:none;z-index:1;background:linear-gradient(45deg,transparent calc(50% - 1px),var(--edge-hi) calc(50% - 1px),var(--edge-hi) calc(50% + 1px),transparent calc(50% + 1px))}
html.hm5-cod .card>.hd{position:relative}
html.hm5-cod .card>.hd:before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;background:var(--acc);transform:scaleY(.35);transform-origin:center;opacity:.55;transition:transform .3s var(--ease-o),opacity .3s}
html.hm5-cod .card:hover>.hd:before{transform:scaleY(1);opacity:1}
html.hm5-cod :is(.hd .step,.ap-kick){display:block;background:none;border:0;box-shadow:none;padding:0;border-radius:0;clip-path:none;position:static;font-family:var(--cod-ui);letter-spacing:.16em;font-weight:700;text-transform:uppercase;color:var(--acc);font-size:14px;line-height:1;margin:0 0 5px}
html.hm5-cod :is(.hd .step,.ap-kick):before{content:"";display:inline-block;width:9px;height:9px;margin-right:9px;background:var(--acc);clip-path:polygon(0 0,100% 50%,0 100%);vertical-align:-1px}
html.hm5-cod .card h2{font-family:var(--cod-ui);text-transform:uppercase;letter-spacing:.045em;font-weight:700;font-size:22px;margin:0}
html.hm5-cod .tag{display:inline-block;font:700 14px/1 var(--cod-ui);letter-spacing:.16em;text-transform:uppercase;padding:4px 7px;border:0;border-radius:4px;vertical-align:middle;margin-left:8px;background:rgba(255,255,255,.08);color:#aeb6c2;clip-path:none;box-shadow:none}
html.hm5-cod .tag.dkm{background:var(--acc);color:var(--acc-ink);font-weight:800;letter-spacing:.08em}html.hm5-cod .tag.sb{background:rgba(31,209,138,.16);color:#2fd26a}html.hm5-cod .tag.lab{background:rgba(255,255,255,.08);color:#aeb6c2}html.hm5-cod .tag.sz{background:rgba(120,160,255,.16);color:#9db8ff}
html.hm5-cod :is(.tag.amber,.tag.pz){background:rgba(255,159,28,.16);color:#ffb84d}
/* squared headshots with a cut corner, a little pop on hover */
html.hm5-cod .av{width:40px;height:40px;object-fit:cover;object-position:50% 18%;margin-right:11px;vertical-align:middle;border:1px solid var(--edge-hi);background:#0b0e12;border-radius:0;clip-path:polygon(0 0,calc(100% - 7px) 0,100% 7px,100% 100%,7px 100%,0 calc(100% - 7px));transition:transform .25s var(--ease-o),filter .25s}
html.hm5-cod tr:hover .av{transform:scale(1.12);filter:brightness(1.2) saturate(1.15)}
/* tables: condensed caps heads, a bar that slides in on the row under the pointer */
html.hm5-cod .tbl th{font-family:var(--cod-ui);letter-spacing:.14em;text-transform:uppercase;font-weight:700}
html.hm5-cod .tbl tbody tr{transition:background .2s}html.hm5-cod .tbl tbody tr:nth-child(even){background:rgba(255,255,255,.018)}html.hm5-cod .tbl tbody tr:hover td{background:rgba(255,255,255,.035)}
html.hm5-cod .tbl td:first-child{transition:box-shadow .25s var(--ease-o)}html.hm5-cod .tbl tbody tr:hover td:first-child{box-shadow:inset 3px 0 0 var(--acc)}
/* metal number tiles */
html.hm5-cod .num{--cut:9px;background:var(--metal);border:1px solid var(--edge);border-radius:0;padding:10px 12px;clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,9px 100%,0 calc(100% - 9px));box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
html.hm5-cod .num small{display:block;font:700 14px var(--cod-ui);letter-spacing:.16em;text-transform:uppercase;color:#98a3b2}
html.hm5-cod .num b{display:block;font:700 25px var(--cod-num);letter-spacing:.02em;margin-top:3px}
/* entrance: panels rise in once when the page opens */
.cod-boot :is(.card,.op,.num,.bchip){animation:codRise .6s var(--ease-o) both}
.cod-boot :is(.card,.num,.bchip):nth-child(2){animation-delay:.06s}.cod-boot :is(.card,.num,.bchip):nth-child(3){animation-delay:.12s}.cod-boot :is(.card,.num,.bchip):nth-child(4){animation-delay:.18s}.cod-boot :is(.card,.num,.bchip):nth-child(n+5){animation-delay:.24s}
@keyframes codRise{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
/* 3D depth: tiles lean toward the pointer (hm5-cod.js sets --rx/--ry), with a glare that follows */
.tilt3d{transform:perspective(780px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0);transition:transform .35s var(--ease-o);will-change:transform}
.tilt3d.live{transition:transform .06s linear}
.tilt3d .glare{position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(260px circle at var(--gx,50%) var(--gy,30%),rgba(255,255,255,.16),transparent 62%);transition:opacity .25s}
.tilt3d.live .glare{opacity:1}
/* the operator profile: big art, callsign, rank chevrons, skewed stat bars, loadout chips */
html.hm5-cod .op{display:grid;grid-template-columns:minmax(190px,270px) 1fr;gap:0;margin:0 0 16px;padding:0;overflow:hidden;background:var(--metal);border:1px solid var(--edge);clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px))}
html.hm5-cod .op-art{position:relative;min-height:300px;background:#0b0e12;overflow:hidden;border-right:1px solid var(--edge)}
html.hm5-cod .op-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%;transform:scale(1.04);transition:transform .8s var(--ease-o)}
html.hm5-cod .op:hover .op-art img{transform:scale(1.1)}
html.hm5-cod .op-art:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 55%,rgba(8,10,13,.9)),repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px)}
html.hm5-cod .op-art .ph{position:absolute;inset:0;display:grid;place-items:center;color:var(--edge-hi);font:700 54px var(--cod-num)}
html.hm5-cod .op-tag{position:absolute;left:0;bottom:0;right:0;z-index:2;padding:10px 14px;font:700 14px var(--cod-ui);letter-spacing:.2em;text-transform:uppercase;color:var(--acc)}
html.hm5-cod .op-body{padding:20px 24px 18px;min-width:0;display:flex;flex-direction:column;gap:14px;justify-content:center}
html.hm5-cod .op-top{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center}
html.hm5-cod .op-chip{font:700 14px/1 var(--cod-ui);letter-spacing:.16em;text-transform:uppercase;padding:6px 10px;border:1px solid var(--edge-hi);color:#c9d2de;background:rgba(255,255,255,.03);clip-path:polygon(0 0,calc(100% - 6px) 0,100% 6px,100% 100%,6px 100%,0 calc(100% - 6px))}
html.hm5-cod .op-chip.acc{color:#06130d;background:var(--acc);border-color:transparent}
html.hm5-cod .op-chip.pz{color:#ffb84d;border-color:rgba(255,159,28,.5)}
html.hm5-cod .op-name{font:700 clamp(34px,6vw,54px)/1 var(--cod-ui);text-transform:uppercase;letter-spacing:.04em;margin:0;text-shadow:0 2px 0 rgba(0,0,0,.6),0 0 30px var(--acc-glow,rgba(31,209,138,.35))}
html.hm5-cod .op-rank{display:flex;align-items:center;gap:12px;font:700 16px var(--cod-ui);letter-spacing:.18em;text-transform:uppercase;color:#aeb8c6}
html.hm5-cod .chev{display:inline-flex;gap:2px}html.hm5-cod .chev i{width:14px;height:14px;background:var(--edge-hi);clip-path:polygon(0 100%,50% 40%,100% 100%,100% 70%,50% 10%,0 70%)}html.hm5-cod .chev i.on{background:var(--acc);filter:drop-shadow(0 0 5px var(--acc-glow,rgba(31,209,138,.5)))}
html.hm5-cod .op-bars{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 26px}
html.hm5-cod .op-bar{display:grid;grid-template-columns:104px 1fr;align-items:center;gap:10px;font:700 14.5px var(--cod-ui);letter-spacing:.16em;text-transform:uppercase;color:#98a3b2}
html.hm5-cod .op-seg{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}html.hm5-cod .op-seg i{height:9px;background:#1a2028;border:1px solid #2a323d;transform:skewX(-20deg)}
html.hm5-cod .op-seg i.on{background:var(--acc);border-color:transparent;box-shadow:0 0 8px -1px var(--acc-glow,rgba(31,209,138,.5))}
html.hm5-cod .op-bar.risk .op-seg i.on{background:#f2566a;box-shadow:0 0 8px -1px rgba(242,86,106,.5)}
html.hm5-cod .op.enter .op-seg i.on{animation:codSeg .5s var(--ease-o) both;animation-delay:calc(.25s + var(--n)*.07s)}
@keyframes codSeg{from{transform:skewX(-20deg) scaleX(0);opacity:0}to{transform:skewX(-20deg) scaleX(1);opacity:1}}
html.hm5-cod .op.enter .op-art img{animation:codZoom 1.1s var(--ease-o) both}@keyframes codZoom{from{transform:scale(1.25);filter:brightness(.4) saturate(.6)}to{transform:scale(1.04);filter:none}}
html.hm5-cod .op.enter{animation:codRise .6s var(--ease-o) both}
html.hm5-cod .op-load{display:flex;flex-wrap:wrap;gap:8px}html.hm5-cod .op-load span{font:600 15px/1 var(--cod-ui);letter-spacing:.1em;text-transform:uppercase;padding:7px 10px;border-left:2px solid var(--acc);background:rgba(255,255,255,.04);color:#d7dee8}
html.hm5-cod .op-load b{color:#fff;margin-left:6px}
@media(max-width:700px){html.hm5-cod .op{grid-template-columns:1fr}html.hm5-cod .op-art{min-height:240px;border-right:0;border-bottom:1px solid var(--edge)}html.hm5-cod .op-bars{grid-template-columns:1fr}html.hm5-cod .op-body{padding:16px}}
/* a mission-brief line under a page title: typed out by hm5-cod.js */
html.hm5-cod .brief{font:500 18px/1.5 var(--cod-ui);letter-spacing:.04em;color:#c9d2de;min-height:1.5em}html.hm5-cod .brief:after{content:"▌";color:var(--acc);animation:codBlink 1s steps(2) infinite}@keyframes codBlink{50%{opacity:0}}
html.hm5-cod .brief.done:after{content:""}
@media(prefers-reduced-motion:reduce){.cod-boot *{animation:none!important}.tilt3d{transform:none!important}}

/* the operator carousel: big chamfered cards, snap scrolling, the chosen one lit */
.ap-car{position:relative;margin:8px 0 4px}
.ap-car .track{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:10px 4px 14px;scrollbar-width:none;-webkit-overflow-scrolling:touch}.ap-car .track::-webkit-scrollbar{display:none}
.ap-car .oc{flex:0 0 164px;scroll-snap-align:center;position:relative;cursor:pointer;background:var(--metal,#151a21);border:1px solid var(--edge,#3a4553);clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));transition:transform .3s var(--ease-o,ease),border-color .25s,box-shadow .25s;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 16px 30px -16px rgba(0,0,0,.9)}
.ap-car .oc .art{position:relative;height:190px;overflow:hidden;background:#0b0e12}.ap-car .oc .art img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;transform:scale(1.04);transition:transform .6s var(--ease-o,ease)}
.ap-car .oc .art:after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,transparent 55%,rgba(8,10,13,.92)),repeating-linear-gradient(0deg,rgba(0,0,0,.14) 0 1px,transparent 1px 3px)}
.ap-car .oc:hover .art img{transform:scale(1.12)}.ap-car .oc:hover{transform:translateY(-4px);border-color:var(--edge-hi,#5c6d82)}
.ap-car .oc .nm{position:absolute;left:0;right:0;bottom:0;padding:10px 12px;z-index:2;font:700 17px/1.1 var(--cod-ui,inherit);letter-spacing:.06em;text-transform:uppercase;color:#fff;text-shadow:0 1px 0 #000}
.ap-car .oc .nm small{display:block;font-size:14px;letter-spacing:.2em;color:var(--acc,#1fd18a);margin-top:4px}
.ap-car .oc .ft{padding:8px 12px 10px;font:600 14px/1.3 var(--cod-ui,inherit);letter-spacing:.06em;text-transform:uppercase;color:#aab5c3;display:flex;justify-content:space-between;gap:6px}
.ap-car .oc.cur{border-color:var(--acc,#1fd18a);box-shadow:0 0 0 2px var(--acc,#1fd18a),0 0 34px -6px var(--acc-glow,rgba(31,209,138,.5)),inset 0 1px 0 rgba(255,255,255,.15);transform:translateY(-6px) scale(1.03)}
.ap-car .oc.cur .nm small:before{content:"✓ ";}
.ap-car .arr{position:absolute;top:50%;transform:translateY(-50%);width:36px;height:44px;display:grid;place-items:center;background:linear-gradient(180deg,#232a33,#12161c);border:1px solid var(--edge-hi,#5c6d82);color:#fff;cursor:pointer;z-index:3;clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px))}.ap-car .arr.l{left:-6px}.ap-car .arr.r{right:-6px}
.ap-car .arr:hover{border-color:var(--acc,#1fd18a);color:var(--acc,#1fd18a)}


/* ===== THE MATCH (2026-11-05 night, owner: "make hm5 the same theme as the other desk, exact same, just the style and the call-of-duty theme") =====
   The values below are the shared look restated one for one: panels are translucent steel over the battle art (a light along the top edge, cut corners, a hairline),
   tiles are flat gunmetal, one veil over the art, one vignette. Nothing here changes what a page shows or does. */
html.hm5-cod :is(.card,.listcard,.board-card,.gm-card,.pv-w,.pv-path,.bk-tile,.arena,.ls-course,.ls-check,.ls-drill,.ls-note,.acct-bar,.form-section){
  --cut:14px;background-color:transparent;background-image:linear-gradient(180deg,rgba(255,255,255,.035),transparent 18%);
  border:1px solid var(--edge);border-radius:0;box-shadow:0 12px 34px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.035);
  clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)))}
html.hm5-cod :is(.num,.wcard,.bchip,.op){--cut:9px;background:var(--metal);border:1px solid var(--edge);border-radius:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.07),inset 0 -1px 0 rgba(0,0,0,.6)}
html.hm5-cod .op{--cut:14px}
html.hm5-cod :is(input,select,textarea):not([type=checkbox]):not([type=radio]):not([type=range]){background:#0b0e12!important;border:1px solid var(--edge)!important;border-radius:0!important;color:#eef2f7!important;box-shadow:inset 0 2px 6px rgba(0,0,0,.6)}
html.hm5-cod :is(input,select,textarea):not([type=checkbox]):not([type=radio]):not([type=range]):focus{border-color:var(--acc)!important;box-shadow:inset 0 2px 6px rgba(0,0,0,.6),0 0 0 1px var(--acc),0 0 14px -2px var(--acc-glow)}
html.hm5-cod .go,html.hm5-cod .hm5-nav-cta{background:linear-gradient(180deg,var(--acc),var(--acc-soft))}

/* Note rows: the label is plain text beside the line, never a stretched box */
html.hm5-cod .mnote-body .ln>.tag,html.hm5-cod .ln>.tag{display:block!important;align-self:flex-start!important;background:none!important;padding:3px 0 0!important;margin:0!important;border-radius:0!important;font:700 14px/1.4 var(--cod-ui)!important;letter-spacing:.14em!important;color:var(--acc)!important;opacity:.9}

/* THE RAIL (folded page menu): steel tiles, green line icons, labels that wrap whole. No pastel app icons. */
html.hm5-cod.hm5-rail{--hm5-side-w:78px}
html.hm5-cod.hm5-rail .hm5-side{padding:8px 3px}
html.hm5-cod.hm5-rail .hm5-side .hm5-sptile,html.hm5-cod.hm5-rail .hm5-side-foot .hm5-app .hm5-tile,html.hm5-cod.hm5-side-min .hm5-side .hm5-tile,html.hm5-cod .hm5-side .hm5-app .hm5-tile{width:32px!important;height:32px!important;border-radius:2px!important;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.015))!important;border:1px solid var(--edge,#323b47)!important;color:var(--acc,#1fd18a)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.07)!important;clip-path:polygon(0 0,calc(100% - 6px) 0,100% 6px,100% 100%,6px 100%,0 calc(100% - 6px))}
html.hm5-cod.hm5-rail .hm5-sp.on .hm5-sptile,html.hm5-cod .hm5-side .hm5-app.on .hm5-tile{background:var(--acc,#1fd18a)!important;border-color:var(--acc,#1fd18a)!important;color:var(--acc-ink,#06130d)!important;box-shadow:0 0 12px var(--acc-glow,rgba(31,209,138,.4))!important}
html.hm5-cod.hm5-rail .hm5-sp:hover .hm5-sptile,html.hm5-cod .hm5-side .hm5-app:hover .hm5-tile{border-color:var(--acc,#1fd18a)!important}
html.hm5-cod.hm5-rail .hm5-sp>span:not(.hm5-tile),html.hm5-cod.hm5-rail .hm5-side-foot .hm5-app-l{font:700 14px/1.15 var(--cod-ui,inherit)!important;letter-spacing:.07em!important;text-transform:uppercase!important;max-width:72px!important;-webkit-line-clamp:3!important;overflow:visible!important;text-overflow:clip!important;white-space:normal!important;overflow-wrap:anywhere;color:var(--hm5-dim,#9aa4b2)}
html.hm5-cod.hm5-rail .hm5-sp.on>span:not(.hm5-tile){color:var(--acc,#1fd18a)}
html.hm5-cod.hm5-rail .hm5-sp .cnt{right:4px;top:2px;font:700 14px var(--cod-num,inherit);color:var(--acc,#1fd18a)}
html.hm5-cod.hm5-rail .hm5-sp,html.hm5-cod.hm5-rail .hm5-side-foot .hm5-app{border-radius:2px}

/* ===== THE HUD LAYER (2026-11-05 night, owner: "more like the game and high tech") =====
   one tactical body face, angular readouts, glowing numbers, warning plates, slanted section markers and a viewfinder frame.
   Pure CSS: no page logic changes. */
html.hm5-cod{--cod-body:'Barlow','Rajdhani','Arial Narrow',Inter,-apple-system,sans-serif;--font:var(--cod-body);--font-sans:var(--cod-body);--font-ui:var(--cod-body);--font-display:var(--cod-ui);--font-mono:var(--cod-body);--font-micro:var(--cod-body);--font-figure:var(--cod-body)}
html.hm5-cod body{font-family:var(--cod-body);font-weight:500;letter-spacing:.004em}
html.hm5-cod :is(input,select,textarea,button){font-family:inherit}

/* viewfinder frame: four corner brackets on the screen, behind the vignette, never clickable */
html.hm5-cod body::after{content:"";position:fixed;inset:10px;z-index:58;pointer-events:none;
  --b:rgba(31,209,138,.42);
  background:
    linear-gradient(var(--b),var(--b)) top left/26px 2px no-repeat,linear-gradient(var(--b),var(--b)) top left/2px 26px no-repeat,
    linear-gradient(var(--b),var(--b)) top right/26px 2px no-repeat,linear-gradient(var(--b),var(--b)) top right/2px 26px no-repeat,
    linear-gradient(var(--b),var(--b)) bottom left/26px 2px no-repeat,linear-gradient(var(--b),var(--b)) bottom left/2px 26px no-repeat,
    linear-gradient(var(--b),var(--b)) bottom right/26px 2px no-repeat,linear-gradient(var(--b),var(--b)) bottom right/2px 26px no-repeat}
@media(max-width:959px){html.hm5-cod body::after{display:none}}

/* small readouts lose every round corner; the tag-like ones get a cut corner */
html.hm5-cod :is(.tp-i,.act,.tk-kind,.az-k,.ps,.asof,.c-dte,.c-cost,.c-stop,.c-action,.tagb,.tdtag,.sa-count,.conf-count,.mktwm,.sub,.hm5-beta,.track,.fill,.pct,.rlrow):not(.hm5-term){border-radius:0!important}
html.hm5-cod :is(.tp-i,.act,.tk-kind,.az-k,.ps,.tagb,.tdtag,.sa-count,.conf-count,.shead .sub){clip-path:polygon(0 0,calc(100% - 5px) 0,100% 5px,100% 100%,5px 100%,0 calc(100% - 5px));font-family:var(--cod-ui);letter-spacing:.07em;font-weight:700}
html.hm5-cod :is(.tp-i,.act,.tk-kind,.az-k,.ps,.tagb,.tdtag){text-transform:uppercase}

/* numbers glow the way a scoreboard does */
html.hm5-cod :is(.up,.pos,.gain,.tp-i.up,.pct.up,.act.buy){text-shadow:0 0 9px rgba(36,214,106,.38)}
html.hm5-cod :is(.dn,.down,.neg,.loss,.tp-i.dn,.pct.down,.act.sell){text-shadow:0 0 9px rgba(255,77,94,.38)}
html.hm5-cod :is(.num,.big,.tb-n,[class*="big-"]){font-variant-numeric:tabular-nums;letter-spacing:.015em}

/* page group titles and section headers: a slanted green marker, caps, a segmented rule */
html.hm5-cod .grp-head h1{font-family:var(--cod-ui);text-transform:uppercase;letter-spacing:.07em;font-weight:700;display:flex;align-items:center;gap:.4em}
html.hm5-cod .grp-head h1::before{content:"";flex:none;width:.28em;height:.86em;background:var(--acc);transform:skewX(-18deg);box-shadow:0 0 14px var(--acc-glow)}
html.hm5-cod .grp-head .grp-desc{font-family:var(--cod-ui);font-size:19px;letter-spacing:.03em;border-left:2px solid var(--edge-hi);padding-left:12px;margin-top:8px}
html.hm5-cod .shead h2::before{content:"";display:inline-block;width:.22em;height:.8em;background:var(--acc);transform:skewX(-18deg);margin-right:.38em;vertical-align:-.04em;box-shadow:0 0 10px var(--acc-glow)}
html.hm5-cod .shead{background:linear-gradient(90deg,var(--acc) 0 56px,var(--edge) 56px 100%) left bottom/100% 1px no-repeat;padding-bottom:12px}

/* warning plates (corporate actions, stay-away lists): hazard edge, cut corners, an octagon sign, a slow pulse */
html.hm5-cod .stayaway{border-radius:0!important;border:1px solid rgba(255,77,94,.45)!important;border-left:6px solid #ff4d5e!important;
  background:repeating-linear-gradient(135deg,rgba(255,77,94,.06) 0 10px,transparent 10px 20px),linear-gradient(150deg,rgba(255,77,94,.13),rgba(15,19,24,.9) 72%)!important;
  clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px))}
html.hm5-cod .sa-badge{border-radius:0!important;border:0!important;background:#ff4d5e!important;color:#2a0206!important;clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%);box-shadow:none!important;animation:hm5-warn 2.2s ease-in-out infinite}
@keyframes hm5-warn{0%,100%{filter:drop-shadow(0 0 2px rgba(255,77,94,.4))}50%{filter:drop-shadow(0 0 9px rgba(255,77,94,.95))}}
html.hm5-cod .sa-title{font-family:var(--cod-ui)!important;font-size:21px!important;letter-spacing:.1em!important}
html.hm5-cod .sa-subtitle{font-size:18px}

/* empty states and hints: a tactical dashed frame with a status dot instead of a soft box */
html.hm5-cod .wlempty{border-radius:0!important;border:1px dashed var(--edge-hi)!important;background:rgba(0,0,0,.28)!important;font-family:var(--cod-ui);letter-spacing:.04em;font-size:18px}

/* fields: squared, a green line along the bottom like a terminal prompt */
html.hm5-cod :is(input[type=text],input[type=search],input[type=number],input[type=email],input[type=password],input:not([type]),select,textarea){border-radius:0!important;border:1px solid var(--edge)!important;border-bottom:2px solid var(--acc-soft)!important;background:rgba(0,0,0,.38)!important;font-family:var(--cod-ui);font-size:18px;letter-spacing:.03em}
html.hm5-cod :is(input,select,textarea):focus{outline:none!important;border-bottom-color:var(--acc)!important;box-shadow:0 6px 14px -8px var(--acc-glow)}

@media(prefers-reduced-motion:reduce){html.hm5-cod .sa-badge{animation:none}}

/* inline pieces (bold, abbreviations, small print, glossary words, stamps) follow the page's tactical face; zero extra weight so every labeled class above still wins */
html.hm5-cod :where(b,strong,abbr,small,em,a,span,.hm5-term,.pk-sep,.tb-waitword,.tb-liveword,.tk-stamp,.agn,.tb-n,.sw-grade):where(:not(.ti):not([class*="ti-"])){font-family:inherit}

/* the Tape's own font list (tape.html names Inter on these) answers to the tactical faces */
html.hm5-cod :is(.db-tab,.dp-t b,.dp-t i,.tk-peek,.tk-spot b,.tp-i b,.tp-i span,.tk-band .tk-flags .tkf-num,.tk-band .tk-flags .sw-grade,.spec-cell,.spec-cell i,.spec-cell b,.tk-rl,.why,.pt-note){font-family:var(--cod-body)}
html.hm5-cod :is(.tk-tick,.tk-ti){font-family:var(--cod-ui);font-weight:700;letter-spacing:.03em}

/* anything marked hidden stays hidden, even when the page's own style gives it a display (the Monitor's empty "Cancel orders" bar showed with nothing to cancel) */
html.hm5-cod [hidden]:not(dialog){display:none!important}

/* nothing may push the page sideways, not even for a moment while something slides in (a load-time spike of up to 270px was measured on every page) */
html.hm5-cod,html.hm5-cod body{overflow-x:clip}

/* the hide-away menu is a solid panel while it floats over the page */
@media(min-width:960px){
  html.hm5-cod.hm5-side-hover .hm5-side{background:linear-gradient(180deg,#131a22,#0b0f14)!important;border-right:1px solid var(--edge-hi,#4a5666)!important;padding:16px 12px 12px}
  html.hm5-cod.hm5-side-hover .hm5-side-edge::before{background:linear-gradient(180deg,transparent,var(--acc,#1fd18a) 22%,var(--acc,#1fd18a) 78%,transparent);box-shadow:0 0 12px var(--acc-glow,rgba(31,209,138,.4))}
}

/* ===== THE FOUNDRY (2026-11-06, owner: "more video game, Call of Duty, industrial metal like tanks and jets, that toughness,
   digital metal and interactive, on every page's menu, tabs and buttons") =====
   Brushed steel plates with a beveled edge, riveted corners, lit indicators that glow when a thing is on, keys that press down.
   Pure CSS. Colors of existing buttons stay; the metal goes around them. */
html.hm5-cod{
  --plate:linear-gradient(180deg,#323c4a 0%,#232b36 46%,#161b23 100%);
  --plate-on:linear-gradient(180deg,#475a70 0%,#2b3846 46%,#1a222c 100%);
  --brush:repeating-linear-gradient(90deg,rgba(255,255,255,.032) 0 1px,transparent 1px 4px);
  --bevel:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -2px 0 rgba(0,0,0,.62),inset 1px 0 0 rgba(255,255,255,.07),inset -1px 0 0 rgba(0,0,0,.5);
  --drop:0 2px 0 rgba(0,0,0,.7),0 7px 14px -7px rgba(0,0,0,.85);
  --hazard:repeating-linear-gradient(135deg,#e8a900 0 7px,#12161b 7px 14px);
  --ch:9px;
  --chamf:polygon(0 0,calc(100% - var(--ch)) 0,100% var(--ch),100% 100%,var(--ch) 100%,0 calc(100% - var(--ch)));
  --rivet:radial-gradient(circle,#a9b4c2 0 1.2px,#222a33 1.6px 2.6px,transparent 2.9px)
}

/* ---- the side menu: an armor plate down the edge ---- */
html.hm5-cod .hm5-side{background:var(--brush),linear-gradient(180deg,#1e2630 0%,#11161d 52%,#0b0e13 100%)!important;border-right:0!important;
  box-shadow:inset -1px 0 0 #46515f,inset -3px 0 0 #090c10,inset -4px 0 0 #2b3440!important;padding:0 18px 12px 10px!important;gap:0}
html.hm5-cod .hm5-side-title{position:relative;margin:0 -8px 10px -10px;padding:12px 14px 17px 16px;background:var(--brush),linear-gradient(180deg,#34404f,#1b222c);
  box-shadow:var(--bevel),0 3px 0 rgba(0,0,0,.7);font-size:19px;letter-spacing:.14em;text-shadow:0 0 14px var(--acc-glow);clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%)}
html.hm5-cod .hm5-side-title::after{content:"";position:absolute;left:0;right:14px;bottom:0;height:6px;background:var(--hazard);opacity:.9}
html.hm5-cod .hm5-side-title::before{content:"";position:absolute;right:30px;top:8px;width:5px;height:5px;border-radius:50%;background:var(--acc);box-shadow:0 0 8px var(--acc),0 0 2px #fff inset;animation:hm5Led 2.4s ease-in-out infinite}
@keyframes hm5Led{0%,100%{opacity:.45}50%{opacity:1}}
html.hm5-cod .hm5-side-k{font-family:var(--cod-ui);font-size:14px;letter-spacing:.24em;color:#7e8998;margin:4px 0 8px 4px}
html.hm5-cod .hm5-spine{display:flex;flex-direction:column;gap:5px}
html.hm5-cod .hm5-sp{position:relative;display:flex!important;align-items:center;gap:11px;min-height:38px;padding:6px 12px 6px 12px!important;margin:0!important;font-family:var(--cod-ui)!important;font-size:17.5px!important;
  letter-spacing:.08em!important;line-height:1.1;text-transform:uppercase!important;font-weight:700!important;color:#b3bcc9!important;background:var(--brush),var(--plate)!important;border-radius:0!important;
  box-shadow:var(--bevel),var(--drop)!important;clip-path:var(--chamf);transition:transform .12s,filter .12s,color .12s,box-shadow .12s}
html.hm5-cod .hm5-sp>i{flex:none;width:6px!important;height:18px!important;border-radius:1px!important;background:#323b47!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 -1px 0 rgba(0,0,0,.6)!important;transition:background .15s,box-shadow .15s}
html.hm5-cod .hm5-sp:hover{transform:translateX(4px);filter:brightness(1.22);color:#fff!important;box-shadow:var(--bevel),var(--drop),inset 4px 0 0 var(--acc)!important}
html.hm5-cod .hm5-sp:hover>i{background:var(--acc)!important;box-shadow:0 0 10px var(--acc)!important}
html.hm5-cod .hm5-sp:active{transform:translateX(4px) translateY(2px);filter:brightness(.92)}
html.hm5-cod .hm5-sp.on{background:var(--brush),var(--plate-on)!important;color:#fff!important;box-shadow:var(--bevel),var(--drop),inset 0 0 22px -8px var(--acc-glow),inset 4px 0 0 var(--acc)!important}
html.hm5-cod .hm5-sp.on>i{background:var(--acc)!important;box-shadow:0 0 12px var(--acc),0 0 3px #fff inset!important}
html.hm5-cod .hm5-sp .cnt{margin-left:auto;font-family:var(--cod-num);font-size:17px;letter-spacing:.04em;color:var(--acc);padding:1px 7px;background:#0a0d11;box-shadow:inset 0 1px 3px #000,inset 0 0 0 1px #3a4553;min-width:26px;text-align:center}
html.hm5-cod .hm5-sub{margin:4px 0 6px 16px!important;border-left:2px solid #323c49!important;gap:0}
html.hm5-cod .hm5-sk{position:relative;font-family:var(--cod-ui)!important;font-size:16px!important;letter-spacing:.08em!important;text-transform:uppercase!important;font-weight:600!important;color:#98a3b1!important;padding:5px 10px 5px 14px!important;border-radius:0!important;transition:background .12s,color .12s,box-shadow .12s,transform .12s}
html.hm5-cod .hm5-sk:hover{background:linear-gradient(90deg,rgba(31,209,138,.16),transparent)!important;color:#fff!important;box-shadow:inset 3px 0 0 var(--acc)!important;transform:translateX(2px)}
html.hm5-cod .hm5-side-foot{margin-top:auto;padding-top:12px;border-top:2px solid #0a0d11!important;box-shadow:0 -1px 0 #2f3945;gap:7px}
html.hm5-cod .hm5-side .hm5-app{position:relative;display:flex!important;align-items:center;gap:11px;padding:5px 12px 5px 7px!important;font-size:16px!important;margin:0!important;background:var(--brush),var(--plate)!important;box-shadow:var(--bevel),var(--drop)!important;
  clip-path:var(--chamf);border:0!important;color:#c3cbd7!important;transition:transform .12s,filter .12s,box-shadow .12s}
html.hm5-cod .hm5-side .hm5-app .hm5-tile{background:#0b0e12!important;box-shadow:inset 0 2px 5px #000,0 0 0 1px #3b4755!important;border-radius:0!important}
html.hm5-cod .hm5-side .hm5-app:hover{transform:translateX(3px);filter:brightness(1.22);color:#fff!important;box-shadow:var(--bevel),var(--drop),inset 4px 0 0 var(--acc)!important}
html.hm5-cod .hm5-side .hm5-app:active{transform:translateX(3px) translateY(2px);filter:brightness(.92)}
html.hm5-cod .hm5-side .hm5-app.on{background:var(--brush),var(--plate-on)!important;box-shadow:var(--bevel),var(--drop),inset 4px 0 0 var(--acc)!important}
html.hm5-cod .hm5-side-tog{box-shadow:var(--bevel),0 2px 0 #000,0 0 14px -4px var(--acc-glow)!important}

/* ---- the door bar across the top: keys on a rail, the lit one glows underneath ---- */
html.hm5-cod .hm5-topnav{background:var(--brush),linear-gradient(180deg,#232c37,#11161d)!important;border-bottom:2px solid #07090c;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 1px 0 #3a4552,0 12px 28px -12px #000!important}
html.hm5-cod .hm5-topnav .hm5-tabs>.hm5-door:before,html.hm5-cod .hm5-topnav .hm5-more-b:before{border-left:0;background:var(--plate);box-shadow:var(--bevel)}
html.hm5-cod .hm5-topnav .hm5-tabs>.hm5-door.on,html.hm5-cod .hm5-topnav .hm5-more-b.on{box-shadow:inset 0 -4px 0 var(--acc),0 6px 14px -8px var(--acc)!important}
html.hm5-cod .hm5-topnav .hm5-tabs>.hm5-door.on:before,html.hm5-cod .hm5-topnav .hm5-more-b.on:before{background:var(--plate-on);opacity:1}

/* ---- keys: every button is a plate with a beveled edge, a lit rim on hover and a press ---- */
html.hm5-cod :is(.btn,.go,.next,.ls-btn,.dr-send,.gm-wgo,.gm-wcalm,.pl-go,.tr-go,.tr-off,.hm5-take-go,.hm5-take-cancel,.tk-take,.tk-post,.tk-btn,.ap-btn,.ap-copy,.lv-test,.cta,.hm5-jump-top,.hm5-acct-b,.help-btn){
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -3px 0 rgba(0,0,0,.42),inset 0 0 0 1px rgba(0,0,0,.4),0 2px 0 rgba(0,0,0,.75)!important;transition:transform .1s,filter .12s,box-shadow .12s}
html.hm5-cod :is(.btn,.go,.next,.ls-btn,.dr-send,.gm-wgo,.gm-wcalm,.pl-go,.tr-go,.tr-off,.hm5-take-go,.hm5-take-cancel,.tk-take,.tk-post,.tk-btn,.ap-btn,.ap-copy,.lv-test,.cta,.hm5-jump-top,.hm5-acct-b,.help-btn):not(:disabled):hover{
  filter:brightness(1.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.34),inset 0 -3px 0 rgba(0,0,0,.42),inset 0 0 0 1px rgba(0,0,0,.4),0 2px 0 rgba(0,0,0,.75),0 0 16px -2px var(--acc-glow)!important}
html.hm5-cod :is(.btn,.go,.next,.ls-btn,.dr-send,.gm-wgo,.gm-wcalm,.pl-go,.tr-go,.tr-off,.hm5-take-go,.hm5-take-cancel,.tk-take,.tk-post,.tk-btn,.ap-btn,.ap-copy,.lv-test,.cta,.hm5-jump-top,.hm5-acct-b,.help-btn):not(:disabled):active{
  transform:translateY(2px);filter:brightness(.94);box-shadow:inset 0 2px 5px rgba(0,0,0,.6),inset 0 0 0 1px rgba(0,0,0,.45)!important}

/* ---- tabs and toggles: dark keys; the one that is on is lit, with an LED bar along its foot ---- */
html.hm5-cod :is(.tf,.tb-tab,.nav-tab,.ptab,.seg button,.hm5-bpill,.ap-tab,.apebar button){position:relative;background:var(--brush),var(--plate)!important;border-radius:0!important;
  box-shadow:var(--bevel),0 2px 0 rgba(0,0,0,.65)!important;clip-path:polygon(0 0,calc(100% - 7px) 0,100% 7px,100% 100%,7px 100%,0 calc(100% - 7px));transition:transform .1s,filter .12s,box-shadow .12s}
html.hm5-cod :is(.tf,.tb-tab,.nav-tab,.ptab,.seg button,.hm5-bpill,.ap-tab,.apebar button):not(.on):hover{filter:brightness(1.25);box-shadow:var(--bevel),0 2px 0 rgba(0,0,0,.65),inset 0 -3px 0 rgba(31,209,138,.55)!important}
html.hm5-cod :is(.tf,.tb-tab,.nav-tab,.ptab,.seg button,.hm5-bpill,.ap-tab,.apebar button):active{transform:translateY(2px);box-shadow:inset 0 2px 5px rgba(0,0,0,.6)!important}
html.hm5-cod :is(.tf,.tb-tab,.nav-tab,.ptab,.seg button,.hm5-bpill,.ap-tab,.apebar button):is(.on,.cur,.active,[aria-selected=true],[aria-pressed=true]){background:var(--brush),var(--plate-on)!important;color:#fff;
  box-shadow:var(--bevel),0 2px 0 rgba(0,0,0,.65),inset 0 -4px 0 var(--acc),0 0 16px -4px var(--acc-glow)!important}

/* ---- board headers: a plate with a hazard end cap, the same on every page ---- */
html.hm5-cod .shead{position:relative;padding:12px 16px 12px 18px;background:var(--brush),linear-gradient(180deg,#2a3340,#171c24)!important;border:1px solid #3a4553;
  box-shadow:var(--bevel),var(--drop);clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px))}
html.hm5-cod .shead::after{content:"";position:absolute;left:0;top:0;bottom:0;width:7px;background:var(--hazard);opacity:.9}
html.hm5-cod .card>.hd,html.hm5-cod .listcard>.hd,html.hm5-cod .board-card>.hd{background:var(--brush),linear-gradient(180deg,#2a3340,#171c24);box-shadow:var(--bevel);border-bottom:2px solid #0a0d11}
html.hm5-cod :is(.card,.listcard,.board-card,.gm-card,.bk-tile,.arena,.pv-w){border-color:#3e4958;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 -3px 0 rgba(0,0,0,.5),inset 0 0 0 1px rgba(0,0,0,.45),0 8px 18px -10px rgba(0,0,0,.8)!important}

@media(prefers-reduced-motion:reduce){html.hm5-cod .hm5-side-title::before{animation:none}}

/* ---- the rail of keys under the doors: each page a plate with a lamp, the one you are on lit ---- */
@media(min-width:960px){
  html.hm5-cod .hm5-nav-rail{background:var(--brush),linear-gradient(180deg,#171d25,#0d1117)!important;border-top:1px solid #3a4553!important;box-shadow:inset 0 2px 0 rgba(0,0,0,.55);gap:7px;padding:5px 16px 6px}
  html.hm5-cod .hm5-rk{position:relative;font-family:var(--cod-ui);font-size:16px;letter-spacing:.14em;font-weight:700;color:#98a3b1;background:var(--brush),var(--plate);border-radius:0;padding-left:16px;
    clip-path:polygon(0 0,calc(100% - 7px) 0,100% 7px,100% 100%,7px 100%,0 calc(100% - 7px));box-shadow:var(--bevel),0 2px 0 rgba(0,0,0,.65);transition:transform .1s,filter .12s,color .12s,box-shadow .12s}
  html.hm5-cod .hm5-rk::before{content:"";position:absolute;left:9px;top:50%;width:5px;height:5px;margin-top:-3px;border-radius:50%;background:var(--tile,#6b7686);opacity:.55;box-shadow:0 0 5px var(--tile,#6b7686);transition:opacity .15s,box-shadow .15s}
  html.hm5-cod .hm5-rk:hover{filter:brightness(1.25);color:#fff;background:var(--brush),var(--plate);box-shadow:var(--bevel),0 2px 0 rgba(0,0,0,.65),inset 0 -3px 0 rgba(31,209,138,.6)}
  html.hm5-cod .hm5-rk:hover::before{opacity:1}
  html.hm5-cod .hm5-rk:active{transform:translateY(2px);box-shadow:inset 0 2px 5px rgba(0,0,0,.6)}
  html.hm5-cod .hm5-rk.on{color:#fff;background:var(--brush),var(--plate-on);box-shadow:var(--bevel),0 2px 0 rgba(0,0,0,.65),inset 0 -4px 0 var(--acc),0 0 14px -4px var(--acc-glow)}
  html.hm5-cod .hm5-rk.on::before{opacity:1;background:var(--acc);box-shadow:0 0 9px var(--acc),0 0 2px #fff inset}
}

/* a narrower window: the keys get a little tighter so every label stays whole */
@media(min-width:960px) and (max-width:1250px){
  html.hm5-cod .hm5-rk{font-size:14px;letter-spacing:.06em;padding-left:13px;padding-right:4px}
  html.hm5-cod .hm5-rk::before{left:5px;width:4px;height:4px;margin-top:-2px}
}

/* ===== ONE METAL FOR EVERYTHING (2026-11-06, owner: "all tabs and buttons and app icons match the theme, the whole site uniform") =====
   The keys, tabs and icon sockets the first pass missed: course pills, lesson and quiz answers, sub-tabs, tool keys, the Pocket
   app's icons, the welcome page's doors. Same bevel, same cut corners, same press. */
html.hm5-cod :is(.hm5-cq button,.quiz button,.tools button,.tf-btn,.quick-btn,.tos-ghost,.studies-btn,.tut-close,.hm5-foot-row button,.ib,.q-opt,.opt button,.choices button){
  border-radius:0!important;background:var(--brush),var(--plate)!important;color:#d9e0ea;font-family:var(--cod-ui);letter-spacing:.06em;font-weight:700;
  clip-path:polygon(0 0,calc(100% - 7px) 0,100% 7px,100% 100%,7px 100%,0 calc(100% - 7px));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -2px 0 rgba(0,0,0,.6),inset 0 0 0 1px rgba(0,0,0,.35),0 2px 0 rgba(0,0,0,.7)!important;transition:transform .1s,filter .12s,box-shadow .12s}
html.hm5-cod :is(.hm5-cq button,.quiz button,.tools button,.tf-btn,.quick-btn,.tos-ghost,.studies-btn,.tut-close,.hm5-foot-row button,.ib,.q-opt,.opt button,.choices button):not(:disabled):hover{filter:brightness(1.25);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -3px 0 rgba(31,209,138,.7),0 2px 0 rgba(0,0,0,.7),0 0 14px -4px var(--acc-glow)!important}
html.hm5-cod :is(.hm5-cq button,.quiz button,.tools button,.tf-btn,.quick-btn,.tos-ghost,.studies-btn,.tut-close,.hm5-foot-row button,.ib,.q-opt,.opt button,.choices button):not(:disabled):active{transform:translateY(2px);box-shadow:inset 0 2px 5px rgba(0,0,0,.6)!important}
html.hm5-cod :is(.quiz button.ok,.hm5-cq button.ok,.q-opt.ok){background:linear-gradient(180deg,rgba(31,209,138,.55),rgba(14,90,60,.85))!important;color:#fff}
html.hm5-cod :is(.quiz button.no,.hm5-cq button.no,.q-opt.no,.quiz button.bad){background:linear-gradient(180deg,rgba(255,77,94,.5),rgba(110,24,34,.85))!important;color:#fff}
/* colored keys keep their color; the metal goes around it */
html.hm5-cod :is(a.lr-btn,a.cp,a.door,.openbtn,.guide-install,.start,.cp,.lr-btn){border-radius:0!important;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),inset 0 -3px 0 rgba(0,0,0,.45),inset 0 0 0 1px rgba(0,0,0,.35),0 2px 0 rgba(0,0,0,.7)!important;transition:transform .1s,filter .12s}
html.hm5-cod :is(a.lr-btn,a.cp,a.door,.openbtn,.guide-install,.start,.cp,.lr-btn):hover{filter:brightness(1.15)}
html.hm5-cod :is(a.lr-btn,a.cp,a.door,.openbtn,.guide-install,.start,.cp,.lr-btn):active{transform:translateY(2px)}
/* the Smart Money sub-tabs and any other pill tabs: the same toggle keys as every other tab */
html.hm5-cod :is(.sms-tabs button,.lv-tabs button,.crs-tabs button,.pill-tabs button){border-radius:0!important;font-family:var(--cod-ui);letter-spacing:.07em;text-transform:uppercase;font-weight:700;background:var(--brush),var(--plate)!important;color:#aeb7c4;
  clip-path:polygon(0 0,calc(100% - 7px) 0,100% 7px,100% 100%,7px 100%,0 calc(100% - 7px));box-shadow:var(--bevel),0 2px 0 rgba(0,0,0,.65)!important;transition:transform .1s,filter .12s,box-shadow .12s}
html.hm5-cod :is(.sms-tabs button,.lv-tabs button,.crs-tabs button,.pill-tabs button):not(.on):hover{filter:brightness(1.25);box-shadow:var(--bevel),0 2px 0 rgba(0,0,0,.65),inset 0 -3px 0 rgba(31,209,138,.6)!important}
html.hm5-cod :is(.sms-tabs button,.lv-tabs button,.crs-tabs button,.pill-tabs button).on{background:var(--brush),var(--plate-on)!important;color:#fff;box-shadow:var(--bevel),0 2px 0 rgba(0,0,0,.65),inset 0 -4px 0 var(--acc),0 0 16px -4px var(--acc-glow)!important}
/* icon sockets: every app-style icon tile is a recessed steel socket with a cut corner, lit by its own color along the foot */
html.hm5-cod :is(.cp-e,.lv-emoji,.ic,.hm5-tile,.hm5-sptile,.hm5-sktile,.ls-ic,.cr-ic,.st-ic,.gm-ic,.app-ic){border-radius:0!important;clip-path:polygon(0 0,calc(100% - 6px) 0,100% 6px,100% 100%,6px 100%,0 calc(100% - 6px))}
html.hm5-cod :is(.cp-e,.lv-emoji,.ic){background:linear-gradient(180deg,#141a21,#0b0f14)!important;box-shadow:inset 0 2px 5px #000,inset 0 0 0 1px #3b4755,inset 0 -3px 0 var(--cp,var(--tile,#3b4755))!important;filter:none}
html.hm5-cod .lv-emoji{filter:grayscale(.2)}
html.hm5-cod :is(.hm5-door,.hm5-app) .hm5-tile{background:#0b0e12!important;box-shadow:inset 0 2px 5px #000,0 0 0 1px #3b4755!important}
/* phone bottom bar keys */
html.hm5-cod .hm5-tabbar a{clip-path:none;background:linear-gradient(180deg,#232c37,#10151b);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
html.hm5-cod .hm5-tabbar a.on{box-shadow:inset 0 3px 0 var(--acc),inset 0 1px 0 rgba(255,255,255,.12)}

/* ===== THE LANDING SHOWS THE BATTLEGROUND (owner, 2026-11-06: "make the landing page show the background image so they can see the battleground") =====
   The front pages (index, preview, access, welcome, install, demo) let the art through: a much lighter veil over the picture, and the two solid black
   sections that hid it become dark glass. Panels stay dark enough to read: the art shows in the gaps and behind the headlines, which get a shadow. */
html.hm5-cod.cod-front .hm5-cod-art:after{background:linear-gradient(180deg,rgba(6,8,11,.2) 0%,rgba(6,8,11,.32) 45%,rgba(6,8,11,.55) 100%)}
html.hm5-cod.cod-front.cod-art-on .hm5-cod-art:before{filter:brightness(1.18) saturate(1.12)}
html.hm5-cod.cod-front :is(.creed,section.creed,.band,.strip){background:rgba(7,10,14,.6)!important;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
html.hm5-cod.cod-front :is(.hero h1,.hero .sub,.hero p,.hero .kick,.creed h2,.creed p,h1,h2){text-shadow:0 2px 16px rgba(0,0,0,.85),0 0 2px rgba(0,0,0,.6)}

/* landing text you can read over the art (owner, 2026-11-06: "love the background visible, but the fonts need to be more readable"): the grey body text turns near-white on
   the front pages, every line gets a dark halo, and the hero paragraphs sit on a soft dark strip that fades out at both ends. The art stays as bright as it is. */
html.hm5-cod.cod-front{--text-2:#F4F7FB;--text-3:#D6DDE7}
html.hm5-cod.cod-front :is(.lede,.fine,.kick,.sub,.t p,.t li,.hero p,.hero li,p.lead,.creed p,.creed li){text-shadow:0 1px 2px rgba(0,0,0,.95),0 0 12px rgba(0,0,0,.85),0 0 28px rgba(0,0,0,.65)}
html.hm5-cod.cod-front :is(.lede,.fine){font-weight:600;padding:12px 28px;background:linear-gradient(90deg,rgba(6,8,11,0),rgba(6,8,11,.55) 14%,rgba(6,8,11,.55) 86%,rgba(6,8,11,0))}

/* the WAIT note: a long explanation sat inside a pill with a 999px radius and became a giant circle; it is a squared tag that wraps in a bounded box */
html.hm5-cod .tb-waitword{border-radius:0!important;max-width:240px;white-space:normal;line-height:1.3;text-align:left;vertical-align:middle;clip-path:polygon(0 0,calc(100% - 5px) 0,100% 5px,100% 100%,5px 100%,0 calc(100% - 5px))}

/* ===== ONE BAND (2026-11-06, owner: "move the play and all those pills up and add in the other tabs at the top ... just one band") =====
   The second row of keys now sits in the same row as the doors, in the same industrial tab style. Phones keep the More menu. */
.hm5-rdoor,.hm5-help-top{display:none}
@media(min-width:960px){
  html.hm5-cod .hm5-topnav .hm5-tabs>.hm5-rdoor{display:inline-flex!important}
  html.hm5-cod .hm5-topnav .hm5-tabs{gap:0}
  html.hm5-cod .hm5-topnav .hm5-tabs>.hm5-door{padding:0 clamp(5px,.5vw,16px)!important;font-size:clamp(13px,.92vw,20px)!important;letter-spacing:.06em!important}
  html.hm5-cod .hm5-topnav .hm5-tabs{flex:0 1 auto!important}
  html.hm5-cod .hm5-topnav .hm5-tabs>.hm5-rfirst{margin-left:12px}
  html.hm5-cod .hm5-topnav .hm5-tabs>.hm5-rfirst::after{content:"";position:absolute;left:-7px;top:9px;bottom:9px;width:1px;background:linear-gradient(180deg,transparent,#4a5666,transparent)}
  /* the search keeps one icon's room so every tab stays whole */
  html.hm5-cod .hm5-topnav .hm5-search{flex:0 0 40px!important;width:40px!important;min-width:40px!important;padding:0!important;justify-content:center;margin:0 0 0 auto!important}
  html.hm5-cod .hm5-topnav .hm5-search .hm5-search-ph,html.hm5-cod .hm5-topnav .hm5-search kbd{display:none!important}
  html.hm5-cod .hm5-topnav .hm5-brand .hm5-word{display:none!important}
}
/* the Help key: a red medic kit in the far right corner */
.hm5-help-top{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:38px;height:38px;margin-left:2px;padding:0;cursor:pointer;color:#fff;
  background:linear-gradient(180deg,#2a3340,#151a21);border:1px solid #3e4958;border-radius:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 -3px 0 rgba(0,0,0,.5),0 2px 0 rgba(0,0,0,.65);
  clip-path:polygon(0 0,calc(100% - 7px) 0,100% 7px,100% 100%,7px 100%,0 calc(100% - 7px));transition:filter .12s,transform .1s,box-shadow .12s}
.hm5-help-top svg{width:25px;height:25px;overflow:visible}
.hm5-help-top .hk-b{fill:#e2262e;stroke:#7a0d12;stroke-width:1}
.hm5-help-top .hk-h{fill:none;stroke:#e2262e;stroke-width:2;stroke-linecap:round}
.hm5-help-top .hk-x{fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:square}
.hm5-help-top:hover{filter:brightness(1.25);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 2px 0 rgba(0,0,0,.65),inset 0 -3px 0 #e2262e,0 0 14px -3px rgba(226,38,46,.7)}
.hm5-help-top:active{transform:translateY(2px)}
@media(min-width:960px){html.hm5-cod .hm5-topnav .hm5-help-top,html .hm5-topnav .hm5-help-top{display:inline-flex!important}}
@media(max-width:959px){.hm5-topnav .hm5-help-top{display:inline-flex!important;width:36px;height:36px;margin-left:0}}
@media(min-width:960px){
  html.hm5-cod .hm5-topnav .hm5-tabs>.hm5-door{max-width:none!important}
  html.hm5-cod .hm5-topnav .hm5-tabs>.hm5-door .hm5-door-l{max-width:none!important;overflow:visible!important}
}
.hm5-topnav .hm5-help-top{order:99!important}
/* a narrower desktop window: the two least-used keys go back under More so every tab stays whole */
@media(min-width:960px) and (max-width:1559px){
  html.hm5-cod .hm5-topnav .hm5-tabs>.hm5-rlow{display:none!important}
  html.hm5-cod .hm5-topnav .hm5-more{display:block!important}
  html.hm5-cod .hm5-topnav .hm5-more .hm5-menu .hm5-door{max-width:none!important}
}
/* phones: the search is one icon so the Help key and the unlock key both fit */
@media(max-width:700px){
  html.hm5-cod .hm5-topnav .hm5-search{flex:0 0 38px!important;width:38px!important;min-width:38px!important;padding:0!important;justify-content:center;margin-left:auto!important}
  html.hm5-cod .hm5-topnav .hm5-search .hm5-search-ph,html.hm5-cod .hm5-topnav .hm5-search kbd{display:none!important}
}

/* ===== READABLE EVERYWHERE (2026-11-06, owner: "we have older folks on this site too and this font is a little too small, needs to be big and easy to read everywhere") =====
   Every font size on the site went up two pixels with a 13px floor (a one-time pass over the pages and styles), so the small labels are no longer tiny.
   Bigger text needs room, so these labels wrap onto a second line instead of being cut off with dots. */
html.hm5-cod :is(.tk-row i,.spec-cell i,.leg-h span,.tk-co,.tk-t i,.tk-struct-row .tk-sname,.sc-row .s,.mover-tile .mt-name,.buzz-name,.az-xv,.rlrow .rlsym small,.sms-row small,.mypos-row .desc,.chip){white-space:normal!important;overflow:visible!important;text-overflow:clip!important;overflow-wrap:anywhere;line-height:1.25}

/* the narrowest desktop windows keep the six main doors; every other page is one click away under More */
@media(min-width:960px) and (max-width:1279px){
  html.hm5-cod .hm5-topnav .hm5-tabs>.hm5-rdoor{display:none!important}
}

/* the BETA tag beside Apes stays a small tag, not a second label (owner, 2026-11-06: "beta is too big") */
html.hm5-cod .hm5-topnav .hm5-beta,.hm5-topnav .hm5-beta{font-size:10.5px!important;line-height:1.45!important;padding:0 4px!important;margin-left:6px!important;letter-spacing:.1em!important}
@media(min-width:960px){html.hm5-cod .hm5-topnav .hm5-more-b{font-size:clamp(13px,.92vw,20px)!important;padding:0 clamp(5px,.5vw,16px)!important;letter-spacing:.06em!important}}
html.hm5-cod .stk,html.hm5-cod .stk b,html.hm5-cod .stk i{white-space:nowrap}