/* Four shell skins. App content and authentication are independent of the selected skin. */
:root[data-os]{--chrome:#d4d0c8;--paper:#fff;--sidebar:#efede8;--navy:#0a246a;--ink:#222;--muted:#626262;--line:#d4d0c8;--os-title:linear-gradient(90deg,#0a246a,#a6caf0);--os-inactive:linear-gradient(90deg,#808080,#c0c0c0);--os-font:Tahoma,Arial,sans-serif;--os-border:#404040;--desktop-ink:#fff;font-family:var(--os-font)}
:root[data-os="95"]{--chrome:#c0c0c0;--sidebar:#e8e8e8;--navy:#000080;--os-title:#000080;--os-inactive:#808080;--os-font:'MS Sans Serif',Tahoma,Arial,sans-serif}
:root[data-os="98"]{--chrome:#c0c0c0;--sidebar:#efefef;--navy:#000080;--os-title:linear-gradient(90deg,#000080,#1084d0);--os-inactive:linear-gradient(90deg,#808080,#b5b5b5);--os-font:'MS Sans Serif',Tahoma,Arial,sans-serif}
:root[data-os="xp"]{--chrome:#ece9d8;--sidebar:#d6dff7;--navy:#003cbb;--os-title:linear-gradient(#7ca9ff 0,#0865f3 10%,#0054e3 45%,#0051d6 80%,#1e69ea);--os-inactive:linear-gradient(#adc5f0,#7e9bd0);--os-border:#0054e3;--os-font:'Trebuchet MS',Tahoma,Arial,sans-serif}
:root[data-os] .classic-app{--chrome:inherit;--paper:inherit;--navy:inherit;--ink:inherit;font-family:Tahoma,Arial,sans-serif}
:root[data-os] .window{background:var(--chrome);border-color:var(--os-border);border-radius:0;box-shadow:inset 1px 1px #fff,inset -1px -1px #808080,2px 2px #0003}
:root[data-os] .titlebar,:root[data-os] .mini-window>span{background:var(--os-title);color:#fff;font-family:var(--os-font)}
:root[data-os].desktop-ready [data-window-id]:not(.is-focused)>.titlebar{background:var(--os-inactive);color:#f2f2f2}
:root[data-os] .window-title{font-family:var(--os-font);font-size:12px}:root[data-os] .window-controls>button,:root[data-os] .dialog-close{background:var(--chrome);color:#000;border:1px outset #eee;border-radius:0;box-shadow:inset 1px 1px #fff,inset -1px -1px #666}
:root[data-os] .taskbar{background:var(--chrome);box-shadow:0 -1px #808080;border-top:2px solid #fff;min-height:40px;padding:4px 6px;gap:5px;font-family:Tahoma,Arial,sans-serif}
:root[data-os] .task-button{background:var(--chrome);border-color:#fff #808080 #808080 #fff;box-shadow:inset 1px 1px #fff;font-family:Tahoma,Arial,sans-serif;color:#000;font-weight:normal;min-height:29px}
:root[data-os] .task-button.is-active{background:repeating-conic-gradient(#eee 0 25%,var(--chrome) 0 50%) 0/2px 2px;border-color:#808080 #fff #fff #808080;box-shadow:inset 1px 1px #666;font-weight:bold}
:root[data-os] .start-button{background:var(--chrome);border-color:#fff #404040 #404040 #fff;min-height:30px;color:#000;border-radius:0;box-shadow:inset 1px 1px #fff,inset -1px -1px #808080;padding:3px 8px;font:700 14px Tahoma,Arial,sans-serif}
:root[data-os] .start-button[aria-expanded=true]{border-style:inset;box-shadow:inset 1px 1px #555}
:root[data-os] .clock-tray,:root[data-os] .environment-button{background:var(--chrome);color:#000;border:1px solid;border-color:#808080 #fff #fff #808080;box-shadow:none;min-height:29px;font:11px Tahoma,Arial,sans-serif}
.environment-button{padding:3px 7px;flex-shrink:0;cursor:pointer}.environment-button:hover{outline:1px dotted currentColor;outline-offset:-4px}
:root[data-os] .start-menu{background:var(--chrome);bottom:40px;max-height:calc(100dvh - 50px);color:#000;width:258px}
:root[data-os] .start-menu>nav{min-width:0}:root[data-os] .start-brand{background:#808080;color:#fff;font:23px Tahoma,Arial,sans-serif;padding:12px 6px;gap:6px;white-space:nowrap}:root[data-os] .start-brand strong{font-weight:bold}:root[data-os] .start-brand>span{font-weight:normal;color:#fff}:root[data-os] .start-brand small{font-size:11px;letter-spacing:1px;margin-top:9px}
:root[data-os="98"] .start-brand{background:linear-gradient(#000080,#1084d0)}:root[data-os="2000"] .start-brand{background:linear-gradient(#26262e,#697384)}
:root[data-os] .classic-menu,:root[data-os] .start-submenu{background:var(--chrome);border-radius:0;color:#000}:root[data-os] .classic-menu button:hover:not(:disabled),:root[data-os] .classic-menu button:focus-visible,:root[data-os] .start-menu nav button:hover,:root[data-os] .start-menu nav button:focus-visible{background:var(--navy);color:#fff}
:root[data-os] .window-menubar,:root[data-os] .addressbar,:root[data-os] .window-statusbar{background:var(--chrome)}:root[data-os] .address-field{background:#fff;border-color:#808080}:root[data-os] .explorer-sidebar{background:var(--sidebar)}:root[data-os] .current-note{background:#efefef;color:#555}
:root[data-os] .folder-button.is-active{background:var(--navy);color:#fff}:root[data-os] .project-card{background:#fff;border-color:#c6c6c6}:root[data-os] .project-card h3,:root[data-os] .welcome h1{color:#232d39}:root[data-os] .desktop-shortcut.is-selected>span{background:var(--navy)}
:root[data-os] .classic-app .app-window-body,:root[data-os] .classic-app .bevel-button,:root[data-os] .classic-tabs>button,:root[data-os] .classic-tabs>span{background:var(--chrome)}:root[data-os] .classic-tabs>span{padding:7px 14px;border:1px outset #fff;border-bottom-color:var(--chrome);position:relative;top:1px}
:root[data-os] .window-statusbar>span{border-color:#9b9b9b #fff #fff #9b9b9b;color:#333}
:root[data-os][data-wallpaper-kind=image] body{background-image:var(--wall-image);background-color:var(--wall-color);background-size:var(--wall-size);background-position:var(--wall-position);background-repeat:no-repeat;background-attachment:fixed}
:root[data-os][data-wallpaper-kind=image][data-wallpaper-placement=tile] body{background-repeat:repeat}
:root[data-os][data-wallpaper-kind=image] .desktop-shortcut>span{background:#0004;color:white;text-shadow:1px 1px #000}
/* XP Luna: rounded window frames, glossy blue taskbar, green Start, two-column menu. */
:root[data-os=xp] :is(.main-window,.app-window,.detail-window){border:3px solid #0054e3;border-radius:8px 8px 0 0;padding:0;box-shadow:inset 0 0 0 1px #4389ff,3px 3px 5px #0004}
:root[data-os=xp] :is(.main-window,.app-window,.detail-window)>.titlebar{border-radius:5px 5px 0 0;min-height:31px;padding:3px 3px 4px 6px;border-bottom:1px solid #003cc4}
:root[data-os=xp] .window-title{font:700 13px 'Trebuchet MS',Tahoma,sans-serif;text-shadow:1px 1px #163779;gap:6px}
:root[data-os=xp] .window-controls>button,:root[data-os=xp] .dialog-close{width:24px;height:24px;color:#fff;background:linear-gradient(135deg,#83b0ff,#2167dd 65%,#0049c3);border:1px solid #fff;border-radius:3px;box-shadow:inset 1px 1px #b3ceff,inset -1px -1px #003bb1;text-shadow:1px 1px #134296;font-weight:bold;font-size:17px}
:root[data-os=xp] .window-controls>button:is([data-win-control=close],[data-action=close-projects]),:root[data-os=xp] .dialog-close{background:linear-gradient(135deg,#f4b49c,#d75234 55%,#b43215);box-shadow:inset 1px 1px #ffcbb3,inset -1px -1px #96220b;text-shadow:1px 1px #802910}
:root[data-os=xp] .window-controls>button:hover,:root[data-os=xp] .dialog-close:hover{filter:brightness(1.15)}
:root[data-os=xp].desktop-ready [data-window-id]:not(.is-focused){border-color:#789cd5}:root[data-os=xp].desktop-ready [data-window-id]:not(.is-focused)>.titlebar .window-controls{opacity:.7}
:root[data-os=xp] .taskbar{background:linear-gradient(#3168d5 0,#4993f5 8%,#245edb 18%,#2259d7 85%,#1746a4);border-top:1px solid #5095ee;box-shadow:none;min-height:38px;padding:0;gap:6px}
:root[data-os=xp] .start-button{align-self:stretch;border:none;min-height:38px;padding:2px 20px 2px 10px;border-radius:0 15px 15px 0;background:linear-gradient(#68ae6c,#3e933e 18%,#398d37 75%,#236c23);color:#fff;box-shadow:inset 0 2px 3px #a5dea1,inset -3px 0 5px #195f27;font:italic 700 20px 'Trebuchet MS',Tahoma,sans-serif;text-shadow:1px 2px #15531f}
:root[data-os=xp] .start-button:hover{filter:brightness(1.08)}:root[data-os=xp] .start-button[aria-expanded=true]{background:linear-gradient(#225d26,#377f2f);box-shadow:inset 2px 2px 4px #17451b}
:root[data-os=xp] .task-button{background:linear-gradient(#5a95f5,#3e7de4);color:#fff;border:1px solid #1353cf;border-radius:3px;box-shadow:inset 1px 1px #6d9df3;min-height:29px;margin:3px 0;text-shadow:1px 1px #1653b0}
:root[data-os=xp] .task-button.is-active{background:#1b51b8;box-shadow:inset 2px 2px 3px #123e92;border-color:#143e91;font-weight:normal}
:root[data-os=xp] .taskbar .clock-tray{background:linear-gradient(#36c1f0,#169bed 18%,#168ddd);color:#fff;border:0;border-left:1px solid #104bb1;box-shadow:inset 1px 1px #5ec4f3;align-self:stretch;border-radius:0;padding:3px 12px}
:root[data-os=xp] .environment-button{background:#235dcc;color:#fff;border:1px solid #154693;border-radius:3px;min-height:25px;padding:2px 6px}:root[data-os=xp] .task-separator{border-left-color:#164eae;border-right-color:#4c93ed}
:root[data-os=xp] .explorer-sidebar{background:linear-gradient(#7aa1e6,#c4d4f4);color:#17335f}:root[data-os=xp] .sidebar-title{color:#163770}:root[data-os=xp] .folder-nav{background:#e7effe;padding:6px;border:1px solid #f6f9ff;border-radius:3px}:root[data-os=xp] .folder-button{color:#17448c}:root[data-os=xp] .folder-button.is-active{background:#316ac5;color:#fff;border-color:transparent}:root[data-os=xp] .sidebar-note,:root[data-os=xp] .sidebar-links{border-color:#809ed4}
:root[data-os=xp] .classic-app .bevel-button,:root[data-os=xp] .bevel-button:not(.start-button){border:1px solid #003c74;border-radius:3px;background:linear-gradient(#fff,#ecebe6);box-shadow:inset -1px -2px #deddd4;color:#151515}
:root[data-os=xp] .bevel-button:not(.start-button):hover{box-shadow:inset 0 0 0 2px #e3bf74}:root[data-os=xp] .classic-tabs>button,:root[data-os=xp] .classic-tabs>span{border-radius:4px 4px 0 0;border:1px solid #919b9c;background:#fcfcfa;padding-top:8px}:root[data-os=xp] .classic-tabs .selected{border-top:3px solid #eac051;border-bottom-color:#ece9d8}
:root[data-os=xp] .classic-menu{background:#fff;border:1px solid #9c9c9c;box-shadow:2px 2px 4px #0004;padding:2px}:root[data-os=xp] .classic-menu button:hover:not(:disabled),:root[data-os=xp] .classic-menu button:focus-visible{background:#316ac5}
:root[data-os=xp] #start-menu{width:420px;left:0;bottom:38px;background:#fff;border:2px solid #1d57c4;border-radius:7px 7px 0 0;padding:0;box-shadow:2px 2px 5px #0005;max-width:calc(100vw - 4px)}
:root[data-os=xp] #start-menu>.start-brand{display:none}:root[data-os=xp] #start-menu>nav{padding:0;width:100%}
.xp-start-header{display:flex;align-items:center;gap:12px;padding:10px;background:linear-gradient(#2369cb,#4995e9);color:#fff;border-bottom:2px solid #edbd6c;border-radius:5px 5px 0 0;font:700 18px 'Trebuchet MS',Tahoma,sans-serif;text-shadow:1px 1px #2760a6}.xp-start-header>svg{width:42px;height:42px;border:2px solid #fff;border-radius:5px;padding:3px;background:#d7e6ff}.xp-start-header small{display:block;font:11px Tahoma,sans-serif;text-shadow:none;opacity:.9;margin-top:3px}
.xp-start-columns{display:grid;grid-template-columns:1fr 1fr;min-height:285px}.xp-start-left{padding:7px 4px;background:#fff;border-right:1px solid #90b3e4;min-width:0}.xp-start-right{padding:7px 4px;background:#d3e5fa;min-width:0}:root[data-os=xp] .xp-start-columns button{display:flex;align-items:center;gap:9px;padding:9px 7px;width:100%;text-align:left;background:transparent;font:12px Tahoma,sans-serif;color:#183352}:root[data-os=xp] .xp-start-columns button>span{flex:1;min-width:0}:root[data-os=xp] .xp-start-columns button:hover,:root[data-os=xp] .xp-start-columns button:focus-visible{background:#316ac5;color:#fff}:root[data-os=xp] .xp-start-right button{font-weight:bold}:root[data-os=xp] .xp-start-columns svg{width:25px;height:25px;flex-shrink:0}
.xp-start-footer{display:flex;justify-content:flex-end;gap:6px;padding:9px 6px;background:linear-gradient(#4c97eb,#2369d2);border-top:1px solid #74b2f5}:root[data-os=xp] .xp-start-footer button{display:flex;align-items:center;gap:5px;padding:5px;background:transparent;font:11px Tahoma,sans-serif;color:#fff}:root[data-os=xp] .xp-start-footer svg{width:23px;height:23px}
:root[data-os=xp] .start-submenu{background:#fff;border:2px solid #2d66c5;color:#000}:root[data-os=xp] .start-submenu button{color:#000;font-weight:normal}:root[data-os=xp] .xp-start-left>.start-group{margin-top:8px;border-top:1px solid #dadada}:root[data-os=xp] .start-parent>b{color:#2f9851;font-size:16px}
/* Version picker and per-version wallpaper previews. */
.version-selector{border:1px solid #969696;margin:18px 0;padding:12px;min-width:0}.version-selector legend{padding:0 6px;font-weight:bold}.version-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.version-option{background:var(--chrome);color:#111;border:1px solid #888;padding:8px;text-align:left;min-width:0}.version-option strong,.version-option small{display:block}.version-option strong{font:700 13px Tahoma,sans-serif;margin:7px 0 3px}.version-option small{font:10px/1.4 Tahoma,sans-serif}.version-option[aria-pressed=true]{outline:2px solid var(--navy);outline-offset:1px}.version-mini{display:block;height:88px;background:#008080;position:relative;overflow:hidden;border:1px inset #aaa}.version-mini>i{position:absolute;left:20%;top:18%;width:65%;height:65%;background:#c0c0c0;border:2px outset #ddd}.version-mini>i:before{content:'';position:absolute;inset:2px 2px auto;height:9px;background:navy}.version-mini>b{position:absolute;left:0;right:0;bottom:0;height:12px;background:#c0c0c0;border-top:1px solid #fff}.version-mini>b:before{content:'';position:absolute;left:3px;top:2px;width:20px;height:7px;border:1px outset #fff}
.version-mini[data-preview-os="98"]{background:#88b7d5 url('wallpapers/win98-clouds.jpg') center/cover}.version-mini[data-preview-os="98"]>i:before{background:linear-gradient(90deg,navy,#1084d0)}
.version-mini[data-preview-os="2000"]{background:#3a6ea5 url('wallpapers/win2000-paradise.jpg') center/cover}.version-mini[data-preview-os="2000"]>i,.version-mini[data-preview-os="2000"]>b{background:#d4d0c8}.version-mini[data-preview-os="2000"]>i:before{background:linear-gradient(90deg,#0a246a,#a6caf0)}
.version-mini[data-preview-os="xp"]{background:#3a78d2 url('wallpapers/winxp-bliss.jpg') center/cover}.version-mini[data-preview-os="xp"]>i{background:#ece9d8;border:2px solid #0054e3;border-radius:4px 4px 0 0}.version-mini[data-preview-os="xp"]>i:before{background:linear-gradient(#75a5ff,#0054e3);inset:0 0 auto;height:11px}.version-mini[data-preview-os="xp"]>b{background:#245edb;border-color:#63a5ff}.version-mini[data-preview-os="xp"]>b:before{background:#3c983b;border:none;height:11px;top:0;left:0;width:29px;border-radius:0 6px 6px 0}
.environment-current{border:1px inset #ddd;background:#fff;padding:12px;margin:15px 0}.environment-current>strong,.environment-current>span{display:block}.environment-current>strong{font:700 18px Tahoma,sans-serif}.environment-current>span{font:11px Tahoma,sans-serif;color:#555;margin-top:3px}.environment-current p{font:12px/1.7 Tahoma,sans-serif;margin-bottom:0}.environment-properties>h2{margin:12px 0}.display-version-label{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:15px 0 5px;font:12px Tahoma,sans-serif}.display-version-label select{font:12px Tahoma,sans-serif;background:#fff;padding:6px;border:2px inset #ddd;max-width:100%}.wallpaper-group h3{font:700 12px Tahoma,sans-serif;border-bottom:1px solid #b0b0b0;padding-bottom:7px;margin-top:22px}.wallpaper-option>small{display:block;font-size:9px;color:#555;padding-top:3px}.wallpaper-monitor{background-repeat:no-repeat;background-color:var(--wall-color);height:175px}.wallpaper-swatch{background-repeat:no-repeat}.wallpaper-group .wallpaper-options{margin:10px 0 22px}.mini-window>span b{font-weight:normal}.environment-properties .version-options{max-width:650px}
:root[data-os=xp] .version-option{background:#fff;border-color:#8b9db3;border-radius:4px}:root[data-os=xp] .version-option[aria-pressed=true]{outline-color:#e8ab25;box-shadow:inset 0 0 0 1px #f4d471}
:root[data-os=xp] .mini-window{border:2px solid #0054e3;border-radius:4px 4px 0 0}:root[data-os=xp] .mini-window>span{background:var(--os-title)}
@media(max-width:820px){:root[data-os] .taskbar{min-height:45px}:root[data-os] .start-menu{bottom:45px;max-height:calc(100dvh - 55px);overflow:auto}:root[data-os=xp] .start-menu{bottom:45px}:root[data-os=xp] .taskbar{min-height:44px}:root[data-os=xp] .start-button{font-size:17px;padding:3px 12px 3px 7px;min-height:44px}:root[data-os=xp] .taskbar .clock-tray{padding:3px 7px}:root[data-os] .environment-button{font-size:10px;padding:2px 5px}.version-options{gap:8px}.version-selector{padding:9px}.version-mini{height:68px}.version-option{padding:6px}.version-option strong{font-size:12px}.version-option small{font-size:9px}.xp-start-columns{min-height:0}.xp-start-left,.xp-start-right{padding:4px 2px}:root[data-os=xp] .xp-start-columns button{padding:7px 4px;gap:6px;font-size:11px;white-space:normal}:root[data-os=xp] .xp-start-columns svg{width:20px;height:20px}.xp-start-header{font-size:16px;padding:7px}.xp-start-footer{padding:5px;gap:3px}.xp-start-footer button{font-size:10px}.environment-properties .accessory-note{margin:10px 0}:root[data-os] .start-submenu{max-width:100%;margin-left:0}}
@media(max-width:400px){.display-version-label{gap:7px}.display-version-label .bevel-button{padding:5px 8px;min-height:28px}:root[data-os=xp] .start-button>svg{width:19px;height:19px}:root[data-os] .task-list .task-button{min-width:90px;flex-basis:104px}.version-option small{min-height:25px}.version-selector{margin:12px 0}.xp-start-right .program-caption{font-size:10px}}
@media print{:root[data-os] .environment-button{display:none!important}:root[data-os] .main-window{border:0;border-radius:0;box-shadow:none}}

:root[data-os="2000"][data-wallpaper="win2000-paradise"]{--wall-color:#3a6ea5;--wall-image:url("wallpapers/win2000-paradise.jpg");--wall-size:cover;--wall-position:center}

@media(max-width:820px){:root[data-os=xp] #start-menu{max-width:calc(100% - 4px)}}