/* Individual scientific compositions for the Competence Center.
   All diagrams are educational schematics. Controls never imply measured product data. */
.cc-dashboard .cc-grid{grid-template-columns:repeat(12,minmax(0,1fr));gap:20px;align-items:stretch}
.cc-dashboard .cc-studio-card{grid-column:span var(--card-span,4);display:flex;flex-direction:column;position:relative;padding:26px 28px 22px;isolation:isolate;border-radius:23px;border:1px solid #b8d7e72b;background:radial-gradient(ellipse at 85% 0,color-mix(in srgb,var(--instrument) 7%,transparent),transparent 65%),linear-gradient(145deg,#172933,#101a25 70%);box-shadow:inset 0 1px 0 #d1eef511,0 15px 35px #0003;overflow:hidden}
.cc-dashboard .cc-studio-card::before{content:"";position:absolute;left:28px;top:0;width:64px;height:1px;background:var(--instrument);box-shadow:0 0 12px 1px color-mix(in srgb,var(--instrument) 30%,transparent);opacity:.65}
.cc-dashboard .cc-studio-card:hover{border-color:color-mix(in srgb,var(--instrument) 35%,#223442);background-color:transparent}
.cc-dashboard .cc-studio-card[hidden]{display:none}
.cc-dashboard .cc-studio-card .cc-card-top{margin-bottom:16px;flex-direction:row-reverse;justify-content:space-between}
.cc-dashboard .cc-studio-card .cc-card-top>span{font:10px/1.5 Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:color-mix(in srgb,var(--instrument) 65%,#7e929e)}
.cc-dashboard .cc-studio-card .cc-card-top svg{padding:6px;width:22px;height:22px;border-radius:10px;color:var(--instrument);border-color:#a3c3d223;background:#698c9f12}
.cc-dashboard .cc-studio-card h3{font-size:clamp(23px,2.05vw,31px);line-height:1.12;letter-spacing:-.025em;margin:0 0 11px;max-width:680px;text-wrap:balance}
.cc-dashboard .cc-studio-card>p{font:13px/1.65 Arial,sans-serif;color:#aac2cd;min-height:0;margin:0 0 14px;max-width:640px}
.cc-dashboard .cc-studio-card details{margin-top:auto;padding-top:17px;border-top:1px solid #8195a425}
.cc-dashboard .cc-studio-card summary{font:12px/1.4 Arial,sans-serif;color:#c7dddF;font-weight:400;align-items:center}
.cc-dashboard .cc-studio-card summary>span{display:grid;place-items:center;width:25px;height:25px;border:1px solid #728d9c44;border-radius:50%;color:var(--instrument)}
.cc-dashboard .cc-studio-card .cc-reading{padding-bottom:8px}
.cc-dashboard .cc-studio-card .cc-reading p{font-size:13px}
.cc-instrument{position:relative;margin:6px -10px 23px;padding:16px 15px 17px;background:radial-gradient(ellipse at 50% 40%,color-mix(in srgb,var(--instrument) 7%,transparent),transparent 70%),#07141c65;border:1px solid #7b9aac1f;border-radius:17px;min-width:0}
.cc-instrument-meta{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;padding-bottom:12px;border-bottom:1px solid #67849020;color:#9cb5c1;font:8px/1.6 Arial,sans-serif;letter-spacing:.12em}
.cc-instrument-meta>span{display:flex;align-items:center;gap:7px;color:color-mix(in srgb,var(--instrument) 60%,#809eae)}
.cc-instrument-meta i{width:4px;height:4px;border-radius:50%;background:var(--instrument);box-shadow:0 0 8px var(--instrument)}
.cc-instrument-meta small{font:7px/1.5 Arial,sans-serif;letter-spacing:.08em;color:#809aa9}
.cc-dashboard .cc-studio-card .cc-science-svg{width:100%;height:auto;max-height:320px;display:block;color:var(--instrument);flex-shrink:1;margin:12px 0 6px;overflow:visible}
.cc-studio-switch{display:flex;gap:4px;padding:4px;margin-top:15px;border:1px solid #90b8c32e;border-radius:12px;background:#06131b80;max-width:100%;flex-wrap:wrap}
.cc-studio-switch button{appearance:none;flex:1;min-width:60px;border:1px solid transparent;border-radius:8px;background:transparent;color:#97b0c0;font:11px/1.4 Arial,sans-serif;padding:9px 8px;cursor:pointer;transition:background-color .15s,color .15s;white-space:normal}
.cc-studio-switch button[aria-pressed=true]{background:linear-gradient(135deg,color-mix(in srgb,var(--instrument) 19%,#132737),#17303c);border-color:color-mix(in srgb,var(--instrument) 28%,transparent);box-shadow:inset 0 1px 0 #c6eeed18,0 3px 10px #0003;color:#edfafb}
.cc-studio-switch button:hover{color:#efffff}
.cc-studio-state[hidden]{display:none!important}
.cc-instrument-explanation{padding:7px 5px 0;min-height:75px}
.cc-instrument-explanation strong{font:19px/1.3 OYTI,Arial,sans-serif;color:#dbedef;letter-spacing:-.02em}
.cc-dashboard .cc-instrument-explanation p,.cc-dashboard .cc-instrument-caption{font:12px/1.7 Arial,sans-serif;color:#a7beca;margin:7px 0 0;max-width:650px}
.cc-dashboard .cc-instrument-caption{padding:13px 5px 0;margin-top:13px;border-top:1px solid #728c9b23;font-size:10px;line-height:1.7;color:#8ea9b8}
.cc-spec-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:12px 0 4px}
.cc-spec-pills span{font:9px/1.5 Arial,sans-serif;color:#b3c8d4;border:1px solid #8496a62c;border-radius:6px;padding:6px 9px;background:#6783910c}
/* Photograph and analytical overlay work as one composition. */
.cc-material-scan{position:relative;margin:0 -15px;height:330px;background:#05141c;overflow:hidden}
.cc-material-scan img{width:100%;height:100%;object-fit:cover;object-position:center 51%;opacity:.92}
.cc-material-scan::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#071820e6,transparent 40%,#06151c30)}
.cc-scan-reticle{position:absolute;z-index:1;left:28%;top:25%;width:34%;height:42%;border:1px solid #a2f5dc50;border-radius:50%;box-shadow:0 0 0 8px #99e8d00a,0 0 0 9px #abefd025}
.cc-scan-reticle::before,.cc-scan-reticle::after{content:"";position:absolute;background:#caffed80;width:10px;height:1px;top:50%;left:-5px}
.cc-scan-reticle::after{left:auto;right:-5px}
.cc-scan-coordinate{position:absolute;top:20px;left:19px;z-index:1;font:8px/1.5 Arial;letter-spacing:.1em;color:#b2d5d8}
.cc-scan-tags{position:absolute;bottom:18px;left:20px;right:20px;display:flex;flex-wrap:wrap;gap:7px;z-index:1}
.cc-scan-tags span{background:#183941bd;backdrop-filter:blur(8px);border:1px solid #93d7d94f;border-radius:6px;padding:8px 10px;font:10px/1.4 Arial;color:#e0efef;box-shadow:inset 0 1px 0 #ddfff712}
.cc-instrument-material-scan{padding-top:16px}
.cc-instrument-material-scan .cc-instrument-meta{margin-bottom:0}
.cc-studio-surfaces .cc-instrument-explanation{min-height:68px}
.cc-studio-layers .cc-science-svg{min-height:270px}
.cc-studio-mono .cc-science-svg{filter:drop-shadow(0 6px 20px #89edc815)}
.cc-mini-range{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:13px;font:11px/1.5 Arial;color:#b6cbd4;margin-top:20px}
.cc-mini-range span{font-size:9px;color:#88a4b4}
.cc-mini-range input{width:100%;accent-color:var(--instrument);height:18px;cursor:pointer}
/* The calculator has a quiet three-dimensional area motif. */
.cc-quantity-art{height:105px;position:relative;margin:10px auto 0;width:185px;isolation:isolate}
.cc-quantity-art span{display:block;position:absolute;width:90px;height:90px;left:42px;top:-5px;transform:rotateX(62deg) rotateZ(-35deg);border:1px solid #c1a5ff6b;background:linear-gradient(145deg,#a18fdb30,#7063a60a);border-radius:7px}
.cc-quantity-art span:nth-child(2){top:10px;opacity:.7}.cc-quantity-art span:nth-child(3){top:25px;opacity:.35}
.cc-quantity-art i{position:absolute;left:80px;top:34px;font:20px OYTI,Arial;color:#cab3ff}
.cc-instrument-quantity-estimator .cc-calculator-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:8px}
.cc-instrument-quantity-estimator label{font:11px/1.6 Arial;color:#bec7d9}.cc-instrument-quantity-estimator label span{float:right;color:#998eac;font-size:10px}
.cc-instrument-quantity-estimator input{box-sizing:border-box;display:block;width:100%;min-width:0;margin-top:7px;padding:10px 12px;background:#091822;border:1px solid #a398d04f;border-radius:9px;color:#e7e1fa;font:22px/1.5 OYTI,Arial}
.cc-instrument-quantity-estimator input[aria-invalid=true]{border-color:#e18e86}
.cc-instrument-quantity-estimator .cc-quantity{margin:23px 0 0;padding:0}.cc-quantity>span{font:11px Arial;color:#b6b5cc}.cc-quantity>div{margin:8px 0 10px;color:#c9b4ff;font:19px Arial}.cc-quantity output{font:52px/1.1 OYTI,Arial;letter-spacing:-.04em;overflow-wrap:anywhere;text-shadow:0 0 28px #ab84ff4d}.cc-quantity small{font:8px/1.5 Arial;color:#a8a1bc;letter-spacing:.08em}.cc-dashboard .cc-calculation-status{font:11px/1.6 Arial;color:#b3a9c9;overflow-wrap:anywhere;margin:11px 0 0}
/* Image-led cards balance the precision illustrations. */
.cc-editorial-image{position:relative;margin:0 -15px 17px;height:235px;overflow:hidden;background:#06121b}
.cc-editorial-image img{height:100%;width:100%;object-fit:cover;opacity:.75}
.cc-editorial-image::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#071923ef,transparent 85%)}
.cc-image-caption{position:absolute;bottom:20px;left:20px;z-index:1;color:#acd4d7;font:9px/1.8 Arial;letter-spacing:.12em}
.cc-image-caption strong{color:#edf9f5;font:30px/1.2 OYTI,Arial;letter-spacing:-.03em}
.cc-transfer{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:25px}.cc-transfer span{font:10px/1.5 Arial;color:#b7c8d2}.cc-transfer b{font:20px/1 OYTI,Arial;color:#a1e5dc;display:block;margin-bottom:8px}.cc-transfer i{font-style:normal;color:#74959f}
.cc-flow-photo{height:298px;position:relative;margin:0 -15px;overflow:hidden;background:#091923}
.cc-flow-photo img{height:100%;width:100%;object-fit:cover;object-position:61% 50%;opacity:.8}
.cc-flow-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#071821e8,transparent 90%),linear-gradient(0deg,#071821b0,transparent 60%)}
.cc-flow-photo>div{position:absolute;left:20px;top:24px;z-index:1;display:grid;gap:22px}
.cc-flow-photo span{font:8px/1.5 Arial;color:#e1b78a;letter-spacing:.13em}.cc-flow-photo strong{font:29px/1.35 OYTI,Arial;color:#f4e8d6;letter-spacing:-.03em}
.cc-trial-checks{display:grid;gap:9px;margin-top:18px}.cc-trial-checks label{display:flex;gap:10px;align-items:center;color:#b9ccd6;font:11px/1.6 Arial;cursor:pointer}.cc-trial-checks input{width:15px;height:15px;accent-color:#a1dccb;margin:0}.cc-dashboard .cc-trial-progress{font:9px/1.6 Arial;color:#87bcb5;border-top:1px solid #91b1b327;padding-top:14px;margin:17px 0 0}
/* Five distinct instruments share only their accessible range-input behaviour. */
.cc-dashboard .cc-studio-card .cc-control{margin:7px -10px 23px;padding:18px 20px 17px;background:radial-gradient(ellipse at 55% 40%,color-mix(in srgb,var(--control-color) 8%,transparent),transparent 68%),#07141c65;border:1px solid #7b9aac1f;border-radius:17px;display:grid;grid-template-columns:1fr;position:relative}
.cc-studio-card .cc-control-heading{gap:5px;align-items:center}.cc-studio-card .cc-control-heading label{font:11px Arial;color:#bcd0d6}.cc-studio-card .cc-control-heading>span{font:7px Arial;letter-spacing:.08em;color:#8faab7}
.cc-studio-card .cc-reading-value{margin:17px 0 0;gap:6px;z-index:1;pointer-events:none}.cc-studio-card .cc-reading-value output{font-size:47px}.cc-studio-card .cc-reading-value>span{font-size:18px}
.cc-studio-card .cc-control .cc-science-svg{margin-top:-3px;max-height:255px;--instrument:var(--control-color)}
.cc-studio-card .cc-control>p{font-size:10px;line-height:1.7;margin-top:15px;color:#8ca7b6;border-top:1px solid #748b9926;padding-top:13px}
.cc-studio-card .cc-control input[type=range]{margin-top:8px;height:25px}
.cc-studio-card .cc-range-labels{font-size:9px;color:#9cb6c3;margin-top:7px}
.cc-studio-card .cc-control input::-webkit-slider-thumb{background:var(--control-color);border-width:3px;box-shadow:0 0 12px color-mix(in srgb,var(--control-color) 55%,transparent)}
.cc-studio-peel .cc-control .cc-science-svg{max-height:255px;margin-top:-35px}
.cc-studio-heat .cc-control .cc-science-svg{margin-top:-35px;max-height:255px}
.cc-studio-softening .cc-control .cc-science-svg{max-height:300px;margin-top:-24px}
.cc-studio-tensile .cc-science-svg{max-height:320px}
.cc-studio-rolling .cc-instrument{display:grid;grid-template-columns:1.25fr 1fr;column-gap:35px;padding-inline:25px}
.cc-studio-rolling .cc-instrument-meta{grid-column:1/-1}.cc-studio-rolling .cc-science-svg{grid-column:1;grid-row:2/4;min-height:200px}.cc-studio-rolling .cc-replay-row{grid-column:2;align-self:end;padding-bottom:12px}.cc-studio-rolling .cc-instrument-caption{grid-column:2;align-self:start}
.cc-studio-replay{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px 17px;border:1px solid #bce2975c;border-radius:10px;background:linear-gradient(130deg,#63895640,#244a4530);color:#e3f1d8;font:12px/1.4 Arial;cursor:pointer}.cc-studio-replay span{color:#bdda9d;font-size:18px}.cc-dashboard .cc-roll-status{font:12px/1.7 Arial;color:#adc1cb;max-width:310px;margin-top:20px}
.cc-passports{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:27px 0 11px}
.cc-passports>div{position:relative;padding:20px 17px;border:1px solid #9eb9c634;border-radius:11px;background:linear-gradient(145deg,#3b62712b,#20384c0d);overflow:hidden}
.cc-passports>div::before{content:"";display:block;width:65%;height:21px;margin-bottom:20px;background:repeating-linear-gradient(90deg,#91c4d164 0px 1px,transparent 1px 4px,#91c4d14a 4px 7px,transparent 7px 10px);opacity:.65}
.cc-passports span{display:block;font:7px/1.6 Arial;letter-spacing:.13em;color:#96b8c8}.cc-passports strong{display:block;margin:14px 0 8px;font:24px/1.2 OYTI,Arial;color:#d1e4eb}.cc-passports small{font:10px/1.6 Arial;color:#9bb5c5}.cc-passports i{position:absolute;right:14px;top:21px;font:15px OYTI,Arial;color:#b9d8e4}
.cc-studio-card :is(button,input,summary):focus-visible{outline:2px solid var(--instrument);outline-offset:4px}
@media(min-width:1500px){.cc-dashboard .cc-studio-card h3{font-size:30px}.cc-instrument-explanation strong{font-size:21px}}
@media(max-width:1100px){.cc-dashboard .cc-grid{gap:16px}.cc-dashboard .cc-studio-card{padding:22px 22px 20px}.cc-dashboard .cc-studio-card{grid-column:span 6}.cc-dashboard .cc-studio-rolling,.cc-dashboard .cc-studio-variation{grid-column:span 12}.cc-material-scan{height:280px}.cc-studio-layers .cc-science-svg{min-height:240px}.cc-instrument-explanation{min-height:85px}.cc-passports{gap:10px}}
@media(max-width:700px){.cc-dashboard .cc-grid{grid-template-columns:minmax(0,1fr);gap:19px}.cc-dashboard .cc-studio-card,.cc-dashboard .cc-studio-rolling,.cc-dashboard .cc-studio-variation{grid-column:auto;padding:22px 21px 20px}.cc-dashboard .cc-studio-card h3{font-size:26px}.cc-instrument{margin-inline:-8px;padding:14px 12px 15px}.cc-instrument-explanation{min-height:0}.cc-material-scan{margin-inline:-12px;height:260px}.cc-scan-tags{left:14px;right:14px;gap:5px}.cc-scan-tags span{font-size:8px;padding:7px 8px}.cc-studio-switch button{padding:9px 5px;font-size:10px}.cc-studio-layers .cc-science-svg{min-height:0}.cc-dashboard .cc-studio-card .cc-science-svg{max-height:none}.cc-studio-rolling .cc-instrument{display:block;padding-inline:12px}.cc-studio-rolling .cc-science-svg{min-height:0}.cc-studio-rolling .cc-replay-row{padding-top:13px}.cc-passports{grid-template-columns:1fr 1fr;gap:10px;padding-top:20px}.cc-passports>div{padding:16px 13px}.cc-passports strong{font-size:21px}.cc-passports i{right:12px;top:16px}.cc-dashboard .cc-studio-card .cc-control{padding:16px;margin-inline:-8px}.cc-editorial-image,.cc-flow-photo{margin-inline:-12px}.cc-instrument-meta{letter-spacing:.08em;gap:5px}.cc-instrument-meta small{font-size:6px}.cc-studio-card .cc-control-heading>span{font-size:6px}.cc-studio-card .cc-reading-value output{font-size:42px}.cc-studio-peel .cc-control .cc-science-svg,.cc-studio-heat .cc-control .cc-science-svg,.cc-studio-softening .cc-control .cc-science-svg{margin-top:0}.cc-studio-card details{margin-top:0}}
@media(prefers-reduced-motion:reduce){.cc-studio-card,.cc-studio-switch button{transition:none!important}}