:root {
    --desktop-background-forest:
        radial-gradient(
            circle at 15% 15%,
            rgba(103, 189, 132, 0.7),
            transparent 32%
        ),
        radial-gradient(
            circle at 85% 80%,
            rgba(41, 106, 136, 0.75),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #102d2a,
            #16473e 48%,
            #142d46
        );

    --desktop-background-sunset:
        radial-gradient(
            circle at 18% 20%,
            rgba(255, 184, 96, 0.68),
            transparent 34%
        ),
        radial-gradient(
            circle at 82% 75%,
            rgba(136, 82, 170, 0.76),
            transparent 36%
        ),
        linear-gradient(
            135deg,
            #552f49,
            #a35450 48%,
            #40345f
        );

    --desktop-background-ocean:
        radial-gradient(
            circle at 18% 18%,
            rgba(69, 193, 210, 0.55),
            transparent 33%
        ),
        radial-gradient(
            circle at 82% 75%,
            rgba(45, 92, 174, 0.72),
            transparent 38%
        ),
        linear-gradient(
            135deg,
            #082d45,
            #0d5368 48%,
            #182d59
        );

    --desktop-background:
        var(--desktop-background-forest);

    --window-background: rgba(250, 252, 255, 0.97);
    --window-header-background: rgba(231, 239, 243, 0.97);
    --window-text: #172235;
    --muted-text: #596579;

    --accent: #27875f;
    --accent-dark: #176546;
    --danger: #d94a57;

    --taskbar-background: rgba(12, 27, 35, 0.92);
    --taskbar-height: 64px;

    --window-shadow:
        0 24px 65px rgba(0, 0, 0, 0.31),
        0 4px 14px rgba(0, 0, 0, 0.18);

    --active-window-shadow:
        0 30px 85px rgba(0, 0, 0, 0.43),
        0 5px 18px rgba(0, 0, 0, 0.24);
}

:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset:3px;
}

.desktop-icon:focus-visible,
.start-app:focus-visible,
.taskbar-app:focus-visible,
.start-button:focus-visible,
.power-button:focus-visible {
    outline: 3px solid rgba(255, 255, 255, 0.92);
    outline-offset:2px;
}

.window-header:focus-visible {
    position: relative;
    z-index: 2;

    outline: 3px solid var(--accent);
    outline-offset: -3px;
}

/* =========================================================
   Base styles
   ========================================================= */

* {
    box-sizing: border-box;
}

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

body {
    overflow: hidden;

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    color: white;
}

button,
input,
textarea {
    font: inherit;
}

button:not(:disabled) {
    cursor: pointer;
}

.hidden {
    display: none !important;
}

.visually-hidden {
    position: absolute;

    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);
    white-space: nowrap;

    border: 0;
}

/* =========================================================
   Desktop
   ========================================================= */

.desktop {
    position: relative;

    width: 100vw;
    height: 100vh;
    min-height: 520px;

    overflow: hidden;

    background-color: #102d2a;
    background-image: var(--desktop-background);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.desktop::before {
    position: absolute;
    inset: 0;

    content: "";

    pointer-events: none;

    background:
        linear-gradient(
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px
        );

    background-size: 40px 40px;
}

/* =========================================================
   Desktop icons
   ========================================================= */

.desktop-icons {
    position: absolute;
    top: 22px;
    left: 18px;
    z-index: 1;

    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(72px, 94px)
        );

    width: min(
        390px,
        calc(100vw - 36px)
    );

    gap: 16px;
}

.desktop-icon {
    display: flex;

    width: 94px;
    min-height: 92px;
    padding: 8px;

    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;

    border: 1px solid transparent;
    border-radius: 12px;

    background: transparent;
    color: white;

    text-align: center;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.8);
}

.desktop-icon:hover,
.desktop-icon:focus-visible {
    border-color: rgba(255, 255, 255, 0.32);
    background: rgba(255, 255, 255, 0.13);
    outline: none;
}

.desktop-icon:active {
    transform: scale(0.97);
}

.desktop-icon-image {
    display: grid;

    width: 52px;
    height: 52px;

    place-items: center;

    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 15px;

    background: rgba(255, 255, 255, 0.17);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.2);

    font-size: 2rem;
}

.desktop-icon-label {
    font-size: 0.83rem;
    font-weight: 650;
}

.desktop[data-wallpaper="forest"] {
    background-image:
        var(--desktop-background-forest);
}

.desktop[data-wallpaper="sunset"] {
    background-image:
        var(--desktop-background-sunset);
}

.desktop[data-wallpaper="ocean"] {
    background-image:
        var(--desktop-background-ocean);
}

.desktop.grid-hidden::before {
    display: none;
}

body.dark-theme {
    --window-background: rgba(26, 37, 48, 0.98);
    --window-header-background: rgba(35, 48, 60, 0.98);
    --window-text: #ecf3f5;
    --muted-text: #aebbc5;
}

body.dark-theme .window-content,
body.dark-theme .start-menu,
body.dark-theme .settings-section,
body.dark-theme .notes-editor,
body.dark-theme .notes-toolbar,
body.dark-theme .nature-challenge {
    color: var(--window-text);
}

body.dark-theme .start-menu,
body.dark-theme .settings-section {
    background: rgba(30, 42, 53, 0.98);
}

body.dark-theme .start-menu-header,
body.dark-theme .start-menu-footer {
    background: rgba(40, 55, 65, 0.96);
}

body.dark-theme .start-search,
body.dark-theme .notes-title-input,
body.dark-theme .notes-editor {
    border-color: rgba(255, 255, 255, 0.13);
    background: rgba(20, 31, 41, 0.9);
    color: var(--window-text);
}

body.dark-theme .notes-toolbar,
body.dark-theme .nature-progress-panel,
body.dark-theme .nature-challenge {
    border-color: rgba(255, 255, 255, 0.11);
    background: rgba(34, 47, 58, 0.84);
}

body.dark-theme .window-control {
    color: #dce6eb;
}

body.dark-theme .wallpaper-option,
body.dark-theme .theme-option {
    border-color: rgba(255, 255, 255, 0.12);

    background: rgba(39, 53, 64, 0.9);
    color: var(--window-text);
}

body.dark-theme .wallpaper-option.selected,
body.dark-theme .theme-option.selected {
    border-color: var(--accent);

    background: rgba(39, 135, 95, 0.18);
}

body.dark-theme .settings-section {
    border-color: rgba(255, 255, 255, 0.1);

    background: rgba(34, 47, 58, 0.88);
}

body.dark-theme .calculator-display,
body.dark-theme .calculator-history {
    border-color: rgba(255, 255, 255, 0.1);

    background: rgba(34, 47, 58, 0.88);
}

body.dark-theme .calculator-key {
    border-color: rgba(255, 255, 255, 0.1);

    background: rgba(39, 53, 64, 0.92);
    color: var(--window-text);
}

body.dark-theme .calculator-key-secondary {
    background: rgba(49, 64, 76, 0.96);
    color: #dce5ea;
}

body.dark-theme .calculator-key-operator {
    border-color: rgba(63, 192, 132, 0.25);

    background: rgba(39, 135, 95, 0.19);
    color: #73d6a3;
}

body.dark-theme .calculator-key-equals {
    background: var(--accent);
    color: white;
}

body.dark-theme .calculator-history-item {
    color: var(--window-text);
}

body.dark-theme .shortcut-card {
    border-color: rgba(63, 192, 132, 0.19);

    background: rgba(39, 135, 95, 0.11);
}

body.dark-theme kbd {
    border-color: rgba(255, 255, 255, 0.14);

    background: rgba(35, 48, 60, 0.96);
    color: var(--window-text);
}

body.dark-theme .diagnostics-panel {
    border-color: rgba(255, 255, 255, 0.1);

    background: rgba(34, 47, 58, 0.88);
}

body.dark-theme .diagnostics-result {
    background: rgba(20, 31, 41, 0.72);
    color: var(--window-text);
}

body.dark-theme .diagnostics-button {
    border-color: rgba(63, 192, 132, 0.24);

    background: rgba(39, 135, 95, 0.16);
    color: #73d6a3;
}

/* =========================================================
   Application windows
   ========================================================= */

.app-window {
    position: absolute;
    z-index: 10;

    width: min(720px, calc(100vw - 220px));
    min-width: 340px;

    height: min(490px, calc(100vh - 150px));
    min-height: 300px;

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.48);
    border-radius: 17px;

    background: var(--window-background);
    box-shadow: var(--window-shadow);

    color: var(--window-text);

    opacity: 0.96;

    transition:
        width 180ms ease,
        height 180ms ease,
        box-shadow 160ms ease,
        opacity 160ms ease,
        border-radius 180ms ease;

    will-change: left, top;

    animation: open-window 190ms ease-out;
}

#welcome-window {
    top: 70px;
    left: 160px;
}

#notes-window {
    top: 105px;
    left: 255px;

    width: min(700px, calc(100vw - 290px));
    height: min(540px, calc(100vh - 145px));
}

#nature-window {
    top: 55px;
    left: 340px;

    width: min(750px, calc(100vw - 375px));
}

#settings-window {
    top: 85px;
    left:300px;

    width: min(720px, calc(100vw - 335px));
    height: min(560px, calc(100vh - 145px));
}

#calculator-window {
    top: 75px;
    left: 390px;

    width: min(680px, calc(100vw - 425px));
    height: min(570px, calc(100vh - 145px));
}

.app-window.active-window {
    box-shadow: var(--active-window-shadow);
    opacity: 1;
}

.app-window.maximized {
    top: 8px !important;
    left: 8px !important;

    width: calc(100vw - 16px) !important;
    height: calc(
        100vh -
        var(--taskbar-height) -
        16px
    ) !important;

    max-width: none;
    max-height: none;

    border-radius: 13px;
}

.app-window.maximized .window-header {
    cursor: default;
}

.app-window.dragging {
    opacity: 1;
    animation: none;

    box-shadow:
        0 34px 95px rgba(0, 0, 0, 0.48),
        0 8px 24px rgba(0, 0, 0, 0.28);
}

.app-window.dragging .window-header {
    cursor: grabbing;
}

.app-window.dragging,
.app-window.dragging * {
    user-select: none;
}

.app-window:not(.active-window) .window-header {
    filter: saturate(0.72);
}

.window-header {
    display: flex;

    height: 48px;
    padding-left: 16px;

    align-items: center;
    justify-content: space-between;

    border-bottom: 1px solid rgba(20, 35, 55, 0.12);

    background: var(--window-header-background);

    user-select: none;
    touch-action: none;
    cursor: grab;
}

.window-title {
    display: flex;
    align-items: center;
    gap: 9px;

    font-size: 0.92rem;
    font-weight: 750;
}

.window-controls {
    display: flex;
    height: 100%;
}

.window-controls,
.window-controls button {
    cursor: default;
}

.window-control {
    width: 48px;
    height: 100%;

    border: 0;

    background: transparent;
    color: #344052;

    font-size: 1.1rem;
}

.window-control:not(:disabled):hover {
    background: rgba(41, 54, 76, 0.1);
}

.maximize-control {
    font-size: 1rem;
    font-weight: 700;
}

.window-control:not(:disabled):focus-visible {
    position: relative;
    z-index: 1;

    outline: 2px solid var(--accent);
    outline-offset: -3px;
}

.close-control:not(:disabled):hover {
    background: var(--danger);
    color: white;
}

.window-content {
    height: calc(100% - 48px);
    padding: 28px 32px;

    overflow-x: hidden;
    overflow-y: auto;

    scrollbar-color: rgba(72, 88, 104, 0.55) transparent;
    scrollbar-width: thin;
}

.window-content::-webkit-scrollbar {
    width: 10px;
}

.window-content::-webkit-scrollbar-track {
    background: transparent;
}

.window-content::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    border-radius: 10px;

    background: rgba(72, 88, 104, 0.48);
    background-clip: padding-box;
}

/* =========================================================
   Welcome application
   ========================================================= */

.welcome-grid {
    display: grid;

    grid-template-columns: 132px minmax(0, 1fr);
    gap: 28px;

    align-items: start;
}

.welcome-logo {
    display: grid;

    width: 124px;
    height: 124px;

    place-items: center;

    border-radius: 30px;

    background:
        linear-gradient(
            145deg,
            #55b982,
            #1c7656
        );

    box-shadow:
        0 18px 34px rgba(28, 118, 86, 0.3),
        inset 0 1px 1px rgba(255, 255, 255, 0.3);

    font-size: 4rem;
}

.eyebrow {
    margin: 0 0 8px;

    color: var(--accent);

    font-size: 0.74rem;
    font-weight: 850;
    letter-spacing: 0.14em;
}

.window-content h1 {
    margin: 0 0 15px;

    font-size: clamp(1.8rem, 4vw, 2.5rem);
    line-height: 1.08;
}

.window-content h2 {
    margin: 0 0 10px;

    font-size: clamp(1.65rem, 3vw, 2.1rem);
    line-height: 1.15;
}

.window-content h3 {
    margin: 0;
}

.window-content p {
    margin: 0 0 13px;

    color: var(--muted-text);

    line-height: 1.58;
}

.system-card {
    display: flex;

    margin-top: 21px;
    padding: 15px;

    align-items: center;
    gap: 12px;

    border: 1px solid rgba(39, 135, 95, 0.18);
    border-radius: 13px;

    background: rgba(39, 135, 95, 0.08);
}

.system-card div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.system-card strong {
    font-size: 0.9rem;
}

.system-card span:not(.status-dot) {
    color: var(--muted-text);
    font-size: 0.83rem;
}

.status-dot {
    width: 12px;
    height: 12px;

    flex: 0 0 auto;

    border-radius: 50%;

    background: #2bad68;
    box-shadow: 0 0 0 5px rgba(43, 173, 104, 0.13);
}

/* =========================================================
   Final system diagnostics
   ========================================================= */

.system-status-content {
    display: flex;

    min-width: 0;

    flex: 1;
    flex-direction: column;
    gap: 2px;
}

.diagnostics-button {
    min-height: 34px;
    padding: 0 12px;

    border: 1px solid rgba(39, 135, 95, 0.22);
    border-radius: 9px;

    background: rgba(39, 135, 95, 0.08);
    color: var(--accent-dark);

    font-size: 0.72rem;
    font-weight: 750;
}

.diagnostics-button:hover,
.diagnostics-button:focus-visible {
    background: rgba(39, 135, 95, 0.15);
}

.diagnostics-panel {
    margin-top: 14px;
    padding: 14px;

    border: 1px solid rgba(72, 88, 104, 0.14);
    border-radius: 13px;

    background: rgba(241, 246, 248, 0.8);
}

.diagnostics-heading {
    display: flex;

    padding-bottom: 10px;

    align-items: center;
    justify-content: space-between;
    gap: 12px;

    border-bottom: 1px solid rgba(72, 88, 104, 0.12);
}

.diagnostics-heading > div {
    display: flex;

    flex-direction: column;
    gap: 2px;
}

.diagnostics-heading strong {
    font-size: 0.82rem;
}

.diagnostics-heading span {
    color: var(--muted-text);

    font-size: 0.68rem;
}

.diagnostics-summary {
    padding: 5px 8px;

    border-radius: 999px;

    background: rgba(72, 88, 104, 0.08);
    color: var(--muted-text);

    font-weight: 750;
}

.diagnostics-summary.passed {
    background: rgba(39, 135, 95, 0.12);
    color: var(--accent-dark);
}

.diagnostics-summary.failed {
    background: rgba(217, 74, 87, 0.12);
    color: var(--danger);
}

.diagnostics-results {
    display: grid;

    margin: 11px 0 0;
    padding: 0;

    gap: 7px;

    list-style: none;
}

.diagnostics-result {
    display: grid;

    padding: 8px 9px;

    grid-template-columns: 22px minmax(0, 1fr);
    align-items: start;
    gap: 7px;

    border-radius: 9px;

    background: rgba(255, 255, 255, 0.55);

    color: var(--window-text);

    font-size: 0.7rem;
    line-height: 1.4;
}

.diagnostics-result-icon {
    display: grid;

    width: 20px;
    height: 20px;

    place-items: center;

    border-radius: 50%;

    font-size: 0.68rem;
    font-weight: 850;
}

.diagnostics-result.passed
.diagnostics-result-icon {
    background: rgba(39, 135, 95, 0.14);
    color: var(--accent-dark);
}

.diagnostics-result.failed
.diagnostics-result-icon {
    background: rgba(217, 74, 87, 0.14);
    color: var(--danger);
}

.build-label {
    color: rgba(255, 255, 255, 0.62);

    font-size: 0.64rem;
    font-weight: 700;
}

/* =========================================================
   Keyboard shortcut information
   ========================================================= */

.shortcut-card {
    margin-top: 18px;
    padding: 15px;

    border: 1px solid rgba(39, 135, 95, 0.16);
    border-radius: 13px;

    background: rgba(39, 135, 95, 0.06);
}

.shortcut-card > strong {
    display: block;

    margin-bottom: 11px;

    color: var(--window-text);

    font-size: 0.82rem;
}

.shortcut-list {
    display: grid;
    gap: 8px;
}

.shortcut-list > span {
    display: grid;

    grid-template-columns:
        auto auto auto auto auto minmax(0, 1fr);

    align-items: center;
    gap: 5px;

    color: var(--muted-text);

    font-size: 0.7rem;
}

.shortcut-list > span > span:last-child {
    margin-left: 5px;
}

kbd {
    display: inline-grid;

    min-width: 24px;
    height: 24px;
    padding: 0 6px;

    place-items: center;
    
    border: 1px solid rgba(72, 88, 104, 0.24);
    border-bottom-width: 2px;
    border-radius: 6px;

    background: rgba(247, 250, 252, 0.94);
    color: var(--window-text);

    font-family: inherit;
    font-size: 0.67rem;
    font-weight: 750'
}

/* =========================================================
   Shared application content
   ========================================================= */

.application-heading {
    display: grid;

    grid-template-columns: 90px minmax(0, 1fr);
    gap: 22px;

    align-items: start;

    margin-bottom: 24px;
}

.application-heading-icon {
    display: grid;

    width: 82px;
    height: 82px;

    place-items: center;

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            #f4d76e,
            #d5a637
        );

    box-shadow: 0 12px 25px rgba(172, 127, 27, 0.21);

    font-size: 2.8rem;
}

.nature-heading-icon {
    background:
        linear-gradient(
            145deg,
            #77c995,
            #2f8b61
        );

    box-shadow: 0 12px 25px rgba(39, 135, 95, 0.23);
}

/* =========================================================
   Notes application
   ========================================================= */

.notes-window-content {
    display: flex;

    flex-direction: column;
    gap: 16px;
}

.notes-app-heading {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;
    gap: 22px;
}

.notes-app-heading h2 {
    margin-bottom: 7px;
}

.notes-app-heading p:last-child {
    margin-bottom: 0;
}

.notes-save-state {
    display: flex;

    min-width: 100px;
    padding: 8px 11px;

    align-items: center;
    justify-content: center;
    gap: 8px;

    border: 1px solid rgba(39, 135, 95, 0.16);
    border-radius: 999px;

    background: rgba(39, 135, 95, 0.07);
    color: var(--muted-text);

    font-size: 0.76rem;
    white-space: nowrap;
}

.notes-save-dot {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #2bad68;
    box-shadow: 0 0 0 3px rgba(43, 173, 104, 0.12);
}

.notes-save-state.saving .notes-save-dot {
    background: #d39e2a;
    box-shadow: 0 0 0 3px rgba(211, 158, 42, 0.13);
}

.notes-save-state.unsaved .notes-save-dot {
    background: #d16b45;
    box-shadow: 0 0 0 3px rgba(209, 107, 69, 0.13);
}

.notes-toolbar {
    display: flex;

    padding: 10px;

    align-items: center;
    justify-content: space-between;
    gap: 12px;

    border: 1px solid rgba(66, 82, 107, 0.13);
    border-radius: 13px;

    background: rgba(238, 242, 249, 0.68);
}

.notes-document-name {
    display: flex;

    min-width: 0;

    flex: 1;
    align-items: center;
    gap: 8px;
}

.notes-document-name label {
    color: var(--muted-text);

    font-size: 0.78rem;
    font-weight: 700;
}

.notes-title-input {
    min-width: 100px;
    width: min(260px, 100%);
    height: 36px;
    padding: 0 10px;

    border: 1px solid transparent;
    border-radius: 9px;

    background: rgba(255, 255, 255, 0.72);
    color: var(--window-text);

    outline: none;

    font-weight: 700;
}

.notes-title-input:hover {
    border-color: rgba(61, 79, 101, 0.16);
}

.notes-title-input:focus {
    border-color: var(--accent);

    background: white;

    box-shadow:
        0 0 0 3px rgba(39, 135, 95, 0.12);
}

.notes-actions {
    display: flex;
    gap: 7px;
}

.notes-button {
    display: flex;

    height: 36px;
    padding: 0 12px;

    align-items: center;
    justify-content: center;
    gap: 7px;

    border-radius: 9px;

    font-size: 0.79rem;
    font-weight: 750;
}

.notes-save-button {
    border: 1px solid var(--accent);

    background: var(--accent);
    color: white;
}

.notes-save-button:hover,
.notes-save-button:focus-visible {
    background: var(--accent-dark);
    outline: none;
}

.notes-clear-button {
    border: 1px solid rgba(217, 74, 87, 0.18);

    background: rgba(217, 74, 87, 0.06);
    color: #b63744;
}

.notes-clear-button:hover,
.notes-clear-button:focus-visible {
    background: rgba(217, 74, 87, 0.12);
    outline: none;
}

.notes-editor {
    width: 100%;
    min-height: 230px;
    padding: 17px;

    flex: 1;

    resize: none;

    border: 1px solid rgba(61, 79, 101, 0.19);
    border-radius: 14px;

    background:
        linear-gradient(
            rgba(255, 255, 255, 0.94),
            rgba(250, 252, 255, 0.96)
        );

    color: var(--window-text);

    outline: none;

    font-family:
        "Segoe UI",
        ui-sans-serif,
        system-ui,
        sans-serif;

    font-size: 0.94rem;
    line-height: 1.65;
}

.notes-editor:focus {
    border-color: var(--accent);

    box-shadow:
        0 0 0 3px rgba(39, 135, 95, 0.12);
}

.notes-editor::placeholder {
    color: #8a94a3;
}

.notes-footer {
    display: flex;

    align-items: center;
    justify-content: space-between;
    gap: 12px;

    color: var(--muted-text);

    font-size: 0.75rem;
}

.notes-statistics {
    display: flex;
    gap: 14px;
}

.notes-statistics strong {
    color: var(--window-text);
}

.notes-shortcut {
    color: #7b8594;
}

/* =========================================================
   Nature application
   ========================================================= */

.nature-window-content {
    display: flex;

    flex-direction: column;
    gap: 16px;
}

.nature-app-heading {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;
    gap: 22px;
}

.nature-app-heading h2 {
    margin-bottom: 7px;
}

.nature-app-heading p:last-child {
    margin-bottom: 0;
}

.nature-points-card {
    display: flex;

    min-width: 142px;
    padding: 11px 14px;

    align-items: center;
    gap: 10px;

    border: 1px solid rgba(39, 135, 95, 0.17);
    border-radius: 14px;

    background:
        linear-gradient(
            145deg,
            rgba(224, 245, 233, 0.92),
            rgba(237, 247, 242, 0.9)   
        );

        box-shadow: 0 8px 20px rgba(39, 135, 95, 0.09);
}

.nature-points-card > span {
    font-size: 1.75rem;
}

.nature-points-card div {
    display: flex;

    flex-direction: column;
    gap: 1px;
}

.nature-points-card strong {
    color: var(--accent-dark);

    font-size: 1.25rem;
    line-height: 1;
}

.nature-points-card div span {
    color: var(--muted-text);

    font-size: 0.72rem;
    white-space: nowrap;
}

.nature-progress-panel {
    padding: 15px;

    border: 1px solid rgba(39, 135, 95, 0.14);
    border-radius: 14px;

    background: rgba(39, 135, 95, 0.055);
}

.nature-progress-heading {
    display: flex;

    margin-bottom: 11px;

    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}

.nature-progress-heading > div {
    display: flex;

    flex-direction: column;
    gap: 3px;
}

.nature-progress-heading strong {
    font-size: 0.88rem;
}

.nature-progress-heading span {
    color: var(--muted-text);

    font-size: 0.76rem;
}

#nature-progress-count {
    font-weight: 750;
    white-space: nowrap;
}

.nature-progress-track {
    width: 100%;
    height: 10px;

    overflow: hidden;

    border-radius: 999px;

    background: rgba(39, 82, 68, 0.12);
}

.nature-progress-bar {
    width: 0;
    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            #2b9b68,
            #5abb81
        );

    transition: width 260ms ease;
}

.nature-challenge-list {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 10px;
}

.nature-challenge {
    display: grid;

    grid-template-columns:
        50px minmax(0, 1fr) auto;

    padding: 13px;

    align-items: center;
    gap: 11px;

    border: 1px solid rgba(66, 82, 107, 0.13);
    border-radius: 14px;

    background: rgba(247, 250, 252, 0.83);

    transition:
        border-color 160ms ease,
        background 160ms ease,
        transform 160ms ease,
        opacity 160ms ease;
}

.nature-challenge:hover {
    border-color: rgba(39, 135, 95, 0.24);

    transform: translateY(-1px);
}

.nature-challenge.completed {
    border-color: rgba(39, 135, 95, 0.25);

    background:
        linear-gradient(
            145deg,
            rgba(226, 245, 234, 0.94),
            rgba(240, 248, 244, 0.92)
        );
}

.nature-challenge.completed
.nature-challenge-content strong {
    color: var(--accent-dark);
}

.nature-challenge.completed
.nature-challenge-content p {
    opacity: 0.75;
}

.nature-challenge-icon {
    display: grid;

    width: 48px;
    height: 48px;

    place-items: center;

    border-radius: 14px;

    background: rgba(39, 135, 95, 0.09);

    font-size: 1.7rem;
}

.nature-challenge.completed
.nature-challenge-icon {
    background: rgba(39, 135, 95, 0.15);
}

.nature-challenge-content {
    min-width: 0;
}

.nature-challenge-content strong {
    display: block;

    margin-bottom: 4px;

    font-size: 0.86rem;
}

.nature-challenge-content p {
    margin: 0 0 5px;

    font-size: 0.76rem;
    line-height: 1.4;
}

.nature-challenge-content > span {
    color: var(--accent);

    font-size: 0.7rem;
    font-weight: 750;
}

.nature-complete-button {
    display: flex;

    min-width: 94px;
    height: 35px;
    padding: 0 10px;

    align-items: center;
    justify-content: center;
    gap: 6px;

    border: 1px solid rgba(39, 135, 95, 0.22);
    border-radius: 9px;

    background: rgba(39, 135, 95, 0.07);
    color: var(--accent-dark);

    font-size: 0.72rem;
    font-weight: 750;
}

.nature-complete-button:hover,
.nature-complete-button:focus-visible {
    border-color: var(--accent);

    background: rgba(39, 135, 95, 0.13);

    outline: none;
}

.nature-challenge.completed
.nature-complete-button {
    border-color: var(--accent);

    background: var(--accent);
    color: white;
}

.nature-button-icon {
    font-size: 1rem;
}

.nature-footer {
    display: flex;
    
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    color: var(--muted-text);

    font-size: 0.74rem;
}

.reset-nature-button {
    display: flex;

    height: 34px;
    padding: 0 10px;

    align-items: center;
    gap: 7px;

    border: 1px solid rgba(217, 74, 87, 0.16);
    border-radius: 9px;

    background: rgba(217, 74, 87, 0.05);
    color: #b63744;

    font-size: 0.74rem;
    font-weight: 700;
}

.reset-nature-button:hover,
.reset-nature-button:focus-visible {
    background: rgba(217, 74, 87, 0.11);
    outline: none;
}

/* =========================================================
   Settings application
   ========================================================= */

.settings-window-content {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.settings-heading {
    display: grid;

    grid-template-columns: 74px minmax(0, 1fr);
    gap: 18px;

    align-items: center;
}

.settings-heading-icon {
    display: grid;

    width: 68px;
    height: 68px;

    place-items: center;

    border-radius: 19px;

    background:
        linear-gradient(
            145deg,
            #7d96a7,
            #415b6c
        );

    box-shadow: 0 12px 24px rgba(45, 67, 81, 0.2);

    color: white;

    font-size: 2.2rem;
}

.settings-heading h2 {
    margin-bottom: 6px;
}

.settings-heading p:last-child {
    margin-bottom: 0;
}

.settings-section {
    padding: 15px;

    border: 1px solid rgba(66, 82, 107, 0.13);
    border-radius: 14px;

    background: rgba(241, 245, 248, 0.75);
}

.settings-section-heading {
    display: flex;

    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.settings-section-heading > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.settings-section-heading strong {
    font-size: 0.88rem;
}

.settings-section-heading span {
    color: var(--muted-text);

    font-size: 0.76rem;
}

.wallpaper-options,
.theme-options {
    display: grid;

    margin-top: 13px;

    gap: 10px;
}

.wallpaper-options {
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
}

.theme-options {
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
}

.wallpaper-option,
.theme-option {
    display: flex;

    padding: 9px;

    align-items: center;
    gap: 10px;

    border: 1px solid rgba(66, 82, 107, 0.14);
    border-radius: 12px;

    background: rgba(255, 255, 255, 0.62);
    color: var(--window-text);

    text-align: left;
}

.wallpaper-option:hover,
.wallpaper-option:focus-visible,
.theme-option:hover,
.theme-option:focus-visible {
    border-color: rgba(39, 135, 95, 0.43);
    outline: none;
}

.wallpaper-option.selected,
.theme-option.selected {
    border-color: var(--accent);

    background: rgba(39, 135, 95, 0.09);

    box-shadow:
        0 0 0 2px rgba(39, 135, 95, 0.09);
}

.wallpaper-option > span:last-child,
.theme-option > span:last-child {
    display: flex;

    min-width: 0;

    flex-direction: column;
    gap: 2px;
}

.wallpaper-option strong,
.theme-option strong {
    font-size: 0.79rem;
}

.wallpaper-option small,
.theme-option small {
    overflow: hidden;

    color: var(--muted-text);

    font-size: 0.68rem;

    white-space: nowrap;
    text-overflow: ellipsis;
}

.wallpaper-preview {
    width: 55px;
    height: 40px;

    flex: 0 0 auto;

    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 9px;

    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.15);
}

.wallpaper-forest {
    background:
        linear-gradient(
            135deg,
            #4c9c6c,
            #15463f 52%,
            #225f83
        );
}

.wallpaper-sunset {
    background:
        linear-gradient(
            135deg,
            #ec9b62,
            #a15058 52%,
            #5c477e
        );
}

.wallpaper-ocean {
    background:
        linear-gradient(
            135deg,
            #1c91a8,
            #14566c 52%,
            #29478a
        );
}

.theme-preview {
    display: block;

    width: 56px;
    height: 40px;
    padding: 7px;

    flex: 0 0 auto;

    border-radius: 9px;
}

.theme-preview span {
    display: block;

    width: 100%;
    height: 100%;

    border-radius: 5px;
}

.theme-preview-light {
    border: 1px solid #d2d9de;
    background: #e8edf0;
}

.theme-preview-light span {
    background: white;
}

.theme-preview-dark {
    border: 1px solid #263743;
    background: #1b2933;
}

.theme-preview-dark span {
    background: #334653;
}

.settings-toggle-section {
    padding-top: 17px;
    padding-bottom: 17px;
}

.settings-switch {
    position: relative;

    width: 48px;
    height: 27px;
    padding: 0;

    flex: 0 0 auto;

    border: 0;
    border-radius: 999px;

    background: #a7b2bb;
}

.settings-switch.active {
    background: var(--accent);
}

.settings-switch-handle {
    position: absolute;
    top: 4px;
    left: 4px;

    width: 19px;
    height: 19px;

    border-radius: 50%;

    background: white;

    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.24);

    transition: transform 160ms ease;
}

.settings-switch.active .settings-switch-handle {
    transform: translateX(21px);
}

.settings-footer {
    display: flex;

    align-items: center;
    justify-content: space-between;
    gap: 12px;

    color: var(--muted-text);

    font-size: 0.73rem;
}

.settings-footer-actions {
    display: flex;
    align-items: center;
    gap: 7px;
}

.reset-settings-button {
    display: flex;

    height: 34px;
    padding: 0 11px;

    align-items: center;
    gap: 7px;

    border: 1px solid rgba(217, 74, 87, 0.17);
    border-radius: 9px;

    background: rgba(217, 74, 87, 0.05);
    color: #b63744;

    font-size: 0.73rem;
    font-weight: 700;
}

.reset-settings-button:hover,
.reset-settings-button:focus-visible {
    background: rgba(217, 74, 87, 0.11);
    outline: none;
}

.settings-app-icon {
    background: rgba(91, 112, 130, 0.14);
}

/* =========================================================
   Calculator application
   ========================================================= */

.calculator-window-content {
    display: flex;

    flex-direction: column;
    gap: 12px;
}

.calculator-layout {
    display: grid;

    min-height: 0;

    flex: 1;

    grid-template-columns: 
        minmax(290px, 1fr)
        minmax(180px, 0.65fr);

    gap: 14px;
}

.calculator-main {
    display: flex;

    min-width: 0;

    flex-direction: column;
    gap: 13px;
}

.calculator-display {
    display: flex;

    min-height: 116px;
    padding: 15px 17px;

    flex-direction : column;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 7px;

    overflow: hidden;

    border: 1px solid rgba(66, 82, 107, 0.15);
    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            rgba(240, 246, 248, 0.94),
            rgba(228, 238, 241, 0.9)
        );
}

.calculator-expression {
    width: 100%;
    min-height: 21px;

    overflow: hidden;

    color: var(--muted-text);
    
    font-size: 0.82rem;
    text-align: right;

    white-space: nowrap;
    text-overflow: ellipsis;
}

.calculator-result {
    display: block;

    width: 100%;

    overflow: hidden;

    color: var(--window-text);

    font-size: clamp(2rem, 5vw, 2.9rem);
    font-weight: 750;
    line-height: 1.08;
    text-align: right;

    white-space: nowrap;
    text-overflow: ellipsis;
}

.calculator-result.error {
    color: var(--danger);

    font-size: 1.35rem;
}

.calculator-keypad {
    display: grid;

    flex: 1;

    grid-template-columns:
        repeat(4, minmax(52px, 1fr));

    grid-template-rows:
        repeat(5, minmax(52px, 1fr));

    gap: 8px;
}

.calculator-key {
    min-width: 0;
    min-height: 52px;

    border: 1px solid rgba(66, 82, 107, 0.14);
    border-radius: 12px;

    background: rgba(247, 250, 252, 0.92);
    color: var(--window-text);

    font-size: 1rem;
    font-weight: 700;

    transition:
        background 120ms ease,
        border-color 120ms ease,
        transform 80ms ease;        
}

.calculator-key:hover,
.calculator-key:focus-visible {
    border-color: rgba(39, 135, 95, 0.35);

    background: rgba(39, 135, 95, 0.08);

    outline: none;
}

.calculator-key:active,
.calculator-key.key-pressed {
    transform: scale(0.96);

    background: rgba(39, 135, 95, 0.15);
}

.calculator-key-secondary {
    background: rgba(224, 231, 236, 0.87);
    color: #465364;
}

.calculator-key-operator {
    border-color: rgba(39, 135, 95, 0.2);

    background: rgba(39, 135, 95, 0.1);
    color: var(--accent-dark);
}

.calculator-key-equals {
    border-color: var(--accent);

    background: var(--accent);
    color: white;
}

.calculator-key-equals:hover,
.calculator-key-equals:focus-visible {
    border-color: var(--accent-dark);

    background: var(--accent-dark);
}

.calculator-history {
    display: flex;

    min-width: 0;
    padding: 13px;

    flex-direction: column;

    overflow: hidden;

    border: 1px solid rgba(66, 82, 107, 0.13);
    border-radius: 15px;

    background: rgba(241, 245, 248, 0.76);
}

.calculator-history-heading {
    display: flex;

    padding-bottom: 11px;

    align-items: center;
    justify-content: space-between;
    gap: 8px;

    border-bottom: 1px solid rgba(66, 82, 107, 0.1);
}

.calculator-history-heading > div {
    display: flex;

    min-width: 0;

    flex-direction: column;
    gap: 2px;
}

.calculator-history-heading strong {
    font-size: 0.86rem;
}

.calcculator-history-heading span {
    color: var(--muted-text);

    font-size: 0.68rem;
}

.calculator-history-clear {
    padding: 6px 8px;

    border: 1px solid rgba(217, 74, 87, 0.16);
    border-radius: 8px;

    background: rgba(217, 74, 87, 0.05);
    color: #b63744;

    font-size: 0.68rem;
}

.calculator-history-clear:hover,
.calculator-history-clear:focus-visible {
    background: rgba(217, 74, 87, 0.11);
    outline: none;
}

.calculator-history-list {
    display: flex;

    min-height: 0;
    padding-top: 8px;

    flex: 1;
    flex-direction: column;
    gap: 7px;

    overflow-y: auto;
}

.calculator-history-item {
    width: 100%;
    padding: 9px;

    border: 1px solid transparent;
    border-radius: 10px;

    background: transparent;
    color: var(--window-text);

    text-align: right;
}

.calculator-history-item:hover,
.calculator-history-item:focus-visible {
    border-color: rgba(39, 135, 95, 0.16);

    background: rgba(39, 135, 95, 0.07);

    outline: none;
}

.calculator-history-expression {
    display: block;

    overflow: hidden;

    color: var(--muted-text);

    font-size: 0.67rem;

    white-space: nowrap;
    text-overflow: ellipsis;
}

.calculator-history-result {
    display: block;

    margin-top: 3px;

    overflow: hidden;

    font-size: 0.87rem;
    font-weight: 750;

    white-space: nowrap;
    text-overflow: ellipsis;
}

.calculator-history-empty {
    margin: auto;
    padding: 14px 6px;

    color: var(--muted-text);

    font-size: 0.72rem;
    text-align: center;
}

.calculator-footer {
    display: flex;

    align-items: center;
    justify-content: space-between;
    gap: 10px;

    color: var(--muted-text);

    font-size: 0.69rem;
}

.calculator-app-icon {
    background: rgba(72, 116, 164, 0.14);
}

/* =========================================================
   Start menu
   ========================================================= */

.start-menu {
    position: absolute;
    bottom: calc(var(--taskbar-height) + 12px);
    left: 12px;
    z-index: 9000;

    display: flex;

    width: min(370px, calc(100vw - 24px));
    max-height: min(610px, calc(100vh - 95px));

    flex-direction: column;

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 19px;

    background: rgba(244, 248, 250, 0.97);
    box-shadow:
        0 28px 75px rgba(0, 0, 0, 0.39),
        0 5px 18px rgba(0, 0, 0, 0.2);

    color: var(--window-text);

    backdrop-filter: blur(22px);

    animation: open-start-menu 170ms ease-out;
}

.start-menu-header {
    padding: 19px 20px;

    border-bottom: 1px solid rgba(35, 53, 72, 0.1);

    background:
        linear-gradient(
            145deg,
            rgba(221, 241, 230, 0.96),
            rgba(225, 237, 244, 0.94)
        );
}

.start-user {
    display: flex;
    align-items: center;
    gap: 12px;
}

.start-user-avatar {
    display: grid;

    width: 46px;
    height: 46px;

    flex: 0 0 auto;
    place-items: center;

    border-radius: 13px;

    background:
        linear-gradient(
            145deg,
            #45af76,
            #187252
        );

    box-shadow: 0 9px 20px rgba(24, 114, 82, 0.24);

    color: white;

    font-size: 1.1rem;
    font-weight: 900;
}

.start-user > div:last-child {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.start-user strong {
    font-size: 0.94rem;
}

.start-user span {
    color: var(--muted-text);
    font-size: 0.8rem;
}

.start-search-container {
    position: relative;

    display: flex;

    margin: 15px 15px 4px;

    align-items: center;
}

.start-search-icon {
    position: absolute;
    left: 13px;

    pointer-events: none;

    font-size: 0.9rem;
}

.start-search {
    width: 100%;
    height: 43px;
    padding: 0 14px 0 41px;

    border: 1px solid rgba(61, 79, 101, 0.19);
    border-radius: 12px;

    background: rgba(255, 255, 255, 0.86);
    color: var(--window-text);

    outline: none;
}

.start-search:focus {
    border-color: var(--accent);

    box-shadow:
        0 0 0 3px rgba(39, 135, 95, 0.13);
}

.start-search::placeholder {
    color: #778192;
}

.start-menu-section {
    min-height: 0;
    padding: 13px 15px 16px;

    flex: 1;

    overflow-y: auto;
}

.start-menu-section-heading {
    display: flex;

    margin-bottom: 9px;
    padding: 0 4px;

    justify-content: space-between;

    color: var(--muted-text);

    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.start-app-list {
    display: grid;
    gap: 6px;
}

.start-app {
    display: flex;

    width: 100%;
    padding: 10px;

    align-items: center;
    gap: 12px;

    border: 1px solid transparent;
    border-radius: 12px;

    background: transparent;
    color: var(--window-text);

    text-align: left;
}

.start-app:hover,
.start-app:focus-visible {
    border-color: rgba(39, 135, 95, 0.14);
    background: rgba(39, 135, 95, 0.08);
    outline: none;
}

.start-app:active {
    transform: scale(0.985);
}

.start-app-icon {
    display: grid;

    width: 46px;
    height: 46px;

    flex: 0 0 auto;
    place-items: center;

    border-radius: 13px;

    font-size: 1.7rem;
}

.welcome-app-icon {
    background: rgba(71, 151, 205, 0.13);
}

.notes-app-icon {
    background: rgba(221, 171, 48, 0.15);
}

.nature-app-icon {
    background: rgba(39, 135, 95, 0.13);
}

.start-app-text {
    display: flex;

    min-width: 0;

    flex-direction: column;
    gap: 3px;
}

.start-app-text strong {
    font-size: 0.9rem;
}

.start-app-text span {
    overflow: hidden;

    color: var(--muted-text);

    font-size: 0.78rem;

    white-space: nowrap;
    text-overflow: ellipsis;
}

.start-no-results {
    margin: 12px 4px 2px;
    padding: 16px;

    border: 1px dashed rgba(61, 79, 101, 0.25);
    border-radius: 12px;

    color: var(--muted-text);

    font-size: 0.84rem;
    text-align: center;
}

.start-menu-footer {
    display: flex;

    padding: 11px 14px;

    align-items: center;
    justify-content: space-between;

    border-top: 1px solid rgba(35, 53, 72, 0.1);

    background: rgba(232, 239, 243, 0.74);
}

.start-system-status {
    display: flex;
    align-items: center;
    gap: 8px;

    color: var(--muted-text);

    font-size: 0.78rem;
}

.start-status-dot {
    width: 9px;
    height: 9px;

    border-radius: 50%;

    background: #2bad68;
    box-shadow: 0 0 0 4px rgba(43, 173, 104, 0.12);
}

.power-button {
    display: flex;

    padding: 8px 10px;

    align-items: center;
    gap: 7px;

    border: 1px solid transparent;
    border-radius: 10px;

    background: transparent;
    color: #4c5869;

    font-size: 0.8rem;
}

.power-button:hover,
.power-button:focus-visible {
    border-color: rgba(217, 74, 87, 0.18);
    background: rgba(217, 74, 87, 0.08);
    color: #b63744;
    outline: none;
}

/* =========================================================
   Taskbar
   ========================================================= */

.taskbar {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10000;

    display: flex;

    height: var(--taskbar-height);
    padding: 8px 12px;

    align-items: center;
    gap: 10px;

    border-top: 1px solid rgba(255, 255, 255, 0.14);

    background: var(--taskbar-background);
    backdrop-filter: blur(18px);
}

.start-button {
    display: flex;

    height: 46px;
    padding: 5px 15px 5px 6px;

    align-items: center;
    gap: 9px;

    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 13px;

    background: rgba(255, 255, 255, 0.09);
    color: white;

    font-weight: 750;
}

.start-button:hover,
.start-button:focus-visible,
.start-button.active {
    background: rgba(255, 255, 255, 0.18);
    outline: none;
}

.start-button.active {
    border-color: rgba(117, 213, 159, 0.5);

    box-shadow:
        inset 0 -3px 0 rgba(98, 205, 144, 0.8),
        0 7px 18px rgba(0, 0, 0, 0.18);
}

.start-button:active {
    transform: translateY(1px);
}

.start-logo {
    display: grid;

    width: 33px;
    height: 33px;

    place-items: center;

    border-radius: 9px;

    background:
        linear-gradient(
            145deg,
            #45af76,
            #187252
        );

    font-weight: 900;
}

.taskbar-applications {
    display: flex;

    min-width: 0;

    flex: 1;
    gap: 8px;

    overflow-x: auto;
    scrollbar-width: none;
}

.taskbar-applications::-webkit-scrollbar {
    display: none;
}

.taskbar-app {
    display: flex;

    max-width: 180px;
    height: 44px;
    padding: 0 15px;

    flex: 0 0 auto;
    align-items: center;
    gap: 8px;

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 11px;

    background: rgba(255, 255, 255, 0.08);
    color: white;

    white-space: nowrap;
}

.taskbar-app:hover,
.taskbar-app.active {
    background: rgba(255, 255, 255, 0.17);
}

.taskbar-app.active {
    border-color: rgba(117, 213, 159, 0.46);

    box-shadow:
        inset 0 -3px 0 rgba(98, 205, 144, 0.78);
}

.taskbar-app.minimized {
    opacity: 0.7;
}

.taskbar-app.minimized::after {
    width: 6px;
    height: 6px;

    margin-left: auto;

    content: "";

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.55);
}

.taskbar-app:focus-visible {
    outline: 2px solid rgba(117, 213, 159, 0.8);
    outline-offset: 2px;
}

.system-tray {
    display: flex;

    height: 44px;
    padding: 0 8px;

    align-items: center;
    gap: 11px;

    border-radius: 11px;
}

.tray-icon {
    font-size: 0.92rem;
}

.clock {
    display: flex;

    min-width: 86px;

    flex-direction: column;
    align-items: flex-end;

    font-size: 0.76rem;
    line-height: 1.35;
}

#clock-time {
    font-weight: 750;
}

#clock-date {
    color: rgba(255, 255, 255, 0.76);
}

/* =========================================================
   Animations
   ========================================================= */

@keyframes open-start-menu {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.985);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes open-window {
    from {
        opacity: 0;
        transform: scale(0.97) translateY(8px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-window,
    .start-menu {
        animation: none;
        transition: none;
    }
}

/* =========================================================
   Responsive layout
   ========================================================= */

@media (max-width: 850px) {
    #welcome-window,
    #notes-window,
    #nature-window,
    #settings-window,
    #calculator-window {
        left: 125px;

        width: calc(100vw - 145px);
    }

    #welcome-window {
        top: 70px;
    }

    #notes-window {
        top: 90px;
    }

    #nature-window {
        top: 110px;
    }

    #settings-window {
        top: 130px;
    }

    #calculator-window {
        top: 145px;
    }

    .nature-challenge-list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .desktop-icons {
        top: 10px;
        left: 8px;

        grid-template-columns: repeat(4, 82px);
    }

    .start-menu {
        right: 10px;
        bottom: calc(var(--taskbar-height) + 10px);
        left: 10px;

        width: auto;
        max-height: calc(100vh - 88px);
    }

    .desktop-icon {
        width: 82px;
    }

    #welcome-window,
    #notes-window,
    #nature-window,
    #settings-window,
    #calculator-window {
        top: 115px;
        left: 10px;

        width: calc(100vw - 20px);
        min-width: 0;

        height: calc(100vh - 190px);
    }

    .window-header {
        cursor: grab;
    }

    .window-content {
        padding: 21px;
    }

    .welcome-grid,
    .application-heading {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .welcome-logo {
        width: 82px;
        height: 82px;

        border-radius: 22px;

        font-size: 2.8rem;
    }

    .application-heading-icon {
        width: 70px;
        height: 70px;

        font-size: 2.4rem;
    }

    .start-text,
    .tray-icon {
        display: none;
    }

    .start-button {
        padding-right: 6px;
    }

    .taskbar-app {
        max-width: 58px;
        padding: 0 14px;
    }

    .taskbar-app-name {
        display: none;
    }

    .notes-app-heading,
    .notes-toolbar,
    .notes-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .notes-save-state {
        align-self: flex-start;
    }

    .notes-document-name {
        width: 100%;
    }

    .notes-title-input {
        width: 100%;
    }

    .notes-actions {
        width: 100%;
    }

    .notes-button {
        flex: 1;
    }

    .notes-shortcut {
        display: none;
    }

    .nature-app-heading,
    .nature-progress-heading,
    .nature-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .nature-points-card {
        align-self: flex-start;
    }

    .nature-progress-heading {
        gap: 6px;
    }

    .nature-challenge {
        grid-template-columns:
            46px minmax(0, 1fr);
    }

    .nature-complete-button {
        width: 100%;

        grid-column: 1 / -1;
    }

    .reset-nature-button {
        align-self: flex-start;
    }

    .settings-heading {
        grid-template-columns: 1fr;
    }

    .wallpaper-options,
    .theme-options {
        grid-template-columns: 1fr;
    }

    .settings-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .reset-settings-button {
        align-self: flex-start;
    }

    .calculator-layout {
        grid-template-columns: 1fr;
    }

    .calculator-history {
        min-height: 180px;
    }

    .calculator-keypad {
        grid-template-rows:
            repeat(5, 54px);
    }

    .calculator-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .settings-footer-actions {
        width: 100%;

        align-items: stretch;
        flex-direction: column;
    }

    .settings-footer-actions .reset-settings-button {
        width: 100%;
        justify-content: center;
    }

    .shortcut-list > span {
        grid-template-columns: 
            auto auto auto auto auto;

        justify-content: start;
    }

    .shortcut-list > span > span:last-child {
        margin-top: 3px;
        margin-left: 0;

        grid-column: 1 / -1;
    }

    .system-card {
        align-items: stretch;
        flex-wrap: wrap;
    }

    .diagnostics-button {
        width: 100%;

        grid-column: 1 / -1;
    }

    .diagnostics-heading {
        align-items: flex-start;
        flex-direction: column;
    }
}

.system-card.failed {
    border-color: rgba(217, 74, 87, 0.22);

    background: rgba(217, 74, 87, 0.06);
}

.status-dot.failed {
    background: var(--danger);

    box-shadow:
        0 0 0 4px rgba(217, 74, 87, 0.12);
}