:root{
  --teal:#008080;
  --gray:#c0c0c0;
  --gray-d:#808080;
  --gray-dd:#404040;
  --white:#ffffff;
  --black:#000000;
  --navy:#000080;
  --inact:#7e7e7e;
  --yellow:#ffff80;
  --shadow-l:#dfdfdf;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--teal);
  font-family:"MS Sans Serif","Pixelated MS Sans Serif",Tahoma,Geneva,Verdana,sans-serif;
  font-size:12px;
  color:#000;
  overflow:hidden;
  user-select:none;
  cursor:default;
}
button,input,textarea{font-family:inherit;font-size:inherit}

/* ====== bevel helpers ====== */
.bevel-out{
  border-top:2px solid var(--white);
  border-left:2px solid var(--white);
  border-right:2px solid var(--gray-dd);
  border-bottom:2px solid var(--gray-dd);
}
.bevel-in{
  border-top:2px solid var(--gray-dd);
  border-left:2px solid var(--gray-dd);
  border-right:2px solid var(--white);
  border-bottom:2px solid var(--white);
}
.btn{
  background:var(--gray);
  border-top:2px solid var(--white);
  border-left:2px solid var(--white);
  border-right:2px solid var(--gray-dd);
  border-bottom:2px solid var(--gray-dd);
  padding:4px 12px;
  font:inherit;
  color:#000;
  min-width:75px;
  cursor:default;
}
.btn:active,.btn.pressed{
  border-top:2px solid var(--gray-dd);
  border-left:2px solid var(--gray-dd);
  border-right:2px solid var(--white);
  border-bottom:2px solid var(--white);
}
.btn:focus{outline:1px dotted #000;outline-offset:-4px}
.btn[disabled]{color:var(--gray-d)}

input[type=text],input[type=password],input[type=search],textarea,select{
  background:#fff;color:#000;padding:3px 4px;
  border-top:2px solid var(--gray-dd);
  border-left:2px solid var(--gray-dd);
  border-right:2px solid var(--white);
  border-bottom:2px solid var(--white);
}

/* ====== boot ====== */
#boot{
  position:fixed;inset:0;background:#000;color:#aaa;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-family:"Courier New",monospace;font-size:14px;z-index:10000;
}
#boot .logo{color:#fff;font-size:42px;letter-spacing:3px;margin-bottom:10px;font-weight:bold}
#boot .sub{color:#888;margin-bottom:40px}
#boot .bar{width:360px;height:18px;background:#111;border:1px solid #444;padding:2px}
#boot .bar > i{display:block;height:100%;width:0;background:linear-gradient(#0aa,#066);transition:width .15s}
#boot .pct{margin-top:10px;color:#0c0}

/* ====== login ====== */
#login{
  position:fixed;inset:0;background:var(--teal);
  display:flex;align-items:center;justify-content:center;z-index:9990;
}
#login .panel{
  background:var(--gray);width:360px;
  box-shadow:1px 1px 0 #000;
}
#login .titlebar{
  height:20px;background:linear-gradient(90deg,var(--navy),#1010a0);color:#fff;
  font-weight:bold;padding:0 6px;display:flex;align-items:center;
}
#login .body{padding:18px}
#login .body h2{margin:0 0 12px;font-size:14px;display:flex;gap:8px;align-items:center}
#login .row{display:flex;align-items:center;gap:8px;margin-bottom:10px}
#login .row label{width:90px}
#login .row input{flex:1}
#login .actions{display:flex;justify-content:flex-end;gap:6px;margin-top:14px}
#login .err{color:#a00;min-height:14px;font-size:11px;margin-top:4px}

/* ====== desktop ====== */
#desktop{
  position:fixed;inset:0;background:var(--teal);overflow:hidden;
  display:none;
}
#desktop.show{display:block}

#desktop.wp-hatch{
  background-color:#008080;
  background-image:
    linear-gradient(45deg,#0a9 25%,transparent 25%),
    linear-gradient(-45deg,#0a9 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,#0a9 75%),
    linear-gradient(-45deg,transparent 75%,#0a9 75%);
  background-size:8px 8px;
  background-position:0 0,0 4px,4px -4px,-4px 0;
}
#desktop.wp-purple{background:#4b0082}
#desktop.wp-maroon{background:#800000}
#desktop.wp-olive{background:#556b2f}
#desktop.wp-black{background:#0a0a0a}

#menubar{
  position:fixed;top:0;left:0;right:0;height:22px;
  background:var(--gray);
  display:flex;align-items:center;
  border-bottom:1px solid var(--gray-dd);
  z-index:9000;
  font-size:12px;
}
#menubar .m{padding:3px 10px;cursor:default}
#menubar .m u{text-decoration:underline}
#menubar .m:hover,#menubar .m.open{background:var(--navy);color:#fff}
#menubar .right{margin-left:auto;display:flex;align-items:center;gap:6px;padding-right:10px}
#menubar .right .who{color:#000;font-weight:bold}
#menubar .right .clock{font-family:"Courier New",monospace}

.dropdown{
  position:fixed;background:var(--gray);
  min-width:200px;padding:2px;z-index:9500;
  display:none;
  box-shadow:1px 1px 0 #000;
}
.dropdown.open{display:block}
.dropdown .item{padding:4px 24px;cursor:default;display:flex;justify-content:space-between;gap:20px}
.dropdown .item:hover{background:var(--navy);color:#fff}
.dropdown .sep{height:1px;background:var(--gray-d);margin:3px 4px;border-bottom:1px solid var(--white)}
.dropdown .item.disabled{color:var(--gray-d)}
.dropdown .item.disabled:hover{background:transparent;color:var(--gray-d)}

#ctxmenu{
  position:fixed;display:none;background:var(--gray);
  z-index:9800;min-width:160px;padding:2px;
  box-shadow:1px 1px 0 #000;
}
#ctxmenu.open{display:block}
#ctxmenu .item{padding:4px 16px;cursor:default;position:relative}
#ctxmenu .item:hover{background:var(--navy);color:#fff}
#ctxmenu .item.has-sub::after{content:"▶";position:absolute;right:6px;top:4px;font-size:10px}
#ctxmenu .submenu{
  position:absolute;left:100%;top:-2px;background:var(--gray);min-width:150px;padding:2px;
  display:none;
  box-shadow:1px 1px 0 #000;
}
#ctxmenu .item.has-sub:hover .submenu{display:block}
#ctxmenu .submenu .item{padding:4px 16px}

/* ====== window ====== */
.win{
  position:absolute;background:var(--gray);
  min-width:240px;min-height:140px;
  display:flex;flex-direction:column;
  box-shadow:1px 1px 0 #000;
}
.win.active .titlebar{background:linear-gradient(90deg,var(--navy),#1010a0);color:#fff}
.win .titlebar{
  height:20px;background:var(--inact);color:#fff;
  display:flex;align-items:center;
  padding:0 2px;font-weight:bold;
  cursor:move;flex:0 0 auto;
}
.win .titlebar .title{flex:1;padding:0 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.win .tb-btn{
  width:18px;height:16px;background:var(--gray);
  display:flex;align-items:center;justify-content:center;
  font-family:"Courier New",monospace;font-size:10px;font-weight:bold;color:#000;
  margin:0 1px;
  border-top:1px solid var(--white);
  border-left:1px solid var(--white);
  border-right:1px solid var(--gray-dd);
  border-bottom:1px solid var(--gray-dd);
  cursor:default;line-height:1;
}
.win .tb-btn:active{
  border-top:1px solid var(--gray-dd);
  border-left:1px solid var(--gray-dd);
  border-right:1px solid var(--white);
  border-bottom:1px solid var(--white);
}
.win .menubar-inner{
  height:20px;background:var(--gray);display:flex;align-items:center;
  border-bottom:1px solid var(--gray-d);font-size:12px;
}
.win .menubar-inner .m{padding:2px 8px;cursor:default}
.win .menubar-inner .m u{text-decoration:underline}
.win .menubar-inner .m:hover{background:var(--navy);color:#fff}
.win .body{flex:1;overflow:hidden;position:relative;background:var(--gray)}
.win .statusbar{
  height:20px;background:var(--gray);border-top:1px solid var(--white);
  display:flex;align-items:center;padding:0 6px;font-size:11px;gap:10px;
}
.resizer{
  position:absolute;right:0;bottom:0;width:14px;height:14px;cursor:nwse-resize;
  background:linear-gradient(135deg,transparent 50%,var(--gray-dd) 50%);
}

#taskbar{
  position:fixed;left:0;right:0;bottom:0;height:34px;
  display:flex;align-items:flex-end;gap:6px;padding:0 8px 4px;
  pointer-events:none;z-index:8500;
}
.min-icon{
  width:120px;height:30px;background:var(--gray);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;color:#000;
  pointer-events:auto;cursor:default;overflow:hidden;
  border-top:2px solid var(--white);
  border-left:2px solid var(--white);
  border-right:2px solid var(--gray-dd);
  border-bottom:2px solid var(--gray-dd);
}

/* ====== desktop icon grid ====== */
#desk-icons{
  position:fixed;left:14px;top:36px;
  display:flex;flex-direction:column;
  gap:6px;
  width:96px;
  z-index:10;
  pointer-events:auto;
}

/* ====== icons ====== */
.ico{
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  width:80px;padding:4px;color:#fff;text-align:center;line-height:1.1;
  cursor:default;
}
.ico .glyph{
  width:42px;height:42px;display:flex;align-items:center;justify-content:center;
  margin-bottom:4px;image-rendering:pixelated;
}
.ico.selected{background:rgba(0,0,128,.6);outline:1px dotted #fff}
.ico .lbl{padding:1px 3px;text-shadow:1px 1px 0 #000}
.ico.selected .lbl{background:var(--navy)}

.ic-px{
  width:42px;height:42px;background:#1f1;
  border:2px solid #000;border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  color:#000;font-weight:bold;font-size:24px;
  box-shadow:inset -2px -2px 0 #0a0,inset 2px 2px 0 #afa;
}
.ic-np{
  width:42px;height:42px;background:#fff;
  position:relative;border:1px solid #000;
}
.ic-np::before{content:"";position:absolute;left:4px;right:8px;top:6px;height:2px;background:#000;
  box-shadow:0 4px 0 #000,0 8px 0 #000,0 12px 0 #000,0 16px 0 #000,0 20px 0 #000,0 24px 0 #000}
.ic-np::after{content:"";position:absolute;right:0;top:0;border-left:8px solid transparent;border-bottom:8px solid var(--gray)}
.ic-ms{
  width:42px;height:42px;background:#c0c0c0;
  display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:1px;padding:4px;
  border-top:2px solid #fff;border-left:2px solid #fff;
  border-right:2px solid #404040;border-bottom:2px solid #404040;
}
.ic-ms i{background:#888}
.ic-ms i.bomb{background:#000;border-radius:50%}
.ic-dos{
  width:42px;height:42px;background:#000;color:#fff;
  border:2px solid #fff;display:flex;align-items:center;justify-content:flex-start;padding-left:4px;
  font-family:"Courier New",monospace;font-weight:bold;font-size:16px;
  box-shadow:inset -2px -2px 0 #888;
}
.ic-dos::after{content:"_";animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.ic-readme{
  width:42px;height:42px;background:#fff;border:1px solid #000;
  position:relative;font-size:9px;color:#000;padding:6px 4px;line-height:1.1;font-weight:bold;
}
.ic-calc{
  width:42px;height:42px;background:var(--gray);
  border-top:2px solid var(--white);border-left:2px solid var(--white);
  border-right:2px solid var(--gray-dd);border-bottom:2px solid var(--gray-dd);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-family:"Courier New",monospace;font-weight:bold;
}
.ic-calc::before{
  content:"123";display:block;background:#000;color:#0f0;
  font-size:9px;padding:1px 4px;margin-bottom:2px;letter-spacing:1px;
}
.ic-calc::after{content:"+ - ×";font-size:9px;color:#000}
.ic-clock{
  width:42px;height:42px;background:#fff;border-radius:50%;
  border:2px solid #000;position:relative;
}
.ic-clock::before{
  content:"";position:absolute;left:50%;top:50%;width:2px;height:14px;background:#000;
  transform-origin:top center;transform:translate(-50%,0);
}
.ic-clock::after{
  content:"";position:absolute;left:50%;top:50%;width:2px;height:10px;background:#000;
  transform-origin:top center;transform:translate(-50%,0) rotate(120deg);
}
.ic-notes{
  width:42px;height:42px;background:#ffff80;border:1px solid #000;
  position:relative;
}
.ic-notes::before{
  content:"";position:absolute;left:6px;right:6px;top:8px;height:2px;background:#000;
  box-shadow:0 5px 0 #000,0 10px 0 #000,0 15px 0 #000,0 20px 0 #000;
}
.ic-paint{
  width:42px;height:42px;background:#fff;border:1px solid #000;
  position:relative;overflow:hidden;
}
.ic-paint::before{
  content:"";position:absolute;left:6px;top:8px;width:30px;height:6px;
  background:linear-gradient(90deg,#f00 0%,#f00 25%,#0a0 25%,#0a0 50%,#00f 50%,#00f 75%,#fa0 75%);
}
.ic-paint::after{
  content:"✎";position:absolute;left:50%;top:55%;transform:translateX(-50%);
  font-size:18px;color:#000;
}
.ic-ai{
  width:42px;height:42px;background:#000;
  border:2px solid #0f0;
  display:flex;align-items:center;justify-content:center;
  color:#0f0;font-weight:bold;font-size:18px;
  font-family:"Courier New",monospace;
}
.ic-set{
  width:42px;height:42px;background:var(--gray);
  border-top:2px solid var(--white);border-left:2px solid var(--white);
  border-right:2px solid var(--gray-dd);border-bottom:2px solid var(--gray-dd);
  display:flex;align-items:center;justify-content:center;
  font-size:24px;
}

/* ====== program group windows ====== */
.group-body{
  padding:6px;background:var(--gray);
  height:100%;overflow:auto;
  display:grid;grid-template-columns:repeat(auto-fill,84px);grid-auto-rows:80px;
  gap:2px;align-content:start;
}
.ico-grp{color:#000}
.ico-grp .lbl{text-shadow:none;color:#000;background:transparent}
.ico-grp.selected{background:transparent;outline:none}
.ico-grp.selected .lbl{background:var(--navy);color:#fff;outline:1px dotted var(--navy)}

/* ====== app: AI ====== */
.ai-app{display:flex;height:100%;background:var(--gray)}
.ai-side{
  width:170px;border-right:1px solid var(--gray-d);background:#fff;
  display:flex;flex-direction:column;overflow:hidden;
  border-top:2px solid var(--gray-dd);border-left:2px solid var(--gray-dd);
  margin:4px 0 4px 4px;
}
.ai-side .new-btn{margin:4px;text-align:center;font-weight:bold}
.ai-side .list{flex:1;overflow:auto;font-size:11px}
.ai-side .conv{padding:6px 8px;cursor:default;border-bottom:1px solid #eee}
.ai-side .conv:hover{background:#cce}
.ai-side .conv.active{background:var(--navy);color:#fff}
.ai-side .conv .t{font-weight:bold;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ai-side .conv .d{font-size:10px;opacity:.7}
.ai-main{flex:1;display:flex;flex-direction:column;padding:4px}
.ai-msgs{
  flex:1;overflow:auto;background:#fff;padding:8px;
  border-top:2px solid var(--gray-dd);border-left:2px solid var(--gray-dd);
  border-right:2px solid var(--white);border-bottom:2px solid var(--white);
}
.ai-msg{margin:0 0 12px;padding:6px 8px;border-left:3px solid var(--navy)}
.ai-msg.user{background:#eef}
.ai-msg.assistant{background:#fafafa;border-left-color:#080}
.ai-msg .who{font-weight:bold;font-size:10px;text-transform:uppercase;color:#666;margin-bottom:2px}
.ai-msg .body{white-space:pre-wrap;word-wrap:break-word;line-height:1.4}
.ai-input{display:flex;gap:4px;margin-top:6px}
.ai-input textarea{
  flex:1;height:60px;resize:none;font-family:inherit;
  border-top:2px solid var(--gray-dd);border-left:2px solid var(--gray-dd);
  border-right:2px solid var(--white);border-bottom:2px solid var(--white);
}
.ai-input button{height:60px;min-width:80px;font-weight:bold}
.ai-meta{font-size:10px;color:#444;padding:0 2px;margin-top:2px}

/* ====== app: Notes ====== */
.notes-app{display:flex;height:100%;background:var(--gray)}
.notes-side{
  width:200px;border-right:1px solid var(--gray-d);
  display:flex;flex-direction:column;background:#fff;margin:4px 0 4px 4px;
  border-top:2px solid var(--gray-dd);border-left:2px solid var(--gray-dd);
  overflow:hidden;
}
.notes-side .top{display:flex;gap:2px;padding:3px;background:var(--gray);border-bottom:1px solid var(--gray-d)}
.notes-side .top button{flex:1;font-size:11px;padding:3px}
.notes-side .list{flex:1;overflow:auto}
.notes-side .item{padding:6px 8px;cursor:default;border-bottom:1px solid #eee}
.notes-side .item:hover{background:#dde}
.notes-side .item.active{background:var(--navy);color:#fff}
.notes-side .item .t{font-weight:bold;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.notes-side .item .p{font-size:10px;opacity:.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.notes-main{flex:1;display:flex;flex-direction:column;padding:4px;gap:4px}
.notes-main input.title{font-weight:bold;font-size:14px;padding:4px}
.notes-main textarea{
  flex:1;width:100%;padding:6px;
  font-family:"Courier New",monospace;font-size:13px;resize:none;
  border-top:2px solid var(--gray-dd);border-left:2px solid var(--gray-dd);
  border-right:2px solid var(--white);border-bottom:2px solid var(--white);
}
.notes-status{font-size:11px;color:#444;display:flex;justify-content:space-between;padding:0 2px}

/* ====== app: Paint ====== */
.paint-app{display:flex;flex-direction:column;height:100%;background:var(--gray)}
.paint-toolbar{
  display:flex;gap:3px;padding:3px;background:var(--gray);
  border-bottom:1px solid var(--gray-d);align-items:center;flex-wrap:wrap;
}
.paint-toolbar .tool{
  width:28px;height:28px;background:var(--gray);
  border-top:2px solid var(--white);border-left:2px solid var(--white);
  border-right:2px solid var(--gray-dd);border-bottom:2px solid var(--gray-dd);
  display:flex;align-items:center;justify-content:center;font-size:14px;cursor:default;
}
.paint-toolbar .tool.active,.paint-toolbar .tool:active{
  border-top:2px solid var(--gray-dd);border-left:2px solid var(--gray-dd);
  border-right:2px solid var(--white);border-bottom:2px solid var(--white);
  background:#a8a8a8;
}
.paint-toolbar .sep{width:1px;height:24px;background:var(--gray-d);margin:0 3px}
.paint-toolbar .swatches{display:flex;gap:1px;flex-wrap:wrap;max-width:180px}
.paint-toolbar .sw{width:14px;height:14px;border:1px solid #000;cursor:default}
.paint-toolbar .sw.active{outline:2px solid #fff;outline-offset:-1px}
.paint-toolbar input[type=range]{width:80px}
.paint-canvas-wrap{
  flex:1;background:#888;overflow:auto;display:flex;align-items:flex-start;justify-content:flex-start;padding:8px;
}
.paint-canvas-wrap canvas{
  background:#fff;cursor:crosshair;
  box-shadow:1px 1px 0 #000;
  image-rendering:pixelated;
}
.paint-side{
  width:160px;border-left:1px solid var(--gray-d);background:#fff;
  margin:4px 4px 4px 0;display:flex;flex-direction:column;overflow:hidden;
  border-top:2px solid var(--gray-dd);border-left:2px solid var(--gray-dd);
}
.paint-side .top{padding:3px;background:var(--gray);border-bottom:1px solid var(--gray-d);display:flex;gap:2px}
.paint-side .top button{flex:1;font-size:11px;padding:3px}
.paint-side .list{flex:1;overflow:auto;display:grid;grid-template-columns:repeat(2,1fr);gap:2px;padding:2px}
.paint-side .draw{padding:2px;cursor:default}
.paint-side .draw img{width:100%;height:60px;object-fit:cover;border:1px solid #000;background:#fff}
.paint-side .draw .t{font-size:10px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.paint-side .draw.active{background:var(--navy);color:#fff}
.paint-row{display:flex;align-items:center;gap:4px;padding:4px 6px;background:var(--gray);border-top:1px solid var(--white)}
.paint-row label{font-size:11px}

/* ====== app: Settings ====== */
.set-app{padding:14px;background:var(--gray);height:100%;overflow:auto}
.set-app .group{
  margin-bottom:14px;padding:10px;
  border-top:1px solid var(--white);border-left:1px solid var(--white);
  border-right:1px solid var(--gray-dd);border-bottom:1px solid var(--gray-dd);
}
.set-app .group h3{margin:0 0 8px;font-size:12px;font-weight:bold;border-bottom:1px solid var(--gray-d);padding-bottom:3px}
.set-app .row{display:flex;gap:8px;align-items:center;margin-bottom:6px}
.set-app .row label{width:140px}
.set-app .row input,.set-app .row select{flex:1}
.set-app .row .help{font-size:10px;color:#444;flex:1}
.set-app .ok{color:#080;font-weight:bold}
.set-app .err{color:#a00;font-weight:bold}

/* ====== Perplexity (legacy launcher kept for tribute) ====== */
.px-app{padding:14px;height:100%;display:flex;flex-direction:column;gap:10px;background:var(--gray)}
.px-app h2{margin:0;font-size:14px}
.px-app .row{display:flex;gap:6px}
.px-app .out{flex:1;background:#fff;padding:6px;overflow:auto;
  border-top:2px solid var(--gray-dd);border-left:2px solid var(--gray-dd);
  border-right:2px solid var(--white);border-bottom:2px solid var(--white);
}
.hourglass{display:inline-block;animation:hg 1s steps(2) infinite}
@keyframes hg{0%{transform:rotate(0)}50%{transform:rotate(180deg)}100%{transform:rotate(360deg)}}

/* ====== notepad / dos / mines / clock / calc (carried over) ====== */
.np-app{height:100%;display:flex;flex-direction:column;background:var(--gray)}
.np-app textarea{
  flex:1;width:100%;border:none;outline:none;resize:none;
  font-family:"Courier New",monospace;font-size:13px;
  padding:4px;background:#fff;color:#000;
  border-top:2px solid var(--gray-dd);border-left:2px solid var(--gray-dd);
  border-right:2px solid var(--white);border-bottom:2px solid var(--white);
  margin:2px;
}
.dos-app{
  height:100%;background:#000;color:#0c0;
  font-family:"Courier New",monospace;font-size:14px;
  padding:6px;overflow:auto;cursor:text;line-height:1.25;
}
.dos-app .line{white-space:pre-wrap;word-break:break-all}
.dos-app .input-row{display:flex}
.dos-app .input-row input{flex:1;background:transparent;border:none;color:#0c0;font:inherit;outline:none;caret-color:#0c0}
.ms-app{padding:6px;background:var(--gray);height:100%;display:flex;flex-direction:column;align-items:center;gap:6px}
.ms-frame{padding:6px;background:var(--gray)}
.ms-top{
  display:flex;justify-content:space-between;align-items:center;padding:6px;margin-bottom:6px;
  border-top:2px solid var(--gray-dd);border-left:2px solid var(--gray-dd);
  border-right:2px solid var(--white);border-bottom:2px solid var(--white);
}
.ms-counter,.ms-timer{
  background:#000;color:#f00;font-family:"Courier New",monospace;font-size:20px;
  padding:1px 4px;letter-spacing:1px;
  border-top:1px solid var(--gray-dd);border-left:1px solid var(--gray-dd);
  border-right:1px solid var(--white);border-bottom:1px solid var(--white);
  min-width:42px;text-align:center;
}
.ms-smiley{
  width:32px;height:32px;background:var(--gray);font-size:18px;line-height:1;
  display:flex;align-items:center;justify-content:center;cursor:default;
  border-top:2px solid var(--white);border-left:2px solid var(--white);
  border-right:2px solid var(--gray-dd);border-bottom:2px solid var(--gray-dd);
}
.ms-smiley:active{
  border-top:2px solid var(--gray-dd);border-left:2px solid var(--gray-dd);
  border-right:2px solid var(--white);border-bottom:2px solid var(--white);
}
.ms-grid{
  display:grid;grid-template-columns:repeat(9,24px);grid-auto-rows:24px;
  border-top:3px solid var(--gray-dd);border-left:3px solid var(--gray-dd);
  border-right:3px solid var(--white);border-bottom:3px solid var(--white);
  background:var(--gray);
}
.ms-cell{
  width:24px;height:24px;display:flex;align-items:center;justify-content:center;
  font-family:"Courier New",monospace;font-weight:bold;font-size:14px;background:var(--gray);
  border-top:2px solid var(--white);border-left:2px solid var(--white);
  border-right:2px solid var(--gray-dd);border-bottom:2px solid var(--gray-dd);cursor:default;
}
.ms-cell.open{border:1px solid var(--gray-d);background:var(--gray)}
.ms-cell.mine{background:#f00;color:#000}
.ms-cell .num1{color:#0000ff}.ms-cell .num2{color:#008000}.ms-cell .num3{color:#ff0000}
.ms-cell .num4{color:#000080}.ms-cell .num5{color:#800000}.ms-cell .num6{color:#008080}
.ms-cell .num7{color:#000000}.ms-cell .num8{color:#808080}

.calc-app{padding:8px;background:var(--gray);height:100%;display:flex;flex-direction:column;gap:6px}
.calc-display{
  background:#fff;font-family:"Courier New",monospace;font-size:18px;
  text-align:right;padding:4px 6px;
  border-top:2px solid var(--gray-dd);border-left:2px solid var(--gray-dd);
  border-right:2px solid var(--white);border-bottom:2px solid var(--white);
  overflow:hidden;text-overflow:ellipsis;
}
.calc-keys{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;flex:1}
.calc-keys button{
  background:var(--gray);font:inherit;font-weight:bold;cursor:default;
  border-top:2px solid var(--white);border-left:2px solid var(--white);
  border-right:2px solid var(--gray-dd);border-bottom:2px solid var(--gray-dd);
}
.calc-keys button:active{
  border-top:2px solid var(--gray-dd);border-left:2px solid var(--gray-dd);
  border-right:2px solid var(--white);border-bottom:2px solid var(--white);
}
.calc-keys button.op{color:#a00}

.clock-app{height:100%;background:var(--gray);display:flex;align-items:center;justify-content:center;padding:8px}
.clock-app svg{width:100%;height:100%;max-width:240px;max-height:240px}

/* ====== modals ====== */
.about-body{padding:20px;display:flex;gap:14px;align-items:flex-start;background:var(--gray)}
.about-body .ic{font-size:42px}
.about-body h1{font-size:14px;margin:0 0 6px}
.about-body p{margin:2px 0}
.modal{background:var(--gray);min-width:300px;padding:0}
.modal .body{padding:20px;display:flex;gap:14px;align-items:center}
.modal .ic{font-size:36px}
.modal .actions{display:flex;justify-content:center;gap:8px;padding:0 12px 12px}

/* ====== bsod ====== */
#bsod{
  position:fixed;inset:0;background:#0000aa;color:#fff;
  font-family:"Courier New",monospace;font-size:16px;
  padding:60px 80px;line-height:1.6;display:none;z-index:11000;
}
#bsod.show{display:block}
#bsod h1{background:#bbbbbb;color:#0000aa;display:inline-block;padding:0 6px;font-size:16px;margin:0 0 24px}

/* ====== mobile ====== */
#mobile-warn{
  position:fixed;inset:0;background:#000;color:#0f0;
  display:none;align-items:center;justify-content:center;text-align:center;
  font-family:"Courier New",monospace;font-size:16px;padding:30px;z-index:12000;
}
@media (max-width:760px),(pointer:coarse){
  #mobile-warn{display:flex}
}