/* Sony BVM-inspired chassis. The application stays in the black CRT aperture. */
body{padding:18px;background:#000}
.computer{max-width:1440px;margin:auto;--monitor-brightness:1;--monitor-contrast:1}
.bezel{display:grid;grid-template-columns:94px minmax(0,1fr) 118px;grid-template-rows:56px minmax(0,1fr) 60px;padding:0;border:2px solid #353936;border-top-color:#828680;border-left-color:#737870;border-radius:4px;background:linear-gradient(115deg,#ffffff09,#0000 35%,#0002),repeating-linear-gradient(0deg,#ffffff02 0 1px,#0000 1px 3px),#565b56;box-shadow:inset 1px 1px 1px #a4a99f88,inset -2px -3px 3px #242923,0 18px 35px #000}
.monitor-top,.monitor-foot,.monitor-left,.monitor-right{font-family:Arial,Helvetica,sans-serif;color:#d3d5c8;text-shadow:0 1px 1px #0007;user-select:none}
.monitor-top{grid-area:1/2;display:flex;align-items:center;justify-content:space-between;gap:20px;position:relative;padding:0 14px}
.trinitron-mark{font:12px Georgia,'Times New Roman',serif;white-space:nowrap}.trinitron-mark b{font:bold 23px Arial,Helvetica,sans-serif;letter-spacing:-2px;margin-right:2px}.monitor-model{font:10px Arial,Helvetica,sans-serif;letter-spacing:.7px;color:#c2c6bb}.monitor-id-slot{position:absolute;left:50%;top:16px;transform:translateX(-50%);width:94px;height:19px;border:2px solid #797e74;border-top-color:#353b33;border-left-color:#3b4137;border-radius:1px;background:linear-gradient(#858d80,#b2b8a9);box-shadow:inset 0 2px 4px #0006}
.monitor-tube{grid-area:2/2;position:relative;min-width:0;padding:28px 24px;overflow:hidden;background:linear-gradient(165deg,#303631,#171c18 15%,#070b08 52%,#222823 98%);border:2px solid #2b312b;border-top-color:#151b16;border-left-color:#171d18;border-radius:8px;box-shadow:inset 0 9px 14px #000b,inset 4px 0 10px #0009,inset 0 -3px 2px #424b40,0 1px 0 #979e8c44}
.screen{height:calc(100dvh - 220px);min-height:600px;max-height:960px;border:2px solid #020502;border-radius:12px/19px;background:#000;box-shadow:0 0 0 5px #030703,0 0 0 7px #252d24,inset 0 0 30px #000;filter:brightness(var(--monitor-brightness)) contrast(var(--monitor-contrast))}
.monitor-tube::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:6;opacity:0;background:linear-gradient(180deg,transparent 40%,#b5ffba24 49%,#b5ffba07 53%,transparent 62%);transform:translateY(-100%)}
.is-degaussing .monitor-tube::after{animation:degauss-sweep .75s ease-out}
@keyframes degauss-sweep{0%{opacity:0;transform:translateY(-100%)}20%{opacity:.8}80%{opacity:.3}100%{opacity:0;transform:translateY(100%)}}
.is-off .screen{visibility:hidden}.is-off .monitor-tube{background:#050805;box-shadow:inset 0 6px 16px #000,0 1px 0 #979e8c44}
.monitor-left{grid-area:1/1/4/2;padding:26px 9px 16px;border-right:2px solid #2b312a;border-left:1px solid #9ba08d33;background:linear-gradient(90deg,#0001,#ffffff05 70%,#0001);display:flex;flex-direction:column;align-items:center}
.channel-readout{display:flex;align-items:center;justify-content:center;width:65px;height:42px;margin-top:32px;padding-left:5px;font:32px/1 VGA,monospace;letter-spacing:5px;font-style:italic;color:#ff713a;text-shadow:0 0 3px #ff6e17,0 0 9px #ff351d88;background:#1b110b;border:3px solid #393c32;border-top-color:#22291f;border-left-color:#2c3127;box-shadow:inset 0 3px 4px #000b,0 1px #7d8570}
.remote-mode{display:flex;justify-content:space-between;align-items:flex-end;width:100%;gap:2px;margin-top:12px;font-size:7px;line-height:1.4;color:#c8cabc}.remote-mode span{position:relative;padding-top:8px}.hardware-led{display:block;width:5px;height:5px;border-radius:50%;background:#2a3028;box-shadow:inset 0 1px 2px #000b}.remote-mode .hardware-led{position:absolute;top:0;left:50%;margin-left:-3px}.hardware-led.amber{background:#ec8748;box-shadow:0 0 4px #e98446}
.calibration-keys{display:grid;grid-template-columns:repeat(2,1fr);column-gap:8px;row-gap:18px;width:100%;margin-top:42px}.calibration-keys>div{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0}.calibration-keys span{font:7px Arial,Helvetica,sans-serif;white-space:nowrap;color:#dbdccb}.dummy-key{position:relative;display:block;width:18px;height:17px;border:1px solid #a4a58e;border-bottom:2px solid #343a30;border-right:2px solid #3a4035;border-radius:2px;background:linear-gradient(125deg,#e0dec4,#b2b49b);box-shadow:1px 2px 2px #0006}.dummy-key::after{content:'';position:absolute;left:6px;top:5px;width:3px;height:3px;border-radius:50%;background:#464e38;box-shadow:inset 0 1px #0007}.dummy-key.on::after{background:#a8ec5b;box-shadow:0 0 3px #a8ec5b}
.monitor-recess{display:flex;flex-direction:column;align-items:center;gap:9px;margin-top:auto;padding-top:48px;font-size:9px}.monitor-recess i{display:block;width:23px;height:78px;border:2px solid #767d6e;border-top-color:#2c342a;border-left-color:#30392b;border-radius:4px;background:radial-gradient(ellipse at 10% 50%,#777e6d 0,#313a2a 25%,#1c251b 50%,#53604a 65%,#454e3b 100%);box-shadow:inset 2px 2px 5px #0006}.monitor-recess small{font:7px Arial,Helvetica,sans-serif;letter-spacing:.4px}
.monitor-right{grid-area:1/3/4/4;display:flex;flex-direction:column;align-items:stretch;min-width:0;padding:24px 9px 18px;border-left:2px solid #2c332b;background:linear-gradient(90deg,#ffffff08,#0001);box-shadow:inset 1px 0 #939d8433}
.power-row{display:flex;justify-content:space-between;gap:7px;margin:0 0 24px}.hardware-button{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:7px;min-width:38px;min-height:44px;padding:0;color:#dadccc;line-height:1;text-shadow:0 1px 1px #0008}.hardware-button>span{font:8px/1 Arial,Helvetica,sans-serif;white-space:nowrap}.hardware-button>i{display:block;position:relative;width:21px;height:21px;border:1px solid #b6b8a0;border-bottom:2px solid #323b2e;border-right:2px solid #414a36;border-radius:2px;background:linear-gradient(125deg,#e1dec7,#b5b79d);box-shadow:1px 2px 2px #0007}.hardware-button:hover:not(:disabled){color:#fff}.hardware-button:hover:not(:disabled)>i{background:linear-gradient(125deg,#eeebd5,#c2c5ab)}.hardware-button:active:not(:disabled)>i{transform:translate(1px,1px);box-shadow:inset 1px 1px 2px #0005}.hardware-button:focus-visible,.hardware-key:focus-visible{outline:2px solid #adf7a2;outline-offset:2px}.power-button>i{width:30px;height:26px;background:linear-gradient(90deg,#a7afa0,#d2d6c5 40%,#bac1ad 70%,#777f6c);border-right:4px solid #3c4635;box-shadow:-4px 1px 0 #2a3425,3px 2px 1px #151f14}.power-button[aria-pressed=false]>i{background:#9ba28e;transform:translateX(-2px);border-right-width:2px;box-shadow:-2px 1px 0 #2a3425,2px 2px 1px #151f14}
.monitor-inputs{margin-bottom:18px}.hardware-heading{display:flex;align-items:center;gap:5px;font:9px/1 Arial,Helvetica,sans-serif;justify-content:center;margin-bottom:9px}.hardware-heading::before,.hardware-heading::after{content:'';height:1px;background:#c1c7b2;flex:1}.input-keypad{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 5px}.hardware-key{position:relative;display:flex;align-items:center;justify-content:center;min-width:0;min-height:27px;padding:1px;color:#f5f4e5;font:12px/1 Arial,Helvetica,sans-serif;text-shadow:0 0 1px #0005;background:linear-gradient(125deg,#c1c6b0,#939c83);border:1px solid #bcc3a8;border-right:2px solid #414d37;border-bottom:3px solid #313f2a;border-radius:2px;box-shadow:1px 2px 2px #0007}.hardware-key:hover:not(:disabled){color:#fff;background:#bfc7aa}.hardware-key:active:not(:disabled){transform:translate(1px,1px);box-shadow:inset 1px 1px 3px #0005}.hardware-key[aria-pressed=true]::after{content:'';position:absolute;right:2px;top:2px;width:3px;height:3px;background:#b5ef77;box-shadow:0 0 3px #bbff7c}.hardware-key:disabled{opacity:.48;color:#e3e6d7}
.monitor-rotaries{margin-top:6px}.rotary-row{display:grid;grid-template-columns:minmax(0,1fr) 37px;gap:4px;align-items:end;margin:10px 0 22px}.rotary-row label{display:block;font:8px/1 Arial,Helvetica,sans-serif;color:#d8dcc8}.knob-wrap{position:relative;display:block;width:49px;height:49px;margin-top:9px;border-radius:50%}.rotary-knob{position:relative;display:block;width:46px;height:46px;border:1px solid #424c39;border-bottom-color:#10180e;border-right-color:#121a0f;border-radius:50%;background:radial-gradient(circle at 40% 35%,#454d3e 0 55%,#30392b 57% 65%,transparent 67%),repeating-conic-gradient(#2b3424 0deg 5deg,#192312 5deg 10deg);box-shadow:3px 5px 5px #17200fc9,inset 1px 1px 1px #7a85654d;transform:rotate(var(--knob-turn,0deg))}.rotary-knob::after{content:'';position:absolute;top:4px;left:21px;width:2px;height:9px;border-radius:1px;background:#abb69a}.knob-wrap input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:ew-resize}.knob-wrap:focus-within{outline:2px solid #adf7a2;outline-offset:3px}.manual-button>i{width:19px;height:19px}.manual-button>i::after{content:'';position:absolute;top:6px;left:6px;width:3px;height:3px;background:#505c3e;border-radius:50%}.manual-button{gap:15px;min-height:65px}
.monitor-menu-controls{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:auto;padding-top:18px}.monitor-menu-controls .hardware-button{min-height:49px}
.monitor-foot{grid-area:3/2;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;min-width:0;padding:0 18px}.option-port{display:flex;align-items:center;gap:9px;font:9px Arial,Helvetica,sans-serif}.option-port>i{width:29px;height:29px;border:3px solid #737d68;border-bottom-color:#323e2b;border-right-color:#3e4b33;border-radius:50%;box-shadow:0 1px 2px #17230e,inset 0 0 2px #000; background:radial-gradient(circle at 40% 30%,#8d9884 0 1px,transparent 2px),radial-gradient(circle at 65% 40%,#7f8e76 0 1px,transparent 2px),radial-gradient(circle at 30% 60%,#6c7b64 0 1px,transparent 2px),radial-gradient(circle at 60% 70%,#84947a 0 1px,transparent 2px),#1d2a17}.sony-mark{font:bold 32px/1 'Times New Roman',Times,serif;letter-spacing:1.2px;color:#dbded1;text-shadow:0 1px #fff6,1px 3px 2px #1d2816}.monitor-lamps{display:flex;justify-self:end;gap:11px;font:7px/1 Arial,Helvetica,sans-serif;white-space:nowrap}.monitor-lamps>span{display:flex;flex-direction:column;align-items:center;gap:7px}.monitor-lamps .hardware-led{width:7px;height:7px}.monitor-lamps .power{background:#9fcd61;box-shadow:0 0 4px #a6d56899,inset 0 1px 1px #d3efb3}.is-off .monitor-lamps .power{background:#323f27;box-shadow:inset 0 1px 2px #0008}.is-off .monitor-lamps .standby{background:#d69d4d;box-shadow:0 0 4px #c9913b99}
/* Keep the application inside the aperture at every chassis size. */
.archive-page{height:100%;min-height:100%}.directory{min-height:0;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--edge) #000}.viewer{height:100%;min-height:0;overflow:hidden}.viewer-top,.viewer figcaption{flex-shrink:0}.art-stage{min-height:180px;padding:0}.art-stage img{position:absolute;inset:10px 10px 34px;width:calc(100% - 20px);height:calc(100% - 44px);max-height:none}.directory .game-shortcut{flex-shrink:0}
@media(min-width:1001px) and (max-height:850px){.directory-note,.directory-hint{display:none}.directory{padding:16px 12px 12px}.identity>p{margin-bottom:12px}.directory-caption{margin-top:20px}.directory .game-shortcut{margin-top:auto}.identity h2{margin-bottom:12px}}
@media(max-width:1179px) and (min-width:1001px){.bezel{grid-template-columns:78px minmax(0,1fr) 108px}.monitor-left{padding-left:5px;padding-right:5px}.monitor-tube{padding:22px 16px}.monitor-top{padding:0 9px}.monitor-id-slot{width:70px}.monitor-model{font-size:8px}.monitor-right{padding-left:6px;padding-right:6px}.monitor-lamps{gap:5px}.option-port>span{display:none}.archive-page{grid-template-columns:264px minmax(0,1fr)}}
@media(max-width:1000px){body{padding:12px}.computer{max-width:960px}.bezel{grid-template-columns:minmax(0,1fr);grid-template-rows:42px minmax(0,1fr) 52px auto}.monitor-left{display:none}.monitor-top{grid-area:1/1;padding:0 20px}.monitor-id-slot{top:11px;height:18px}.monitor-tube{grid-area:2/1;margin:0 8px;padding:16px}.screen{height:calc(100dvh - 244px);min-height:560px;max-height:none;border-radius:10px/15px}.monitor-foot{grid-area:3/1;padding:0 24px}.monitor-right{grid-area:4/1;flex-direction:row;align-items:center;justify-content:center;gap:18px;padding:8px 16px;border-left:0;border-top:1px solid #313e29;box-shadow:inset 0 1px #8e9a7b4d}.power-row{order:3;margin:0}.degauss-button{display:none}.monitor-inputs{order:1;margin:0}.hardware-heading{margin-bottom:7px;font-size:8px}.hardware-heading::before,.hardware-heading::after{display:none}.input-keypad{display:flex;gap:6px}.input-keypad .hardware-key{width:44px;min-height:44px;font-size:14px;flex-shrink:0}.input-keypad .unused-input,.monitor-rotaries{display:none}.monitor-menu-controls{order:2;display:flex;margin:0;padding:0}.monitor-menu-controls #monitor-up,.monitor-menu-controls #monitor-down,.monitor-menu-controls #monitor-enter{display:none}.hardware-button{min-width:44px;min-height:54px;justify-content:center}.hardware-button>span{font-size:9px}.monitor-menu-controls .hardware-button{min-height:54px}.power-button>i{width:28px;height:25px}}
@media(max-width:600px){body{padding:4px}.bezel{grid-template-rows:36px minmax(0,1fr) 44px auto;border-radius:3px}.monitor-top{padding:0 12px;gap:8px}.trinitron-mark{font-size:9px}.trinitron-mark b{font-size:18px}.monitor-model{font-size:8px;letter-spacing:.3px}.monitor-id-slot{width:60px;height:14px;top:11px}.monitor-tube{margin:0 4px;padding:10px 8px;border-radius:6px}.screen{height:calc(100dvh - 192px);min-height:540px;border-radius:7px/11px;box-shadow:0 0 0 3px #030703,0 0 0 4px #252d24}.monitor-foot{padding:0 12px;gap:6px}.sony-mark{font-size:24px}.option-port{gap:0}.option-port>i{width:20px;height:20px;border-width:2px}.option-port>span{display:none}.monitor-lamps{gap:8px;font-size:6px}.monitor-lamps>span:first-child{display:none}.monitor-lamps .hardware-led{width:5px;height:5px}.monitor-right{gap:8px;padding:8px 6px}.hardware-heading{margin-bottom:6px}.directory{overflow:visible;flex-shrink:0}.viewer{height:auto;min-height:0}.art-stage{min-height:160px}.art-stage img{inset:6px 4px 28px;width:calc(100% - 8px);height:calc(100% - 34px);max-height:none}.viewer figcaption span{max-width:27ch}.frame-controls button{width:44px}.viewer figcaption strong{max-width:25ch}.function-bar b{display:none}.function-bar button{font-size:16px}.command-line label{font-size:16px}.machine-line{gap:4px;padding-left:6px;padding-right:6px}.machine-line time{letter-spacing:-.4px}.menu-bar>button,.system-menu>button{padding:0 7px}}
@media(max-width:359px){.monitor-top{padding:0 8px}.monitor-model{display:none}.monitor-id-slot{left:auto;right:8px;transform:none;width:60px}.monitor-tube{margin:0 3px;padding:9px 6px}.screen{border-radius:5px/9px}.monitor-foot{padding:0 9px}.monitor-lamps{gap:5px}.monitor-right{gap:4px;padding-left:3px;padding-right:3px}.input-keypad{gap:4px}.viewer figcaption span{max-width:20ch}.viewer figcaption strong{max-width:20ch}.menu-bar>button,.system-menu>button{padding:0 5px}.machine-line{padding-left:4px;padding-right:4px}.machine-line h1{letter-spacing:-.5px}.machine-line time{letter-spacing:-.8px}.frame-controls button{width:44px}.viewer{padding-left:6px;padding-right:6px}}
@media(pointer:coarse) and (min-width:1001px){.bezel{grid-template-columns:86px minmax(0,1fr) 156px}.monitor-right{padding-left:9px;padding-right:9px}.input-keypad .hardware-key{min-height:44px;min-width:40px}.rotary-row{grid-template-columns:1fr 44px}.hardware-button{min-width:44px}.monitor-menu-controls{gap:10px}}
@media(max-width:600px){.art-stage{min-height:120px}}
@media(prefers-reduced-motion:reduce){.is-degaussing .monitor-tube::after{animation:none;opacity:0}}