:root{--orange:#ff6a1a;--phos:#8dffb0;--paper:#e3dcc8;--mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;--cond:"Barlow Condensed","Arial Narrow",Impact,sans-serif}
*{box-sizing:border-box;margin:0}
body{min-height:100vh;color:#e9ecef;font:500 15px/1.4 Barlow,system-ui,sans-serif;
background:
 radial-gradient(ellipse at 50% -10%,rgba(255,255,255,.1),transparent 55%),
 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence baseFrequency='.8' numOctaves='2'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
 radial-gradient(circle,#8b9199 0 1.5px,#0d0f11 2px 3px,transparent 3.5px) 240px 22px/240px 140px,
 repeating-linear-gradient(90deg,transparent 0 238px,rgba(0,0,0,.5) 238px 240px,rgba(255,255,255,.06) 240px 241px),
 linear-gradient(#30343a,#202327);
padding-bottom:24px}
/* sign + wordmark */
.top-toolbox-exit{
    position:relative;
    z-index:10;
    display:flex;
    justify-content:center;
    width:100%;
    padding-top:18px;
}

.top-toolbox-exit a{
    position:relative;
    display:block;
    width:calc(100% - 24px);
    padding-top:25px;
    color:inherit;
    text-decoration:none;
    transition:transform .25s cubic-bezier(.2,.8,.2,1);
}

.top-toolbox-exit a:hover,
.top-toolbox-exit a:focus-visible{
    transform:translateY(-5px);
}

.top-toolbox-exit a:focus-visible{
    outline:2px solid var(--orange);
    outline-offset:7px;
    border-radius:8px;
}

.top-toolbox-handle{
    position:absolute;
    z-index:2;
    top:0;
    left:50%;
    width:130px;
    height:34px;
    transform:translateX(-50%);
    border:8px solid #b9bec5;
    border-bottom:0;
    border-radius:18px 18px 0 0;
    box-shadow:
        inset 0 2px 0 rgba(255,255,255,.45),
        0 3px 4px rgba(0,0,0,.55);
}

.top-toolbox-lid{
    position:relative;
    z-index:3;
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:70px;
    padding:12px 28px;
    border-radius:9px 9px 3px 3px;
    background:
        repeating-linear-gradient(
            90deg,
            transparent 0 38px,
            rgba(0,0,0,.18) 38px 40px
        ),
        linear-gradient(#ff8a4a,#d9501a);
    box-shadow:
        inset 0 2px 0 rgba(255,255,255,.35),
        inset 0 -5px 8px rgba(0,0,0,.25),
        0 4px 7px rgba(0,0,0,.55);
    transform-origin:50% 100%;
    transition:transform .3s cubic-bezier(.2,.8,.2,1);
}

.top-toolbox-lid::before,
.top-toolbox-lid::after{
    content:"";
    position:absolute;
    bottom:-7px;
    width:24px;
    height:18px;
    border-radius:3px;
    background:linear-gradient(#e6e9ec,#8d949b);
    box-shadow:0 2px 3px rgba(0,0,0,.5);
}

.top-toolbox-lid::before{
    left:22px;
}

.top-toolbox-lid::after{
    right:22px;
}

.top-toolbox-exit a:hover .top-toolbox-lid,
.top-toolbox-exit a:focus-visible .top-toolbox-lid{
    transform:perspective(500px) rotateX(-18deg);
}

.top-toolbox-lid strong{
    color:#2a0f04;
    font:800 28px/1 var(--cond);
    letter-spacing:.12em;
    text-shadow:0 1px 0 rgba(255,255,255,.3);
}

.top-toolbox-lid small{
    color:#3a1505;
    font:700 9px var(--mono);
    letter-spacing:.1em;
}

.sign{position:relative;width:fit-content;max-width:94vw;margin:48px auto 0;padding:20px 48px 22px;border-radius:10px;text-align:center;background:linear-gradient(#4f565e,#383d43);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -2px 5px rgba(0,0,0,.5),0 16px 28px rgba(0,0,0,.5)}
.sign::before,.sign::after{content:"";position:absolute;top:10px;width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#d5d9dd,#5a6068);box-shadow:0 1px 2px #000}
.sign::before{left:12px}.sign::after{right:12px}
.logo{display:inline-flex;font:800 clamp(64px,13vw,132px)/.95 var(--cond);letter-spacing:.015em}
.logo .t{color:#1b1e22;text-shadow:0 1.5px 0 rgba(255,255,255,.28),0 -1px 1px #000}
.logo .c{color:transparent;background:repeating-linear-gradient(0deg,transparent 0 1px,rgba(0,0,0,.14) 1px 2px),linear-gradient(100deg,#868c93,#e9ecef 28%,#9aa0a7 46%,#f6f8fa 60%,#80868d);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 2px 1px rgba(0,0,0,.65))}
.sign p{margin-top:4px;font-size:15px;letter-spacing:.06em;color:#c9cdd2}
/* shelves */
.shelf{position:relative;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:center;gap:clamp(22px,5vw,64px);max-width:1180px;margin:72px auto 0;padding:0 24px}
.shelf::after{content:"";position:absolute;left:0;right:0;bottom:-18px;height:18px;border-radius:3px;background:linear-gradient(#b3b9c0,#6d747c 40%,#3e444a);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 16px 22px rgba(0,0,0,.55)}
.shelf>*{position:relative;z-index:1}
.obj{display:block;color:inherit;text-decoration:none;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.obj:hover,.obj:focus-visible{transform:translateY(-6px)}
.obj:focus-visible{outline:2px solid var(--orange);outline-offset:6px;border-radius:8px}
.tag{display:block;text-align:center;font:600 12px/1 var(--mono);letter-spacing:.04em;color:var(--paper)}
/* CRT */
.crt{width:min(300px,86vw)}
.bezel{padding:18px 18px 12px;border-radius:22px;background:linear-gradient(#4d545c,#2a2e33);box-shadow:inset 0 2px 0 rgba(255,255,255,.2),inset 0 -3px 6px rgba(0,0,0,.5),0 18px 24px rgba(0,0,0,.45)}
.screen{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:16px/20px;padding:16px;display:flex;flex-direction:column;justify-content:center;gap:6px;font-family:var(--mono);color:var(--phos);text-shadow:0 0 8px rgba(141,255,176,.7);background:radial-gradient(#0e2c19,#04100a);box-shadow:inset 0 0 30px #000,inset 0 0 0 3px #0a0c0e;animation:fl 5s infinite}
.screen::before,.screen::after{content:"";position:absolute;inset:0;pointer-events:none}
.screen::before{background:repeating-linear-gradient(transparent 0 2px,rgba(0,0,0,.3) 2px 3px)}
.screen::after{background:radial-gradient(120% 90% at 30% 8%,rgba(255,255,255,.13),transparent 45%),radial-gradient(transparent 55%,rgba(0,0,0,.65))}
.screen small{font-size:11px;letter-spacing:.12em;opacity:.7}
.screen strong{font-size:clamp(34px,10vw,50px);line-height:1;font-weight:700}
.screen em{font-style:normal;font-size:13px;letter-spacing:.06em}
.screen em::after{content:"_";animation:bl 1s steps(1) infinite}
.screen.off strong{opacity:.3}
.ctl{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}
.ctl i{width:14px;height:14px;border-radius:50%;background:radial-gradient(#d4d8dc,#60666d);box-shadow:0 1px 2px #000}
.ctl b{width:6px;height:6px;align-self:center;border-radius:50%;background:var(--orange);box-shadow:0 0 6px var(--orange)}
.crt .tag{margin-top:12px}
/* toolbox */
.toolbox{width:min(300px,86vw)}
.handle{display:block;width:96px;height:26px;margin:0 auto;border:7px solid #b9bec5;border-bottom:0;border-radius:16px 16px 0 0}
.lid{position:relative;display:block;height:34px;border-radius:8px 8px 2px 2px;background:linear-gradient(#ff8a4a,#d9501a);box-shadow:inset 0 2px 0 rgba(255,255,255,.35),0 2px 0 #7a2c0c;transform-origin:50% 100%;transition:transform .3s}
.toolbox:hover .lid,.toolbox:focus-visible .lid{transform:perspective(500px) rotateX(-20deg)}
.lid i{position:absolute;bottom:-8px;width:26px;height:20px;border-radius:3px;background:linear-gradient(#e6e9ec,#8d949b);box-shadow:0 2px 3px rgba(0,0,0,.5)}
.lid i:first-child{left:24px}.lid i:last-child{right:24px}
.box{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;height:124px;border-radius:2px 2px 8px 8px;background:repeating-linear-gradient(90deg,transparent 0 38px,rgba(0,0,0,.18) 38px 40px),linear-gradient(#e8591a,#b8400f);box-shadow:inset 0 -6px 10px rgba(0,0,0,.35),0 14px 18px rgba(0,0,0,.4)}
.box b{font:800 30px/1 var(--cond);letter-spacing:.14em;color:#2a0f04;text-shadow:0 1px 0 rgba(255,255,255,.3)}
.box small{font:600 11px var(--mono);color:#3a1505}
/* manuals */
.books{width:min(240px,80vw)}
.books span{display:block;margin-top:-1px;padding:13px 18px;border-radius:3px 6px 6px 3px;font:700 13px var(--mono);color:#f3ead2;text-shadow:0 1px 0 rgba(0,0,0,.5);background:linear-gradient(90deg,rgba(0,0,0,.35),transparent 12%,rgba(255,255,255,.08) 50%,transparent),var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.4),0 3px 6px rgba(0,0,0,.4)}
.books span:nth-child(2){transform:translateX(14px)}.books span:nth-child(3){transform:translateX(-8px)}
/* changelog cabinet */
.cab{
    position:relative;
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:8px;
    align-items:end;
    padding:38px 14px 14px;
    min-height:150px;
    background:
        linear-gradient(180deg,#3b4147,#202428);
    border:2px solid #101214;
    border-radius:5px;
    box-shadow:
        inset 0 2px 0 rgba(255,255,255,.12),
        inset 0 -8px 14px rgba(0,0,0,.55),
        0 7px 10px rgba(0,0,0,.45);
}
.cab .tag{
    position:absolute;
    top:10px;
    left:14px;
}
.cab .d{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:72px;
    color:#1c1009;
    text-decoration:none;
    background:
        linear-gradient(180deg,#aeb0ad,#6f716e);
    border:2px solid #3c3d3b;
    border-radius:3px;
    box-shadow:
        inset 0 2px 0 rgba(255,255,255,.35),
        inset 0 -7px 9px rgba(0,0,0,.35),
        0 3px 4px rgba(0,0,0,.45);
}
.cab .d::before{
    content:"";
    position:absolute;
    top:9px;
    left:50%;
    width:30px;
    height:7px;
    transform:translateX(-50%);
    border-radius:4px;
    background:#383b3d;
    box-shadow:inset 0 2px 2px rgba(0,0,0,.65);
}
.cab .d b{
    margin-top:18px;
    font:700 11px var(--mono);
    letter-spacing:.04em;
}
.cab .d.active{
    cursor:pointer;
    background:
        linear-gradient(180deg,#d6d8d4,#858985);
    transition:transform .2s ease,box-shadow .2s ease;
}
.cab .d.active:hover,
.cab .d.active:focus-visible{
    transform:translateY(-5px);
    box-shadow:
        inset 0 2px 0 rgba(255,255,255,.45),
        inset 0 -7px 9px rgba(0,0,0,.3),
        0 8px 10px rgba(0,0,0,.5);
}
.cab .d.active:focus-visible{
    outline:2px solid var(--orange);
    outline-offset:4px;
}
.cab .d.damaged{
    color:#080808;
    background:
        radial-gradient(circle at 20% 30%,rgba(0,0,0,.8) 0 13%,transparent 30%),
        radial-gradient(circle at 75% 65%,rgba(0,0,0,.72) 0 18%,transparent 38%),
        linear-gradient(145deg,#5d5d59,#282a29);
    border-color:#171817;
    filter:contrast(.9);
    transform:rotate(-1deg);
}
.cab .d.damaged:nth-of-type(3){
    transform:rotate(2deg);
}
.cab .d.damaged:nth-of-type(4){
    transform:rotate(-2deg);
}
.cab .d.damaged:nth-of-type(5){
    transform:rotate(1.5deg);
}
.cab .d.damaged:nth-of-type(6){
    transform:rotate(-1.5deg);
}
.cab .d.damaged:nth-of-type(7){
    transform:rotate(2deg);
}

.tester{width:min(250px,80vw);padding:12px 14px 14px;border-radius:10px;background:linear-gradient(#6f777f,#454b52);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 14px 18px rgba(0,0,0,.4)}
.tester .tag{margin-bottom:8px}
.dial{position:relative;display:block;height:96px;overflow:hidden;border-radius:6px;background:linear-gradient(#efe6c8,#cfc59f);box-shadow:inset 0 2px 6px rgba(0,0,0,.5)}
.dial::before{content:"";position:absolute;left:50%;bottom:-90px;width:180px;height:180px;margin-left:-90px;border-radius:50%;background:repeating-conic-gradient(from -50deg,#222 0 1deg,transparent 1deg 7deg);-webkit-mask:radial-gradient(circle,transparent 62%,#000 63% 72%,transparent 73%);mask:radial-gradient(circle,transparent 62%,#000 63% 72%,transparent 73%)}
.dial i{position:absolute;left:50%;bottom:0;width:2px;height:76px;background:#c0270a;transform-origin:50% 100%;transform:rotate(-28deg);animation:sw 4s ease-in-out infinite alternate}
.leds{display:flex;justify-content:space-between;margin-top:10px}
.leds u{display:flex;flex-direction:column;align-items:center;gap:4px;text-decoration:none;font:600 10px var(--mono);color:var(--paper)}
.leds u::before{content:"";width:10px;height:10px;border-radius:50%;background:#3cff7a;box-shadow:0 0 8px #3cff7a}
.leds u:nth-child(2)::before{background:#ffb02e;box-shadow:0 0 8px #ffb02e}
.leds u:nth-child(3)::before{background:var(--orange);box-shadow:0 0 8px var(--orange)}
/* pegboard + wrench */
.peg{width:min(200px,70vw);height:190px;padding-top:14px;border-radius:8px;text-align:center;background:radial-gradient(circle,#15181b 0 3px,transparent 4px) 0 0/24px 24px,linear-gradient(#4d545c,#3a4047);box-shadow:inset 0 0 0 3px #2a2e33,0 14px 18px rgba(0,0,0,.4)}
.peg svg{width:130px;height:130px;filter:drop-shadow(5px 6px 3px rgba(0,0,0,.55))}
.peg .tag{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);padding:4px 10px;border-radius:2px;background:var(--paper);color:#222}
footer{margin-top:84px;text-align:center;font:600 12px var(--mono);color:#8d949b}
@keyframes fl{0%,100%{opacity:1}50%{opacity:.97}52%{opacity:.9}54%{opacity:.98}}
@keyframes bl{50%{opacity:0}}
@keyframes sw{to{transform:rotate(30deg)}}
@media(max-width:640px){.sign{padding:18px 30px 20px}.shelf{margin-top:56px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.obj:hover,
.obj:focus-visible{
    filter:brightness(1.04);
}

.crt:hover .bezel,
.crt:focus-visible .bezel{
    box-shadow:
        inset 0 2px 0 rgba(255,255,255,.22),
        inset 0 -3px 6px rgba(0,0,0,.5),
        0 18px 24px rgba(0,0,0,.45),
        0 0 18px rgba(141,255,176,.08);
}

.crt:hover .screen,
.crt:focus-visible .screen{
    box-shadow:
        inset 0 0 30px #000,
        inset 0 0 0 3px #0a0c0e,
        0 0 12px rgba(141,255,176,.12);
}

.toolbox:hover .box,
.toolbox:focus-visible .box{
    box-shadow:
        inset 0 -6px 10px rgba(0,0,0,.35),
        0 18px 22px rgba(0,0,0,.48);
}

.books:hover span,
.books:focus-visible span{
    box-shadow:
        inset 0 0 0 1px rgba(0,0,0,.4),
        0 6px 9px rgba(0,0,0,.48);
}

.tester:hover,
.tester:focus-visible{
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.34),
        0 17px 22px rgba(0,0,0,.48);
}

.peg:hover,
.peg:focus-visible{
    box-shadow:
        inset 0 0 0 3px #2a2e33,
        0 17px 22px rgba(0,0,0,.48);
}