:root{--black:#111;--white:#fff;--gray:#c8c8c8;--light:#eee;--blue:#6667a8;--bar-h:27px;font-family:Chicago,"Arial Narrow",Arial,sans-serif}
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden}button{font:inherit}
body{background:#7778b8;color:var(--black)}
#desktop{position:relative;width:100vw;height:100dvh;overflow:hidden;background-color:#7778b8;background-image:radial-gradient(#9091ca 1px,transparent 1px);background-size:4px 4px}
.menu-bar{position:absolute;z-index:5000;inset:0 0 auto;height:var(--bar-h);display:flex;align-items:center;gap:20px;padding:0 12px;border-bottom:2px solid var(--black);background:var(--light);box-shadow:inset 0 1px var(--white);font-size:13px;user-select:none}
.apple{font-size:15px}.menu-bar time{margin-left:auto;font-size:12px}.menu-item{font-weight:400}
#files{position:absolute;z-index:10;inset:var(--bar-h) 0 0;overflow:hidden}
.desktop-file{position:absolute;width:122px;min-height:112px;display:flex;flex-direction:column;align-items:center;padding:4px;border:0;background:transparent;cursor:grab;touch-action:none;user-select:none;color:var(--black)}
.desktop-file:active{cursor:grabbing}.desktop-file:focus-visible{outline:1px dotted var(--black)}
.thumbnail{width:94px;height:72px;padding:3px;border:1px solid var(--black);background:var(--white);box-shadow:2px 2px var(--black)}
.thumbnail img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
.filename{max-width:120px;margin-top:7px;padding:2px 4px;background:#ffffffd0;font:12px/1.15 Georgia,serif;text-align:center}
.desktop-file.selected .thumbnail{filter:invert(1)}.desktop-file.selected .filename{color:var(--white);background:var(--black)}
.desktop-disk{position:absolute;right:22px;top:48px;width:92px;display:flex;flex-direction:column;align-items:center;gap:4px;font:12px Georgia,serif;text-align:center;user-select:none}
.disk-icon{width:48px;height:36px;border:2px solid var(--black);border-radius:3px;background:linear-gradient(#ddd 0 62%,#777 63% 70%,#eee 71%);box-shadow:2px 2px var(--black)}
.art-window{position:absolute;z-index:1000;display:flex;flex-direction:column;width:min(720px,calc(100vw - 24px));height:min(560px,calc(100dvh - 62px));min-width:280px;min-height:220px;border:2px solid var(--black);background:var(--gray);box-shadow:3px 3px var(--black);resize:both;overflow:hidden}
.title-bar{height:25px;flex:0 0 25px;display:flex;align-items:center;justify-content:center;border-bottom:2px solid var(--black);background:repeating-linear-gradient(0deg,#777 0 1px,#fff 1px 3px);cursor:move;touch-action:none;user-select:none}
.title-bar strong{max-width:70%;padding:1px 10px;background:var(--gray);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.close{position:absolute;left:6px;width:15px;height:15px;padding:0;border:1px solid var(--black);background:var(--gray);box-shadow:inset 1px 1px var(--white);line-height:11px;cursor:pointer}
.image-stage{flex:1;min-height:0;padding:7px;background:#111}.image-stage img{display:block;width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none}
.boot-screen{position:fixed;z-index:10000;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;border:2px solid var(--black);background:var(--gray)}
.boot-screen.done{display:none}.boot-panel{width:min(596px,84vw);height:min(332px,50vh);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;border:1px solid var(--black);background:var(--white)}
.boot-name{font:46px Georgia,serif;white-space:nowrap}
.progress{width:264px;height:18px;border:1px solid var(--black);background:#ddd;box-shadow:inset 1px 1px #777}.progress i{display:block;width:0;height:100%;background:repeating-linear-gradient(90deg,#1717aa 0 5px,#5555ee 5px 10px);animation:boot 3.8s linear forwards}@keyframes boot{to{width:100%}}
@media(max-width:700px){:root{--bar-h:29px}.menu-bar{gap:9px;padding:0 7px}.menu-item,.desktop-disk{display:none}.boot-name{font-size:31px}.desktop-file{width:104px}.thumbnail{width:80px;height:61px}.filename{max-width:104px;font-size:11px}.art-window{width:calc(100vw - 20px);height:72dvh;min-width:0;left:10px!important;top:48px!important;resize:none}.image-stage{padding:3px}}
@media(prefers-reduced-motion:reduce){.progress i{animation-duration:.01ms}}