:root{
  --w98-face:#c0c0c0;
  --w98-hi:#ffffff;
  --w98-mid:#dfdfdf;
  --w98-shadow:#808080;
  --w98-dark:#000000;
  --w98-title:lightgray;
}

.w98-btn{
  font: 12px/1 "MS Sans Serif", Tahoma, sans-serif;
  background: var(--w98-face);
  color:#000;
  padding: 4px 12px;
  height: 24px;
  box-sizing: border-box;
  border: 2px solid;
  border-color: var(--w98-hi) var(--w98-dark) var(--w98-dark) var(--w98-hi);
  box-shadow:
    inset 1px 1px 0 var(--w98-mid),
    inset -1px -1px 0 var(--w98-shadow);
  user-select:none;
}
.w98-btn:active{
  border-color: var(--w98-dark) var(--w98-hi) var(--w98-hi) var(--w98-dark);
  box-shadow:
    inset 1px 1px 0 var(--w98-shadow),
    inset -1px -1px 0 var(--w98-mid);
  padding: 5px 11px 3px 13px;
}
.w98-btn:focus-visible{
  outline: 1px dotted #000;
  outline-offset: -4px;
}

.w98-window{
  z-index: 10000000;
  position: fixed;
  left: 24px;
  top: 24px;
  width: 35%;
  height: 45%;
  min-width: 240px;
  min-height: 160px;
  background: var(--w98-face);
  box-sizing: border-box;
  overflow: hidden;

  /* Win98-ish raised frame */
  border: 4px groove gray;
  box-shadow:
    inset 1px 1px 0 var(--w98-mid),
    inset -1px -1px 0 var(--w98-shadow);
}

.w98-titlebar{
  display:flex;
  align-items:center;
  gap:8px;
  padding: 3px 4px;
  height: 26px;
  box-sizing: border-box;
  background: var(--w98-title);
  border-bottom: 4px groove gray;
  color:#000;
  font: 12px/1 "MS Sans Serif", Tahoma, sans-serif;
}

.w98-titlebar-left{
  display:flex;
  align-items:center;
  gap:6px;
  min-width: 0;
}
.w98-icon{
  width: 16px;
  height: 16px;
  background: var(--w98-face);
}
.w98-title{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.w98-btn--close{
  margin-left:auto;
  width: 22px;
  min-width: 22px;
  height: 20px;
  padding: 0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight: 700;
}

.w98-iframe{
  width: 100%;
  height: calc(100% - 26px);
  border: 0;
  display:block;
  background:#fff;
}