.wk-sub{ margin:0 0 clamp(6px,1.4vh,14px); font-size:clamp(.54rem,1.6vw,.64rem); letter-spacing:.32em;
  text-transform:uppercase; color:#7ea7c2; }
.realm-stone .wk-sub{ color:#c08a80; }
.wk-stages{ display:flex; flex-wrap:wrap; gap:6px; }
.wk-stage{ font-family:var(--display); font-size:clamp(.48rem,1.3vw,.56rem); letter-spacing:.14em;
  text-transform:uppercase; padding:4px 10px; border-radius:14px;
  color:#68798a; border:1px solid rgba(217,205,191,.14); }
.realm-stone .wk-stage{ color:#8a6a63; }
.wk-stage.done{ color:#06101c; background:rgb(var(--rfc,120,210,255)); border-color:rgb(var(--rfc,120,210,255));
  box-shadow:0 0 10px rgba(var(--rfc,120,210,255),.55); }
.wk-stage.done::before{ content:'\2713\2002'; }
.wk-bar{ position:relative; flex:0 0 auto; height:2px; margin-top:10px; border-radius:2px;
  background:rgba(217,205,191,.14); overflow:hidden; }
.wk-bar i{ position:absolute; inset:0; right:auto; border-radius:2px; background:rgb(var(--rfc,120,210,255));
  box-shadow:0 0 8px rgba(var(--rfc,120,210,255),.55); }
.wk-count{ flex:0 0 auto; margin:6px 0 0; font-size:.6rem; letter-spacing:.22em; text-transform:uppercase; color:#68798a; }
.realm-stone .wk-count{ color:#8a6a63; }
.wkd-sheet{ --rfc:120,210,255;
  width:min(820px,94vw); max-height:86vh; overflow-y:auto;
  padding:clamp(18px,4vmin,34px); border-radius:4px;
  border:1px solid rgba(120,210,255,.4);
  background-image:var(--grain), linear-gradient(165deg, rgba(17,26,42,.98), rgba(5,9,16,.99));
  background-size:130px 130px, auto; background-blend-mode:soft-light, normal;
  background-color:#0a111c;
  box-shadow:0 44px 120px rgba(0,0,0,.78), 0 0 72px rgba(120,210,255,.22),
    inset 0 0 0 1px rgba(0,0,0,.45);
  scrollbar-width:thin; scrollbar-color:rgba(120,210,255,.5) transparent;
  transform:translateY(16px); opacity:0;
  transition:transform .45s cubic-bezier(.2,.8,.25,1), opacity .35s ease; }
.wkd-sheet::-webkit-scrollbar{ width:5px; }
.wkd-sheet::-webkit-scrollbar-thumb{ background:rgba(120,210,255,.45); border-radius:3px; }
.rel-detail.open .wkd-sheet{ transform:none; opacity:1; }
.wkd-sheet:focus-visible{ outline:none; }
.wkd-head{ display:flex; gap:clamp(16px,3vw,28px); margin-bottom:clamp(12px,2.4vmin,18px); }
.wkd-cover{ position:relative; flex:0 0 auto; align-self:flex-start;
  width:clamp(120px,24vmin,220px); aspect-ratio:1/1; border-radius:2px; overflow:hidden;
  display:grid; place-items:center; background:#0a0a0c;
  border:1px solid rgba(217,205,191,.24);
  box-shadow:0 18px 50px rgba(0,0,0,.6), inset 0 0 0 1px rgba(0,0,0,.5); }
.wkd-cover img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.wkd-info{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; justify-content:center; }
.wkd-info .wk-stages{ margin-top:clamp(10px,2vmin,14px); }
.wkd-sheet .rd-tracks-h{ margin:clamp(18px,3.2vmin,26px) 0 10px; }
.wkd-story p{ margin:0 0 .95em; font-size:clamp(.86rem,2.3vmin,.98rem); line-height:1.8; color:#9fb6c6; }
.wkd-story p:last-child{ margin-bottom:0; }
.realm-stone .wkd-story p{ color:#caa39a; }
@media (min-width:720px){
  .wkd-sheet .rd-tracks--long{ columns:2; column-gap:clamp(24px,4vw,44px); }
  .wkd-sheet .rd-tracks--long li{ break-inside:avoid; }
}
@media (max-width:640px){
  .wkd-head{ flex-direction:column; align-items:center; text-align:center; }
  .wkd-head .wkd-cover{ align-self:center; width:min(56vw,220px); }
  .wkd-info .wk-stages{ justify-content:center; }
}
@media (prefers-reduced-motion: reduce){ .wkd-sheet{ transition:none; transform:none; opacity:1; } }
.wk-mini{ display:block; position:relative; height:3px; margin-top:8px; border-radius:2px; overflow:hidden;
  background:rgba(217,205,191,.16); }
.wk-mini i{ display:block; position:relative; height:100%; width:0; border-radius:2px; overflow:hidden;
  background:rgb(var(--rfc,120,210,255)); box-shadow:0 0 8px rgba(var(--rfc,120,210,255),.6); }
.wk-mini::after, .wk-bar::after{ content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:repeating-linear-gradient(90deg, transparent 0 calc(16.666% - 1px), rgba(4,7,12,.92) calc(16.666% - 1px) 16.666%); }
.wk-mini i::after, .wk-bar i::after{ content:''; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  animation:wkShine 3.4s ease-in-out infinite; }
@keyframes wkShine{ 0%,55%{ transform:translateX(-100%); } 90%,100%{ transform:translateX(100%); } }
.wk-bar{ height:4px; } .wk-bar i{ overflow:hidden; }

#works .rel-flip{ transition:transform .35s ease; }
#works.open .rel-flip{ animation:wkDeal .65s cubic-bezier(.2,.85,.3,1) var(--wkd,0s) backwards; }
@keyframes wkDeal{ from{ opacity:0; transform:translateY(48px) rotateX(16deg); } }
@media (hover:hover){
  #works .rel-card:hover .rel-flip{ transform:translateY(-8px); }
  #works .rel-card.is-center:hover .rel-flip{ transform:translateY(-4px); }
}
#works .rel-stage::before{ animation:wkBloom 6.5s ease-in-out infinite; }
@keyframes wkBloom{ 0%,100%{ opacity:.7; } 50%{ opacity:1; } }
#works.open .rel-heading{ animation:wkRise .6s ease backwards; }
#works .wk-sub{ display:inline-block; padding:5px 14px;
  border-radius:16px 19px 15px 20px / 19px 15px 20px 16px;
  border:1px solid rgba(120,210,255,.24);
  background-image:var(--grain), linear-gradient(180deg, rgba(14,24,38,.72), rgba(8,14,24,.72));
  background-size:130px 130px, auto; background-blend-mode:soft-light, normal; }
#works.open .wk-sub{ animation:wkSubIn .9s ease .2s backwards; }
@keyframes wkSubIn{ from{ opacity:0; letter-spacing:.55em; } }
#works .cover-empty .rel-glyph{ display:none; }
.wk-num{ position:relative; z-index:1; font-family:var(--display); line-height:1;
  font-size:clamp(3rem,14vmin,5.6rem); letter-spacing:.04em;
  color:rgba(120,210,255,.22); text-shadow:0 0 36px rgba(120,210,255,.3); }
.realm-stone .wk-num{ color:rgba(255,150,130,.22); text-shadow:0 0 36px rgba(255,150,130,.3); }
.wk-frame{ position:absolute; inset:10px; z-index:1; pointer-events:none;
  border:1px dashed rgba(217,205,191,.26); border-radius:2px; }
.wk-tape{ position:absolute; top:18px; right:-40px; z-index:2; transform:rotate(38deg);
  padding:4px 44px; font-family:var(--display); font-size:.5rem; letter-spacing:.24em;
  text-transform:uppercase; white-space:nowrap; color:#071018;
  background-image:var(--grain), linear-gradient(180deg, rgba(150,218,255,.97), rgba(100,182,232,.97));
  background-size:130px 130px, auto; background-blend-mode:soft-light, normal;
  box-shadow:0 2px 9px rgba(0,0,0,.55); }
.realm-stone .wk-tape{ background-image:var(--grain), linear-gradient(180deg, rgba(255,178,158,.97), rgba(226,124,104,.97)); }
#works .rel-prev:hover{ transform:translateY(-50%) translateX(-3px) scale(1.08); }
#works .rel-next:hover{ transform:translateY(-50%) translateX(3px) scale(1.08); }
#works .rel-nav:active{ transform:translateY(-50%) scale(.88); }
#works .rel-dot:hover{ transform:rotate(45deg) scale(1.45); }
#works .rel-dot[aria-selected="true"]{ animation:wkDot 2.6s ease-in-out infinite; }
@keyframes wkDot{ 0%,100%{ transform:rotate(45deg) scale(1.2); } 50%{ transform:rotate(45deg) scale(1.5); } }
#works .rel-close{ transition:opacity .2s ease, transform .35s ease; }
#works .rel-close:hover{ transform:rotate(90deg) scale(1.1); }
#wksDetail.open .wkd-head{ animation:wkRise .55s cubic-bezier(.2,.85,.3,1) .08s backwards; }
#wksDetail .rd-rule{ transform-origin:0 50%; }
#wksDetail.open .rd-rule{ animation:wkRule .8s cubic-bezier(.2,.85,.3,1) .28s backwards; }
#wksDetail.open .rd-tracks-h{ animation:wkRise .55s ease .32s backwards; }
#wksDetail.open .rd-tracks{ animation:wkRise .55s ease .4s backwards; }
#wksDetail.open .wkd-story{ animation:wkRise .6s ease .52s backwards; }
@keyframes wkRise{ from{ opacity:0; transform:translateY(16px) } }
@keyframes wkRule{ from{ transform:scaleX(0); transform-origin:0 50%; } }
#wksDetail .wk-stage{ animation:wkChip .45s cubic-bezier(.2,.85,.3,1) calc(.24s + var(--i,0)*.06s) backwards;
  transition:transform .2s ease, border-color .2s ease, color .2s ease; }
@keyframes wkChip{ from{ opacity:0; transform:translateY(9px) scale(.82); } }
@media (hover:hover){ #wksDetail .wk-stage:hover{ transform:translateY(-2px); border-color:rgba(217,205,191,.4); } }
#wksDetail .wk-stage.done{ animation:wkChip .45s cubic-bezier(.2,.85,.3,1) calc(.24s + var(--i,0)*.06s) backwards,
  wkDonePulse 3.2s ease-in-out 1.2s infinite; }
@keyframes wkDonePulse{ 0%,100%{ box-shadow:0 0 8px rgba(var(--rfc,120,210,255),.45); }
  50%{ box-shadow:0 0 18px rgba(var(--rfc,120,210,255),.8); } }
#wksDetail .rd-tracks li{ animation:wkTrk .4s ease calc(.36s + var(--i,0)*.035s) backwards;
  transition:transform .2s ease, background .2s ease, color .2s ease; }
@keyframes wkTrk{ from{ opacity:0; transform:translateX(-12px); } }
@media (hover:hover){ #wksDetail .rd-tracks li:hover{ transform:translateX(5px); } }
.wkd-cover{ will-change:transform; }
@media (prefers-reduced-motion: reduce){
  #works.open .rel-flip, #works .rel-stage::before, #works.open .rel-heading, #works.open .wk-sub,
  #works .rel-dot[aria-selected="true"], #wksDetail.open .wkd-head, #wksDetail.open .rd-rule,
  #wksDetail.open .rd-tracks-h, #wksDetail.open .rd-tracks, #wksDetail.open .wkd-story,
  #wksDetail .wk-stage, #wksDetail .wk-stage.done, #wksDetail .rd-tracks li,
  .wk-mini i::after, .wk-bar i::after{ animation:none; }
  #works .rel-card:hover .rel-flip, #works .rel-card.is-center:hover .rel-flip{ transform:none; }
}