:root {
    --green: #2cff6a;
    --blue: #2d8cff;
    --cyan: #4dffdf;
    --panel: rgba(5, 35, 34, 0.94);
    --text: #eafff7;
    --muted: #b7d8d0;
    --accent-yellow: #f7ff6b;
    --wall-a: #164d3d;
    --wall-b: #06211f;
    --wall-c: #010807;
    --font: Verdana, Tahoma, Arial, sans-serif;
    --terminal-font: "Courier New", monospace;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;
    font-family: var(--font);
    color: var(--text);
    background: #00120d;
    transition: filter 0.25s ease;
}

body::before,
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 10001;
    pointer-events: none;
}

body::before {
    background: repeating-linear-gradient(to bottom, rgba(255,255,255,0.045), rgba(255,255,255,0.045) 1px, rgba(0,0,0,0.1) 1px, rgba(0,0,0,0.1) 4px);
    mix-blend-mode: screen;
    opacity: 0.22;
    animation: crtFlicker 4.8s steps(12) infinite;
}

body::after {
    background:
        radial-gradient(circle at center, transparent 54%, rgba(0,0,0,0.26) 100%),
        linear-gradient(90deg, rgba(45,140,255,0.035), transparent 18%, transparent 82%, rgba(44,255,106,0.035));
}

@keyframes crtFlicker {
    0%, 100% { opacity: 0.18; }
    8% { opacity: 0.25; }
    10% { opacity: 0.16; }
    42% { opacity: 0.23; }
    46% { opacity: 0.2; }
    74% { opacity: 0.27; }
}

.startup-screen {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background:
        radial-gradient(circle at center, rgba(44,255,106,0.12), transparent 35%),
        linear-gradient(to bottom, #000000, #020d0a 65%, #000000);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: white;
}

.startup-screen.hidden {
    animation: startupFade 0.75s ease forwards;
    pointer-events: none;
}

.startup-screen.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    animation: none;
}

@keyframes startupFade {
    to { opacity: 0; visibility: hidden; }
}

.startup-screen::before {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(to bottom, rgba(255,255,255,0.05), rgba(255,255,255,0.05) 1px, transparent 1px, transparent 5px);
    opacity: 0.55;
    pointer-events: none;
}

.startup-screen::after {
    content: "";
    position: absolute;
    inset: -30%;
    background: linear-gradient(120deg, transparent 35%, rgba(77,255,223,0.22) 48%, rgba(255,255,255,0.35) 50%, rgba(44,255,106,0.18) 52%, transparent 65%);
    transform: translateX(-60%);
    animation: startupSweep 3.2s ease-in-out infinite;
}

@keyframes startupSweep {
    0% { transform: translateX(-65%); }
    45%, 100% { transform: translateX(65%); }
}

.startup-box {
    position: relative;
    z-index: 2;
    width: min(760px, 92vw);
    text-align: center;
    padding: 26px;
    border: 4px ridge var(--cyan);
    background: rgba(0,0,0,0.72);
    box-shadow: 0 0 25px var(--cyan), 0 0 55px var(--green), inset 0 0 28px rgba(77,255,223,0.18);
}

.startup-logo {
    margin: 0;
    font-size: clamp(46px, 10vw, 92px);
    letter-spacing: 2px;
    line-height: 0.95;
    color: var(--green);
    text-shadow: 3px 3px 0 #003018, 0 0 12px var(--green), 0 0 32px var(--cyan), 0 0 60px var(--blue);
    animation: logoArrive 1.2s cubic-bezier(.2, .8, .2, 1) both, startupLogoPulse 1.6s ease-in-out 1.2s infinite alternate;
}

@keyframes logoArrive {
    0% { opacity: 0; transform: scale(0.45) rotate(-2deg); filter: blur(8px); }
    65% { opacity: 1; transform: scale(1.08) rotate(1deg); filter: blur(0); }
    100% { transform: scale(1) rotate(0deg); }
}

@keyframes startupLogoPulse {
    from { transform: scale(1); filter: brightness(1); }
    to { transform: scale(1.025); filter: brightness(1.28); }
}

.startup-subtitle {
    margin-top: 14px;
    color: #dffff5;
    font-size: 15px;
    letter-spacing: 2px;
}

.boot-lines {
    width: min(460px, 92%);
    margin: 18px auto 0 auto;
    padding: 10px;
    border: 2px inset var(--green);
    background: rgba(0,0,0,0.75);
    color: #aaffc7;
    font-family: var(--terminal-font);
    font-size: 12px;
    text-align: left;
    line-height: 1.45;
}

.startup-loading {
    width: min(420px, 80%);
    height: 18px;
    margin: 18px auto 16px auto;
    border: 3px inset var(--cyan);
    background: rgba(0,0,0,0.85);
    overflow: hidden;
}

.startup-loading-fill {
    height: 100%;
    width: 0%;
    background: repeating-linear-gradient(45deg, var(--green), var(--green) 8px, var(--cyan) 8px, var(--cyan) 16px);
    box-shadow: 0 0 16px var(--green);
    animation: startupLoad 2.6s ease-in-out forwards;
}

@keyframes startupLoad {
    0% { width: 0%; }
    35% { width: 44%; }
    68% { width: 76%; }
    100% { width: 100%; }
}

.startup-button {
    margin-top: 8px;
    padding: 10px 18px;
    font-family: var(--font);
    font-weight: bold;
    color: #001b12;
    background: linear-gradient(to bottom, #dffff5, var(--green), #0b5d64);
    border: 4px outset white;
    cursor: pointer;
}

.startup-button:hover { filter: brightness(1.18); }

.press-start {
    margin-top: 14px;
    color: var(--accent-yellow);
    font-weight: bold;
    animation: pressBlink 0.85s steps(2) infinite;
}

@keyframes pressBlink { 50% { opacity: 0.25; } }

.terminated-screen {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    background: repeating-linear-gradient(to bottom, rgba(255,255,255,0.04), rgba(255,255,255,0.04) 1px, transparent 1px, transparent 5px), #000704;
    color: var(--green);
    text-align: center;
}

.terminated-screen.visible { display: flex; }

.terminated-box {
    width: min(680px, 90vw);
    padding: 28px;
    border: 4px ridge var(--green);
    background: rgba(0,0,0,0.75);
    box-shadow: 0 0 22px var(--green), inset 0 0 25px rgba(44,255,106,0.16);
}

.terminated-title {
    margin: 0 0 12px 0;
    font-size: clamp(34px, 7vw, 66px);
    text-shadow: 0 0 16px var(--green);
}

.terminated-text {
    color: #dffff5;
    font-family: var(--terminal-font);
    line-height: 1.5;
}

body.theme-emoji-web .startup-screen,
body.theme-emoji-web .terminated-screen {
    background:
        repeating-linear-gradient(to bottom, rgba(255,255,255,0.04), rgba(255,255,255,0.04) 1px, transparent 1px, transparent 5px),
        radial-gradient(circle at 20% 22%, #fff200 0 10px, transparent 11px),
        radial-gradient(circle at 82% 70%, rgba(47,255,255,0.28), transparent 22%),
        #000000;
}

body.theme-emoji-web .startup-screen::before,
body.theme-emoji-web .terminated-screen::before {
    content: "";
    position: absolute;
    inset: -16%;
    background:
        repeating-radial-gradient(ellipse at center, transparent 0 34px, rgba(255,77,243,0.2) 35px 38px, transparent 39px 70px),
        linear-gradient(90deg, transparent 0 20%, rgba(255,242,0,0.24) 21% 22%, transparent 23% 100%);
    animation: synthWaveDrift 6s linear infinite;
    pointer-events: none;
}

body.theme-emoji-web .startup-screen::after {
    background: linear-gradient(120deg, transparent 35%, rgba(255,77,243,0.24) 48%, rgba(255,242,0,0.42) 50%, rgba(47,255,255,0.2) 52%, transparent 65%);
}

body.theme-emoji-web .startup-box,
body.theme-emoji-web .terminated-box {
    border: 5px ridge #c0c0c0;
    background:
        radial-gradient(circle at 50% 0%, rgba(255,77,243,0.18), transparent 34%),
        #000000;
    box-shadow: 0 0 0 4px #808080, 0 0 30px #ff4df3, inset 0 0 30px rgba(47,255,255,0.14);
}

body.theme-emoji-web .startup-logo,
body.theme-emoji-web .terminated-title {
    color: #ff4df3;
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    text-shadow: 4px 4px 0 #808080, 0 0 12px #ffffff, 0 0 28px #ff4df3;
}

body.theme-emoji-web .startup-subtitle,
body.theme-emoji-web .terminated-text {
    color: #fff200;
    text-shadow: 1px 1px 0 #000000, 0 0 10px #39ff14;
}

body.theme-emoji-web .boot-lines {
    border: 3px ridge #ffffff;
    background: #c0c0c0;
    color: #000080;
    text-shadow: none;
}

body.theme-emoji-web .startup-button {
    background: linear-gradient(to bottom, #ffffff, #fff200 28%, #39ff14 56%, #ff4df3);
    color: #160020;
    border: 4px outset #ffffff;
    box-shadow: 2px 2px 0 #000000;
}

body.theme-system-one .startup-screen,
body.theme-system-one .terminated-screen {
    background:
        repeating-linear-gradient(45deg, #ffffff 0 2px, #d8d8d8 2px 4px),
        #d8d8d8;
    color: #000000;
}

body.theme-system-one .startup-screen::before,
body.theme-system-one .startup-screen::after {
    display: none;
}

body.theme-system-one .startup-box,
body.theme-system-one .terminated-box {
    border: 2px solid #000000;
    background: #ffffff;
    box-shadow: 8px 8px 0 rgba(0,0,0,0.24);
    color: #000000;
}

body.theme-system-one .startup-logo,
body.theme-system-one .terminated-title {
    color: #000000;
    font-size: clamp(30px, 7vw, 64px);
    text-shadow: none;
}

body.theme-system-one .startup-subtitle,
body.theme-system-one .terminated-text,
body.theme-system-one .press-start,
body.theme-system-one .boot-lines {
    color: #000000;
    text-shadow: none;
}

body.theme-system-one .boot-lines {
    border: 1px solid #000000;
    background: #ffffff;
}

body.theme-system-one .startup-loading {
    border: 1px solid #000000;
    background: #ffffff;
}

body.theme-system-one .startup-loading-fill {
    background: repeating-linear-gradient(90deg, #000000 0 8px, #ffffff 8px 12px);
}

body.theme-system-one .startup-button {
    background: #ffffff;
    border: 2px solid #000000;
    color: #000000;
    box-shadow: none;
}

body.theme-c64 .startup-screen,
body.theme-c64 .terminated-screen {
    background:
        repeating-linear-gradient(to bottom, rgba(255,255,255,0.1), rgba(255,255,255,0.1) 1px, rgba(0,0,0,0.32) 1px, rgba(0,0,0,0.32) 5px),
        #4035c8;
    color: #c5c0ff;
}

body.theme-c64 .startup-box,
body.theme-c64 .terminated-box {
    border: 18px solid #151078;
    background: #4035c8;
    box-shadow: 0 0 0 4px #c5c0ff, 0 0 44px rgba(0,0,0,0.88), inset 0 0 80px rgba(0,0,0,0.55);
    text-align: left;
    text-transform: uppercase;
}

body.theme-c64 .startup-logo,
body.theme-c64 .terminated-title {
    color: #c5c0ff;
    font-size: clamp(28px, 6vw, 58px);
    letter-spacing: 0;
    text-shadow: 4px 4px 0 #151078;
}

body.theme-c64 .startup-subtitle,
body.theme-c64 .terminated-text,
body.theme-c64 .press-start {
    color: #c5c0ff;
    text-shadow: none;
}

body.theme-c64 .boot-lines {
    border: 0;
    background: transparent;
    color: #c5c0ff;
    font-size: 15px;
    text-shadow: none;
}

body.theme-c64 .startup-loading {
    border: 2px solid #c5c0ff;
    background: #151078;
}

body.theme-c64 .startup-loading-fill {
    background: repeating-linear-gradient(90deg, #c5c0ff 0 16px, #fff35a 16px 32px);
}

body.theme-c64 .startup-button {
    background: #c5c0ff;
    border: 3px solid #fff35a;
    color: #151078;
    box-shadow: 4px 4px 0 #151078;
}

body.theme-msdos .startup-screen,
body.theme-msdos .terminated-screen {
    background: #000000;
    color: #c0c0c0;
}

body.theme-msdos .startup-screen::before,
body.theme-msdos .startup-screen::after {
    display: none;
}

body.theme-msdos .startup-box,
body.theme-msdos .terminated-box {
    border: 2px solid #c0c0c0;
    background: #000000;
    box-shadow: none;
    text-align: left;
}

body.theme-msdos .startup-logo,
body.theme-msdos .terminated-title {
    color: #ffffff;
    font-size: clamp(30px, 8vw, 60px);
    text-shadow: none;
}

body.theme-msdos .startup-subtitle,
body.theme-msdos .terminated-text,
body.theme-msdos .press-start,
body.theme-msdos .boot-lines {
    color: #c0c0c0;
    text-shadow: none;
}

body.theme-msdos .boot-lines {
    border: 0;
    background: transparent;
    font-size: 15px;
}

body.theme-msdos .startup-loading {
    border: 1px solid #c0c0c0;
}

body.theme-msdos .startup-loading-fill {
    background: repeating-linear-gradient(90deg, #c0c0c0 0 12px, #000000 12px 16px);
}

body.theme-msdos .startup-button {
    background: #c0c0c0;
    border: 2px outset #ffffff;
    color: #000000;
    box-shadow: none;
}

.wallpaper {
    position: fixed;
    inset: 0;
    z-index: -5;
    overflow: hidden;
    background:
        radial-gradient(circle at 20% 25%, rgba(44,255,106,0.16), transparent 18%),
        radial-gradient(circle at 70% 35%, rgba(45,140,255,0.16), transparent 20%),
        radial-gradient(circle at center, var(--wall-a) 0%, var(--wall-b) 48%, var(--wall-c) 100%);
    background-size: 100% 100%, 100% 100%, 100% 100%;
}

.wallpaper::before {
    content: "";
    position: absolute;
    left: -12%;
    right: -12%;
    bottom: -8%;
    height: 58%;
    background-image:
        linear-gradient(rgba(77,255,223,0.22) 2px, transparent 2px),
        linear-gradient(90deg, rgba(44,255,106,0.2) 2px, transparent 2px);
    background-size: 86px 34px;
    transform: skewY(-4deg) translate3d(0, -34px, 0);
    transform-origin: bottom center;
    will-change: transform;
    animation: floorDrift 3.8s linear infinite;
}

.wallpaper::after {
    content: "";
    position: absolute;
    left: -8%;
    right: -8%;
    top: -8%;
    bottom: -8%;
    background:
        repeating-linear-gradient(to bottom, rgba(255,255,255,0.025), rgba(255,255,255,0.025) 1px, transparent 1px, transparent 5px),
        repeating-radial-gradient(ellipse at 50% 112%, transparent 0 34px, rgba(77,255,223,0.18) 35px 37px, transparent 38px 66px),
        linear-gradient(115deg, transparent 0 38%, rgba(247,255,107,0.18) 39% 40%, transparent 41% 100%),
        linear-gradient(68deg, transparent 0 43%, rgba(45,140,255,0.2) 44% 45%, transparent 46% 100%);
    opacity: 0.68;
    pointer-events: none;
    transform: translate3d(0, 16px, 0);
    will-change: transform;
    animation: synthWaveDrift 7s linear infinite;
}

@keyframes floorDrift {
    from { transform: skewY(-4deg) translate3d(0, -34px, 0); }
    to { transform: skewY(-4deg) translate3d(0, 0, 0); }
}

@keyframes synthWaveDrift {
    from { transform: translate3d(-18px, 20px, 0); }
    to { transform: translate3d(18px, -18px, 0); }
}

.float-line {
    position: fixed;
    z-index: -4;
    height: 3px;
    width: 320px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 10px var(--green);
    opacity: 0.5;
    animation: floatLine 11s ease-in-out infinite alternate;
}

.float-line.one { top: 13%; left: 6%; transform: rotate(17deg); }
.float-line.two { top: 58%; right: 4%; width: 420px; transform: rotate(-12deg); animation-duration: 13s; }
.float-line.three { top: 80%; left: 18%; width: 260px; transform: rotate(33deg); animation-duration: 15s; }

@keyframes floatLine {
    from { translate: -20px -6px; filter: blur(0px); }
    to { translate: 30px 10px; filter: blur(1px); }
}

.marquee {
    background: rgba(0, 8, 6, 0.92);
    border-top: 3px solid var(--cyan);
    border-bottom: 3px solid var(--green);
    color: #caffd7;
    font-weight: bold;
    font-size: 14px;
    padding: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-shadow: 0 0 7px var(--green);
}

.marquee span {
    display: inline-block;
    padding-left: 100%;
    animation: scroll 20s linear infinite;
}

.marquee b {
    color: var(--accent-yellow);
    font-family: var(--terminal-font);
}

@keyframes scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
}

.desktop-wrap {
    position: relative;
    width: 980px;
    max-width: 94%;
    margin: 34px auto 48px auto;
}

#waveBorder {
    position: absolute;
    inset: -34px;
    width: calc(100% + 68px);
    height: calc(100% + 68px);
    pointer-events: none;
    z-index: 0;
}

.web-portal,
.mode-feature,
.mac-only {
    display: none;
}

.mode-feature {
    position: relative;
    z-index: 1;
    max-width: 760px;
    margin: 16px auto 0;
    padding: 12px;
    border: 3px inset var(--cyan);
    background: rgba(0,0,0,0.34);
    color: #eafff7;
}

.mode-title {
    color: var(--accent-yellow);
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 8px;
}

.signal-lab {
    display: block;
}

.signal-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin: 10px 0;
}

.signal-pad {
    min-height: 54px;
    border: 2px solid var(--cyan);
    background: radial-gradient(circle, rgba(44,255,106,0.22), rgba(0,0,0,0.7));
    color: var(--green);
    font: bold 13px var(--terminal-font);
    box-shadow: inset 0 0 16px rgba(77,255,223,0.18);
    cursor: pointer;
}

.signal-pad:hover {
    filter: brightness(1.22);
}

.mode-output {
    margin-top: 10px;
    padding: 8px;
    border: 2px dotted var(--green);
    background: rgba(0,0,0,0.42);
    color: #caffd7;
    font: 12px var(--terminal-font);
}

.desktop {
    position: relative;
    z-index: 1;
    contain: layout paint;
    padding: 18px;
    background: linear-gradient(to bottom, rgba(8, 60, 50, 0.94), rgba(4, 23, 28, 0.96)), radial-gradient(circle at 20% 15%, rgba(44,255,106,0.13), transparent 25%);
    border: 4px ridge var(--cyan);
    box-shadow: 0 0 18px var(--cyan), 0 0 42px rgba(44,255,106,0.7), inset 0 0 40px rgba(0,0,0,0.55);
    overflow: hidden;
    transition: box-shadow 0.25s ease;
    animation: desktopGlow 3.6s ease-in-out infinite alternate;
}

@keyframes desktopGlow {
    from { box-shadow: 0 0 18px var(--cyan), 0 0 42px rgba(44,255,106,0.62), inset 0 0 40px rgba(0,0,0,0.55); }
    to { box-shadow: 0 0 24px var(--cyan), 0 0 58px rgba(44,255,106,0.86), inset 0 0 48px rgba(77,255,223,0.08); }
}

.desktop::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 10% 70%, rgba(255,255,255,0.07), transparent 16%), radial-gradient(circle at 80% 30%, rgba(255,255,255,0.06), transparent 18%);
    pointer-events: none;
}

body.theme-c64 {
    font-family: "Courier New", monospace;
    color: #c5c0ff;
}

body.theme-c64::before {
    background:
        repeating-linear-gradient(to bottom, rgba(255,255,255,0.12), rgba(255,255,255,0.12) 1px, rgba(0,0,0,0.34) 1px, rgba(0,0,0,0.34) 5px),
        repeating-linear-gradient(90deg, rgba(127,255,255,0.05) 0 2px, rgba(255,53,180,0.04) 2px 4px, rgba(0,0,0,0.06) 4px 7px);
    opacity: 0.48;
    mix-blend-mode: screen;
    animation: crtFlicker 1.6s steps(8) infinite;
}

body.theme-c64::after {
    background:
        radial-gradient(ellipse at center, transparent 0 38%, rgba(0,0,0,0.42) 68%, rgba(0,0,0,0.9) 100%),
        linear-gradient(100deg, transparent 0 18%, rgba(255,255,255,0.18) 22%, transparent 34% 100%),
        radial-gradient(ellipse at center, rgba(197,192,255,0.1), transparent 45%);
    opacity: 0.92;
}

body.theme-c64 .marquee {
    background: #a85f00;
    color: #1a0e00;
    border-color: #fff35a;
    text-shadow: none;
    text-transform: uppercase;
}

body.theme-c64 .desktop,
body.theme-c64 .page-shell {
    background:
        repeating-linear-gradient(to bottom, rgba(197,192,255,0.06) 0 1px, transparent 1px 8px),
        linear-gradient(to bottom, rgba(64, 53, 200, 0.98), rgba(15, 10, 110, 0.98));
    border: 18px solid #151078;
    box-shadow: 0 0 0 4px #c5c0ff, 0 0 0 12px #4035c8, 0 0 40px rgba(127,255,255,0.45), inset 0 0 80px rgba(0,0,0,0.62);
    color: #c5c0ff;
    text-transform: uppercase;
}

body.theme-c64 .top-area {
    border: 0;
    border-bottom: 4px solid #fff35a;
    background: #4035c8;
    text-align: left;
}

body.theme-c64 h1,
body.theme-c64 .page-header h2 {
    color: #c5c0ff;
    text-shadow: 4px 4px 0 #101060;
    letter-spacing: 4px;
    font-size: clamp(30px, 6vw, 54px);
}

body.theme-c64 .window,
body.theme-c64 .video-card,
body.theme-c64 .gallery-card,
body.theme-c64 .guestbook-panel {
    background: #000040;
    border: 3px solid #c5c0ff;
    box-shadow: 6px 6px 0 #151078;
    color: #c5c0ff;
}

body.theme-c64 .video-frame,
body.theme-c64 .gif-slot,
body.theme-c64 .media-tile {
    display: none;
}

body.theme-c64 .signal-lab,
body.theme-c64 .window-grid,
body.theme-c64 .icon-row,
body.theme-c64 .taskbar {
    display: none;
}

body.theme-c64 .c64-station {
    display: block;
    max-width: 760px;
    border: 4px solid #c5c0ff;
    background: #151078;
    color: #c5c0ff;
    box-shadow: 8px 8px 0 #000040;
}

body.theme-c64 .c64-station .mode-title {
    color: #fff35a;
    font-size: 20px;
}

.basic-listing {
    margin: 0 0 12px;
    padding: 12px;
    border: 2px solid #7fffff;
    background: #4035c8;
    color: #c5c0ff;
    font: bold 15px "Courier New", monospace;
    line-height: 1.55;
}

.c64-sprite-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin: 10px 0;
}

.c64-sprite-row span {
    display: grid;
    place-items: center;
    min-height: 54px;
    border: 2px solid #fff35a;
    background: #4035c8;
    color: #7fffff;
    font-size: 30px;
    transition: transform 0.12s steps(2, end);
}

body.theme-c64 .mode-output {
    border-color: #fff35a;
    background: #4035c8;
    color: #fff35a;
}

body.theme-c64 .window-content h2,
body.theme-c64 .window-content h3,
body.theme-c64 .small-text,
body.theme-c64 p {
    color: #c5c0ff;
    text-shadow: none;
}

body.theme-c64 .window-content h2::before,
body.theme-c64 .window-content h3::before {
    content: "READY. ";
}

body.theme-c64 .file-row,
body.theme-c64 .terminal-screen,
body.theme-c64 .file-preview,
body.theme-c64 .now-playing {
    background: #4035c8;
    color: #c5c0ff;
    border: 2px solid #c5c0ff;
    text-shadow: none;
}

body.theme-c64 .progress-shell {
    border: 2px solid #c5c0ff;
    background: #151078;
}

body.theme-c64 .progress-fill,
body.theme-c64 .volume-bars span {
    background: #fff35a;
    box-shadow: 0 0 0 2px #151078;
}

body.theme-c64 .turntable {
    width: 190px;
    height: 150px;
    border: 6px solid #c5c0ff;
    background: #151078;
    box-shadow: 6px 6px 0 #000040;
}

body.theme-system-one .turntable {
    width: 180px;
    height: 150px;
    border: 2px solid #000000;
    background: #ffffff;
    box-shadow: none;
}

body.theme-system-one .turntable::before {
    content: "Sound";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    padding: 5px;
    border-bottom: 2px solid #000000;
    background: repeating-linear-gradient(to bottom, #ffffff 0 2px, #000000 2px 3px, #ffffff 3px 5px);
    color: #000000;
    text-align: center;
    text-shadow:
        -2px 0 #ffffff,
        2px 0 #ffffff,
        0 -2px #ffffff,
        0 2px #ffffff;
}

body.theme-system-one .vinyl-record {
    left: 52px;
    top: 58px;
    width: 76px;
    height: 58px;
    border-radius: 0;
    border: 2px solid #000000;
    background:
        linear-gradient(90deg, #000000 0 12px, #ffffff 12px 18px, #000000 18px 24px, #ffffff 24px 100%);
    box-shadow: none;
}

body.theme-system-one .vinyl-record::before,
body.theme-system-one .vinyl-record::after,
body.theme-system-one .needle {
    display: none;
}

body.theme-system-one.music-playing .vinyl-record {
    animation: macSoundPulse 0.42s steps(2, end) infinite;
}

@keyframes macSoundPulse {
    from { transform: scale(1); }
    to { transform: scale(1.08); }
}

body.theme-c64 .turntable::before {
    content: "6581 SID";
    position: absolute;
    left: 14px;
    right: 14px;
    top: 12px;
    padding: 8px;
    border: 2px solid #fff35a;
    color: #fff35a;
    text-align: center;
    font-weight: bold;
}

body.theme-c64 .vinyl-record {
    left: 28px;
    top: 64px;
    width: 120px;
    height: 46px;
    border-radius: 0;
    border: 2px solid #c5c0ff;
    background:
        repeating-linear-gradient(90deg, #c5c0ff 0 6px, #4035c8 6px 12px),
        #c5c0ff;
    box-shadow: 0 0 0 4px #151078;
}

body.theme-c64 .vinyl-record::before {
    inset: auto;
    left: 8px;
    right: 8px;
    top: 10px;
    height: 8px;
    border-radius: 0;
    background: #151078;
}

body.theme-c64 .vinyl-record::after,
body.theme-c64 .needle {
    display: none;
}

body.theme-c64.music-playing .vinyl-record {
    animation: sidPulse 0.32s steps(2, end) infinite;
}

@keyframes sidPulse {
    from { filter: brightness(0.9); transform: translateY(0); }
    to { filter: brightness(1.45); transform: translateY(-2px); }
}

body.theme-msdos {
    font-family: "Courier New", monospace;
    color: #c0c0c0;
}

body.theme-msdos .marquee,
body.theme-msdos .desktop,
body.theme-msdos .page-shell,
body.theme-msdos .window,
body.theme-msdos .video-card,
body.theme-msdos .gallery-card,
body.theme-msdos .guestbook-panel {
    background: #000000;
    color: #c0c0c0;
    box-shadow: none;
}

body.theme-msdos .desktop,
body.theme-msdos .page-shell {
    border: 2px solid #c0c0c0;
}

body.theme-msdos .top-area {
    border: 1px solid #c0c0c0;
    background: #000000;
    text-align: left;
}

body.theme-msdos h1,
body.theme-msdos .page-header h2 {
    color: #ffffff;
    text-shadow: none;
    font-size: 42px;
    letter-spacing: 0;
}

body.theme-msdos .window,
body.theme-msdos .video-card,
body.theme-msdos .gallery-card,
body.theme-msdos .guestbook-panel {
    border: 2px solid #c0c0c0;
}

body.theme-msdos::before {
    opacity: 0.12;
    background: repeating-linear-gradient(to bottom, rgba(255,255,255,0.08), rgba(255,255,255,0.08) 1px, rgba(0,0,0,0.18) 1px, rgba(0,0,0,0.18) 4px);
}

body.theme-msdos::after {
    background: radial-gradient(ellipse at center, transparent 0 64%, rgba(0,0,0,0.7) 100%);
}

body.theme-msdos #logo::before {
    content: "C:\\SQUINKY>";
    display: block;
    color: #ffffff;
    font-size: 0.45em;
    text-shadow: none;
}

body.theme-msdos .theme-extra,
body.theme-msdos .web-homepage-copy,
body.theme-msdos .mode-feature,
body.theme-msdos .icon-row,
body.theme-msdos .window:not(#terminalWindow),
body.theme-msdos .taskbar .task-button:not([data-window="terminalWindow"]) {
    display: none;
}

body.theme-msdos .window-grid {
    display: block;
}

body.theme-msdos #terminalWindow {
    display: block;
    width: 100%;
    min-height: 560px;
}

body.theme-msdos #terminalWindow .window-content {
    min-height: 500px;
}

body.theme-msdos .terminal-screen {
    min-height: 300px;
    max-height: none;
    font-size: 15px;
}

body.theme-msdos .terminal-line::before {
    content: "C:\\SQUINKY>";
}

body.theme-msdos .terminal-line:first-child::before,
body.theme-msdos .terminal-line:nth-child(2)::before,
body.theme-msdos .terminal-line:nth-child(3)::before,
body.theme-msdos .terminal-line:nth-child(4)::before {
    content: "";
}

body.theme-msdos .quick-command::before,
body.theme-msdos .task-button::before,
body.theme-msdos .os-button::before {
    content: "";
}

body.theme-msdos .quick-command {
    text-transform: uppercase;
}

body.theme-system-one {
    color: #111111;
    background: #bdbdbd;
    font-family: Chicago, Geneva, "Helvetica Neue", Arial, sans-serif;
}

body.theme-system-one::before,
body.theme-system-one::after {
    opacity: 0;
}

body.theme-system-one .marquee {
    background: #ffffff;
    color: #000000;
    border: 1px solid #000000;
    text-shadow: none;
    padding: 4px 8px;
    font-weight: normal;
    box-shadow: inset 0 -1px 0 #000000;
}

body.theme-system-one #waveBorder {
    display: none;
}

body.theme-system-one .desktop,
body.theme-system-one .page-shell {
    background:
        repeating-linear-gradient(45deg, rgba(0,0,0,0.055) 0 1px, transparent 1px 6px),
        #d6d6d6;
    border: 2px solid #000000;
    box-shadow: 7px 7px 0 rgba(0,0,0,0.22);
    color: #111111;
    animation: none;
}

body.theme-system-one .desktop-wrap {
    width: min(1120px, 96vw);
    margin-top: 18px;
}

body.theme-system-one .desktop {
    min-height: 720px;
    padding: 28px;
    overflow: visible;
}

body.theme-system-one .desktop::before,
body.theme-system-one .desktop::after {
    display: none;
}

body.theme-system-one .top-area {
    min-height: 0;
    margin: -28px -28px 22px;
    padding: 0;
    border: 0;
    background: transparent;
}

body.theme-system-one .top-area::before {
    content: "  File   Edit   View   Special";
    display: block;
    margin: 0;
    padding: 4px 8px;
    background: #ffffff;
    border-bottom: 2px solid #000000;
    color: #000000;
    text-align: left;
    font-weight: bold;
}

body.theme-system-one #logo,
body.theme-system-one .subtitle,
body.theme-system-one .web-homepage-copy,
body.theme-system-one .mode-feature,
body.theme-system-one .os-readout,
body.theme-system-one .palette-readout,
body.theme-system-one .splash-readout,
body.theme-system-one .dynamic-readouts,
body.theme-system-one .theme-flash {
    display: none;
}

body.theme-system-one .control-row,
body.theme-system-one .theme-tray {
    max-width: 620px;
    margin: 8px auto 0;
    padding: 5px;
    background: #ffffff;
    border: 1px solid #000000;
    justify-content: center;
}

body.theme-system-one .control-row {
    display: none;
}

body.theme-system-one h1,
body.theme-system-one .page-header h2 {
    color: #000000;
    text-shadow: none;
    font-size: 38px;
    letter-spacing: 0;
}

body.theme-system-one .subtitle,
body.theme-system-one .top-area .small-text,
body.theme-system-one .page-header p {
    color: #000000;
    text-shadow: none;
}

body.theme-system-one .window,
body.theme-system-one .video-card,
body.theme-system-one .gallery-card,
body.theme-system-one .guestbook-panel {
    background: #ffffff;
    border: 2px solid #000000;
    box-shadow: none;
    color: #111111;
    overflow: auto;
}

body.theme-system-one .window-content,
body.theme-system-one .window-content h2,
body.theme-system-one .window-content h3,
body.theme-system-one .guestbook-panel h3,
body.theme-system-one .gallery-card h3,
body.theme-system-one .video-card h3,
body.theme-system-one .progress-label,
body.theme-system-one .badge,
body.theme-system-one .status-card,
body.theme-system-one .guestbook-form label,
body.theme-system-one .guestbook-status,
body.theme-system-one .guestbook-entry-name,
body.theme-system-one .guestbook-entry-date,
body.theme-system-one .guestbook-entry-message,
body.theme-system-one .guestbook-empty,
body.theme-system-one p,
body.theme-system-one li {
    color: #000000;
    text-shadow: none;
}

body.theme-system-one .video-frame {
    border: 2px solid #000000;
    background: #ffffff;
    box-shadow: none;
}

body.theme-system-one .video-frame iframe,
body.theme-system-one img {
    filter: grayscale(1) contrast(1.05);
}

body.theme-system-one .fake-button {
    width: 12px;
    height: 12px;
    border: 1px solid #000000;
    background: #ffffff;
    box-shadow: none;
}

body.theme-system-one .fake-button.green,
body.theme-system-one .fake-button.blue {
    background: #d8d8d8;
}

body.theme-system-one .badge,
body.theme-system-one .status-card,
body.theme-system-one .devlog,
body.theme-system-one .guestbook-status,
body.theme-system-one .guestbook-entry,
body.theme-system-one .guestbook-empty {
    border: 1px dotted #000000;
    background: #ffffff;
    box-shadow: none;
}

body.theme-system-one .status-light,
body.theme-system-one .status-light.alert {
    border-radius: 50%;
    background: #000000;
    box-shadow: inset 2px 2px 0 rgba(255,255,255,0.45);
}

body.theme-system-one .progress-shell {
    border: 1px solid #000000;
    background: #ffffff;
    box-shadow: none;
}

body.theme-system-one .progress-fill,
body.theme-system-one .volume-bars span {
    background: repeating-linear-gradient(90deg, #000000 0 8px, #ffffff 8px 12px);
    box-shadow: none;
}

body.theme-system-one .guestbook-form input,
body.theme-system-one .guestbook-form textarea {
    border: 2px solid #000000;
    background: #ffffff;
    color: #000000;
    box-shadow: none;
}

body.theme-system-one .taskbar {
    display: none;
}

body.theme-c64 #waveBorder,
body.theme-msdos #waveBorder,
body.theme-system-one #waveBorder {
    display: none;
}

body.theme-system-one .mac-only {
    display: flex;
}

body.theme-system-one article.mac-only {
    display: none;
}

body.theme-system-one #terminalWindow,
body.theme-system-one .desktop-icon[data-window="terminalWindow"],
body.theme-system-one .task-button[data-window="terminalWindow"],
body.theme-system-one .desktop-icon[data-page],
body.theme-system-one .task-button[data-page] {
    display: none;
}

body.theme-system-one .icon-row {
    display: grid;
    grid-template-columns: repeat(2, 92px);
    align-items: start;
    justify-content: space-between;
    gap: 20px;
    margin: 22px 0 0;
    padding: 0 18px;
}

body.theme-system-one .desktop-icon {
    width: 90px;
    min-height: 78px;
    padding: 4px;
}

body.theme-system-one .desktop-icon[data-window="videoWindow"],
body.theme-system-one .desktop-icon[data-window="modWindow"],
body.theme-system-one .desktop-icon[data-window="musicWindow"],
body.theme-system-one .desktop-icon[data-window="aboutWindow"],
body.theme-system-one .desktop-icon[data-window="paintWindow"] {
    display: none;
}

body.theme-system-one .desktop-icon[data-window="fileWindow"] .icon-label {
    font-size: 0;
}

body.theme-system-one .desktop-icon[data-window="fileWindow"] .icon-label::after {
    content: "Finder";
    font-size: 13px;
}

body.theme-system-one .window-grid {
    display: block;
    position: relative;
    min-height: 520px;
    margin-top: -72px;
}

body.theme-system-one .window {
    display: none;
    max-width: 720px;
    margin: 20px auto;
}

body.theme-system-one .window.active {
    display: block;
    position: absolute;
    z-index: 6;
    left: 120px;
    top: 0;
    width: min(640px, calc(100% - 180px));
}

body.theme-system-one #fileWindow.active {
    left: 24px;
    top: 0;
    width: min(520px, calc(100% - 64px));
    min-height: 320px;
    z-index: 4;
}

body.theme-system-one #paintWindow.active,
body.theme-system-one #musicWindow.active,
body.theme-system-one #videoWindow.active,
body.theme-system-one #modWindow.active,
body.theme-system-one #aboutWindow.active {
    left: min(320px, 32vw);
    top: 112px;
    width: min(620px, calc(100% - 360px));
    z-index: 8;
}

body.theme-system-one #fileWindow .titlebar span:first-child {
    font-size: 0;
}

body.theme-system-one #fileWindow .titlebar span:first-child::after {
    content: "System 1.0 disk";
    font-size: 14px;
}

body.theme-system-one #fileWindow .window-content {
    padding: 0 14px 14px;
}

body.theme-system-one #fileWindow .window-content::before {
    content: "8 items                 197K in disk                 199K available";
    display: block;
    margin: 0 -14px 12px;
    padding: 2px 6px;
    border-bottom: 2px solid #000000;
    color: #000000;
    background: #ffffff;
    font: bold 12px Chicago, Geneva, "Helvetica Neue", Arial, sans-serif;
    white-space: pre;
}

body.theme-system-one #fileWindow h2,
body.theme-system-one #fileWindow .small-text {
    display: none;
}

body.theme-system-one #fileWindow .file-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(72px, 1fr));
    gap: 24px 18px;
    min-height: 190px;
    margin: 0;
    padding: 12px 22px 20px;
    list-style: none;
    border-right: 2px solid #000000;
    border-bottom: 2px solid #000000;
    background: #ffffff;
}

body.theme-system-one #fileWindow .file-row {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 5px;
    min-height: 64px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #000000;
    font: 12px Chicago, Geneva, "Helvetica Neue", Arial, sans-serif;
    text-transform: none;
}

body.theme-system-one #fileWindow .file-row::before {
    content: "";
    width: 28px;
    height: 34px;
    border: 2px solid #000000;
    background:
        linear-gradient(135deg, #ffffff 0 72%, #000000 72% 78%, #ffffff 78%),
        repeating-linear-gradient(to bottom, transparent 0 7px, #000000 7px 8px, transparent 8px 11px);
}

body.theme-system-one #fileWindow .file-row[data-file="SYSTEM"]::before,
body.theme-system-one #fileWindow .file-row[data-file="MOD"]::before,
body.theme-system-one #fileWindow .file-row[data-file="MUSIC"]::before,
body.theme-system-one #fileWindow .file-row[data-file="PAINT"]::before {
    width: 42px;
    height: 28px;
    border: 0;
    background:
        linear-gradient(to bottom, transparent 0 8px, #000000 8px 12px, transparent 12px),
        repeating-linear-gradient(90deg, #000000 0 2px, #ffffff 2px 4px);
}

body.theme-system-one #fileWindow .file-row[data-file="SYSTEM"] span:first-child {
    background: #000000;
    color: #ffffff;
}

body.theme-system-one #fileWindow .file-type {
    display: none;
}

body.theme-system-one #fileWindow .file-preview {
    min-height: 30px;
    margin-top: 10px;
    border: 1px solid #000000;
    background: #ffffff;
    font-size: 12px;
}

body.theme-system-one .paint-icon {
    background:
        linear-gradient(135deg, transparent 0 42%, #000000 42% 48%, transparent 48%),
        linear-gradient(to bottom, #ffffff 0 22%, #000000 22% 28%, #ffffff 28%);
}

.paint-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.paint-tool.active {
    filter: invert(1);
}

#paintCanvas {
    display: block;
    width: 100%;
    max-width: 520px;
    aspect-ratio: 2 / 1;
    border: 2px solid #000000;
    background: #ffffff;
    image-rendering: pixelated;
    cursor: crosshair;
    touch-action: none;
}

body.theme-system-one .small-text,
body.theme-system-one .footer {
    color: #333333;
}

body.theme-system-one .theme-extra,
body.theme-system-one .web-homepage-copy {
    display: none;
}

body.theme-system-one .window::after,
body.theme-system-one .page-shell::after {
    content: "";
    position: absolute;
    right: 2px;
    top: 28px;
    bottom: 2px;
    width: 12px;
    border-left: 1px solid #000000;
    background:
        linear-gradient(#ffffff 0 12px, #000000 12px 13px, #ffffff 13px calc(100% - 13px), #000000 calc(100% - 13px) calc(100% - 12px), #ffffff calc(100% - 12px));
    pointer-events: none;
}

body.theme-c64 .wallpaper {
    background:
        repeating-linear-gradient(to bottom, rgba(255,255,255,0.04) 0 2px, transparent 2px 10px),
        linear-gradient(to bottom, #4035c8, #151078);
}

body.theme-msdos .wallpaper {
    background: #000000;
}

body.theme-system-one .wallpaper {
    background:
        repeating-linear-gradient(45deg, #cfcfcf 0 2px, #bdbdbd 2px 4px);
}

body.theme-msdos .wallpaper::before,
body.theme-msdos .wallpaper::after,
body.theme-system-one .wallpaper::before,
body.theme-system-one .wallpaper::after,
body.theme-msdos .wallpaper,
body.theme-system-one .wallpaper,
body.theme-msdos .float-line,
body.theme-system-one .float-line {
    animation: none;
}

body.theme-msdos .wallpaper::before,
body.theme-msdos .wallpaper::after,
body.theme-system-one .wallpaper::before,
body.theme-system-one .wallpaper::after,
body.theme-msdos .float-line,
body.theme-system-one .float-line {
    display: none;
}

body.theme-concord .desktop {
    background: linear-gradient(135deg, rgba(6, 10, 35, 0.96), rgba(76, 8, 24, 0.94)), radial-gradient(circle at 78% 18%, rgba(255,255,255,0.18), transparent 22%);
}

body.theme-concord .signal-lab,
body.theme-concord .window-grid,
body.theme-concord .icon-row,
body.theme-concord .taskbar {
    display: none;
}

body.theme-concord .concord-console {
    display: block;
    max-width: 820px;
    border: 2px solid #f7fbff;
    background:
        linear-gradient(135deg, rgba(4,7,22,0.92), rgba(35,10,28,0.92)),
        radial-gradient(circle at 80% 20%, rgba(255,255,255,0.2), transparent 20%);
    color: #f7fbff;
    box-shadow: 0 0 24px rgba(255,61,61,0.42);
}

body.theme-concord .concord-console .mode-title {
    color: #ffd24a;
    letter-spacing: 2px;
}

.concord-window-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    margin: 10px 0 14px;
}

.concord-window-row span {
    min-height: 44px;
    border-radius: 50% 50% 44% 44%;
    border: 2px solid #f7fbff;
    background:
        radial-gradient(circle at 42% 38%, rgba(255,255,255,0.85) 0 3px, transparent 4px),
        linear-gradient(#244dff, #050713);
    box-shadow: inset 0 0 14px rgba(247,251,255,0.28);
}

.concord-gauges {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.concord-gauges div {
    padding: 12px;
    border: 1px solid rgba(247,251,255,0.8);
    background: rgba(0,0,0,0.28);
}

.concord-gauges strong,
.concord-gauges span {
    display: block;
}

.concord-gauges strong {
    color: #ffd24a;
    font-size: 20px;
}

.concord-gauges span {
    color: #f7fbff;
    font-size: 11px;
}

body.theme-concord .mode-output {
    border-color: #ff3d3d;
    background: rgba(5,7,19,0.72);
    color: #f7fbff;
}

body.theme-concord.concord-route-pulse .concord-window-row span {
    animation: concordWindowFlash 0.24s ease-in-out 4 alternate;
}

body.theme-emoji-web .desktop {
    background:
        radial-gradient(circle at 12% 20%, rgba(255, 255, 0, 0.8) 0 7px, transparent 8px),
        radial-gradient(circle at 82% 18%, rgba(255, 120, 0, 0.75) 0 8px, transparent 9px),
        radial-gradient(circle at 72% 46%, rgba(120, 180, 255, 0.22) 0 42px, transparent 43px),
        radial-gradient(circle at 33% 88%, rgba(255,77,243,0.18), transparent 26%),
        radial-gradient(circle at 76% 74%, rgba(57,255,20,0.14), transparent 22%),
        repeating-radial-gradient(circle at 24% 72%, rgba(255,255,255,0.72) 0 1px, transparent 1px 42px),
        #000000;
    border: 5px ridge #c0c0c0;
    box-shadow: 0 0 0 4px #808080, 0 0 28px #ff4df3;
}

body.theme-emoji-web #waveBorder {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    display: block;
    opacity: 0.48;
    mix-blend-mode: screen;
    z-index: 0;
}

body.theme-concord #waveBorder {
    opacity: 0.64;
    mix-blend-mode: screen;
}

body.theme-emoji-web .desktop {
    width: min(1060px, 94vw);
    margin: 0 auto;
    padding: 0 0 30px;
    overflow: visible;
}

body.theme-emoji-web .top-area {
    min-height: 76vh;
}

body.theme-emoji-web .window-grid,
body.theme-emoji-web .icon-row,
body.theme-emoji-web .taskbar,
body.theme-emoji-web .mode-feature,
body.theme-emoji-web #terminalWindow {
    display: none;
}

body.theme-emoji-web .control-row,
body.theme-emoji-web .theme-tray {
    justify-content: center;
}

body.theme-emoji-web .web-portal {
    display: block;
    max-width: 760px;
    margin: 18px auto 0;
    padding: 10px;
    color: #fff200;
    text-align: center;
    background:
        radial-gradient(circle at 20% 18%, rgba(255,255,255,0.22) 0 2px, transparent 3px),
        radial-gradient(circle at 76% 35%, rgba(255,255,255,0.2) 0 2px, transparent 3px),
        #000000;
    border: 6px ridge #c0c0c0;
    box-shadow: 0 0 0 4px #000080, 0 0 28px #ff4df3;
}

body.theme-emoji-web .web-starbar {
    color: #ffffff;
    font: bold 22px Georgia, serif;
    text-shadow: 3px 3px 0 #777777;
}

body.theme-emoji-web .web-portal-title {
    margin: 4px 0 6px;
    color: #ff5a7a;
    font: bold clamp(42px, 8vw, 86px) Georgia, serif;
    text-shadow: 3px 3px 0 #ffffff, 0 0 18px #ff4df3;
}

body.theme-emoji-web .web-planet-row {
    display: flex;
    justify-content: space-around;
    font-size: clamp(28px, 6vw, 54px);
    animation: webPlanetBob 2.6s steps(5, end) infinite alternate;
}

body.theme-emoji-web .web-portal p {
    max-width: 620px;
    margin: 12px auto;
    color: #ffff99;
    font: bold 18px Georgia, serif;
    line-height: 1.45;
    text-shadow: 1px 1px 0 #ff0000;
}

.web-link-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
}

.web-link {
    min-height: 44px;
    border: 4px outset #ffffff;
    background: linear-gradient(#fff200, #00ff66 48%, #ff4df3);
    color: #000080;
    font: bold 15px Arial, sans-serif;
    cursor: pointer;
}

.web-link:active {
    border-style: inset;
}

body.theme-emoji-web .web-under-construction {
    margin-top: 12px;
    padding: 6px;
    color: #ff2600;
    background: #fff200;
    font: bold 18px "Comic Sans MS", "Comic Sans", cursive;
    animation: webBlink 0.8s steps(2, end) infinite;
}

body.theme-emoji-web .desktop::before {
    background:
        radial-gradient(circle at 9% 12%, rgba(255,255,255,0.9) 0 1px, transparent 2px),
        radial-gradient(circle at 74% 18%, rgba(255,255,255,0.82) 0 1px, transparent 2px),
        radial-gradient(circle at 28% 68%, rgba(255,255,255,0.7) 0 1px, transparent 2px),
        radial-gradient(circle at 86% 72%, rgba(255,255,255,0.76) 0 1px, transparent 2px);
    background-size: 160px 130px, 220px 190px, 180px 170px, 260px 210px;
    opacity: 0.75;
}

body.theme-emoji-web .desktop::after {
    content: "";
    position: absolute;
    left: -20%;
    right: -20%;
    bottom: -18%;
    height: 72%;
    z-index: 0;
    pointer-events: none;
    background:
        repeating-radial-gradient(ellipse at 50% 112%, transparent 0 28px, rgba(255,77,243,0.56) 29px 32px, transparent 33px 58px),
        repeating-radial-gradient(ellipse at 50% 112%, transparent 0 48px, rgba(47,255,255,0.42) 49px 51px, transparent 52px 88px),
        repeating-linear-gradient(70deg, transparent 0 58px, rgba(255,242,0,0.36) 59px 61px, transparent 62px 116px),
        repeating-linear-gradient(110deg, transparent 0 58px, rgba(57,255,20,0.28) 59px 61px, transparent 62px 116px);
    background-size: 100% 120px, 100% 180px, 160px 100%, 160px 100%;
    filter: drop-shadow(0 0 10px #ff4df3);
    opacity: 0.62;
    transform: translate3d(0, 0, 0);
    will-change: background-position, transform;
    animation: desktopSynthwave 3.4s linear infinite;
    transition: opacity 0.08s ease, filter 0.08s ease, transform 0.08s ease;
}

body.theme-emoji-web.music-playing .desktop::after {
    animation-duration: 2.1s;
    opacity: 0.72;
}

body.theme-emoji-web.music-beat .desktop::after {
    opacity: 0.95;
    filter: drop-shadow(0 0 16px #ff4df3) drop-shadow(0 0 18px #2fffff) brightness(1.28);
    transform: translate3d(0, -10px, 0) skewY(-2deg) scaleY(1.04);
}

body.theme-emoji-web.music-playing .wallpaper::after {
    animation-duration: 3.2s;
}

body.theme-emoji-web.music-beat .wallpaper::after {
    opacity: 1;
    filter: brightness(1.22) saturate(1.25);
}

@keyframes desktopSynthwave {
    from {
        background-position: 0 0, 0 0, 0 0, 0 0;
        transform: translate3d(0, 0, 0) skewY(-2deg);
    }
    to {
        background-position: 0 120px, 0 180px, 160px 0, -160px 0;
        transform: translate3d(0, 16px, 0) skewY(-2deg);
    }
}

body.theme-emoji-web .wallpaper {
    background:
        radial-gradient(circle at 18% 35%, rgba(255,255,255,0.9) 0 1px, transparent 2px),
        radial-gradient(circle at 72% 22%, rgba(255,240,0,0.78) 0 11px, transparent 12px),
        radial-gradient(circle at 82% 68%, rgba(108,160,255,0.42) 0 58px, transparent 59px),
        radial-gradient(circle at 24% 72%, rgba(160,120,60,0.65) 0 48px, transparent 49px),
        #000000;
    background-size: 90px 90px, auto, auto, auto, auto;
}

body.theme-emoji-web .wallpaper::before {
    background-image:
        linear-gradient(90deg, #ff2600, #fff200, #39ff14, #2fffff, #ff4df3),
        linear-gradient(rgba(255,255,255,0.24) 2px, transparent 2px),
        linear-gradient(90deg, rgba(255,255,255,0.22) 2px, transparent 2px);
    background-size: 100% 8px, 92px 36px, 92px 36px;
    background-repeat: repeat-x, repeat, repeat;
}

body.theme-emoji-web .wallpaper::after {
    background:
        repeating-linear-gradient(to bottom, rgba(255,255,255,0.04), rgba(255,255,255,0.04) 1px, transparent 1px, transparent 5px),
        repeating-radial-gradient(ellipse at 50% 112%, transparent 0 30px, rgba(255,77,243,0.28) 31px 34px, transparent 35px 58px),
        repeating-radial-gradient(ellipse at 50% 112%, transparent 0 50px, rgba(47,255,255,0.22) 51px 53px, transparent 54px 90px),
        linear-gradient(112deg, transparent 0 39%, rgba(255,242,0,0.28) 40% 41%, transparent 42% 100%),
        linear-gradient(68deg, transparent 0 44%, rgba(57,255,20,0.22) 45% 46%, transparent 47% 100%);
    opacity: 0.8;
    animation-duration: 5.8s;
}

body.theme-emoji-web .top-area {
    padding-top: 62px;
    border: 4px ridge #c0c0c0;
    background:
        radial-gradient(circle at 8% 20%, #fff200 0 8px, transparent 9px),
        radial-gradient(circle at 92% 22%, #ff7a00 0 8px, transparent 9px),
        repeating-radial-gradient(circle at center, rgba(255,255,255,0.95) 0 1px, transparent 1px 20px),
        #000000;
}

body.theme-emoji-web .top-area::before {
    content: "Netscape Navigator  ::  squinky universe";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    padding: 5px 8px;
    background: #c0c0c0;
    border-bottom: 3px ridge #ffffff;
    color: #000000;
    font: bold 12px var(--terminal-font);
    text-align: left;
    text-shadow: none;
    box-shadow: inset 1px 1px 0 #ffffff, inset -1px -1px 0 #808080;
}

body.theme-emoji-web .top-area::after {
    content: "Back   Forward   Reload   Home   Search   Security   Stop";
    position: absolute;
    left: 0;
    right: 0;
    top: 25px;
    padding: 4px 8px;
    background: #b7b7b7;
    border-bottom: 3px ridge #ffffff;
    color: #000000;
    font: bold 11px var(--terminal-font);
    text-align: left;
    text-shadow: none;
    pointer-events: none;
}

body.theme-emoji-web #logo::before {
    content: "Welcome To...";
    display: block;
    color: #ffffff;
    font-style: italic;
    font-size: clamp(30px, 6vw, 58px);
    line-height: 0.9;
    text-shadow: 4px 4px 0 #808080, 0 0 12px #ffffff;
}

body.theme-emoji-web #logo::after {
    content: "";
    display: block;
    height: 6px;
    margin: 10px auto 4px auto;
    width: min(520px, 82%);
    background: linear-gradient(90deg, #ff2600, #fff200, #39ff14, #2fffff, #ff4df3);
}

body.theme-emoji-web .marquee {
    background: #c0c0c0;
    color: #000000;
    border: 3px ridge #ffffff;
    text-shadow: none;
    box-shadow: inset 1px 1px 0 #ffffff, inset -1px -1px 0 #808080;
}

body.theme-emoji-web #logo {
    color: #ff5cf4;
    text-align: center;
    text-shadow: 3px 3px 0 #7b0000, 0 0 12px #fff200, 0 0 22px #ff4df3;
}

body.theme-emoji-web .theme-extra {
    display: block;
    margin-top: 4px;
    color: #fff200;
    font-size: 0.5em;
    text-shadow: 2px 2px 0 #000000, 0 0 12px #39ff14;
}

body.theme-emoji-web .subtitle {
    color: #fff200;
    font: bold 16px Georgia, "Times New Roman", serif;
    text-shadow: 1px 1px 0 #000000, 0 0 8px #39ff14;
}

body.theme-emoji-web .web-homepage-copy {
    display: grid;
    justify-items: center;
    gap: 8px;
    max-width: 760px;
    margin: 12px auto;
    color: #ffff99;
    font: bold 16px Georgia, "Times New Roman", serif;
    text-align: center;
    text-shadow: 1px 1px 0 #000000, 0 0 8px #39ff14;
}

body.theme-emoji-web .web-homepage-copy p {
    display: inline-block;
    margin: 0;
    transition: transform 0.08s ease;
}

body.theme-emoji-web .web-rainbow-rule {
    width: min(560px, 86%);
    height: 5px;
    background: linear-gradient(90deg, #ff2600, #fff200, #39ff14, #2fffff, #ff4df3);
    box-shadow: 0 0 12px #ff4df3;
}

body.theme-emoji-web .web-song-box {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 5px 9px;
    background: #c0c0c0;
    border: 3px ridge #ffffff;
    color: #000080;
    font: bold 12px var(--terminal-font);
    text-shadow: none;
    box-shadow: 2px 2px 0 #808080;
    transition: transform 0.08s ease, filter 0.08s ease;
}

body.theme-emoji-web .web-player-buttons {
    color: #008000;
    letter-spacing: 2px;
}

body.theme-emoji-web .web-homepage-copy strong {
    display: inline-block;
    color: #ff2600;
    font-family: var(--terminal-font);
    animation: webBlink 0.8s steps(2, end) infinite;
    transition: transform 0.08s ease;
}

body.theme-emoji-web.music-playing .web-rainbow-rule {
    animation: rainbowSlide 1.2s linear infinite;
    background-size: 200% 100%;
}

body.theme-emoji-web.music-beat .web-song-box {
    transform: translateY(-3px) scale(1.06) rotate(-1deg);
    filter: brightness(1.18) saturate(1.2);
}

body.theme-emoji-web.music-beat .web-homepage-copy p,
body.theme-emoji-web.music-beat .web-homepage-copy strong {
    transform: translateY(-2px) scale(1.02);
}

@keyframes rainbowSlide {
    from { background-position: 0 0; }
    to { background-position: 200% 0; }
}

@keyframes webBlink {
    50% { opacity: 0.35; }
}

body.theme-emoji-web .palette-readout,
body.theme-emoji-web .os-readout,
body.theme-emoji-web .splash-readout,
body.theme-emoji-web .data-readout {
    background: #000000;
    color: #39ff14;
    border: 2px inset #c0c0c0;
    text-shadow: 0 0 8px #39ff14;
}

.theme-extra {
    font-weight: bold;
    white-space: nowrap;
}

.top-area {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 10px 12px 16px 12px;
    border: 2px dotted rgba(77,255,223,0.75);
    background: rgba(0,0,0,0.18);
}

h1 {
    margin: 2px 0 6px 0;
    font-size: 60px;
    line-height: 1;
    letter-spacing: 2px;
    color: var(--green);
    text-shadow: 2px 2px 0 #003318, 0 0 10px var(--green), 0 0 24px var(--cyan);
}

.logo-letter {
    display: inline-block;
    border: 0;
    outline-offset: 5px;
    cursor: pointer;
    transition: transform 0.08s, color 0.08s, text-shadow 0.08s;
}

.logo-letter.bounce {
    transform: translateY(-18px) scale(1.14) rotate(-4deg);
    color: white;
    text-shadow: 0 0 10px white, 0 0 24px var(--green), 0 0 40px var(--cyan);
}

.logo-letter.bounce-soft {
    transform: translateY(-10px) scale(1.08);
    color: var(--accent-yellow);
}

.logo-letter.bounce-wide {
    transform: translateY(-22px) scale(1.22) rotate(3deg);
    color: #ffffff;
    text-shadow: 0 0 12px white, 0 0 30px var(--accent-yellow), 0 0 48px var(--cyan);
}

.logo-letter:focus-visible {
    outline: 2px solid var(--accent-yellow);
}

.subtitle {
    color: #dcfff2;
    font-size: 15px;
    margin: 8px auto 12px auto;
    max-width: 680px;
}

.web-homepage-copy {
    display: none;
}

.palette-readout,
.os-readout,
.splash-readout {
    display: inline-block;
    margin: 0 4px 10px 4px;
    padding: 5px 8px;
    border: 2px inset var(--cyan);
    background: rgba(0,0,0,0.35);
    color: var(--accent-yellow);
    font-size: 12px;
    font-weight: bold;
}

.splash-readout {
    display: block;
    width: fit-content;
    max-width: 92%;
    margin: 0 auto 12px auto;
    color: #dffff5;
}

.theme-flash {
    position: absolute;
    left: 50%;
    top: 12px;
    z-index: 8;
    transform: translateX(-50%);
    padding: 7px 10px;
    border: 3px outset #dffff5;
    background: var(--accent-yellow);
    color: #001b12;
    font-size: 12px;
    font-weight: bold;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.16s ease, transform 0.16s ease;
}

.theme-flash.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(6px);
}

.dynamic-readouts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-bottom: 10px;
}

.data-readout {
    padding: 5px 8px;
    border: 2px inset var(--green);
    background: rgba(0,0,0,0.32);
    color: #aaffc7;
    font-family: var(--terminal-font);
    font-size: 12px;
    text-shadow: 0 0 6px var(--green);
}

.control-row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
}

.theme-tray {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-top: 10px;
}

.theme-chip {
    min-height: 30px;
    padding: 5px 8px;
    border: 2px outset #dffff5;
    background: rgba(0,0,0,0.38);
    color: #dffff5;
    cursor: pointer;
    font-size: 11px;
    font-weight: bold;
}

.theme-chip:hover,
.theme-chip.active {
    background: linear-gradient(to bottom, #ffffff, var(--accent-yellow), var(--green));
    color: #001b12;
}

button,
.desktop-icon,
.task-button,
.link-button { font-family: var(--font); }

.os-button,
.task-button,
.link-button {
    display: inline-block;
    padding: 8px 12px;
    background: linear-gradient(to bottom, #dffff5, var(--green) 48%, #0b5d64);
    color: #002a22;
    border: 3px outset #dffff5;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
}

.os-button:hover,
.task-button:hover,
.link-button:hover,
.desktop-icon:hover { filter: brightness(1.14); }

.danger-button { background: linear-gradient(to bottom, #ffffff, #f7ff6b 45%, #0b5d64); }

.icon-row {
    position: relative;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    padding: 16px 4px 10px 4px;
}

.desktop-icon {
    width: 94px;
    min-height: 92px;
    padding: 8px;
    border: 2px solid transparent;
    background: rgba(0,0,0,0.1);
    color: var(--text);
    text-align: center;
    cursor: pointer;
    transition: transform 0.16s ease, filter 0.16s ease, background 0.16s ease;
}

.desktop-icon:hover {
    border: 2px dotted var(--cyan);
    background: rgba(255,255,255,0.08);
    transform: translateY(-2px);
}

.icon-art {
    width: 46px;
    height: 38px;
    margin: 0 auto 6px auto;
    border: 3px outset #dffff5;
    background: linear-gradient(135deg, var(--green), var(--cyan));
    box-shadow: 0 0 10px var(--green);
}

.icon-art.folder { clip-path: polygon(0 22%, 32% 22%, 42% 5%, 100% 5%, 100% 100%, 0 100%); }
.icon-art.video { border-radius: 8px; position: relative; }
.icon-art.video::after {
    content: "";
    position: absolute;
    left: 17px;
    top: 9px;
    border-left: 15px solid #003b2f;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
}

.icon-art.record-icon {
    border-radius: 50%;
    background: radial-gradient(circle, #dffff5 0 5px, var(--green) 6px 10px, #00130d 11px 100%);
}

.icon-art.note { transform: rotate(-4deg); }
.icon-art.disk {
    position: relative;
    background: linear-gradient(135deg, var(--cyan), var(--blue));
}

.icon-art.disk::after {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 7px;
    height: 8px;
    background: #00130d;
    border: 2px inset #dffff5;
}

.icon-label { font-size: 12px; text-shadow: 1px 1px 0 #000; }

.window-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 16px;
    align-items: start;
    margin-top: 8px;
}

.window {
    position: relative;
    contain: layout paint;
    background: var(--panel);
    border: 4px ridge var(--cyan);
    box-shadow: 6px 6px 0 rgba(0,0,0,0.35), 0 0 20px rgba(77,255,223,0.42);
    text-align: left;
    overflow: hidden;
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

body:not(.warping) .window:hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
}

.window.active {
    box-shadow: 8px 8px 0 rgba(0,0,0,0.45), 0 0 24px var(--green), 0 0 38px rgba(77,255,223,0.55);
}

.window.minimized .window-content {
    display: none;
}

.window.minimized {
    opacity: 0.82;
}

.window.hidden-window {
    display: none;
}

.titlebar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 7px 9px;
    background: linear-gradient(to right, #032c2c, #0b7365, #1da86e);
    color: #edfff7;
    border-bottom: 3px solid var(--cyan);
    font-weight: bold;
    font-size: 13px;
    user-select: none;
}

body.theme-c64 .titlebar {
    background: #c5c0ff;
    color: #000040;
    border-bottom: 3px solid #fff35a;
}

body.theme-msdos .titlebar {
    background: #0000aa;
    color: #ffffff;
    border-bottom: 0;
}

body.theme-system-one .titlebar {
    justify-content: center;
    background: repeating-linear-gradient(to bottom, #ffffff 0 2px, #000000 2px 3px, #ffffff 3px 5px);
    color: #111111;
    border-bottom: 2px solid #000000;
    text-align: center;
    text-shadow:
        -2px 0 #ffffff,
        2px 0 #ffffff,
        0 -2px #ffffff,
        0 2px #ffffff;
}

body.theme-c64 .os-button,
body.theme-c64 .task-button,
body.theme-c64 .link-button,
body.theme-c64 .theme-chip {
    background: #7fffff;
    color: #000040;
    border: 3px solid #fff35a;
    box-shadow: 3px 3px 0 #151078;
    text-transform: uppercase;
}

body.theme-c64 .theme-chip.active {
    background: #fff35a;
    color: #000040;
}

body.theme-msdos .os-button,
body.theme-msdos .task-button,
body.theme-msdos .link-button,
body.theme-msdos .theme-chip {
    background: #c0c0c0;
    color: #000000;
    border: 2px outset #ffffff;
    box-shadow: none;
    text-transform: uppercase;
}

body.theme-msdos .theme-chip.active,
body.theme-msdos .task-button:hover,
body.theme-msdos .os-button:hover {
    background: #0000aa;
    color: #ffffff;
}

body.theme-system-one .os-button,
body.theme-system-one .task-button,
body.theme-system-one .link-button,
body.theme-system-one .theme-chip {
    background: #ffffff;
    color: #000000;
    border: 2px solid #000000;
    box-shadow: none;
    border-radius: 0;
}

body.theme-system-one .theme-chip.active,
body.theme-system-one .os-button:hover,
body.theme-system-one .task-button:hover {
    background: #000000;
    color: #ffffff;
    filter: none;
}

body.theme-c64 .palette-readout,
body.theme-c64 .os-readout,
body.theme-c64 .splash-readout,
body.theme-c64 .data-readout {
    border: 2px solid #7fffff;
    background: #151078;
    color: #fff35a;
    text-shadow: none;
}

body.theme-msdos .palette-readout,
body.theme-msdos .os-readout,
body.theme-msdos .splash-readout,
body.theme-msdos .data-readout,
body.theme-msdos .terminal-screen,
body.theme-msdos .file-preview {
    border: 1px solid #c0c0c0;
    background: #000000;
    color: #c0c0c0;
    text-shadow: none;
}

body.theme-system-one .palette-readout,
body.theme-system-one .os-readout,
body.theme-system-one .splash-readout,
body.theme-system-one .data-readout,
body.theme-system-one .terminal-screen,
body.theme-system-one .file-preview {
    border: 1px solid #000000;
    background: #ffffff;
    color: #000000;
    text-shadow: none;
}

body.theme-c64 .icon-art {
    border: 3px solid #c5c0ff;
    background: #7fffff;
    box-shadow: 3px 3px 0 #151078;
    border-radius: 0;
}

body.theme-c64 .icon-art {
    background: #c5c0ff;
}

body.theme-c64 .icon-art.video::after {
    border-left-color: #4035c8;
}

body.theme-c64 .icon-label::before {
    content: "LOAD ";
}

body.theme-msdos .icon-art {
    border: 2px solid #c0c0c0;
    background: #0000aa;
    box-shadow: none;
    border-radius: 0;
}

body.theme-system-one .icon-art {
    border: 2px solid #000000;
    background: #ffffff;
    box-shadow: none;
    border-radius: 0;
    clip-path: none;
}

body.theme-system-one .icon-art.folder {
    background:
        linear-gradient(to bottom, #ffffff 0 20%, #000000 20% 28%, #ffffff 28% 100%);
}

body.theme-system-one .icon-art.record-icon {
    border-radius: 0;
    background:
        linear-gradient(to bottom, #ffffff 0 24%, #000000 24% 30%, #ffffff 30% 100%);
}

body.theme-system-one .icon-label {
    padding: 2px 3px;
    color: #000000;
    text-shadow: none;
}

body.theme-system-one .desktop-icon:hover .icon-label {
    background: #000000;
    color: #ffffff;
}

body.theme-system-one .desktop-icon:hover,
body.theme-system-one .window:hover,
body.theme-msdos .desktop-icon:hover,
body.theme-msdos .window:hover {
    transform: none;
    filter: none;
}

body.theme-system-one:not(.warping) .desktop,
body.theme-msdos:not(.warping) .desktop {
    transform: none;
}

body.theme-concord .titlebar {
    background: linear-gradient(to right, #142b8f, #f7fbff 50%, #b80f2f);
    color: #050713;
}

body.theme-emoji-web .titlebar {
    background: #000080;
    color: #ffffff;
    border-bottom: 3px ridge #ffffff;
    text-shadow: 1px 1px 0 #000000;
}

body.theme-emoji-web .window,
body.theme-emoji-web .page-shell,
body.theme-emoji-web .video-card,
body.theme-emoji-web .gallery-card,
body.theme-emoji-web .guestbook-panel {
    background:
        radial-gradient(circle at 8% 8%, rgba(255,255,255,0.9) 0 1px, transparent 2px),
        radial-gradient(circle at 88% 18%, rgba(255,242,0,0.28), transparent 18%),
        #000000;
    border: 4px ridge #c0c0c0;
    box-shadow: 6px 6px 0 #808080, 0 0 18px #ff4df3;
}

body.theme-emoji-web .window-content h2,
body.theme-emoji-web .window-content h3,
body.theme-emoji-web .page-header h2,
body.theme-emoji-web .gallery-card h3,
body.theme-emoji-web .video-card h3 {
    color: #fff200;
    font-family: Georgia, "Times New Roman", serif;
    text-shadow: 2px 2px 0 #800000, 0 0 10px #ff4df3;
}

body.theme-emoji-web .os-button,
body.theme-emoji-web .task-button,
body.theme-emoji-web .link-button,
body.theme-emoji-web .theme-chip {
    background: linear-gradient(to bottom, #ffffff, #fff200 28%, #39ff14 56%, #ff4df3);
    color: #160020;
    border: 3px outset #ffffff;
    box-shadow: 2px 2px 0 #000000;
    text-shadow: none;
}

body.theme-emoji-web .theme-chip.active {
    background: linear-gradient(90deg, #ff2600, #fff200, #39ff14, #2fffff, #ff4df3);
    color: #000000;
}

body.theme-emoji-web .icon-art {
    border: 3px outset #ffffff;
    background: linear-gradient(135deg, #fff200, #39ff14 42%, #2fffff 70%, #ff4df3);
    box-shadow: 0 0 12px #fff200;
}

body.theme-emoji-web .desktop-icon {
    color: #ffffff;
    text-shadow: 2px 2px 0 #000000, 0 0 8px #ff4df3;
}

body.theme-emoji-web .taskbar,
body.theme-emoji-web .theme-tray {
    background: #c0c0c0;
    border: 3px ridge #ffffff;
    box-shadow: inset 1px 1px 0 #ffffff, inset -1px -1px 0 #808080;
}

body.theme-emoji-web .badge {
    background: #000000;
    color: #fff200;
    border: 2px dashed #ff4df3;
    text-shadow: 0 0 8px #ff4df3;
}

body.theme-emoji-web .status-card,
body.theme-emoji-web .terminal-screen,
body.theme-emoji-web .file-preview,
body.theme-emoji-web .now-playing {
    background: #000000;
    color: #39ff14;
    border: 2px inset #c0c0c0;
}

body.theme-emoji-web .gif-slot {
    border: 4px ridge #fff200;
    background: #000000;
    box-shadow: 0 0 14px #ff4df3;
}

body.theme-emoji-web .gif-caption {
    color: #ff2600;
    background: #fff200;
    border-top: 3px ridge #ffffff;
    text-shadow: 1px 1px 0 #ffffff;
}

.window-buttons { display: flex; gap: 4px; }
.fake-button {
    width: 14px;
    height: 14px;
    border: 2px outset #dffff5;
    background: var(--accent-yellow);
    cursor: pointer;
    padding: 0;
}

.fake-button:focus-visible {
    outline: 2px solid white;
    outline-offset: 2px;
}
.fake-button.green { background: var(--green); }
.fake-button.blue { background: var(--blue); }

.window-content {
    padding: 12px;
    font-size: 14px;
    line-height: 1.45;
}

.window-content h2,
.window-content h3 {
    margin-top: 0;
    color: #caffd7;
}

.small-text { color: var(--muted); font-size: 12px; }

.video-frame {
    width: 260px;
    max-width: 100%;
    margin: 8px auto;
    padding: 8px;
    border: 4px inset var(--blue);
    background: #000;
    box-shadow: inset 0 0 20px rgba(77,255,223,0.25);
}

.video-frame iframe {
    width: 100%;
    aspect-ratio: 9 / 16;
    border: none;
    display: block;
    background: #000;
}

.vinyl-stage {
    display: grid;
    grid-template-columns: 190px 1fr;
    gap: 14px;
    align-items: center;
    margin-top: 8px;
}

.turntable {
    position: relative;
    width: 190px;
    height: 190px;
    margin: 0 auto;
    background: linear-gradient(135deg, rgba(255,255,255,0.12), transparent), #09231f;
    border: 4px inset var(--cyan);
    box-shadow: inset 0 0 24px rgba(0,0,0,0.65), 0 0 18px rgba(77,255,223,0.45);
}

.web-audio-player {
    display: none;
}

.vinyl-record {
    position: absolute;
    left: 18px;
    top: 18px;
    width: 138px;
    height: 138px;
    border-radius: 50%;
    background: radial-gradient(circle, #caffd7 0 7px, var(--green) 8px 19px, #00100c 20px 100%);
    border: 4px solid #010605;
    box-shadow: 0 0 0 4px rgba(77,255,223,0.22), inset 0 0 18px rgba(255,255,255,0.08), 0 0 20px rgba(44,255,106,0.35);
    overflow: hidden;
    transform-origin: center;
}

.vinyl-record::before {
    content: "";
    position: absolute;
    inset: 9px;
    border-radius: 50%;
    background: repeating-radial-gradient(circle, transparent 0 6px, rgba(255,255,255,0.08) 7px 8px);
}

.vinyl-record::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: 3px;
    height: 50%;
    background: rgba(255,255,255,0.5);
    transform: translateX(-50%);
}

body.music-playing .vinyl-record { animation: recordSpin 0.95s linear infinite; }

body.music-playing .vinyl-record.beat {
    scale: 1.045;
    box-shadow: 0 0 0 4px rgba(77,255,223,0.35), inset 0 0 18px rgba(255,255,255,0.1), 0 0 28px rgba(44,255,106,0.8);
}

@keyframes recordSpin {
    from { rotate: 0deg; }
    to { rotate: 360deg; }
}

.needle {
    position: absolute;
    right: 20px;
    top: 28px;
    width: 70px;
    height: 10px;
    background: #dffff5;
    border: 2px solid #00130d;
    transform-origin: right center;
    transform: rotate(33deg);
    box-shadow: 0 0 10px rgba(77,255,223,0.5);
}

.needle::after {
    content: "";
    position: absolute;
    left: -8px;
    top: 7px;
    width: 10px;
    height: 22px;
    background: var(--accent-yellow);
    border: 2px solid #00130d;
    transform: rotate(-10deg);
}

body.music-playing .needle { animation: needleGroove 0.4s ease-in-out infinite alternate; }

@keyframes needleGroove {
    from { transform: rotate(31deg); }
    to { transform: rotate(35deg); }
}

body.theme-emoji-web .vinyl-stage {
    grid-template-columns: minmax(220px, 0.75fr) 1fr;
}

body.theme-emoji-web .turntable {
    display: none;
}

body.theme-emoji-web .web-audio-player {
    display: grid;
    place-items: center;
    min-height: 210px;
    padding: 10px;
    border: 4px ridge #c0c0c0;
    background: #000000;
    box-shadow: 0 0 16px #ff4df3, inset 0 0 28px rgba(47,255,255,0.16);
}

.web-player-screen {
    width: min(220px, 100%);
    aspect-ratio: 1.18;
    display: grid;
    place-items: center;
    gap: 8px;
    padding: 10px;
    border: 3px inset #ffffff;
    background:
        radial-gradient(circle at 50% 50%, rgba(255,242,0,0.24), transparent 30%),
        radial-gradient(circle at 18% 18%, rgba(47,255,255,0.22), transparent 24%),
        #000033;
    transition: transform 0.08s ease, filter 0.08s ease;
}

.web-player-title,
.web-player-controls {
    padding: 3px 6px;
    background: #c0c0c0;
    border: 2px outset #ffffff;
    color: #000080;
    font: bold 11px var(--terminal-font);
    text-shadow: none;
}

.web-player-orbit {
    width: 84px;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 4px dotted #fff200;
    background:
        radial-gradient(circle, #39ff14 0 10px, transparent 11px),
        radial-gradient(circle at 30% 36%, #ff4df3 0 6px, transparent 7px),
        radial-gradient(circle at 70% 64%, #2fffff 0 7px, transparent 8px),
        #08002b;
    box-shadow: 0 0 18px #fff200, inset 0 0 18px #ff4df3;
    animation: webPlayerOrbit 5s linear infinite;
}

body.theme-emoji-web.music-playing .web-player-orbit {
    animation-duration: 1.4s;
}

body.theme-emoji-web.music-beat .web-player-screen {
    filter: brightness(1.2) saturate(1.25);
    transform: translateY(-3px) scale(1.03);
}

@keyframes webPlayerOrbit {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.now-playing {
    padding: 8px;
    border: 2px dotted var(--green);
    background: rgba(0,0,0,0.25);
    margin-bottom: 8px;
}

.volume-bars {
    display: flex;
    gap: 4px;
    height: 42px;
    align-items: end;
    margin-top: 10px;
}

.volume-bars span {
    width: 10px;
    background: linear-gradient(to top, var(--green), var(--cyan));
    border: 1px solid rgba(255,255,255,0.45);
    box-shadow: 0 0 8px var(--green);
    height: 8px;
}

body.music-playing .volume-bars span:nth-child(1) { animation: barMove 0.35s ease-in-out infinite alternate; }
body.music-playing .volume-bars span:nth-child(2) { animation: barMove 0.25s ease-in-out infinite alternate; }
body.music-playing .volume-bars span:nth-child(3) { animation: barMove 0.5s ease-in-out infinite alternate; }
body.music-playing .volume-bars span:nth-child(4) { animation: barMove 0.3s ease-in-out infinite alternate; }
body.music-playing .volume-bars span:nth-child(5) { animation: barMove 0.42s ease-in-out infinite alternate; }
body.music-playing .volume-bars span:nth-child(6) { animation: barMove 0.22s ease-in-out infinite alternate; }

@keyframes barMove {
    from { height: 8px; }
    to { height: 40px; }
}

.progress-item { margin: 10px 0; }

.progress-label {
    display: flex;
    justify-content: space-between;
    color: #eafff7;
    font-size: 13px;
    margin-bottom: 4px;
}

.progress-shell {
    height: 16px;
    background: rgba(0,0,0,0.55);
    border: 2px inset var(--cyan);
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    width: 0%;
    background: repeating-linear-gradient(45deg, var(--green), var(--green) 8px, var(--cyan) 8px, var(--cyan) 16px);
    box-shadow: 0 0 12px var(--green);
}

.devlog {
    margin-top: 10px;
    padding: 10px;
    border: 2px dotted var(--green);
    background: rgba(0,0,0,0.28);
}

.devlog-entry {
    margin: 8px 0;
    padding-left: 8px;
    border-left: 3px solid var(--cyan);
}

.file-list {
    margin: 8px 0 0 0;
    padding: 0;
    list-style: none;
    font-family: var(--terminal-font);
    color: #aaffc7;
}

.file-row {
    display: flex;
    justify-content: space-between;
    width: 100%;
    gap: 12px;
    margin: 6px 0;
    padding: 6px 8px;
    color: #aaffc7;
    font: inherit;
    text-align: left;
    border: 2px dotted rgba(77,255,223,0.48);
    background: rgba(0,0,0,0.22);
    cursor: pointer;
}

.file-row:hover,
.file-row:focus-visible {
    outline: none;
    border-color: var(--accent-yellow);
    background: rgba(77,255,223,0.16);
    color: #ffffff;
}

.file-type {
    color: var(--accent-yellow);
}

.file-preview {
    min-height: 72px;
    margin-top: 10px;
    padding: 9px;
    border: 3px inset var(--green);
    background: rgba(0,0,0,0.4);
    color: #aaffc7;
    font-family: var(--terminal-font);
    font-size: 12px;
    line-height: 1.45;
}

.file-preview.reading {
    color: var(--accent-yellow);
    animation: fileReading 0.35s steps(2) infinite;
}

@keyframes fileReading {
    50% { opacity: 0.55; }
}

.terminal-screen {
    min-height: 180px;
    max-height: 230px;
    overflow-y: auto;
    background: linear-gradient(rgba(0,255,153,0.06), rgba(0,0,0,0.2)), #020807;
    border: 3px inset var(--cyan);
    color: #aaffc7;
    padding: 10px;
    font-family: var(--terminal-font);
    font-size: 13px;
    line-height: 1.4;
    text-shadow: 0 0 5px var(--green);
}

.terminal-line { margin-bottom: 6px; }

.terminal-input-row {
    display: flex;
    align-items: center;
    margin-top: 8px;
    border: 2px inset var(--green);
    background: rgba(0,0,0,0.55);
    min-height: 44px;
}

.prompt {
    padding: 8px;
    color: var(--cyan);
    font-family: var(--terminal-font);
    font-weight: bold;
}

#terminalInput {
    flex: 1;
    min-width: 0;
    padding: 10px;
    border: none;
    outline: none;
    background: transparent;
    color: white;
    font-family: var(--terminal-font);
    font-size: 16px;
}

.terminal-submit {
    margin: 6px 0 0 0;
    padding: 8px 12px;
    font-size: 13px;
}

.quick-command-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.quick-command {
    font-size: 12px;
    padding: 6px 8px;
}

.badge-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.badge {
    padding: 5px 8px;
    border: 2px outset #dffff5;
    background: rgba(77,255,223,0.18);
    color: #eafff7;
    font-size: 12px;
}

.status-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 10px;
}

.status-card {
    border: 2px dotted var(--cyan);
    padding: 8px;
    background: rgba(0,0,0,0.25);
    text-align: center;
    font-size: 12px;
}

.status-light {
    width: 18px;
    height: 18px;
    margin: 6px auto;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 12px var(--green), 0 0 24px var(--green);
}

.status-light.alert {
    background: var(--accent-yellow);
    box-shadow: 0 0 12px var(--accent-yellow), 0 0 24px var(--accent-yellow);
}

.taskbar {
    position: relative;
    z-index: 5;
    margin-top: 16px;
    padding: 8px;
    background: rgba(0,0,0,0.45);
    border: 3px inset var(--cyan);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

body.music-playing .window,
body.music-playing .desktop-icon,
body.music-playing .taskbar,
body.music-playing .theme-chip,
body.music-playing .os-button,
body.music-playing .task-button,
body.music-playing .badge,
body.music-playing .status-light,
body.music-playing .gif-slot,
body.music-playing .data-readout {
    transition: transform 0.08s ease, filter 0.08s ease, box-shadow 0.08s ease;
    will-change: transform;
}

body.music-beat .window.active {
    transform: translateY(-3px) scale(1.006);
    filter: brightness(1.08);
}

body.music-beat .desktop-icon:nth-child(odd) {
    transform: translateY(-5px) scale(1.04) rotate(-1deg);
}

body.music-beat .desktop-icon:nth-child(even) {
    transform: translateY(3px) scale(1.03) rotate(1deg);
}

body.music-beat .taskbar {
    transform: translateY(-2px);
}

body.music-beat .theme-chip.active,
body.music-beat .os-button:hover,
body.music-beat .task-button:hover,
body.music-beat .link-button:hover {
    transform: translateY(-3px) scale(1.04);
}

body.music-beat .badge:nth-child(odd),
body.music-beat .data-readout:nth-child(odd) {
    transform: translateY(-3px) rotate(-1deg);
}

body.music-beat .badge:nth-child(even),
body.music-beat .data-readout:nth-child(even) {
    transform: translateY(2px) rotate(1deg);
}

body.music-beat .status-light {
    transform: scale(1.28);
    filter: brightness(1.35);
}

body.music-beat .gif-slot {
    transform: translateY(-2px) scale(1.01);
}

body.theme-msdos.music-playing .window,
body.theme-msdos.music-playing .desktop-icon,
body.theme-msdos.music-playing .taskbar,
body.theme-msdos.music-playing .theme-chip,
body.theme-msdos.music-playing .os-button,
body.theme-msdos.music-playing .task-button,
body.theme-system-one.music-playing .window,
body.theme-system-one.music-playing .desktop-icon,
body.theme-system-one.music-playing .taskbar,
body.theme-system-one.music-playing .theme-chip,
body.theme-system-one.music-playing .os-button,
body.theme-system-one.music-playing .task-button {
    will-change: auto;
}

body.theme-msdos.music-beat .window.active,
body.theme-msdos.music-beat .desktop-icon,
body.theme-msdos.music-beat .taskbar,
body.theme-system-one.music-beat .window.active,
body.theme-system-one.music-beat .desktop-icon,
body.theme-system-one.music-beat .taskbar {
    transform: none;
    filter: none;
}

body.theme-emoji-web.music-playing .desktop::after {
    animation-duration: 2.1s;
    opacity: 0.72;
}

body.theme-emoji-web.music-beat .desktop::after {
    opacity: 0.95;
    filter: drop-shadow(0 0 16px #ff4df3) drop-shadow(0 0 18px #2fffff) brightness(1.28);
    transform: translate3d(0, -10px, 0) skewY(-2deg) scaleY(1.04);
}

body.theme-emoji-web.music-beat .web-song-box {
    transform: translateY(-3px) scale(1.06) rotate(-1deg);
    filter: brightness(1.18) saturate(1.2);
}

.footer {
    position: relative;
    z-index: 2;
    margin-top: 14px;
    color: #b7d8d0;
    font-size: 12px;
    text-align: center;
}

.hidden-view {
    display: none;
}

.driver-loader {
    position: fixed;
    inset: 0;
    z-index: 9400;
    display: none;
    align-items: center;
    justify-content: center;
    background:
        repeating-linear-gradient(to bottom, rgba(255,255,255,0.04), rgba(255,255,255,0.04) 1px, transparent 1px, transparent 5px),
        radial-gradient(circle at center, rgba(77,255,223,0.16), transparent 38%),
        rgba(0, 9, 7, 0.94);
}

.driver-loader.visible {
    display: flex;
}

.driver-loader.c64-load {
    z-index: 12000;
    background:
        repeating-linear-gradient(to bottom, rgba(255,255,255,0.09), rgba(255,255,255,0.09) 1px, rgba(0,0,0,0.28) 1px, rgba(0,0,0,0.28) 5px),
        #4035c8;
    color: #c5c0ff;
}

.driver-box {
    width: min(620px, 90vw);
    padding: 22px;
    border: 4px ridge var(--cyan);
    background: rgba(0,0,0,0.78);
    box-shadow: 0 0 26px var(--cyan), inset 0 0 24px rgba(44,255,106,0.16);
    text-align: center;
}

.driver-loader.c64-load .driver-box {
    border: 14px solid #151078;
    background: #4035c8;
    color: #c5c0ff;
    box-shadow: 0 0 0 4px #c5c0ff, 0 0 40px rgba(0,0,0,0.8), inset 0 0 70px rgba(0,0,0,0.45);
    text-align: left;
    text-transform: uppercase;
}

.driver-loader.c64-load .driver-title,
.driver-loader.c64-load .driver-line {
    color: #c5c0ff;
    text-shadow: none;
    font-family: "Courier New", monospace;
}

.driver-loader.c64-load .driver-progress {
    border: 2px solid #c5c0ff;
    background: #151078;
}

.driver-loader.c64-load .driver-progress span {
    background: repeating-linear-gradient(90deg, #c5c0ff 0 16px, #fff35a 16px 32px);
    animation-duration: 2.1s;
}

.driver-loader.dos-load {
    z-index: 12000;
    background: #000000;
    color: #c0c0c0;
}

.driver-loader.dos-load .driver-box {
    border: 2px solid #c0c0c0;
    background: #000000;
    box-shadow: none;
    text-align: left;
}

.driver-loader.dos-load .driver-title,
.driver-loader.dos-load .driver-line {
    color: #c0c0c0;
    text-shadow: none;
    font-family: "Courier New", monospace;
    font-size: 16px;
}

.driver-loader.dos-load .driver-progress {
    height: 16px;
    border: 1px solid #c0c0c0;
    background: #000000;
}

.driver-loader.dos-load .driver-progress span {
    background: repeating-linear-gradient(90deg, #c0c0c0 0 12px, #000000 12px 16px);
    animation-duration: 1.8s;
}

.driver-loader.mac-load {
    z-index: 12000;
    background:
        repeating-linear-gradient(45deg, #ffffff 0 2px, #d8d8d8 2px 4px),
        #d8d8d8;
    color: #000000;
}

.driver-loader.mac-load .driver-box {
    border: 2px solid #000000;
    background: #ffffff;
    box-shadow: 8px 8px 0 rgba(0,0,0,0.24);
    color: #000000;
}

.driver-loader.mac-load .driver-title,
.driver-loader.mac-load .driver-line {
    color: #000000;
    text-shadow: none;
    font-family: Chicago, Geneva, "Helvetica Neue", Arial, sans-serif;
}

.driver-loader.mac-load .driver-progress {
    border: 1px solid #000000;
    background: #ffffff;
}

.driver-loader.mac-load .driver-progress span {
    background: repeating-linear-gradient(90deg, #000000 0 8px, #ffffff 8px 12px);
    animation-duration: 1.6s;
}

.driver-title {
    color: var(--green);
    font-size: clamp(26px, 7vw, 54px);
    font-weight: bold;
    text-shadow: 0 0 18px var(--green), 0 0 40px var(--cyan);
}

.driver-progress {
    height: 18px;
    margin: 18px auto 8px auto;
    border: 3px inset var(--cyan);
    background: rgba(0,0,0,0.85);
    overflow: hidden;
}

.driver-progress span {
    display: block;
    height: 100%;
    background: repeating-linear-gradient(45deg, var(--green), var(--green) 8px, var(--cyan) 8px, var(--cyan) 16px);
    animation: driverLoad 1.05s ease-out forwards;
}

.driver-line {
    color: #aaffc7;
    font-family: var(--terminal-font);
    font-size: 13px;
}

@keyframes driverLoad {
    from { width: 0%; }
    to { width: 100%; }
}

.site-page {
    display: none;
    width: 980px;
    max-width: 94%;
    margin: 34px auto 48px auto;
}

.site-page.active {
    display: block;
}

.page-shell {
    contain: layout paint;
    padding: 18px;
    border: 4px ridge var(--cyan);
    background: linear-gradient(to bottom, rgba(8, 60, 50, 0.94), rgba(4, 23, 28, 0.96));
    box-shadow: 0 0 22px var(--cyan), 0 0 48px rgba(44,255,106,0.62), inset 0 0 36px rgba(0,0,0,0.55);
}

.page-header {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    border-bottom: 3px solid var(--cyan);
    padding-bottom: 10px;
    margin-bottom: 14px;
}

.page-header h2 {
    margin: 0;
    color: var(--green);
    text-shadow: 0 0 16px var(--green);
}

.page-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.video-card,
.gallery-card {
    border: 3px ridge var(--cyan);
    background: rgba(0,0,0,0.32);
    padding: 12px;
    box-shadow: 5px 5px 0 rgba(0,0,0,0.3), 0 0 18px rgba(77,255,223,0.3);
}

.gallery-tile {
    min-height: 130px;
    margin-bottom: 10px;
    border: 3px inset var(--green);
    background:
        radial-gradient(circle at 35% 35%, rgba(247,255,107,0.18), transparent 18%),
        linear-gradient(135deg, rgba(44,255,106,0.2), rgba(45,140,255,0.16)),
        rgba(0,0,0,0.28);
}

.media-tile {
    overflow: hidden;
    background: #000;
}

.media-tile img {
    display: block;
    width: 100%;
    height: 190px;
    object-fit: cover;
    image-rendering: pixelated;
}

.gif-slot {
    display: none;
    margin-top: 10px;
    border: 3px inset var(--cyan);
    background: rgba(0,0,0,0.42);
    overflow: hidden;
}

body.theme-emoji-web .gif-slot {
    display: block;
}

.gif-slot.compact iframe {
    display: block;
    width: 100%;
    height: 170px;
    border: 0;
}

.gif-caption {
    padding: 6px 8px;
    border-top: 2px dotted var(--green);
    color: var(--accent-yellow);
    font: bold 11px var(--terminal-font);
    text-align: center;
    background: rgba(0,0,0,0.35);
}

.gallery-card h3,
.video-card h3 {
    margin-top: 0;
    color: #caffd7;
}

.guestbook-layout {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 14px;
}

.guestbook-panel {
    border: 3px ridge var(--cyan);
    background: rgba(0,0,0,0.32);
    padding: 12px;
    box-shadow: 5px 5px 0 rgba(0,0,0,0.3), 0 0 18px rgba(77,255,223,0.3);
}

.guestbook-panel h3 {
    margin-top: 0;
    color: #caffd7;
}

.guestbook-form {
    display: grid;
    gap: 10px;
}

.guestbook-form label {
    display: grid;
    gap: 4px;
    color: var(--accent-yellow);
    font-size: 12px;
    font-weight: bold;
}

.guestbook-form input,
.guestbook-form textarea {
    width: 100%;
    padding: 9px;
    border: 3px inset var(--cyan);
    background: rgba(0,0,0,0.58);
    color: #eafff7;
    font: 14px var(--terminal-font);
}

.guestbook-status {
    min-height: 34px;
    margin-top: 10px;
    padding: 8px;
    border: 2px dotted var(--green);
    background: rgba(0,0,0,0.25);
    color: #aaffc7;
    font: 12px var(--terminal-font);
}

.guestbook-list {
    display: grid;
    gap: 10px;
    max-height: 460px;
    overflow-y: auto;
    padding-right: 4px;
}

.guestbook-entry,
.guestbook-empty {
    padding: 10px;
    border: 2px dotted rgba(77,255,223,0.6);
    background: rgba(0,0,0,0.26);
}

.guestbook-entry-name {
    color: var(--accent-yellow);
    font-weight: bold;
}

.guestbook-entry-date {
    color: var(--muted);
    font: 11px var(--terminal-font);
}

.guestbook-entry-message {
    margin-top: 6px;
    white-space: pre-wrap;
}

.screensaver {
    position: fixed;
    inset: 0;
    z-index: 9500;
    display: none;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background:
        repeating-linear-gradient(to bottom, rgba(255,255,255,0.04), rgba(255,255,255,0.04) 1px, transparent 1px, transparent 5px),
        radial-gradient(circle at center, rgba(44,255,106,0.16), transparent 32%),
        rgba(0, 7, 4, 0.94);
}

.screensaver.visible {
    display: flex;
}

.screensaver::before,
.screensaver::after {
    content: "";
    position: absolute;
    inset: -22%;
    pointer-events: none;
}

.screensaver::before {
    background:
        repeating-radial-gradient(circle at center, transparent 0 28px, rgba(77,255,223,0.18) 30px 32px),
        conic-gradient(from 0deg, transparent, rgba(44,255,106,0.28), transparent, rgba(45,140,255,0.22), transparent);
    mix-blend-mode: screen;
    animation: saverSpin 18s linear infinite, saverPulse 4.5s ease-in-out infinite alternate;
}

.screensaver::after {
    background-image:
        linear-gradient(rgba(77,255,223,0.16) 2px, transparent 2px),
        linear-gradient(90deg, rgba(44,255,106,0.14) 2px, transparent 2px);
    background-size: 86px 86px;
    transform: perspective(650px) rotateX(62deg) translateY(18vh);
    animation: saverGrid 6s linear infinite;
    opacity: 0.45;
}

.screensaver-core {
    position: absolute;
    width: min(54vw, 430px);
    aspect-ratio: 1;
    border-radius: 50%;
    border: 3px dotted rgba(77,255,223,0.75);
    box-shadow:
        0 0 28px var(--cyan),
        inset 0 0 42px rgba(44,255,106,0.32);
    animation: saverOrbit 7s ease-in-out infinite alternate;
}

.screensaver-core::before,
.screensaver-core::after {
    content: "";
    position: absolute;
    inset: 13%;
    border-radius: 50%;
    border: 3px ridge var(--green);
    box-shadow: 0 0 24px var(--green);
    animation: saverRing 5.2s ease-in-out infinite alternate;
}

.screensaver-core::after {
    inset: 31%;
    border-color: var(--accent-yellow);
    animation-delay: -1.3s;
}

.screensaver-logo {
    position: relative;
    z-index: 2;
    color: var(--green);
    font-size: clamp(42px, 11vw, 116px);
    font-weight: bold;
    letter-spacing: 2px;
    text-shadow: 0 0 18px var(--green), 0 0 48px var(--cyan), 3px 3px 0 #00130d;
    animation: saverLogoFloat 8s ease-in-out infinite alternate, startupLogoPulse 1.8s ease-in-out infinite alternate;
}

.screensaver-text {
    position: absolute;
    z-index: 2;
    bottom: 10%;
    color: #dffff5;
    font-family: var(--terminal-font);
    font-size: 13px;
    text-align: center;
    text-shadow: 0 0 10px var(--green);
}

body.theme-emoji-web .screensaver {
    background:
        repeating-linear-gradient(to bottom, rgba(255,255,255,0.04), rgba(255,255,255,0.04) 1px, transparent 1px, transparent 5px),
        radial-gradient(circle at 18% 24%, #fff200 0 9px, transparent 10px),
        radial-gradient(circle at 78% 62%, rgba(47,255,255,0.3), transparent 22%),
        #000000;
}

body.theme-emoji-web .screensaver::before {
    background:
        repeating-radial-gradient(ellipse at center, transparent 0 42px, rgba(255,77,243,0.3) 43px 46px, transparent 47px 82px),
        conic-gradient(from 0deg, transparent, rgba(255,242,0,0.2), transparent, rgba(47,255,255,0.22), transparent);
    animation: saverSpin 14s linear infinite, saverPulse 2.5s ease-in-out infinite alternate;
}

body.theme-emoji-web .screensaver::after {
    background-image:
        linear-gradient(rgba(255,77,243,0.28) 2px, transparent 2px),
        linear-gradient(90deg, rgba(47,255,255,0.22) 2px, transparent 2px);
    opacity: 0.62;
}

body.theme-emoji-web .screensaver-core {
    border: 4px ridge #c0c0c0;
    border-radius: 0;
    width: min(54vw, 500px);
    background:
        radial-gradient(circle at 28% 32%, #fff200 0 12px, transparent 13px),
        radial-gradient(circle at 72% 58%, #2fffff 0 15px, transparent 16px),
        #000033;
    box-shadow: 0 0 26px #ff4df3, inset 0 0 28px rgba(255,242,0,0.16);
}

body.theme-emoji-web .screensaver-core::before,
body.theme-emoji-web .screensaver-core::after {
    border-color: #fff200;
    box-shadow: 0 0 24px #ff4df3;
}

body.theme-emoji-web .screensaver-logo {
    color: #ff4df3;
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    text-shadow: 4px 4px 0 #808080, 0 0 14px #ffffff, 0 0 44px #ff4df3;
}

body.theme-emoji-web .screensaver-text,
body.theme-emoji-web .saver-signal {
    color: #fff200;
    text-shadow: 1px 1px 0 #000000, 0 0 12px #39ff14;
}

body.theme-c64 .screensaver {
    background:
        repeating-linear-gradient(to bottom, rgba(255,255,255,0.1), rgba(255,255,255,0.1) 1px, rgba(0,0,0,0.34) 1px, rgba(0,0,0,0.34) 5px),
        #151078;
}

body.theme-c64 .screensaver::before {
    background:
        repeating-linear-gradient(45deg, transparent 0 22px, rgba(197,192,255,0.18) 23px 27px, transparent 28px 54px),
        conic-gradient(from 0deg, #4035c8, #151078, #7fffff, #4035c8);
    opacity: 0.55;
    animation: saverSpin 9s steps(12) infinite;
}

body.theme-c64 .screensaver::after {
    background-image:
        linear-gradient(rgba(197,192,255,0.24) 2px, transparent 2px),
        linear-gradient(90deg, rgba(197,192,255,0.2) 2px, transparent 2px);
    opacity: 0.35;
}

body.theme-c64 .screensaver-core {
    border-radius: 0;
    border: 8px solid #c5c0ff;
    background: #4035c8;
    box-shadow: 8px 8px 0 #151078, inset 0 0 60px rgba(0,0,0,0.5);
}

body.theme-c64 .screensaver-core::before,
body.theme-c64 .screensaver-core::after {
    border-radius: 0;
    border-color: #fff35a;
    box-shadow: 0 0 0 4px #151078;
}

body.theme-c64 .screensaver-logo {
    color: #c5c0ff;
    font-size: clamp(38px, 10vw, 92px);
    text-shadow: 5px 5px 0 #151078;
}

body.theme-c64 .screensaver-text,
body.theme-c64 .saver-signal {
    color: #fff35a;
    text-shadow: 3px 3px 0 #151078;
    text-transform: uppercase;
}

body.theme-msdos .screensaver {
    background: #000000;
}

body.theme-msdos .screensaver::before,
body.theme-msdos .screensaver::after {
    display: none;
}

body.theme-msdos .screensaver-core {
    display: none;
}

body.theme-msdos .screensaver-logo {
    color: #c0c0c0;
    font: bold clamp(28px, 8vw, 82px) "Courier New", monospace;
    text-shadow: none;
    animation: dosSaverBounce 5.5s steps(12, end) infinite alternate;
}

body.theme-msdos .screensaver-text,
body.theme-msdos .saver-signal {
    color: #c0c0c0;
    text-shadow: none;
}

body.theme-system-one .screensaver {
    background:
        repeating-linear-gradient(45deg, #ffffff 0 2px, #d8d8d8 2px 4px),
        #d8d8d8;
}

body.theme-system-one .screensaver::before,
body.theme-system-one .screensaver::after {
    display: none;
}

body.theme-system-one .screensaver-core {
    width: min(48vw, 360px);
    border-radius: 0;
    border: 2px solid #000000;
    background: #ffffff;
    box-shadow: 8px 8px 0 rgba(0,0,0,0.25);
    animation: macSaverWindow 5s steps(10, end) infinite alternate;
}

body.theme-system-one .screensaver-core::before {
    inset: 0;
    border: 0;
    border-radius: 0;
    background:
        repeating-linear-gradient(to bottom, #ffffff 0 2px, #000000 2px 3px, #ffffff 3px 5px);
    height: 24px;
    box-shadow: none;
}

body.theme-system-one .screensaver-core::after {
    display: none;
}

body.theme-system-one .screensaver-logo {
    color: #000000;
    font-size: clamp(34px, 8vw, 82px);
    text-shadow: none;
}

body.theme-system-one .screensaver-text,
body.theme-system-one .saver-signal {
    color: #000000;
    text-shadow: none;
}

@keyframes macSaverWindow {
    from { transform: translate(-18vw, -16vh); }
    to { transform: translate(18vw, 16vh); }
}

@keyframes dosSaverBounce {
    from { transform: translate(-22vw, -24vh); }
    to { transform: translate(22vw, 22vh); }
}

.saver-signal {
    position: absolute;
    z-index: 2;
    color: var(--accent-yellow);
    font-family: var(--terminal-font);
    font-size: 12px;
    text-shadow: 0 0 10px var(--accent-yellow);
    animation: saverSignal 10s ease-in-out infinite alternate;
}

.saver-signal.one {
    left: 10%;
    top: 18%;
}

.saver-signal.two {
    right: 9%;
    top: 62%;
    animation-delay: -2.4s;
}

.saver-signal.three {
    left: 28%;
    bottom: 18%;
    animation-delay: -4.1s;
}

@keyframes saverSpin {
    to { transform: rotate(360deg); }
}

@keyframes saverPulse {
    from { opacity: 0.42; filter: hue-rotate(0deg); }
    to { opacity: 0.8; filter: hue-rotate(38deg); }
}

@keyframes saverGrid {
    from { background-position: 0 0; }
    to { background-position: 0 86px; }
}

@keyframes saverOrbit {
    from { transform: translate(-8vw, -4vh) rotate(-8deg) scale(0.94); }
    to { transform: translate(8vw, 5vh) rotate(8deg) scale(1.06); }
}

@keyframes saverRing {
    from { transform: rotate(0deg) scale(0.88); opacity: 0.58; }
    to { transform: rotate(45deg) scale(1.12); opacity: 0.95; }
}

@keyframes saverLogoFloat {
    from { transform: translate(-12vw, -8vh) rotate(-2deg); }
    to { transform: translate(12vw, 9vh) rotate(2deg); }
}

@keyframes saverSignal {
    from { transform: translateY(-18px) translateX(-8px); opacity: 0.38; }
    to { transform: translateY(18px) translateX(12px); opacity: 1; }
}

body.warping .desktop {
    animation: desktopWarp 0.34s ease-in-out infinite alternate;
    filter: hue-rotate(25deg) saturate(1.25);
}

body.warping .window { animation: windowWarp 0.42s ease-in-out infinite alternate; }
body.warping .desktop-icon { animation: iconWarp 0.36s ease-in-out infinite alternate; }
body.warping .wallpaper::before { animation-duration: 1.2s; }
body.warping .float-line { animation-duration: 1s; opacity: 0.9; }

body.theme-c64.c64-warping .desktop,
body.theme-c64.c64-warping .window,
body.theme-c64.c64-warping .taskbar {
    animation: c64Warp 0.12s steps(2, end) infinite;
    filter: contrast(1.6) saturate(1.8);
}

body.theme-c64.c64-warping::before {
    opacity: 0.76;
}

body.theme-msdos.dos-warping .desktop,
body.theme-msdos.dos-warping #terminalWindow {
    animation: dosWarp 0.16s steps(2, end) infinite;
    filter: contrast(1.4);
}

body.theme-msdos.dos-warping .terminal-screen {
    background:
        repeating-linear-gradient(to bottom, #000000 0 14px, #0000aa 14px 28px),
        #000000;
}

body.theme-system-one.mac-warping .desktop::after {
    content: "☹ System Error\A Finder encountered a warp.\A [ Restart ]";
    white-space: pre;
    position: fixed;
    z-index: 11000;
    left: 50%;
    top: 50%;
    width: min(420px, 82vw);
    padding: 28px;
    transform: translate(-50%, -50%);
    border: 3px solid #000000;
    background: #ffffff;
    color: #000000;
    box-shadow: 10px 10px 0 rgba(0,0,0,0.24);
    font: bold 18px Chicago, Geneva, "Helvetica Neue", Arial, sans-serif;
    text-align: center;
}

body.theme-system-one.mac-warping .window,
body.theme-system-one.mac-warping .desktop-icon {
    animation: macJitter 0.18s steps(2, end) infinite;
}

body.theme-emoji-web.web-warping .web-portal {
    animation: webWarpSpin 0.42s steps(2, end) infinite alternate;
}

body.theme-emoji-web.web-warping .web-link {
    animation: webBlink 0.18s steps(2, end) infinite;
}

body.theme-concord.concord-warping .desktop {
    animation: concordBank 0.5s ease-in-out infinite alternate;
}

@keyframes webPlanetBob {
    from { transform: translateY(0); }
    to { transform: translateY(-8px); }
}

@keyframes webWarpSpin {
    from { transform: rotate(-1.5deg) scale(1.01); filter: hue-rotate(0deg) saturate(1.4); }
    to { transform: rotate(1.5deg) scale(1.035); filter: hue-rotate(80deg) saturate(2); }
}

@keyframes concordBank {
    from { transform: perspective(900px) rotateX(1deg) rotateZ(-1deg); filter: saturate(1.05); }
    to { transform: perspective(900px) rotateX(-1deg) rotateZ(1deg); filter: saturate(1.35) brightness(1.08); }
}

@keyframes concordWindowFlash {
    from { filter: brightness(1); transform: translateY(0); }
    to { filter: brightness(1.75); transform: translateY(-3px); }
}

@keyframes macJitter {
    from { transform: translate(-1px, 0); }
    to { transform: translate(1px, 1px); }
}

@keyframes dosWarp {
    from { transform: translateX(-3px); }
    to { transform: translateX(3px); }
}

@keyframes c64Warp {
    0% { transform: translate(0, 0); }
    33% { transform: translate(5px, -2px); }
    66% { transform: translate(-4px, 3px); }
    100% { transform: translate(2px, 1px); }
}

@keyframes desktopWarp {
    from { transform: rotate(-0.45deg) scale(1.006); }
    to { transform: rotate(0.45deg) scale(1.018); }
}

@keyframes windowWarp {
    from { transform: translate(-2px, -1px); }
    to { transform: translate(2px, 3px); }
}

@keyframes iconWarp {
    from { transform: translateY(-3px) rotate(-2deg); }
    to { transform: translateY(3px) rotate(2deg); }
}

.squink-note {
    position: absolute;
    z-index: 20;
    pointer-events: none;
    padding: 6px 9px;
    color: #001b12;
    background: var(--accent-yellow);
    border: 3px outset white;
    font-weight: bold;
    font-size: 12px;
    animation: noteFloat 1.8s ease-out forwards;
}

.click-spark {
    position: fixed;
    z-index: 9000;
    pointer-events: none;
    width: 10px;
    height: 10px;
    border: 2px solid var(--accent-yellow);
    box-shadow: 0 0 10px var(--accent-yellow), 0 0 18px var(--green);
    transform: translate(-50%, -50%) rotate(45deg);
    animation: clickSpark 0.72s ease-out forwards;
}

@keyframes clickSpark {
    from { opacity: 1; scale: 0.55; }
    to { opacity: 0; scale: 3.4; rotate: 110deg; }
}

body.dance-party .desktop {
    animation: desktopDance 0.28s ease-in-out infinite alternate, desktopGlow 1s ease-in-out infinite alternate;
}

body.dance-party .window,
body.dance-party .desktop-icon {
    filter: hue-rotate(25deg) saturate(1.25) brightness(1.08);
}

@keyframes desktopDance {
    from { transform: translateY(-1px) scale(1.004); }
    to { transform: translateY(1px) scale(1.012); }
}

@keyframes noteFloat {
    from { opacity: 1; transform: translateY(0) rotate(-4deg); }
    to { opacity: 0; transform: translateY(-55px) rotate(6deg); }
}

@media (max-width: 820px) {
    .desktop-wrap {
        max-width: 92%;
        margin-top: 26px;
    }

    #waveBorder {
        inset: -22px;
        width: calc(100% + 44px);
        height: calc(100% + 44px);
    }

    body::before {
        animation: none;
        opacity: 0.14;
    }

    body::after {
        background: radial-gradient(circle at center, transparent 58%, rgba(0,0,0,0.24) 100%);
    }

    .wallpaper::before,
    .wallpaper,
    .float-line {
        animation: none;
    }

    .float-line {
        opacity: 0.28;
    }

    .desktop {
        padding: 12px;
        animation: none;
        box-shadow: 0 0 14px var(--cyan), 0 0 26px rgba(44,255,106,0.52), inset 0 0 28px rgba(0,0,0,0.5);
    }

    .window,
    .video-card,
    .gallery-card,
    .guestbook-panel {
        box-shadow: 4px 4px 0 rgba(0,0,0,0.28), 0 0 12px rgba(77,255,223,0.24);
    }

    h1 {
        font-size: 40px;
        letter-spacing: 1px;
    }

    .startup-box {
        padding: 18px;
    }

    .startup-logo {
        font-size: clamp(38px, 12vw, 64px);
        overflow-wrap: anywhere;
    }

    .boot-lines {
        font-size: 11px;
    }

    .startup-button,
    .os-button,
    .task-button,
    .link-button {
        min-height: 42px;
    }

    .terminal-input-row {
        min-height: 50px;
    }

    .logo-letter.bounce,
    .logo-letter.bounce-soft,
    .logo-letter.bounce-wide {
        transform: translateY(-10px) scale(1.08);
    }
    .subtitle { font-size: 14px; }
    .window-grid { grid-template-columns: 1fr; }
    .page-grid { grid-template-columns: 1fr; }
    .guestbook-layout { grid-template-columns: 1fr; }

    .page-header {
        align-items: stretch;
    }

    .page-header .os-button {
        width: 100%;
    }

    .desktop-icon {
        width: 82px;
        min-height: 86px;
    }

    .icon-row {
        justify-content: center;
        gap: 8px;
    }

    .vinyl-stage { grid-template-columns: 1fr; }

    .turntable {
        width: 170px;
        height: 170px;
    }

    .vinyl-record {
        width: 122px;
        height: 122px;
    }

    .needle {
        right: 14px;
        top: 25px;
        width: 62px;
    }

    .file-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
    }

    body:not(.warping) .desktop {
        transform: none;
    }

    body.warping .desktop { animation: desktopWarpMobile 0.34s ease-in-out infinite alternate; }
    body.warping .window { animation: windowWarpMobile 0.42s ease-in-out infinite alternate; }

    @keyframes desktopWarpMobile {
        from { transform: rotate(-0.2deg) scale(1.002); }
        to { transform: rotate(0.2deg) scale(1.008); }
    }

    @keyframes windowWarpMobile {
        from { transform: translate(-1px, 0); }
        to { transform: translate(1px, 2px); }
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }

    body:not(.warping) .desktop {
        transform: none;
    }

    .screensaver::before,
    .screensaver::after {
        opacity: 0.22;
    }

    .wallpaper,
    .wallpaper::before,
    .wallpaper::after {
        animation: none !important;
    }
}