:root{
  --bg:#0a0a0a;
  --card:rgba(14,14,14,.66);
  --line:rgba(255,255,255,.12);
  --line-strong:rgba(255,255,255,.3);
  --text:#ececec;
  --dim:#8d8d8d;
  --accent:#ffffff;
}
*{box-sizing:border-box;margin:0;padding:0}
img,video{-webkit-user-drag:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
html{background:var(--bg)}
body{
  background:var(--bg);
  color:var(--text);
  font-family:"JetBrains Mono",ui-monospace,monospace;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px 16px;
  min-height:100dvh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
.collage{
  position:fixed;inset:0;z-index:0;
  overflow:hidden;
  background:#070707;
}
.tile{
  position:absolute;overflow:hidden;
  width:62vw;height:64vh;
  -webkit-mask-image:radial-gradient(ellipse at center,#000 30%,transparent 72%);
  mask-image:radial-gradient(ellipse at center,#000 30%,transparent 72%);
}
.tile>*{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  background-size:cover;background-position:center;
  filter:grayscale(1) brightness(.8) contrast(1.1);
  transform:scale(1.08);
  animation:drift 26s ease-in-out infinite alternate;
}
.tile:nth-child(1){left:-12vw;top:-14vh}
.tile:nth-child(2){left:20vw;top:-18vh}
.tile:nth-child(3){right:-14vw;top:-12vh}
.tile:nth-child(4){left:-14vw;bottom:-16vh}
.tile:nth-child(5){left:22vw;bottom:-20vh}
.tile:nth-child(6){right:-12vw;bottom:-14vh}
.tile:nth-child(2)>*{animation-duration:32s;animation-direction:alternate-reverse}
.tile:nth-child(3)>*{animation-duration:29s}
.tile:nth-child(4)>*{animation-duration:35s;animation-direction:alternate-reverse}
.tile:nth-child(5)>*{animation-duration:30s}
.tile:nth-child(6)>*{animation-duration:27s;animation-direction:alternate-reverse}
@keyframes drift{
  from{transform:scale(1.08) translate(-2%,-1%)}
  to{transform:scale(1.22) translate(2%,1.5%)}
}
#bg{position:fixed;inset:0;width:100%;height:100%;z-index:1}
#snow{position:fixed;inset:0;width:100%;height:100%;z-index:30;pointer-events:none}
.grain{
  position:fixed;inset:-10%;z-index:2;pointer-events:none;opacity:.09;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation:grain 1.2s steps(6) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}
  20%{transform:translate(-3%,2%)}
  40%{transform:translate(2%,-3%)}
  60%{transform:translate(-2%,-1%)}
  80%{transform:translate(3%,3%)}
  100%{transform:translate(0,0)}
}
.vignette{
  position:fixed;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(0,0,0,0) 30%,rgba(0,0,0,.8) 100%);
}
main{
  position:relative;z-index:4;
  width:100%;max-width:460px;
  animation:rise .9s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes rise{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
.card{
  position:relative;
  background:var(--card);
  border:1px solid var(--line);
  backdrop-filter:blur(16px) saturate(110%);
  -webkit-backdrop-filter:blur(16px) saturate(110%);
  padding:34px 32px 24px;
  box-shadow:0 40px 100px rgba(0,0,0,.7);
}
.card::before,.card::after,.corner-a,.corner-b{
  content:"";position:absolute;width:18px;height:18px;border:1px solid var(--accent);pointer-events:none;
}
.card::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.card::after{top:-1px;right:-1px;border-left:0;border-bottom:0}
.corner-a{bottom:-1px;left:-1px;border-right:0;border-top:0}
.corner-b{bottom:-1px;right:-1px;border-left:0;border-top:0}
.head{display:flex;align-items:center;gap:20px;margin-bottom:26px}
.avatar{
  width:92px;height:92px;flex:none;position:relative;
  border:1px solid var(--line-strong);
  background:#141414;
  display:flex;align-items:center;justify-content:center;
  font-family:"Pirata One",serif;font-size:48px;color:var(--text);
  overflow:hidden;
}
.avatar img{width:100%;height:100%;object-fit:cover;filter:saturate(.72) brightness(.95);transition:filter .5s}
.avatar:hover img{filter:saturate(1.05) brightness(1)}
.nick{
  font-family:"Pirata One",serif;
  font-size:54px;line-height:1;letter-spacing:.5px;
  color:var(--accent);
}
.tag{display:block;margin-top:10px;font-size:11px;color:var(--dim);letter-spacing:.2em;text-transform:uppercase}
.rows{border-top:1px solid var(--line);margin-bottom:26px}
.row{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:12px 0;border-bottom:1px solid var(--line);
  font-size:15px;
  opacity:0;transform:translateX(-8px);
  animation:in .6s ease forwards;
}
.row:nth-child(1){animation-delay:.35s}
.row:nth-child(2){animation-delay:.5s}
.row:nth-child(3){animation-delay:.65s}
.row:nth-child(4){animation-delay:.8s}
.row:nth-child(5){animation-delay:.95s}
.row:nth-child(6){animation-delay:1.1s}
@keyframes in{to{opacity:1;transform:none}}
.k{color:var(--dim)}
.k::after{content:":"}
.v{color:var(--text);text-align:right}
.links{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.lw{position:relative}
.lw[hidden]{display:none}
.links.single{grid-template-columns:1fr}
.link{
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 10px;
  border:1px solid var(--line);
  color:var(--text);text-decoration:none;font-size:14px;letter-spacing:.04em;
  background:rgba(255,255,255,.03);
  transition:background .25s,border-color .25s,color .25s,transform .25s;
}
.link svg{width:20px;height:20px;fill:currentColor;flex:none}
.link:hover,.link:focus-visible{background:var(--accent);color:#0a0a0a;border-color:var(--accent);transform:translateY(-2px);outline:none}
.pv{
  position:absolute;left:50%;bottom:calc(100% + 14px);
  width:272px;
  transform:translate(-50%,8px) scale(.96);
  opacity:0;pointer-events:none;
  background:#0f0f0f;
  border:1px solid var(--line-strong);
  box-shadow:0 24px 60px rgba(0,0,0,.8);
  transition:opacity .25s,transform .25s;
  z-index:10;
}
.pv::after{
  content:"";position:absolute;left:50%;top:100%;width:10px;height:10px;
  background:#0f0f0f;border-right:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong);
  transform:translate(-50%,-5px) rotate(45deg);
}
.lw:hover .pv,.lw:focus-within .pv{opacity:1;transform:translate(-50%,0) scale(1)}
.pv-cover{height:84px;background-size:cover;background-position:center;filter:grayscale(1) brightness(.7)}
.pv-body{display:flex;gap:12px;padding:0 14px 14px;margin-top:-28px;position:relative}
.pv-av{
  width:56px;height:56px;flex:none;border:2px solid #0f0f0f;outline:1px solid var(--line-strong);
  background:#1a1a1a;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  font-family:"Pirata One",serif;font-size:30px;
}
.pv-av img{width:100%;height:100%;object-fit:cover}
.pv-txt{padding-top:32px;min-width:0}
.pv-name{font-size:14px;color:var(--text)}
.pv-sub{font-size:11px;color:var(--dim);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pv-go{
  position:absolute;right:12px;top:-46px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.8);text-shadow:0 1px 6px rgba(0,0,0,.9)
}
.foot{
  margin-top:22px;text-align:center;font-size:10px;color:var(--dim);letter-spacing:.24em;text-transform:uppercase;
  border-top:1px solid var(--line);padding-top:16px
}
.fl{
  position:fixed;z-index:3;
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
  will-change:transform;
}
.fl>*{animation:float var(--dur,9s) ease-in-out var(--delay,0s) infinite}
@keyframes float{
  0%,100%{transform:translateY(0) rotate(var(--r,0deg))}
  50%{transform:translateY(-14px) rotate(calc(var(--r,0deg) + 1.4deg))}
}
.fl.win{z-index:5;top:4vh;right:3vw;width:360px}
.win-box{
  position:relative;
  background:var(--card);
  border:1px solid var(--line-strong);
  backdrop-filter:blur(16px) saturate(110%);
  -webkit-backdrop-filter:blur(16px) saturate(110%);
  box-shadow:0 30px 80px rgba(0,0,0,.7);
}
.win-bar{
  display:flex;align-items:center;gap:6px;
  padding:8px 12px;border-bottom:1px solid var(--line);
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);
}
.win-bar i{width:7px;height:7px;border:1px solid var(--line-strong);display:block}
.win-bar b{font-weight:400;margin-left:auto}
.player{
  padding:14px;
  display:grid;grid-template-columns:72px 1fr;gap:14px;align-items:center;
}
.cover{
  width:72px;height:72px;border:1px solid var(--line-strong);background:#141414;
  display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;
}
.cover img{width:100%;height:100%;object-fit:cover;filter:saturate(.72) brightness(.93)}
.cover .bars{display:none;position:absolute;inset:auto 0 5px 0;justify-content:center;gap:3px;height:16px;align-items:flex-end}
.cover.playing .bars{display:flex}
.bars i{width:3px;background:var(--accent);height:30%;animation:eq .9s ease-in-out infinite}
.bars i:nth-child(2){animation-delay:.2s}
.bars i:nth-child(3){animation-delay:.4s}
.bars i:nth-child(4){animation-delay:.1s}
@keyframes eq{0%,100%{height:25%}50%{height:100%}}
.meta{min-width:0}
.title{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.artist{font-size:11px;color:var(--dim);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ctrl{display:flex;align-items:center;gap:6px;margin-top:10px}
.btn{
  width:30px;height:30px;border:1px solid var(--line);background:transparent;color:var(--text);
  display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none;
  transition:background .2s,color .2s;
}
.btn:hover{background:var(--accent);color:#0a0a0a}
.btn svg{width:14px;height:14px;fill:currentColor}
.bar{flex:1;height:30px;display:flex;align-items:center;cursor:pointer;min-width:0;padding:0 4px}
.track{width:100%;height:3px;background:var(--line);position:relative}
.fill{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--accent)}
.time{font-size:10px;color:var(--dim);flex:none;min-width:28px;text-align:right}
.volrow{display:flex;align-items:center;gap:8px;margin-top:8px}
.vbtn{width:26px;height:26px}
.vnum{font-size:10px;color:var(--dim);min-width:22px;text-align:right}
#vol{
  -webkit-appearance:none;appearance:none;flex:1;min-width:0;height:26px;background:transparent;cursor:pointer;margin:0
}
#vol::-webkit-slider-runnable-track{height:3px;background:linear-gradient(to right,var(--accent) var(--p,10%),var(--line) var(--p,10%))}
#vol::-moz-range-track{height:3px;background:var(--line)}
#vol::-moz-range-progress{height:3px;background:var(--accent)}
#vol::-webkit-slider-thumb{-webkit-appearance:none;width:10px;height:10px;margin-top:-3.5px;background:var(--accent);border:0;border-radius:0}
#vol::-moz-range-thumb{width:10px;height:10px;background:var(--accent);border:0;border-radius:0}
#vol:focus-visible{outline:1px solid var(--line-strong);outline-offset:2px}
.enter{
  position:fixed;inset:0;z-index:25;
  display:none;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  background:rgba(6,6,6,.72);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:0;color:var(--text);cursor:pointer;font-family:inherit;
  transition:opacity .56s cubic-bezier(.2,.8,.2,1),visibility .56s;
}
.enter.out{opacity:0;visibility:hidden;pointer-events:none}
.enter-nick{font-family:"Pirata One",serif;font-size:clamp(56px,10vw,96px);line-height:1;color:var(--accent)}
.enter-cta{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--dim)}
.enter-cta i{display:inline-block;width:7px;height:12px;background:var(--dim);margin-left:8px;vertical-align:-1px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.enter-ru{font-size:11px;color:var(--dim);opacity:.7;margin-top:-8px;letter-spacing:.04em}
html.locked,html.locked body{overflow:hidden}
html.gate .enter{display:flex}
html.locked main,html.locked .row{animation-play-state:paused}
.ph{
  position:relative;
  padding:6px;
  background:rgba(14,14,14,.72);
  border:1px solid var(--line-strong);
  box-shadow:0 24px 60px rgba(0,0,0,.65);
}
.ph-in{position:relative;overflow:hidden;aspect-ratio:var(--ar,4/3);background:#111}
.ph-in img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(.72) brightness(.93) contrast(1.04);
  transition:filter .5s;
  animation-fill-mode:both;
}
.ph:hover .ph-in img{filter:saturate(1.05) brightness(1)}
.fl:hover{z-index:6}
.fx-fade{animation:fx-fade 1.4s cubic-bezier(.2,.8,.2,1)}
.fx-soft{animation:fx-soft 1.6s cubic-bezier(.2,.8,.2,1)}
.fx-rise{animation:fx-rise 1.3s cubic-bezier(.2,.8,.2,1)}
@keyframes fx-fade{from{opacity:0}to{opacity:1}}
@keyframes fx-soft{from{opacity:0;filter:blur(10px) saturate(.4) brightness(.8);transform:scale(1.04)}to{opacity:1;transform:scale(1)}}
@keyframes fx-rise{from{clip-path:inset(100% 0 0 0);transform:scale(1.03)}to{clip-path:inset(0 0 0 0);transform:scale(1)}}
.L1{left:-2vw;top:3vh;width:14vw;--ar:4/3;--r:-4deg;--dur:10s}
.L2{left:14vw;top:2vh;width:11vw;--ar:3/4;--r:3deg;--dur:8s;--delay:-3s}
.L3{left:24vw;top:15vh;width:10vw;--ar:1/1;--r:-2deg;--dur:11s;--delay:-6s}
.L4{left:2vw;top:29vh;width:12vw;--ar:3/4;--r:2deg;--dur:9s;--delay:-2s}
.L5{left:15vw;top:36vh;width:13vw;--ar:4/3;--r:-3deg;--dur:12s;--delay:-7s}
.L6{left:-1vw;top:62vh;width:13vw;--ar:4/3;--r:3deg;--dur:10s;--delay:-4s}
.L7{left:13vw;top:61vh;width:10vw;--ar:3/4;--r:-2deg;--dur:8s;--delay:-1s}
.L8{left:24vw;top:57vh;width:9vw;--ar:4/5;--r:4deg;--dur:11s;--delay:-5s}
.L9{left:3vw;top:84vh;width:10vw;--ar:4/3;--r:-3deg;--dur:9s;--delay:-8s}
.R2{right:16vw;top:25vh;width:11vw;--ar:3/4;--r:-3deg;--dur:9s;--delay:-4s}
.R3{right:2vw;top:24vh;width:12vw;--ar:4/5;--r:3deg;--dur:10s;--delay:-1s}
.R4{right:26vw;top:44vh;width:8vw;--ar:1/1;--r:3deg;--dur:12s;--delay:-6s}
.R5{right:-2vw;top:55vh;width:12vw;--ar:3/4;--r:-2deg;--dur:11s;--delay:-3s}
.R6{right:12vw;top:57vh;width:12vw;--ar:4/3;--r:2deg;--dur:8s;--delay:-7s}
.R7{right:25vw;top:73vh;width:9vw;--ar:4/3;--r:-4deg;--dur:10s;--delay:-2s}
.R8{right:11vw;top:81vh;width:11vw;--ar:4/3;--r:3deg;--dur:9s;--delay:-5s}
.fl.win>*{--dur:7s}
.scatter{display:contents}
@media (max-width:1250px){
  .L3,.L8,.R4,.R7{display:none}
}
@media (max-height:640px) and (min-width:901px){
  .L9,.R8{display:none}
}
@media (max-width:900px){
  body{flex-direction:column;justify-content:flex-start;gap:20px;padding:156px 16px 32px}
  .fl{position:static;width:100%;transition:none}
  .fl>*{animation-duration:9s}
  .fl.win{position:fixed;top:10px;right:10px;left:auto;width:min(300px,calc(100vw - 20px));z-index:20;order:0}
  .win-bar{cursor:pointer}
  .win-box{background:rgba(10,10,10,.92)}
  .win-bar b::after{content:" \2212"}
  .win-box.min .win-bar b::after{content:" +"}
  .win-box.min .player{display:none}
  .player{padding:10px;grid-template-columns:56px 1fr;gap:12px}
  .cover{width:56px;height:56px}
  .ctrl{margin-top:6px;gap:5px}
  .btn{width:28px;height:28px}
  .bar{height:28px}
  .volrow{margin-top:4px}
  main{order:1}
  .scatter{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;order:2;max-width:460px;width:100%}
  .scatter .fl{width:100%;display:block}
  .scatter .ph{padding:4px}
  .scatter .fl:nth-child(n+10){display:none}
  .ph-in{aspect-ratio:3/4}
  .pv{display:none}
  .card{padding:26px 20px 20px}
  .nick{font-size:46px}
  .avatar{width:80px;height:80px}
}
@media (max-width:400px){
  .links{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important}
}
button.row{
  width:100%;background:none;border:0;border-bottom:1px solid var(--line);
  font:inherit;color:inherit;text-align:left;cursor:pointer;position:relative;
}
button.row::before{
  content:"";position:absolute;inset:0 -10px;background:rgba(255,255,255,.045);
  opacity:0;transition:opacity .3s;pointer-events:none;
}
.pc-row:hover::before,.pc-row:focus-visible::before{opacity:1}
.pc-row:focus-visible{outline:none}
.pc-row .v{transition:color .3s,letter-spacing .4s}
.pc-row:hover .v,.pc-row:focus-visible .v{color:var(--accent);letter-spacing:.02em}
.pc-cur{
  display:inline-block;width:.55em;height:1.05em;margin-left:8px;vertical-align:-.17em;
  background:currentColor;animation:blink 1.05s steps(1) infinite;
}
html.pc-lock,html.pc-lock body{overflow:hidden}
.pc{position:fixed;inset:0;z-index:28;display:flex;align-items:center;justify-content:center;padding:24px}
.pc[hidden]{display:none}
.pc-back{
  position:absolute;inset:0;background:rgba(4,4,4,.62);
  backdrop-filter:blur(6px) grayscale(.3);-webkit-backdrop-filter:blur(6px) grayscale(.3);
  opacity:0;transition:opacity .35s ease;
}
.pc-win{
  position:relative;width:min(640px,100%);max-height:min(860px,calc(100dvh - 48px));
  display:flex;flex-direction:column;
  background:rgba(12,12,12,.88);border:1px solid var(--line-strong);
  backdrop-filter:blur(18px) saturate(110%);-webkit-backdrop-filter:blur(18px) saturate(110%);
  box-shadow:0 40px 120px rgba(0,0,0,.8);
  opacity:0;transform:translateY(22px) scale(.965);clip-path:inset(0 0 100% 0);
  transition:opacity .3s ease,transform .5s cubic-bezier(.2,.8,.2,1),clip-path .55s cubic-bezier(.65,0,.2,1);
}
.pc-win::before,.pc-win::after{
  content:"";position:absolute;width:16px;height:16px;border:1px solid var(--accent);pointer-events:none;z-index:2
}
.pc-win::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.pc-win::after{bottom:-1px;right:-1px;border-left:0;border-top:0}
.pc.show .pc-back{opacity:1}
.pc.show .pc-win{opacity:1;transform:none;clip-path:inset(0 0 0 0)}
.pc.hide .pc-back{opacity:0}
.pc.hide .pc-win{opacity:0;transform:translateY(10px) scale(.98);transition:opacity .25s ease,transform .3s ease}
.pc-bar{flex:none;cursor:default}
.pc-bar b::after{content:none!important}
.pc-x{
  width:22px;height:22px;margin:-4px -6px -4px 10px;position:relative;
  background:none;border:1px solid transparent;cursor:pointer;color:var(--dim);
  transition:color .2s,border-color .2s;
}
.pc-x span::before,.pc-x span::after{
  content:"";position:absolute;left:50%;top:50%;width:11px;height:1px;background:currentColor;
}
.pc-x span::before{transform:translate(-50%,-50%) rotate(45deg)}
.pc-x span::after{transform:translate(-50%,-50%) rotate(-45deg)}
.pc-x:hover,.pc-x:focus-visible{color:var(--accent);border-color:var(--line-strong);outline:none}
.pc-body{
  overflow:auto;overscroll-behavior:contain;padding:22px 26px 24px;
  font-size:13px;line-height:1.55;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.2) transparent;
}
.pc-ps{color:var(--accent)}
.pc-pd{color:var(--dim)}
.pc-caret{
  display:inline-block;width:.6em;height:1.1em;vertical-align:-.2em;margin-left:1px;
  background:var(--text);animation:blink 1s steps(1) infinite;
}
.pc-caret[hidden]{display:none}
.pc-out{display:grid;grid-template-columns:minmax(0,1fr);gap:40px;align-items:start;margin-top:18px}
.pc-win:has(.pc-fig.ok){width:min(860px,100%)}
.pc-out:has(.pc-fig.ok){grid-template-columns:minmax(0,1fr) 270px}
.pc-info{min-width:0}
.ln{opacity:0;transform:translateX(-6px)}
.ln.on{opacity:1;transform:none;transition:opacity .35s ease,transform .45s cubic-bezier(.2,.8,.2,1)}
.pc-head{font-size:15px}
.pc-head b{font-weight:500;color:var(--accent)}
.pc-at{color:var(--dim)}
.pc-rule{color:var(--dim);letter-spacing:.08em;margin-bottom:4px}
.pc-kv{display:grid;grid-template-columns:9.5ch 1fr;gap:10px;padding:1px 0}
.pc-k{color:var(--accent);font-weight:500}
.pc-k::after{content:":";color:var(--dim)}
.pc-v{color:#bdbdbd;min-width:0;overflow-wrap:anywhere}
.pc-sub{display:block;color:var(--dim);font-size:12px}
.pc-sub::before{content:"\2514\2500 ";color:rgba(255,255,255,.22)}
.pc-gap{height:10px}
.pc-kv:hover .pc-v{color:var(--text)}
.pc-argb{transition:color .3s}
.pc-kv:hover .pc-argb{
  color:transparent;background:linear-gradient(90deg,#ff5f6d,#ffc371,#7cff9b,#5fd3ff,#b57cff,#ff5f6d);
  background-size:300% 100%;-webkit-background-clip:text;background-clip:text;
  animation:argb 2.2s linear infinite;
}
@keyframes argb{to{background-position:300% 0}}
.pc-ph{display:grid;grid-template-columns:1fr;gap:20px;padding:6px 4px 0;align-items:start}
.pc-ph:not(:has(.ok)){display:none}
.pc-fig{
  display:none;padding:6px;background:rgba(14,14,14,.8);border:1px solid var(--line-strong);
  box-shadow:0 18px 40px rgba(0,0,0,.6);
  opacity:0;transform:translateY(18px) rotate(0deg);
}
.pc-fig.ok{display:block}
.pc.done .pc-fig{
  opacity:1;transform:rotate(var(--r));
  transition:opacity .6s ease,transform .8s cubic-bezier(.2,.8,.2,1),box-shadow .4s;
}
.pc.done .pc-fig:nth-child(2){transition-delay:.12s}
.pc.done .pc-fig:hover{transform:rotate(0deg) scale(1.025);box-shadow:0 26px 60px rgba(0,0,0,.75);transition-delay:0s}
.pc-fig img{
  display:block;width:100%;height:auto;
  filter:saturate(.75) brightness(.92) contrast(1.04);transition:filter .5s;
}
.pc-fig:hover img{filter:saturate(1.05) brightness(1)}
.pc-end{margin-top:22px;opacity:0;cursor:pointer;width:max-content}
.pc.done .pc-end{opacity:1;transition:opacity .4s ease .5s}
@media (max-width:1040px){
  .pc-win:has(.pc-fig.ok){width:min(640px,100%)}
  .pc-out:has(.pc-fig.ok){grid-template-columns:minmax(0,1fr);gap:24px}
  .pc-ph{grid-template-columns:1fr 1fr;gap:18px}
  .pc-ph.solo{grid-template-columns:minmax(0,62%);justify-content:center}
}
@media (max-width:700px){
  .pc{padding:10px;align-items:flex-end}
  .pc-win{max-height:calc(100dvh - 20px)}
  .pc-body{padding:18px 16px 20px;font-size:12.5px}
  .pc-out,.pc-out:has(.pc-fig.ok){grid-template-columns:minmax(0,1fr);gap:18px}
  .pc-kv{grid-template-columns:9.5ch minmax(0,1fr);gap:8px}
  .pc-ph{gap:12px;margin-top:4px}
  .pc-ph.solo{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .pc-win,.pc-back,.ln.on,.pc-fig{transition:none!important}
}