/* Lee · screen 4 — made this rack port. Section 1 is made this src/flat.css (v12 2D rack) verbatim; section 2 restyles it for the Lee paper studio. */
.frk-scene{background:radial-gradient(75% 85% at 50% 26%,#3b3834 0%,#201e1c 48%,#0f0e0d 100%)!important;cursor:default;isolation:isolate;user-select:none;-webkit-user-select:none}
.frk-light{position:absolute;inset:0;pointer-events:none;background:radial-gradient(38% 46% at 50% 30%,rgba(255,244,226,.07),transparent 70%),linear-gradient(180deg,rgba(255,255,255,.025),transparent 30%);z-index:0}
.frk-rod{position:absolute;left:2.5%;right:2.5%;border-radius:99px;z-index:2;background:linear-gradient(180deg,#f6f6f3 0%,#d4d5d1 22%,#9fa09c 52%,#6f706c 78%,#4c4d4a 100%);box-shadow:0 7px 14px -6px rgba(0,0,0,.7),0 1px 0 rgba(255,255,255,.06)}
.frk-rod i{position:absolute;top:50%;width:14px;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%) scale(1.55);background:radial-gradient(circle at 38% 32%,#fbfbf8,#a3a4a0 55%,#575855);box-shadow:0 4px 8px rgba(0,0,0,.55)}
.frk-rod i:first-child{left:0}.frk-rod i:last-child{left:100%}
.frk-items{position:absolute;inset:0;z-index:3}
.frk-g{position:absolute;left:0;top:0;width:0;height:0;transition:transform calc(var(--tdur,.8s)*.72) cubic-bezier(.4,0,.2,1),opacity .45s,filter .45s;will-change:transform}
.frk-scene:not(.ready) .frk-g{transition:none}
.frk-sw{position:absolute;left:0;top:0;transform-origin:0 0;animation:frk-sway var(--dur,4s) ease-in-out var(--delay,0s) infinite alternate}
@keyframes frk-sway{from{transform:rotate(-.25deg)}to{transform:rotate(.25deg)}}
.frk-g.dragging .frk-sw{animation:none;transform:none}
@media (prefers-reduced-motion:reduce){.frk-sw{animation:none}.frk-g{transition:none}}
.frk-hook{position:absolute;left:0;top:0;width:1px;height:1px;overflow:visible;z-index:2}
.frk-hook path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.frk-hook .hk-b{stroke:#3a3a38}.frk-hook .hk{stroke:#dcdcd8}
/* LEE v2: the turn is a real 3D rotation — the piece swings on its hook (rotateY + perspective, eased with a slight overshoot); side and front cross-fade at mid-turn (was made this's scaleX squash) */
.frk-sw{perspective:1300px}
.frk-turn{position:absolute;left:0;top:0;width:0;height:0;z-index:1;transform-style:preserve-3d}
.frk-rot{position:absolute;left:0;top:0;width:0;height:0;transform-style:preserve-3d;transform:rotateY(0deg);transition:transform var(--tdur,.8s) cubic-bezier(.45,.05,.25,1)}
.frk-g.open .frk-rot{transform:rotateY(0deg)}
.frk-turn canvas{position:absolute;display:block;pointer-events:none;filter:drop-shadow(7px 10px 11px rgba(0,0,0,.5));backface-visibility:hidden;-webkit-backface-visibility:hidden}
.frk-side{transform-origin:50% 0;transform:rotateY(0deg);opacity:1;transition:opacity calc(var(--tdur,.8s)*.2) linear calc(var(--tdur,.8s)*.3)}
.frk-front{transform-origin:50% 0;transform:rotateY(-90deg);opacity:0;transition:opacity .2s linear}
.frk-g.open .frk-side{opacity:0;transition:opacity calc(var(--tdur,.8s)*.2) linear calc(var(--tdur,.8s)*.3)}
.frk-g.open .frk-front{opacity:1;transition:opacity calc(var(--tdur,.8s)*.16) linear calc(var(--tdur,.8s)*.6)}
.frk-g.no-side .frk-rot{transform:none}.frk-g.no-side .frk-front{transform:none;opacity:1}
.frk-rot.flip-out{transform:rotateY(180deg)!important;transition:transform .45s cubic-bezier(.4,0,.2,1)!important}
.frk-rot.flip-in{transform:rotateY(0deg)!important;transition:none!important}
.frk-g.open .frk-sw{animation:none;transform:rotate(0)}
@keyframes frk-kick{0%{transform:rotate(0)}30%{transform:rotate(-1.8deg)}62%{transform:rotate(.9deg)}100%{transform:rotate(0)}}
.frk-g.dim{opacity:.9;filter:saturate(.85)}
.frk-g.dragging{transition:none;z-index:80!important;cursor:grabbing}
.frk-g.to-tray{opacity:.55}
.frk-hit{all:unset;position:absolute;cursor:pointer;z-index:3;touch-action:none;border-radius:6px}
.frk-hit:focus-visible{outline:1px solid rgba(255,255,255,.5);outline-offset:4px}
.frk-slot{position:absolute;left:0;top:0;width:0;height:0;z-index:2;opacity:0;transition:opacity .2s}
.frk-slot:after{content:"";position:absolute;left:-16px;top:-3px;width:32px;height:6px;border-radius:9px;background:rgba(255,255,255,.28);filter:blur(1px)}
.frk-slot.on{opacity:1}

/* ---------- 2. Lee studio styling ---------- */
.rk--ported .rk__room{position:relative;padding:0 clamp(16px,2.6vw,40px)}
.rk__stage{position:relative;height:clamp(600px,calc(100vh - 178px),880px);display:flex;flex-direction:column}
.rk__stage .srk-scene{position:relative;flex:1;min-height:0;overflow:hidden;border-radius:18px;
  background:radial-gradient(100% 90% at 50% 30%,#f7f2e8 0%,#f0eadd 66%,#e6dfd0 100%)!important;
  box-shadow:inset 0 0 0 1px rgba(74,58,34,.08),0 24px 48px -40px rgba(74,58,34,.22)}
.rk__stage .frk-light{background:radial-gradient(70% 80% at 50% 28%,rgba(255,255,255,.22),transparent 80%)}
.rk__stage .frk-scene.has-sel .frk-light{background:radial-gradient(70% 80% at 50% 28%,rgba(255,255,255,.22),transparent 80%)}
.rk__stage .frk-items{will-change:transform}
.rk__stage .frk-rod{left:0;right:0;border-radius:0;box-shadow:0 8px 14px -7px rgba(60,44,20,.45),0 1px 0 rgba(255,255,255,.6)}
.rk__stage .frk-rod i{display:none}
.rk__stage .frk-hook .hk-b{stroke:#6d6a63}.rk__stage .frk-hook .hk{stroke:#f2f1ec}
.rk__stage .frk-turn canvas{filter:drop-shadow(3px 7px 7px rgba(30,32,35,.16)) drop-shadow(1px 2px 2px rgba(30,32,35,.12))}
.rk__stage .frk-g.dim{opacity:.9;filter:saturate(.85)}
.rk__stage .frk-g.big .frk-turn{transform:scale(var(--big,1));transition:transform .72s cubic-bezier(.22,.6,.2,1) .08s}
.rk__stage .frk-turn{transition:transform .62s cubic-bezier(.22,.6,.2,1)}
.rk__stage .frk-g.incoming{visibility:hidden}
.rk__stage .frk-g.is-new .frk-sw::after{content:"New · 新挂上";position:absolute;left:0;top:-58px;transform:translateX(-50%);white-space:nowrap;font:500 9.5px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--cream);background:var(--rust);padding:6px 9px;border-radius:99px;animation:rkNew 4s ease both}
@keyframes rkNew{0%{opacity:0;transform:translate(-50%,6px)}10%,80%{opacity:1;transform:translate(-50%,0)}100%{opacity:0}}
.rk__stage .frk-fade{position:absolute;top:0;bottom:0;width:72px;z-index:6;pointer-events:none;opacity:0;transition:opacity .3s}
.rk__stage .frk-fade.l{left:0;background:linear-gradient(90deg,#efe7d7,rgba(239,231,215,0))}
.rk__stage .frk-fade.r{right:0;background:linear-gradient(270deg,#efe7d7,rgba(239,231,215,0))}
.rk__stage .frk-scene.scrolls:not(.at-start) .frk-fade.l,.rk__stage .frk-scene.scrolls:not(.at-end) .frk-fade.r{opacity:1}
.rk__stage .frk-scene.scrolls{cursor:grab}.rk__stage .frk-scene.is-panning{cursor:grabbing}
.rk__stage .frk-slot:after{background:rgba(176,80,42,.45)}
.rk__stage .frk-hit:focus-visible{outline:1px solid rgba(27,38,69,.5)}
/* tray (made this: "没有放到挂杆当中的款式或衣服") */
.rk__stage .srk-tray{display:grid;grid-template-columns:240px 1fr;align-items:center;gap:0 24px;height:88px;margin-top:10px;padding:8px 18px;box-sizing:border-box;border-radius:16px;
  background:rgba(255,252,245,.55);box-shadow:inset 0 0 0 1px rgba(27,38,69,.1);transition:background .2s,box-shadow .2s}
.rk__stage .srk-tray.drop{background:rgba(176,80,42,.08);box-shadow:inset 0 0 0 1.5px var(--rust)}
.rk__stage .srk-tray-title{display:flex;flex-direction:column;gap:6px}
.rk__stage .srk-tray-title b{font:500 10.5px/1.3 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--navy)}
.rk__stage .srk-tray-title b .cn{font-family:var(--cn);letter-spacing:.12em;margin-left:6px;color:var(--rust)}
.rk__stage .srk-tray-title>span{font-size:11.5px;line-height:1.5;color:var(--muted)}
.rk__stage .srk-tray-title>span .cn{display:block;font-family:var(--cn)}
.rk__stage .srk-tray-items{display:flex;align-items:center;gap:10px;overflow-x:auto;scrollbar-width:none;height:100%}
.rk__stage .srk-tray-item{all:unset;flex:none;display:flex;align-items:center;gap:10px;height:62px;padding:6px 14px 6px 6px;box-sizing:border-box;border-radius:14px;cursor:grab;touch-action:none;
  background:var(--cream);box-shadow:0 0 0 1px rgba(27,38,69,.12),0 8px 18px -12px rgba(27,38,69,.4);transition:transform .2s,box-shadow .2s}
.rk__stage .srk-tray-item:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(27,38,69,.22),0 12px 22px -12px rgba(27,38,69,.45)}
.rk__stage .srk-tray-item img{width:54px;height:54px;object-fit:contain}
.rk__stage .srk-tray-item span{display:flex;flex-direction:column;gap:3px;font:600 12px/1.1 var(--display);color:var(--navy);white-space:nowrap}
.rk__stage .srk-tray-item small{font:400 10.5px/1 var(--cn);color:var(--muted)}
.rk__stage .srk-tray-item i{font-style:normal;color:var(--rust);font-size:15px;margin-left:2px}
.rk__stage .srk-empty{margin:0;font-size:12px;line-height:1.6;color:var(--muted)}.rk__stage .srk-empty .cn{display:block;font-family:var(--cn)}
/* focus toolbar (made this .rack-focus) */
.rk-focus{position:absolute;left:50%;bottom:130px;z-index:20;transform:translate(-50%,0);display:flex;align-items:center;gap:14px;padding:9px 10px 9px 22px;border-radius:999px;
  background:rgba(251,248,240,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 0 0 1px rgba(27,38,69,.12),0 18px 40px -18px rgba(27,38,69,.45);transition:opacity .3s,transform .4s cubic-bezier(.2,.8,.25,1);white-space:nowrap}
.rk-focus.hide{opacity:0;transform:translate(-50%,14px);pointer-events:none}
.rk-focus .nm{display:flex;flex-direction:column;gap:3px}
.rk-focus [data-eyebrow]{font:500 9px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--rust)}
.rk-focus [data-name]{font:700 15px/1 var(--display);font-stretch:80%;text-transform:uppercase;color:var(--navy)}
.rk-focus .cn{font-family:var(--cn);font-weight:400;letter-spacing:.08em;margin-left:6px;text-transform:none;color:var(--muted)}
.rk-focus [data-eyebrow] .cn{color:inherit;opacity:.8}
.rk-focus .sep{width:1px;height:22px;background:rgba(27,38,69,.14)}
.rk-focus .seg{display:flex;padding:3px;border-radius:99px;background:rgba(27,38,69,.07)}
.rk-focus button{all:unset;cursor:pointer;font:500 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--navy);padding:9px 13px;border-radius:99px;transition:background .2s,color .2s}
.rk-focus button .cn{font-size:10.5px;margin-left:5px;color:inherit;opacity:.75}
.rk-focus .seg button[aria-pressed="true"]{background:var(--navy);color:var(--cream)}
.rk-focus button:not(.seg button):hover{background:rgba(27,38,69,.08)}
.rk-focus [data-remove]{color:var(--rust)}
.rk-focus [data-close]{width:30px;height:30px;padding:0;display:grid;place-items:center;font-size:15px;background:rgba(27,38,69,.07)}
.rk-focus [hidden]{display:none}
.rk__arrows.off{opacity:.35;pointer-events:none}
.rk--ported .rk__hint{margin-top:14px}
@media (max-width:760px){
  .rk__stage{height:calc(100svh - 230px);min-height:520px}
  .rk__stage .srk-tray{grid-template-columns:1fr;height:auto;gap:8px;padding:12px 14px}
  .rk__stage .srk-tray-title>span{display:none}
  .rk__stage .srk-tray-items{height:70px}
  .rk-focus{bottom:auto;top:12px;flex-wrap:wrap;justify-content:center;gap:8px 10px;padding:10px 12px;border-radius:20px;width:calc(100% - 28px);box-sizing:border-box;white-space:normal}
  .rk-focus .nm{width:100%;align-items:center;text-align:center}
  .rk-focus .sep{display:none}
  .rk-focus button{padding:8px 10px}
}
.rk__stage .srk-tray.empty .srk-tray-title>span{display:none}

/* LEE v4: photoreal hanger pieces live on the garment's own planes and turn with it (left-facing front swings toward the viewer: +rotateY) */
.frk-turn .frk-hw{position:absolute;display:block;pointer-events:none;user-select:none;backface-visibility:hidden;-webkit-backface-visibility:hidden;max-width:none}
.rk__stage .frk-hook{display:none}
.rk__stage .frk-turn .frk-hw{filter:drop-shadow(1.5px 3px 2.5px rgba(50,36,18,.28))}
.rk__stage .frk-turn .frk-hw[data-k^=wood]{filter:drop-shadow(2px 5px 5px rgba(50,36,18,.3))}
/* LEE v4: pick-up / pendulum / drop feedback */
.rk__stage .frk-g.swinging .frk-sw,.rk__stage .frk-g.dragging .frk-sw{animation:none}
.rk__stage .frk-g .frk-turn{transition:transform calc(var(--tdur,.8s)*.6) cubic-bezier(.4,0,.2,1)}
.rk__stage .frk-g.dragging .frk-turn{transform:scale(1.03);transition:transform .42s cubic-bezier(.22,.7,.2,1)}
.rk__stage .frk-g.dragging .frk-turn canvas{filter:drop-shadow(16px 30px 22px rgba(60,42,18,.34)) drop-shadow(2px 5px 5px rgba(40,30,14,.2));transition:filter .28s}
.rk__stage .frk-g.dragging{transition:opacity .25s,filter .25s}
.rk__stage .frk-g.dragging.to-tray{opacity:.62;filter:saturate(.75)}
.rk__stage .frk-g.dragging.to-tray .frk-turn{transform:scale(.9) translateY(10px)}
.rk__stage .frk-g.dragging::after{content:"Release to take off · 松手取下";position:absolute;left:0;top:calc(var(--lab-y,60px));transform:translate(-50%,-6px);opacity:0;white-space:nowrap;
  font:500 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#fbf6ec;background:var(--rust);padding:8px 12px;border-radius:99px;box-shadow:0 10px 22px -10px rgba(120,50,20,.6);transition:opacity .2s,transform .25s;pointer-events:none;z-index:9}
.rk__stage .frk-g.dragging.to-tray::after{opacity:1;transform:translate(-50%,0)}
.rk__stage .frk-scene.to-tray .frk-slot{opacity:0}
.rk__stage .srk-tray{transition:background .25s,box-shadow .25s,transform .3s cubic-bezier(.2,.9,.25,1.2)}
.rk__stage .srk-tray.drop{transform:translateY(-3px);background:rgba(176,80,42,.1);box-shadow:inset 0 0 0 1.5px var(--rust),0 16px 30px -18px rgba(176,80,42,.6)}
.rk__stage .frk-slot:after{left:-22px;width:44px;height:7px;border-radius:9px;background:radial-gradient(closest-side,rgba(176,80,42,.55),rgba(176,80,42,0));filter:none;animation:slotPulse 1.1s ease-in-out infinite alternate}
@keyframes slotPulse{from{opacity:.55;transform:scaleX(.85)}to{opacity:1;transform:scaleX(1.1)}}
.frk-sw{will-change:transform}.rk__stage .frk-turn canvas,.rk__stage .frk-turn .frk-hw{will-change:transform}

/* LEE hung: hanger is baked into the sprite — hide overlay hangers */
.frk-g.hung-baked .frk-hw,.frk-g.hung-baked .frk-hook{display:none!important}
.frk-g.hung-baked.hung-back .frk-hw.frk-front:not([data-k=wood_front]){display:block!important;z-index:0}
.frk-g.hung-baked.hung-back canvas.frk-front{position:absolute;z-index:1}
/* from behind only the hook neck shows above the collar — the garment hides the wooden bar */
.frk-g.hung-back .frk-hw[data-k=wood_front]{display:none!important}
.frk-g.hung-baked .frk-turn canvas{max-width:none!important;max-height:none!important}
/* delete workbench pieces */
.rk-focus [data-delete].is-danger{color:var(--rust,#a8432a)}
.rk-focus [data-delete].is-danger:hover{background:rgba(168,67,42,.1)}
.srk-tray-item{position:relative}
.srk-del{position:absolute;top:-7px;right:-7px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--cream,#f6f0e4);border:1px solid rgba(30,36,60,.18);color:var(--rust,#a8432a);box-shadow:0 2px 6px rgba(40,30,14,.14);opacity:.0;transform:scale(.85);transition:opacity .2s,transform .2s;cursor:pointer}
.srk-tray-item:hover .srk-del,.srk-tray-item:focus-within .srk-del,.srk-del:focus-visible{opacity:1;transform:none}
@media (hover:none){.srk-del{opacity:1;transform:none}}
.srk-del svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.frk-g.leaving{opacity:0!important;transform:translateY(-14px) scale(.96)!important;transition:opacity .38s,transform .4s!important}
.rk-confirm{position:absolute;inset:0;z-index:200;display:grid;place-items:center;background:rgba(36,30,20,.0);backdrop-filter:blur(0);transition:background .26s,backdrop-filter .26s}
.rk-confirm.on{background:rgba(36,30,20,.22);backdrop-filter:blur(3px)}
.rk-confirm__card{width:min(400px,88%);background:var(--cream,#f6f0e4);border-radius:18px;padding:24px 26px 20px;box-shadow:0 24px 60px rgba(30,22,10,.28);transform:translateY(12px) scale(.98);opacity:0;transition:transform .3s cubic-bezier(.2,.8,.25,1),opacity .24s}
.rk-confirm.on .rk-confirm__card{transform:none;opacity:1}
.rk-confirm .ey{font:500 10px/1 var(--mono,monospace);letter-spacing:.18em;text-transform:uppercase;color:var(--rust,#a8432a);margin:0 0 10px}
.rk-confirm h3{font:600 22px/1.2 var(--serif,serif);color:var(--navy,#1e243c);margin:0 0 10px}
.rk-confirm .tx{font-size:13px;line-height:1.55;color:rgba(30,36,60,.72);margin:0 0 18px}
.rk-confirm .cn{display:block;font-size:.85em;opacity:.8;margin-top:2px}
.rk-confirm h3 .cn{display:inline;margin-left:6px}
.rk-confirm .ac{display:flex;gap:10px;justify-content:flex-end}
.rk-confirm .ac button{border:1px solid rgba(30,36,60,.2);background:transparent;border-radius:99px;padding:9px 16px;font:500 13px/1.1 inherit;color:var(--navy,#1e243c);cursor:pointer;text-align:center}
.rk-confirm .ac button .cn{font-size:10.5px}
.rk-confirm .ac [data-yes]{background:var(--rust,#a8432a);border-color:var(--rust,#a8432a);color:#fff}
.rk-confirm .ac button:hover{filter:brightness(1.05)}

/* One hook position; separate hardware, rack turn, and garment face turn. */
.frk-g.separated .frk-hardware{position:absolute;left:0;top:0;width:0;height:0;z-index:2;perspective:1300px;pointer-events:none}
.frk-g.separated .frk-hanger-turn{position:absolute;left:0;top:0;width:0;height:0;transform-style:preserve-3d;transform:rotateY(0deg);transition:transform var(--tdur,.8s) cubic-bezier(.45,.05,.25,1)}
.frk-g.separated.open .frk-hanger-turn{transform:rotateY(0deg)}
.frk-g.separated .frk-hanger{position:absolute;display:block;max-width:none;max-height:none;object-fit:contain;pointer-events:none;user-select:none;backface-visibility:hidden;-webkit-backface-visibility:hidden;filter:drop-shadow(0 1px 1px rgba(45,45,45,.12))}
.frk-g.separated .frk-hanger-front{transform:rotateY(0deg);opacity:0;transition:opacity .2s linear}
.frk-g.separated .frk-hanger-side{transform:rotateY(0deg);opacity:1;transition:opacity calc(var(--tdur,.8s)*.2) linear calc(var(--tdur,.8s)*.3)}
.frk-g.separated.open .frk-hanger-front{opacity:1;transition:opacity calc(var(--tdur,.8s)*.2) linear calc(var(--tdur,.8s)*.3)}
.frk-g.separated.open .frk-hanger-side{opacity:0;transition:opacity calc(var(--tdur,.8s)*.2) linear calc(var(--tdur,.8s)*.3)}
.frk-g.separated .frk-sw{z-index:1;perspective:1300px}
.frk-g.separated.open.is-back .frk-sw{z-index:3}
.frk-g.separated .frk-hook{display:none}
.rk__stage .frk-g.separated .frk-turn,.rk__stage .frk-g.separated.big .frk-turn,.rk__stage .frk-g.separated.dragging .frk-turn{transform:none}
.frk-g.separated .frk-face-turn,.frk-g.separated .frk-back-plane{position:absolute;left:0;top:0;width:0;height:0;transform-style:preserve-3d;transform-origin:0 0}
.frk-g.separated .frk-face-turn{transform:rotateY(0deg);opacity:0;transition:opacity calc(var(--tdur,.8s)*.2) linear calc(var(--tdur,.8s)*.3)}
.frk-g.separated.open .frk-face-turn{transform:rotateY(0deg);opacity:1;transition:transform var(--tdur,.8s) cubic-bezier(.4,0,.2,1),opacity calc(var(--tdur,.8s)*.2) linear calc(var(--tdur,.8s)*.30)}
.frk-g.separated.open.is-back .frk-face-turn{transform:rotateY(180deg)}
.frk-g.separated .frk-back-plane{transform:rotateY(180deg)}
.frk-g.separated .frk-front,.frk-g.separated .frk-back{position:absolute;display:block;opacity:1!important;transform:none;pointer-events:none;max-width:none!important;max-height:none!important;backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:none}
.frk-g.separated .frk-turn canvas{max-width:none!important;max-height:none!important}
.rk__stage .frk-rod{left:24px;right:24px;border-radius:2px;background:linear-gradient(180deg,#f8f8f8 0%,#bfc1c2 18%,#fafafa 30%,#8c9092 64%,#626769 82%,#c6c8c9 100%);box-shadow:0 8px 12px -6px rgba(35,38,40,.25),0 1px 0 rgba(255,255,255,.7)}
.rk__stage .frk-rod i{display:block;top:50%;width:12px;height:28px;aspect-ratio:auto;border-radius:3px;transform:translate(-50%,-50%);background:linear-gradient(90deg,#92979a,#eeeff0 38%,#b1b6b8 78%,#7f8588);box-shadow:1px 3px 5px rgba(35,38,40,.18)}
.frk-scene:not(.ready) .frk-hanger-turn,.frk-scene:not(.ready) .frk-face-turn{transition:none}
@media(prefers-reduced-motion:reduce){.frk-g.separated .frk-rot,.frk-g.separated .frk-face-turn,.frk-g.separated .frk-hanger-turn,.frk-g.separated .frk-turn canvas,.frk-g.separated .frk-hanger{transition:none!important}.frk-g.separated .frk-sw{animation:none}}


/* LEE r6: on the front face the garment sits in front of the hanger; only the hook shows above the collar. */
.frk-g.separated.open:not(.is-back).k-top .frk-sw{z-index:3}

/* LEE r9: the six tops + overalls carry their own photographed hanger (wood inside the collar).
   Keep the standalone hanger visible through the turn (it is what the eye follows), then fade it only
   after the garment face has covered the collar; on the way back, bring it in immediately. */
.frk-g.separated .frk-hardware{transition:opacity .22s ease}
.frk-g.separated.open:not(.is-back).k-top .frk-hardware,
.frk-g.separated.open:not(.is-back)[data-id*="overalls"] .frk-hardware{
  opacity:0;
  transition:opacity calc(var(--tdur,.8s)*.16) linear calc(var(--tdur,.8s)*.68)
}

/* LEE r11: while turning a top to its front, keep the side-view hanger standing in (it is the visual anchor);
   the front face already carries its own photographed hanger, so the hardware's front hanger is never used for tops. */
.frk-g.separated.open:not(.is-back).k-top .frk-hanger-front,
.frk-g.separated.open:not(.is-back)[data-id*="overalls"] .frk-hanger-front{opacity:0!important;transition:none!important}
.frk-g.separated.open:not(.is-back).k-top .frk-hanger-side,
.frk-g.separated.open:not(.is-back)[data-id*="overalls"] .frk-hanger-side{opacity:1!important;transition:none!important}

/* LEE r23: on the back face only the hook should read; hide the standalone hanger's arms
   (they can flash over the garment during the 180° flip). */
.frk-g.separated.open.is-back.k-top .frk-hanger-front,
.frk-g.separated.open.is-back[data-id*="overalls"] .frk-hanger-front{
  -webkit-mask-image:radial-gradient(ellipse 13% 40% at 50% 18%,#000 52%,transparent 96%);
  mask-image:radial-gradient(ellipse 13% 40% at 50% 18%,#000 52%,transparent 96%);
}

/* LEE r24: the overalls keep their photographed hanger on both faces (the back photo already shows
   the wood behind the straps), so the standalone hanger is never needed for them. */
.frk-g.separated.open[data-id*="overalls"] .frk-hardware{opacity:0}