/* ===== Collins Pro Line 21 (WT CJ4) — PFD / MFD ===== */
.cj-pfd,.cj-mfd{--g:#5af25a;--c:#33ffff;--m:#ff73ff;--sky:#0f66ef;--earth:#a96d4f;display:block;width:100%;height:auto;font-family:"Roboto Condensed","Arial Narrow","Avenir Next Condensed","Helvetica Neue",Arial,"Liberation Sans",sans-serif;font-stretch:semi-condensed;user-select:none}
.deck[data-suite="cj4"] #pfd{background:#000;padding:0;display:block;border-color:#0a0a0a;outline-color:#3a4148;border-radius:4px}
.deck[data-suite="cj4"] #nd{background:#000;padding:0;border-color:#0a0a0a;outline-color:#3a4148;border-radius:4px}
.deck[data-suite="cj4"] .instruments>#nd{position:relative;min-height:240px;align-self:stretch}
.deck[data-suite="cj4"] #nd svg.cj-mfd{position:absolute;inset:0;width:100%;height:100%;max-height:none}
.cj-pfd text,.cj-mfd text{paint-order:stroke;stroke:#000;stroke-width:2.2px;stroke-linejoin:round}
.cj-g{fill:var(--g)}.cj-c{fill:var(--c)}.cj-m{fill:var(--m)}.cj-w{fill:#fff}
.cj-sky{fill:var(--sky)}.cj-earth{fill:var(--earth)}.cj-horizon{stroke:#fff;stroke-width:2.5}
.cj-ladder line{stroke:#fff;stroke-width:2.5}.cj-ladder text{fill:#fff;font-size:22px}
.cj-bank line{stroke:#fff;stroke-width:3}.cj-hol{fill:none;stroke:#fff;stroke-width:2.5;stroke-linejoin:round}
.cj-halfbank{fill:none;stroke:#fff;stroke-width:3.5}
.cj-skyptr path{fill:#fff;stroke:#000;stroke-width:1}
.cj-ref{fill:#fff;stroke:#000;stroke-width:2}
.cj-fdbar path{fill:var(--m);stroke:#000;stroke-width:1.6;stroke-linejoin:round}
.cj-acft{fill:#000;stroke:#fff;stroke-width:2.5;stroke-linejoin:round}
.cj-tape{fill:#000;fill-opacity:.45}
.cj-scale line{stroke:#fff;stroke-width:2.5}.cj-scale text{fill:#fff;font-size:24px;text-anchor:end}
.cj-altscale text{text-anchor:start}.cj-alb{font-size:28px}.cj-als{font-size:20px}
.cj-vmo{fill:#ff3333}
.cj-trend{stroke:var(--m);stroke-width:4}
.cj-bug{fill:none;stroke:var(--c);stroke-width:3;stroke-linejoin:round}
.cj-box{fill:#000;stroke:#fff;stroke-width:2.5;stroke-linejoin:round}
.cj-big{font-size:42px}.cj-mid{font-size:32px}.cj-small{font-size:24px}
.cj-sel text{font-size:26px}.cj-bugi{fill:none;stroke:var(--c);stroke-width:2.5;stroke-linejoin:round}
.cj-mach{font-size:26px}.cj-mp{fill:#9c9c9c}
.cj-vdev rect{fill:#000;fill-opacity:.35}.cj-vdev circle{fill:none;stroke:#fff;stroke-width:2.5}.cj-vdev line{stroke:#fff;stroke-width:3}
.cj-dia{fill:none;stroke:var(--g);stroke-width:3.2;stroke-linejoin:round}.cj-dia.cj-ghostc{stroke:var(--c);stroke-dasharray:5 3}
.cj-flake path{fill:none;stroke:var(--m);stroke-width:3;stroke-linecap:round}.cj-flake circle{fill:#000;stroke:var(--m);stroke-width:2.5}
.cj-latdev rect{fill:#000;fill-opacity:.4}.cj-latdev circle{fill:none;stroke:#fff;stroke-width:2.2}.cj-latdev line{stroke:#fff;stroke-width:2.5}
.cj-ra{font-size:30px;text-anchor:middle}
.cj-preb{font-size:32px}.cj-pres{font-size:23px}
.cj-vtgt{font-size:26px}.cj-baro{font-size:24px}
.cj-vsi line{stroke:#fff;stroke-width:2.5}.cj-vsi .cj-thick{stroke-width:3.5}.cj-vsi text{fill:#fff;font-size:20px;text-anchor:end}
.cj-needle{stroke:var(--g);stroke-width:4.5;stroke-linecap:round}
.cj-vsbug{fill:var(--c);stroke:#000;stroke-width:1}.cj-donut{fill:none;stroke:var(--m);stroke-width:3}
.cj-vsd{font-size:23px}
.cj-fmabg{fill:#000;fill-opacity:.5}
.cj-fma text{font-size:26px;letter-spacing:.02em}
.cj-arrow{fill:#fff}.cj-arrow.cj-on{fill:var(--g)}
.cj-fma [data-cj="vref"] path{fill:var(--c)}.cj-fma [data-cj="vref"] .cj-bugi{fill:none}
.cj-fma [data-cj="vrefArr"]{fill:none!important;stroke:var(--c);stroke-width:2.6;stroke-linecap:round}
.cj-tod{font-size:26px}
.cj-blink{animation:cjBlink 1s step-start infinite}
.cj-blinkf,.cj-alert{animation:cjBlink .8s step-start infinite}
@keyframes cjBlink{50%{opacity:0}}
.cj-rose circle{fill:none;stroke:#fff;stroke-width:2.5}.cj-rose line{stroke:#fff;stroke-width:2.5}.cj-rose text{fill:#fff;font-size:30px;text-anchor:middle}
.cj-ring circle{fill:none;stroke:#fff;stroke-width:1.6;opacity:.85}.cj-ring line{stroke:#fff;stroke-width:2}
.cj-rng{font-size:22px}
.cj-wind path{fill:none;stroke:var(--m);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.cj-trk{fill:none;stroke:var(--m);stroke-width:3}
.cj-hbug path{fill:var(--c);stroke:#000;stroke-width:1}
.cj-crs path,.cj-crs line{fill:none;stroke:var(--m);stroke-width:4.5;stroke-linejoin:round}
.cj-crs.cj-radio path,.cj-crs.cj-radio line{stroke:var(--g)}
.cj-crs .cj-to{stroke-width:3}
.cj-dots circle{fill:none;stroke:#fff;stroke-width:2.5}
.cj-ghost path,.cj-ghost line{stroke:var(--c);stroke-width:3;stroke-dasharray:12 9}
.cj-plane path{stroke:#fff;stroke-width:4.5;fill:none;stroke-linecap:round}
.cj-hdgv{font-size:31px}.cj-hsel{font-size:31px}.cj-sm{font-size:21px}.cj-lg{font-size:33px}
.cj-src text{fill:var(--m)}.cj-src.cj-radio text{fill:var(--g)}
.cj-presetbox{fill:none;stroke:var(--c);stroke-width:2.5}.cj-presetv{font-size:25px}
.cj-min,.cj-acc{font-size:23px}.cj-wtxt{font-size:24px}
.cj-foot text{font-size:21px}
@media(max-width:800px){.cj-foot,.cj-pfd .cj-rside{display:none}.cj-pfd .cj-sm{font-size:24px}.cj-ladder text{font-size:25px}.cj-pfd .cj-mach,.cj-pfd .cj-baro,.cj-pfd .cj-vsd{font-size:27px}}
/* MFD */
.cj-mfd text{stroke-width:1.6px}
.cj-t12{font-size:12px}.cj-t13{font-size:13px}.cj-t14{font-size:14px}.cj-t15{font-size:15px}.cj-t16{font-size:16px}.cj-t18{font-size:18px}.cj-t20{font-size:20px}.cj-t22{font-size:22px}.cj-t24{font-size:24px}
.cj-gauge{fill:none;stroke:#fff;stroke-width:1.6}.cj-redl{stroke:#ff3333;stroke-width:3}.cj-amb{fill:#ffa333}
.cj-ptr{fill:#fff;stroke:#000;stroke-width:1}.cj-dbox{fill:none;stroke:#fff;stroke-width:1.5}
.cj-sep{stroke:#1d2329;stroke-width:2}
.cj-fmstext text.cj-c{fill:var(--c)}.cj-fmstext text.cj-m{fill:var(--m)}.cj-fmstext text.cj-w{fill:#fff}
.cj-mfd .cj-rose text{font-size:20px}.cj-mfd .cj-rose line{stroke-width:2}.cj-mfd .cj-rose circle{stroke-width:2}
.cj-ringm{fill:none;stroke:#fff;stroke-width:1.3;opacity:.8}
.cj-mfd .cj-plane path{stroke-width:3.5}
.cj-ract{fill:none;stroke:var(--m);stroke-width:3.4}.cj-rnext{fill:none;stroke:#fff;stroke-width:2.4}
.cj-wpt path{fill:#000;stroke:#fff;stroke-width:1.8;stroke-linejoin:round}.cj-wpt text{fill:#fff;font-size:15px}
.cj-wpt.cj-act path{stroke:var(--m)}.cj-wpt.cj-act text{fill:var(--m)}
.cj-todm circle{fill:none;stroke:var(--g);stroke-width:2.2}.cj-todm text{fill:var(--g);font-size:15px}

/* ===== Flight Guidance Panel (glareshield) ===== */
.deck[data-panel="collins"] .hardware-panel{background:linear-gradient(#17191b,#0e0f10);border-color:#2b2f33;padding:10px;box-shadow:inset 0 1px #ffffff14,0 4px 10px #0007}
.cj-fgp{--pan:#717f84;--seam:#485052;--cream:#dad7c8;display:flex;align-items:stretch;background:linear-gradient(#7d8b90,#6f7d82 45%,#65737a);border:1px solid #2c3436;border-radius:5px;box-shadow:inset 0 1px #b4bec255,0 3px 7px #0008;overflow:hidden;font-family:Arial,"Helvetica Neue","Liberation Sans",sans-serif}
.cj-mod{position:relative;flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:6px;padding:9px 7px 8px;border-right:2px solid var(--seam);box-shadow:inset 1px 0 #9aa7ab44}
.cj-mod:last-child{border-right:0}
.cj-m-ap:before,.cj-m-crs2:before{content:"";position:absolute;left:-2px;top:9%;bottom:5%;width:3px;border-radius:2px;background:var(--cream);opacity:.9}
.cj-m-alt{border-right:0}.cj-m-ap{border-right:0}
.cj-key{position:relative;min-width:42px;height:32px;padding:0 6px;border-radius:4px;border:1px solid #070909;background:linear-gradient(#30363a,#1d2225 55%,#16191b);box-shadow:0 2px 0 #0a0c0d,0 3px 5px #0008,inset 0 1px #ffffff26;color:#f4f4ef;font:700 11px/1.02 Arial,"Liberation Sans",sans-serif;letter-spacing:.03em;display:grid;place-items:center;cursor:pointer;transition:transform .06s,box-shadow .06s,color .2s;text-shadow:0 0 3px #ffffff33}
.cj-key span{pointer-events:none}
.cj-key.cj-two{font-size:9.5px}
.cj-key:hover:not(:disabled){color:#fff;box-shadow:0 2px 0 #0a0c0d,0 3px 5px #0008,inset 0 1px #ffffff40,0 0 0 1px #ffffff22}
.cj-key:disabled{color:#8f979a;cursor:not-allowed;text-shadow:none}
.cj-key:active:not(:disabled),.cj-key.cj-pressed{transform:translateY(1.5px);box-shadow:0 .5px 0 #0a0c0d,inset 0 2px 4px #000c;color:#fff;text-shadow:0 0 6px #fff9}
.cj-key:focus-visible{outline:2px solid var(--amber,#f4bd5f);outline-offset:2px}
.cj-key.focus-control,.cj-fgp .av-push.focus-control{box-shadow:0 0 0 2px var(--amber,#f4bd5f),0 0 16px #f4bd5f99;color:#ffe1a5}
.cj-disc{width:100%;min-width:88px;height:30px;border-radius:3px;background:linear-gradient(#1b1f21,#060707);box-shadow:inset 0 1px #ffffff1c,0 2px 0 #050606,0 3px 6px #0009}
.cj-disc-lbl{font:700 9.5px/1 Arial,sans-serif;color:var(--cream);letter-spacing:.04em;white-space:nowrap;margin-top:2px}
.cj-apcol{display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:6px;height:100%}
.cj-m-ap{flex-direction:row;align-items:stretch;gap:16px;padding-left:14px;padding-right:12px}
.cj-m-lat{display:grid;grid-template-columns:auto auto auto;align-items:end;justify-items:center;column-gap:14px;row-gap:6px}
.cj-latkeys,.cj-latrow{display:contents}
.cj-kwrap{display:flex;flex-direction:column;align-items:center}
.cj-m-lat>.cj-latkeys>.cj-key{align-self:start}
.cj-m-lat .cj-latrow>.cj-key{align-self:center;margin-top:0}
/* knobs (shared kit, restyled as CJ4 knobs with cream index arcs) */
.cj-fgp .av-knob{position:relative;padding:0;gap:4px;border-radius:50%}
.cj-fgp .av-knob-label{font:700 11px/12px Arial,sans-serif;height:12px;color:var(--cream);letter-spacing:.04em}
.cj-fgp .av-knob-body{gap:2px}
.cj-fgp .av-turn,.cj-arc{position:relative;display:block;min-width:0;width:20px;min-height:0;height:calc(var(--size) * .92);padding:0;border:0;border-radius:0;background:none;box-shadow:none;color:transparent;font-size:0;cursor:pointer}
.cj-fgp .av-turn:before,.cj-arc:before{content:"";position:absolute;top:3px;bottom:3px;width:22px;border:3px solid var(--cream);border-radius:50%;opacity:.95}
.cj-fgp .av-turn[data-direction="-1"]:before,.cj-arc-l:before{left:5px;clip-path:inset(-4px 55% -4px -4px)}
.cj-fgp .av-turn[data-direction="1"]:before,.cj-arc-r:before{right:5px;clip-path:inset(-4px -4px -4px 55%)}
.cj-fgp .av-turn:after{position:absolute;top:50%;transform:translateY(-50%);font:700 11px/1 Arial,sans-serif;color:#f3efe1;opacity:0;transition:opacity .15s}
.cj-fgp .av-turn[data-direction="-1"]:after{content:"−";left:-1px}.cj-fgp .av-turn[data-direction="1"]:after{content:"+";right:-1px}
.cj-fgp .av-turn:hover:after,.cj-fgp .av-turn:focus-visible:after{opacity:1}
.cj-fgp .av-turn:hover:before{filter:drop-shadow(0 0 3px #fff8)}
.cj-fgp .av-turn:active{transform:none;background:none}
.cj-fgp .av-turn:active:before{border-color:#fff}
.cj-fgp .av-turn:focus-visible{outline:2px solid var(--amber,#f4bd5f);outline-offset:1px}
.cj-fgp .av-cap{background:repeating-conic-gradient(from var(--turn),#0c0e0f 0 5deg,#2c3033 5deg 10deg);box-shadow:0 4px 7px #000b,0 0 0 2px #080909,inset 0 1px 1px #ffffff40}
.cj-fgp .av-cap:before{inset:13%;background:radial-gradient(circle at 38% 30%,#3b4043,#191c1e 62%,#0e1011);box-shadow:inset 0 1px 1px #ffffff2a,0 1px 3px #000}
.cj-fgp .av-cap i{width:2px;margin-left:-1px;height:13%;top:3%;background:#e9e6dc}
.cj-fgp .cj-m-lat .av-cap{background:repeating-conic-gradient(from var(--turn),#0c0e0f 0 9deg,#34393c 9deg 14deg,#0c0e0f 14deg 20deg)}
.cj-fgp .av-pushpull{position:absolute;left:50%;top:calc(16px + var(--size) / 2);transform:translate(-50%,-50%);z-index:2;display:block}
.cj-fgp .av-push{display:grid;place-items:center;width:calc(var(--size) * .62);height:calc(var(--size) * .62);min-height:0;padding:0;border-radius:50%;border:0;background:transparent;color:#f1eee4;font:700 7px/1.08 Arial,sans-serif;letter-spacing:.02em;cursor:pointer}
.cj-fgp .av-push:hover:not(:disabled){background:radial-gradient(circle,#ffffff14,transparent 70%)}
.cj-fgp .av-push:active:not(:disabled),.cj-fgp .av-push.cj-pressed{transform:scale(.94);background:radial-gradient(circle,#ffffff22,transparent 70%)}
.cj-fgp .av-push:disabled{pointer-events:none;color:#cfccc2}
.cj-captext{position:absolute;inset:0;display:grid;place-items:center;text-align:center;font:700 7px/1.08 Arial,sans-serif;color:#e8e5db;pointer-events:none;z-index:1;letter-spacing:.02em}
.cj-dead{opacity:.92}.cj-dead .av-cap{cursor:default}
.cj-fgp .av-knob.focus-control{box-shadow:none}
.cj-fgp .av-knob.focus-control .av-cap{box-shadow:0 4px 7px #000b,0 0 0 3px var(--amber,#f4bd5f),0 0 18px #f4bd5f99}
.cj-entry-wrap{display:inline-flex;align-items:baseline;gap:3px;margin-top:4px;padding:1px 6px;border-radius:3px;background:#0c0f10;border:1px solid #3a4448;box-shadow:inset 0 1px 3px #000;cursor:text}
.cj-entry-wrap span{font:700 8px/1 Arial,sans-serif;color:#90a0a6;letter-spacing:.05em}
.cj-fgp .cj-entry{width:5.2ch;font:600 12px/18px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#33ffff;text-align:right}
.cj-fgp .cj-entry:focus-visible{outline:2px solid var(--amber,#f4bd5f);outline-offset:3px}
/* vertical wheel */
.cj-m-wheel{flex-direction:row;align-items:center;justify-content:center;gap:4px}
.cj-wheel{display:flex;flex-direction:column;align-items:center;gap:3px}
.cj-wheel.focus-control .cj-wheel-slot{box-shadow:inset 0 0 6px #000,0 0 0 2px var(--amber,#f4bd5f),0 0 16px #f4bd5f99}
.cj-wbtn{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:44px;padding:2px 0;border:0;background:none;color:var(--cream);font:700 9.5px/1 Arial,sans-serif;letter-spacing:.04em;cursor:pointer;border-radius:4px}
.cj-wbtn i{font-style:normal;font-size:8px;line-height:1}
.cj-wbtn:hover{background:#ffffff14}.cj-wbtn:active{background:#ffffff26}
.cj-wheel.cj-dead .cj-wl{font:700 9.5px/1 Arial,sans-serif;color:var(--cream);letter-spacing:.04em;padding:3px 0}
.cj-wheel-slot{width:24px;height:64px;padding:2px 3px;border-radius:4px;background:linear-gradient(90deg,#1b1e20,#383e41 50%,#1b1e20);box-shadow:inset 0 0 6px #000}
.cj-drum{height:100%;border-radius:7px/16px;background:repeating-conic-gradient(from calc(var(--turn,0deg) * .13) at -900% 50%,#0b0c0d 0 .9deg,#41474b .9deg 1.8deg);box-shadow:inset 0 6px 6px #000c,inset 0 -6px 6px #000c;cursor:ns-resize;touch-action:none}
.cj-drum:focus-visible{outline:2px solid var(--amber,#f4bd5f);outline-offset:2px}
.cj-warrow{position:relative;width:10px;height:58px;margin-left:2px}
.cj-warrow:before{content:"";position:absolute;left:4px;top:6px;bottom:6px;width:2px;background:var(--cream)}
.cj-warrow:after{content:"";position:absolute;left:0;top:0;right:0;bottom:0;background:conic-gradient(from 135deg at 50% 0,var(--cream) 0 90deg,transparent 0) top/10px 7px no-repeat,conic-gradient(from -45deg at 50% 100%,var(--cream) 0 90deg,transparent 0) bottom/10px 7px no-repeat}
/* DCP + throttle row */
.cj-lower{display:flex;flex-wrap:wrap;gap:10px;margin-top:9px;align-items:stretch}
.cj-dcp{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:7px 12px;border-radius:6px;background:linear-gradient(#5c7186,#4d6072);border:1px solid #232c35;box-shadow:inset 0 1px #93a7ba55,0 3px 6px #0007}
.cj-dcp-tag{font:700 9px/1 Arial,sans-serif;letter-spacing:.14em;color:#dbe4ec;margin-right:4px}
.cj-dcp .cj-key{height:30px;min-width:46px;font-size:10px}
.cj-dcp .cj-key.cj-dcpk{font-size:8.5px}
.cj-navsrc b{font-size:13px;line-height:0;vertical-align:-1px}
.cj-throttle{display:flex;align-items:center;gap:8px;padding:6px 12px;border-radius:6px;background:linear-gradient(#26292c,#141618);border:1px solid #33383c}
.cj-throttle small{font:700 8px/1 Arial,sans-serif;letter-spacing:.12em;color:#9aa3a8}
.cj-lever{width:12px;height:34px;border-radius:4px;background:linear-gradient(90deg,#6d7479,#c9cfd2 50%,#6d7479);box-shadow:0 2px 4px #000}
.cj-toga{border-radius:50%;min-width:42px;width:42px;height:42px;font-size:9px}
/* responsive reflow (container = #hardwarePanel) */
@container (max-width: 990px) and (min-width: 730.02px){
 .cj-mod{padding:8px 3px 7px}
 .cj-key{min-width:36px;height:29px;padding:0 4px;font-size:10px}
 .cj-key.cj-two{font-size:8.5px}
 .cj-fgp .av-turn,.cj-arc{width:14px}
 .cj-fgp .av-turn:before,.cj-arc:before{width:17px}
 .cj-fgp .cj-m-crs1 .av-knob,.cj-fgp .cj-m-crs2 .av-knob{--size:38px!important}
 .cj-fgp .cj-m-flc .av-knob{--size:42px!important}
 .cj-fgp .cj-m-lat .av-knob{--size:40px!important}
 .cj-fgp .cj-m-alt .av-knob{--size:50px!important}
 .cj-m-lat{column-gap:8px}
 .cj-m-ap{gap:10px;padding-left:10px;padding-right:8px}
 .cj-disc{min-width:56px}
 .cj-wbtn{min-width:34px}
}
@container (max-width: 730px){
 .cj-fgp{display:grid;grid-template-columns:auto auto auto auto minmax(0,1fr)}
 .cj-mod{border-bottom:2px solid var(--seam)}
 .cj-m-lat{border-right:0}
 .cj-m-alt{border-right:2px solid var(--seam)}
 .cj-m-ap{grid-column:2/5;justify-content:center}
 .cj-m-crs2{grid-column:5/6}
 .cj-m-ap:before{display:none}
 .cj-m-aux{grid-column:1/-1;flex-direction:row;justify-content:center;gap:22px}
}
@container (max-width: 520px){
 .cj-fgp{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
 .cj-mod{border-right:2px solid var(--seam);border-bottom:2px solid var(--seam);padding:10px 6px}
 .cj-m-lat,.cj-m-ap{grid-column:span 2}
 .cj-m-crs2,.cj-m-aux{grid-column:1/-1;flex-direction:row;justify-content:center;gap:22px}
 .cj-m-ap:before{display:none}
 .cj-m-crs2:before{left:12%;right:12%;top:-2px;bottom:auto;width:auto;height:3px}
}
@container (max-width: 520px){
 .cj-key{min-width:46px;height:42px;font-size:12px}
 .cj-key.cj-two{font-size:10.5px}
 .cj-fgp .av-turn,.cj-arc{width:26px}
 .cj-fgp .av-turn:before,.cj-arc:before{width:26px}
 .cj-fgp .av-turn:after{opacity:1;font-size:12px}
 .cj-wbtn{min-height:34px;justify-content:center}
 .cj-m-lat{column-gap:6px}
 .cj-m-ap{gap:10px;padding-left:8px;padding-right:8px}
 .cj-disc{min-width:72px;height:36px}
 .cj-dcp{padding:7px 8px;gap:5px}
 .cj-dcp .cj-key{min-width:44px;height:40px}
 .cj-lower{gap:8px}
}

/* ===== CDU (Collins FMS-3000 control display unit) ===== */
.deck[data-suite="cj4"] #computerPanel{position:relative}
.deck[data-suite="cj4"] #computerPanel .computer-body{display:block;max-width:560px;margin:0 auto;padding:16px 14px 18px;border-radius:12px;background:linear-gradient(#61778d,#566b80 35%,#4d6175);border:1px solid #1c252d;box-shadow:inset 0 1px #9fb3c666,inset 0 -2px 4px #0005,0 6px 14px #0008;container-type:inline-size;position:relative}
.deck[data-suite="cj4"] #computerPanel .computer-body:before,.deck[data-suite="cj4"] #computerPanel .computer-body:after{content:"";position:absolute;top:10px;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#8b9aa8,#3e4b57);box-shadow:inset 0 0 0 1px #2a3440}
.deck[data-suite="cj4"] #computerPanel .computer-body:before{left:10px}.deck[data-suite="cj4"] #computerPanel .computer-body:after{right:10px}
.deck[data-suite="cj4"] #computerScreen{padding:0;background:none;border:0;box-shadow:none;min-height:0;font:inherit;color:inherit}
.deck[data-suite="cj4"] #computerKeys{display:block}
.deck[data-suite="cj4"] #computerEntryWrap{position:absolute;left:50%;top:40%;width:1px;height:1px;padding:0;margin:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.cj-cdu-top{display:grid;grid-template-columns:34px minmax(0,1fr) 34px;grid-template-rows:auto repeat(6,auto) auto auto;column-gap:9px;margin-top:10px}
.cj-glass{grid-column:2;grid-row:1/-1;display:grid;grid-template-rows:subgrid;position:relative;overflow:hidden;padding:6px 9px 5px;border-radius:5px;background:radial-gradient(ellipse at 50% 40%,#0c1019,#05070c 80%);border:3px solid #07090d;box-shadow:0 0 0 2px #33455a,inset 0 0 24px #000;font-family:"DejaVu Sans Mono",Menlo,Consolas,"Liberation Mono",monospace;font-variant-numeric:slashed-zero;font-size:clamp(10.5px,4.05cqi,21px);line-height:1.16;color:#f4f4f4;letter-spacing:.02em}
.cj-glass:after{content:"";position:absolute;inset:0;background:linear-gradient(#0000 50%,#0000002e 50%);background-size:100% 3px;pointer-events:none}
.cj-row{position:relative;display:flex;justify-content:space-between;white-space:pre;min-height:1.16em}
.cj-row .cj-c2{position:absolute;left:50%;transform:translateX(-50%)}
.cj-line{display:flex;flex-direction:column;justify-content:flex-end}
.cj-lab{font-size:.8em;min-height:1.1em;align-items:flex-end}
.cj-dat{font-size:1em;min-height:1.22em}
.cj-title{min-height:1.3em}
.cj-title.cj-ctr{justify-content:center}
.cj-b{color:#5a9ccc}.cj-wt{color:#f4f4f4}.cj-gn{color:#26d173}.cj-mg{color:#ff45ff}.cj-gy{color:#7c7c7c}.cj-sm{font-size:.8em}
.cj-scratch{display:flex;align-items:center;min-height:1.3em;cursor:text;margin-top:.1em}
.cj-sptext{margin-left:.15em;color:#fff}
.cj-caret{width:.5em;height:.95em;margin-left:1px;background:#fff;opacity:0}
.deck[data-suite="cj4"] #computerPanel:has(#computerEntry:focus) .cj-caret{animation:cjCaret 1s step-end infinite}
@keyframes cjCaret{0%,50%{opacity:1}51%,100%{opacity:0}}
.cj-scratch .cj-b:last-child{margin-left:auto}
.cj-msgline{display:flex;justify-content:space-between;align-items:center;min-height:1.2em;color:#fff201;font-size:.9em}
.cj-exectag{padding:0 .25em;background:#f4f4f4;color:#0e0d08;visibility:hidden;font-size:1.05em}
.cj-exectag.cj-on{visibility:visible}
.cj-lsk{position:relative;align-self:end;height:26px;width:34px;margin-bottom:2px;padding:0;border-radius:3px;border:1px solid #0b0e12;background:linear-gradient(#333a42,#1c2128 60%,#171b21);box-shadow:0 2px 0 #0b0d10,0 3px 5px #0007,inset 0 1px #ffffff22;cursor:pointer}
.cj-lsk:before{content:"";position:absolute;inset:-5px -5px}
.cj-lsk:after{content:"";display:block;width:15px;height:3px;margin:auto;border-radius:1px;background:#e8ecef}
.cj-lsk-L{grid-column:1}.cj-lsk-R{grid-column:3}
.cj-lsk[aria-disabled="true"]{cursor:default}
.cj-lsk:active,.cj-lsk.cj-pressed,.cj-k:active:not(:disabled),.cj-k.cj-pressed{transform:translateY(1.5px);box-shadow:0 .5px 0 #0b0d10,inset 0 2px 4px #000c}
.cj-lsk:focus-visible,.cj-k:focus-visible{outline:2px solid var(--amber,#f4bd5f);outline-offset:2px}
.cj-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.cj-kp{display:grid;grid-template-columns:repeat(48,minmax(0,1fr));row-gap:8px;margin-top:14px}
.cj-k{grid-area:var(--d);position:relative;margin:0 3px;height:36px;min-width:0;padding:0;border-radius:5px;border:1px solid #0d1014;background:linear-gradient(#353b44,#22262d 55%,#1b1e24);box-shadow:0 2px 0 #0b0d10,0 3px 5px #0008,inset 0 1px #ffffff26;color:#f5f6f7;font:700 9.5px/1.05 Arial,"Liberation Sans",sans-serif;letter-spacing:.02em;display:grid;place-items:center;cursor:pointer;transition:transform .06s,box-shadow .06s}
.cj-k span{pointer-events:none}
.cj-k.cj-alpha{font-size:17px;font-weight:700}
.cj-k.cj-card:after{content:"";position:absolute;left:50%;top:50%;width:1.25em;height:1.25em;transform:translate(-50%,-50%);border:1.5px solid #e9ecef;font-size:17px;pointer-events:none}
.cj-k.cj-num{justify-self:center;width:36px;border-radius:50%;font-size:16px}
.cj-k.cj-num sup,.cj-k.cj-num sub{font-size:10px;line-height:0}
.cj-k.cj-brt{height:auto;align-self:stretch;font-size:9px}
.cj-fk:disabled{color:#9097a0;cursor:default}
.cj-k:hover:not(:disabled){box-shadow:0 2px 0 #0b0d10,0 3px 5px #0008,inset 0 1px #ffffff40,0 0 0 1px #ffffff26}
.cj-lamp{position:absolute;top:4px;left:26%;right:26%;height:3px;border-radius:2px;background:#454b52;box-shadow:inset 0 1px #0006;transition:background .2s,box-shadow .2s}
.cj-lamp.cj-on{background:#fff6cf;box-shadow:0 0 6px 2px #ffe7917a}
.cj-execk.cj-on span{color:#fff}
@container (max-width: 440px){
 .cj-cdu-top{grid-template-columns:30px minmax(0,1fr) 30px;column-gap:6px}
 .cj-lsk{width:30px;height:24px}
 .cj-glass{padding:5px 6px 4px}
 .cj-kp{grid-template-columns:repeat(6,minmax(0,1fr));gap:7px 6px}
 .cj-k{grid-area:auto;order:var(--o);margin:0;height:42px}
 .cj-k.cj-num{width:auto;border-radius:21px}
 .cj-k.cj-brt{display:none}
 .cj-k.cj-alpha{font-size:18px}
}
@media(prefers-reduced-motion:reduce){.cj-blink,.cj-blinkf,.cj-alert{animation:none}.cj-key,.cj-k{transition:none}}
.deck[data-suite="cj4"] #computerPanel .cj-scratch,.deck[data-suite="cj4"] #computerPanel .cj-scratch .cj-sptext{color:#fff}
.deck[data-suite="cj4"] #computerPanel .cj-scratch .cj-b{color:#5a9ccc}