/*
 * CHE — Design & Experience · Atelier v4 (2026-10-21)
 * A four-scene illustrative study, not a claim of client delivery.
 * Quiet Stellar palette (ice-blue / ivory / lilac), approved CHE star.
 * All motion requires user interaction; no looping particles.
 */
#che-page.che-canonical #design{
  --dx-ink:#f2f5f1;--dx-muted:#bbc9c3;
  --dx-blue:151,188,218;--dx-ivory:204,174,131;--dx-lilac:184,169,208;
  position:relative;isolation:isolate;overflow:hidden;
  padding:clamp(74px,7.6vw,108px) 0 clamp(70px,7vw,100px);
  background:#090c0e;border-top:1px solid rgba(219,230,226,.14);
}
#che-page.che-canonical #design .che-dx-atmosphere{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 65% 26% at 73% 6%,rgba(var(--dx-blue),.055),transparent 78%),
    radial-gradient(ellipse 53% 45% at 0% 70%,rgba(var(--dx-ivory),.018),transparent 82%),
    linear-gradient(180deg,#090c0e,#080b0d);
}
#che-page.che-canonical #design .che-shell{position:relative;z-index:1}
#che-page.che-canonical #design .che-dx-overline{
  display:flex;align-items:center;gap:13px;min-width:0;
  font-size:12px;line-height:1.5;font-weight:720;letter-spacing:.12em;color:#edf1ed;
}
#che-page.che-canonical #design .che-dx-mark{
  width:20px;height:20px;filter:drop-shadow(0 0 8px rgba(var(--dx-blue),.3))
}
#che-page.che-canonical #design .che-dx-overline>span:nth-child(2){white-space:nowrap}
#che-page.che-canonical #design .che-dx-overline-rule{
  height:1px;flex:1 1 auto;min-width:20px;
  background:linear-gradient(90deg,rgba(204,224,232,.29),rgba(204,224,232,.045))
}
#che-page.che-canonical #design .che-dx-overline>span:last-child{
  letter-spacing:0;font-size:12px;font-weight:500;color:#a7b8b1;white-space:nowrap
}
#che-page.che-canonical #design .che-dx-heading{
  display:grid;grid-template-columns:minmax(0,1.22fr) minmax(0,.78fr);
  align-items:end;gap:clamp(32px,6vw,84px);
  margin:clamp(48px,5.4vw,74px) 0 clamp(54px,6vw,78px);
}
#che-page.che-canonical #design .che-dx-heading h2{
  margin:0;max-width:15.5ch;font-size:clamp(43px,4.55vw,66px);
  line-height:1.1;letter-spacing:-.035em;font-weight:745;
  color:var(--dx-ink);text-wrap:balance;
}
#che-page.che-canonical #design .che-dx-title-light{
  display:block;margin-top:.14em;color:#c1d3db;
  text-shadow:0 0 35px rgba(var(--dx-blue),.085)
}
#che-page.che-canonical #design .che-dx-heading>p{
  max-width:46ch;margin:0 0 5px;font-size:17px;line-height:1.73;
  font-weight:420;color:#bfcbc5;text-wrap:pretty
}
#che-page.che-canonical #design .che-dx-studio{
  display:grid;grid-template-columns:minmax(0,.81fr) minmax(0,1.19fr);
  gap:clamp(27px,4.6vw,64px);align-items:start;
}
#che-page.che-canonical #design .che-dx-selection{min-width:0}
#che-page.che-canonical #design .che-dx-selection-head{
  min-height:58px;display:flex;gap:18px;align-items:flex-start;justify-content:space-between;
  color:#a7b8b2;font-size:12px;font-weight:710;letter-spacing:.1em;line-height:1.55
}
#che-page.che-canonical #design .che-dx-selection-head>span:last-child{
  white-space:nowrap;color:#adbec0;letter-spacing:.035em;font-variant-numeric:tabular-nums
}
#che-page.che-canonical #design .che-dx-selection-list{
  border-top:1px solid rgba(211,227,223,.24)
}
#che-page.che-canonical #design .che-dx-practice{
  appearance:none;font-family:inherit;position:relative;
  display:grid;grid-template-columns:35px minmax(0,1fr) 23px;
  gap:13px;align-items:start;text-align:left;width:100%;
  border:0;border-bottom:1px solid rgba(219,233,231,.13);
  border-radius:0;background:transparent;color:var(--dx-ink);
  min-height:113px;padding:19px 8px 18px 5px;
  cursor:pointer;transition:padding-left .26s ease,background-color .26s ease
}
#che-page.che-canonical #design .che-dx-practice::before{
  content:"";position:absolute;left:0;right:100%;top:-1px;height:1px;
  background:linear-gradient(90deg,rgba(var(--dx-blue),.9),rgba(var(--dx-blue),.25));
  transition:right .4s cubic-bezier(.2,.7,.2,1)
}
#che-page.che-canonical #design .che-dx-practice.is-active::before{right:0}
#che-page.che-canonical #design .che-dx-practice:hover{padding-left:11px}
#che-page.che-canonical #design .che-dx-practice:focus-visible{
  outline:2px solid #e5ede7;outline-offset:3px;border-radius:3px
}
#che-page.che-canonical #design .che-dx-practice-num{
  font-size:14px;line-height:1.6;letter-spacing:.09em;color:#9dafaa;font-variant-numeric:tabular-nums
}
#che-page.che-canonical #design .che-dx-practice.is-active .che-dx-practice-num{color:#c7e3f4}
#che-page.che-canonical #design .che-dx-practice-copy{
  min-width:0;display:flex;flex-direction:column;gap:7px
}
#che-page.che-canonical #design .che-dx-practice-kind{
  color:#829c9f;font-size:10.5px;letter-spacing:.12em;line-height:1.4;font-weight:700
}
#che-page.che-canonical #design .che-dx-practice-copy strong{
  font-size:clamp(18px,1.85vw,23px);font-weight:710;
  letter-spacing:-.026em;line-height:1.23;color:#c8d2cd;
  transition:color .26s ease;text-wrap:pretty
}
#che-page.che-canonical #design .che-dx-practice.is-active strong,
#che-page.che-canonical #design .che-dx-practice:hover strong{color:#f6f8f4}
#che-page.che-canonical #design .che-dx-practice-copy small{
  color:#a4b5ae;font-size:13px;line-height:1.52;font-weight:455;
  text-wrap:pretty
}
#che-page.che-canonical #design .che-dx-practice-arrow{
  font-size:17px;line-height:1.5;text-align:right;color:#93b7c7;
  opacity:.4;transform:translate(-3px,2px);
  transition:opacity .25s ease,transform .25s ease
}
#che-page.che-canonical #design .che-dx-practice.is-active .che-dx-practice-arrow,
#che-page.che-canonical #design .che-dx-practice:hover .che-dx-practice-arrow{
  opacity:1;transform:translate(0,0)
}
#che-page.che-canonical #design .che-dx-selection-foot{
  font-size:12.5px;line-height:1.5;color:#829b93;
  margin:24px 0 0;padding-left:3px;max-width:44ch
}
/* Specimen / design theater. Each panel shows a different kind of design work. */
#che-page.che-canonical #design .che-dx-canvas{
  min-width:0;overflow:hidden;isolation:isolate;position:relative;
  border:1px solid rgba(183,212,227,.29);border-radius:22px;
  background:linear-gradient(145deg,#131b1e,#0b1013 75%);
  box-shadow:inset 0 1px rgba(240,251,255,.04),0 22px 60px rgba(0,0,0,.19);
}
#che-page.che-canonical #design .che-dx-canvas::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(350px circle at 66% 28%,rgba(var(--dx-blue),.065),transparent 75%)
}
#che-page.che-canonical #design .che-dx-canvas-head,
#che-page.che-canonical #design .che-dx-canvas-foot{
  position:relative;z-index:2;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  font-size:11px;letter-spacing:.13em;font-weight:720;
  line-height:1.5;color:#bdccd0;
}
#che-page.che-canonical #design .che-dx-canvas-head{
  padding:20px 25px;min-height:61px;border-bottom:1px solid rgba(206,228,228,.12)
}
#che-page.che-canonical #design .che-dx-canvas-number{font-variant-numeric:tabular-nums;white-space:nowrap}
#che-page.che-canonical #design .che-dx-canvas-views{
  position:relative;min-height:437px;overflow:hidden
}
#che-page.che-canonical #design .che-dx-art{
  display:none;position:relative;min-height:437px;isolation:isolate;
  animation:cheDxReveal .4s cubic-bezier(.19,.75,.26,1) both;
}
#che-page.che-canonical #design .che-dx-art.is-active{display:flex;flex-direction:column}
@keyframes cheDxReveal{from{opacity:.35;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
#che-page.che-canonical #design .che-dx-art-caption{
  position:relative;z-index:3;margin-top:auto;
  min-height:56px;padding:16px 25px 15px;
  background:linear-gradient(180deg,transparent,rgba(8,12,14,.78) 35%,rgba(8,12,14,.92));
  color:#b4c3c1;font-size:12.5px;line-height:1.4;font-weight:520
}
#che-page.che-canonical #design .che-dx-canvas-foot{
  padding:15px 25px;min-height:50px;border-top:1px solid rgba(210,228,226,.12);
  letter-spacing:0;font-weight:480;font-size:12px;color:#8da5a4;
}
#che-page.che-canonical #design .che-dx-canvas-foot .che-star-symbol{
  width:14px;height:14px;color:#e0ebe6;filter:drop-shadow(0 0 7px rgba(var(--dx-blue),.3))
}
/* 01 RESEARCH. Physical notes feel attached to a real question, not random particles. */
#che-page.che-canonical #design .che-dx-art--research{
  background:
    radial-gradient(ellipse 60% 54% at 50% 58%,rgba(var(--dx-blue),.055),transparent 74%);
}
#che-page.che-canonical #design .che-dx-research-orbit{
  position:absolute;left:50%;top:52%;width:330px;height:330px;
  border:1px solid rgba(174,213,222,.12);border-radius:50%;transform:translate(-50%,-50%);
  box-shadow:0 0 0 37px rgba(164,202,220,.018),0 0 0 80px rgba(164,202,220,.01)
}
#che-page.che-canonical #design .che-dx-research-top{
  position:relative;z-index:2;padding:28px 28px 14px;
  display:flex;gap:12px;align-items:center;justify-content:space-between;
  color:#a6c0c4;font-size:10px;font-weight:730;letter-spacing:.14em
}
#che-page.che-canonical #design .che-dx-research-map{
  position:relative;z-index:1;flex:1 1 auto;
  min-height:305px;margin:1px 18px 0;
}
#che-page.che-canonical #design .che-dx-research-note{
  position:absolute;border:1px solid rgba(218,234,224,.28);
  border-radius:10px;padding:12px 14px 13px;z-index:2;
  width:35%;min-height:91px;
  background:linear-gradient(140deg,#263237,#192328);
  box-shadow:0 10px 28px rgba(0,0,0,.19);
  display:flex;flex-direction:column;gap:7px;
}
#che-page.che-canonical #design .che-dx-research-note i{
  font-size:10px;color:#91aebc;letter-spacing:.1em;font-style:normal
}
#che-page.che-canonical #design .che-dx-research-note b{
  font-size:13px;line-height:1.25;color:#eef2ec;font-weight:650;white-space:nowrap
}
#che-page.che-canonical #design .che-dx-research-note span{
  display:block;width:75%;height:3px;background:#5c7277;opacity:.48;border-radius:3px
}
#che-page.che-canonical #design .che-dx-research-note span:last-child{width:48%;opacity:.30}
#che-page.che-canonical #design .che-dx-research-note--a{left:2%;top:10%;transform:rotate(-5deg)}
#che-page.che-canonical #design .che-dx-research-note--b{right:2%;top:22%;transform:rotate(4deg)}
#che-page.che-canonical #design .che-dx-research-note--c{left:9%;top:53%;transform:rotate(2deg)}
#che-page.che-canonical #design .che-dx-research-flow{
  position:absolute;right:3%;bottom:14%;z-index:2;
  display:flex;flex-direction:column;gap:7px;
  width:40%;padding:14px;border:1px solid rgba(181,213,226,.42);
  border-radius:11px;background:#dce7e3;color:#182b2b;
  box-shadow:0 12px 35px rgba(0,0,0,.3);
}
#che-page.che-canonical #design .che-dx-research-flow i{
  height:3px;border-radius:3px;background:#577c7a;width:80%;opacity:.47
}
#che-page.che-canonical #design .che-dx-research-flow i:nth-child(2){width:57%}
#che-page.che-canonical #design .che-dx-research-flow i:nth-child(3){width:69%}
#che-page.che-canonical #design .che-dx-research-flow strong{
  margin-top:4px;font-size:13px;line-height:1.2;font-weight:800;letter-spacing:-.01em
}
/* 02 UX — usable structure as a specimen, not a fictitious completed product. */
#che-page.che-canonical #design .che-dx-art--ux{background:radial-gradient(ellipse at 48% 60%,rgba(var(--dx-blue),.10),transparent 70%)}
#che-page.che-canonical #design .che-dx-ux-note{
  padding:23px 26px 14px;color:#9eb7b8;letter-spacing:.13em;font-size:10px;font-weight:750
}
#che-page.che-canonical #design .che-dx-ux-frame{
  margin:8px 35px 0;flex:1 1 auto;min-height:0;
  border-radius:17px 17px 0 0;overflow:hidden;
  background:#e8ece6;color:#202a27;box-shadow:0 17px 35px rgba(0,0,0,.26)
}
#che-page.che-canonical #design .che-dx-ux-brand{
  display:flex;align-items:center;gap:11px;padding:14px 19px;
  border-bottom:1px solid #c6d0ca;color:#334a43;font-size:9px;font-weight:760;letter-spacing:.14em
}
#che-page.che-canonical #design .che-dx-ux-brand .che-star-symbol{height:17px;width:17px;color:#233e36}
#che-page.che-canonical #design .che-dx-ux-brand i{margin-left:auto;width:22px;height:2px;background:#7b9389;box-shadow:0 5px #7b9389,0 -5px #7b9389}
#che-page.che-canonical #design .che-dx-ux-screen{display:grid;grid-template-columns:75px minmax(0,1fr);min-height:259px}
#che-page.che-canonical #design .che-dx-ux-nav{
  display:flex;flex-direction:column;gap:14px;
  padding:21px 19px;background:#d9e1d9;border-right:1px solid #c8d4ca
}
#che-page.che-canonical #design .che-dx-ux-nav i{
  width:100%;height:4px;border-radius:4px;background:#aebcb2
}
#che-page.che-canonical #design .che-dx-ux-nav i:nth-child(1){background:#43675b}
#che-page.che-canonical #design .che-dx-ux-nav i:nth-child(2){width:82%}
#che-page.che-canonical #design .che-dx-ux-nav i:nth-child(3){width:70%}
#che-page.che-canonical #design .che-dx-ux-nav i:nth-child(4){width:91%}
#che-page.che-canonical #design .che-dx-ux-main{padding:28px 30px}
#che-page.che-canonical #design .che-dx-ux-label{
  color:#5a766b;font-size:9px;font-weight:750;letter-spacing:.14em
}
#che-page.che-canonical #design .che-dx-ux-main strong{
  display:block;max-width:14ch;font-size:clamp(27px,2.5vw,37px);
  line-height:1.14;margin:15px 0 20px;color:#1b3028;
  font-weight:730;letter-spacing:-.047em;text-wrap:balance
}
#che-page.che-canonical #design .che-dx-ux-lines{
  display:flex;flex-direction:column;gap:8px;margin-bottom:23px
}
#che-page.che-canonical #design .che-dx-ux-lines i{
  width:87%;height:5px;border-radius:6px;background:#b5c4b9
}
#che-page.che-canonical #design .che-dx-ux-lines i:nth-child(2){width:79%}
#che-page.che-canonical #design .che-dx-ux-lines i:nth-child(3){width:51%}
#che-page.che-canonical #design .che-dx-ux-action{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  width:max-content;max-width:100%;min-height:36px;padding:0 15px;border-radius:6px;
  background:#25443a;color:#eff8f0;font-size:11px;font-weight:650;line-height:1.3
}
#che-page.che-canonical #design .che-dx-ux-action>span{font-size:13px;margin-left:12px}
/* 03 IDENTITY — independent high-contrast typographic specimen, CHE brand mark intact. */
#che-page.che-canonical #design .che-dx-art--identity{padding:21px 34px 0}
#che-page.che-canonical #design .che-dx-identity-paper{
  flex:1 1 auto;display:flex;flex-direction:column;position:relative;
  min-height:0;overflow:hidden;
  padding:25px 30px 18px;border-radius:13px 13px 0 0;
  background:#eaece4;color:#1d2d27;
  box-shadow:0 13px 40px rgba(0,0,0,.22)
}
#che-page.che-canonical #design .che-dx-identity-paper:after{
  content:"";position:absolute;left:46%;top:9%;width:390px;height:390px;border-radius:50%;
  border:1px solid rgba(32,70,58,.08);
  box-shadow:0 0 0 40px rgba(32,70,58,.018),0 0 0 80px rgba(32,70,58,.009)
}
#che-page.che-canonical #design .che-dx-identity-meta{
  position:relative;z-index:2;display:flex;justify-content:space-between;gap:10px;
  font-size:10px;letter-spacing:.11em;font-weight:740;color:#577265
}
#che-page.che-canonical #design .che-dx-identity-star{position:relative;z-index:2;margin:25px 0 19px}
#che-page.che-canonical #design .che-dx-identity-star .che-star-symbol{color:#18392e;width:36px;height:36px}
#che-page.che-canonical #design .che-dx-identity-paper>strong{
  position:relative;z-index:2;display:block;
  font-size:clamp(36px,4vw,56px);line-height:1.04;
  font-weight:780;letter-spacing:-.055em;max-width:12ch;
  text-wrap:balance
}
#che-page.che-canonical #design .che-dx-identity-paper>strong>span{display:block}
#che-page.che-canonical #design .che-dx-identity-bottom{
  position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:auto;font-size:9px;font-weight:760;letter-spacing:.07em;color:#537268
}
#che-page.che-canonical #design .che-dx-identity-bottom>div{display:flex;gap:6px}
#che-page.che-canonical #design .che-dx-identity-bottom i{width:13px;height:13px;background:#193d30;border-radius:50%}
#che-page.che-canonical #design .che-dx-identity-bottom i:nth-child(2){background:#a4b8b3}
#che-page.che-canonical #design .che-dx-identity-bottom i:nth-child(3){background:#c5a776}
/* 04 SYSTEMS — actual language of components, color and rhythm. */
#che-page.che-canonical #design .che-dx-art--systems{
  padding:20px 22px 0;background:radial-gradient(ellipse 65% 68% at 47% 50%,rgba(var(--dx-lilac),.075),transparent 75%)
}
#che-page.che-canonical #design .che-dx-systems-top{
  display:flex;justify-content:space-between;gap:14px;margin:6px 0 22px;padding:0 5px;
  font-size:10px;font-weight:760;letter-spacing:.12em;color:#b3b2c9
}
#che-page.che-canonical #design .che-dx-system-specimens{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;flex:1 1 auto
}
#che-page.che-canonical #design .che-dx-specimen{
  min-width:0;min-height:134px;
  padding:15px 17px 12px;display:flex;flex-direction:column;gap:9px;
  border:1px solid rgba(195,190,217,.24);border-radius:10px;
  background:linear-gradient(130deg,rgba(185,171,215,.095),rgba(185,171,215,.01)),#11171a
}
#che-page.che-canonical #design .che-dx-specimen small{
  font-size:9px;letter-spacing:.12em;color:#b4b8d2;font-weight:750
}
#che-page.che-canonical #design .che-dx-specimen>span{
  display:block;margin-top:auto;color:#a8b7b8;
  font-size:10.5px;line-height:1.38
}
#che-page.che-canonical #design .che-dx-specimen--type strong{
  font-size:50px;line-height:1;letter-spacing:-.04em;color:#f6f6f0
}
#che-page.che-canonical #design .che-dx-specimen--color>div{display:flex;gap:7px;padding-top:5px}
#che-page.che-canonical #design .che-dx-specimen--color i{width:36px;height:36px;border-radius:50%;background:#cbb799}
#che-page.che-canonical #design .che-dx-specimen--color i:nth-child(2){background:#9ebdd0}
#che-page.che-canonical #design .che-dx-specimen--color i:nth-child(3){background:#b8a9d0}
#che-page.che-canonical #design .che-dx-specimen--ui>div{display:flex;flex-wrap:wrap;gap:6px;padding-top:6px}
#che-page.che-canonical #design .che-dx-specimen--ui i{
  display:inline-flex;padding:9px 10px;border-radius:6px;border:1px solid rgba(209,229,222,.34);
  font-size:9px;font-style:normal;white-space:nowrap;color:#eff4f0
}
#che-page.che-canonical #design .che-dx-specimen--ui i:first-child{color:#142423;background:#dce9e0;border-color:#dce9e0}
#che-page.che-canonical #design .che-dx-specimen--rhythm>div{display:flex;gap:7px;align-items:end;min-height:42px}
#che-page.che-canonical #design .che-dx-specimen--rhythm i{width:15px;height:15px;background:#9dbbc9;opacity:.75;border-radius:3px}
#che-page.che-canonical #design .che-dx-specimen--rhythm i:nth-child(2){height:26px}
#che-page.che-canonical #design .che-dx-specimen--rhythm i:nth-child(3){height:34px}
#che-page.che-canonical #design .che-dx-specimen--rhythm i:nth-child(4){height:42px}
/* An honest, restrained pair of responsibilities, never a second giant section. */
#che-page.che-canonical #design .che-dx-signature{
  margin-top:clamp(60px,6.6vw,83px);padding-top:31px;
  border-top:1px solid rgba(216,233,224,.21);
  display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(27px,5vw,68px);align-items:center
}
#che-page.che-canonical #design .che-dx-signature-statement{display:flex;flex-direction:column;gap:11px}
#che-page.che-canonical #design .che-dx-signature-statement>span{
  color:#96aca4;letter-spacing:.11em;line-height:1.4;font-size:11px;font-weight:750
}
#che-page.che-canonical #design .che-dx-signature-statement>strong{
  color:#f0f4ee;font-size:clamp(20px,2.1vw,28px);line-height:1.25;letter-spacing:-.022em;
  font-weight:660;max-width:29ch;text-wrap:balance
}
#che-page.che-canonical #design .che-dx-signature-roles{
  display:grid;grid-template-columns:minmax(0,1fr) 42px minmax(0,1fr);
  align-items:center;gap:16px
}
#che-page.che-canonical #design .che-dx-signature-roles>div{display:flex;flex-direction:column;gap:6px;min-width:0}
#che-page.che-canonical #design .che-dx-signature-roles>div>span{
  font-size:10px;color:#93aab2;letter-spacing:.13em;font-weight:720
}
#che-page.che-canonical #design .che-dx-signature-roles>div>strong{
  font-size:15px;font-weight:650;line-height:1.35;color:#edf3ee;text-wrap:pretty
}
#che-page.che-canonical #design .che-dx-signature-roles>div>small{
  font-size:12px;line-height:1.45;color:#a5b7b0
}
#che-page.che-canonical #design .che-dx-signature-connector{
  color:#eef2ee;width:16px;height:16px;justify-self:center;
  filter:drop-shadow(0 0 8px rgba(var(--dx-blue),.38))
}
@media(min-width:1500px){
  #che-page.che-canonical #design .che-dx-heading{gap:94px}
  #che-page.che-canonical #design .che-dx-canvas-views{min-height:475px}
  #che-page.che-canonical #design .che-dx-art{min-height:475px}
}
@media(max-width:1000px){
  #che-page.che-canonical #design .che-dx-heading{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:26px}
  #che-page.che-canonical #design .che-dx-heading h2{font-size:clamp(40px,5vw,53px)}
  #che-page.che-canonical #design .che-dx-studio{grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);gap:24px}
  #che-page.che-canonical #design .che-dx-practice{min-height:116px;gap:9px;grid-template-columns:26px minmax(0,1fr) 20px}
  #che-page.che-canonical #design .che-dx-practice-copy strong{font-size:19px}
  #che-page.che-canonical #design .che-dx-research-note{width:40%;padding:10px}
  #che-page.che-canonical #design .che-dx-research-note b{font-size:12px}
  #che-page.che-canonical #design .che-dx-art--identity{padding-left:19px;padding-right:19px}
  #che-page.che-canonical #design .che-dx-specimen{padding:12px}
  #che-page.che-canonical #design .che-dx-system-specimens{gap:6px}
}
@media(max-width:780px){
  #che-page.che-canonical #design{padding:70px 0 72px}
  #che-page.che-canonical #design .che-dx-heading{grid-template-columns:1fr;gap:23px;margin:43px 0 51px}
  #che-page.che-canonical #design .che-dx-heading h2{font-size:clamp(42px,7vw,59px);max-width:18ch}
  #che-page.che-canonical #design .che-dx-heading>p{max-width:62ch;font-size:16px}
  #che-page.che-canonical #design .che-dx-studio{grid-template-columns:1fr;gap:28px}
  #che-page.che-canonical #design .che-dx-selection-head{min-height:43px}
  #che-page.che-canonical #design .che-dx-selection-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  #che-page.che-canonical #design .che-dx-practice{min-height:120px;padding:16px 13px 14px 4px;grid-template-columns:25px minmax(0,1fr) 18px}
  #che-page.che-canonical #design .che-dx-practice:nth-child(odd){border-right:1px solid rgba(216,233,229,.15)}
  #che-page.che-canonical #design .che-dx-practice:nth-child(even){padding-left:12px}
  #che-page.che-canonical #design .che-dx-selection-foot{margin-top:17px}
  #che-page.che-canonical #design .che-dx-canvas-views,#che-page.che-canonical #design .che-dx-art{min-height:450px}
  #che-page.che-canonical #design .che-dx-signature{grid-template-columns:1fr;gap:25px;margin-top:62px}
}
@media(max-width:460px){
  #che-page.che-canonical #design{padding:59px 0 60px}
  #che-page.che-canonical #design .che-dx-overline{flex-wrap:wrap;gap:9px;font-size:11px}
  #che-page.che-canonical #design .che-dx-mark{width:16px;height:16px}
  #che-page.che-canonical #design .che-dx-overline>span:last-child{width:100%;margin-left:25px;white-space:normal;font-size:11px}
  #che-page.che-canonical #design .che-dx-overline-rule{min-width:45px}
  #che-page.che-canonical #design .che-dx-heading{margin:32px 0 39px;gap:20px}
  #che-page.che-canonical #design .che-dx-heading h2{font-size:clamp(34px,9.3vw,42px);max-width:18ch}
  #che-page.che-canonical #design .che-dx-heading>p{font-size:15px;line-height:1.66}
  #che-page.che-canonical #design .che-dx-selection-head{font-size:10px;min-height:39px}
  #che-page.che-canonical #design .che-dx-selection-list{grid-template-columns:1fr}
  #che-page.che-canonical #design .che-dx-practice{min-height:82px;padding:13px 6px 13px 4px;grid-template-columns:23px minmax(0,1fr) 20px;gap:9px}
  #che-page.che-canonical #design .che-dx-practice:nth-child(odd){border-right:0}
  #che-page.che-canonical #design .che-dx-practice:nth-child(even){padding-left:4px}
  #che-page.che-canonical #design .che-dx-practice-kind{font-size:9px}
  #che-page.che-canonical #design .che-dx-practice-copy strong{font-size:18px}
  #che-page.che-canonical #design .che-dx-practice-copy small{font-size:12.5px}
  #che-page.che-canonical #design .che-dx-selection-foot{font-size:11px}
  #che-page.che-canonical #design .che-dx-canvas{border-radius:16px}
  #che-page.che-canonical #design .che-dx-canvas-head{padding:16px 15px;min-height:52px;font-size:9px;letter-spacing:.08em}
  #che-page.che-canonical #design .che-dx-canvas-views,#che-page.che-canonical #design .che-dx-art{min-height:350px}
  #che-page.che-canonical #design .che-dx-canvas-foot{padding:10px 15px;font-size:10px;min-height:46px}
  #che-page.che-canonical #design .che-dx-art-caption{min-height:50px;padding:14px 16px;font-size:11px}
  #che-page.che-canonical #design .che-dx-research-top{padding:22px 16px 12px;font-size:8px}
  #che-page.che-canonical #design .che-dx-research-orbit{width:220px;height:220px}
  #che-page.che-canonical #design .che-dx-research-map{min-height:220px;margin:2px 12px 0}
  #che-page.che-canonical #design .che-dx-research-note{width:45%;min-height:72px;padding:9px;gap:4px}
  #che-page.che-canonical #design .che-dx-research-note i{font-size:8px}
  #che-page.che-canonical #design .che-dx-research-note b{font-size:10px;white-space:normal}
  #che-page.che-canonical #design .che-dx-research-note--a{top:4%;left:0}
  #che-page.che-canonical #design .che-dx-research-note--b{right:0;top:20%}
  #che-page.che-canonical #design .che-dx-research-note--c{left:3%;top:55%}
  #che-page.che-canonical #design .che-dx-research-flow{right:0;bottom:12%;width:44%;padding:10px;gap:4px}
  #che-page.che-canonical #design .che-dx-research-flow strong{font-size:10px}
  #che-page.che-canonical #design .che-dx-ux-note{padding:18px 15px 9px;font-size:9px}
  #che-page.che-canonical #design .che-dx-ux-frame{margin:6px 14px 0}
  #che-page.che-canonical #design .che-dx-ux-brand{padding:11px 12px;font-size:8px}
  #che-page.che-canonical #design .che-dx-ux-screen{grid-template-columns:48px minmax(0,1fr);min-height:211px}
  #che-page.che-canonical #design .che-dx-ux-nav{padding:15px 10px}
  #che-page.che-canonical #design .che-dx-ux-main{padding:19px}
  #che-page.che-canonical #design .che-dx-ux-main strong{font-size:clamp(24px,6.2vw,29px);margin:11px 0}
  #che-page.che-canonical #design .che-dx-ux-lines{gap:5px;margin-bottom:13px}
  #che-page.che-canonical #design .che-dx-ux-action{font-size:10px;padding:0 9px;min-height:32px}
  #che-page.che-canonical #design .che-dx-art--identity{padding:15px 14px 0}
  #che-page.che-canonical #design .che-dx-identity-paper{padding:19px 19px 14px}
  #che-page.che-canonical #design .che-dx-identity-star{margin:15px 0 12px}
  #che-page.che-canonical #design .che-dx-identity-star .che-star-symbol{width:25px;height:25px}
  #che-page.che-canonical #design .che-dx-identity-paper>strong{font-size:clamp(32px,8vw,42px)}
  #che-page.che-canonical #design .che-dx-identity-meta{font-size:8px}
  #che-page.che-canonical #design .che-dx-identity-bottom{font-size:7.5px}
  #che-page.che-canonical #design .che-dx-art--systems{padding:14px 12px 0}
  #che-page.che-canonical #design .che-dx-systems-top{margin:4px 0 12px;font-size:8px;gap:6px}
  #che-page.che-canonical #design .che-dx-system-specimens{gap:5px}
  #che-page.che-canonical #design .che-dx-specimen{min-height:101px;padding:9px 10px;gap:6px;border-radius:7px}
  #che-page.che-canonical #design .che-dx-specimen small{font-size:7.5px}
  #che-page.che-canonical #design .che-dx-specimen>span{font-size:8px}
  #che-page.che-canonical #design .che-dx-specimen--type strong{font-size:35px}
  #che-page.che-canonical #design .che-dx-specimen--color i{width:19px;height:19px}
  #che-page.che-canonical #design .che-dx-specimen--ui i{font-size:7px;padding:6px}
  #che-page.che-canonical #design .che-dx-specimen--rhythm i{width:10px}
  #che-page.che-canonical #design .che-dx-signature{margin-top:52px;padding-top:25px;gap:24px}
  #che-page.che-canonical #design .che-dx-signature-statement>strong{font-size:23px}
  #che-page.che-canonical #design .che-dx-signature-roles{grid-template-columns:1fr 28px 1fr;gap:10px}
  #che-page.che-canonical #design .che-dx-signature-roles>div>strong{font-size:13px}
  #che-page.che-canonical #design .che-dx-signature-roles>div>small{font-size:11px}
}
@media(max-width:335px){
  #che-page.che-canonical #design .che-dx-heading h2{font-size:31px}
  #che-page.che-canonical #design .che-dx-signature-roles{grid-template-columns:1fr;gap:13px}
  #che-page.che-canonical #design .che-dx-signature-connector{display:none}
}
@media(pointer:coarse),(hover:none){
  #che-page.che-canonical #design .che-dx-practice:hover{padding-left:4px}
}
@media(prefers-reduced-motion:reduce){
  #che-page.che-canonical #design *,
  #che-page.che-canonical #design *::before,
  #che-page.che-canonical #design *::after{
    animation:none!important;transition:none!important
  }
}


/* Atelier refinement 4.1: visible research synthesis, not placeholder notes. */
#che-page.che-canonical #design .che-dx-heading h2{
  max-width:20ch;font-size:clamp(43px,4.2vw,60px);
}
#che-page.che-canonical #design .che-dx-heading{
  margin-bottom:clamp(45px,5vw,68px);
}
#che-page.che-canonical #design .che-dx-art--research{
  background:radial-gradient(ellipse at 62% 50%,rgba(151,188,218,.075),transparent 73%);
}
#che-page.che-canonical #design .che-dx-research-top{
  padding:23px 25px 14px;display:flex;justify-content:space-between;gap:10px;
  font-size:10px;letter-spacing:.13em;font-weight:750;color:#aac4c9;
}
#che-page.che-canonical #design .che-dx-research-composition{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.98fr);
  gap:15px;margin:0 23px 12px;flex:1;min-height:303px;
}
#che-page.che-canonical #design .che-dx-research-question{
  min-width:0;padding:22px 6px 14px;display:flex;flex-direction:column;
}
#che-page.che-canonical #design .che-dx-research-small{
  font-size:9px;letter-spacing:.11em;font-weight:720;color:#97b3ba;
  margin-bottom:24px;
}
#che-page.che-canonical #design .che-dx-research-question strong{
  color:#f3f6f2;font-size:clamp(22px,2.4vw,33px);letter-spacing:-.045em;
  line-height:1.14;font-weight:740;text-wrap:balance;max-width:14ch;
}
#che-page.che-canonical #design .che-dx-research-question p{
  font-size:12px;line-height:1.55;color:#b7c8c4;margin:16px 0;max-width:28ch;
}
#che-page.che-canonical #design .che-dx-research-tiny{
  font-size:8px;color:#8eaab1;letter-spacing:.06em;font-weight:730;margin-top:auto;
}
#che-page.che-canonical #design .che-dx-research-route{
  position:relative;overflow:hidden;border-radius:12px;
  background:linear-gradient(145deg,#ebeee7,#dbe7e0);color:#233e34;
  display:flex;flex-direction:column;min-width:0;
  padding:18px 15px 12px;box-shadow:0 13px 38px rgba(0,0,0,.2);
}
#che-page.che-canonical #design .che-dx-research-route:after{
  content:"";position:absolute;width:225px;height:225px;right:-126px;top:18%;
  border:1px solid rgba(43,83,70,.10);border-radius:50%;
  box-shadow:0 0 0 30px rgba(43,83,70,.025);
}
#che-page.che-canonical #design .che-dx-research-route-head,
#che-page.che-canonical #design .che-dx-research-route-foot{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  position:relative;z-index:1;font-size:9px;letter-spacing:.08em;
  font-weight:750;color:#577467;
}
#che-page.che-canonical #design .che-dx-research-route-head .che-star-symbol{
  width:14px;height:14px;color:#214238;
}
#che-page.che-canonical #design .che-dx-research-route-list{
  position:relative;z-index:1;flex:1;display:flex;flex-direction:column;
  justify-content:center;padding:10px 0;
}
#che-page.che-canonical #design .che-dx-research-route-list>div{
  position:relative;display:grid;grid-template-columns:32px minmax(0,1fr);
  align-items:center;min-height:59px;gap:7px;
}
#che-page.che-canonical #design .che-dx-research-route-list>div+div:before{
  content:"";position:absolute;top:-15px;left:13px;height:30px;width:1px;background:#a0bcb0;
}
#che-page.che-canonical #design .che-dx-research-route-list i{
  display:grid;place-items:center;width:28px;height:28px;border-radius:50%;
  font-size:9px;font-style:normal;font-weight:750;color:#eaf6ee;
  background:#345747;border:2px solid #dce9df;z-index:2;
}
#che-page.che-canonical #design .che-dx-research-route-list span{
  font-size:12px;font-weight:690;color:#29473a;line-height:1.35;text-wrap:pretty;
}
#che-page.che-canonical #design .che-dx-research-route-foot{
  border-top:1px solid #b8ccc0;padding-top:8px;font-size:7.5px;
}
#che-page.che-canonical #design .che-dx-research-route-foot span:last-child{font-size:15px}
@media(max-width:460px){
  #che-page.che-canonical #design .che-dx-heading h2{
    font-size:clamp(34px,9.3vw,42px);max-width:18ch;
  }
  #che-page.che-canonical #design .che-dx-canvas-views,
  #che-page.che-canonical #design .che-dx-art{min-height:427px}
  #che-page.che-canonical #design .che-dx-research-top{padding:17px 16px 10px;font-size:8.5px}
  #che-page.che-canonical #design .che-dx-research-composition{
    grid-template-columns:1fr;min-height:345px;gap:11px;margin:0 15px 9px;
  }
  #che-page.che-canonical #design .che-dx-research-question{
    padding:9px 3px 3px;
  }
  #che-page.che-canonical #design .che-dx-research-small{margin-bottom:9px;font-size:8px}
  #che-page.che-canonical #design .che-dx-research-question strong{
    font-size:24px;max-width:19ch;line-height:1.12;
  }
  #che-page.che-canonical #design .che-dx-research-question p{
    font-size:10.5px;line-height:1.43;margin:8px 0 0;max-width:35ch;
  }
  #che-page.che-canonical #design .che-dx-research-tiny{display:none}
  #che-page.che-canonical #design .che-dx-research-route{
    padding:12px 12px 9px;min-height:157px;
  }
  #che-page.che-canonical #design .che-dx-research-route-head{font-size:8px}
  #che-page.che-canonical #design .che-dx-research-route-list{
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
    gap:7px;align-items:center;padding:11px 0;
  }
  #che-page.che-canonical #design .che-dx-research-route-list>div{
    display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;
    min-height:58px;gap:5px;
  }
  #che-page.che-canonical #design .che-dx-research-route-list>div+div:before{
    top:13px;left:-17px;width:18px;height:1px;
  }
  #che-page.che-canonical #design .che-dx-research-route-list i{width:22px;height:22px;font-size:7.5px}
  #che-page.che-canonical #design .che-dx-research-route-list span{font-size:9px;line-height:1.3}
  #che-page.che-canonical #design .che-dx-research-route-foot{font-size:7px}
}


/* Atelier polish: focus follows pointer only on fine mouse; keyboard stays visible. */
#che-page.che-canonical #design .che-dx-practice:focus-visible{
  outline:1px solid rgba(194,222,235,.92);
  outline-offset:1px;
  background:linear-gradient(90deg,rgba(151,188,218,.055),transparent 88%);
}
#che-page.che-canonical #design .che-dx-canvas{
  --dx-pointer-x:60%;--dx-pointer-y:40%;
  --dx-light:151,188,218;
  transition:border-color .28s ease;
}
#che-page.che-canonical #design .che-dx-canvas[data-mode="2"]{--dx-light:204,174,131}
#che-page.che-canonical #design .che-dx-canvas[data-mode="3"]{--dx-light:184,169,208}
#che-page.che-canonical #design .che-dx-canvas::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  border-radius:inherit;
  background:radial-gradient(400px circle at var(--dx-pointer-x) var(--dx-pointer-y),
    rgba(var(--dx-light),.14),rgba(var(--dx-light),.04) 43%,transparent 76%);
  opacity:0;transition:opacity .25s ease;
}
#che-page.che-canonical #design .che-dx-canvas.is-lit::after{opacity:1}
#che-page.che-canonical #design .che-dx-canvas.is-lit{
  border-color:rgba(var(--dx-light),.49);
}
#che-page.che-canonical #design .che-dx-canvas-views{z-index:1}
@media(pointer:coarse),(hover:none){
  #che-page.che-canonical #design .che-dx-canvas::after{display:none}
}
@media(prefers-reduced-motion:reduce){
  #che-page.che-canonical #design .che-dx-canvas::after{display:none}
}
