/* Tungsten, GridStore and About: operations panel, photo heroes, cabinet cutaway,
   value streams, scale selector and leadership. Tokens from aska-tokens.css. */

/* ---------- Operations panel (Tungsten hero) and control diagram ---------- */
.hmi-hero{padding-bottom:0}
.hmi{margin:0;border:var(--aska-hairline) solid var(--aska-line-on-graphite);background:color-mix(in srgb,var(--aska-white) 2%,transparent);overflow:hidden}
.hmi svg{width:100%;height:auto;overflow:visible}
@media (max-width:719px){.hmi svg{width:210%;max-width:none}}
.hmi text,.ctl-svg text{font-family:var(--aska-mono)}
.hmi .k,.ctl-svg .k{font-size:12px;letter-spacing:.08em;fill:var(--aska-muted-on-dark)}
.hmi .s,.ctl-svg .s{font-size:11px;letter-spacing:.04em;fill:var(--aska-muted-on-dark);opacity:.8}
.hmi .v{font-size:14px;fill:var(--aska-white)}
.hmi .big{font-size:24px}
.hmi .gold,.ctl-svg .gold{fill:var(--aska-gold-light)}
.hmi .frame,.ctl-svg .frame{fill:none;stroke:var(--aska-line-on-graphite)}
.hmi .box,.ctl-svg .box{fill:color-mix(in srgb,var(--aska-white) 3%,transparent);stroke:var(--aska-line-on-graphite)}
.hmi .box.hi,.ctl-svg .box.hi{stroke:var(--aska-gold-light);stroke-opacity:.55}
.hmi .ln,.ctl-svg .ln,.hmi .brk,.hmi .eq,.ctl-svg .eq{fill:none;stroke:var(--aska-white);stroke-width:1.3;opacity:.85}
.hmi .bus{fill:none;stroke:var(--aska-white);stroke-width:3}
.hmi .cellr{fill:none;stroke:var(--aska-muted-on-dark);stroke-width:1}
.hmi .track{fill:var(--aska-line-on-graphite);stroke:none}
.hmi .fillbar{fill:var(--aska-gold-light);transition:width 1.2s ease}
.hmi .dot{fill:var(--aska-gold-light);animation:hmi-pulse 2s ease-in-out infinite}
@keyframes hmi-pulse{50%{opacity:.35}}
.hmi .fl,.ctl-svg .fl{fill:none;stroke:var(--aska-gold-light);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:4 12;filter:drop-shadow(0 0 4px var(--aska-gold-light));animation:sld-flow 1.1s linear infinite}
.hmi .win{fill:var(--aska-white);opacity:.035}
.hmi .axl{fill:none;stroke:var(--aska-line-on-graphite)}
.hmi .pr{stroke:var(--aska-muted-on-dark);opacity:.55}
.hmi .plan{stroke:var(--aska-white);stroke-width:1.2;opacity:.6}
.hmi .act{stroke:var(--aska-gold-light);stroke-width:2.6;filter:drop-shadow(0 0 4px var(--aska-gold-light))}
.hmi .nowl{fill:none;stroke:var(--aska-gold-light);stroke-width:1}
.hmi [data-k]{transition:opacity .3s}
.hmi .tick{opacity:.55}
@media (prefers-reduced-motion:reduce){.hmi .fl,.ctl-svg .fl,.hmi .dot{animation:none}}
.ctl-fig{aspect-ratio:auto;padding:24px}
.ctl-svg{width:100%;height:auto}

/* ---------- Photo and video heroes ---------- */
.has-hero .photo-hero,.photo-hero{position:relative;padding:0;min-height:560px;height:min(88vh,880px);overflow:hidden}
.ph-media{position:absolute;inset:0}
.ph-media img,.ph-media video{width:100%;height:100%;object-fit:cover;transform-origin:62% 45%;animation:ph-zoom 16s cubic-bezier(.2,0,.1,1) both}
.photo-hero:not(.video-hero) .ph-media img{filter:saturate(.82) brightness(.9) contrast(1.04);object-position:60% 40%}
@keyframes ph-zoom{from{transform:scale(1.14)}to{transform:scale(1)}}
.ph-media::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,color-mix(in srgb,var(--aska-graphite) 70%,transparent) 0,transparent 22%,transparent 46%,color-mix(in srgb,var(--aska-graphite) 88%,transparent) 82%,var(--aska-graphite) 100%)}
.video-hero .ph-media::after{background:linear-gradient(180deg,color-mix(in srgb,var(--aska-graphite) 55%,transparent) 0,transparent 30%,color-mix(in srgb,var(--aska-graphite) 80%,transparent) 78%,var(--aska-graphite) 100%)}
.video-hero .ph-media video{animation:none}
.ph-head{position:absolute;left:0;right:0;bottom:56px}
.ph-head h1{color:var(--aska-white);max-width:18em}
@media (max-width:719px){.has-hero .photo-hero,.photo-hero{min-height:520px;height:78vh}.ph-head{bottom:36px}}
@media (prefers-reduced-motion:reduce){.ph-media img{animation:none}}

/* ---------- Cabinet cutaway ---------- */
.cutaway{padding:calc(var(--aska-space)*8) 0}
.cx-grid{display:grid;gap:0}
@media (min-width:960px){.cx-grid{grid-template-columns:7fr 5fr;gap:48px}}
.cx-sticky{position:sticky;top:80px;height:calc(100vh - 80px);z-index:2}
@media (max-width:959px){.cx-sticky{top:64px;height:54vh;background:var(--aska-graphite);margin:0 -16px;border-bottom:var(--aska-hairline) solid var(--aska-line-on-graphite)}}
.cx-canvas{position:relative;width:100%;height:100%}
.cx-canvas canvas{position:absolute;inset:0;width:100%!important;height:100%!important}
.cx-fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.cx-live .cx-fallback{display:none}
.cx-label{position:absolute;left:0;top:0;z-index:2;pointer-events:none;font-family:var(--aska-mono);font-size:12px;letter-spacing:.04em;color:var(--aska-gold-light);white-space:nowrap;
  padding:5px 9px;margin:-14px 0 0 18px;border:var(--aska-hairline) solid color-mix(in srgb,var(--aska-gold-light) 60%,transparent);background:color-mix(in srgb,var(--aska-graphite) 82%,transparent);opacity:0;transition:opacity .4s}
.cx-label::before{content:"";position:absolute;left:-18px;top:50%;width:18px;border-top:var(--aska-hairline) solid var(--aska-gold-light)}
.cx-label.on{opacity:1}
.cx-steps{padding:8vh 0 18vh}
.cx-steps .sec-title{color:var(--aska-white)}
.cx-step{min-height:62vh;display:flex;flex-direction:column;justify-content:center;max-width:26em}
.cx-step h3{color:var(--aska-white);font-size:var(--aska-step-3);margin:6px 0 12px}
.cx-step p:not(.label){color:var(--aska-muted-on-dark);margin:0}
.cx-step .label{color:var(--aska-gold-light);margin:0}
.js .cx-live .cx-step{opacity:.28;transition:opacity .5s}
.js .cx-live .cx-step.on{opacity:1}
@media (max-width:959px){.cx-step{min-height:58vh;padding:24px 0}.cx-steps{padding-top:24px}}

/* ---------- Value streams ---------- */
.vs-grid{display:grid;gap:24px}
@media (min-width:960px){.vs-grid{grid-template-columns:4fr 8fr;gap:64px}}
.vs-grid p{max-width:30em}
.vs{border-top:var(--aska-hairline) solid var(--aska-line-on-cream)}
.vs-row{display:grid;gap:6px;padding:18px 0;border-bottom:var(--aska-hairline) solid var(--aska-line-on-cream)}
@media (min-width:720px){.vs-row{grid-template-columns:3fr 6fr 4fr;gap:24px;align-items:baseline}}
.vs-row h3{font-size:var(--aska-step-1)}
.vs-row p{margin:0;font-size:.95rem}
.vs-row .vs-m{font-family:var(--aska-mono);font-size:.78rem;color:var(--aska-muted)}
.vs-head{padding:10px 0;font-family:var(--aska-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--aska-muted)}
@media (max-width:719px){.vs-head{display:none}}
.aside-link{margin:28px 0 0;font-size:.95rem}
.aside-link .link{margin-left:8px}

/* ---------- Scale selector ---------- */
.scale-grid,.eng-grid{display:grid;gap:40px;align-items:center}
@media (min-width:960px){.scale-grid{grid-template-columns:5fr 7fr;gap:64px}.eng-grid{grid-template-columns:5fr 7fr;gap:64px}}
.scale{margin-top:32px}
.scale input[type=range]{width:100%;margin:12px 0 24px;accent-color:var(--aska-navy)}
.scale-out{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;border-top:var(--aska-hairline) solid var(--aska-line-on-cream);padding-top:16px}
.scale-out .label{margin:0 0 4px}
.scale-n{font-size:clamp(1.3rem,2.4vw,1.8rem);color:var(--aska-navy);margin:0}
.scale-row{display:grid;grid-template-columns:repeat(12,1fr);gap:4px;margin-top:20px}
.scale-row i{height:28px;border:var(--aska-hairline) solid var(--aska-line-on-cream);transition:background .25s}
.scale-row i.on{background:var(--aska-navy);border-color:var(--aska-navy)}
.scale-photo,.eng-photo{margin:0;overflow:hidden}
.scale-photo img,.eng-photo img{width:100%;height:auto;filter:saturate(.85)}
.eng-photo{aspect-ratio:1/1;max-height:560px}
.eng-photo img{height:100%;object-fit:cover}
.eng-points{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:14px}
.eng-points li{display:grid;grid-template-columns:32px 1fr;gap:14px;align-items:center}
.eng-points .icon{width:32px;height:32px;color:var(--aska-navy)}

/* ---------- About ---------- */
@media (min-width:860px){.timeline.three{grid-template-columns:repeat(3,1fr)}}
.timeline.three.in li:nth-child(3){transition-delay:.8s}
.lead-grid{display:grid;gap:24px}
@media (min-width:960px){.lead-grid{grid-template-columns:4fr 8fr;gap:64px}}
.lead-name{font-family:var(--aska-display);font-weight:300;font-size:var(--aska-step-3);color:var(--aska-navy);margin:0 0 4px;line-height:1.2}
.lead-body p:not(.lead){max-width:40em}
.lead-body .lead{margin-top:0}
.career{display:grid;gap:24px;margin-top:56px;border-top:var(--aska-hairline) solid var(--aska-line-on-cream);padding-top:28px}
@media (min-width:860px){.career{grid-template-columns:repeat(3,1fr);gap:40px}}
.cr-group ul{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:12px}
.cr-group li{display:grid;gap:2px}
.cr-group b{font-family:var(--aska-serif);font-weight:400;font-size:var(--aska-step-1);color:var(--aska-navy)}
.cr-group span{font-size:.9rem;color:var(--aska-muted)}
.pj-strip{margin-top:40px;background:var(--aska-white);border:var(--aska-hairline) solid var(--aska-line-on-cream);padding:24px}
.pj-strip > .label{margin:0 0 16px}
.pj-row{display:grid;gap:20px}
@media (min-width:720px){.pj-row{grid-template-columns:repeat(3,1fr)}}
.pj p{margin:0}
.pj-n{font-family:var(--aska-display);font-weight:300;font-size:var(--aska-step-2);color:var(--aska-navy);line-height:1.2}
.pj-v{color:var(--aska-gold-ink);margin-top:4px!important}

/* second pass adjustments */
.has-hero .hmi-hero{padding-top:128px}
@media (max-width:719px){.has-hero .hmi-hero{padding-top:104px}}
.photo-hero:not(.video-hero) .ph-media img{filter:saturate(.75) brightness(.8) contrast(1.12)}
.photo-hero:not(.video-hero) .ph-media::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse 75% 70% at 60% 42%,transparent 40%,color-mix(in srgb,var(--aska-graphite) 55%,transparent) 100%)}
.cx-step{min-height:48vh}
@media (max-width:959px){.cx-step{min-height:46vh}}
.scale-out{grid-template-columns:1fr 1.5fr 1fr}
.scale-n{white-space:nowrap;font-size:clamp(1.15rem,2vw,1.6rem)}
.ph-head{z-index:3}

/* ---------- Third pass: year carpet, operations, cutaway list, drawings ---------- */
.has-hero .year-hero{padding-top:128px}
@media (max-width:719px){.has-hero .year-hero{padding-top:100px}}
.carpet{margin:0}
.cp-top{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.cp-top .label{color:var(--aska-muted-on-dark);margin:0}
.cp-count{display:flex;align-items:baseline;gap:10px}
.cp-count b{font-weight:400;font-size:clamp(1.6rem,3vw,2.4rem);color:var(--aska-gold-light);line-height:1;transition:color .6s}
.carpet.done .cp-count b{color:var(--aska-white)}
.cp-body{display:grid;grid-template-columns:44px 1fr;gap:10px}
.cp-body canvas{width:100%;height:clamp(220px,34vw,400px);display:block}
.cp-hours{display:flex;flex-direction:column;justify-content:space-between;font-size:.68rem;color:var(--aska-muted-on-dark);text-align:right}
.cp-months{display:grid;grid-template-columns:repeat(12,1fr);margin:8px 0 0 54px;font-size:.68rem;color:var(--aska-muted-on-dark);letter-spacing:.06em}
@media (max-width:719px){.cp-body{grid-template-columns:36px 1fr}.cp-months{margin-left:46px}.cp-months span:nth-child(even){visibility:hidden}}
.ops{padding-top:calc(var(--aska-space)*10)}
.ops-head{display:grid;gap:12px;margin-bottom:32px}
@media (min-width:960px){.ops-head{grid-template-columns:5fr 7fr;gap:64px;align-items:end}}
.ops-head .sec-title{color:var(--aska-white);margin:0}
.ops-head p{color:var(--aska-muted-on-dark);margin:0;max-width:40em}
.ops-next{padding-top:0}

/* cutaway: model left, components right */
.cutaway.section{padding:calc(var(--aska-space)*10) 0}
.cx-grid{align-items:center}
.cx-stage{position:relative;height:min(76vh,700px);min-height:420px}
@media (max-width:959px){.cx-stage{height:56vh;min-height:360px}}
.cx-side .sec-title{color:var(--aska-white);margin-bottom:8px}
.cx-hint{color:var(--aska-muted-on-dark);margin:0 0 20px}
.cx-list{display:grid;border-top:var(--aska-hairline) solid var(--aska-line-on-graphite)}
.cx-item{all:unset;box-sizing:border-box;display:grid;grid-template-columns:32px 1fr;column-gap:12px;padding:14px 0;border-bottom:var(--aska-hairline) solid var(--aska-line-on-graphite);cursor:pointer}
.cx-item .label{grid-row:span 2;color:var(--aska-muted-on-dark);margin:0;padding-top:4px}
.cx-t{font-family:var(--aska-display);font-weight:300;font-size:var(--aska-step-1);color:var(--aska-muted-on-dark);transition:color .3s}
.cx-p{color:var(--aska-muted-on-dark);font-size:.9rem;max-height:0;overflow:hidden;opacity:0;transition:max-height .45s ease,opacity .45s ease,margin .45s}
.cx-item.on .cx-t{color:var(--aska-white)}
.cx-item.on .label{color:var(--aska-gold-light)}
.cx-item.on .cx-p{max-height:7em;opacity:1;margin-top:6px}
.cx-item:focus-visible{outline:2px solid var(--aska-white);outline-offset:2px}
.no-js .cx-p,.cx-static .cx-p{max-height:none;opacity:1}

/* engineering drawings on white sheets */
.dwg-fig{margin:0}
.dwg{width:100%;height:auto;display:block}
.dwg .sheet{fill:var(--aska-white)}
.dwg .frame{fill:none;stroke:var(--aska-navy);stroke-width:.8}
.dwg .ink{fill:none;stroke:var(--aska-navy);stroke-width:1.2;stroke-linejoin:round}
.dwg .thin{fill:none;stroke:var(--aska-navy);stroke-width:.8}
.dwg .hair{fill:none;stroke:var(--aska-navy);stroke-width:.5;opacity:.7}
.dwg .thick{stroke-width:3}
.dwg .dotp{fill:var(--aska-navy);opacity:.55}
.dwg .lead{fill:none;stroke:var(--aska-gold);stroke-width:.8}
.dwg .bl{fill:var(--aska-white);stroke:var(--aska-gold)}
.dwg .dim{fill:none;stroke:var(--aska-muted);stroke-width:.7;stroke-dasharray:3 3}
.dwg .bus{stroke-width:2.4}
.dwg .plinth{fill:var(--aska-line-on-cream);transition:width .35s ease}
.dwg .pocd{fill:var(--aska-gold)}
.dwg text{font-family:var(--aska-mono);fill:var(--aska-navy)}
.dwg .dt{font-size:11px}
.dwg .cap{font-size:10px;letter-spacing:.1em;fill:var(--aska-muted)}
.dwg .bn{font-size:10px;fill:var(--aska-gold-ink)}
.dwg .tb{font-size:11px;letter-spacing:.06em}
.dwg .tb.sm{font-size:9px;fill:var(--aska-muted)}
.dwg-row .rc{transition:opacity .3s}
.dwg-row .rc.off{opacity:.08}
.dwg.chart .ghost{opacity:.15!important}
@media (min-width:960px){.eng-flip{grid-template-columns:7fr 5fr}.scale-grid{grid-template-columns:5fr 7fr}}
.h-tap{display:none}@media (hover:none){.h-hover{display:none}.h-tap{display:inline}}

/* ---------- Fourth pass ---------- */
.ph-head .h1-sm{font-size:clamp(1.8rem,3.4vw,2.6rem);max-width:16em}
/* cutaway larger, list narrower, chips */
@media (min-width:960px){.cutaway .cx-grid{grid-template-columns:8fr 4fr;gap:40px}}
.cx-stage{height:min(84vh,820px);min-height:460px}
.cx-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.cx-chips i{font-style:normal;font-size:.72rem;letter-spacing:.02em;color:var(--aska-gold-light);border:var(--aska-hairline) solid color-mix(in srgb,var(--aska-gold-light) 45%,transparent);padding:2px 8px}
.cx-item.on .cx-p{max-height:12em}
/* pencil drawing straight onto the page, no sheet */
.dwg.pencil{overflow:visible}
.dwg.pencil .ink,.dwg.pencil .thin,.dwg.pencil .hair,.dwg.pencil .frame{stroke:#3e4250}
.dwg.pencil .ink{stroke-width:1.1;stroke-linecap:round}
.dwg.pencil .dotp{fill:#3e4250;opacity:.45}
.dwg.pencil text{fill:#3e4250;font-family:var(--aska-mono)}
.dwg.pencil .cap,.dwg.pencil .tb.sm{fill:#6a6560}
.dwg.pencil .lead{stroke:var(--aska-gold);stroke-width:.9}
.dwg.pencil .bl{fill:none;stroke:var(--aska-gold)}
.dwg.pencil .bn{fill:var(--aska-gold-ink)}
.dwg.pencil .ghostline{opacity:.28}
.dwg.pencil .ghostline text{display:none}
.sketch-fig{margin:0}
.sketch-fig img{width:100%;height:auto;mix-blend-mode:multiply}
/* Tungsten laptop */
.has-hero .laptop-hero{padding-top:120px}
.laptop{margin:0 auto;max-width:1040px;perspective:1800px}
.lt-lid{background:#0a0d14;border:1px solid #2a3140;border-radius:16px 16px 6px 6px;padding:2.2% 2.2% 3%;box-shadow:0 40px 90px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.04);transform-origin:50% 100%;animation:lt-open 1.6s cubic-bezier(.2,.7,.1,1) both}
.lt-screen{overflow:hidden;border-radius:3px;background:#fff}
.lt-screen img{display:block;width:100%;height:auto}
.lt-base{height:14px;margin:0 -6%;background:linear-gradient(180deg,#3a4150,#1b2029 70%,#0f1218);border-radius:0 0 18px 18px;position:relative}
.lt-base::before{content:"";position:absolute;left:42%;right:42%;top:0;height:5px;background:#12161e;border-radius:0 0 8px 8px}
@keyframes lt-open{from{transform:rotateX(-18deg);opacity:.2}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.lt-lid{animation:none}}
.screen-shot{margin:0}
.screen-shot img{width:100%;height:auto;border-radius:10px;box-shadow:0 30px 80px rgba(0,0,0,.45)}
/* value stream cards reuse the home outcome block */
@media (min-width:1100px){.outcomes.four{grid-template-columns:repeat(4,1fr)}}
@media (min-width:860px) and (max-width:1099px){.outcomes.four{grid-template-columns:repeat(2,1fr)}}
@media (max-width:959px){.cx-stage{height:62vh;min-height:380px}}
/* ruled pencil: straight lines with construction lines left in */
.dwg.pencil .cons{fill:none;stroke:#3e4250;stroke-width:.5;opacity:.32}
.dwg.pencil .ink{stroke-width:1.15;opacity:.92}
.sketch-fig img{mix-blend-mode:normal}
/* containerised systems */
.ct-head{max-width:40em;margin-bottom:32px}
.ct-grid{display:grid;gap:16px}
@media (min-width:960px){.ct-grid{grid-template-columns:3fr 2fr;gap:20px;align-items:end}}
.ct-fig{margin:0}
.ct-fig img{display:block;width:100%;height:auto;border-radius:4px}
.ct-fig figcaption{margin-top:10px;color:var(--aska-muted);text-transform:none;letter-spacing:.02em}
.ct-stack{grid-template-columns:1fr!important;gap:48px}
.ct-stack .ct-fig img{border-radius:0}
/* About video: a representative day replayed in step with the light in the video */
.hud{position:absolute;right:max(16px,calc((100vw - 1200px)/2));top:110px;width:min(380px,calc(100% - 32px));padding:16px 18px 14px;
  background:color-mix(in srgb,var(--aska-graphite) 72%,transparent);border:var(--aska-hairline) solid rgba(255,255,255,.14);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:var(--aska-white);font-family:var(--aska-mono);opacity:0;transition:opacity .8s}
.hud.on{opacity:1}
.hud-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.hud-tag{font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--aska-muted-on-dark)}
.hud-time{font-size:1.9rem;line-height:1;color:var(--aska-white);font-variant-numeric:tabular-nums}
.hud-rows{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0 10px}
.hud-k{display:block;font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--aska-muted-on-dark);margin-bottom:4px}
.hud-v{font-size:.95rem;font-variant-numeric:tabular-nums}
.hud-v.discharge{color:var(--aska-gold-light)}.hud-v.charge{color:#9fb7d6}
.hud svg{display:block;width:100%;height:64px}
.hud-axis{display:flex;justify-content:space-between;font-size:.6rem;color:var(--aska-muted-on-dark);margin-top:4px}
.hud-foot{font-size:.62rem;color:var(--aska-muted-on-dark);margin:8px 0 0}
@media (max-width:719px){.hud{top:88px;right:16px;padding:12px 14px}.hud-time{font-size:1.4rem}.hud svg{height:34px}.hud-foot,.hud-axis{display:none}.hud-rows{margin:10px 0 8px}}
@media (prefers-reduced-motion:reduce){.hud{transition:none}}

/* systems views: installed row and energy centre, same pattern as the cutaway */
.sys.section{padding:calc(var(--aska-space)*10) 0;border-top:var(--aska-hairline) solid var(--aska-line-on-graphite)}
@media (min-width:960px){.sys .cx-grid{grid-template-columns:8fr 4fr;gap:40px}}
.sys .cx-hint{margin-bottom:14px}
.sys-seg{display:inline-flex;border:var(--aska-hairline) solid var(--aska-line-on-graphite);margin:0 0 18px}
.sys-seg button{all:unset;cursor:pointer;font-size:.82rem;padding:9px 14px;color:var(--aska-muted-on-dark)}
.sys-seg button[aria-pressed="true"]{color:var(--aska-white);background:rgba(255,255,255,.06)}
.sys-seg button:focus-visible{outline:2px solid var(--aska-white);outline-offset:-2px}
.sys .cx-canvas canvas{cursor:grab}
.sys.cx-static .sys-seg{display:none}
.sys .cx-stage{overflow:hidden}
@media (min-width:960px){.sys-flip .cx-grid{grid-template-columns:4fr 8fr}.sys-flip .cx-stage{order:2}}
.sys.section{border-top:0}

/* studio treatment for the 3D sections: light ground, plain type, datasheet rows */
.studio{background:#e7e5e0;color:var(--aska-charcoal)}
.studio .sec-title,.studio .cx-side .sec-title{color:var(--aska-navy)}
.studio .cx-hint,.studio .cx-label{display:none}
.studio .cx-list{border-top:var(--aska-hairline) solid rgba(49,47,48,.16)}
.studio .cx-item{grid-template-columns:1fr;border-bottom:var(--aska-hairline) solid rgba(49,47,48,.16)}
.studio .cx-item .label{display:none}
.studio .cx-t{color:#77716a}
.studio .cx-item.on .cx-t{color:var(--aska-charcoal)}
.studio .cx-p{color:#4a4744}
.studio .cx-item:focus-visible{outline:2px solid var(--aska-navy)}
.cx-spec{display:grid;margin-top:10px;font-size:.85rem}
.cx-spec>span{display:grid;grid-template-columns:9.5em minmax(0,1fr);gap:12px;padding:5px 0;border-top:var(--aska-hairline) solid rgba(49,47,48,.1)}
.cx-spec>span>span:first-child{color:#77716a}
.cx-spec>span>span:last-child{color:var(--aska-charcoal)}
.studio .cx-item.on .cx-p{max-height:16em}
@media (max-width:959px){.studio .cx-sticky{background:#e7e5e0}}