/* publishing sequence: a 3D monitor on a desk, lit by its own screen */
#publishing{position:fixed;inset:0;overflow:hidden;background:radial-gradient(ellipse at 50% 36%,#0d0a10 0%,#050406 48%,#020203 100%);transition:opacity .6s}
#publishing.out{opacity:0}
.pc-stage{position:absolute;inset:0;display:grid;place-items:center;perspective:1700px;perspective-origin:50% 32%;
  --mw:800px;--mh:500px;--md:24px;--bz:18px;--standH:140px;--glow:rgba(255,138,61,.55)}
.pc-glow{position:absolute;left:50%;top:44%;width:calc(var(--mw) * 1.5);height:calc(var(--mh) * 1.6);transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(closest-side,var(--glow),transparent);filter:blur(36px);opacity:.3;transition:background 1.2s;pointer-events:none}
.pc{position:relative;width:var(--mw);height:calc(var(--mh) + var(--standH));transform-style:preserve-3d;margin-top:-12vh;
  transform:translateZ(-140px);transition:transform 6s cubic-bezier(.25,.6,.2,1)}
.pc.front{transform:translateZ(0)}
.pc.zoom{transition:transform 1.25s cubic-bezier(.6,0,.2,1)}
.mon{position:absolute;left:0;top:0;width:var(--mw);height:var(--mh);transform-style:preserve-3d}
.face{position:absolute}
.f-front{inset:0;transform:translateZ(calc(var(--md) / 2));background:linear-gradient(160deg,#1f1c25,#0c0b10 60%);border-radius:16px;
  padding:var(--bz) var(--bz) calc(var(--bz) * 2.3);box-sizing:border-box;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),inset 0 1.5px 0 rgba(255,255,255,.14)}
.f-front .chin{position:absolute;left:50%;bottom:calc(var(--bz) * .68);height:calc(var(--bz) * .94);width:auto;transform:translateX(-50%);fill:rgba(225,216,240,calc(.4 + var(--absorb, 0) * .5));overflow:visible;
  filter:drop-shadow(0 0 calc(var(--absorb, 0) * 9px) rgba(255,150,80,calc(var(--absorb, 0) * .95)))}
.f-front .led{position:absolute;right:calc(var(--bz) * 1.2);bottom:calc(var(--bz) * .95);width:4px;height:4px;border-radius:50%;background:#2a8a55;box-shadow:0 0 5px #2a8a55;animation:ledflick 5s steps(1) infinite}
@keyframes ledflick{0%,100%{opacity:1}47%{opacity:.25}49%{opacity:1}}
.f-front::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:.55;mix-blend-mode:overlay;
  background:radial-gradient(ellipse 30% 18% at 12% 88%,rgba(0,0,0,.7),transparent),radial-gradient(ellipse 22% 12% at 86% 10%,rgba(0,0,0,.6),transparent),url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 1 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}
.f-front::after{content:"";position:absolute;left:6%;right:4%;top:0;height:2px;border-radius:2px;pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(190,180,200,.22) 0 3px,transparent 3px 7px,rgba(190,180,200,.12) 7px 9px,transparent 9px 16px)}
.grime{position:absolute;pointer-events:none;overflow:visible}
.crack{right:0;top:0;width:calc(var(--bz) * 6);height:calc(var(--bz) * 4)}
.web{left:calc(var(--mw) * -.11);top:calc(var(--mw) * -.06);width:calc(var(--mw) * .2);height:calc(var(--mw) * .2)}
.f-back{inset:0;transform:rotateY(180deg) translateZ(calc(var(--md) / 2));background:linear-gradient(180deg,#2a2731,#141218);border-radius:16px}
.f-right,.f-left{top:12px;bottom:12px;left:calc(50% - var(--md) / 2);width:var(--md)}
.f-right{transform:rotateY(90deg) translateZ(calc(var(--mw) / 2));background:linear-gradient(90deg,#141218,#2c2933)}
.f-left{transform:rotateY(-90deg) translateZ(calc(var(--mw) / 2));background:linear-gradient(90deg,#2c2933,#141218)}
.f-top,.f-bottom{left:12px;right:12px;top:calc(50% - var(--md) / 2);height:var(--md)}
.f-top{transform:rotateX(90deg) translateZ(calc(var(--mh) / 2));background:linear-gradient(#3a3643,#24212a)}
.f-bottom{transform:rotateX(-90deg) translateZ(calc(var(--mh) / 2));background:#0c0b0f}
.pc-screen{position:relative;width:100%;height:100%;border-radius:5px;animation:dying 9s infinite;overflow:hidden;background:#06060a;box-shadow:0 0 0 1px rgba(0,0,0,.8)}
.pc-screen::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:3;
  background:radial-gradient(ellipse 18% 12% at 72% 64%,rgba(255,255,255,.025),transparent),radial-gradient(ellipse 10% 7% at 24% 30%,rgba(255,255,255,.02),transparent),
    linear-gradient(115deg,rgba(255,255,255,.09) 0%,rgba(255,255,255,.02) 32%,transparent 33%,transparent 100%),repeating-linear-gradient(0deg,rgba(0,0,0,.035) 0 1px,transparent 1px 3px),
    radial-gradient(ellipse at 50% 50%,transparent 60%,rgba(0,0,0,.45) 100%)}
@keyframes dying{0%,30%,32.5%,34%,70%,71.5%,100%{filter:brightness(1)}31%{filter:brightness(.62)}33%{filter:brightness(.8)}70.6%{filter:brightness(.5)}}
.term{position:absolute;inset:0;display:grid;grid-template-rows:auto 1fr;background:#0b0a0f;color:#cfc9da;font-family:var(--mono);font-size:max(8px,calc(var(--mw) * .017));transition:opacity .4s}
.term-bar{display:flex;align-items:center;gap:6px;padding:.7em .9em;background:#16141c;border-bottom:1px solid rgba(255,255,255,.06);color:#8f8a9c}
.term-bar i{width:.75em;height:.75em;border-radius:50%;background:#2c2934}
.term-bar span{margin-left:.6em}
.term-body{display:grid;align-content:start;gap:.55em;padding:1.1em 1.3em}
.term-cmd{margin:0;color:var(--accent)}
.term-log{margin:0;padding:0;list-style:none;display:grid;gap:.4em}
.term-log li{display:flex;gap:.8em;animation:settle .3s both}
.term-log li::before{content:"…";width:1em;color:#6d6878}
.term-log li.ok::before{content:"✓";color:#7ee2a8}
.term-log li.live{color:#fff;font-weight:600}
.term-progress{height:.45em;margin-top:.4em;border-radius:.3em;background:rgba(255,255,255,.08);overflow:hidden}
.term-progress i{display:block;height:100%;width:0;background:var(--accent);box-shadow:0 0 10px var(--accent);transition:width .3s}
.pc-site{position:absolute;inset:0;background:#fff;opacity:0;transition:opacity .5s}
.pc-site.on{opacity:1}
.pc-site-inner{position:absolute;left:0;top:0;width:1120px;transform-origin:0 0}
.pc-site-inner .browser{max-width:none;width:1120px;margin:0;border:0;border-radius:0;box-shadow:none}
.pc-flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
/* the player's results, shown on the monitor */
.pc-stats{position:absolute;inset:0;display:grid;grid-template-rows:auto;grid-auto-rows:auto;justify-items:center;align-content:center;gap:.75em;padding:1em 1.4em 1.2em;text-align:center;
  background:radial-gradient(ellipse at 50% 30%,#ff9b55 0%,#ff8a3d 50%,#e2652a 100%);color:#1a0d05;font-family:var(--mono);font-size:max(7px,calc(var(--mw) * .0205));opacity:0;transition:opacity .5s}
.pc-stats::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(26,13,5,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(26,13,5,.07) 1px,transparent 1px);background-size:1.6em 1.6em}
.pc-stats > *{position:relative}
.pc-stats.on{opacity:1}
.ps-head{position:absolute!important;top:0;left:1.4em;right:1.4em;width:auto;padding-top:.9em;display:flex;justify-content:space-between;gap:1em;color:#5a2c12;font-size:.78em;letter-spacing:.12em;text-transform:uppercase;border-bottom:1px solid rgba(26,13,5,.15);padding-bottom:.6em}
.ps-title{margin:0;font-family:var(--display);font-weight:400;font-size:2em;line-height:1.05;color:#140b05;text-shadow:.12em 0 rgba(200,0,40,.2),-.12em 0 rgba(0,90,160,.14)}
.pc-stats .end-rank{font-size:.78em;padding:.4em 1.1em .4em .55em;gap:.6em}
.pc-stats .end-rank svg{width:1.6em;height:1.6em}
.pc-stats .end-stats{width:100%;gap:.6em;align-items:start;grid-template-columns:repeat(4,minmax(0,1fr))!important}
.pc-stats .et{padding:.7em .8em .65em;gap:.35em;border-radius:.35em}
.pc-stats .et::after{top:.5em;right:.5em;width:.25em;height:.25em}
.pc-stats .et-ico{width:1.15em;height:1.15em}
.pc-stats .et-ico:has(svg.px){width:1.4em;height:1.4em}
.pc-stats .et b{font-size:1.85em}
.pc-stats .et span{font-size:.66em}
.pc-stats .et-pieces{gap:.25em}
.pc-stats .et-pieces i{width:1.15em;height:1.15em}
.pc-stats .et-pieces svg{width:.75em;height:.75em}
.pc-stats .et-wide{grid-template-columns:auto 1fr auto!important;column-gap:.9em}
.pc-stats .et-wide .seg{grid-column:auto!important;gap:.18em}
.pc-stats .et-wide b{grid-row:auto!important;grid-column:auto!important}
.pc-stats .seg i{height:.7em}
/* share window */
.share{position:fixed;inset:0;z-index:30;display:grid;place-items:center;background:rgba(3,3,5,.86);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);overflow:auto;
  padding-block:calc(env(safe-area-inset-top,0px) + 20px) calc(env(safe-area-inset-bottom,0px) + 20px);padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.share-box{display:grid;grid-template-columns:auto minmax(0,22rem);gap:24px;align-items:center;max-width:44rem}
.share-img{display:block;height:min(70vh,640px);aspect-ratio:9/16;max-width:100%;border-radius:14px;border:1px solid rgba(255,255,255,.1);box-shadow:0 30px 70px rgba(0,0,0,.7);background:#0a090c;object-fit:cover}
.share-copy{display:grid;gap:14px}
.share-copy h3{margin:0;font-family:var(--brandface);font-weight:600;font-size:1.6rem;letter-spacing:-.03em;color:var(--ink)}
.share-copy p{margin:0;font-size:13.5px;line-height:1.65;color:#bdb9c7}
.share-copy p.ok{color:#7ee2a8}
.share-copy .actions{display:flex;flex-wrap:wrap;gap:10px}
.share-wait{height:min(70vh,640px);aspect-ratio:9/16;border-radius:14px;border:1px dashed rgba(255,138,61,.3);display:grid;place-items:center;color:var(--dim);font-size:12px;letter-spacing:.1em;text-transform:uppercase}
@media (max-width:640px){.share-box{grid-template-columns:1fr;justify-items:center;text-align:center}.share-img,.share-wait{height:min(56vh,520px)}.share-copy .actions{justify-content:center}}
.pc-flash.go{animation:pcflash .7s ease-out}
@keyframes pcflash{0%{opacity:0}15%{opacity:1}100%{opacity:0}}
.neck{position:absolute;left:50%;top:calc(var(--mh) - 24px);width:calc(var(--mw) * .1);height:calc(var(--standH) + 18px);margin-left:calc(var(--mw) * -.05);
  transform:translateZ(calc(var(--md) / -2 - 4px));background:linear-gradient(90deg,#17151b,#3a3642 45%,#17151b);border-radius:6px 6px 2px 2px}
.base{position:absolute;left:50%;top:calc(var(--mh) + var(--standH) - 6px);width:calc(var(--mw) * .38);height:calc(var(--mw) * .2);margin-left:calc(var(--mw) * -.19);
  transform-origin:50% 0;transform:translateZ(calc(var(--md) / -2)) rotateX(90deg);background:radial-gradient(ellipse at 50% 30%,#46414f,#1c1a21 70%);border-radius:50% / 45%;
  box-shadow:0 0 0 2px rgba(0,0,0,.4)}
.desk{position:absolute;left:50%;top:calc(var(--mh) + var(--standH) - 6px);width:calc(var(--mw) * 3);height:calc(var(--mw) * 1.6);margin-left:calc(var(--mw) * -1.5);
  transform-origin:50% 0;transform:rotateX(90deg);transition:background 1.2s;pointer-events:none;
  background:radial-gradient(ellipse at 50% 14%,var(--glow),transparent 42%),radial-gradient(ellipse 9% 5% at 38% 24%,rgba(0,0,0,.85),transparent),radial-gradient(ellipse 14% 6% at 64% 30%,rgba(0,0,0,.7),transparent),radial-gradient(ellipse 6% 3% at 55% 16%,rgba(40,20,10,.8),transparent),repeating-linear-gradient(90deg,rgba(255,255,255,.012) 0 2px,transparent 2px 11px),#0a0809;opacity:.55}
.pc-fog{position:absolute;left:-10%;right:-10%;top:58%;height:34%;pointer-events:none;filter:blur(18px);opacity:.5;
  background:radial-gradient(ellipse 40% 50% at 30% 50%,rgba(120,110,130,.22),transparent),radial-gradient(ellipse 45% 55% at 72% 60%,rgba(110,100,120,.18),transparent);animation:fogdrift 26s ease-in-out infinite alternate}
@keyframes fogdrift{to{transform:translateX(6%)}}

.pc-grain{position:absolute;inset:-60px;pointer-events:none;opacity:.13;mix-blend-mode:overlay;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 1 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");animation:grain .5s steps(4) infinite}
@keyframes grain{25%{transform:translate(-18px,12px)}50%{transform:translate(14px,-20px)}75%{transform:translate(-8px,-6px)}}
.pc-vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 70% 62% at 50% 40%,transparent 35%,rgba(0,0,0,.6) 72%,rgba(0,0,0,.94) 100%)}
.pc-caption::before{content:"";position:absolute;left:0;right:0;bottom:0;top:-190px;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 60% 70% at 50% 100%,rgba(255,170,105,.55),transparent 70%),
    linear-gradient(to bottom,rgba(255,138,61,0) 0,rgba(255,138,61,.12) 50px,rgba(255,138,61,.42) 110px,rgba(255,138,61,.82) 160px,#ff8a3d 190px,#ff8a3d 100%)}
.pc-caption .eyebrow{color:#4a2410}
.pc-caption .end-title{color:#140b05;text-shadow:3px 0 rgba(200,0,40,.2),-3px 0 rgba(0,90,160,.14)}
.pc-caption .primary{background:#120a06;color:#ff8a3d;box-shadow:0 14px 30px -14px rgba(40,12,0,.9)}
.pc-caption .secondary{background:transparent;color:#1a0d05;border-color:rgba(26,13,5,.55)}
.pc-caption .secondary:hover{border-color:#1a0d05;background:rgba(26,13,5,.06)}
.pc-caption :focus-visible{outline-color:#120a06!important}
@media (prefers-reduced-motion:reduce){.pc-screen,.pc-grain,.pc-fog,.f-front .led{animation:none}}
.pc-caption{position:absolute;z-index:2;left:0;right:0;bottom:0;display:grid;justify-items:center;gap:12px;text-align:center;
  padding-bottom:calc(env(safe-area-inset-bottom,0px) + clamp(18px,4vh,40px));padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));transition:opacity .5s}
.pc-caption .end-title{font-size:clamp(1.5rem,4.5vw,2.4rem);text-align:center;line-height:1.15}
.pc-caption .actions{justify-content:center}
#publishing.zooming .pc-caption,#publishing.zooming .pc-glow{opacity:0}
@media (prefers-reduced-motion:reduce){.pc,.pc.zoom{transition:none}.pc-flash.go{animation:none}}