* {
    box-sizing: border-box
}

.os-window,
button {
    box-shadow: none
}

html,
body {
    height: 100%;
    margin: 0;
    overflow: hidden
}

body {
    font-family: "Pixelated MS Sans Serif", Arial, sans-serif;
    background: #008080;
    color: #000
}

.boot-overlay {
    position: fixed;
    z-index: 20000;
    inset: 0;
    background: #000;
    color: #aaa;
    font: 16px/1.4 'Courier New', monospace;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default
}

.bios-post {
    position: absolute;
    inset: 24px;
    white-space: pre-wrap
}

.boot-splash {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: #fff;
    opacity: 0;
    transform: scale(1);
    transition: opacity .2s linear
}

.boot-splash.is-visible {
    opacity: 1
}

.boot-splash strong {
    font: 700 42px Arial, sans-serif;
    letter-spacing: 1px
}

.boot-splash span {
    font: 18px Arial, sans-serif;
    color: #c0c0c0
}

.desktop-icons {
    position: relative;
    height: calc(100vh - 28px);
    overflow: hidden
}

.desktop-icon {
    position: absolute;
    background: transparent;
    box-shadow: none;
    border-image: none;
    cursor: pointer;
    width: 82px;
    color: #fff;
    text-align: center;
    font-size: 11px;
    text-shadow: 1px 1px #000;
    border: 1px solid transparent;
    padding: 3px;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none
}

.desktop-icon.dragging {
    opacity: .65;
    z-index: 5
}

.window-button {
    min-width: 0;
    min-height: 0;
    padding: 0
}

.os-window .window-titlebar,
body>.window-titlebar,
.menus *,
.menu-popup * {
    font-family: inherit
}

.os-window .window-title {
    font-size: 11px;
    padding: 2px 0 0 4px
}

.os-window:not(.maximized) {
    padding: 1px
}

.desktop-icon span {
    display: inline-block;
    padding: 0 2px
}

.desktop-icon:focus,
.desktop-icon.selected {
    background: transparent;
    outline: none
}

.desktop-icon:hover span,
.desktop-icon:focus span,
.desktop-icon.selected span {
    background: #000080;
    color: #fff;
    text-shadow: none
}

.desktop-icon:focus span,
.desktop-icon.selected span {
    outline: 1px dotted #fff;
    outline-offset: -1px
}

.desktop-icon img {
    display: block;
    width: 48px;
    height: 48px;
    object-fit: none;
    margin: 0 auto 5px;
    image-rendering: pixelated
}

.ns-chrome {
    background: #c0c0c0;
    position: relative;
    z-index: 1
}

.ns-toolbar {
    display: flex;
    align-items: flex-start;
    padding: 2px 3px 3px
}

.ns-tool {
    width: 52px;
    height: 42px;
    min-width: 0;
    min-height: 0;
    padding: 2px 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    background: #c0c0c0;
    font: 11px "Pixelated MS Sans Serif", Arial;
    line-height: 1;
    overflow: hidden
}

.ns-tool img {
    display: block;
    width: 20px;
    height: 21px;
    image-rendering: pixelated
}

.ns-tool:disabled img {
    filter: grayscale(1) contrast(.3) brightness(1.4)
}

.ns-tool-gap {
    width: 9px;
    flex: none
}

.ns-midbar {
    display: flex;
    align-items: stretch;
    gap: 4px;
    padding: 0 3px 3px
}

.ns-midrows {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px
}

.ns-location {
    display: flex;
    align-items: center;
    gap: 5px
}

.ns-location-icon {
    flex: none;
    width: 20px;
    height: 21px;
    image-rendering: pixelated
}

.ns-location-label {
    flex: none;
    font-size: 11px
}

.ns-field {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: stretch;
    height: 21px;
    background: #fff;
    box-shadow: inset -1px -1px #fff, inset 1px 1px grey, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a
}

.ns-url[readonly] {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #000;
    font: 11px "Pixelated MS Sans Serif", Arial;
    padding: 3px 4px
}

.ns-field-arrow {
    flex: none;
    width: 16px;
    min-width: 16px;
    min-height: 0;
    padding: 0;
    border: 0;
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0v16h1V1h14V0z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1v14h1V2h12V1H2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 17H0v-1h15V0h1v17z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1h-1v14H1v1h14V1z' fill='gray'/%3E%3Cpath fill='silver' d='M2 2h12v13H2z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11 6H4v1h1v1h1v1h1v1h1V9h1V8h1V7h1V6z' fill='%23000'/%3E%3C/svg%3E") no-repeat center
}

.ns-directory {
    display: flex;
    align-items: center;
    gap: 4px
}

.ns-dir {
    height: 21px;
    min-width: 0;
    min-height: 0;
    padding: 0 10px;
    font: 11px "Pixelated MS Sans Serif", Arial
}

.ns-logo {
    flex: none;
    width: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000
}

.ns-throbber {
    width: 48px;
    height: 48px;
    image-rendering: pixelated;
    background: url(resc/netscape/throbber/netscape-sprite.png) 0 0/1968px 48px
}

.ns-throbber.is-loading {
    background: url(resc/netscape/throbber/netscape.gif) 0 0/48px 48px
}

.ns-splash-overlay {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity .3s linear
}

.ns-splash-overlay.is-visible {
    opacity: 1
}

.ns-splash {
    line-height: 0;
    background: rgb(192, 192, 192);
    border-style: solid;
    border-width: 2px;
    border-image: var(--button-normal-border-image);
    padding: 2px
}

.ns-splash img {
    display: block;
    image-rendering: pixelated
}

.ns-status {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 22px;
    display: flex;
    align-items: stretch;
    gap: 2px;
    padding: 2px 3px;
    background: #c0c0c0
}

.ns-status-cell {
    background: #c0c0c0;
    box-shadow: inset -1px -1px #fff, inset 1px 1px grey
}

.ns-status-security {
    flex: none;
    width: 26px
}

.ns-status-doc {
    flex: 1;
    min-width: 0;
    padding: 3px 4px;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden
}

.ns-status-slot {
    flex: none;
    width: 38px
}

.taskbar {
    position: fixed;
    z-index: 10000;
    bottom: 0;
    left: 0;
    right: 0;
    height: 28px;
    background: #c0c0c0;
    border-top: 2px solid #fff;
    display: flex;
    align-items: center;
    padding: 2px 3px;
    gap: 4px
}

.start-button {
    flex: none;
    height: 23px;
    min-width: 60px;
    padding: 0 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-weight: bold;
    white-space: nowrap
}

.start-button img {
    display: block;
    width: 16px;
    height: 16px;
    image-rendering: pixelated
}

.tasks {
    display: flex;
    gap: 3px;
    flex: 1;
    min-width: 0;
    overflow: hidden
}

.task-button {
    flex: 1 1 0;
    min-width: 0;
    max-width: 160px;
    height: 23px;
    padding: 0 5px;
    display: flex;
    align-items: center;
    gap: 4px;
    overflow: hidden
}

.task-button img {
    flex: none;
    display: block;
    width: 16px;
    height: 16px;
    image-rendering: pixelated
}

.task-button span {
    flex: 1;
    min-width: 0;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.task-button.active {
    border-image: var(--button-active-border-image)
}

.clock {
    width: 64px;
    text-align: center;
    border: 2px inset #fff;
    padding: 2px 4px;
    font-size: 12px
}

.start-menu {
    position: fixed;
    z-index: 11000;
    bottom: 28px;
    left: 3px;
    width: 210px;
    height: auto;
    background: #c0c0c0
}

.start-menu:not([hidden]) {
    display: flex;
    align-items: stretch
}

.start-banner {
    flex: none;
    width: 21px;
    background: #000080;
    color: #fff;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
    padding: 7px 0;
    font: 400 17px/1 "Pixelated MS Sans Serif", Arial
}

.start-banner b {
    font-weight: 700
}

.start-items {
    flex: 1;
    min-width: 0;
    padding: 3px
}

.start-items button {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 0;
    background: transparent;
    width: 100%;
    text-align: left;
    padding: 4px;
    font: 11px "Pixelated MS Sans Serif", Arial
}

.start-items button img {
    width: 32px;
    height: 32px;
    flex: none;
    image-rendering: pixelated
}

.start-items hr {
    border: 0;
    border-top: 1px solid #808080;
    border-bottom: 1px solid #fff;
    margin: 3px 2px
}

.shutdown-screen {
    position: fixed;
    inset: 0;
    z-index: 30000;
    background: #000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    cursor: pointer
}

.shutdown-text {
    font: bold 16px "Courier New", monospace;
    color: #ffb000;
    text-align: center;
    line-height: 1.6
}

.shutdown-hint {
    font: 10px "Pixelated MS Sans Serif", Arial;
    color: #555
}

.start-items button:hover {
    background: #000080;
    color: #fff
}

.window-content iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: #fff
}

.window-content iframe.rich-content {
    overflow: auto
}

.window-content.netscape-content {
    overflow: hidden
}

.window-content.netscape-content iframe {
    overflow: hidden
}

.notepad {
    width: 100%;
    height: 100%;
    border: 0;
    resize: none;
    font: 13px 'Courier New', monospace;
    padding: 5px
}

.fixed-dialog {
    padding: 16px;
    max-width: 340px
}

.fixed-dialog p {
    line-height: 1.4
}

.folder-location {
    display: flex;
    align-items: center;
    gap: 5px;
    height: 28px;
    padding: 3px;
    background: #c0c0c0;
    border-bottom: 2px solid #808080;
    font-size: 11px
}

.folder-location input {
    min-width: 0;
    flex: 1;
    height: 20px;
    border: 2px inset #fff;
    background: #fff;
    padding: 2px 4px;
    font: 11px "Pixelated MS Sans Serif", Arial
}

/* Win98's "View as Web Page" folder panel. The original was folder.htt, an HTML
   page MSHTML rendered inside the folder window, so this one is HTML too — and
   it keeps that page's web typography (Verdana) rather than the shell's MS Sans
   Serif, which is why it reads slightly foreign next to the chrome. Correct.
   Watermark and rule are the shipped Win98 bitmaps, unscaled. */
.folder-body {
    display: flex;
    align-items: stretch;
    height: calc(100% - 52px);
    background: #fff
}

.folder-webview {
    flex: none;
    width: 30%;
    max-width: 250px;
    padding: 10px 12px 0 10px;
    overflow-x: hidden;
    overflow-y: auto;
    background: url(resc/icons/webview/wvleft.bmp) no-repeat 0 0;
    word-wrap: break-word
}

/* Below ~400px the panel would eat the whole window; the icons win. */
.folder-body.is-narrow .folder-webview {
    display: none
}

.fw-icon {
    display: block;
    width: 32px;
    height: 32px;
    object-fit: none;
    image-rendering: pixelated
}

.fw-title {
    margin: 5px 0 0;
    font: bold 2em/1.05 Verdana, Arial, sans-serif;
    color: #000
}

/* wvline.gif is 168x1 — four flat colour blocks meant to span the column, so it
   stretches across X and stays at its native 1px height. */
.fw-rule {
    display: block;
    width: 100%;
    height: 1px;
    margin: 5px 0 10px
}

.fw-desc {
    font: 11px/1.5 Verdana, Arial, sans-serif;
    color: #000
}

.fw-desc p {
    margin: 0 0 8px
}

.fw-desc b {
    display: block;
    margin-bottom: 4px
}

.fw-hint {
    color: #808080
}

.folder-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 80px);
    grid-auto-rows: 82px;
    gap: 6px;
    padding: 10px;
    align-content: start;
    overflow: auto;
    flex: 1;
    min-width: 0;
    background: #fff
}

.folder-item {
    width: 76px;
    padding: 3px;
    border: 1px solid transparent;
    background: transparent;
    box-shadow: none;
    border-image: none;
    cursor: pointer;
    text-align: center;
    font-size: 11px
}

.folder-item img {
    display: block;
    width: 48px;
    height: 48px;
    object-fit: none;
    margin: 0 auto 4px;
    image-rendering: pixelated
}

.folder-item span {
    display: inline-block;
    padding: 0 2px
}

.folder-item-blurb {
    display: none
}

/* No pointer means no "point to select", so the panel stops being the way in:
   the folder becomes a list and every item carries its own description. */
@media (hover: none) {
    .folder-webview {
        display: none
    }

    .folder-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: min-content;
        gap: 4px
    }

    .folder-item {
        width: auto;
        display: grid;
        grid-template-columns: 48px 1fr;
        grid-template-areas: "icon title" "icon blurb";
        gap: 0 8px;
        align-items: center;
        text-align: left
    }

    .folder-item img {
        grid-area: icon;
        margin: 0
    }

    .folder-item span {
        grid-area: title
    }

    .folder-item-blurb {
        grid-area: blurb;
        display: block;
        font-size: 10px;
        color: #404040
    }
}

.folder-item.selected,
.folder-item:focus {
    background: transparent;
    outline: none
}

.folder-item:hover span,
.folder-item.selected span,
.folder-item:focus span {
    background: #000080;
    color: #fff
}

.folder-item.selected span,
.folder-item:focus span {
    outline: 1px dotted #fff;
    outline-offset: -1px
}

.folder-status {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 24px;
    padding: 4px 6px;
    border-top: 2px solid #808080;
    background: #c0c0c0;
    font-size: 11px
}

.download-link {
    display: inline-block;
    margin-top: 8px
}