.half-wheel-page{
  --ground-texture-opacity:.25;
  --ground-texture-size:360px;
}
.half-wheel-page::before{
  content:"";
  position:fixed;
  z-index:0;
  inset:0;
  pointer-events:none;
  background-image:url("./assets/background-geometric-damask.webp");
  background-position:center;
  background-size:var(--ground-texture-size) var(--ground-texture-size);
  background-repeat:repeat;
  opacity:var(--ground-texture-opacity);
}
.half-wheel-page::after{z-index:1;mix-blend-mode:normal;opacity:.025}
.half-wheel-page .single-stage{z-index:2}
.half-wheel-page .removed-metadata{display:none}
.half-wheel-page .single-stage::before,
.half-wheel-page .single-stage::after{display:none}
.half-wheel-page .wheel-viewport{inset:0;z-index:3}
.half-wheel-page .shiyu-mark{
  position:absolute;
  z-index:1;
  right:clamp(28px,3vw,64px);
  top:8vh;
  width:min(36vw,650px);
  height:82vh;
  color:rgba(224,210,174,.29);
  font-family:"ZCOOL XiaoWei Local","Songti SC","STSong",serif;
  pointer-events:none;
  user-select:none;
  transition:opacity .8s ease,transform 1.1s cubic-bezier(.22,.72,.22,1),filter .8s ease;
}
.half-wheel-page .shiyu-mark p{
  position:absolute;
  left:50%;
  top:15%;
  margin:0;
  color:rgba(205,168,79,.5);
  font-size:clamp(14px,1.05vw,20px);
  line-height:1;
  letter-spacing:.48em;
  writing-mode:vertical-rl;
  white-space:nowrap;
}
.half-wheel-page .shiyu-mark h1{position:absolute;inset:0;margin:0;font-weight:400;line-height:.78}
.half-wheel-page .shiyu-mark h1 span{position:absolute;display:block;text-shadow:0 1px 0 rgba(239,225,189,.08),0 16px 46px rgba(0,0,0,.2)}
.half-wheel-page .shiyu-mark h1 span:first-child{right:0;top:0;font-size:clamp(150px,16vw,280px)}
.half-wheel-page .shiyu-mark h1 span:last-child{right:8%;bottom:0;font-size:clamp(190px,20vw,340px)}
.half-wheel-page .shiyu-mark i{
  position:absolute;
  left:63%;
  top:12%;
  width:1px;
  height:60%;
  background:linear-gradient(transparent,rgba(205,168,79,.2) 24%,rgba(205,168,79,.08) 76%,transparent);
}
.half-wheel-page .single-stage.selection-open .shiyu-mark{opacity:.16;transform:translateX(18px);filter:blur(1.4px)}
.half-wheel-page:not(.wheel-intro-ready) .shiyu-mark{opacity:0}
.half-wheel-page.wheel-intro-playing .shiyu-mark{animation:shiyu-intro-reveal 1.15s ease 1.8s both}
@keyframes shiyu-intro-reveal{from{opacity:0}to{opacity:1}}
.half-wheel-page .wheel-shell,
.half-wheel-page .single-stage.selection-open .wheel-shell{left:50%;top:0}
.half-wheel-page .hub{border-radius:50%;overflow:hidden;filter:none;box-shadow:0 16px 19px rgba(0,0,0,.42)}
.half-wheel-page .hub img{transform:scale(1.026)}
.half-wheel-page:not(.wheel-intro-ready) .rotor .wheel-canvas{visibility:hidden}
.half-wheel-page .interaction-hint{bottom:max(22px,env(safe-area-inset-bottom))}

@media(max-width:900px){
  .half-wheel-page{--ground-texture-opacity:.22;--ground-texture-size:300px}
  .half-wheel-page .shiyu-mark{
    left:50%;
    right:auto;
    top:auto;
    bottom:7.5vh;
    width:min(82vw,520px);
    height:23vh;
    transform:translateX(-50%);
    color:rgba(224,210,174,.27);
  }
  .half-wheel-page .shiyu-mark p{left:auto;right:4%;top:27%;transform:none;font-size:11px;line-height:1.1;letter-spacing:.34em;writing-mode:vertical-rl}
  .half-wheel-page .shiyu-mark h1{inset:22% 0 0;display:flex;align-items:center;justify-content:center;gap:.22em;line-height:1}
  .half-wheel-page .shiyu-mark h1 span,
  .half-wheel-page .shiyu-mark h1 span:first-child,
  .half-wheel-page .shiyu-mark h1 span:last-child{position:static;font-size:clamp(76px,22vw,118px)}
  .half-wheel-page .shiyu-mark i{left:auto;right:15%;top:24%;width:1px;height:54%;transform:none;background:linear-gradient(transparent,rgba(205,168,79,.17),transparent)}
  .half-wheel-page .single-stage.selection-open .shiyu-mark{opacity:0;transform:translateX(-50%) translateY(12px);filter:none}
  .half-wheel-page.wheel-intro-playing .shiyu-mark{transform:translateX(-50%)}
  .half-wheel-page .wheel-shell,
  .half-wheel-page .single-stage.selection-open .wheel-shell{left:50%;top:0}
  .half-wheel-page .color-panel{z-index:700}
}

@media(min-width:901px) and (min-aspect-ratio:1/1){
  .half-wheel-page .wheel-shell,
  .half-wheel-page .single-stage.selection-open .wheel-shell{left:0;top:50%}
  .half-wheel-page .color-panel{
    right:clamp(30px,3vw,62px);
    width:min(42vw,780px);
    height:min(82vh,780px);
    grid-template-columns:minmax(150px,24%) minmax(0,1fr);
    gap:clamp(22px,2vw,38px);
    transform:translate(42px,-48%);
  }
  .half-wheel-page .single-stage.selection-open .color-panel{transform:translate(0,-48%)}
  .half-wheel-page .focus-feather{width:auto;height:min(74vh,720px);max-width:100%;justify-self:center}
  .half-wheel-page .color-heading{
    grid-template-columns:minmax(128px,1fr) minmax(188px,42%);
    gap:clamp(14px,1.4vw,26px);
    align-items:center;
  }
  .half-wheel-page .color-meta{width:100%;padding:18px 2px 18px 0}
  .half-wheel-page .color-meta h2{font-size:clamp(32px,2.65vw,50px);white-space:nowrap}
  .half-wheel-page .traditional{margin-bottom:20px}
  .half-wheel-page .inline-color-tools{gap:7px}
  .half-wheel-page .primary-color-chip{min-height:64px}
  .half-wheel-page .primary-color-chip .inline-color-plane{min-height:64px}
  .half-wheel-page .complement-color-chip{grid-template-rows:38px minmax(0,1fr)}
  .half-wheel-page .inline-color-plane{min-height:38px}
  .half-wheel-page .complement-inline{grid-template-columns:minmax(0,1fr) 28px;gap:5px}
  .half-wheel-page .complement-inline-actions{gap:5px}
  .half-wheel-page .complement-color-chip>span:last-child{padding:7px 9px}
  .half-wheel-page .complement-color-chip b{font-size:10px}
  .half-wheel-page .complement-color-chip em{font-size:7px}
  .half-wheel-page .complement-inline-actions button{font-size:7px}
  .half-wheel-page .meta-grid>*{padding:15px 14px}
  .half-wheel-page .meta-grid b{font-size:12px}
  .half-wheel-page .close-panel{right:0;top:0}
}