:root{
    --paper: #cfcfcf;
    --panel: #d9d9d9;
    --ink: #121212;

    --shadow-dark: #2b2b2b;
    --shadow-mid: #555;
    --highlight: #ffffff;

    --accent: #1d3aa8;
    --accent-ink: #0b1a56;
}

html, body{
    height: 100%;
}

body{
    margin: 0;
    color: var(--ink);
    font-family: "Courier New", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.home-window{
    width: min(980px, calc(100% - 32px));
    margin: 28px auto;
    background: var(--paper);
    border: 2px solid #000;
    box-shadow:
            6px 6px 0 #000,
            0 0 0 2px var(--shadow-mid) inset;
}

.home-titlebar{
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #000080;
    color: #fff;
    padding: 8px 10px;
    border-bottom: 2px solid #000;
    user-select: none;
}

.home-title{
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    letter-spacing: 0.2px;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.home-doc{
    width:18px;
    height:18px;
    background:url("/images/w95.png") no-repeat center/contain;
    display:inline-block;
}
.home-doc::after{
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    width: 6px;
    height: 6px;
    background: rgba(0,0,0,.18);
    clip-path: polygon(0 0, 100% 0, 100% 100%);
}

.home-winbtns{
    display:flex;
    gap:6px;
}

.home-btn{
    width:20px;
    height:20px;
    border:2px solid #000;
    background:#dcdcdc;
    box-shadow:
            1px 1px 0 #fff inset,
            -1px -1px 0 #555 inset;
    cursor:pointer;
    margin: auto;
    padding:0;
}

.home-btn.minimize::after{
    content:"_";
    display:grid;
    place-items:center;
    font-weight:bold;
    padding-bottom: 5px;
}

.home-btn.close{
    background:#e8b5b5;
    padding: 0;
}

.home-btn.close::after{
    content:"X";
    display:grid;
    place-items:center;
    font-weight:bold;
}

.home-toolbar{
    display: grid;
    grid-template-columns: 110px 1fr 110px;
    gap: 10px;
    padding: 10px;
    border-bottom: 2px solid #000;
    background: #bfbfbf;
}

.home-navbtns{
    display: flex;
    gap: 8px;
    align-items: center;
}

.home-ico{
    width:28px;
    height:24px;
    background:#e9e9e9;
    border:2px solid #000;
    box-shadow:
            1px 1px 0 #fff inset,
            -1px -1px 0 #555 inset;
    position:relative;
    cursor:pointer;
}

.home-ico.back::after{
    content: "◀";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-weight: 900;
}
.home-ico.forward::after{
    content: "▶";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-weight: 900;
}
.home-ico.refresh::after{
    content: "↻";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-weight: 900;
}

.home-address{
    background: #fff;
    border: 2px solid #000;
    box-shadow:
            1px 1px 0 var(--highlight) inset,
            -1px -1px 0 var(--shadow-mid) inset;
    padding: 6px 8px;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-menu{
    justify-self: end;
    background: #e9e9e9;
    border: 2px solid #000;
    box-shadow:
            1px 1px 0 var(--highlight) inset,
            -1px -1px 0 var(--shadow-mid) inset;
    padding: 6px 10px;
    font-size: 13px;
}

.home-body{
    padding: 14px;
    display: grid;
    grid-template-columns: 1.05fr 1.2fr 1.05fr; /* like the screenshot */
    gap: 14px;
}

.home-panel{
    background: var(--panel);
    border: 2px solid #000;
    box-shadow:
            2px 2px 0 #000,
            1px 1px 0 var(--highlight) inset,
            -1px -1px 0 var(--shadow-mid) inset;
    padding: 12px;
    min-height: 220px;
}

.home-panel.hero{
    display: grid;
    grid-template-rows: 170px auto;
    gap: 12px;
}

.hero-media{
    border: 2px solid #000;
    box-shadow:
            1px 1px 0 var(--highlight) inset,
            -1px -1px 0 var(--shadow-mid) inset;
    background:
            radial-gradient(circle at 35% 40%, rgba(255,255,255,.22), transparent 55%),
            linear-gradient(135deg, rgba(29,58,168,.55), rgba(0,0,0,.25));
}
.hero-media img{
    width: 100%;
    height: 100%;
}

.hero-meta .meta-row{
    display: flex;
    gap: 8px;
    line-height: 1.3;
    font-size: 13px;
}
.hero-meta .k{
    color: var(--accent-ink);
    font-weight: 800;
}
.hero-meta .v{
    font-weight: 700;
}

.home-h3{
    margin: 0 0 8px;
    font-size: 24px;
    color: var(--accent-ink);
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
.home-h2{
    margin: 10px 0 6px;
    font-size: 16px;
    color: var(--accent-ink);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.home-p{
    margin: 0 0 10px;
    font-size: 13.5px;
    line-height: 1.35;
}
.home-p.muted{
    opacity: 0.85;
}

.home-divider{
    height: 0;
    border-top: 2px solid var(--accent-ink);
    border-bottom: 2px solid var(--highlight);
    margin: 10px 0;
}
.home-links{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
}
.home-list{
    padding: 0;
    margin: 10px 0 0 10px;
    font-size: 13.5px;
    line-height: 1.45;
}

.home-window{
    will-change: transform;
    user-select: none;
}

.home-titlebar{
    cursor: grab;
}

.home-titlebar:active{
    cursor: grabbing;
}

.home-ico

@media (max-width: 920px){
    .home-body{
        grid-template-columns: 1fr;
    }
    .home-panel{
        min-height: unset;
    }
    .home-toolbar{
        grid-template-columns: 110px 1fr;
        grid-template-rows: auto auto;
    }
    .home-menu{
        grid-column: 1 / -1;
        justify-self: start;
    }
}