/* Penton Systems | Founder: Scott Penton | Orlando, Florida. Designed and engineered under the direction of Scott Penton. Copyright (c) 2026 Scott Penton / Penton Systems. */
/* Experience B: Inside the Machine. */

/* ---------- hero ---------- */
.mx-hero{min-height:min(96vh,1040px);background:var(--ink-0)}
.mx-hero .bg{z-index:-2}
.mx-hero .bg canvas{position:absolute;inset:0;width:100%;height:100%}
.mx-hero:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(2,4,9,.88) 0%,rgba(2,4,9,.55) 34%,rgba(2,4,9,0) 60%)}
.mx-hero .aurora{opacity:.55}
.mx-hero .wrap{position:relative}
.mx-hero .lede{max-width:52ch}
@media (max-width:900px){.mx-hero:before{background:linear-gradient(0deg,rgba(2,4,9,.96) 0%,rgba(2,4,9,.7) 50%,rgba(2,4,9,.25) 100%)}}

/* ---------- instrument layout ---------- */
.mx-ch1{padding-top:clamp(72px,9vw,130px)}
.mx-head{margin-bottom:clamp(32px,4vw,56px);align-items:end}
.mx-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,400px);gap:clamp(18px,2.2vw,30px);align-items:start}
@media (max-width:1100px){.mx-grid{grid-template-columns:minmax(0,1fr)}}
.mx-instrument .stage{aspect-ratio:4/3;outline-offset:-3px;cursor:grab;overflow:hidden}
.mx-instrument .stage:focus-visible{outline:2px solid var(--blue-hi)}
@media (max-width:640px){.mx-instrument .stage{aspect-ratio:1/1}}
.mx-stage.mx-static{cursor:default;aspect-ratio:auto;min-height:420px}
.mx-stage .fallback svg{width:100%;max-width:660px;height:auto}
.mx-stage .fallback{gap:12px;align-content:center}
.mx-ibar-r{display:inline-flex;gap:10px;align-items:center}
.mx-fps{color:var(--fg-3);font-size:.66rem}

/* overlay labels */
.mx-label{position:absolute;left:0;top:0;z-index:4;pointer-events:none;display:grid;gap:2px;padding:8px 12px 9px;margin:-62px 0 0 -10px;background:rgba(4,8,16,.88);border:1px solid var(--line-2);border-left:2px solid var(--blue-hi);font-size:.86rem;white-space:nowrap;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.mx-label .mono{font-size:.62rem;letter-spacing:.14em;color:var(--blue-hi)}
.mx-label b{font-weight:650;font-stretch:110%}
.mx-label small{color:var(--fg-3);font-size:.74rem}
.mx-hover{position:absolute;left:0;top:0;z-index:5;pointer-events:none;padding:6px 9px;background:rgba(4,8,16,.92);border:1px solid var(--line-2);font:500 .72rem/1.3 var(--mono);letter-spacing:.04em;color:var(--fg);white-space:nowrap}
.mx-airnote{position:absolute;left:16px;bottom:14px;z-index:4;padding:6px 10px;font:500 .72rem/1.3 var(--mono);color:var(--amber);background:rgba(4,8,16,.85);border:1px solid rgba(255,181,71,.4)}

/* footer controls */
.instrument .mx-foot{display:grid;grid-template-columns:minmax(200px,1fr) auto;gap:14px 20px;align-items:center}
.mx-foot .field{margin:0}
.mx-foot .seg button{min-height:36px;font-size:.7rem}
.mx-toggles{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px}
.mx-tog{display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:0 12px;border:1px solid var(--line-2);background:transparent;color:var(--fg-2);font:600 .7rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.mx-tog i{width:8px;height:8px;border:1px solid currentColor;border-radius:50%}
.mx-tog[aria-pressed=true]{color:#fff;border-color:var(--blue-hi);background:rgba(47,128,255,.14)}
.mx-tog[aria-pressed=true] i{background:var(--teal);border-color:var(--teal);box-shadow:0 0 8px var(--teal)}
.mx-tog.plain i{display:none}
.mx-tog:hover{color:#fff}
@media (max-width:760px){.instrument .mx-foot{grid-template-columns:minmax(0,1fr)}.mx-foot .seg{display:grid;grid-template-columns:repeat(3,1fr)}}

/* ---------- side panel ---------- */
.mx-side{border:1px solid var(--line);background:linear-gradient(180deg,rgba(17,28,47,.55),rgba(6,10,20,.75));min-width:0}
.mx-tabs{display:grid;grid-template-columns:repeat(4,1fr);width:100%;border:0;border-bottom:1px solid var(--line-2)}
.mx-tabs button{min-height:46px;font-size:.68rem;padding:0 6px}
.mx-panel{padding:20px 20px 24px}
.mx-row{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px}
.mx-two{display:grid;grid-template-columns:1fr 1fr;gap:0 12px;margin-top:16px}
.mx-two .field{margin-bottom:12px}
.mx-two input,.mx-two select{min-height:42px;padding:9px 11px;font-size:.92rem}
@media (max-width:420px){.mx-two{grid-template-columns:minmax(0,1fr)}}
.mx-panel .field>.seg{width:100%}
.mx-panel .field>.seg button{flex:1 1 auto;min-height:36px;font-size:.7rem;padding:0 8px}

/* parts list */
.mx-parts{list-style:none;margin:0 0 18px;padding:0;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.mx-parts li{border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.mx-parts button{display:flex;gap:10px;align-items:baseline;width:100%;padding:10px 10px;background:none;border:0;color:var(--fg-2);font-size:.84rem;text-align:left;cursor:pointer;line-height:1.25;transition:background .25s,color .25s}
.mx-parts button .n{font-size:.62rem;color:var(--blue-hi);letter-spacing:.08em;flex:none}
.mx-parts button:hover{background:rgba(47,128,255,.08);color:#fff}
.mx-parts button[aria-pressed=true]{background:rgba(47,128,255,.18);color:#fff;box-shadow:inset 2px 0 0 var(--blue-hi)}
.mx-spec h3{font-size:1.25rem;font-stretch:112%;margin:0 0 6px}
.mx-spec p{color:var(--fg-2);font-size:.93rem}
.mx-spec .spec{font-size:.86rem;margin:12px 0 16px}
.mx-spec .spec th{width:40%}
.mx-dl{margin:0;display:grid;gap:4px}
.mx-dl dt{font:500 .66rem/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3);margin-top:8px}
.mx-dl dd{margin:0;color:var(--fg-2);font-size:.9rem}
.mx-actions{margin-top:16px;gap:8px}

/* RAID */
.mx-stripes{--cols:8;margin:6px 0 14px;display:grid;gap:3px;font:600 .62rem/1 var(--mono)}
.mx-sh,.mx-sr{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:3px}
.mx-sh span{color:var(--fg-3);text-align:center;padding:2px 0;font-weight:500;letter-spacing:.04em}
.mx-sh span.x{color:var(--red)}
.mx-sr .c{display:grid;place-items:center;height:24px;border:1px solid var(--line);color:var(--fg-3);background:rgba(10,18,32,.6);transition:background .3s,color .3s,border-color .3s;overflow:hidden;white-space:nowrap}
.mx-sr.done .c,.mx-sr.w .c{color:#fff}
.mx-sr.done .c.d,.mx-sr.w .c.d{background:rgba(47,128,255,.35);border-color:rgba(122,184,255,.6)}
.mx-sr.done .c.p,.mx-sr.w .c.p{background:rgba(255,181,71,.32);border-color:rgba(255,181,71,.7)}
.mx-sr.done .c.q,.mx-sr.w .c.q{background:rgba(255,138,61,.3);border-color:rgba(255,138,61,.7)}
.mx-sr.done .c.m,.mx-sr.w .c.m{background:rgba(34,216,200,.25);border-color:rgba(34,216,200,.6)}
.mx-sr.w .c{box-shadow:0 0 12px rgba(122,184,255,.45)}
.mx-sr .c.x{background:repeating-linear-gradient(135deg,rgba(255,94,98,.22) 0 4px,rgba(255,94,98,.06) 4px 8px)!important;border-color:rgba(255,94,98,.7)!important;color:#ffb3b5!important}
.mx-sr .c.rb{border-color:var(--amber)!important}
.mx-sr .c.rb.empty{background:rgba(255,181,71,.06)!important;color:var(--fg-3)!important}
.mx-raid-actions{display:flex;flex-wrap:wrap;gap:6px}
.mx-raid-actions .btn{min-height:36px;padding:0 12px;font-size:.74rem}
.mx-progress{position:relative;height:22px;margin-top:12px;border:1px solid rgba(255,181,71,.45);background:rgba(255,181,71,.06)}
.mx-progress i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,rgba(255,181,71,.25),rgba(255,181,71,.55));transition:width .2s linear}
.mx-progress span{position:relative;display:block;padding:0 8px;line-height:20px;font-size:.66rem;color:var(--fg)}
.mx-status{margin:12px 0 14px;font-size:.9rem;color:var(--fg-2);min-height:2.6em}
.mx-status.ok{color:var(--teal)}.mx-status.warn{color:var(--amber)}.mx-status.bad{color:#ff9a9a}
.mx-readouts{grid-template-columns:1fr 1fr}
.mx-readouts .readout{padding:14px 14px 12px}
.mx-readouts .readout .v{font-size:clamp(1.15rem,1.7vw,1.45rem)}
.mx-readouts .readout .k{margin-bottom:8px;font-size:.6rem}
.mx-math{margin-top:14px;border-top:1px solid var(--line);padding-top:10px}
.mx-math summary{cursor:pointer;font:600 .7rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--blue-hi);padding:6px 0}
.mx-math p{font-size:.84rem;color:var(--fg-2)}
.mx-eq{font-size:.74rem!important;color:var(--fg)!important;background:rgba(5,10,20,.7);border:1px solid var(--line);padding:8px 10px;overflow-x:auto;white-space:nowrap}

/* upgrade */
.mx-warn{font-size:.86rem;margin:12px 0 0;color:var(--fg-2);min-height:1.4em}
.mx-warn.ok{color:var(--teal)}.mx-warn.warn{color:var(--amber)}.mx-warn.bad{color:#ff9a9a}

/* economics */
.mx-bars{display:grid;gap:10px;margin:6px 0 14px}
.mx-bar{display:grid;grid-template-columns:96px 1fr;align-items:center;gap:10px;font-size:.66rem;color:var(--fg-3);letter-spacing:.08em;text-transform:uppercase}
.mx-track{display:flex;height:16px;background:rgba(10,18,32,.7);border:1px solid var(--line)}
.mx-track i{display:block;height:100%;transition:width .5s var(--ease)}
.mx-track .hw,.mx-key .hw:before{background:var(--blue)}
.mx-track .sp,.mx-key .sp:before{background:var(--violet)}
.mx-track .pw,.mx-key .pw:before{background:var(--amber)}
.mx-key{display:flex;flex-wrap:wrap;gap:6px 14px;margin:2px 0 0;font-size:.74rem;color:var(--fg-3)}
.mx-key span:before{content:"";display:inline-block;width:9px;height:9px;margin-right:6px;vertical-align:-1px}

/* ---------- chapters ---------- */
.mx-gen thead th{width:auto}
.mx-gen th[scope=row]{color:var(--fg);font-family:var(--sans);text-transform:none;letter-spacing:0;font-size:.94rem;font-weight:600}
.final-cta{background:radial-gradient(50% 70% at 50% 100%,rgba(47,128,255,.22),transparent 70%),var(--ink-1)}
@media (max-width:560px){.mx-parts{grid-template-columns:minmax(0,1fr)}.mx-tabs button{font-size:.6rem}}
[data-mx-raid-level]{display:grid;grid-template-columns:repeat(5,1fr);width:100%}
[data-mx-raid-level] button{padding:0 4px;font-size:.68rem}