:root{--g:#c0c0c0}
*{box-sizing:border-box}
body{margin:0;background:#008080;color:#000;font:13px/1.45 Tahoma,'MS Sans Serif',Geneva,Verdana,sans-serif;padding:20px 12px 64px}
.wrap{max-width:980px;margin:0 auto;display:grid;gap:22px}
.win{background:var(--g);padding:3px;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #dfdfdf,inset -2px -2px #808080,inset 2px 2px #fff}
.title{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:3px 4px;background:linear-gradient(90deg,#000080,#1084d0);color:#fff;font-weight:700}
.btns{display:flex;gap:2px}
.btns b,.xb{display:grid;place-items:center;width:16px;height:14px;padding:0;border:0;background:var(--g);color:#000;font:700 11px/1 Tahoma,sans-serif;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px #808080;cursor:pointer}
.body{padding:8px}
.sunk{background:#fff;padding:4px;box-shadow:inset 1px 1px #808080,inset -1px -1px #fff,inset 2px 2px #0a0a0a,inset -2px -2px #dfdfdf}
.splash{overflow:hidden;text-align:center;padding:56px 12px 40px;background:radial-gradient(1.5px 1.5px at 8% 22%,#fff,transparent),radial-gradient(1px 1px at 19% 70%,#fff,transparent),radial-gradient(1.5px 1.5px at 33% 12%,#fff,transparent),radial-gradient(1px 1px at 47% 82%,#fff,transparent),radial-gradient(1.5px 1.5px at 61% 18%,#fff,transparent),radial-gradient(1px 1px at 74% 64%,#fff,transparent),radial-gradient(1.5px 1.5px at 88% 30%,#fff,transparent),radial-gradient(1px 1px at 93% 84%,#fff,transparent),#000}
.splash p{margin:1.4rem 0 1.5rem;font-size:15px;font-weight:700;color:#e8e8e8}
.splash .row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
h1.logo{margin:0;perspective:900px;text-align:center;font:700 clamp(2.6rem,10vw,5.6rem)/1.1 'Times New Roman',Times,serif}
.spin{display:inline-block;position:relative;transform-style:preserve-3d;animation:spin3d 9s ease-in-out infinite}
.spin .l{position:absolute;left:0;top:0;white-space:nowrap}
.spin .f{position:relative}
@keyframes spin3d{0%,100%{transform:rotateY(-50deg) rotateX(6deg)}50%{transform:rotateY(50deg) rotateX(-6deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation:none;transform:rotateY(-20deg)}}
.btn,.taskbar a{background:var(--g);color:#000;text-decoration:none;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px #808080,inset 2px 2px #dfdfdf}
.btn{display:inline-block;border:0;padding:6px 18px;font:inherit;cursor:pointer}
.btn:active,.taskbar a[aria-current]{box-shadow:inset -1px -1px #fff,inset 1px 1px #0a0a0a,inset -2px -2px #dfdfdf,inset 2px 2px #808080}
:focus-visible{outline:1px dotted #000;outline-offset:-5px}
.splash :focus-visible,.title :focus-visible{outline-color:#fff}
figure{margin:0}
figure img{display:block;width:100%;height:auto}
.g{columns:3 230px;column-gap:14px}
.g figure{margin:0 0 14px;break-inside:avoid}
.g img{cursor:pointer}
.g img:focus-visible{outline:2px dotted #000080;outline-offset:2px}
figcaption{text-align:center;padding-top:3px}
.status{margin-top:3px}
.status span{display:block;padding:2px 6px;box-shadow:inset 1px 1px #808080,inset -1px -1px #fff}
form label{display:block;margin:0 0 14px}
form input,form textarea{display:block;width:100%;margin-top:4px;padding:5px;font:inherit;background:#fff;border:0;box-shadow:inset 1px 1px #808080,inset -1px -1px #fff,inset 2px 2px #0a0a0a,inset -2px -2px #dfdfdf}
textarea{min-height:150px;resize:vertical}
.wrap p{margin:0 0 14px}
.taskbar{position:fixed;left:0;right:0;bottom:0;height:40px;display:flex;align-items:center;gap:4px;padding:4px;background:var(--g);box-shadow:inset 0 1px #dfdfdf,0 -1px #fff;z-index:5}
.taskbar a,.clock{height:30px;display:flex;align-items:center;padding:0 14px}
.start{font-weight:700;gap:6px}
.start i{width:14px;height:14px;background:conic-gradient(#e33 0 25%,#3b3 0 50%,#38f 0 75%,#fc2 0)}
.clock{margin-left:auto;box-shadow:inset 1px 1px #808080,inset -1px -1px #fff}
#lb{position:fixed;inset:0;display:none;align-items:center;justify-content:center;padding:10px 10px 52px;background:rgba(0,70,70,.82);z-index:10}
#lb.on{display:flex}
#lb .win{max-width:94vw}
#lb img{display:block;max-width:100%;max-height:68vh;width:auto;height:auto;margin:auto}
#lb .row{display:flex;justify-content:center;gap:8px;padding-top:8px}

html{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='24' viewBox='0 0 16 24'%3E%3Cpath d='M1 1v17l4-4 3.5 8 3-1.3-3.5-7.7H13z' fill='%23fff' stroke='%23000'/%3E%3C/svg%3E") 1 1,auto}
a,button,.btn,.xb,.g img{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='25' viewBox='0 0 19 25'%3E%3Cpath d='M6.5 1.5H9.5V9.5H11.5V10.5H13.5V11.5H15.5V12.5H17.5V18.5L15.5 21.5V23.5H7.5V21.5L3.5 16.5L1.5 13.5H3.5L6.5 15.5Z' fill='%23fff' stroke='%23000'/%3E%3C/svg%3E") 8 1,pointer}
input,textarea{cursor:text}