/* Palette variants for the Console direction.
   Brixen already owns dark-navy + orange, so amber-on-void reads as the same
   family. These four take the same instrument vernacular somewhere else.
   Contrast floor: body text >= 4.5:1, secondary >= 4:1. The original steel-dim
   was 2.6:1 on void, which is why it read as hard to see. */

/* ---- A · ALUMINUM — light lab instrument. Tektronix, Brüel & Kjær, HP.
        The panel is brushed metal; the meter stays a recessed dark window,
        which is how real gear is actually built. ---- */
body[data-p="aluminum"]{
  --void:#C9CCC7; --void2:#D6D8D3; --slate:#E3E5E1; --slate2:#EDEEEB;
  --edge:#A9AEA8; --edge2:#8E948D;
  --amber:#C02D1E; --amber-dim:#8E2216; --amber-glow:rgba(192,45,30,.2);
  --steel:#3A4149; --steel-dim:#5C646D;
  --peak:#0B5FFF; --paper:#12161B; --paper-dim:#3A4149;
  --meter-bg:#14181D; --meter-off:#252B33;
}
/* on a light panel the meter window keeps its own dark ground */
body[data-p="aluminum"] .ch-segs{background:var(--meter-bg);border-color:#7E847D}
body[data-p="aluminum"] .seg{background:var(--meter-off)}
body[data-p="aluminum"] .ch-hero{background:
  radial-gradient(120% 90% at 78% 8%,rgba(0,0,0,.05),transparent 58%),
  linear-gradient(180deg,#D6D8D3,#C9CCC7)}
body[data-p="aluminum"] .ch-hdr{background:rgba(214,216,211,.9)}
body[data-p="aluminum"] .ch-bridge{background:linear-gradient(180deg,#E3E5E1,#D2D5D0)}
body[data-p="aluminum"] .ch-btn{background:#DDDFDB;color:#12161B}
body[data-p="aluminum"] .ch-btn.primary{background:#C02D1E;color:#fff;border-color:#8E2216}
body[data-p="aluminum"] .strip,body[data-p="aluminum"] .mth{background:#DEE0DC}
body[data-p="aluminum"] .strip:hover,body[data-p="aluminum"] .mth:hover{background:#E9EAE7}
body[data-p="aluminum"] .strip.internal{background:#D4D7D2}
body[data-p="aluminum"] .rack-row{background:#DEE0DC}
body[data-p="aluminum"] .rack-row:nth-child(even){background:#D6D8D3}
body[data-p="aluminum"] .ch-cta{background:linear-gradient(120deg,#1A1F26,#12161B)}
body[data-p="aluminum"] .ch-cta h2{color:#EDEEEB}
body[data-p="aluminum"] .ch-cta .ch-eyebrow{color:#9AA3AD}
body[data-p="aluminum"] .ch-scan{opacity:0}

/* ---- B · API — the green console. API 1608, deep forest panel, orange-red
        signal, cream numerals. Green is genuinely uncommon and reads as lab. ---- */
body[data-p="api"]{
  --void:#0A120D; --void2:#0E1712; --slate:#152219; --slate2:#1D2E23;
  --edge:#233426; --edge2:#354A3A;
  --amber:#F0522A; --amber-dim:#8C3018; --amber-glow:rgba(240,82,42,.18);
  --steel:#A9BCAE; --steel-dim:#7C9182;
  --peak:#FFD23F; --paper:#EFEBE0; --paper-dim:#BFC7BE;
  --meter-off:#18251C;
}
body[data-p="api"] .seg{background:var(--meter-off)}
body[data-p="api"] .ch-hero{background:
  radial-gradient(120% 90% at 78% 8%,rgba(240,82,42,.07),transparent 58%),
  linear-gradient(180deg,#0A120D,#0E1712)}

/* ---- C · NEVE — mid slate-blue panel, cream, and the famous red knobs.
        Lighter than Brixen's near-black, so it does not collide. ---- */
body[data-p="neve"]{
  --void:#39434E; --void2:#404B57; --slate:#4A5663; --slate2:#55626F;
  --edge:#5C6875; --edge2:#77848F;
  --amber:#E23B2E; --amber-dim:#A02418; --amber-glow:rgba(226,59,46,.22);
  --steel:#D3D8DC; --steel-dim:#AAB3BC;
  --peak:#FFC94A; --paper:#F4F2EC; --paper-dim:#C9CFD5;
  --meter-off:#2A323B;
}
body[data-p="neve"] .seg{background:var(--meter-off)}
body[data-p="neve"] .ch-segs{background:#212932}
body[data-p="neve"] .ch-hero{background:
  radial-gradient(120% 90% at 78% 8%,rgba(226,59,46,.08),transparent 58%),
  linear-gradient(180deg,#39434E,#404B57)}
body[data-p="neve"] .ch-hdr{background:rgba(57,67,78,.9)}
body[data-p="neve"] .ch-cta{background:linear-gradient(120deg,#2B333C,#1F262D)}

/* ---- D · OSCILLOSCOPE — near-black with phosphor cyan and a violet peak.
        Cold where Brixen is warm; the accent is nowhere near orange. ---- */
body[data-p="scope"]{
  --void:#07090C; --void2:#0B0F14; --slate:#121821; --slate2:#18202B;
  --edge:#1F2833; --edge2:#31404F;
  --amber:#35E0C4; --amber-dim:#1A7A6A; --amber-glow:rgba(53,224,196,.18);
  --steel:#9FB2C4; --steel-dim:#7286A0;
  --peak:#B07CFF; --paper:#E8EFF5; --paper-dim:#B4C4D2;
  --meter-off:#141C26;
}
body[data-p="scope"] .seg{background:var(--meter-off)}
body[data-p="scope"] .ch-btn.primary{color:#04120F}
body[data-p="scope"] .ch-hero{background:
  radial-gradient(120% 90% at 78% 8%,rgba(53,224,196,.07),transparent 58%),
  linear-gradient(180deg,#07090C,#0B0F14)}

/* ---- readability lift, applies to every palette ---- */
.ch-sub{color:var(--steel)}
.ch-sub.small,.strip-detail,.mth-why,.ch-caption{color:var(--steel-dim)}
.strip-plain{color:var(--steel)}
.rack-row b,.mth-what,.strip-one{color:var(--paper)}

/* ---- the switcher itself ---- */
.pswitch{position:fixed;left:50%;transform:translateX(-50%);bottom:18px;z-index:90;
  display:flex;gap:2px;padding:5px;border-radius:5px;
  background:rgba(18,22,29,.92);border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(12px);box-shadow:0 10px 34px rgba(0,0,0,.5)}
.pswitch b{display:flex;align-items:center;padding:0 11px 0 8px;font-family:var(--mono);
  font-size:.58rem;letter-spacing:.18em;color:#7C8DA6;text-transform:uppercase;font-weight:400}
.pswitch button{padding:7px 13px;border:0;border-radius:3px;cursor:pointer;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;
  background:transparent;color:#B9C3CF;transition:.14s}
.pswitch button:hover{background:rgba(255,255,255,.09);color:#fff}
.pswitch button[aria-pressed="true"]{background:#fff;color:#12161B;font-weight:600}
@media(max-width:700px){.pswitch b{display:none}.pswitch button{padding:7px 9px;font-size:.6rem}}

/* ============================================================
   ALUMINUM — full execution, not a palette swap.
   A light panel needs a different physics than a dark one: bevels instead of
   glows, grain instead of scanlines, and the meter window becomes the single
   dark element the whole page points at. ============================ */

body[data-p="aluminum"]{
  --grain:rgba(0,0,0,.035);
  --hi:rgba(255,255,255,.85);
  --lo:rgba(0,0,0,.14);
}

/* brushed metal: fine vertical grain, barely there, plus a soft top light */
body[data-p="aluminum"] .ch-hero{
  background:
    linear-gradient(90deg,transparent 0 1px,var(--grain) 1px 2px),
    radial-gradient(90% 70% at 50% -10%,rgba(255,255,255,.7),transparent 62%),
    linear-gradient(180deg,#D9DBD6,#C6C9C4);
  background-size:3px 100%,100% 100%,100% 100%;
}
body[data-p="aluminum"] .ch-section{
  background:linear-gradient(90deg,transparent 0 1px,rgba(0,0,0,.022) 1px 2px),#D2D5D0;
  background-size:3px 100%,100% 100%;
}
body[data-p="aluminum"] .ch-section.alt{
  background:linear-gradient(90deg,transparent 0 1px,rgba(0,0,0,.028) 1px 2px),#C9CCC7;
  background-size:3px 100%,100% 100%;
  border-color:#AEB3AD;
}

/* the bridge is a machined faceplate: light top edge, shadow underneath */
body[data-p="aluminum"] .ch-bridge{
  background:linear-gradient(180deg,#E6E8E4,#D0D3CE);
  border:1px solid #A5AAA4;
  box-shadow:0 1px 0 var(--hi) inset, 0 -1px 0 var(--lo) inset,
             0 22px 48px rgba(0,0,0,.22);
}
body[data-p="aluminum"] .ch-bridge-head{border-bottom-color:#B4B9B3;color:#5C646D}

/* the one dark element on the page — recessed, lit from within */
body[data-p="aluminum"] .ch-segs{
  background:#0E1218;
  border:1px solid #7A807A;
  box-shadow:inset 0 3px 12px rgba(0,0,0,.85), 0 1px 0 var(--hi);
}
body[data-p="aluminum"] .seg{background:#20262E}
body[data-p="aluminum"] .seg.lit{background:#7A2418}
body[data-p="aluminum"] .seg.hot{background:#E03A26;box-shadow:0 0 9px rgba(224,58,38,.55)}
body[data-p="aluminum"] .seg.peak{background:#3D7BFF;box-shadow:0 0 10px rgba(61,123,255,.6)}
body[data-p="aluminum"] .ch-read b{color:#12161B}
body[data-p="aluminum"] .ch-label{color:#4A525B}
body[data-p="aluminum"] .ch-caption{border-top-color:#B4B9B3;color:#5C646D}

/* channel strips: engraved plates, not floating cards */
body[data-p="aluminum"] .ch-strips{background:#A5AAA4;border-color:#9AA099}
body[data-p="aluminum"] .strip{background:#DCDEDA;box-shadow:0 1px 0 var(--hi) inset}
body[data-p="aluminum"] .strip:hover{background:#E6E8E4}
body[data-p="aluminum"] .strip.internal{background:#CFD2CD}
body[data-p="aluminum"] .strip-id{background:rgba(0,0,0,.05);border-right-color:#B4B9B3}
body[data-p="aluminum"] .strip-main{border-right-color:#B4B9B3}
body[data-p="aluminum"] .strip-num{color:#8A918B}
body[data-p="aluminum"] .strip-led{background:#A8ADA7;box-shadow:inset 0 1px 2px rgba(0,0,0,.3)}
body[data-p="aluminum"] .strip-led.on{background:#E03A26;box-shadow:0 0 8px rgba(224,58,38,.7),inset 0 1px 1px rgba(255,255,255,.4)}
body[data-p="aluminum"] .strip-state{color:#A0281A;border-color:#C4837A}
body[data-p="aluminum"] .strip.internal .strip-state{color:#5C646D;border-color:#A8ADA7}
body[data-p="aluminum"] .strip-foot{border-top-color:#B4B9B3}
body[data-p="aluminum"] .dat b{color:#A0281A}

/* method: engraved panel */
body[data-p="aluminum"] .ch-method{background:#A5AAA4;border-color:#9AA099}
body[data-p="aluminum"] .mth{background:#DCDEDA}
body[data-p="aluminum"] .mth:hover{background:#E6E8E4}
body[data-p="aluminum"] .mth h3{color:#A0281A}
body[data-p="aluminum"] .mth-why{border-top-color:#B4B9B3}

/* rack */
body[data-p="aluminum"] .ch-rack{border-color:#A5AAA4}
body[data-p="aluminum"] .rack-row{background:#DCDEDA;border-bottom-color:#B4B9B3}
body[data-p="aluminum"] .rack-row:nth-child(even){background:#D2D5D0}

/* header + rules */
body[data-p="aluminum"] .ch-hdr{background:rgba(217,219,214,.92);border-bottom-color:#AEB3AD}
body[data-p="aluminum"] .ch-mark b{color:#12161B}
body[data-p="aluminum"] .ch-mark i{color:#6C747D}
body[data-p="aluminum"] .ch-nav a:not(.ch-btn){color:#4A525B}
body[data-p="aluminum"] .ch-nav a:not(.ch-btn):hover{color:#A0281A}
body[data-p="aluminum"] .ch-rule{background:#C02D1E}
body[data-p="aluminum"] .ch-led{background:#E03A26;box-shadow:0 0 8px rgba(224,58,38,.6)}
body[data-p="aluminum"] .ch-eyebrow{color:#5C646D}

/* buttons get a real bevel on a light panel */
body[data-p="aluminum"] .ch-btn{
  background:linear-gradient(180deg,#E8EAE6,#D4D7D2);border-color:#9AA099;color:#12161B;
  box-shadow:0 1px 0 var(--hi) inset,0 1px 2px rgba(0,0,0,.12)}
body[data-p="aluminum"] .ch-btn:hover{background:linear-gradient(180deg,#F0F1EE,#DDE0DB);
  border-color:#C02D1E;color:#A0281A}
body[data-p="aluminum"] .ch-btn.primary{
  background:linear-gradient(180deg,#D33A28,#B02618);border-color:#8E2216;color:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,.28) inset,0 2px 5px rgba(142,34,22,.34)}
body[data-p="aluminum"] .ch-btn.primary:hover{background:linear-gradient(180deg,#E04935,#C02D1E)}
body[data-p="aluminum"] .ch-btn.ghost{background:transparent;box-shadow:none}

/* the closing panel goes dark — the page ends where the meter began */
body[data-p="aluminum"] .ch-cta{
  background:linear-gradient(120deg,#171C22,#0E1218);border-top:1px solid #9AA099}
body[data-p="aluminum"] .ch-cta h2{color:#EDEEEB}
body[data-p="aluminum"] .ch-cta .ch-eyebrow{color:#9AA3AD}
body[data-p="aluminum"] .ch-ftr{background:#C9CCC7;border-top-color:#AEB3AD;color:#5C646D}

/* ============================================================
   AQUA VARIANTS
   The bright phosphor aqua only works where it sits on dark — inside the meter
   well. On a light panel it drops to ~1.5:1 against the metal, so text and
   chrome use a deep teal that holds 4.5:1, and the bright value is reserved
   for the one place it is legible and belongs. ============================ */

/* ---- ALUMINUM · AQUA ---- */
body[data-p="alu-aqua"]{
  --void:#C9CCC7; --void2:#D6D8D3; --slate:#E3E5E1; --slate2:#EDEEEB;
  --edge:#A9AEA8; --edge2:#8E948D;
  --amber:#0B6E60; --amber-dim:#08544A; --amber-glow:rgba(11,110,96,.18);
  --steel:#3A4149; --steel-dim:#5C646D;
  --peak:#6B46E5; --paper:#12161B; --paper-dim:#3A4149;
  --grain:rgba(0,0,0,.035); --hi:rgba(255,255,255,.85); --lo:rgba(0,0,0,.14);
  --phos:#35E0C4;            /* bright phosphor — meter well only */
}
body[data-p="alu-aqua"] .ch-hero{
  background:linear-gradient(90deg,transparent 0 1px,var(--grain) 1px 2px),
    radial-gradient(90% 70% at 50% -10%,rgba(255,255,255,.7),transparent 62%),
    linear-gradient(180deg,#D9DBD6,#C6C9C4);
  background-size:3px 100%,100% 100%,100% 100%}
body[data-p="alu-aqua"] .ch-section{
  background:linear-gradient(90deg,transparent 0 1px,rgba(0,0,0,.022) 1px 2px),#D2D5D0;
  background-size:3px 100%,100% 100%}
body[data-p="alu-aqua"] .ch-section.alt{
  background:linear-gradient(90deg,transparent 0 1px,rgba(0,0,0,.028) 1px 2px),#C9CCC7;
  background-size:3px 100%,100% 100%;border-color:#AEB3AD}
body[data-p="alu-aqua"] .ch-bridge{background:linear-gradient(180deg,#E6E8E4,#D0D3CE);
  border:1px solid #A5AAA4;
  box-shadow:0 1px 0 var(--hi) inset,0 -1px 0 var(--lo) inset,0 22px 48px rgba(0,0,0,.22)}
body[data-p="alu-aqua"] .ch-bridge-head{border-bottom-color:#B4B9B3;color:#5C646D}
body[data-p="alu-aqua"] .ch-segs{background:#07110F;border:1px solid #7A807A;
  box-shadow:inset 0 3px 14px rgba(0,0,0,.9),0 1px 0 var(--hi)}
body[data-p="alu-aqua"] .seg{background:#15221F}
body[data-p="alu-aqua"] .seg.lit{background:#126B5C}
body[data-p="alu-aqua"] .seg.hot{background:var(--phos);box-shadow:0 0 10px rgba(53,224,196,.6)}
body[data-p="alu-aqua"] .seg.peak{background:#8B6BFF;box-shadow:0 0 11px rgba(139,107,255,.65)}
body[data-p="alu-aqua"] .ch-read b{color:#0B4A41}
body[data-p="alu-aqua"] .ch-label{color:#4A525B}
body[data-p="alu-aqua"] .ch-caption{border-top-color:#B4B9B3;color:#5C646D}
body[data-p="alu-aqua"] .ch-strips{background:#A5AAA4;border-color:#9AA099}
body[data-p="alu-aqua"] .strip{background:#DCDEDA;box-shadow:0 1px 0 var(--hi) inset}
body[data-p="alu-aqua"] .strip:hover{background:#E6E8E4}
body[data-p="alu-aqua"] .strip.internal{background:#CFD2CD}
body[data-p="alu-aqua"] .strip-id{background:rgba(0,0,0,.05);border-right-color:#B4B9B3}
body[data-p="alu-aqua"] .strip-main{border-right-color:#B4B9B3}
body[data-p="alu-aqua"] .strip-num{color:#8A918B}
body[data-p="alu-aqua"] .strip-led{background:#A8ADA7;box-shadow:inset 0 1px 2px rgba(0,0,0,.3)}
body[data-p="alu-aqua"] .strip-led.on{background:#12A48F;
  box-shadow:0 0 9px rgba(53,224,196,.75),inset 0 1px 1px rgba(255,255,255,.4)}
body[data-p="alu-aqua"] .strip-state{color:#0B6E60;border-color:#7FB8AF}
body[data-p="alu-aqua"] .strip.internal .strip-state{color:#5C646D;border-color:#A8ADA7}
body[data-p="alu-aqua"] .strip-foot{border-top-color:#B4B9B3}
body[data-p="alu-aqua"] .dat b{color:#0B6E60}
body[data-p="alu-aqua"] .ch-method{background:#A5AAA4;border-color:#9AA099}
body[data-p="alu-aqua"] .mth{background:#DCDEDA}
body[data-p="alu-aqua"] .mth:hover{background:#E6E8E4}
body[data-p="alu-aqua"] .mth h3{color:#0B6E60}
body[data-p="alu-aqua"] .mth-why{border-top-color:#B4B9B3}
body[data-p="alu-aqua"] .ch-rack{border-color:#A5AAA4}
body[data-p="alu-aqua"] .rack-row{background:#DCDEDA;border-bottom-color:#B4B9B3}
body[data-p="alu-aqua"] .rack-row:nth-child(even){background:#D2D5D0}
body[data-p="alu-aqua"] .ch-hdr{background:rgba(217,219,214,.92);border-bottom-color:#AEB3AD}
body[data-p="alu-aqua"] .ch-mark b{color:#12161B}
body[data-p="alu-aqua"] .ch-mark i{color:#6C747D}
body[data-p="alu-aqua"] .ch-nav a:not(.ch-btn){color:#4A525B}
body[data-p="alu-aqua"] .ch-nav a:not(.ch-btn):hover{color:#0B6E60}
body[data-p="alu-aqua"] .ch-rule{background:#0B6E60}
body[data-p="alu-aqua"] .ch-led{background:#12A48F;box-shadow:0 0 9px rgba(53,224,196,.7)}
body[data-p="alu-aqua"] .ch-eyebrow{color:#5C646D}
body[data-p="alu-aqua"] .ch-btn{background:linear-gradient(180deg,#E8EAE6,#D4D7D2);
  border-color:#9AA099;color:#12161B;box-shadow:0 1px 0 var(--hi) inset,0 1px 2px rgba(0,0,0,.12)}
body[data-p="alu-aqua"] .ch-btn:hover{background:linear-gradient(180deg,#F0F1EE,#DDE0DB);
  border-color:#0B6E60;color:#0B6E60}
body[data-p="alu-aqua"] .ch-btn.primary{background:linear-gradient(180deg,#12907E,#0B6E60);
  border-color:#08544A;color:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,.26) inset,0 2px 5px rgba(8,84,74,.34)}
body[data-p="alu-aqua"] .ch-btn.primary:hover{background:linear-gradient(180deg,#16A995,#0E7E6E)}
body[data-p="alu-aqua"] .ch-btn.ghost{background:transparent;box-shadow:none}
body[data-p="alu-aqua"] .ch-cta{background:linear-gradient(120deg,#0E1F1C,#071110);
  border-top:1px solid #9AA099}
body[data-p="alu-aqua"] .ch-cta h2{color:#E4F5F1}
body[data-p="alu-aqua"] .ch-cta .ch-eyebrow{color:#7FB8AF}
body[data-p="alu-aqua"] .ch-cta .ch-btn.primary{background:var(--phos);color:#04120F;border-color:var(--phos)}
body[data-p="alu-aqua"] .ch-ftr{background:#C9CCC7;border-top-color:#AEB3AD;color:#5C646D}
body[data-p="alu-aqua"] .ch-scan{opacity:0}

/* ---- NEVE · AQUA — phosphor on slate. More tonal: the aqua and the blue-grey
        are neighbours, so it reads as one instrument rather than two colours. ---- */
body[data-p="neve-aqua"]{
  --void:#39434E; --void2:#404B57; --slate:#4A5663; --slate2:#55626F;
  --edge:#5C6875; --edge2:#77848F;
  --amber:#35E0C4; --amber-dim:#12776A; --amber-glow:rgba(53,224,196,.2);
  --steel:#D3D8DC; --steel-dim:#AAB3BC;
  --peak:#A98BFF; --paper:#F4F2EC; --paper-dim:#C9CFD5;
  --meter-off:#26313A;
}
body[data-p="neve-aqua"] .seg{background:var(--meter-off)}
body[data-p="neve-aqua"] .seg.lit{background:#12776A}
body[data-p="neve-aqua"] .seg.hot{background:#35E0C4;box-shadow:0 0 10px rgba(53,224,196,.55)}
body[data-p="neve-aqua"] .seg.peak{background:#A98BFF;box-shadow:0 0 11px rgba(169,139,255,.6)}
body[data-p="neve-aqua"] .ch-segs{background:#1A232B;border-color:#4A5663;
  box-shadow:inset 0 3px 12px rgba(0,0,0,.7)}
body[data-p="neve-aqua"] .ch-hero{background:
  radial-gradient(120% 90% at 78% 8%,rgba(53,224,196,.09),transparent 58%),
  linear-gradient(180deg,#39434E,#404B57)}
body[data-p="neve-aqua"] .ch-hdr{background:rgba(57,67,78,.92)}
body[data-p="neve-aqua"] .ch-bridge{background:linear-gradient(180deg,#4E5A67,#3D4854);
  box-shadow:0 1px 0 rgba(255,255,255,.1) inset,0 22px 52px rgba(0,0,0,.4)}
body[data-p="neve-aqua"] .ch-btn.primary{color:#04120F}
body[data-p="neve-aqua"] .ch-cta{background:linear-gradient(120deg,#2B333C,#1B2228)}


/* wide bridge keeps each palette's faceplate treatment but loses the card edges */
body[data-p="alu-aqua"] .ch-bridge.wide{
  background:linear-gradient(180deg,#DDE0DB,#CBCEC9);
  border-top:1px solid #A5AAA4;
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 -14px 40px rgba(0,0,0,.1) inset}
body[data-p="aluminum"] .ch-bridge.wide{
  background:linear-gradient(180deg,#DDE0DB,#CBCEC9);
  border-top:1px solid #A5AAA4;
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 -14px 40px rgba(0,0,0,.1) inset}
body[data-p="neve-aqua"] .ch-bridge.wide,body[data-p="neve"] .ch-bridge.wide{
  background:linear-gradient(180deg,#434F5C,#38424D);
  border-top:1px solid #5C6875;
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 -16px 44px rgba(0,0,0,.28) inset}