/* Keko's Home - Windows 98 theme */
:root{
  --desk:#008080;
  --face:#c0c0c0; --hi:#fff; --hi2:#dfdfdf; --sh:#808080; --dk:#000;
  --field:#fff; --text:#000; --muted:#404040;
  --link:#0000ee; --visited:#551a8b; --hover:#cc0000;
  --t1:#000080; --t2:#1084d0; --sel:#000080; --seltext:#fff;
  --folder:#ffd800;
}
:root[data-theme="dark"]{
  --desk:#06231f;
  --face:#3a3a3a; --hi:#707070; --hi2:#505050; --sh:#202020; --dk:#000;
  --field:#1b1b1b; --text:#e6e6e6; --muted:#a8a8a8;
  --link:#7db8ff; --visited:#c7a0ff; --hover:#ff8a8a;
  --t1:#0a0a4a; --t2:#2a5f9e; --sel:#2a5f9e; --seltext:#fff;
  --folder:#c9a800;
}

*{box-sizing:border-box}
[hidden]{display:none!important}
.is-hidden{display:none!important}
html{background:var(--desk)}
body{
  margin:0;padding:14px 14px 50px;min-height:100vh;
  font-family:Tahoma,"MS Sans Serif",Geneva,Verdana,sans-serif;
  font-size:13px;line-height:1.4;color:var(--text);background:var(--desk);
}
a{color:var(--link)} a:visited{color:var(--visited)} a:hover{color:var(--hover)}
a:focus-visible,button:focus-visible{outline:1px dotted currentColor;outline-offset:1px}

/* bevels */
.raised{background:var(--face);border:2px solid;border-color:var(--hi) var(--dk) var(--dk) var(--hi);
  box-shadow:inset -1px -1px var(--sh),inset 1px 1px var(--hi2)}
.sunken{background:var(--field);border:2px solid;border-color:var(--sh) var(--hi) var(--hi) var(--sh);
  box-shadow:inset 1px 1px var(--dk),inset -1px -1px var(--hi2)}
.btn{font:inherit;color:var(--text);background:var(--face);cursor:default;
  border:2px solid;border-color:var(--hi) var(--dk) var(--dk) var(--hi);
  box-shadow:inset -1px -1px var(--sh),inset 1px 1px var(--hi2)}
.btn:active,.btn.pressed{border-color:var(--dk) var(--hi) var(--hi) var(--dk);
  box-shadow:inset 1px 1px var(--sh),inset -1px -1px var(--hi2)}

/* window */
.window{max-width:800px;margin:0 auto;padding:3px}
.titlebar{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:3px 3px 3px 5px;color:#fff;font-weight:bold;user-select:none;
  background:linear-gradient(90deg,var(--t1),var(--t2))}
.ttl{display:flex;align-items:center;gap:5px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tico{flex:none;width:14px;height:14px;border-radius:50%;background:#1e6fe0;color:#fff;
  font:italic bold 11px/14px Georgia,serif;text-align:center;border:1px solid #fff}
.tbtns{display:flex;gap:2px;flex:none}
.tbtn{width:18px;height:16px;padding:0;font:bold 11px/1 Tahoma,sans-serif;display:flex;align-items:center;justify-content:center}
.tbtn:last-child{margin-left:2px}
.menubar{display:flex;gap:2px;padding:2px;margin:1px 0}
.menubar span{padding:1px 7px}
.menubar span:hover{background:var(--sel);color:var(--seltext)}
.addr{display:flex;align-items:center;gap:6px;padding:3px 4px;border-top:1px solid var(--sh);box-shadow:0 -1px var(--hi)}
.url{flex:1;min-width:0;padding:2px 6px;font:12px "Courier New",monospace;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.tool{padding:2px 10px;height:24px;flex:none}
.content{margin:3px;padding:14px 16px}

h1{font-size:22px;margin:0 0 10px}
.star{color:var(--sel)}
.dialog{display:flex;gap:12px;align-items:flex-start;padding:10px;margin:0 0 14px}
.dialog p{margin:0 0 6px}.dialog p:last-child{margin:0}
.ico{flex:none;width:32px;height:32px;border-radius:50%;background:#ffd800;border:2px solid #000;
  color:#000;font:bold 20px/28px Georgia,serif;text-align:center}
.dialog+script+fieldset,.dialog+*{margin-top:0}

fieldset{margin:0 0 14px;padding:8px 12px 10px;border:1px solid var(--sh);box-shadow:1px 1px 0 var(--hi),inset 1px 1px 0 var(--hi)}
legend{padding:0 6px;font-weight:bold}
.hint{display:block;margin:0 0 6px;color:var(--muted);font-size:12px}
h3{font-size:13px;margin:6px 0 2px}
.sep{border:0;border-top:1px solid var(--sh);border-bottom:1px solid var(--hi);margin:10px 0}
ul.links{margin:0;padding:0;list-style:none}
ul.links li{display:flex;gap:7px;align-items:flex-start;padding:2px 0}
ul.links img{flex:none;margin-top:2px;image-rendering:auto}
.desc{color:var(--muted)}
.foot{margin:0;color:var(--muted);font-size:12px}
.status{display:flex;gap:3px;margin:0 3px 3px;font-size:12px}
.status div{padding:2px 8px;border:1px solid;border-color:var(--sh) var(--hi) var(--hi) var(--sh)}
.status div:first-child{flex:1}

/* maximized */
.window.max{position:fixed;inset:0 0 34px 0;max-width:none;margin:0;z-index:10;display:flex;flex-direction:column}
.window.max .content{flex:1;min-height:0;overflow:auto}

/* desktop icon */
.icon{position:fixed;top:16px;left:16px;width:84px;padding:4px;display:flex;flex-direction:column;align-items:center;gap:4px;
  background:none;border:1px dotted transparent;color:#fff;font:12px Tahoma,sans-serif;cursor:default}
.icon:hover,.icon:focus-visible{border-color:#fff}
.icon .pic{width:32px;height:32px;border-radius:50%;background:#1e6fe0;border:2px solid #fff;color:#fff;font:italic bold 22px/28px Georgia,serif}
.icon .lbl{text-shadow:1px 1px #000;text-align:center}

/* taskbar */
.taskbar{position:fixed;left:0;right:0;bottom:0;height:34px;z-index:50;display:flex;align-items:center;gap:4px;padding:3px 4px;
  background:var(--face);border-top:2px solid var(--hi);box-shadow:0 -1px var(--hi2)}
.start{height:26px;padding:2px 10px;display:flex;align-items:center;gap:6px;font-weight:bold}
.logo{display:grid;grid-template-columns:7px 7px;gap:1px;transform:skew(-4deg)}
.logo i{display:block;width:7px;height:7px}
.logo i:nth-child(1){background:#f33}.logo i:nth-child(2){background:#3c3}
.logo i:nth-child(3){background:#36f}.logo i:nth-child(4){background:#fd0}
.vsep{width:2px;height:24px;border-left:1px solid var(--sh);border-right:1px solid var(--hi)}
.task{flex:0 1 190px;height:26px;padding:3px 8px;display:flex;align-items:center;gap:5px;overflow:hidden;white-space:nowrap;
  font:inherit;color:var(--text);cursor:default;
  background:var(--face);border:2px solid;border-color:var(--hi) var(--dk) var(--dk) var(--hi);box-shadow:inset -1px -1px var(--sh),inset 1px 1px var(--hi2)}
.task.active{font-weight:bold;
  background:repeating-conic-gradient(var(--hi) 0 25%,var(--face) 0 50%) 0 0/2px 2px;
  border-color:var(--dk) var(--hi) var(--hi) var(--dk);box-shadow:inset 1px 1px var(--sh)}
.tray{margin-left:auto;height:26px;padding:2px 10px;display:flex;align-items:center;gap:7px;font:12px Tahoma,sans-serif;color:var(--text);cursor:default;
  background:var(--face);border:1px solid;border-color:var(--sh) var(--hi) var(--hi) var(--sh)}
.tray:hover{background:var(--hi2)}

/* start menu */
.startmenu{position:fixed;left:2px;bottom:36px;z-index:60;display:flex;width:230px;padding:2px}
.startmenu .side{flex:none;width:28px;background:linear-gradient(0deg,var(--t2),var(--t1));display:flex;align-items:flex-end;justify-content:center;padding-bottom:6px}
.startmenu .side span{writing-mode:vertical-rl;transform:rotate(180deg);color:#fff;font-size:20px;font-weight:bold;letter-spacing:1px}
.startmenu .side b{font-weight:normal;margin-left:2px;color:#d0d0d0}
.items{flex:1;padding:2px 0;display:flex;flex-direction:column}
.item{display:block;width:100%;text-align:left;padding:7px 14px 7px 12px;background:none;border:0;font:inherit;color:var(--text);text-decoration:none;cursor:default}
.item:visited{color:var(--text)}
.item:hover,.item:focus-visible{background:var(--sel);color:var(--seltext);outline:none}
.msep{margin:3px 2px;border-top:1px solid var(--sh);border-bottom:1px solid var(--hi)}

/* shut down screen */
.shutdown{position:fixed;inset:0;z-index:100;background:#000;color:#ff9a00;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;font:20px/1.4 "Courier New",monospace;cursor:pointer}
.shutdown small{margin-top:24px;font-size:12px;color:#7a4c00}

@media (max-width:560px){
  body{padding:6px 6px 46px}
  .content{padding:10px}
  .task{display:none}
  .tool .tlabel{display:none}
  .tool::before{content:"\25D1"}
  .icon{top:8px;left:8px}
}
@media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} }