:root {
    --desktop: #2f6b4f;
    --desktop-2: #3d8560;
    --platinum: #dddddd;
    --window: #ececec;
    --title: #000000;
    --ink: #111111;
    --muted: #444444;
    --teal: #3a8ea5;
    --yellow: #fff4a3;
    --pink: #ffc6e0;
    --blue: #c8e7ff;
    --border: #000000;
    --shadow: #000000;
    --max: 1100px;
    --ui: "IBM Plex Sans", "Geneva", Tahoma, sans-serif;
    --mono: "IBM Plex Mono", "Monaco", monospace;
    --pixel: VT323, "IBM Plex Mono", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.rm-body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--ui);
    color: var(--ink);
    background:
        radial-gradient(circle at 20% 20%, rgba(255,255,255,.06) 0 1px, transparent 1.5px),
        radial-gradient(circle at 80% 40%, rgba(0,0,0,.08) 0 1px, transparent 1.5px),
        linear-gradient(180deg, var(--desktop-2), var(--desktop));
    background-size: 8px 8px, 8px 8px, auto;
    -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; width: 100%; height: 100%; object-fit: cover; }

.rm-preview {
    background: #000; color: #fff;
    text-align: center; padding: .4rem;
    font-family: var(--mono); font-size: .8rem;
}
.rm-preview a { color: #9cf; text-decoration: underline; }

/* —— Menu bar —— */
.rm-menubar {
    position: sticky; top: 0; z-index: 50;
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem;
    min-height: 28px;
    padding: 0 .75rem;
    background: var(--platinum);
    border-bottom: 2px solid #000;
    box-shadow: inset 0 1px 0 #fff;
    font-family: var(--mono);
    font-size: .85rem;
    font-weight: 600;
}
.rm-menus { display: flex; flex-wrap: wrap; gap: .1rem; }
.rm-menus a {
    padding: .25rem .55rem;
    border: 1px solid transparent;
}
.rm-menus a:hover, .rm-menus a.is-active {
    background: #000;
    color: #fff;
}
.rm-menubar-right {
    display: flex; align-items: center; gap: .75rem;
}
.rm-find input {
    width: 120px;
    border: 2px solid #000;
    background: #fff;
    padding: .15rem .4rem;
    font: inherit;
    font-size: .8rem;
    box-shadow: inset 1px 1px 0 #888;
}
.rm-clock {
    font-variant-numeric: tabular-nums;
    min-width: 4.5rem;
    text-align: right;
}

/* —— Desktop —— */
.rm-desktop {
    width: min(var(--max), calc(100% - 1.25rem));
    margin: 0 auto;
    padding: 1rem 0 3.5rem;
    position: relative;
    min-height: 70vh;
}

.rm-icons {
    position: absolute;
    top: 1rem; right: .25rem;
    display: flex;
    flex-direction: column;
    gap: .85rem;
    z-index: 5;
    width: 88px;
}
.rm-icon {
    display: grid;
    justify-items: center;
    gap: .25rem;
    text-align: center;
}
.rm-icon em {
    font-style: normal;
    font-size: .72rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 1px 1px 0 #000;
    background: rgba(0,0,0,.25);
    padding: .05rem .25rem;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rm-icon-face {
    width: 42px; height: 36px;
    border: 2px solid #000;
    box-shadow: 2px 2px 0 rgba(0,0,0,.35);
}
.rm-icon-hd {
    background:
        linear-gradient(#9aa0a8, #6d737c);
    border-radius: 3px;
}
.rm-icon-folder {
    background:
        linear-gradient(#ffe58a, #f0c94a);
    border-radius: 2px 8px 2px 2px;
}
.rm-icon-trash {
    background:
        linear-gradient(#cfd3d8, #9ea4ad);
    border-radius: 4px 4px 8px 8px;
}

.rm-stage {
    display: grid;
    gap: 1rem;
    padding-right: 100px;
}

/* —— Windows —— */
.rm-window {
    background: var(--window);
    border: 2px solid #000;
    box-shadow: 4px 4px 0 rgba(0,0,0,.45);
    position: relative;
}
.rm-window-center { max-width: 420px; margin: 3rem auto; }
.rm-titlebar {
    display: grid;
    grid-template-columns: 18px 1fr 18px;
    align-items: center;
    gap: .45rem;
    min-height: 24px;
    padding: .2rem .35rem;
    background: repeating-linear-gradient(
        to bottom,
        #fff 0 1px,
        #d0d0d0 1px 2px
    );
    border-bottom: 2px solid #000;
    cursor: grab;
    user-select: none;
}
.rm-titlebar:active { cursor: grabbing; }
.rm-box, .rm-zoom {
    width: 14px; height: 14px;
    border: 2px solid #000;
    background: #fff;
    box-shadow: inset 1px 1px 0 #bbb;
    display: inline-block;
}
.rm-title {
    text-align: center;
    font-family: var(--mono);
    font-size: .82rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rm-toolbar {
    display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .7rem;
    padding: .35rem .55rem;
    background: var(--platinum);
    border-bottom: 2px solid #000;
    font-family: var(--mono);
    font-size: .78rem;
    font-weight: 600;
}
.rm-toolbar a:hover { text-decoration: underline; }
.rm-toolbar-spacer { flex: 1; }
.rm-window-body { padding: .85rem; }

.rm-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 72px;
    padding: .35rem .85rem;
    border: 2px solid #000;
    background: var(--platinum);
    box-shadow: inset 1px 1px 0 #fff, 2px 2px 0 #000;
    font-family: var(--mono);
    font-size: .82rem;
    font-weight: 700;
}
.rm-btn:active {
    box-shadow: inset 1px 1px 0 #888;
    transform: translate(1px, 1px);
}
.rm-btn-ghost { background: #fff; }
.rm-chip {
    display: inline-block;
    margin: 0 0 .5rem;
    padding: .1rem .4rem;
    border: 2px solid #000;
    background: var(--teal);
    color: #fff;
    font-family: var(--mono);
    font-size: .72rem;
    font-weight: 700;
}
.rm-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }

/* —— Hero —— */
.rm-hero-body {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: .9rem;
}
.rm-hero-media {
    display: block;
    border: 2px solid #000;
    background: #bbb;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    box-shadow: inset 2px 2px 0 #888;
}
.rm-hero-copy h1 {
    margin: 0 0 .55rem;
    font-family: var(--pixel);
    font-size: clamp(2rem, 4vw, 2.8rem);
    line-height: 1;
    font-weight: 400;
}
.rm-hero-copy h1 a:hover { background: #000; color: #fff; }
.rm-hero-copy p {
    margin: 0;
    color: var(--muted);
    line-height: 1.45;
    font-size: .95rem;
}

/* —— Finder list —— */
.rm-list {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--mono);
    font-size: .8rem;
}
.rm-list th, .rm-list td {
    border-bottom: 1px solid #aaa;
    padding: .4rem .35rem;
    text-align: left;
}
.rm-list th {
    background: var(--platinum);
    border-bottom: 2px solid #000;
    font-size: .75rem;
}
.rm-list tr:hover td { background: #dcecff; }
.rm-list a {
    display: inline-flex; align-items: center; gap: .4rem;
    font-weight: 600;
}
.rm-doc {
    width: 12px; height: 14px;
    border: 1.5px solid #000;
    background: #fff;
    box-shadow: 1px 1px 0 #888;
    display: inline-block;
}

/* —— Stickies —— */
.rm-stickies {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: .7rem;
}
.rm-sticky {
    display: block;
    min-height: 120px;
    padding: .7rem .75rem;
    border: 2px solid #000;
    box-shadow: 3px 3px 0 rgba(0,0,0,.25);
    font-size: .85rem;
    line-height: 1.35;
}
.rm-sticky strong {
    display: block;
    margin-bottom: .35rem;
    font-family: var(--mono);
    font-size: .8rem;
}
.rm-sticky span { color: #333; }
.rm-sticky-0 { background: var(--yellow); }
.rm-sticky-1 { background: var(--pink); }
.rm-sticky-2 { background: var(--blue); }
.rm-sticky:hover { transform: rotate(-1deg); }

/* —— Cards —— */
.rm-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: .75rem;
}
.rm-card {
    border: 2px solid #000;
    background: #fff;
    box-shadow: 2px 2px 0 #000;
}
.rm-card-media {
    display: block;
    aspect-ratio: 4 / 3;
    border-bottom: 2px solid #000;
    background: #ccc;
}
.rm-card-body { padding: .55rem .6rem .7rem; }
.rm-card h3 {
    margin: .25rem 0 .3rem;
    font-family: var(--mono);
    font-size: .88rem;
    line-height: 1.2;
}
.rm-card h3 a:hover { background: #000; color: #fff; }
.rm-card p {
    margin: 0;
    color: var(--muted);
    font-size: .78rem;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.rm-fallback {
    display: grid; place-content: center;
    width: 100%; height: 100%;
    background: repeating-linear-gradient(45deg, #bbb 0 6px, #ccc 6px 12px);
    font-family: var(--mono);
    font-weight: 700;
}
.rm-fallback-lg { min-height: 180px; font-size: 1.4rem; }
.rm-empty {
    padding: 1.5rem;
    border: 2px dashed #000;
    text-align: center;
    background: #fff;
    font-family: var(--mono);
}

/* —— Alert / article —— */
.rm-alert {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .85rem;
    align-items: start;
}
.rm-alert-icon { font-size: 2rem; margin: 0; }
.rm-alert h1 {
    margin: 0 0 .4rem;
    font-family: var(--mono);
    font-size: 1rem;
}
.rm-window-doc { max-width: 820px; }
.rm-doc-body h1 {
    margin: 0 0 .6rem;
    font-family: var(--pixel);
    font-size: clamp(2rem, 4vw, 2.8rem);
    line-height: 1;
}
.rm-dek {
    margin: 0 0 1rem;
    color: var(--muted);
    line-height: 1.45;
}
.rm-doc-cover {
    margin: 0 0 1rem;
    border: 2px solid #000;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #bbb;
}
.rm-prose {
    font-size: 1.02rem;
    line-height: 1.65;
}
.rm-prose p { margin: 0 0 1rem; }
.rm-prose h2 {
    font-family: var(--mono);
    font-size: 1.05rem;
    margin: 1.4rem 0 .55rem;
}

.rm-footer {
    border-top: 2px solid #000;
    background: var(--platinum);
}
.rm-footer-inner {
    width: min(var(--max), calc(100% - 1.25rem));
    margin: 0 auto;
    padding: .7rem 0;
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem;
    font-family: var(--mono);
    font-size: .78rem;
    font-weight: 600;
}
.rm-footer a:hover { text-decoration: underline; }

@media (max-width: 900px) {
    .rm-icons { position: static; flex-direction: row; flex-wrap: wrap; width: auto; margin-bottom: 1rem; }
    .rm-stage { padding-right: 0; }
    .rm-hero-body { grid-template-columns: 1fr; }
    .rm-icon em { color: #fff; }
}
@media (max-width: 640px) {
    .rm-find { display: none; }
    .rm-menubar { font-size: .78rem; }
}