/* The power-on screen: a beige 1999 mini-tower sat on a desk in a dark room, drawn with CSS 3D.
 * Sizes are in em so the whole PC scales with .pc-stage's font-size. */
.powerscr{background:#070605;color:#9a9282;font:14px var(--ui);text-align:center;cursor:default;overflow:hidden;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
:where(.powerscr) i{font-style:normal;display:block;position:absolute}
.pc-room{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 50% 42% at 50% 42%,rgba(255,222,160,.15),rgba(255,222,160,.05) 55%,transparent 80%),
    linear-gradient(180deg,#14120e 0%,#0e0c0a 55%,#070605 100%)}
.pc-room::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 75% 70% at 50% 45%,transparent 45%,rgba(0,0,0,.75) 100%)}

/* the camera: .pc-stage is the viewport, .pc-cam is the world (origin = middle of the screen, y = 0 is the desk top).
 * boot.js places the monitor and the tower and moves the camera (it writes .pc-cam's transform). */
.pc-stage{position:absolute;inset:0;font-size:clamp(5px,min(1.16vh,1.07vw),16px);perspective:115em;perspective-origin:50% 50%;pointer-events:none}
.pc-cam{--sl:.8;will-change:transform;position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;transform:translate3d(-19.99em,-8.06em,5.98em) scale3d(1,1,1) rotateX(-16.00deg) rotateY(-30.00deg) translate3d(15em,24.55em,-0.02em)}
.pc-cam div{position:absolute;left:0;top:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.pc-tower,.pc-mon,.pc-kbd,.pc-mouse{width:0;height:0;transform-style:preserve-3d}
.pc-tower{--W:20em;--H:42em;--D:34em;--B:1.3em;--Wc:19.5em;--Hc:41.4em;--Y:21.6em;transform:translate3d(17em,-21.6em,-30em)}
.pc-mon{transform:translate3d(-15em,0,0)}
.pc-kbd{transform:translate3d(-15em,0,11.5em)}
.pc-mouse{transform:translate3d(8em,0,9.5em)}
/* (these starting places match boot.js's layout(), so nothing jumps when it runs) */
.powerscr .powerbtn{pointer-events:auto}

/* the desk, its front edge, and shadows */
.pc-desk{width:150em;height:90em;margin:-45em 0 0 -75em;transform:translate3d(0,.05em,-8em) rotateX(90deg);
  background:radial-gradient(ellipse 40% 42% at 50% 52%,rgba(150,112,70,.48),rgba(92,66,40,.26) 45%,rgba(40,28,18,0) 72%),
    repeating-linear-gradient(90deg,rgba(0,0,0,.035) 0 .5em,rgba(255,220,170,.012) .5em 1.6em,rgba(0,0,0,0) 1.6em 3.7em);-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 40%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 40%,transparent 100%)}
.pc-deskedge{width:150em;height:2.6em;margin:-1.3em 0 0 -75em;transform:translate3d(0,1.35em,30em);
  background:linear-gradient(180deg,#5e4932 0,#3a2b1c 12%,#21180f 50%,#0d0905 100%);opacity:.75;
  -webkit-mask-image:linear-gradient(90deg,transparent 12%,#000 36%,#000 64%,transparent 88%);mask-image:linear-gradient(90deg,transparent 12%,#000 36%,#000 64%,transparent 88%)}
.pc-contact{width:21em;height:36em;margin:-18em 0 0 -10.5em;transform:translate3d(0,calc(var(--Y) - .02em),.6em) rotateX(90deg);
  background:rgba(0,0,0,.72);border-radius:1em;box-shadow:0 0 2em 1.4em rgba(0,0,0,.55)}
.pc-contact::before{content:"";position:absolute;left:30%;right:-60%;top:-30%;bottom:-8%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.5),rgba(0,0,0,0))}

/* the case: metal top + side behind a plastic front bezel */
.pc-top{width:var(--Wc);height:var(--D);margin:-17em 0 0 -9.75em;transform:translate3d(0,-20.7em,0) rotateX(90deg);
  background:linear-gradient(0deg,#f1ead6,#e3dbc1 40%,#d3caad);box-shadow:inset 0 0 .3em rgba(80,70,40,.25)}
.pc-ring{width:4.6em;height:4.6em;right:3em;top:7em;border-radius:50%;border:.32em solid rgba(130,90,40,.13);box-shadow:0 0 .3em rgba(130,90,40,.1)}
.pc-side{width:var(--D);height:var(--Hc);margin:-20.7em 0 0 -17em;transform:translate3d(9.75em,0,0) rotateY(90deg);overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0) 14%,rgba(0,0,0,0) 85%,rgba(0,0,0,.18)),linear-gradient(90deg,#d6cdb0 0%,#c8bf9f 55%,#b5ac8c 100%);
  filter:brightness(var(--sl));box-shadow:inset .12em .12em 0 rgba(255,255,255,.35),inset -.1em -.1em 0 rgba(0,0,0,.2)}
.pc-panel{inset:2.2em 2em 2.4em 2.4em;border-radius:.5em;box-shadow:inset .12em .12em .2em rgba(60,50,30,.35),inset -.12em -.12em .12em rgba(255,255,255,.35),.08em .08em .1em rgba(255,255,255,.25)}
.pc-svent{left:3.6em;bottom:4.4em;width:8em;height:7em;background:repeating-linear-gradient(90deg,transparent 0 .45em,#3b3426 .45em .75em,#efe7cf .75em .82em,transparent .82em 1.2em);-webkit-mask-image:linear-gradient(180deg,#000 0 82%,transparent 100%);border-radius:.3em}
.pc-warn{left:12%;top:16%;width:13em;padding:.6em .8em;font:700 .7em/1.3 var(--ui);color:#222;background:linear-gradient(180deg,#fbf6dc,#efe7c4);border:.18em solid #d9a400;transform:rotate(-1.5deg);text-transform:uppercase;letter-spacing:.02em;box-shadow:.1em .15em .2em rgba(0,0,0,.25)}
.pc-warn b{display:block;color:#a2160f;margin-top:.2em}
.pc-serial{left:40%;bottom:12%;padding:.35em .6em;font:.5em/1.2 "Courier New",monospace;color:#333;background:linear-gradient(180deg,#e9e9e9,#b8b8b8);border-radius:.2em;box-shadow:.05em .08em .12em rgba(0,0,0,.3)}

/* bezel edges (the front panel has a bit of thickness) */
.pc-bside{width:var(--B);height:var(--H);margin:-21em 0 0 -.65em;transform:translate3d(10em,0,17.65em) rotateY(90deg);border-radius:.4em;
  background:linear-gradient(90deg,#d8cfb3,#c3b999 60%,#a99f80);filter:brightness(calc(var(--sl) + .05))}
.pc-btop{width:var(--W);height:var(--B);margin:-.65em 0 0 -10em;transform:translate3d(0,-21em,17.65em) rotateX(90deg);border-radius:.4em;
  background:linear-gradient(0deg,#f7f1df,#e6dec4)}

/* the front */
.pc-front{width:var(--W);height:var(--H);margin:-21em 0 0 -10em;transform:translateZ(18.3em);border-radius:.55em .55em .35em .35em;
  background:linear-gradient(112deg,rgba(255,255,255,.2) 0,rgba(255,255,255,.06) 28%,rgba(255,255,255,0) 50%,rgba(0,0,0,.05) 100%),linear-gradient(180deg,#efe8d3 0%,#e4dcc2 40%,#d8cfb2 100%);
  box-shadow:inset .16em .16em .08em rgba(255,255,255,.7),inset -.18em -.22em .2em rgba(110,95,60,.35)}
.pc-bay{left:1.6em;width:16.8em;height:4.3em;border-radius:.18em;background:linear-gradient(180deg,#ebe4cd,#d9d0b4);
  box-shadow:0 0 0 .09em #a3997a,0 0 0 .16em rgba(255,255,255,.5),inset 0 .1em 0 rgba(255,255,255,.7),inset 0 -.12em .1em rgba(110,95,60,.25)}
.pc-cd{top:1.9em}
.pc-tray{left:.45em;right:.45em;top:.45em;height:2.15em;border-radius:.12em;background:linear-gradient(180deg,#e7e0c8,#d6cdb0);box-shadow:0 0 0 .07em rgba(70,60,40,.55),inset 0 .08em 0 rgba(255,255,255,.65),0 .1em .08em rgba(0,0,0,.18)}
.pc-cdlogo{left:7%;top:22%;display:flex;align-items:center;gap:.35em;font:italic 900 .72em/1 var(--ui);color:#7a705a;letter-spacing:.02em;text-shadow:0 .06em 0 rgba(255,255,255,.6)}
.pc-cdlogo i{position:static;width:1.25em;height:1.25em;border-radius:50%;background:radial-gradient(circle,#d8d2c2 0 .14em,#8f8770 .16em .2em,transparent .22em),conic-gradient(from 30deg,#c9c3b2,#efe9dc,#b9c6cf,#e7d6c3,#c9c3b2,#efe9dc,#c9c3b2);box-shadow:0 0 0 .07em #8f8770}
.pc-cdx{right:8%;top:28%;font:700 .5em/1 var(--ui);color:#857b63;letter-spacing:.08em}
.pc-jack{left:.85em;top:2.95em;width:.62em;height:.62em;border-radius:50%;background:radial-gradient(circle,#0c0a07 0 32%,#3a3428 40%,#8f8770 62%,#c8bfa2 72%);box-shadow:0 .05em 0 rgba(255,255,255,.6)}
.pc-vol{left:1.85em;top:3.05em;width:1.1em;height:.42em;border-radius:.08em;background:repeating-linear-gradient(90deg,#6e6650 0 .07em,#c9c0a3 .07em .16em);box-shadow:inset 0 .06em .06em rgba(0,0,0,.5),0 .05em 0 rgba(255,255,255,.6)}
.pc-cdled{left:3.45em;top:3.12em;width:.42em;height:.24em;border-radius:.06em;background:#4f3d24;box-shadow:inset 0 .04em .04em rgba(0,0,0,.6)}
.pc-ej{border-radius:.14em;background:linear-gradient(180deg,#f2ecd9,#d2c8aa);box-shadow:0 0 0 .07em #8f8566,0 .1em .08em rgba(0,0,0,.3),inset 0 .06em 0 #fff}
.pc-cdej{right:.85em;top:2.95em;width:2.1em;height:.62em}
.pc-blank{top:6.75em}
.pc-blank>i{left:.45em;right:.45em;top:.45em;bottom:.45em;border-radius:.1em;background:repeating-linear-gradient(180deg,rgba(0,0,0,0) 0 .62em,rgba(100,88,60,.22) .62em .7em,rgba(255,255,255,.45) .7em .76em,rgba(0,0,0,0) .76em .84em)}
.pc-blank>i::after{content:"";position:absolute;left:50%;bottom:-.05em;width:2em;height:.35em;margin-left:-1em;border-radius:.3em .3em 0 0;background:#b7ad8e;box-shadow:inset 0 .08em .08em rgba(0,0,0,.35)}
.pc-fdd{left:4.4em;top:11.7em;width:11.2em;height:2.9em;border-radius:.18em;background:linear-gradient(180deg,#ebe4cd,#d9d0b4);
  box-shadow:0 0 0 .09em #a3997a,0 0 0 .16em rgba(255,255,255,.5),inset 0 .1em 0 rgba(255,255,255,.7),inset 0 -.12em .1em rgba(110,95,60,.25)}
.pc-slot{left:.85em;right:.85em;top:.62em;height:.62em;border-radius:.12em;background:linear-gradient(180deg,#14110b,#3c3527 45%,#72694e 100%);box-shadow:inset 0 .12em .12em #000,0 .07em 0 rgba(255,255,255,.75),0 -.05em 0 rgba(90,80,55,.5)}
.pc-fled{left:.9em;bottom:.48em;width:.6em;height:.26em;border-radius:.06em;background:#33402a;box-shadow:inset 0 .04em .04em rgba(0,0,0,.6)}
.pc-fdl{left:16%;bottom:16%;font:700 .4em/1 var(--ui);color:#8a8068;letter-spacing:.1em}
.pc-fdej{right:.85em;bottom:.36em;width:1.55em;height:.6em}
.pc-badge{left:50%;top:15.75em;width:10.4em;margin-left:-5.2em;height:1.75em;border-radius:.3em;display:flex;align-items:center;justify-content:center;gap:.3em;font:1em/1 var(--mag);letter-spacing:.06em;color:#1d2c58;text-transform:uppercase;
  background:linear-gradient(180deg,#fdfdfd 0%,#c9cdd3 46%,#9ba1aa 50%,#e2e5ea 100%);box-shadow:0 0 0 .08em #6c7079,0 .12em .14em rgba(0,0,0,.35),inset 0 .08em 0 #fff;text-shadow:0 .06em 0 rgba(255,255,255,.7)}
.pc-badge b{font-weight:400;color:#8a1010}
.pc-ready{left:0;right:0;top:43.4%;font:700 .62em/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:#a49a7c;text-shadow:0 .08em 0 rgba(255,255,255,.75),0 -.05em 0 rgba(90,80,50,.35)}
.pc-ready b{color:#2a7a2a;font-weight:700}

.pc-ctrl{left:1.6em;top:19.6em;width:16.8em;height:6.6em;border-radius:.5em;background:linear-gradient(180deg,#d8cfb2,#e6dec5);box-shadow:inset 0 .16em .25em rgba(80,70,40,.4),inset 0 -.1em .1em rgba(255,255,255,.6),0 .08em 0 rgba(255,255,255,.6)}
.pc-well{left:50%;top:50%;width:5.6em;height:5.6em;margin:-2.8em 0 0 -2.8em;border-radius:1.15em;background:linear-gradient(180deg,#a59b7c,#cfc6a8);box-shadow:inset 0 .2em .3em rgba(40,32,15,.55),0 .08em 0 rgba(255,255,255,.7)}
.powerscr .powerbtn{position:absolute;left:50%;top:50%;width:4.7em;height:4.7em;margin:-2.62em 0 0 -2.35em;padding:0;border:0;border-radius:.9em;cursor:pointer;color:#8c8264;font-size:1em;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse 80% 70% at 38% 28%,#fffcf0 0%,#ece5ce 40%,#d6cdaf 75%,#c2b896 100%);
  box-shadow:0 .32em 0 #a3997a,0 .36em 0 #8a805f,0 .55em .5em rgba(0,0,0,.4),inset 0 .12em .06em rgba(255,255,255,.9),inset 0 -.2em .25em rgba(120,105,70,.35);
  transition:transform .08s,box-shadow .08s}
.powerbtn svg{width:2.2em;height:2.2em;filter:drop-shadow(0 .06em 0 rgba(255,255,255,.8))}
.powerbtn::after{content:"";position:absolute;inset:-.5em;border-radius:1.3em;pointer-events:none;box-shadow:0 0 1.2em .25em rgba(255,236,170,.55);opacity:.25;animation:pcglow 2.4s ease-in-out infinite}
.powerbtn:focus{outline:none}
.powerbtn:focus-visible{outline:.18em dashed #3a6ad0;outline-offset:.55em}
.powerbtn:active,.powerbtn.down{transform:translateY(.28em);box-shadow:0 .05em 0 #a3997a,0 .08em 0 #8a805f,0 .15em .2em rgba(0,0,0,.35),inset 0 .14em .2em rgba(110,95,60,.35),inset 0 -.06em .06em rgba(255,255,255,.4)}
.powerbtn.down::after{animation:none;opacity:0}
@keyframes pcglow{0%,100%{opacity:.15}50%{opacity:.85}}

.pc-leds{left:1em;top:1em;display:grid;grid-template-columns:auto;justify-items:center;gap:.25em;width:2.6em}
.pc-leds i,.pc-small i{position:static}
.pc-leds span,.pc-small span{font:700 .4em/1 var(--ui);letter-spacing:.08em;color:#7e7459;text-shadow:0 .1em 0 rgba(255,255,255,.6);margin-bottom:.35em}
.pc-led{width:.72em;height:.72em;border-radius:50%;box-shadow:0 0 0 .1em #9b9172,0 .1em 0 .1em rgba(255,255,255,.55),inset 0 .1em .12em rgba(0,0,0,.5)}
.pc-pw{background:radial-gradient(circle at 35% 30%,#7d9470,#34452b 60%,#1f2a19)}
.pc-hd{background:radial-gradient(circle at 35% 30%,#a58a5a,#5d4424 60%,#3a2914)}
.pc-small{right:1em;top:1em;display:grid;justify-items:center;gap:.25em;width:2.6em}
.pc-sb{width:1.05em;height:1.05em;border-radius:50%;background:radial-gradient(circle at 40% 35%,#f6f0de,#cfc5a7);box-shadow:0 0 0 .1em #9b9172,0 .12em 0 .1em #a39878,0 .18em .2em .1em rgba(0,0,0,.25)}
.pc-reset{width:.8em;height:.8em;margin:.12em 0;box-shadow:0 0 0 .14em #8d8364,inset 0 .12em .12em rgba(0,0,0,.45)}
.pc-note{left:5%;top:60.2%;width:6.4em;padding:.75em .3em .6em;font:1.15em/1 "Bangers",var(--mag);letter-spacing:.06em;color:#1a3a9a;background:linear-gradient(170deg,#fff6a0,#f5e46a 70%,#e9d24e);transform:rotate(-6deg);transform-origin:20% 0;box-shadow:.12em .3em .35em rgba(0,0,0,.3);z-index:2;font-size:.95em}
.pc-note small{display:block;font:700 .55em/1.2 var(--ui);color:#6a5a10;margin-top:.25em;letter-spacing:0;text-transform:none}
.pc-note::before{content:"";position:absolute;left:30%;top:-.35em;width:40%;height:.8em;background:rgba(255,255,255,.45);transform:rotate(3deg)}
.pc-grille{left:3em;top:27.3em;width:14em;height:9.9em;border-radius:.6em;
  background:repeating-linear-gradient(180deg,transparent 0 .48em,#3d3628 .48em .58em,#211d14 .58em .8em,#5a5240 .8em .86em,#f3ecd8 .86em .94em,transparent .94em 1.22em);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 .6em,#000 calc(100% - .6em),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 .6em,#000 calc(100% - .6em),transparent 100%)}
.pc-chip{right:1.2em;top:37.7em;width:6.4em;height:2.3em;white-space:nowrap;border-radius:.2em;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#f3d266;
  background:linear-gradient(135deg,#2a2a33,#0e0e14);box-shadow:0 0 0 .1em #c9a33a,0 0 0 .2em #2a2418,.06em .12em .2em .2em rgba(0,0,0,.25)}
.pc-chip b{font:400 .78em/1 var(--mag);letter-spacing:.06em}
.pc-chip small{font:italic 700 .6em/1 var(--ui);color:#f1ead6;margin-top:.12em;letter-spacing:.03em}
.pc-chip::before,.pc-chip::after{content:"";position:absolute;left:.5em;right:.5em;height:.22em;background:repeating-linear-gradient(90deg,#c9a33a 0 .2em,transparent .2em .42em)}
.pc-chip::before{top:-.42em}.pc-chip::after{bottom:-.42em}
.pc-plinth{left:0;right:0;bottom:0;height:1.2em;border-radius:0 0 .35em .35em;background:linear-gradient(180deg,#bfb595,#d0c7a9);box-shadow:inset 0 .08em 0 rgba(80,70,45,.45)}
.pc-foot{bottom:-.62em;width:3.2em;height:.66em;border-radius:0 0 .3em .3em;background:linear-gradient(180deg,#3c362c,#14110c)}
.pc-foot.l{left:1.4em}.pc-foot.r{right:1.4em}

/* switched on */
.powerscr.on .pc-pw{background:radial-gradient(circle at 35% 30%,#eaffde,#4cf04c 45%,#139113);box-shadow:0 0 0 .1em #9b9172,0 0 .7em .25em rgba(80,255,80,.65)}
.powerscr.on .pc-hd{animation:pchdd .9s steps(1) infinite}
.powerscr.on .pc-fled{animation:pchdd 1.3s steps(1) .2s infinite}
.powerscr.on .pc-cdled{animation:pchdd 1.7s steps(1) .45s infinite}
@keyframes pchdd{0%,22%,48%,61%,100%{background:#ffb21a;box-shadow:0 0 0 .1em #9b9172,0 0 .6em .2em rgba(255,170,30,.7)}12%,35%,55%,80%{background:#5d4424;box-shadow:0 0 0 .1em #9b9172}}
.powerscr.on .pc-note{transition:transform .5s;transform:rotate(-12deg) translateY(.4em)}
.powerbtn::before{content:"";position:absolute;inset:min(-.9em,calc(2.35em - 28px));border-radius:1.3em}

/* ---- the monitor (origin: desk level, under the middle of the front of the bezel; z = 0 is the bezel front) */
.pm-front{width:38em;height:33em;margin:-16.5em 0 0 -19em;transform:translate3d(0,-22.5em,0);border-radius:1.3em 1.3em 1em 1em;
  background:linear-gradient(112deg,rgba(255,255,255,.2) 0,rgba(255,255,255,.06) 28%,rgba(255,255,255,0) 50%,rgba(0,0,0,.05) 100%),linear-gradient(180deg,#efe8d3 0%,#e4dcc2 45%,#d6cdb0 100%);
  box-shadow:inset .2em .2em .1em rgba(255,255,255,.7),inset -.22em -.26em .25em rgba(110,95,60,.35)}
.pm-side{width:3.5em;height:33em;margin:-16.5em 0 0 -1.75em;transform:translate3d(19em,-22.5em,-1.75em) rotateY(90deg);border-radius:.8em;
  background:linear-gradient(90deg,#d6cdb0,#c1b796 70%,#a99f80);filter:brightness(var(--sl,.8))}
.pm-top{width:38em;height:3.5em;margin:-1.75em 0 0 -19em;transform:translate3d(0,-39em,-1.75em) rotateX(90deg);border-radius:.8em;background:linear-gradient(0deg,#f6f0de,#e3dbc1)}
.pm-rside{width:21em;height:30.5em;margin:-15.25em 0 0 -10.5em;transform:translate3d(15.25em,-22.75em,-13.75em) rotateY(102.4deg);clip-path:polygon(0 0,100% 3.3%,100% 72.1%,0 100%);
  background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(0,0,0,0) 25%,rgba(0,0,0,0) 70%,rgba(0,0,0,.22)),linear-gradient(90deg,#cfc6a8 0%,#bdb393 50%,#9f9576 100%);filter:brightness(var(--sl,.8))}
.pm-rside::before{content:"";position:absolute;left:58%;top:30%;width:26%;height:32%;background:repeating-linear-gradient(180deg,transparent 0 .5em,#3b3426 .5em .8em,#efe7cf .8em .87em,transparent .87em 1.3em);opacity:.7}
.pm-label{left:30%;top:58%;width:9em;padding:.3em .45em;font:.42em/1.25 var(--ui);color:#333;background:linear-gradient(180deg,#efefef,#c4c4c4);border-radius:.2em;transform:rotate(-1deg)}
.pm-rtop{width:35em;height:20.52em;margin:-10.26em 0 0 -17.5em;transform:translate3d(0,-37.5em,-13.75em) rotateX(92.8deg);clip-path:polygon(12.86% 0,87.14% 0,100% 100%,0 100%);
  background:linear-gradient(0deg,#ece5cf,#ddd4b8 55%,#cbc1a2)}
.pm-vents{left:28%;right:28%;top:12%;height:38%;background:repeating-linear-gradient(90deg,transparent 0 .55em,#3b3426 .55em .85em,#f4edd9 .85em .92em,transparent .92em 1.35em);border-radius:.4em;opacity:.85}
.pm-nfront{width:13em;height:5em;margin:-2.5em 0 0 -6.5em;transform:translate3d(0,-4.4em,-5em);border-radius:.5em .5em 0 0;background:linear-gradient(180deg,#5c5544 0%,#8f8668 35%,#bdb393 75%,#cfc6a8 100%)}
.pm-nside{width:10em;height:5em;margin:-2.5em 0 0 -5em;transform:translate3d(6.5em,-4.4em,-10em) rotateY(90deg);background:linear-gradient(180deg,#4f4939,#8a8165 45%,#a99f80);filter:brightness(var(--sl,.8))}
.pm-btop2{width:22em;height:19em;margin:-9.5em 0 0 -11em;transform:translate3d(0,-2em,-8.5em) rotateX(90deg);border-radius:1.2em 1.2em .25em .25em;
  background:radial-gradient(ellipse 42% 34% at 50% 58%,rgba(40,32,15,.5),rgba(40,32,15,.22) 55%,rgba(40,32,15,0) 80%),linear-gradient(0deg,#ece5cf,#ddd4b8 60%,#cdc3a4);box-shadow:inset 0 -.15em .1em rgba(255,255,255,.55),inset 0 0 .3em rgba(80,70,40,.25)}
.pm-bfront{width:22em;height:2em;margin:-1em 0 0 -11em;transform:translate3d(0,-1em,1em);border-radius:0 0 .5em .5em;background:linear-gradient(180deg,#e9e1c8,#cfc5a6 55%,#b4aa8b);box-shadow:inset 0 .08em 0 rgba(255,255,255,.6)}
.pm-bside{width:19em;height:2em;margin:-1em 0 0 -9.5em;transform:translate3d(11em,-1em,-8.5em) rotateY(90deg);border-radius:0 0 .5em .5em;background:linear-gradient(180deg,#cfc5a6,#a99f80);filter:brightness(var(--sl,.8))}
.pm-contact{width:30em;height:30em;margin:-15em 0 0 -15em;transform:translate3d(0,-.02em,-10em) rotateX(90deg);border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.7),rgba(0,0,0,.35) 60%,rgba(0,0,0,0))}

/* the screen: a slightly curved, dark glass tube with the room reflected in it */
.pm-glass{left:4em;top:3.2em;width:30em;height:22.5em;overflow:hidden;border-radius:1.5em/1.8em;
  background:radial-gradient(ellipse 75% 70% at 50% 46%,#2b322f 0%,#1c211f 50%,#0d0f0e 100%);
  box-shadow:0 0 0 .22em #1e1c17,0 0 0 .55em #b9af90,0 0 0 .62em #d7ceb2,inset 0 0 1.6em .3em rgba(0,0,0,.85),inset 0 .5em 1em rgba(0,0,0,.6)}
.pm-pic{inset:0;background:#000;opacity:0}
.pm-text{position:absolute;left:0;top:0;margin:0;color:#c0c0c0;font:15px/1.35 "Courier New",monospace;white-space:pre-wrap;text-align:left;text-shadow:0 0 .3em rgba(200,200,200,.45)}
.pm-star{color:#2a7ad8;text-shadow:0 0 12px #2a7ad8;line-height:1}
.pm-degauss{inset:0;opacity:0;mix-blend-mode:screen;background:radial-gradient(circle at 30% 40%,rgba(255,0,180,.55),transparent 40%),radial-gradient(circle at 72% 60%,rgba(0,255,140,.5),transparent 42%),radial-gradient(circle at 55% 25%,rgba(40,120,255,.5),transparent 40%)}
.pm-line{left:0;right:0;top:50%;height:.3em;margin-top:-.15em;background:#fff;opacity:0;box-shadow:0 0 1em .3em rgba(220,235,255,.9)}
.pm-refl{inset:0;pointer-events:none;
  background:radial-gradient(ellipse 45% 30% at 26% 18%,rgba(255,244,220,.16),rgba(255,244,220,0) 70%),
    linear-gradient(128deg,rgba(255,255,255,.1) 0%,rgba(255,255,255,.04) 26%,rgba(255,255,255,0) 40%),
    radial-gradient(ellipse 30% 14% at 70% 88%,rgba(255,210,150,.06),rgba(0,0,0,0) 70%),
    radial-gradient(ellipse 100% 100% at 50% 50%,rgba(0,0,0,0) 60%,rgba(0,0,0,.35) 100%)}
.pm-brand{left:9.5%;top:82.6%;font:1.25em/1 var(--mag);letter-spacing:.08em;color:#8a805f;text-transform:uppercase;text-shadow:0 .07em 0 rgba(255,255,255,.75),0 -.04em 0 rgba(80,70,40,.35)}
.pm-brand b{font-weight:400;margin-left:.2em;color:#1d2c58}
.pm-sub{left:9.8%;top:90.2%;font:700 .42em/1 var(--ui);letter-spacing:.14em;color:#a49a7c}
.pm-btns{left:17.2em;top:28.4em;display:flex;gap:.5em}
.pm-btns i{position:static;width:1.5em;height:.7em;border-radius:.15em;background:linear-gradient(180deg,#f5efdd,#d0c6a8);box-shadow:0 0 0 .07em #8f8566,0 .1em .08em rgba(0,0,0,.28)}
.pm-knobs{left:26.2em;top:27.95em;display:flex;gap:.6em}
.pm-knobs i{position:static;width:.75em;height:1.6em;border-radius:.2em;background:repeating-linear-gradient(180deg,#8a805f 0 .1em,#ddd4b8 .1em .24em);box-shadow:inset .15em 0 .12em rgba(0,0,0,.35),inset -.15em 0 .12em rgba(0,0,0,.35)}
.pm-pwr{right:3.4em;top:28.1em;width:2.5em;height:1.1em;border-radius:.3em;background:linear-gradient(180deg,#f8f2e1,#d2c8a9);box-shadow:0 0 0 .09em #8f8566,0 .16em 0 #a3997a,0 .24em .2em rgba(0,0,0,.3)}
.pm-led{right:6.5em;top:28.35em;width:.6em;height:.6em;border-radius:50%;background:radial-gradient(circle at 35% 30%,#7d9470,#34452b 60%,#1f2a19);box-shadow:0 0 0 .09em #9b9172,inset 0 .08em .1em rgba(0,0,0,.5)}
.powerscr.mon .pm-led{background:radial-gradient(circle at 35% 30%,#eaffde,#4cf04c 45%,#139113);box-shadow:0 0 0 .09em #9b9172,0 0 .6em .2em rgba(80,255,80,.6)}

/* the keyboard and mouse */
.pk-top{width:30em;height:10em;margin:-5em 0 0 -15em;transform:translate3d(0,-1.1em,0) rotateX(85deg);border-radius:.5em;background:linear-gradient(0deg,#e3dbc1,#efe8d4);box-shadow:inset 0 0 0 .1em #c9bf9f}
.pk-top i{background:repeating-linear-gradient(180deg,rgba(255,255,255,.75) 0,rgba(255,255,255,.75) .07em,rgba(0,0,0,0) .07em,rgba(0,0,0,0) .86em,rgba(110,95,60,.28) .86em,rgba(110,95,60,.28) 1.08em,rgba(50,40,20,.55) 1.08em,rgba(50,40,20,.55) 1.2em),repeating-linear-gradient(90deg,rgba(0,0,0,0) 0,rgba(0,0,0,0) 1.18em,rgba(60,50,30,.45) 1.18em,rgba(60,50,30,.45) 1.32em),linear-gradient(90deg,#f6f1e1,#ebe4cf)}
.pk-fn{left:.8em;top:.6em;width:19.8em;height:1.08em}
.pk-main{left:.8em;top:2.1em;width:19.8em;height:5.88em}
.pk-space{left:5.6em;top:8.1em;width:9.6em;height:1.08em;border-radius:.15em}
.pk-num{left:22.2em;top:2.1em;width:6.48em;height:7.08em}
.pk-leds{left:22.6em;top:.75em;display:flex;gap:.9em;background:none!important}
.pk-leds i{position:static;width:.4em;height:.4em;border-radius:50%;background:#34452b}
.powerscr.on .pk-leds i{background:#5cf05c;box-shadow:0 0 .3em #5f5}
.pk-front{width:30em;height:.7em;margin:-.35em 0 0 -15em;transform:translate3d(0,-.33em,4.98em);border-radius:0 0 .3em .3em;background:linear-gradient(180deg,#d9d0b3,#a99f80)}
.pk-side{width:10em;height:1.54em;margin:-.77em 0 0 -5em;transform:translate3d(15em,-.77em,0) rotateY(90deg);clip-path:polygon(0 57%,100% 0,100% 100%,0 100%);background:#b7ad8e;filter:brightness(var(--sl,.8))}
.pm-mat{width:10em;height:8.5em;margin:-4.25em 0 0 -5em;transform:translate3d(0,-.06em,0) rotateX(90deg);border-radius:.6em;background:linear-gradient(135deg,#23306b,#141c45);box-shadow:0 0 .6em rgba(0,0,0,.6)}
.pm-mat i{left:0;right:0;bottom:.6em;font:.95em/1 "Bangers",var(--mag);letter-spacing:.06em;color:#ffcf2a;opacity:.85}
/* the mouse: a stack of slices getting smaller towards the top makes the domed body (darker low down, lit on top) */
.pm-ms{border-radius:46% 46% 44% 44%/36% 36% 60% 60%;background:linear-gradient(90deg,#d9d0b3,#ece5cf 45%,#c9bf9f)}
.pm-mtop{background:radial-gradient(ellipse 70% 55% at 40% 32%,#fffbee,#eee7d2 55%,#d6cdb0)}
.pm-mtop i{left:49%;top:6%;height:36%;width:.07em;background:rgba(90,80,55,.55)}
.pm-mtop::after{content:"";position:absolute;left:8%;right:8%;top:40%;height:.07em;background:rgba(90,80,55,.5);border-radius:50%}
.pm-mshadow{width:4.6em;height:7em;margin:-3.5em 0 0 -2.3em;transform:translate3d(.5em,-.08em,.2em) rotateX(90deg);border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.55),rgba(0,0,0,.25) 60%,rgba(0,0,0,0))}
.pm-cable{width:12em;height:44em;margin:-22em 0 0 -6em;transform:translate3d(-1em,-.07em,-19em) rotateX(90deg);
  -webkit-mask-image:linear-gradient(0deg,#000 70%,transparent 100%);mask-image:linear-gradient(0deg,#000 70%,transparent 100%)}
.pm-cable svg{display:block;overflow:visible}
.pm-cable path{fill:none;stroke:#d8cfb3;stroke-width:.32;stroke-linecap:round}
.pm-cable path.sh{stroke:rgba(0,0,0,.45);stroke-width:.5}

/* switching on: the tube warms up (a dot, a line, a flash, then the picture with a degauss wobble) */
.pm-glass.warm .pm-line{animation:pmline 1s ease-out forwards}
.pm-glass.warm .pm-pic{animation:pmpic 1.3s ease-out forwards}
.pm-glass.warm .pm-degauss{animation:pmdeg 1.2s ease-out .45s}
@keyframes pmline{0%{opacity:1;transform:scale(.01,.4)}20%{opacity:1;transform:scale(1,.4)}50%{opacity:.6;transform:scale(1,60)}100%{opacity:0;transform:scale(1,80)}}
@keyframes pmpic{0%,38%{opacity:0;transform:none;filter:brightness(1.6)}50%{opacity:1;transform:skewX(2.5deg) scale(1.02,.98)}60%{transform:skewX(-2deg) scale(.99,1.01)}70%{transform:skewX(1.2deg)}80%{transform:skewX(-.6deg)}100%{opacity:1;transform:none;filter:none}}
@keyframes pmdeg{0%{opacity:0;transform:rotate(0)}25%{opacity:.32}100%{opacity:0;transform:rotate(40deg) scale(1.2)}}
.powerscr.go .pc-desk,.powerscr.go .pc-deskedge{opacity:0;transition:opacity .8s .5s}
/* the keyboard and mouse are nearest the camera: fade them (face by face, so the 3D stays intact) before the camera passes them */
.powerscr.go .pc-kbd>div,.powerscr.go .pc-mouse>div{opacity:0;transition:opacity .45s .2s}
.powerscr.deep .pc-desk,.powerscr.deep .pc-deskedge,.powerscr.deep .pc-tower,.powerscr.deep .pc-kbd,.powerscr.deep .pc-mouse,.powerscr.deep .pm-f:not(.pm-front),.powerscr.deep .pm-contact{visibility:hidden}
.powerscr.go .pm-refl{opacity:0;transition:opacity .9s .3s}
.powerscr.go .pm-text{text-shadow:none}

/* no CRT glass flicker over the room: it fades back in once the BIOS fills the screen */
#crtglass{transition:opacity .25s}
body.pc-power #crtglass{opacity:0;visibility:hidden;transition:none}

/* the CRT glass on the monitor itself: the same faint scanlines, tint and dark corners as the full-screen glass (crt.js),
   sized by boot.js (--px) so that when the screen fills the window they match it exactly; only while the tube is lit */
.pm-glass::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;border-radius:inherit;
  background:repeating-linear-gradient(to bottom,rgba(0,0,0,.055) 0,rgba(0,0,0,.055) var(--px,.3px),transparent var(--px,.3px),transparent calc(var(--px,.3px) * 3)),
    radial-gradient(ellipse 118% 112% at 50% 50%,transparent 60%,rgba(0,0,0,.085) 84%,rgba(0,0,0,.2) 100%),
    radial-gradient(ellipse at 50% 45%,rgba(170,210,255,.035),rgba(255,200,150,.025) 80%)}
.powerscr.mon .pm-glass::after{opacity:1}
.powerscr.nocrt .pm-glass::after{display:none}

/* switching off (boot.js outro): the page shrinks onto the monitor's glass and the tube goes out */
html.pc-outro{background:#070605!important;overflow:hidden}
html.pc-outro body{position:relative;z-index:20001;transform-origin:0 0;pointer-events:none}
html.pc-outro #crt{display:none!important}
.powerscr.outro .pm-pic{opacity:1;transition:opacity 1.1s ease-out}
.powerscr.outro.dark .pm-pic{opacity:0}
.powerscr.outro .pm-text,.powerscr.outro .pm-star{display:none}

/* nothing in the boot screens is selectable or draggable */
#boot,#boot *{-webkit-user-select:none;user-select:none;-webkit-user-drag:none;-webkit-touch-callout:none}
#bootSplash *{pointer-events:none}

/* the caption underneath */
/* (hidden until boot.js says the PC is waiting for you: not during a restart, nor while switching on or off) */
.pc-cap{position:absolute;left:0;right:0;bottom:max(4vh,24px);z-index:1;display:flex;flex-direction:column;align-items:center;gap:6px;transition:opacity .45s;opacity:0;pointer-events:none}
.powerscr.ready:not(.on):not(.auto) .pc-cap{opacity:1;pointer-events:auto}
.pc-cap p{margin:0;font:400 24px var(--mag);letter-spacing:.08em;color:#ddd5c2;text-transform:uppercase;text-shadow:0 2px 10px #000}
.pc-cap small{color:#8d8574}
.pc-fs{display:inline-flex;align-items:center;gap:5px;margin-top:6px;padding:4px 8px;font:11px var(--ui);color:#6f685b;cursor:pointer;border-radius:3px}
.pc-fs:hover{color:#a69e8c}
.pc-fs input{margin:0;width:13px;height:13px;accent-color:#8a805f;cursor:pointer}
.pc-fs[hidden]{display:none}

@media (max-height:500px) and (min-aspect-ratio:3/2){
  .pc-stage{font-size:min(1.28vh,1vw)}
  .pc-cam{transform:translate3d(-32.99em,-8.06em,5.98em) scale3d(1,1,1) rotateX(-16.00deg) rotateY(-30.00deg) translate3d(15em,24.55em,-0.02em)}
  .pc-cap{left:auto;right:2vw;bottom:auto;top:50%;width:30vw;transform:translateY(-50%)}
  .pc-cap p{font-size:clamp(15px,2.4vw,22px);line-height:1.15}
  .pc-fs{padding:8px 10px;font-size:12px}
}
@media (max-aspect-ratio:3/4){
  .pc-stage{font-size:min(1.36vw,1.02vh)}
  .pc-cam{transform:translate3d(-13.84em,-17.42em,5.00em) scale3d(1,1,1) rotateX(-18.00deg) rotateY(-26.00deg) translate3d(11em,24.55em,-0.02em)}
  .pc-mon{transform:translate3d(-11em,0,0)}
  .pc-tower{transform:translate3d(15em,-21.6em,-34em)}
  .pc-kbd{transform:translate3d(-10em,0,11.5em)}
  .pc-mouse{transform:translate3d(12em,0,12em)}
  .pc-cap p{font-size:20px}
  .pc-fs{padding:8px 10px;font-size:12px}
}
@media (prefers-reduced-motion:reduce){
  .powerbtn::after{animation:none;opacity:.5}
  .pm-glass.warm .pm-line,.pm-glass.warm .pm-degauss{animation:none}
  .pm-glass.warm .pm-pic{animation:none;opacity:1}
  .powerscr.on .pc-hd,.powerscr.on .pc-fled,.powerscr.on .pc-cdled{animation:none;background:#ffb21a}
}

/* ---- the JackOS splash (and desk.js's matching shut-down screen): a big 1998 sky full of soft, lumpy clouds (painted by boot.js), the cube, the name,
   and the colour bar running along the bottom */
#bootSplash[hidden]{display:none}
#bootSplash,#shutdown .splash{background:linear-gradient(180deg,#0b3aa8 0%,#2468d2 28%,#5a9ae6 56%,#a6cbf4 80%,#d9eafc 100%);display:flex;align-items:center;justify-content:center;overflow:hidden}
#bootSplash .sp-sky,#shutdown .splash .sp-sky{position:absolute;left:0;top:0;width:118%;height:100%;animation:spdrift 30s linear infinite alternate}
@keyframes spdrift{to{transform:translateX(-12%)}}
#bootSplash .sp-haze,#shutdown .splash .sp-haze{position:absolute;inset:0;background:radial-gradient(ellipse 50% 34% at 50% 46%,rgba(255,255,255,.3),rgba(255,255,255,0) 72%)}
#bootSplash .slogo,#shutdown .splash .slogo{position:relative;display:flex;align-items:center;gap:clamp(8px,1.8vw,24px);margin:-6vh 0 0 -2vw;text-shadow:none}
#bootSplash .slogoimg,#shutdown .splash .slogoimg{width:clamp(70px,12vw,136px);height:auto;filter:drop-shadow(0 .35vw .5vw rgba(0,30,90,.35))}
#bootSplash .sname,#shutdown .splash .sname{position:relative;display:flex;flex-direction:column;color:#fff;font:italic 900 clamp(40px,8.2vw,92px)/.92 "Arial Black","Arial Bold",Arial,sans-serif;letter-spacing:-.025em;
  text-shadow:0 .03em 0 rgba(0,40,120,.22),0 .08em .25em rgba(0,30,90,.35)}
#bootSplash .sname small,#shutdown .splash .sname small{font:italic 700 .25em/1 Arial,sans-serif;letter-spacing:.06em;margin:0 0 .12em .12em;text-shadow:0 1px 3px rgba(0,30,90,.4)}
#bootSplash .sname b,#shutdown .splash .sname b{font-weight:900}
#bootSplash .sname sup,#shutdown .splash .sname sup{position:absolute;left:100%;top:.42em;margin-left:.08em;font:italic 900 .44em/1 "Arial Black","Arial Bold",Arial,sans-serif;color:#ff9b1c;letter-spacing:0;
  text-shadow:0 .04em 0 #b34d00,0 .1em .3em rgba(0,30,90,.35)}
#bootSplash .sbar,#shutdown .splash .sbar{height:clamp(8px,1.25vh,14px);background:#000;box-shadow:0 -1px 0 rgba(255,255,255,.4)}
#bootSplash .sbar i,#shutdown .splash .sbar i{left:0;width:100%;animation:spbar 2.2s linear infinite;background-size:50% 100%;box-shadow:inset 0 1px rgba(255,255,255,.45),inset 0 -1px rgba(0,0,0,.3);
  background-image:linear-gradient(90deg,#e8141c,#ff7a00,#ffd200,#00a83a,#1650e0,#6a2ad0,#e8141c)}
@keyframes spbar{from{background-position:0 0}to{background-position:-100% 0}}
@media (prefers-reduced-motion:reduce){#bootSplash .sp-sky,#shutdown .sp-sky,#bootSplash .sbar i{animation:none}}
#shutdown .splash .clouds{display:none}
#shutdown .splash .sname{display:block}

/* a PC that was left on (boot-early.js): no room, just the monitor waking from standby: a line, a bloom, the desktop */
html.pc-wake #bootPower,html.pc-wake #bootSkip{display:none!important}
html.pc-wake #boot{background:#000}
#boot.waking{animation:pcwake 1s ease-in forwards}
#boot.waking::after{content:"";position:absolute;left:0;right:0;top:50%;height:100%;margin-top:-50vh;background:#fff;box-shadow:0 0 30px #fff;transform:scaleY(.004);opacity:0;animation:pcwakeline .9s ease-out forwards}
@keyframes pcwake{0%,30%{background:#000}100%{background:rgba(0,0,0,0)}}
@keyframes pcwakeline{0%{opacity:.9;transform:scale(.02,.004)}25%{opacity:.9;transform:scale(1,.004)}55%{opacity:.35;transform:scale(1,1)}100%{opacity:0;transform:scale(1,1)}}
@media (prefers-reduced-motion:reduce){#boot.waking::after{animation:none}#boot.waking{animation-duration:.5s}}
/* the room fades up out of the dark as the page arrives (not when it comes back for the switch-off) */
#bootPower.powerscr:not(.outro){animation:pcfade .4s ease-out}
@keyframes pcfade{from{opacity:0}to{opacity:1}}

html.pc-skip #bootPower{display:none!important}