/* =========================================================
   $HTTP — HTTP for Money
   Windows XP (Luna) desktop, built from the memes.
   ========================================================= */

:root{
  /* Luna chrome */
  --face:      #ece9d8;   /* window face */
  --face-2:    #f5f4ea;
  --frame:     #0050d8;   /* window frame blue */
  --title-a:   #0a62e8;
  --title-b:   #3f97f6;
  --title-c:   #0d55d6;
  --title-d:   #0a3fb0;
  --sunken:    #ffffff;
  --shadow-in: #7f9db9;

  --ink:       #101010;
  --ink-2:     #3b3b3b;
  --ink-3:     #6a6a6a;
  --link:      #0645ad;

  --bar-a:     #3f8cf3;
  --bar-b:     #245edc;
  --bar-c:     #1941a5;
  --start-a:   #5eba2f;
  --start-b:   #3c9b1e;
  --start-c:   #2a7d10;

  --hl:        #316ac5;   /* selection blue */
  --green:     #1f8b2a;
  --red:       #c4231c;
  --gold:      #ffd34d;

  --ui: Tahoma, Verdana, Geneva, "DejaVu Sans", sans-serif;
  --px: "Press Start 2P", "Courier New", monospace;
  --mono: "Lucida Console", "DejaVu Sans Mono", Consolas, monospace;

  --wrap: 1120px;
  --tb: 40px;            /* taskbar height */
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  scroll-padding-top:16px;
  -webkit-text-size-adjust:100%;
}
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  padding:22px 18px calc(var(--tb) + 26px);
  font-family:var(--ui);
  font-size:13px;
  line-height:1.55;
  color:var(--ink);
  background:
    radial-gradient(150% 52% at 50% 122%, #6fae43 0 56%, rgba(111,174,67,0) 57%),
    radial-gradient(58% 26% at 22% 26%, rgba(255,255,255,.55), transparent 72%),
    radial-gradient(44% 20% at 76% 15%, rgba(255,255,255,.45), transparent 72%),
    radial-gradient(38% 16% at 52% 40%, rgba(255,255,255,.34), transparent 72%),
    linear-gradient(180deg,#1d58a6 0%,#3a7cc4 22%,#78b2e3 50%,#a9d0ee 70%,#c5e1f5 100%);
  background-attachment:fixed;
  background-repeat:no-repeat;
  overflow-x:clip;
}

img{ max-width:100%; display:block; }
a{ color:var(--link); }
::selection{ background:var(--hl); color:#fff; }
:focus-visible{ outline:1px dotted #000; outline-offset:2px; }

.sprite{ position:absolute; width:0; height:0; overflow:hidden; }
svg{ width:16px; height:16px; }
.ic-x{ color:#101010; }
.ic-x--sm{ width:12px; height:12px; }

/* =========================================================
   DESKTOP ICONS
   ========================================================= */
.icons{
  position:fixed; left:14px; top:18px; z-index:20;
  list-style:none; margin:0; padding:0;
  display:grid; gap:4px; width:82px;
}
.icons a{
  display:block; padding:5px 3px 6px; text-decoration:none;
  text-align:center; color:#fff; font-size:11px; line-height:1.25;
  text-shadow:1px 1px 2px rgba(0,0,0,.85);
  border:1px solid transparent; border-radius:2px;
}
.icons a:hover{ background:rgba(49,106,197,.4); border-color:rgba(255,255,255,.35); }
.icons__img{ display:grid; place-items:center; height:34px; }
.icons__img svg{ width:30px; height:30px; }
.icons__l{ display:block; margin-top:3px; word-break:break-word; }
@media (max-width:1240px){ .icons{ display:none; } }

/* =========================================================
   WINDOW SHELL
   ========================================================= */
.stage{
  max-width:var(--wrap); margin-inline:auto;
  display:grid; grid-template-columns:minmax(0,1fr); gap:26px;
}
@media (min-width:1241px){ .stage{ margin-left:max(112px, calc(50% - var(--wrap)/2)); } }

.win{
  min-width:0;
  background:var(--frame);
  border:1px solid #003fb0;
  border-radius:8px 8px 3px 3px;
  padding:0 3px 3px;
  box-shadow:0 8px 26px rgba(0,0,0,.45);
  scroll-margin-top:14px;
}

.win__bar{
  display:flex; align-items:center; gap:6px;
  height:30px; padding:0 3px 0 6px;
  border-radius:6px 6px 0 0;
  background:linear-gradient(180deg,
    var(--title-a) 0%, var(--title-b) 8%, var(--title-a) 14%,
    var(--title-c) 52%, var(--title-d) 92%, #1a5fd0 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45);
}
.win__ico{ width:16px; height:16px; flex:0 0 auto; }
.win__title{
  flex:1 1 auto; min-width:0; color:#fff; font-size:12.5px; font-weight:700;
  text-shadow:1px 1px 1px rgba(0,0,0,.55);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.win__btns{ display:flex; gap:2px; flex:0 0 auto; }
.win__btns button{
  width:21px; height:21px; display:grid; place-items:center; cursor:pointer;
  font-family:var(--ui); font-size:10px; font-weight:700; color:#fff; line-height:1;
  background:linear-gradient(180deg,#5aa4f4,#2f79e0 46%,#1d5cc4);
  border:1px solid #14459c; border-radius:3px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55);
  padding:0;
}
.win__btns button:hover{ background:linear-gradient(180deg,#7dbcfb,#4a92ec 46%,#2a6ad2); }
.win__btns .cls{ background:linear-gradient(180deg,#f08b6e,#dc4a26 46%,#bb2f12); border-color:#96260c; }
.win__btns .cls:hover{ background:linear-gradient(180deg,#f7a68d,#e86040 46%,#cc3d1d); }
.win__btns .dis{ opacity:.55; cursor:default; }

.win__menu{
  display:flex; gap:2px; padding:3px 4px;
  background:var(--face); border-bottom:1px solid #d8d4c2;
  font-size:12px; color:var(--ink);
}
.win__menu span{ padding:2px 8px; border-radius:2px; }
.win__menu span:hover{ background:var(--hl); color:#fff; }

.win__tools{
  display:flex; align-items:center; gap:3px; padding:4px 6px;
  background:linear-gradient(180deg,#faf9f4,#ece9d8);
  border-bottom:1px solid #d8d4c2;
  font-size:12px;
}
.tool{
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 8px; border:1px solid transparent; border-radius:3px; color:var(--ink);
}
.tool:hover{ border-color:#b6c8e4; background:#e4eefb; }
.tool.dis{ color:#9a9a92; }
.arw{ width:14px; height:14px; border-radius:99px; display:inline-block; }
.arw--b{ background:radial-gradient(circle at 35% 30%,#7ee06a,#1f8b2a); }
.arw--f{ background:radial-gradient(circle at 35% 30%,#d8d8d0,#9a9a92); }

.win__addr{
  display:flex; align-items:center; gap:7px; padding:4px 6px;
  background:var(--face); border-bottom:1px solid #d8d4c2;
  font-size:12px;
}
.win__addr label{ color:var(--ink-2); flex:0 0 auto; }
.addr{
  flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:5px;
  background:#fff; border:1px solid var(--shadow-in); padding:2px 5px;
  box-shadow:inset 1px 1px 0 rgba(0,0,0,.14);
}
.addr__ico{ flex:0 0 auto; }
.addr input{
  flex:1 1 auto; min-width:0; border:0; outline:0; background:transparent;
  font-family:var(--ui); font-size:12px; color:var(--ink); padding:1px 0;
}
.go{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:5px;
  padding:2px 9px; font-size:12px; color:var(--ink);
}
.go::before{
  content:""; width:15px; height:15px; border-radius:99px;
  background:radial-gradient(circle at 35% 30%,#7ee06a,#1f8b2a);
}

.win__body{ min-width:0; background:var(--face); padding:16px 18px 18px; }
.win--ie .win__body,
.win--ie .explorer{ background:#fff; }

.win__status{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:3px 6px; background:var(--face); border-top:1px solid #fff;
  font-size:11.5px; color:var(--ink-2);
}
.win__status-l,.win__status-r{
  display:inline-flex; align-items:center; gap:5px;
  border:1px solid #d8d4c2; border-top-color:#bdb9a6; border-left-color:#bdb9a6;
  padding:1px 8px; background:var(--face);
}
.st-ico{ width:13px; height:13px; }

/* minimized state */
.win--min{ padding-bottom:0; border-radius:8px; }
.win--min .win__bar{ border-radius:6px; }
.win--min > *:not(.win__bar){ display:none; }

/* dialogs */
.win--dlg{ max-width:660px; }
.win--dlg .win__body{ background:var(--face); }

/* =========================================================
   XP CONTROLS
   ========================================================= */
.xbtn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  min-width:86px; height:26px; padding:0 14px; cursor:pointer;
  font-family:var(--ui); font-size:12.5px; color:var(--ink); text-decoration:none;
  background:linear-gradient(180deg,#fdfdfc 0%,#f2f0e4 44%,#e3dfcc 45%,#f3f1e6 100%);
  border:1px solid #8e8b74; border-radius:3px;
  box-shadow:inset 0 0 0 1px #fff;
}
.xbtn:hover{ border-color:#e8a200; box-shadow:inset 0 0 0 1px #fff, 0 0 4px rgba(255,190,60,.7); }
.xbtn:active{ background:linear-gradient(180deg,#dedac6,#eeebdd); }
.xbtn--go{
  color:#fff; font-weight:700;
  background:linear-gradient(180deg,#8fd86a 0%,#57b52f 44%,#3f9c1c 45%,#6cc242 100%);
  border-color:#2d7a12;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5);
}
.xbtn--go:hover{ background:linear-gradient(180deg,#a5e382,#66c53c 44%,#4dab26 45%,#7ed055); }
.xbtn.done{ background:linear-gradient(180deg,#8fd86a,#57b52f 44%,#3f9c1c 45%,#6cc242); color:#fff; border-color:#2d7a12; }

.xin{
  width:100%; min-width:0; height:26px; padding:0 8px;
  font-family:var(--mono); font-size:12.5px; color:var(--ink);
  background:#fff; border:1px solid var(--shadow-in);
  box-shadow:inset 1px 1px 0 rgba(0,0,0,.14);
  border-radius:0;
}

.box{
  margin:16px 0 0; padding:14px 16px 16px;
  border:1px solid #d5d2c0; border-top-color:#fff; border-left-color:#fff;
  background:transparent;
}
.box > legend{ padding:0 6px; font-size:12px; font-weight:700; color:#0a3a78; }

.rows{ margin:0; display:grid; }
.rows > div{
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding:6px 0; border-bottom:1px dotted #c9c5b2; font-size:12.5px;
}
.rows > div:last-child{ border-bottom:0; }
.rows dt{ color:var(--ink-2); }
.rows dd{ margin:0; font-weight:700; text-align:right; }
.rows .bad{ color:var(--red); }
.rows .good{ color:var(--green); }

/* =========================================================
   HERO (inside the IE window)
   ========================================================= */
.ie__page{ padding:22px 24px 24px; }
.hero{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,340px);
  gap:26px; align-items:start;
}

.wordmark{
  margin:0; font-family:var(--px);
  font-size:clamp(30px,6.4vw,58px); line-height:1.1; letter-spacing:-.01em;
  color:#1b4fd8;
  text-shadow:3px 3px 0 #a9c4f5, 5px 5px 0 rgba(0,0,0,.14);
}
.hero__name{
  margin:16px 0 0; font-family:var(--px);
  font-size:clamp(12px,2.2vw,17px); line-height:1.5; color:#101010;
}
.hero__slogan{
  margin:12px 0 0; display:flex; align-items:center; gap:.3em; flex-wrap:wrap;
  font-size:15px; color:var(--ink-2);
}
.pbadge{
  display:inline-grid; place-items:center; width:1.05em; height:1.05em;
  background:#1b4fd8; color:#fff; border-radius:2px;
  font-family:var(--px); font-size:.72em; line-height:1;
  box-shadow:0 0 0 1px #0a3a78;
}
.hero__lede{ margin:16px 0 0; max-width:54ch; font-size:13.5px; color:var(--ink-2); }
.hero__lede b{ color:#0a3a78; }

.field{ margin-top:20px; max-width:480px; }
.field label{ display:block; margin-bottom:5px; font-size:12px; color:var(--ink-2); }
.field__row{ display:flex; gap:6px; }
.field__row .xin{ flex:1 1 auto; }
.field__row .xbtn{ flex:0 0 auto; min-width:74px; }

.hero__cta{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.hero__cta .xbtn{ height:30px; font-size:13px; }

.load{ margin-top:22px; max-width:420px; }
.load p{ margin:0; font-size:12.5px; color:var(--ink-2); }
.load__sub{ margin-top:5px !important; color:var(--ink-3); font-size:11.5px; }
.bar{
  margin:7px 0 0; height:18px; padding:2px;
  background:#fff; border:1px solid var(--shadow-in);
  box-shadow:inset 1px 1px 0 rgba(0,0,0,.14);
}
.bar i{
  display:block; height:100%; width:99%;
  background:repeating-linear-gradient(90deg,
    #2fbe2f 0 11px, #24a524 11px 12px, transparent 12px 15px);
}

.hero__art{ margin:0; }
.hero__art img{
  width:100%; height:auto;
  border:1px solid var(--shadow-in);
  box-shadow:inset 1px 1px 0 rgba(0,0,0,.14), 0 3px 10px rgba(0,0,0,.2);
}
.hero__art figcaption{ margin-top:7px; text-align:center; font-size:11.5px; color:var(--ink-3); }

.banner{ margin-top:26px; border:1px solid var(--shadow-in); line-height:0; }
.banner img{ width:100%; height:auto; }

/* =========================================================
   EXPLORER / MEMES
   ========================================================= */
.explorer{ display:grid; grid-template-columns:186px minmax(0,1fr); gap:0; padding:0; }
.pane{
  background:linear-gradient(180deg,#7ba4db,#6375d6 46%,#5a83d8);
  padding:12px 10px; display:grid; gap:10px; align-content:start;
}
.pane__box{ background:#f1f5fd; border-radius:4px; padding:9px 11px; }
.pane__box h3{
  margin:0 0 6px; font-size:12px; color:#0a3a78;
}
.pane__box ul{ margin:0; padding:0; list-style:none; display:grid; gap:4px; }
.pane__box li{ font-size:11.5px; color:#2a4a86; }
.pane__box p{ margin:0 0 6px; font-size:11.5px; color:#3b3b3b; }
.pane__box p:last-child{ margin-bottom:0; }

.grid{
  padding:14px; background:#fff;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(148px,1fr)); gap:10px;
  align-content:start;
}
.thumb{
  display:grid; gap:6px; padding:7px 6px 8px; cursor:pointer;
  background:transparent; border:1px solid transparent; border-radius:3px;
  font-family:var(--ui); text-align:center;
}
.thumb:hover{ background:#eaf1fc; border-color:#b6c8e4; }
.thumb img{
  width:100%; height:auto; aspect-ratio:1/1; object-fit:cover;
  border:1px solid #9a9a92; background:#fff;
}
.thumb span{ font-size:11.5px; color:var(--ink); line-height:1.35; }
.thumb:hover span{ color:#0a3a78; }

/* =========================================================
   402 ERROR PAGE
   ========================================================= */
.err{ padding:24px 26px 26px; }
.err__head{ display:flex; gap:16px; align-items:flex-start; }
.err__ico{ width:44px; height:44px; flex:0 0 auto; margin-top:4px; }
.err__code{
  margin:0; font-family:var(--px); font-size:clamp(34px,7vw,64px); line-height:1;
  color:#101010;
}
.err__msg{
  margin:10px 0 0; font-family:var(--px); font-size:clamp(13px,2.4vw,20px); color:#101010;
}
.err__sub{ margin:12px 0 0; font-size:14px; color:var(--ink-2); }
.err hr{ margin:18px 0; border:0; border-top:1px solid #c9c5b2; }

.err__cols{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:28px; }
.err__list{ margin:0; padding-left:20px; display:grid; gap:12px; font-size:13px; color:var(--ink-2); }
.err__body p{ margin:0 0 12px; font-size:13.5px; color:var(--ink-2); }
.err__body p:last-child{ margin-bottom:0; }
.err__body b{ color:#101010; }
.err__body i{ background:var(--gold); font-style:italic; padding:0 3px; }

.infobar{
  margin:20px 0 0; padding:10px 14px;
  display:flex; align-items:center; gap:12px;
  background:#ffffd0; border:1px solid #c9b96a;
}
.infobar__ico{ width:20px; height:20px; flex:0 0 auto; }
.infobar p{ margin:0; font-size:13px; font-weight:700; color:#3a2b00; }

.box--receipt .rows > div{ font-size:13px; }

/* =========================================================
   NOTEPAD / LORE
   ========================================================= */
.note{ padding:20px 24px 24px; }
.note__h{ margin:0; font-family:var(--px); font-size:clamp(13px,2.6vw,19px); line-height:1.5; }
.note__p{ margin:14px 0 0; max-width:66ch; font-size:13.5px; color:var(--ink-2); }

.quote{
  margin:0; font-size:15px; line-height:1.6; color:#101010;
  border-left:3px solid #1b4fd8; padding-left:14px;
}
.quote mark{ background:var(--gold); color:#101010; padding:0 3px; }
.quote__by{ display:flex; align-items:center; gap:11px; margin:14px 0 0; font-size:12px; color:var(--ink-2); }
.quote__by img{ width:34px; height:34px; border:1px solid #9a9a92; }

.tl{ list-style:none; margin:0; padding:0; display:grid; gap:2px; }
.tl li{
  display:grid; grid-template-columns:62px minmax(0,1fr); gap:14px;
  padding:9px 8px; align-items:start;
}
.tl li:nth-child(odd){ background:#f6f5ee; }
.tl li > span{ font-family:var(--px); font-size:11px; color:#1b4fd8; padding-top:2px; }
.tl b{ display:block; font-size:13px; }
.tl p{ margin:3px 0 0; font-size:12.5px; color:var(--ink-2); }
.tl--now{ background:#e6f3e0 !important; }
.tl--now > span{ color:var(--green); }

/* =========================================================
   PROPERTIES DIALOG
   ========================================================= */
.tabs{ display:flex; gap:2px; padding:6px 8px 0; background:var(--face); }
.tabs__t{
  padding:4px 14px; font-size:12px; color:var(--ink-2);
  background:linear-gradient(180deg,#f3f1e6,#e2dece);
  border:1px solid #b5b19c; border-bottom:0; border-radius:4px 4px 0 0;
}
.tabs__t--on{ background:var(--face); color:var(--ink); font-weight:700; padding-bottom:6px; margin-bottom:-2px; }

.props{ padding:18px 20px 20px; }
.props__top{ display:flex; gap:16px; align-items:flex-start; }
.props__top img{ width:64px; height:64px; border:1px solid #9a9a92; flex:0 0 auto; }
.props__top h2{ margin:0 0 6px; font-size:15px; }
.props__top p{ margin:0; font-size:13px; color:var(--ink-2); max-width:56ch; }
.props__reg{ margin:0; font-size:12.5px; color:var(--ink-2); }

.dlg__btns{ display:flex; gap:8px; justify-content:flex-end; margin-top:18px; }

/* =========================================================
   HELP / FAQ
   ========================================================= */
.help{ padding:20px 24px 24px; }
.help__h{ margin:0 0 14px; font-size:15px; color:#0a3a78; }
.faq{ display:grid; gap:4px; max-width:820px; }
.faq details{ border:1px solid #d5d2c0; background:#fff; }
.faq summary{
  list-style:none; cursor:pointer; position:relative;
  padding:9px 14px 9px 34px; font-size:13px; font-weight:700; color:#0a3a78;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::before{
  content:"?"; position:absolute; left:11px; top:50%; translate:0 -50%;
  display:grid; place-items:center; width:16px; height:16px;
  background:#2d6fd4; color:#fff; border-radius:99px;
  font-size:11px; font-weight:700;
}
.faq summary:hover{ background:#eaf1fc; }
.faq details[open] summary{ background:#eaf1fc; }
.faq details > div{ padding:0 14px 12px 34px; }
.faq p{ margin:0; font-size:13px; color:var(--ink-2); max-width:72ch; }

/* =========================================================
   WARNING DIALOG
   ========================================================= */
.dlg{ padding:20px 22px 18px; }
.dlg__row{ display:flex; gap:16px; align-items:flex-start; }
.dlg__ico{ width:34px; height:34px; flex:0 0 auto; margin-top:2px; }
.dlg p{ margin:0; font-size:12.5px; color:var(--ink-2); }
.dlg__links{ margin-top:12px !important; display:flex; flex-wrap:wrap; gap:8px; align-items:center; }

/* =========================================================
   PICTURE VIEWER
   ========================================================= */
.viewer{
  position:fixed; inset:0; z-index:200;
  background:rgba(4,20,52,.62);
  display:grid; place-items:center; padding:18px;
}
.viewer[hidden]{ display:none; }
.viewer__win{
  width:min(680px,100%);
  background:var(--frame); border:1px solid #003fb0; border-radius:8px 8px 3px 3px;
  padding:0 3px 3px; box-shadow:0 14px 44px rgba(0,0,0,.6);
}
.viewer__img{
  background:#3a3a3a; padding:10px;
  display:grid; place-items:center; max-height:min(66vh,560px); overflow:hidden;
}
.viewer__img img{ max-width:100%; max-height:min(64vh,540px); width:auto; height:auto; }
.viewer__bar{
  display:flex; align-items:center; justify-content:center; gap:14px;
  padding:7px; background:var(--face); font-size:12px; color:var(--ink-2);
}
.viewer__bar button{
  width:32px; height:24px; cursor:pointer; font-size:11px; color:var(--ink);
  background:linear-gradient(180deg,#fdfdfc,#f2f0e4 44%,#e3dfcc 45%,#f3f1e6);
  border:1px solid #8e8b74; border-radius:3px;
}
.viewer__bar button:hover{ border-color:#e8a200; }

/* =========================================================
   TASKBAR
   ========================================================= */
.taskbar{
  position:fixed; left:0; right:0; bottom:0; z-index:150;
  height:var(--tb); display:flex; align-items:center; gap:6px;
  padding-right:4px;
  background:linear-gradient(180deg,#4f9df7 0%,#3f8cf3 6%,#245edc 12%,#245edc 88%,#1941a5 96%,#2458c8 100%);
  border-top:1px solid #6ab3ff;
}
.start{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:7px;
  height:100%; padding:0 22px 2px 10px; cursor:pointer;
  font-family:var(--ui); font-size:16px; font-style:italic; font-weight:700; color:#fff;
  text-shadow:1px 1px 2px rgba(0,0,0,.6);
  background:linear-gradient(180deg,var(--start-a) 0%,var(--start-b) 46%,var(--start-c) 100%);
  border:0; border-radius:0 12px 12px 0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45);
}
.start:hover{ background:linear-gradient(180deg,#72cc41,#4aab27 46%,#348f16); }
.start__flag{
  width:19px; height:19px; flex:0 0 auto; border-radius:3px;
  background:
    linear-gradient(135deg,#f35325 0 50%,transparent 50%) 0 0/50% 50% no-repeat,
    linear-gradient(135deg,#81bc06 0 50%,transparent 50%) 100% 0/50% 50% no-repeat,
    linear-gradient(135deg,#05a6f0 0 50%,transparent 50%) 0 100%/50% 50% no-repeat,
    linear-gradient(135deg,#ffba08 0 50%,transparent 50%) 100% 100%/50% 50% no-repeat,
    #fff;
  transform:rotate(-8deg) skewX(-6deg);
}

.tasks{ flex:1 1 auto; min-width:0; display:flex; gap:3px; overflow:hidden; padding-left:4px; }
.tasks button{
  flex:0 1 158px; min-width:56px;
  display:inline-flex; align-items:center; gap:6px;
  height:26px; padding:0 9px; cursor:pointer;
  font-family:var(--ui); font-size:12px; color:#fff; text-align:left;
  background:linear-gradient(180deg,#4d92e8,#2e6fd0 48%,#1f56b4);
  border:1px solid #1a4694; border-radius:3px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3);
}
.tasks button span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tasks button svg{ flex:0 0 auto; }
.tasks button:hover{ background:linear-gradient(180deg,#6aa8f2,#3f83de 48%,#2a63c4); }
.tasks button.on{
  background:linear-gradient(180deg,#1b50b4,#2a66cc 48%,#3f83de);
  box-shadow:inset 1px 1px 3px rgba(0,0,0,.4);
}

.tray{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:9px;
  height:26px; padding:0 11px;
  background:linear-gradient(180deg,#22a0df,#1387cf 44%,#0f78c4);
  border-left:1px solid #1560a8;
  font-size:12px; color:#fff; text-shadow:1px 1px 1px rgba(0,0,0,.4);
}
.tray__ico{ width:14px; height:14px; }

/* start menu */
.startmenu{
  position:fixed; left:4px; bottom:calc(var(--tb) + 2px); z-index:160;
  width:248px; background:#fff;
  border:1px solid #0a3fb0; border-radius:8px 8px 0 0;
  box-shadow:0 -6px 26px rgba(0,0,0,.45); overflow:hidden;
}
.startmenu[hidden]{ display:none; }
.startmenu__top{
  display:flex; align-items:center; gap:10px; padding:8px 12px;
  background:linear-gradient(180deg,#1f6fdc,#0a4bb4);
  color:#fff; font-size:14px; font-weight:700; text-shadow:1px 1px 2px rgba(0,0,0,.5);
}
.startmenu__top img{ width:34px; height:34px; border:1px solid rgba(255,255,255,.55); border-radius:3px; }
.startmenu__list{ list-style:none; margin:0; padding:6px; display:grid; gap:1px; }
.startmenu__list button{
  width:100%; display:flex; align-items:center; gap:9px;
  padding:7px 9px; cursor:pointer; text-align:left;
  font-family:var(--ui); font-size:12.5px; color:var(--ink);
  background:none; border:0; border-radius:3px;
}
.startmenu__list button:hover{ background:var(--hl); color:#fff; }
.startmenu__foot{
  padding:8px 12px; background:linear-gradient(180deg,#2a7ae4,#0a4bb4);
  border-top:1px solid #0a3fb0;
}
.startmenu__foot a{
  display:inline-flex; align-items:center; gap:7px;
  color:#fff; font-size:12px; text-decoration:none;
}
.startmenu__foot a:hover{ text-decoration:underline; }
.startmenu__foot .ic-x{ color:#fff; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:980px){
  .hero{ grid-template-columns:minmax(0,1fr); }
  .hero__art{ max-width:340px; }
  .err__cols{ grid-template-columns:minmax(0,1fr); gap:18px; }
  .explorer{ grid-template-columns:minmax(0,1fr); }
  .pane{ display:none; }
}

@media (max-width:720px){
  body{ padding:12px 10px calc(var(--tb) + 18px); }
  .stage{ gap:18px; }
  .win__menu{ display:none; }
  .win__tools{ display:none; }
  .ie__page{ padding:16px 14px 18px; }
  .err{ padding:16px 14px 18px; }
  .note{ padding:16px 14px 18px; }
  .help{ padding:16px 14px 18px; }
  .props{ padding:14px 14px 18px; }
  .win__body{ padding:14px; }
  .grid{ grid-template-columns:repeat(auto-fill,minmax(124px,1fr)); gap:8px; padding:10px; }
  .field__row{ flex-wrap:wrap; }
  .xin{ font-size:11px; letter-spacing:-.2px; }
  .field__row .xin{ flex:1 1 100%; }
  .field__row .xbtn{ flex:1 1 auto; }
  .hero__cta .xbtn{ flex:1 1 auto; }
  .tl li{ grid-template-columns:minmax(0,1fr); gap:4px; }
  .win__addr label{ display:none; }
  .tray .clock{ display:none; }
  .start{ font-size:14px; padding:0 16px 2px 8px; }
  .err__head{ gap:10px; }
  .err__ico{ width:32px; height:32px; }
}

@media (max-width:620px){
  /* taskbar: icons only, so every window still has a button */
  .tasks{ gap:2px; padding-left:2px; }
  .tasks button{ flex:0 0 auto; min-width:0; width:30px; padding:0; justify-content:center; }
  .tasks button span{ display:none; }
  .start{ padding:0 14px 2px 7px; }
}

@media (max-width:420px){
  .win__status-l,.win__status-r{ font-size:10.5px; padding:1px 5px; }
  .tasks button{ width:28px; }
}