:root{
  color-scheme:light;
  --ink:#202620;
  --paper:#f6f6f1;
  --muted:#636960;
  --line:#d5d9cf
}
*{
  box-sizing:border-box
}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Arial,'PingFang SC','Microsoft YaHei',sans-serif
}
a{
  color:inherit;
  text-decoration:none
}
button{
  font:inherit;
  cursor:pointer
}
a:focus-visible,button:focus-visible{
  outline:3px solid #385b38;
  outline-offset:5px
}
header,main,footer{
  max-width:1600px;
  margin:auto;
  padding:0 3.3vw
}
header{
  height:90px;
  display:flex;
  gap:24px;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid var(--line);
  font-size:12px
}
header>span{
  letter-spacing:.12em
}
.wordmark{
  font-size:22px;
  font-weight:700
}
.intro{
  display:grid;
  grid-template-columns:1fr 1fr;
  padding:82px 0 68px;
  align-items:end;
  gap:25px
}
.kicker{
  grid-column:1/-1;
  font-size:11px;
  letter-spacing:.16em;
  color:var(--muted)
}
h1{
  font-size:clamp(42px,5.2vw,80px);
  line-height:1.2;
  letter-spacing:-.06em;
  margin:0
}
h1 em{
  font-style:normal;
  color:#718167
}
.intro-side{
  justify-self:end;
  max-width:360px;
  font-size:20px;
  line-height:1.8
}
.note{
  font-size:13px;
  color:var(--muted)
}
.toolbar{
  position:sticky;
  top:0;
  z-index:5;
  background:var(--paper);
  padding:18px 0;
  display:flex;
  gap:22px;
  align-items:center;
  border-block:1px solid var(--line);
  margin-bottom:35px
}
.control-group{
  display:flex;
  padding:4px;
  border:1px solid var(--line);
  gap:4px
}
.control-group button{
  border:0;
  background:transparent;
  padding:9px 16px;
  color:var(--muted);
  font-size:13px
}
.control-group button[aria-pressed=true]{
  background:var(--ink);
  color:white
}
#view-label{
  margin-left:auto;
  font-size:12px;
  color:var(--muted)
}
.design-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:50px 24px
}
.design-card{
  min-width:0
}
.screen-link{
  display:block;
  background:#e6e8e0;
  border:1px solid var(--line);
  position:relative;
  aspect-ratio:1.44;
  overflow:hidden
}
.screen-link img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top;
  transition:transform .3s
}
.screen-link:hover img{
  transform:scale(1.025)
}
.mobile .screen-link{
  aspect-ratio:1.15
}
.mobile .screen-link img{
  width:auto;
  max-width:100%;
  height:100%;
  margin:auto;
  object-fit:contain
}
.card-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin-top:22px
}
.card-head h2{
  font-size:24px;
  letter-spacing:-.04em;
  margin:0
}
.card-head .number{
  font:12px monospace;
  color:var(--muted)
}
.direction{
  font-size:13px;
  color:var(--muted);
  margin:8px 0 16px
}
.palette{
  display:flex;
  height:10px;
  gap:4px;
  margin-bottom:18px
}
.palette i{
  flex:1;
  border:1px solid #00000012
}
.description{
  font-size:13px;
  line-height:1.8;
  min-height:48px;
  margin:0 0 20px
}
.card-links{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  border-top:1px solid var(--line);
  padding-top:15px;
  font-size:12px
}
.card-links a{
  padding:6px 0
}
.card-links a:first-child{
  font-weight:700;
  margin-right:auto
}
.card-links a:hover{
  text-decoration:underline
}
.branch{
  font:10px monospace;
  color:var(--muted);
  margin-top:10px
}
.review-note{
  border-top:1px solid var(--line);
  margin-top:70px;
  padding:45px 0;
  max-width:800px
}
.review-note h2{
  font-size:20px
}
.review-note p{
  font-size:14px;
  line-height:1.9;
  color:var(--muted)
}
footer{
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  gap:18px;
  font:11px monospace;
  padding-top:25px;
  padding-bottom:25px;
  color:var(--muted)
}
@media(max-width:1000px){
  .design-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .intro-side{
    font-size:17px
  }
}
@media(max-width:600px){
  header,main,footer{
    padding-inline:20px
  }
  header{
    height:74px
  }
  .wordmark{
    font-size:18px
  }
  header>span{
    display:none
  }
  .intro{
    display:block;
    padding:44px 0
  }
  .kicker{
    line-height:1.8;
    font-size:10px
  }
  h1{
    font-size:48px
  }
  .intro-side{
    margin-top:30px;
    max-width:none
  }
  .toolbar{
    gap:8px;
    flex-wrap:wrap
  }
  .control-group{
    gap:0
  }
  .control-group button{
    padding:9px 11px;
    font-size:12px
  }
  #view-label{
    display:none
  }
  .design-grid{
    grid-template-columns:1fr
  }
  .description{
    min-height:0
  }
  .review-note{
    margin-top:45px
  }
  footer{
    flex-direction:column
  }
}
@media(prefers-reduced-motion:reduce){
  *{
    transition:none!important;
    scroll-behavior:auto!important
  }
}

.swatch-01-tbd-0{background:#050505}
.swatch-01-tbd-1{background:#175452}
.swatch-01-tbd-2{background:#c7ff97}
.swatch-01-tbd-3{background:#e8e8e8}
.swatch-02-xirex-0{background:#151515}
.swatch-02-xirex-1{background:#202020}
.swatch-02-xirex-2{background:#ff5b48}
.swatch-02-xirex-3{background:#f4f3ef}
.swatch-02-xirex-4{background:#a7a6a2}
.swatch-03-sora-0{background:#080f1b}
.swatch-03-sora-1{background:#1d1b1a}
.swatch-03-sora-2{background:#fff8f7}
.swatch-03-sora-3{background:#ef1232}
.swatch-03-sora-4{background:#ff765d}
.swatch-03-sora-5{background:#587b90}
.swatch-04-transform9-0{background:#020801}
.swatch-04-transform9-1{background:#a2fa8e}
.swatch-04-transform9-2{background:#168ae2}
.swatch-04-transform9-3{background:#0033cc}
.swatch-04-transform9-4{background:#f1f3f3}
.swatch-05-oscilar-0{background:#ffffff}
.swatch-05-oscilar-1{background:#f0eeee}
.swatch-05-oscilar-2{background:#181719}
.swatch-05-oscilar-3{background:#ff665e}
.swatch-05-oscilar-4{background:#cfe8ec}
.swatch-05-oscilar-5{background:#e0eddf}
.swatch-05-oscilar-6{background:#f4ead2}
.swatch-05-oscilar-7{background:#ebe5f7}
.swatch-06-spark-0{background:#ff86ac}
.swatch-06-spark-1{background:#ff9c82}
.swatch-06-spark-2{background:#ffd34f}
.swatch-06-spark-3{background:#5723f2}
.swatch-06-spark-4{background:#f04ac3}
.swatch-06-spark-5{background:#64dcc6}
.swatch-06-spark-6{background:#111013}
.swatch-07-ornn-0{background:#000000}
.swatch-07-ornn-1{background:#a96b31}
.swatch-07-ornn-2{background:#d09a5b}
.swatch-07-ornn-3{background:#f0f0ed}
.swatch-07-ornn-4{background:#a0a09c}
.swatch-08-upmind-0{background:#101604}
.swatch-08-upmind-1{background:#b7fe02}
.swatch-08-upmind-2{background:#f7f9f2}
.swatch-08-upmind-3{background:#eef3e4}
.swatch-08-upmind-4{background:#e6ecd6}
.swatch-09-operator-0{background:#090c0c}
.swatch-09-operator-1{background:#111616}
.swatch-09-operator-2{background:#283230}
.swatch-09-operator-3{background:#eef3ef}
.swatch-09-operator-4{background:#a3ada7}
.swatch-09-operator-5{background:#8ee0b6}
.swatch-09-operator-6{background:#89938e}