:root{--xp-blue:#245edb;--xp-blue-dark:#0c3a9a;--xp-blue-mid:#2b74de;--xp-taskbar-h:32px;--ease:cubic-bezier(.2,.8,.2,1)}
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden}body{background:#000;font-family:Tahoma,"Trebuchet MS",Arial,sans-serif;user-select:none;-webkit-tap-highlight-color:transparent}button,input,textarea{font:inherit}button{cursor:default}img{-webkit-user-drag:none}#app{position:fixed;inset:0;overflow:hidden;background:#000}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.screen{position:absolute;inset:0;opacity:0;visibility:hidden;pointer-events:none;filter:blur(1.5px);transform:scale(1.006);transition:opacity .65s var(--ease),visibility .65s step-end,filter .65s ease,transform .65s ease}.screen.is-active{opacity:1;visibility:visible;pointer-events:auto;filter:none;transform:none;transition:opacity .65s var(--ease),visibility 0s,filter .65s ease,transform .65s ease}
/* boot */
.boot-screen{z-index:30;display:grid;place-items:center;background:#000}.boot-crt,.boot-vignette{position:absolute;inset:0;pointer-events:none}.boot-crt{opacity:.12;background:repeating-linear-gradient(to bottom,rgba(255,255,255,.03) 0,rgba(255,255,255,.03) 1px,rgba(0,0,0,.045) 2px,rgba(0,0,0,.045) 4px);animation:scanDrift 7s linear infinite}.boot-vignette{background:radial-gradient(circle at 50% 42%,transparent 24%,rgba(0,0,0,.38) 70%,rgba(0,0,0,.8) 100%)}.boot-center{width:min(760px,86vw);display:flex;flex-direction:column;align-items:center;gap:26px;transform:translateY(-2vh)}.boot-logo{width:min(560px,72vw);height:auto;opacity:0;transform:translateY(10px) scale(.985);filter:drop-shadow(0 12px 28px rgba(0,0,0,.7));animation:bootLogoIn .9s var(--ease) .35s forwards}.boot-loading-gif{width:min(320px,36vw);min-width:240px;height:auto;opacity:0;animation:fadeIn .5s ease .82s forwards}.boot-footer{position:absolute;left:34px;right:34px;bottom:22px;display:flex;justify-content:space-between;color:rgba(255,255,255,.87);font-size:11px;opacity:0;animation:fadeIn .5s ease 1.05s forwards}
/* welcome */
.welcome-screen{z-index:20;display:grid;grid-template-rows:12% 1fr 12%;background:#5a7ed8}.welcome-top,.welcome-bottom{background:linear-gradient(180deg,#093aa2 0%,#164dc5 58%,#2d6fe5 100%);position:relative}.welcome-top::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,transparent 0%,#8db2ff 15%,#fff 50%,#8db2ff 85%,transparent 100%);opacity:.85}.welcome-bottom{transform:rotate(180deg)}.welcome-main{display:flex;align-items:center;justify-content:center;gap:clamp(22px,5vw,66px);background:radial-gradient(circle at 38% 46%,#7897e7 0%,#6586db 48%,#5677cd 100%)}.welcome-mark-wrap{width:min(360px,40vw);padding-right:clamp(18px,4vw,54px);border-right:1px solid rgba(255,255,255,.34)}.welcome-mark{width:100%;filter:drop-shadow(0 7px 14px rgba(18,41,105,.35));opacity:0;transform:translateX(-18px)}.welcome-word{color:#fff;font-size:clamp(28px,5vw,64px);font-style:italic;font-weight:700;text-shadow:2px 3px 0 rgba(28,61,145,.6);opacity:0;transform:translateX(18px)}.welcome-screen.is-active .welcome-mark{animation:welcomeLeft .74s var(--ease) .12s forwards}.welcome-screen.is-active .welcome-word{animation:welcomeRight .74s var(--ease) .22s forwards}
/* desktop */
.desktop{z-index:10;background:#5aa0e8}.wallpaper,.desktop-glass{position:absolute;inset:0 0 var(--xp-taskbar-h);pointer-events:none}.wallpaper{background:#5ea1e9 url('./assets/xp-wallpaper.jpg') center/cover no-repeat}.desktop-glass{background:radial-gradient(circle at 15% 12%,rgba(255,255,255,.13),transparent 37%),linear-gradient(180deg,rgba(255,255,255,.02),rgba(0,0,0,.035))}.desktop-shortcuts{position:absolute;z-index:12;top:12px;left:10px;display:grid;grid-auto-flow:column;grid-template-rows:repeat(6,88px);gap:4px 12px;max-height:calc(100% - 50px)}.desktop-shortcut{width:88px;height:84px;border:0;background:transparent;color:#fff;padding:3px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:4px;text-shadow:1px 1px 2px #000;font-size:12px;line-height:1.05}.desktop-shortcut:focus-visible,.desktop-shortcut.is-selected{outline:none}.desktop-shortcut:focus-visible span:last-child,.desktop-shortcut.is-selected span:last-child{background:#2c65b9;border:1px dotted rgba(255,255,255,.85)}.desktop-shortcut span:last-child{max-width:86px;padding:2px 3px;text-align:center}.desktop-icon-img,.desktop-css-icon{width:46px;height:46px;object-fit:contain;filter:drop-shadow(1px 2px 1px rgba(0,0,0,.35))}.desktop-hanz-icon{width:60px;height:42px}.mine-desktop-icon{width:48px;height:46px}.desktop-css-icon{position:relative;display:grid;place-items:center}.notepad-icon{width:38px;height:45px;background:linear-gradient(#fff,#f2f2e9);border:1px solid #888;box-shadow:inset 0 6px 0 #4d8dec}.notepad-icon::before{content:"";position:absolute;left:5px;right:5px;top:13px;height:2px;background:#8aa8c5;box-shadow:0 6px #8aa8c5,0 12px #8aa8c5,0 18px #8aa8c5}.notepad-icon i{position:absolute;left:8px;right:8px;top:-3px;height:7px;background:repeating-linear-gradient(90deg,#444 0 2px,transparent 2px 7px)}.calc-icon{width:39px;height:44px;border:2px solid #777;border-radius:3px;background:linear-gradient(#e7e7e7,#9cb7dc);color:#173c6e;font-weight:700;font-size:12px;padding-top:2px;box-shadow:inset 0 12px 0 #eef6ff}.calc-icon::after{content:"";position:absolute;left:5px;right:5px;bottom:5px;height:18px;background:repeating-linear-gradient(90deg,#d9d9d9 0 6px,#777 6px 7px),repeating-linear-gradient(0deg,transparent 0 5px,#777 5px 6px)}.computer-icon{width:47px;height:42px}.computer-icon::before{content:"";position:absolute;left:3px;top:2px;width:36px;height:28px;border:2px solid #e7e7e7;border-radius:3px;background:linear-gradient(135deg,#5fb4ed,#1a5aa5);box-shadow:0 0 0 2px #6c7480}.computer-icon::after{content:"";position:absolute;width:30px;height:7px;left:10px;bottom:1px;border-radius:50%;background:#b8b8b8;box-shadow:0 -5px 0 -2px #7c7c7c}.computer-icon i{position:absolute;z-index:2;left:9px;top:8px;width:23px;height:14px;background:linear-gradient(135deg,rgba(255,255,255,.65),transparent 50%)}
/* windows */
.xp-window{position:absolute;z-index:30;display:flex;flex-direction:column;min-width:220px;min-height:120px;border:3px solid #1256c6;border-radius:8px 8px 2px 2px;overflow:hidden;background:#ece9d8;box-shadow:0 18px 44px rgba(0,0,0,.36);opacity:0;visibility:hidden;pointer-events:none;transform:scale(.985);transform-origin:center;transition:opacity .17s ease,transform .17s ease,visibility .17s step-end}.xp-window.is-open{opacity:1;visibility:visible;pointer-events:auto;transform:scale(1);transition:opacity .17s ease,transform .17s ease,visibility 0s}.xp-window.is-minimized{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(25px) scale(.94)}.xp-window.is-maximized{left:0!important;top:0!important;width:100%!important;height:calc(100% - var(--xp-taskbar-h))!important;border-radius:0}.xp-window.is-active-window{box-shadow:0 20px 48px rgba(0,0,0,.45)}.xp-window:not(.is-active-window) .xp-titlebar{filter:saturate(.45) brightness(1.07)}.xp-titlebar{height:30px;min-height:30px;display:flex;align-items:center;justify-content:space-between;padding:3px 4px 3px 6px;color:#fff;background:linear-gradient(180deg,#55a2ff 0%,#1c7aef 13%,#0964d8 52%,#0751bd 62%,#2b76e6 100%);border-bottom:1px solid #0c409b;text-shadow:1px 1px 1px rgba(0,0,0,.6);touch-action:none}.xp-window-title{display:flex;align-items:center;gap:5px;min-width:0;font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.xp-window-title img{width:18px;height:18px;object-fit:contain;flex:0 0 18px}.xp-window-controls{display:flex;gap:2px;flex:0 0 auto}.xp-control{width:22px;height:22px;border:1px solid rgba(255,255,255,.95);border-radius:3px;color:#fff;padding:0;display:grid;place-items:center;font:700 15px/1 Arial;background:linear-gradient(180deg,#67a8ff,#2c70db);box-shadow:inset 0 0 0 1px rgba(18,61,151,.55);text-shadow:1px 1px rgba(0,0,0,.45)}.xp-control:hover{filter:brightness(1.1)}.xp-close{font-size:18px;background:linear-gradient(180deg,#ff997f,#e64a2b 55%,#c92d13)}.xp-minimize{align-items:end;padding-bottom:4px}.xp-maximize{font-size:15px}.xp-menubar{height:25px;min-height:25px;display:flex;align-items:center;gap:2px;padding:1px 4px;border-bottom:1px solid #b8b4a5;background:#ece9d8}.xp-menubar button{height:21px;border:1px solid transparent;background:transparent;padding:1px 6px;font-size:12px;color:#111}.xp-menubar button:hover{border-color:#b6b3a6;background:#f5f3e8}.xp-statusbar{height:22px;min-height:22px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 5px;background:#ece9d8;border-top:1px solid #c8c5b8;color:#555;font-size:11px}.xp-statusbar span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.title-css-icon{width:16px;height:16px;display:inline-grid;place-items:center;flex:0 0 16px}.notepad-title-icon{background:#fff;border:1px solid #777;box-shadow:inset 0 4px #64a1ea}.calc-title-icon{font-size:8px;color:#082e70;background:#d8e9ff;border:1px solid #fff}.computer-title-icon{border:1px solid #fff;background:linear-gradient(135deg,#80d4ff,#1167bc)}
/* mascot window */
.mascot-window-body{position:relative;flex:1;min-height:0;background:linear-gradient(#eef5ff,#d9e7fb);padding:7px;display:grid;place-items:center;overflow:auto}.mascot-window-link{display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:0}.mascot-window-image{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;filter:drop-shadow(0 9px 10px rgba(0,0,0,.16))}.mascot-ok-hotspot{position:absolute;z-index:5;display:block;border:0;padding:0;margin:0;background:transparent;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.mascot-ok-hotspot:focus-visible{outline:2px dotted #111;outline-offset:1px}
/* minesweeper */
.minesweeper-window{background:#c0c0c0}.mine-body{flex:1;padding:9px;background:#c0c0c0;overflow:auto}.mine-status{height:50px;margin-bottom:8px;padding:5px 8px;display:flex;align-items:center;justify-content:space-between;border-top:3px solid #777;border-left:3px solid #777;border-right:3px solid #fff;border-bottom:3px solid #fff}.mine-counter{width:58px;height:32px;display:grid;place-items:center;color:#ff2020;background:#050505;font:700 24px/1 "Courier New",monospace;letter-spacing:1px}.mine-reset{width:34px;height:34px;padding:0;font-size:19px;background:#c0c0c0;border-top:3px solid #fff;border-left:3px solid #fff;border-right:3px solid #777;border-bottom:3px solid #777}.mine-reset:active{border-color:#777 #fff #fff #777}.mine-grid{display:grid;grid-template-columns:repeat(9,1fr);width:252px;max-width:100%;margin:auto;border-top:3px solid #777;border-left:3px solid #777;border-right:3px solid #fff;border-bottom:3px solid #fff}.mine-cell{aspect-ratio:1;min-width:0;padding:0;display:grid;place-items:center;background:#c0c0c0;border-top:2px solid #fff;border-left:2px solid #fff;border-right:2px solid #777;border-bottom:2px solid #777;font:700 14px/1 Arial}.mine-cell.is-open{border:1px solid #888;background:#c7c7c7}.mine-cell.is-flagged{color:#e00000;font-size:14px}.mine-cell.is-mine{font-size:15px}.mine-cell[data-count="1"]{color:#0000cf}.mine-cell[data-count="2"]{color:#008000}.mine-cell[data-count="3"]{color:#d00000}.mine-cell[data-count="4"]{color:#000080}.mine-cell[data-count="5"]{color:#800000}.mine-cell[data-count="6"]{color:#008080}.mine-hint{margin-top:6px;text-align:center;font-size:10px;color:#555}
/* paint */
.paint-window{background:#ece9d8}.paint-workspace{flex:1;min-height:0;display:flex;background:#b9b9b9}.paint-tools{width:54px;min-width:54px;padding:5px 4px;display:grid;grid-template-columns:repeat(2,22px);grid-auto-rows:24px;align-content:start;gap:2px;background:#ece9d8;border-right:1px solid #aaa797}.paint-tool{border-top:2px solid #fff;border-left:2px solid #fff;border-right:2px solid #858276;border-bottom:2px solid #858276;background:#ece9d8;padding:0;font-size:15px}.paint-tool:active,.paint-tool.is-selected{border-color:#858276 #fff #fff #858276;background:#d8d5c5}.paint-main{flex:1;min-width:0;display:flex;flex-direction:column}.paint-options{min-height:34px;display:flex;align-items:center;gap:12px;padding:4px 7px;background:#ece9d8;border-bottom:1px solid #aaa797;font-size:11px}.paint-options label{display:flex;align-items:center;gap:5px}.paint-options input{width:110px}.xp-small-button{border-top:2px solid #fff;border-left:2px solid #fff;border-right:2px solid #858276;border-bottom:2px solid #858276;background:#ece9d8;padding:3px 8px;font-size:11px;margin-left:auto}.paint-canvas-wrap{flex:1;min-height:0;padding:8px;overflow:auto;background:#b8b8b8}.paint-canvas-wrap canvas{display:block;width:min(100%,900px);height:auto;background:#fff;border-top:2px solid #777;border-left:2px solid #777;border-right:2px solid #fff;border-bottom:2px solid #fff;touch-action:none;cursor:crosshair}.paint-palette{height:47px;min-height:47px;display:flex;align-items:center;gap:2px;padding:5px 7px;background:#ece9d8;border-top:1px solid #aaa797;overflow-x:auto}.palette-color{width:27px;height:27px;min-width:27px;padding:3px;border-top:2px solid #fff;border-left:2px solid #fff;border-right:2px solid #858276;border-bottom:2px solid #858276;background:#ece9d8}.palette-color::after{content:"";display:block;width:100%;height:100%;background:var(--c);border:1px solid rgba(0,0,0,.25)}.palette-color.is-selected{outline:1px dotted #111;outline-offset:-6px}
/* notepad */
.notepad-window{background:#ece9d8}.notepad-area{flex:1;width:100%;min-height:0;resize:none;border:0;border-top:1px solid #777;outline:none;padding:5px 7px;background:#fff;color:#111;font:13px/1.4 "Lucida Console",Consolas,monospace;user-select:text}
/* calculator */
.calculator-body{flex:1;padding:10px 9px;background:#ece9d8}.calculator-display{height:38px;padding:7px 8px;margin-bottom:9px;text-align:right;overflow:hidden;background:#fff;border:2px inset #fff;font:20px/1.1 "Courier New",monospace}.calculator-memory{height:24px;margin-bottom:7px;font-size:10px;color:#555;text-align:right;white-space:nowrap}.calculator-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}.calc-key{height:38px;border:1px solid #7e7e7e;background:linear-gradient(#fff,#e2e6ef);color:#082974;font-size:13px}.calc-key.op{color:#d00000}.calc-key:active{background:#d5d9e1;transform:translateY(1px)}
/* computer */
.explorer-toolbar{height:34px;display:flex;align-items:center;gap:3px;padding:3px 6px;background:#ece9d8;border-bottom:1px solid #aaa797}.explorer-toolbar button{height:27px;border:1px solid transparent;background:transparent;padding:2px 8px;font-size:12px}.explorer-toolbar button:hover{border-color:#b7b4a7;background:#f7f4e8}.address-bar{height:28px;display:flex;align-items:center;gap:6px;padding:3px 5px;background:#ece9d8;border-bottom:1px solid #aaa797;font-size:11px}.address-bar input{flex:1;height:21px;border:1px solid #7f9db9;background:#fff;padding:1px 5px;font-size:11px}.computer-content{flex:1;min-height:0;display:flex;background:#fff}.computer-sidebar{width:190px;padding:8px;background:linear-gradient(180deg,#748ed2,#637fc5);overflow:auto}.sidebar-box{margin-bottom:8px;border-radius:7px;overflow:hidden;background:#dce6f5;border:1px solid rgba(255,255,255,.8)}.sidebar-box strong{display:block;padding:6px 8px;color:#2453a1;background:linear-gradient(#fff,#dce8f8);font-size:12px}.sidebar-box button,.sidebar-box a{display:block;width:100%;border:0;background:transparent;text-align:left;padding:5px 9px;color:#214a8a;text-decoration:none;font-size:11px}.sidebar-box button:hover,.sidebar-box a:hover{text-decoration:underline}.computer-files{flex:1;min-width:0;padding:9px 12px;overflow:auto;color:#222}.computer-files h3{margin:3px 0 8px;padding-bottom:4px;border-bottom:1px solid #b8cbe6;color:#2453a1;font-size:13px}.drive-row{display:flex;align-items:center;gap:9px;padding:5px 8px;margin-bottom:7px}.drive-icon{font-size:29px}.drive-row>div{min-width:0;flex:1}.drive-row strong{font-size:12px}.drive-row small{display:block;margin-top:2px;font-size:10px;color:#666}.drive-meter{width:min(220px,100%);height:10px;margin-top:3px;border:1px solid #8796ab;background:#fff}.drive-meter i{display:block;height:100%;background:linear-gradient(90deg,#204fd3,#66a0ff)}.drive-meter.pink i{background:linear-gradient(90deg,#d90c76,#ff66b1)}.file-tile{width:150px;height:45px;margin:3px;border:1px solid transparent;background:transparent;text-align:left;font-size:11px}.file-tile:hover{border-color:#9bb8e4;background:#e7f1ff}
/* taskbar */
.taskbar{position:absolute;z-index:80;left:0;right:0;bottom:0;height:var(--xp-taskbar-h);display:flex;align-items:stretch;background:linear-gradient(180deg,#2e7cf3 0%,#1f68e0 45%,#1749bf 56%,#245ccf 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 -1px 0 rgba(4,26,83,.55);transform:translateY(100%)}.desktop.is-active .taskbar{animation:taskbarIn .46s var(--ease) .08s forwards}.start-button{width:97px;min-width:97px;height:30px;border:0;padding:0;background:url('./assets/start-normal.png') center/97px 30px no-repeat}.start-button:hover{background-image:url('./assets/start-hover.png')}.start-button:active,.start-button.is-open{background-image:url('./assets/start-active.png')}.quick-launch{display:flex;align-items:center;gap:2px;padding:1px 4px;border-right:1px solid rgba(0,0,0,.18)}.quick-launch button{width:26px;height:28px;border:0;background:transparent;padding:4px}.quick-launch img{width:19px;height:19px;object-fit:contain}.task-buttons{flex:1;min-width:0;display:flex;align-items:center;gap:3px;padding:2px 4px;overflow:hidden}.task-button{min-width:120px;max-width:190px;height:27px;padding:2px 8px 2px 5px;display:flex;align-items:center;gap:5px;border:1px solid rgba(7,52,150,.8);border-radius:3px;color:#fff;background:linear-gradient(#4b8ff0,#286bd0);text-shadow:1px 1px rgba(0,0,0,.4);font-size:11px;white-space:nowrap;overflow:hidden}.task-button img,.task-button .task-css-icon{width:16px;height:16px;object-fit:contain;flex:0 0 16px}.task-button span:last-child{overflow:hidden;text-overflow:ellipsis}.task-button.is-active{background:linear-gradient(#1e57b6,#174999);box-shadow:inset 1px 1px 2px rgba(0,0,0,.28)}.tray{min-width:99px;padding:0 8px;display:flex;align-items:center;justify-content:flex-end;gap:6px;color:#fff;font-size:11px;background:linear-gradient(180deg,#29adf3 0%,#1897dd 55%,#1180cb 100%);border-left:1px solid rgba(6,93,183,.8);box-shadow:inset 1px 0 rgba(255,255,255,.24)}
/* start */
.start-menu{position:absolute;left:0;bottom:var(--xp-taskbar-h);z-index:90;width:min(400px,calc(100vw - 6px));border-radius:8px 8px 0 0;overflow:hidden;border:1px solid #0d3d94;background:#286bd5;box-shadow:0 18px 34px rgba(0,0,0,.36);opacity:0;visibility:hidden;pointer-events:none;transform:translateY(12px) scale(.99);transition:opacity .2s ease,transform .2s ease,visibility .2s step-end}.start-menu.is-open{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition:opacity .2s ease,transform .2s ease,visibility 0s}.start-menu-header{height:64px;padding:17px 18px;color:#fff;font-size:22px;font-weight:700;text-shadow:1px 2px 2px rgba(0,0,0,.35);background:linear-gradient(180deg,#2d81ef,#1f62d0);border-bottom:2px solid #e6872d}.start-menu-body{display:grid;grid-template-columns:1fr 168px;min-height:385px}.start-left-column{display:flex;flex-direction:column;padding:8px;background:#fff}.featured-program{display:flex;align-items:center;gap:9px;min-height:49px;padding:4px 6px;border-radius:3px;color:#132f55;text-decoration:none}.featured-program:hover,.start-program:hover{background:#3c74d8;color:#fff}.featured-program img{width:35px;height:35px;object-fit:contain}.featured-program img.wide-icon{width:39px;height:26px}.featured-program span{display:flex;flex-direction:column;min-width:0}.featured-program strong{font-size:13px}.featured-program small{font-size:10px;color:#6b6b6b}.featured-program:hover small{color:#eaf3ff}.start-separator,.right-separator{height:1px;margin:5px 5px;background:#d5d5d5}.start-program{height:39px;border:0;background:transparent;border-radius:3px;display:flex;align-items:center;gap:9px;padding:3px 7px;text-align:left;color:#222;font-size:12px}.start-program img,.mini-css-icon{width:28px;height:28px;object-fit:contain;flex:0 0 28px}.mini-note{display:block;background:#fff;border:1px solid #888;box-shadow:inset 0 5px #5f9ce9}.mini-calc{display:grid;place-items:start center;padding-top:2px;background:#c9def7;border:1px solid #6e7d91;color:#163d76;font-size:9px}.all-programs-row{margin-top:auto;height:39px;border:0;background:transparent;display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:3px 10px;font-size:12px;font-weight:700}.all-programs-row:hover{background:#e8f0fb}.all-programs-arrow{width:18px;height:23px;border-radius:4px;background:linear-gradient(#75db46,#31a71a);position:relative}.all-programs-arrow::after{content:"";position:absolute;left:6px;top:5px;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:8px solid white}.start-right-column{display:flex;flex-direction:column;padding:9px 8px;background:linear-gradient(#dce8f9,#d1dff6);border-left:1px solid #c8d9f1}.start-right-column button,.start-right-column a{min-height:34px;border:0;border-radius:3px;background:transparent;text-align:left;padding:5px 8px;color:#17345e;text-decoration:none;font-size:12px}.start-right-column button:hover,.start-right-column a:hover{background:#3d74d8;color:#fff}.right-label{padding:7px 8px 4px;color:#31588f;font-size:11px;font-weight:700}.start-menu-footer{height:42px;display:flex;justify-content:flex-end;align-items:center;gap:7px;padding:5px 8px;background:linear-gradient(#2a7aee,#1d5fd3)}.session-button{border:1px solid rgba(7,44,109,.8);border-radius:4px;color:#fff;font-size:11px;padding:6px 9px;background:linear-gradient(#f8c85d,#cb8f18);box-shadow:inset 0 1px 0 rgba(255,255,255,.45)}.session-shutdown{background:linear-gradient(#f77357,#d54d24)}
/* context + system */
.desktop-context-menu{position:absolute;z-index:95;width:190px;padding:3px;border:1px solid #777;background:#fff;box-shadow:2px 2px 5px rgba(0,0,0,.35);opacity:0;visibility:hidden;pointer-events:none}.desktop-context-menu.is-open{opacity:1;visibility:visible;pointer-events:auto}.desktop-context-menu button{width:100%;height:27px;border:0;background:#fff;text-align:left;padding:3px 18px;font-size:12px}.desktop-context-menu button:hover{background:#316ac5;color:#fff}.desktop-context-menu div{height:1px;margin:3px;background:#ddd}.system-overlay{position:absolute;z-index:200;inset:0;display:grid;place-items:center;background:#3155a7;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .5s ease,visibility .5s step-end}.system-overlay.is-open{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .5s ease,visibility 0s}.system-overlay-content{text-align:center;color:#fff}.system-overlay img{width:min(380px,70vw);filter:drop-shadow(0 10px 18px rgba(0,0,0,.25))}.system-overlay p{font-size:20px;text-shadow:1px 1px #173273}
@keyframes scanDrift{to{transform:translateY(4px)}}@keyframes bootLogoIn{to{opacity:1;transform:translateY(0) scale(1)}}@keyframes fadeIn{to{opacity:1}}@keyframes welcomeLeft{to{opacity:1;transform:translateX(0)}}@keyframes welcomeRight{to{opacity:1;transform:translateX(0)}}@keyframes taskbarIn{to{transform:translateY(0)}}
@media(max-width:820px){.welcome-main{flex-direction:column;gap:18px}.welcome-mark-wrap{width:min(340px,70vw);padding:0 0 20px;border-right:0;border-bottom:1px solid rgba(255,255,255,.34)}.welcome-word{font-size:clamp(31px,10vw,52px)}.desktop-shortcuts{grid-template-rows:repeat(4,76px);grid-auto-columns:76px;gap:2px 4px}.desktop-shortcut{width:74px;height:74px;font-size:10px}.desktop-icon-img,.desktop-css-icon{width:38px;height:38px}.desktop-hanz-icon{width:50px;height:35px}.start-menu{width:min(390px,calc(100vw - 4px))}.task-button{min-width:95px;max-width:140px}.computer-sidebar{width:155px}.mascot-window-body{padding:3px}}
@media(max-width:620px){:root{--xp-taskbar-h:36px}.boot-logo{width:min(430px,84vw)}.boot-loading-gif{min-width:200px;width:60vw}.boot-footer{left:12px;right:12px;font-size:9px}.desktop-shortcuts{top:6px;left:4px;grid-template-rows:repeat(4,70px);grid-auto-columns:68px;gap:0 2px}.desktop-shortcut{width:66px;height:68px;padding:1px;font-size:9px}.desktop-icon-img,.desktop-css-icon{width:35px;height:35px}.desktop-hanz-icon{width:46px;height:32px}.xp-window{min-width:190px}.xp-titlebar{height:31px;min-height:31px}.xp-control{width:23px;height:23px}.taskbar{height:36px}.start-button{height:30px;align-self:flex-end}.quick-launch{display:none}.tray{min-width:79px;padding:0 5px;gap:4px;font-size:10px}.tray span:first-child{display:none}.task-buttons{padding:2px}.task-button{min-width:78px;max-width:112px;height:30px;padding:2px 4px;font-size:9px}.start-menu{bottom:36px;width:calc(100vw - 4px);left:2px}.start-menu-header{height:52px;padding:13px 14px;font-size:19px}.start-menu-body{grid-template-columns:1fr 138px;min-height:360px}.featured-program{min-height:44px}.start-program{height:35px}.start-right-column{padding:7px 5px}.start-right-column button,.start-right-column a{padding:4px 5px;font-size:10px}.paint-workspace{flex-direction:column}.paint-tools{width:100%;min-width:0;height:38px;display:flex;align-items:center;padding:4px;border-right:0;border-bottom:1px solid #aaa}.paint-tool{width:29px;height:29px}.paint-options{gap:6px;flex-wrap:wrap}.paint-options input{width:90px}.paint-palette{height:42px;min-height:42px}.palette-color{width:24px;height:24px;min-width:24px}.computer-sidebar{display:none}.mine-grid{width:min(252px,88vw)}.mine-hint{font-size:9px}.mascot-window.is-maximized .mascot-window-image{max-height:calc(100vh - 96px)}.notepad-area{font-size:12px}.system-overlay p{font-size:16px}}
@media(max-height:650px){.start-menu-body{min-height:300px}.desktop-shortcuts{grid-template-rows:repeat(3,72px)}.mascot-window-image{max-height:calc(100vh - 120px)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}

/* ===== XP fidelity + expanded desktop (2026-08-13) ===== */
.external-shortcut .social-desktop-icon{width:44px;height:44px;object-fit:contain}.external-start-program{color:#222;text-decoration:none}.external-start-program:hover{color:#fff}

/* exact-ish Luna title bar and controls */
.xp-window{border-color:#0054e3;border-width:3px;border-radius:8px 8px 1px 1px;background:#ece9d8;box-shadow:1px 2px 9px rgba(0,0,0,.45)}
.xp-titlebar{height:30px;min-height:30px;padding:3px 4px 3px 5px;background:linear-gradient(180deg,#3f8df7 0%,#1976ed 11%,#0054e3 45%,#0050d1 69%,#2d78e7 100%);border-bottom:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.38),inset 0 -1px 0 rgba(0,48,150,.5);text-shadow:1px 1px #0b308a}
.xp-window:not(.is-active-window) .xp-titlebar{filter:none;background:linear-gradient(180deg,#9db7d9 0%,#7d9dcc 15%,#7696c4 60%,#8ca8cf 100%)}
.xp-window-controls{gap:2px;align-items:center}
.xp-control{position:relative;width:22px;height:22px;border:1px solid #fff;border-radius:3px;padding:0;color:transparent;background:linear-gradient(135deg,#75adff 0%,#2d74e8 48%,#0b4dc1 100%);box-shadow:inset 0 0 0 1px #164da8,0 0 1px rgba(0,0,0,.65);text-shadow:none;overflow:hidden}
.xp-control span{display:none}.xp-control:hover{filter:brightness(1.12)}.xp-control:active{filter:brightness(.92)}
.xp-minimize::before{content:"";position:absolute;left:5px;bottom:5px;width:10px;height:3px;background:#fff;box-shadow:0 1px 0 rgba(0,40,120,.8)}
.xp-maximize::before{content:"";position:absolute;left:5px;top:5px;width:10px;height:9px;border:2px solid #fff;border-top-width:3px;box-sizing:border-box}
.xp-close{background:linear-gradient(135deg,#ff9b7a 0%,#ef6c45 24%,#e34725 56%,#c82b13 100%);box-shadow:inset 0 0 0 1px #a93c25,0 0 1px rgba(0,0,0,.65)}
.xp-close::before,.xp-close::after{content:"";position:absolute;left:4px;top:9px;width:13px;height:3px;background:#fff;border-radius:1px;box-shadow:0 1px 0 rgba(112,31,18,.45)}
.xp-close::before{transform:rotate(45deg)}.xp-close::after{transform:rotate(-45deg)}

/* teleport effect for mascot OK */
.xp-window.is-teleporting{animation:xpTeleport .28s ease both}.mascot-ok-hotspot{cursor:pointer}
@keyframes xpTeleport{0%{opacity:1;transform:scale(1)}42%{opacity:.05;transform:scale(.92)}56%{opacity:.05;transform:scale(.92)}100%{opacity:1;transform:scale(1)}}

/* XP Explorer / Tento počítač */
.computer-window{background:#fff}.explorer-menubar{background:#f2f0e6;border-bottom:1px solid #d3d1c6}.xp-explorer-toolbar{height:42px;min-height:42px;display:flex;align-items:center;gap:1px;padding:2px 5px;background:linear-gradient(#faf9f5,#ece9d8);border-top:1px solid #fff;border-bottom:1px solid #bbb9ad}.explorer-tool{height:36px;min-width:34px;border:1px solid transparent;background:transparent;display:flex;align-items:center;gap:4px;padding:2px 5px;color:#222;font-size:11px}.explorer-tool:hover,.explorer-tool.is-pressed{border-color:#b7b39f;background:linear-gradient(#fff,#e6e3d5)}.explorer-tool.is-disabled{opacity:.42}.toolbar-glyph{width:23px;height:23px;display:grid;place-items:center;font:bold 21px/1 Tahoma;color:#69a255;text-shadow:0 1px #fff}.forward-glyph{color:#8ca789}.up-glyph{color:#4aa830}.search-glyph,.folder-glyph{font-size:18px}.view-glyph{font-size:17px;color:#2c6cc2}.toolbar-separator{width:1px;height:28px;background:#c9c7bc;margin:0 3px;box-shadow:1px 0 #fff}.toolbar-caret{font-size:9px;color:#222}
.xp-address-bar{height:27px;min-height:27px;display:flex;align-items:center;gap:4px;padding:2px 4px;background:#ece9d8;border-bottom:1px solid #b5b2a7;font-size:11px}.xp-address-bar>span{color:#666}.xp-address-bar>img{width:16px;height:16px;object-fit:contain}.xp-address-bar input{flex:1;height:21px;border:1px solid #7f9db9;background:#fff;padding:1px 4px;color:#111;font-size:11px}.xp-address-bar button{height:21px;border:1px solid #7f9db9;background:linear-gradient(#fff,#e2e2dc);font-size:10px;padding:1px 8px}
.explorer-searchbar{height:32px;display:flex;align-items:center;gap:7px;padding:4px 7px;background:#ffffe1;border-bottom:1px solid #d6d2b8;font-size:11px}.explorer-searchbar[hidden]{display:none}.explorer-searchbar label{display:flex;align-items:center;gap:5px;flex:1}.explorer-searchbar input{flex:1;height:22px;border:1px solid #7f9db9;padding:2px 5px}.explorer-searchbar button{height:22px;border:1px solid #7f9db9;background:#f5f5ef;font-size:10px}
.computer-content{flex:1;min-height:0;display:flex;background:#fff;overflow:hidden}.computer-sidebar{width:190px;min-width:190px;padding:7px;background:linear-gradient(90deg,#7da4e2,#b9cdf0 42%,#c9d9f3);overflow:auto;border-right:1px solid #a7b8da}.computer-content.hide-sidebar .computer-sidebar{display:none}.xp-task-panel{margin-bottom:8px;border:1px solid #8aa3d8;border-radius:5px;background:#d6e4fb;overflow:hidden;box-shadow:inset 0 1px #fff}.xp-task-panel-title{height:25px;display:flex;align-items:center;justify-content:space-between;padding:4px 6px;background:linear-gradient(90deg,#fff,#cbdcf6);color:#244d88;font-size:11px;font-weight:bold}.panel-collapse{width:18px;height:18px;border:1px solid #8ba2c9;border-radius:50%;background:#f6fbff;color:#2c5790;padding:0;font:bold 11px/1 Tahoma}.xp-task-panel.is-collapsed .xp-task-panel-body{display:none}.xp-task-panel-body{padding:5px 6px 6px;display:flex;flex-direction:column;gap:1px}.xp-task-panel-body button,.xp-task-panel-body a{min-height:23px;border:0;background:transparent;color:#34577c;text-align:left;text-decoration:none;padding:2px 2px;font-size:10px;display:flex;align-items:center;gap:5px}.xp-task-panel-body button:hover,.xp-task-panel-body a:hover{text-decoration:underline;color:#123a77}.task-panel-icon{width:15px;text-align:center}.xp-details-panel .xp-task-panel-body{gap:3px}.xp-details-panel strong{font-size:11px;color:#1c355c}.xp-details-panel span{font-size:10px;color:#3e4e68}
.computer-files{flex:1;min-width:0;padding:7px 9px 12px;overflow:auto;background:#fff}.explorer-group{margin-bottom:9px}.explorer-group.is-filtered-out{display:none}.explorer-group h3{height:20px;margin:0 0 5px;padding:2px 5px;border-bottom:1px solid #d7d7d7;color:#1f3044;font-size:11px}.explorer-items{display:grid;grid-template-columns:repeat(2,minmax(180px,1fr));gap:5px 10px;padding:0 6px}.explorer-item{min-height:48px;border:1px solid transparent;background:transparent;display:flex;align-items:center;gap:9px;padding:4px 6px;text-align:left;color:#222;font-size:11px}.explorer-item:hover,.explorer-item.is-selected{border-color:#aac4e8;background:#e7f0ff}.explorer-item-icon{width:42px;height:36px;flex:0 0 42px;position:relative;display:grid;place-items:center;font-size:27px}.folder-xp-icon::before{content:"";position:absolute;left:2px;top:8px;width:35px;height:25px;border:1px solid #b98d24;border-radius:2px;background:linear-gradient(#ffe487,#efb94d);transform:skewY(-4deg)}.folder-xp-icon::after{content:"";position:absolute;left:4px;top:4px;width:14px;height:8px;border:1px solid #b98d24;border-bottom:0;background:#ffdf75;border-radius:2px 2px 0 0}.drive-xp-icon::before{content:"";position:absolute;left:3px;top:8px;width:36px;height:19px;border:1px solid #777;border-radius:3px;background:linear-gradient(#f9f9f9,#b8b8b8);box-shadow:inset 0 -4px #989898}.drive-xp-icon::after{content:"";position:absolute;left:8px;top:23px;width:24px;height:4px;border-top:1px solid #666}.camera-xp-icon{font-size:28px}.explorer-list-view .explorer-items{grid-template-columns:1fr}.explorer-list-view .explorer-item{min-height:30px}.explorer-list-view .explorer-item-icon{width:28px;height:25px;transform:scale(.72);transform-origin:left center}.explorer-empty{padding:20px;color:#555;font-size:11px}
.show-desktop-icon{display:block;width:18px;height:18px;border:1px solid #ddeeff;background:linear-gradient(#7fc6ff,#236bc4);position:relative}.show-desktop-icon::after{content:"";position:absolute;left:3px;right:3px;bottom:2px;height:3px;background:#d5efff}

/* social icons in start and desktop */
.start-program img[src$="youtube-icon.svg"],.start-program img[src$="herohero-icon.png"],.start-program img[src$="patreon-icon.png"]{object-fit:contain}.start-left-column{overflow:auto}.start-menu-body{max-height:min(560px,calc(100vh - 120px))}

@media(max-width:820px){.explorer-items{grid-template-columns:1fr}.computer-sidebar{width:170px;min-width:170px}.social-desktop-icon{width:38px!important;height:38px!important}}
@media(max-width:620px){.computer-sidebar{display:none}.computer-content.show-sidebar-mobile .computer-sidebar{display:block;position:absolute;left:0;top:124px;bottom:22px;z-index:4;width:min(205px,70vw);box-shadow:3px 0 8px rgba(0,0,0,.3)}.xp-explorer-toolbar{height:36px;min-height:36px;padding:1px 2px}.explorer-tool{height:31px;min-width:28px;padding:1px 3px}.explorer-tool>span:last-child:not(.toolbar-caret){display:none}.toolbar-glyph{width:20px;height:20px;font-size:17px}.xp-address-bar>span,.xp-address-bar button{display:none}.explorer-items{padding:0;gap:2px}.explorer-item{min-height:42px;padding:2px 3px}.explorer-item-icon{width:36px;height:31px;transform:scale(.88)}.start-left-column{max-height:360px;overflow:auto}.start-menu-body{min-height:0;max-height:calc(100vh - 130px)}}

/* ===== XP taskbar + Windows Media Player + mobile polish ===== */
:root{--xp-taskbar-h:32px}
.taskbar{height:32px;background:linear-gradient(180deg,#3a83ef 0%,#1f68dc 10%,#245edb 54%,#1c55c2 86%,#2868d7 100%);box-shadow:inset 0 1px 0 #6ca8ff,inset 0 2px 0 rgba(255,255,255,.18),0 -1px 0 #1546a5;align-items:stretch}
.start-button{width:98px;min-width:98px;height:30px;align-self:flex-start;border:0;border-radius:0;padding:0;background:url('./assets/taskbar-start.png') left top/98px 30px no-repeat;filter:none;box-shadow:none}
.start-button:hover{background-image:url('./assets/start-hover.png');background-size:97px 30px}
.start-button:active,.start-button.is-open{background-image:url('./assets/start-active.png');background-size:97px 30px}
.quick-launch{height:32px;align-items:center;padding:1px 5px 1px 7px;border-right:1px solid #0f47b4;box-shadow:1px 0 0 rgba(255,255,255,.15)}
.quick-launch button{width:27px;height:30px;padding:4px;border:0;background:transparent}.quick-launch button:hover{background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}.quick-launch img{width:20px;height:20px}
.task-buttons{height:32px;padding:2px 4px 3px;gap:3px}.task-button{height:27px;border-color:#1149b0;border-radius:2px;background:linear-gradient(180deg,#4f92ef,#3379dc 52%,#2d6bc7);box-shadow:inset 0 1px 0 rgba(255,255,255,.2);font-size:11px}.task-button.is-active{background:linear-gradient(180deg,#1c56b9,#164596 58%,#1c52ad);box-shadow:inset 1px 1px 3px rgba(0,0,0,.33)}
.tray{height:32px;min-width:147px;padding:0 8px 0 0;gap:3px;background:linear-gradient(180deg,#18a6ea 0%,#1598df 52%,#0b82ca 100%);border-left:1px solid #0c64b2;box-shadow:inset 1px 0 rgba(255,255,255,.28);justify-content:flex-start}.tray-reference-icons{display:block;width:88px;height:30px;flex:0 0 88px;background:url('./assets/tray-icons.png') center/88px 30px no-repeat}.tray #clock{min-width:47px;color:#fff;font:11px/32px Tahoma,Arial,sans-serif;text-align:center;text-shadow:1px 1px #0a5791;white-space:nowrap}

/* transparent sign hit areas */
.mascot-close-hotspot{position:absolute;z-index:7;display:block;border:0;padding:0;margin:0;background:transparent;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.mascot-close-hotspot:focus-visible,.mascot-ok-hotspot:focus-visible{outline:2px dotted #111;outline-offset:1px}

/* Windows Media Player 9/XP inspired skin */
.media-player-window{min-width:238px;min-height:330px;border:2px solid #8f94a2;border-radius:8px 8px 12px 12px;background:#d9dce7;box-shadow:2px 3px 11px rgba(0,0,0,.45);overflow:hidden}
.media-player-window.is-active-window{box-shadow:3px 5px 15px rgba(0,0,0,.5)}
.wmp-titlebar{height:25px;min-height:25px;display:flex;align-items:center;justify-content:space-between;padding:2px 3px 2px 5px;background:linear-gradient(180deg,#f8f8fb 0%,#d8dbe5 48%,#bfc4d2 100%);border-bottom:1px solid #8e93a0;color:#111;touch-action:none}
.wmp-window-title{display:flex;align-items:center;gap:4px;min-width:0;font:bold 12px Tahoma,Arial,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wmp-window-title img{width:16px;height:16px;object-fit:contain}.wmp-window-controls{gap:2px}.media-player-window .xp-control{width:20px;height:20px;border-color:#fff;border-radius:3px}.media-player-window .xp-minimize,.media-player-window .xp-maximize{background:linear-gradient(180deg,#f6f7fb,#cbd0dd);box-shadow:inset 0 0 0 1px #969caa}.media-player-window .xp-minimize::before{background:#66707f;box-shadow:none}.media-player-window .xp-maximize::before{border-color:#66707f;box-shadow:none}.media-player-window .xp-close{background:linear-gradient(180deg,#fa817c,#d64f4b 60%,#b73532)}
.wmp-menubar{height:24px;min-height:24px;display:flex;align-items:center;gap:1px;padding:0 3px;background:#e7e8ef;border-bottom:1px solid #a7abb8}.wmp-menubar button{height:21px;border:1px solid transparent;background:transparent;padding:1px 5px;color:#111;font:10px Tahoma,Arial,sans-serif}.wmp-menubar button:hover{border-color:#9da4b2;background:#f7f8fb}.wmp-menubar #wmpSoundModeButton{margin-left:auto;font-size:9px}
.wmp-skin{flex:1;min-height:0;display:flex;flex-direction:column;padding:6px 8px 8px;background:linear-gradient(145deg,#eef3fb 0%,#c3d2e7 34%,#f5f7fb 55%,#b9c8df 100%);position:relative;overflow:auto}.wmp-skin::before,.wmp-skin::after{content:"";position:absolute;pointer-events:none;border-radius:55%}.wmp-skin::before{left:-30px;right:40%;bottom:-32px;height:78px;background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(126,159,202,.28));border-top:1px solid rgba(91,119,158,.35)}.wmp-skin::after{right:-35px;left:62%;bottom:-26px;height:66px;background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(105,141,192,.24));border-top:1px solid rgba(91,119,158,.35)}
.wmp-screen{position:relative;z-index:1;flex:1;min-height:150px;border:2px solid #89909e;border-radius:2px;background:#050505;overflow:hidden;box-shadow:inset 0 0 0 1px #222}.wmp-screen img{width:100%;height:100%;display:block;object-fit:contain;background:#000}.wmp-screen-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.03),transparent 18%,rgba(0,0,0,.1))}
.wmp-mini-status{position:relative;z-index:2;height:22px;min-height:22px;display:flex;align-items:center;gap:6px;padding:2px 5px;background:#111827;color:#dce5f5;border-top:1px solid #374057;font:9px Tahoma,Arial,sans-serif}.wmp-status-light{width:8px;height:8px;background:#56d500;border:1px solid #173e00}.wmp-status-light.is-playing{box-shadow:0 0 4px #63ff00}.wmp-track-title{margin-left:auto;max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fff}
.wmp-seek-row{position:relative;z-index:2;height:28px;display:grid;grid-template-columns:32px 1fr 32px;align-items:center;gap:4px;color:#34415a;font:9px Tahoma,Arial,sans-serif}.wmp-seek,.wmp-volume{accent-color:#5fa3d8;min-width:0}.wmp-seek{width:100%;height:14px}.wmp-volume-row{position:relative;z-index:2;height:24px;display:flex;align-items:center;gap:5px;padding:0 3px}.wmp-small-button{width:24px;height:20px;border:1px solid #9ca5b3;border-radius:9px;background:linear-gradient(#fff,#cbd5e4);font-size:11px;padding:0}.wmp-volume{width:88px;height:14px}
.wmp-controls-row{position:relative;z-index:2;display:flex;align-items:center;gap:7px;height:48px;padding:1px 4px}.wmp-round{display:grid;place-items:center;border:1px solid #8798ad;border-radius:50%;background:radial-gradient(circle at 35% 28%,#fff 0 18%,#e8f3fc 28%,#bfd5e9 62%,#8aa9c8 100%);color:#56708e;box-shadow:inset 0 0 0 1px #fff,0 1px 2px rgba(0,0,0,.2);font:bold 10px Arial;padding:0}.wmp-round:active{transform:translateY(1px);filter:brightness(.9)}.wmp-play{width:37px;height:37px;font-size:16px}.wmp-stop{width:28px;height:28px}.wmp-skip{width:27px;height:27px;font-size:8px}.wmp-footer-info{position:relative;z-index:2;display:flex;justify-content:space-between;gap:5px;min-height:18px;color:#4e5e73;font:9px Tahoma,Arial,sans-serif}.wmp-footer-info span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wmp-desktop-icon{image-rendering:auto}

/* mobile sizing: keep the mascot window framed, not auto-fullscreen */
@media(max-width:620px){
  :root{--xp-taskbar-h:32px}
  .taskbar{height:32px}.start-button{height:30px;align-self:flex-start}.quick-launch{display:none}.tray{min-width:116px;padding-right:4px}.tray-reference-icons{width:66px;flex-basis:66px;background-size:66px 23px;background-position:center}.tray #clock{min-width:43px;font-size:10px}.task-buttons{padding:2px 2px 3px}.task-button{min-width:68px;max-width:105px;height:27px;font-size:9px;padding:2px 4px}.task-button img,.task-button .task-css-icon{width:14px;height:14px;flex-basis:14px}
  .desktop-shortcuts{grid-template-rows:repeat(5,66px);grid-auto-columns:64px;gap:0 2px;max-height:calc(100% - 40px)}.desktop-shortcut{width:62px;height:64px;font-size:9px}.desktop-icon-img,.desktop-css-icon{width:33px;height:33px}.desktop-hanz-icon{width:44px;height:30px}
  .mascot-window{min-width:230px}.mascot-window-body{padding:4px;overflow:hidden}.mascot-window-image{max-height:100%;max-width:100%}.mascot-window .xp-statusbar{font-size:9px}
  .media-player-window{min-width:224px}.wmp-screen{min-height:120px}.wmp-skin{padding:5px 6px}.wmp-controls-row{height:44px}.wmp-volume{width:70px}
  .start-menu{max-height:calc(100vh - 34px)}.start-menu-body{max-height:calc(100vh - 128px)}
}
@media(max-width:390px){.tray{min-width:101px}.tray-reference-icons{width:53px;flex-basis:53px;background-size:61px 21px}.task-button{min-width:58px;max-width:88px}.desktop-shortcuts{grid-template-rows:repeat(5,62px);grid-auto-columns:60px}.desktop-shortcut{width:58px;height:60px}.start-menu-body{grid-template-columns:1fr 124px}.start-right-column button,.start-right-column a{font-size:9px;padding:3px 4px}}

/* ===== 2026-08 polish: consistent icons, reliable XP chrome, audio fallback ===== */
/* Every desktop shortcut owns the same icon box. Wide logos stay contained instead of changing layout. */
.desktop-shortcut .desktop-icon-img,
.desktop-shortcut .desktop-hanz-icon,
.desktop-shortcut .mine-desktop-icon,
.desktop-shortcut .social-desktop-icon,
.desktop-shortcut .wmp-desktop-icon{
  width:44px!important;
  height:44px!important;
  max-width:44px!important;
  max-height:44px!important;
  object-fit:contain!important;
  object-position:center!important;
  display:block;
}

/* Start menu and taskbar icon sizing is fixed regardless of the source PNG/SVG canvas. */
.start-program img,
.start-program img[src$="youtube-icon.svg"],
.start-program img[src$="herohero-icon.png"],
.start-program img[src$="patreon-icon.png"],
.featured-program img,
.featured-program img.wide-icon{
  width:28px!important;
  height:28px!important;
  min-width:28px!important;
  max-width:28px!important;
  min-height:28px!important;
  max-height:28px!important;
  object-fit:contain!important;
  object-position:center!important;
  flex:0 0 28px!important;
}
.featured-program{min-height:42px}
.quick-launch img{width:20px!important;height:20px!important;max-width:20px!important;max-height:20px!important;object-fit:contain!important}
.task-button img{width:16px!important;height:16px!important;max-width:16px!important;max-height:16px!important;object-fit:contain!important;flex:0 0 16px!important}

/* Explorer: external social artwork can have enormous intrinsic dimensions; never let it escape its XP icon cell. */
.explorer-item-icon{
  width:42px!important;
  height:38px!important;
  min-width:42px!important;
  max-width:42px!important;
  overflow:hidden!important;
  display:grid!important;
  place-items:center!important;
  flex:0 0 42px!important;
}
.explorer-item-icon>img,
.explorer-item-icon img{
  display:block!important;
  width:34px!important;
  height:34px!important;
  min-width:0!important;
  min-height:0!important;
  max-width:34px!important;
  max-height:34px!important;
  object-fit:contain!important;
  object-position:center!important;
}
.explorer-list-view .explorer-item-icon>img,
.explorer-list-view .explorer-item-icon img{width:27px!important;height:27px!important;max-width:27px!important;max-height:27px!important}

/* Windows Media Player uses exactly the same XP Luna window frame/titlebar/buttons as every other app. */
.media-player-window{
  min-width:238px;
  min-height:330px;
  border:3px solid #1256c6!important;
  border-radius:8px 8px 2px 2px!important;
  background:#ece9d8!important;
  box-shadow:0 18px 44px rgba(0,0,0,.36)!important;
}
.media-player-window.is-active-window{box-shadow:0 20px 48px rgba(0,0,0,.45)!important}
.media-player-window .xp-titlebar{height:30px!important;min-height:30px!important}
.media-player-window .xp-window-title img{width:18px!important;height:18px!important;object-fit:contain!important}
.media-player-window .xp-control{
  width:22px!important;
  height:22px!important;
  border:1px solid rgba(255,255,255,.95)!important;
  border-radius:3px!important;
  color:#fff!important;
  background:linear-gradient(180deg,#67a8ff,#2c70db)!important;
  box-shadow:inset 0 0 0 1px rgba(18,61,151,.55)!important;
  text-shadow:1px 1px rgba(0,0,0,.45)!important;
}
.media-player-window .xp-close{background:linear-gradient(180deg,#ff997f,#e64a2b 55%,#c92d13)!important}
.media-player-window .xp-minimize,.media-player-window .xp-maximize{background:linear-gradient(180deg,#67a8ff,#2c70db)!important}
.wmp-small-button.is-enabled{background:linear-gradient(#dff5cf,#8bc568);box-shadow:inset 0 0 0 1px #5e9442}

/* Browser autoplay fallback. It only appears when the browser actually blocks the startup MP3. */
.sound-unlock{
  position:fixed;
  z-index:150;
  right:12px;
  bottom:44px;
  border:1px solid #164aa2;
  border-radius:3px;
  padding:7px 10px;
  color:#fff;
  background:linear-gradient(180deg,#4d9bff,#1e64d8 55%,#174eb8);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 3px 12px rgba(0,0,0,.35);
  font:11px Tahoma,Arial,sans-serif;
  text-shadow:1px 1px #17458d;
}
.sound-unlock[hidden]{display:none!important}

/* Mobile: preserve the XP frame but use the available viewport efficiently. */
@media(max-width:620px){
  .desktop-shortcut .desktop-icon-img,
  .desktop-shortcut .desktop-hanz-icon,
  .desktop-shortcut .mine-desktop-icon,
  .desktop-shortcut .social-desktop-icon,
  .desktop-shortcut .wmp-desktop-icon{width:36px!important;height:36px!important;max-width:36px!important;max-height:36px!important}
  .explorer-item-icon{width:36px!important;height:34px!important;min-width:36px!important;max-width:36px!important;flex-basis:36px!important;transform:none!important}
  .explorer-item-icon>img,.explorer-item-icon img{width:30px!important;height:30px!important;max-width:30px!important;max-height:30px!important}
  .media-player-window{min-width:210px!important}
  .media-player-window .xp-titlebar{height:31px!important;min-height:31px!important}
  .wmp-screen{min-height:108px}
  .wmp-skin{padding:5px 6px 6px}
  .wmp-controls-row{height:42px;gap:5px}
  .wmp-volume{width:min(92px,28vw)}
  .sound-unlock{right:7px;bottom:42px;max-width:calc(100vw - 14px);font-size:10px}

  /* More usable taskbar at 320–620 px without losing the XP Start button. */
  .start-button{width:90px!important;min-width:90px!important;background-size:90px 28px!important;background-position:left top!important}
  .start-button:hover,.start-button:active,.start-button.is-open{background-size:90px 28px!important}
  .tray{min-width:88px!important;width:88px!important;padding-right:3px!important}
  .tray-reference-icons{width:43px!important;flex:0 0 43px!important;background-size:57px 20px!important;background-position:left center!important}
  .tray #clock{min-width:41px!important;font-size:9px!important}
  .task-button{min-width:56px!important;max-width:94px!important}
}
@media(max-width:390px){
  .start-button{width:83px!important;min-width:83px!important;background-size:83px 26px!important}
  .start-button:hover,.start-button:active,.start-button.is-open{background-size:83px 26px!important}
  .tray{min-width:66px!important;width:66px!important}
  .tray-reference-icons{display:none!important}
  .tray #clock{min-width:60px!important;font-size:9px!important}
  .task-button{min-width:50px!important;max-width:78px!important;padding-left:3px!important;padding-right:3px!important}
}