/* =========================================================
   MOHSIN BUILDS — DEVELOPER OS
   HOME INTERFACE
========================================================= */

:root {
    --sidebar-width: 112px;
    --topbar-height: 66px;

    --edge: 20px;
    --gap: 18px;

    --left-column: 350px;
    --right-column: 330px;

    --cyan: #55d9ff;
    --green: #43e5a7;
    --violet: #8b73ff;

    --white: #f4f8fb;
    --text: #bccbd6;
    --muted: #688398;

    --sans: "Inter", sans-serif;
    --mono: "Space Mono", monospace;

    --ease-premium: cubic-bezier(.2, .8, .2, 1);
}


/* =========================================================
   RESET
========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-width: 320px;
    min-height: 100%;
}

html {
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;

    color: var(--white);

    background: #01060c;

    font-family: var(--sans);

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

button,
input {
    font: inherit;
}

button {
    color: inherit;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    display: block;
    max-width: 100%;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

:focus-visible {
    outline: 2px solid rgba(87, 219, 255, .88);
    outline-offset: 3px;
}


/* =========================================================
   DESKTOP
========================================================= */

.desktop {
    position: relative;

    width: 100%;
    height: max(900px, 100vh);
    min-height: 100vh;

    overflow: hidden;

    isolation: isolate;

    background: #01070d;
}


/* =========================================================
   WALLPAPER
========================================================= */

.wallpaper {
    position: absolute;

    inset: -2%;

    z-index: -10;

    background:
        url("../assets/images/developer-os-wallpaper.png")
        center center / cover
        no-repeat;

    filter:
        saturate(.95)
        contrast(1.02)
        brightness(.82);

    transform: scale(1.035);
}


.wallpaper-overlay {
    position: absolute;

    inset: 0;

    z-index: -8;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,

            rgba(0, 5, 12, .76) 0%,

            rgba(0, 8, 16, .35) 29%,

            rgba(0, 8, 16, .28) 68%,

            rgba(0, 6, 13, .63) 100%
        ),

        linear-gradient(
            180deg,

            rgba(0, 6, 13, .38),

            rgba(0, 6, 13, .10) 42%,

            rgba(0, 5, 11, .46)
        );
}


/* =========================================================
   SIDEBAR
========================================================= */

.os-sidebar {
    position: fixed;

    left: 0;
    top: 0;
    bottom: 0;

    z-index: 600;

    width: var(--sidebar-width);

    padding: 0 10px 16px;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    border-right:
        1px solid
        rgba(108, 173, 215, .14);

    background:
        linear-gradient(
            180deg,

            rgba(3, 16, 27, .30),

            rgba(2, 11, 19, .16)
        );

    backdrop-filter:
        blur(15px)
        saturate(120%);

    -webkit-backdrop-filter:
        blur(15px)
        saturate(120%);
}


/* =========================================================
   BRAND
========================================================= */

.os-brand {
    width: 100%;
    height: 108px;

    padding: 6px 2px 12px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;

    border-bottom:
        1px solid
        rgba(103, 160, 199, .10);
}


.os-brand-logo {
    width: 96px;
    height: 72px;

    object-fit: contain;
}


.os-brand-system {
    margin-top: -4px;

    color: #708da1;

    font-family: var(--mono);

    font-size: 5.5px;
    font-weight: 700;

    letter-spacing: .09em;
}


/* =========================================================
   SIDEBAR NAVIGATION
========================================================= */

.side-nav {
    margin-top: 10px;

    display: grid;

    flex: 0 0 auto;

    gap: 4px;
}


.side-item {
    position: relative;

    width: 100%;
    height: 61px;

    padding: 7px 4px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 6px;

    color: #819aae;

    border:
        1px solid
        transparent;

    border-radius: 10px;

    background: transparent;

    cursor: pointer;

    transition:
        color .2s ease,
        border-color .2s ease,
        background .2s ease,
        transform .2s ease;
}


.side-item:hover {
    color: #eef9ff;

    transform:
        translateY(-1px);

    border-color:
        rgba(79, 194, 255, .16);

    background:
        rgba(28, 104, 147, .06);
}


.side-item.is-active {
    color: #fff;

    border-color:
        rgba(82, 188, 229, .32);

    background:
        linear-gradient(
            90deg,

            rgba(30, 118, 164, .15),

            rgba(8, 44, 68, .06)
        );

    box-shadow:
        inset 3px 0 0
        rgba(86, 211, 255, .88),

        0 8px 22px
        rgba(0, 0, 0, .12);
}


.side-icon {
    width: 30px;
    height: 30px;

    display: grid;

    place-items: center;

    border-radius: 8px;

    color: #6bcfff;

    background:
        rgba(27, 106, 156, .08);
}


.side-item.is-active
.side-icon {
    color: #a7eaff;

    background:
        rgba(37, 133, 177, .12);
}


.side-icon i {
    font-size: 16px;
}


.side-icon-labs {
    color: #9d8dff;
}


.side-label {
    font-size: 8.5px;

    font-weight: 500;

    line-height: 1;
}


/* =========================================================
   SIDEBAR STATUS
========================================================= */

.sidebar-status {
    min-height: 30px;

    margin: auto 4px 0;

    padding-top: 9px;

    display: flex;

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

    gap: 6px;

    border-top:
        1px solid
        rgba(102, 157, 190, .11);
}


.status-light {
    width: 6px;
    height: 6px;

    flex: 0 0 auto;

    border-radius: 50%;

    background: var(--green);

    box-shadow:
        0 0 7px
        rgba(67, 229, 167, .55);
}


.sidebar-status strong {
    color: #839cab;

    font-family: var(--mono);

    font-size: 5.4px;
    font-weight: 700;

    letter-spacing: .07em;
}


/* =========================================================
   SYSTEM BAR
========================================================= */

.system-bar {
    position: fixed;

    left: var(--sidebar-width);

    right: 0;
    top: 0;

    z-index: 550;

    height: var(--topbar-height);

    padding: 0 26px;

    display: grid;

    grid-template-columns:
        1fr
        330px
        235px;

    gap: 22px;

    align-items: center;

    border-bottom:
        1px solid
        rgba(104, 163, 202, .12);

    background:
        linear-gradient(
            180deg,

            rgba(3, 15, 25, .40),

            rgba(2, 11, 19, .18)
        );

    backdrop-filter:
        blur(15px)
        saturate(120%);

    -webkit-backdrop-filter:
        blur(15px)
        saturate(120%);
}


/* =========================================================
   SYSTEM PATH
========================================================= */

.system-path {
    display: flex;

    align-items: center;

    gap: 9px;

    color: #7791a4;

    font-family: var(--mono);

    font-size: 8px;

    white-space: nowrap;
}


.path-home {
    width: 25px;
    height: 25px;

    display: grid;

    place-items: center;

    color: #65d7ff;

    border:
        1px solid
        rgba(83, 189, 237, .22);

    border-radius: 6px;

    background:
        rgba(37, 147, 205, .07);
}


.path-home i {
    font-size: 10px;
}


.path-arrow {
    color: #3f6277;

    font-size: 6px;
}


.system-path strong {
    color: #59d7ff;

    font-size: 8px;
}


/* =========================================================
   SEARCH
========================================================= */

.system-search {
    width: 100%;
    height: 38px;

    padding: 0 12px;

    display: flex;

    align-items: center;

    gap: 10px;

    color: #8099aa;

    border:
        1px solid
        rgba(81, 148, 190, .22);

    border-radius: 9px;

    background:
        rgba(2, 11, 19, .40);

    cursor: pointer;

    transition:
        border-color .2s ease,
        background .2s ease;
}


.system-search:hover {
    border-color:
        rgba(78, 200, 255, .42);

    background:
        rgba(4, 20, 32, .50);
}


.system-search > i {
    color: #5fd5ff;

    font-size: 11px;
}


.system-search > span {
    font-size: 8px;
}


.system-search kbd {
    margin-left: auto;

    padding: 3px 6px;

    color: #6e8799;

    border:
        1px solid
        rgba(255, 255, 255, .07);

    border-radius: 5px;

    background:
        rgba(255, 255, 255, .025);

    font-family: var(--mono);

    font-size: 6px;
}


/* =========================================================
   CLOCK
========================================================= */

.system-right {
    justify-self: end;

    display: flex;

    align-items: center;

    gap: 17px;
}


.system-indicators {
    display: flex;

    align-items: center;

    gap: 13px;

    color: #b6c7d2;
}


.system-indicators i {
    font-size: 10px;

    opacity: .88;
}


.system-time {
    min-width: 98px;

    padding-left: 15px;

    border-left:
        1px solid
        rgba(97, 153, 190, .15);

    text-align: right;
}


.system-time span {
    display: block;

    color: #8199aa;

    font-size: 7.5px;
}


.system-time strong {
    display: block;

    margin-top: 1px;

    color: #f5f8fa;

    font-size: 18px;

    font-weight: 500;

    letter-spacing: -.02em;
}


/* =========================================================
   WORKSPACE
========================================================= */

.workspace {
    position: absolute;

    left: var(--sidebar-width);

    right: 0;

    top: var(--topbar-height);

    bottom: 0;

    z-index: 20;

    min-height: 834px;
}


/* =========================================================
   WINDOW SYSTEM
========================================================= */

.os-window {
    --mx: 50%;
    --my: 50%;

    position: absolute;

    overflow: hidden;

    isolation: isolate;

    border:
        1px solid
        rgba(102, 164, 204, .28);

    border-radius: 12px;

    background:
        linear-gradient(
            145deg,

            rgba(6, 22, 35, .84),

            rgba(2, 11, 19, .90)
        );

    box-shadow:
        0 22px 52px
        rgba(0, 0, 0, .30),

        inset 0 1px 0
        rgba(255, 255, 255, .035);

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);

    transition:
        border-color .25s ease,
        box-shadow .25s ease;
}


/* Pointer-follow window highlight */

.os-window::before {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 0;

    pointer-events: none;

    background:
        radial-gradient(
            320px circle
            at var(--mx) var(--my),

            rgba(80, 190, 235, .035),

            transparent 68%
        );

    opacity: 0;

    transition:
        opacity .3s ease;
}


.os-window:hover::before {
    opacity: 1;
}


.os-window > * {
    position: relative;

    z-index: 2;
}


.os-window:hover {
    border-color:
        rgba(108, 188, 228, .38);

    box-shadow:
        0 26px 58px
        rgba(0, 0, 0, .34),

        inset 0 1px 0
        rgba(255, 255, 255, .045);
}


.os-window.is-focused {
    border-color:
        rgba(108, 190, 229, .42);

    box-shadow:
        0 28px 64px
        rgba(0, 0, 0, .36),

        inset 0 1px 0
        rgba(255, 255, 255, .045);
}


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


.os-window.is-minimized {
    height:
        40px !important;
}


.os-window.is-maximized {
    position:
        fixed !important;

    left:
        calc(
            var(--sidebar-width)
            + 18px
        )
        !important;

    right:
        18px !important;

    top:
        calc(
            var(--topbar-height)
            + 18px
        )
        !important;

    bottom:
        94px !important;

    width:
        auto !important;

    height:
        auto !important;

    transform:
        none !important;

    z-index:
        5000 !important;
}


/* =========================================================
   WINDOW ENTRANCE
========================================================= */

body:not(.os-ready)
.os-window[data-reveal] {
    opacity: 0;
}


body.os-ready
.os-window[data-reveal="1"] {
    animation:
        windowReveal
        .55s
        .08s
        var(--ease-premium)
        both;
}


body.os-ready
.os-window[data-reveal="2"] {
    animation:
        windowReveal
        .55s
        .15s
        var(--ease-premium)
        both;
}


body.os-ready
.os-window[data-reveal="3"] {
    animation:
        windowReveal
        .55s
        .22s
        var(--ease-premium)
        both;
}


body.os-ready
.os-window[data-reveal="4"] {
    animation:
        windowReveal
        .55s
        .29s
        var(--ease-premium)
        both;
}


body.os-ready
.os-window[data-reveal="5"] {
    animation:
        windowReveal
        .55s
        .36s
        var(--ease-premium)
        both;
}


body.os-ready
.os-window[data-reveal="6"] {
    animation:
        windowReveal
        .55s
        .43s
        var(--ease-premium)
        both;
}


@keyframes windowReveal {

    from {
        opacity: 0;

        transform:
            translateY(10px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }

}


.os-window.is-opening {
    animation:
        appOpening
        .22s
        var(--ease-premium)
        both;
}


@keyframes appOpening {

    from {
        opacity: .5;

        transform:
            scale(.992);
    }

    to {
        opacity: 1;

        transform:
            scale(1);
    }

}


/* =========================================================
   WINDOW BAR
========================================================= */

.window-bar {
    height: 40px;

    padding: 0 13px;

    display: flex;

    align-items: center;

    border-bottom:
        1px solid
        rgba(99, 157, 195, .14);

    background:
        linear-gradient(
            180deg,

            rgba(31, 59, 81, .39),

            rgba(14, 35, 52, .24)
        );

    cursor: grab;

    user-select: none;
}


.window-bar:active {
    cursor: grabbing;
}


.window-controls {
    display: flex;

    gap: 6px;
}


.window-control {
    width: 9px;
    height: 9px;

    padding: 0;

    border: 0;

    border-radius: 50%;

    cursor: pointer;

    transition:
        transform .15s ease;
}


.window-control:hover {
    transform:
        scale(1.12);
}


.control-close {
    background: #ff6158;
}


.control-minimize {
    background: #ffc04a;
}


.control-maximize {
    background: #35d26b;
}


.window-name {
    margin-left: 11px;

    display: flex;

    align-items: center;

    gap: 7px;

    color: #dce7ee;

    font-size: 9px;

    font-weight: 500;
}


.window-file-icon {
    color: #66d4ff;

    font-size: 8px;
}


.window-live {
    margin-left: auto;

    display: flex;

    align-items: center;

    gap: 5px;

    color: #7995a7;

    font-family: var(--mono);

    font-size: 6px;
}


.window-live i,
.system-ready i {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: var(--green);

    box-shadow:
        0 0 6px
        rgba(67, 229, 167, .52);
}


.window-counter,
.window-meta,
.labs-status {
    margin-left: auto;

    color: #7993a5;

    font-family: var(--mono);

    font-size: 6px;
}


.window-external {
    margin-left: auto;

    width: 25px;
    height: 25px;

    display: grid;

    place-items: center;

    color: #809bad;

    border-radius: 6px;

    transition: .17s ease;
}


.window-external:hover {
    color: #67ddff;

    background:
        rgba(73, 190, 245, .07);
}


.window-external i {
    font-size: 9px;
}


/* =========================================================
   WINDOW POSITIONS
========================================================= */

.welcome-window {
    left: var(--edge);

    top: 28px;

    width: var(--left-column);

    height: 328px;

    z-index: 30;
}


.featured-window {
    left:
        calc(
            var(--edge)
            +
            var(--left-column)
            +
            var(--gap)
        );

    right:
        calc(
            var(--edge)
            +
            var(--right-column)
            +
            var(--gap)
        );

    top: 28px;

    height: 424px;

    z-index: 34;
}


.about-window {
    right: var(--edge);

    top: 28px;

    width: var(--right-column);

    height: 352px;

    z-index: 30;
}


.projects-window {
    left: var(--edge);

    top: 376px;

    width: var(--left-column);

    height: 276px;

    z-index: 29;
}


.labs-window {
    left:
        calc(
            var(--edge)
            +
            var(--left-column)
            +
            var(--gap)
        );

    top: 474px;

    width: 470px;

    height: 180px;

    z-index: 29;
}


.architecture-window {
    right: var(--edge);

    top: 392px;

    width: var(--right-column);

    height: 262px;

    z-index: 29;
}


.terminal-window {
    left: 210px;

    top: 150px;

    width: 560px;

    height: 365px;

    z-index: 200;
}


/* =========================================================
   WELCOME
========================================================= */

.welcome-content {
    height:
        calc(
            100%
            -
            40px
        );

    padding:
        24px
        24px
        18px;

    display: flex;

    flex-direction: column;
}


.terminal-eyebrow {
    display: flex;

    align-items: center;

    gap: 6px;

    color: #67d9ff;

    font-family: var(--mono);

    font-size: 7.5px;
}


.terminal-eyebrow i {
    font-size: 7px;
}


.welcome-content h1 {
    margin:
        14px
        0
        0;

    color: #f6f9fb;

    font-size: 31px;

    font-weight: 760;

    line-height: 1.015;

    letter-spacing: -.046em;
}


.welcome-content h1 strong {
    color: #59dcff;

    font-weight: 760;
}


.welcome-content > p {
    max-width: 290px;

    margin:
        14px
        0
        0;

    color: #b7c7d3;

    font-size: 10.5px;

    line-height: 1.55;
}


.welcome-actions {
    margin-top: 19px;

    display: flex;

    gap: 9px;
}


.welcome-footer {
    margin-top: auto;

    padding-top: 12px;

    display: flex;

    align-items: center;

    gap: 10px;

    color: #68869a;

    border-top:
        1px solid
        rgba(83, 137, 173, .13);

    font-family: var(--mono);

    font-size: 5.2px;
}


.system-ready {
    color: #87a4b5;
}


.system-ready i {
    display: inline-block;

    margin-right: 4px;
}


/* =========================================================
   BUTTONS
========================================================= */

.primary-button,
.ghost-button {
    height: 40px;

    padding: 0 14px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 15px;

    border-radius: 7px;

    font-size: 8.5px;

    font-weight: 700;

    transition:
        transform .22s var(--ease-premium),
        border-color .22s ease,
        background .22s ease,
        box-shadow .22s ease;
}


.primary-button {
    color: #03121b;

    border:
        1px solid
        #6ce6ff;

    background:
        linear-gradient(
            115deg,

            #58e5ff,

            #47b8ff
        );

    box-shadow:
        0 7px 18px
        rgba(55, 192, 255, .12);
}


.primary-button:hover,
.ghost-button:hover {
    transform:
        translateY(-1px);
}


.primary-button:hover {
    box-shadow:
        0 9px 22px
        rgba(55, 192, 255, .16);
}


.ghost-button {
    color: #dce7ee;

    border:
        1px solid
        rgba(91, 161, 208, .30);

    background:
        rgba(4, 18, 29, .42);
}


.ghost-button:hover {
    border-color:
        rgba(88, 207, 255, .45);

    background:
        rgba(7, 28, 43, .52);
}


/* =========================================================
   FEATURED PROJECT
========================================================= */

.featured-content {
    position: relative;

    height:
        calc(
            100%
            -
            40px
        );

    padding:
        27px
        24px
        23px;

    display: grid;

    grid-template-columns:
        minmax(205px, 39%)
        1fr;

    gap: 22px;
}


.featured-badge {
    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding: 5px 8px;

    color: #5ae6bd;

    border:
        1px solid
        rgba(66, 221, 177, .26);

    border-radius: 5px;

    background:
        rgba(29, 144, 113, .06);

    font-family: var(--mono);

    font-size: 5.8px;
}


.featured-copy h2 {
    margin:
        17px
        0
        0;

    color: #f4f8fa;

    font-size: 24px;

    font-weight: 720;

    line-height: 1.06;

    letter-spacing: -.036em;
}


.featured-copy > p {
    margin:
        12px
        0
        0;

    color: #b5c5d1;

    font-size: 10px;

    line-height: 1.55;
}


.technology-list {
    margin-top: 14px;

    display: flex;

    flex-wrap: wrap;

    gap: 6px;
}


.technology-list span {
    padding: 5px 7px;

    color: #9bb0c0;

    border:
        1px solid
        rgba(75, 137, 181, .20);

    border-radius: 5px;

    background:
        rgba(8, 28, 44, .24);

    font-size: 6.5px;
}


.featured-actions {
    margin-top: 19px;

    display: flex;

    gap: 8px;
}


.project-primary,
.project-secondary {
    height: 37px;

    font-size: 7.5px;
}


/* =========================================================
   FEATURED PROJECT VISUAL
========================================================= */

.project-visual {
    position: relative;

    min-width: 0;

    overflow: hidden;

    border:
        1px solid
        rgba(86, 161, 209, .22);

    border-radius: 10px;

    background:
        linear-gradient(
            145deg,

            rgba(5, 19, 31, .88),

            rgba(2, 10, 18, .94)
        );

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, .02);
}


.project-ui-top {
    height: 34px;

    padding: 0 8px 0 11px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    border-bottom:
        1px solid
        rgba(72, 127, 164, .14);
}


.project-ui-dots {
    display: flex;

    gap: 4px;
}


.project-ui-dots span {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background:
        rgba(101, 142, 168, .46);
}


.project-ui-actions {
    display: flex;

    align-items: center;

    gap: 8px;
}


.ui-status {
    color: #657f92;

    font-family: var(--mono);

    font-size: 5px;
}


.project-ui-body {
    height:
        calc(
            100%
            -
            34px
        );

    display: grid;

    grid-template-columns:
        48px
        1fr;
}


.preview-navigation {
    padding:
        13px
        9px;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 11px;

    border-right:
        1px solid
        rgba(72, 129, 166, .13);

    background:
        rgba(2, 10, 18, .18);
}


.preview-brand {
    width: 25px;
    height: 25px;

    margin-bottom: 4px;

    display: grid;

    place-items: center;

    color: #80e2ff;

    border:
        1px solid
        rgba(82, 201, 255, .34);

    border-radius: 6px;

    font-size: 9px;

    font-weight: 800;
}


.preview-navigation > span {
    width: 20px;
    height: 5px;

    border-radius: 10px;

    background:
        rgba(95, 138, 167, .17);
}


.preview-navigation
.preview-nav-active {
    background:
        rgba(74, 205, 255, .54);
}


.preview-dashboard {
    padding: 17px;
}


.preview-title-row {
    display: flex;

    justify-content: space-between;

    align-items: center;
}


.preview-title-row small {
    display: block;

    color: #618299;

    font-family: var(--mono);

    font-size: 4.8px;
}


.preview-title-row strong {
    display: block;

    margin-top: 4px;

    color: #dbe7ee;

    font-size: 9px;
}


.preview-chip {
    padding: 4px 6px;

    color: #50e2ae;

    border:
        1px solid
        rgba(63, 222, 169, .20);

    border-radius: 4px;

    background:
        rgba(30, 145, 111, .05);

    font-family: var(--mono);

    font-size: 4.5px;
}


.preview-metrics {
    margin-top: 16px;

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 7px;
}


.preview-metrics article {
    padding: 10px 8px;

    border:
        1px solid
        rgba(68, 133, 175, .16);

    border-radius: 6px;

    background:
        linear-gradient(
            145deg,

            rgba(17, 55, 82, .36),

            rgba(5, 20, 33, .36)
        );
}


.preview-metrics small {
    display: block;

    color: #6c8799;

    font-size: 4.8px;
}


.preview-metrics strong {
    display: block;

    margin-top: 7px;

    color: #cfe7f5;

    font-size: 13px;
}


.preview-bottom {
    margin-top: 9px;

    display: grid;

    grid-template-columns:
        1.35fr
        .8fr;

    gap: 7px;
}


.preview-chart {
    height: 92px;

    padding:
        12px
        10px;

    display: flex;

    align-items: flex-end;

    gap: 5px;

    border:
        1px solid
        rgba(69, 133, 175, .14);

    border-radius: 6px;
}


.preview-chart i {
    flex: 1;

    border-radius:
        2px
        2px
        0
        0;

    background:
        linear-gradient(
            180deg,

            #57ddff,

            #216ee0
        );
}


.preview-chart i:nth-child(1) {
    height: 27%;
}

.preview-chart i:nth-child(2) {
    height: 49%;
}

.preview-chart i:nth-child(3) {
    height: 34%;
}

.preview-chart i:nth-child(4) {
    height: 70%;
}

.preview-chart i:nth-child(5) {
    height: 56%;
}

.preview-chart i:nth-child(6) {
    height: 82%;
}

.preview-chart i:nth-child(7) {
    height: 65%;
}


.preview-list {
    padding:
        11px
        8px;

    display: grid;

    align-content: start;

    gap: 9px;

    border:
        1px solid
        rgba(69, 133, 175, .14);

    border-radius: 6px;
}


.preview-list span {
    height: 10px;

    border-radius: 3px;

    background:
        linear-gradient(
            90deg,

            rgba(60, 144, 198, .18),

            rgba(60, 144, 198, .04)
        );
}


.project-switcher {
    display: flex;

    gap: 5px;
}


.project-switcher button {
    width: 24px;
    height: 24px;

    display: grid;

    place-items: center;

    color: #8fa5b5;

    border:
        1px solid
        rgba(80, 144, 186, .26);

    border-radius: 50%;

    background:
        rgba(2, 11, 19, .60);

    cursor: pointer;

    transition:
        color .17s ease,
        border-color .17s ease,
        transform .17s ease;
}


.project-switcher button:hover {
    color: #6ddfff;

    border-color:
        rgba(88, 208, 255, .48);

    transform:
        translateY(-1px);
}


.project-switcher i {
    font-size: 8px;
}


/* =========================================================
   ABOUT
========================================================= */

.about-content {
    padding: 20px;
}


.profile-header {
    display: grid;

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

    gap: 18px;

    align-items: center;

    min-height: 112px;
}


.profile-frame {
    position: relative;

    width: 112px;
    height: 112px;

    overflow: hidden;

    border:
        1px solid
        rgba(94, 176, 216, .38);

    border-radius: 17px;

    background:
        linear-gradient(
            160deg,

            rgba(12, 35, 52, .92),

            rgba(3, 14, 23, .96)
        );

    box-shadow:
        0 16px 28px
        rgba(0, 0, 0, .28),

        inset 0 1px 0
        rgba(255, 255, 255, .04);

    transition:
        transform .22s var(--ease-premium),
        border-color .22s ease,
        box-shadow .22s ease;
}


.profile-frame:hover {
    transform:
        translateY(-2px);

    border-color:
        rgba(101, 196, 235, .50);

    box-shadow:
        0 20px 34px
        rgba(0, 0, 0, .33),

        inset 0 1px 0
        rgba(255, 255, 255, .05);
}


.profile-image {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: contain;

    object-position:
        center bottom;

    filter:
        contrast(1.02)
        saturate(.98);

    pointer-events: none;

    user-select: none;
}


.profile-online {
    position: absolute;

    right: 8px;
    bottom: 8px;

    z-index: 3;

    width: 8px;
    height: 8px;

    border:
        2px solid
        #06121d;

    border-radius: 50%;

    background: var(--green);

    box-shadow:
        0 0 7px
        rgba(67, 229, 167, .58);
}


.profile-intro {
    min-width: 0;
}


.profile-label {
    display: flex;

    align-items: center;

    gap: 7px;

    color: #708b9d;

    font-family: var(--mono);

    font-size: 5.5px;
    font-weight: 700;

    letter-spacing: .08em;
}


.profile-label::before {
    content: "";

    width: 12px;
    height: 1px;

    background:
        rgba(80, 200, 238, .55);
}


.profile-intro h2 {
    margin:
        8px
        0
        0;

    color: #f2f6f8;

    font-size: 18px;

    font-weight: 720;

    line-height: 1.08;

    letter-spacing: -.025em;
}


.profile-intro p {
    margin:
        8px
        0
        0;

    color: #a5b6c2;

    font-size: 8.8px;

    line-height: 1.45;
}


.about-description {
    margin:
        16px
        0
        0;

    color: #b3c3ce;

    font-size: 10px;

    line-height: 1.52;
}


.about-skills {
    margin-top: 15px;

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 7px;
}


.about-skills div {
    min-width: 0;

    padding: 9px 5px;

    display: grid;

    place-items: center;

    gap: 5px;

    color: #90a6b6;

    border:
        1px solid
        rgba(77, 138, 177, .18);

    border-radius: 6px;

    background:
        rgba(7, 25, 39, .22);

    font-size: 6px;

    transition:
        transform .25s var(--ease-premium),
        border-color .25s ease,
        background .25s ease;
}


.about-skills div:hover {
    transform:
        translateY(-2px);

    border-color:
        rgba(84, 206, 255, .34);

    background:
        rgba(18, 66, 94, .22);
}


.about-skills i {
    color: #61d7ff;

    font-size: 11px;
}


.window-cta {
    width: 100%;
    height: 36px;

    margin-top: 14px;

    padding: 0 13px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    color: #cbd9e2;

    border:
        1px solid
        rgba(91, 157, 196, .27);

    border-radius: 7px;

    background:
        rgba(4, 17, 27, .34);

    font-size: 7.5px;
    font-weight: 600;

    transition:
        transform .22s var(--ease-premium),
        border-color .22s ease,
        color .22s ease,
        background .22s ease,
        box-shadow .22s ease;
}


.window-cta:hover {
    color: #f2f8fb;

    border-color:
        rgba(102, 194, 231, .44);

    background:
        rgba(7, 27, 40, .43);

    transform:
        translateY(-1px);
}


/* =========================================================
   PROJECT FOLDERS
========================================================= */

.folder-grid {
    height:
        calc(
            100%
            -
            40px
        );

    padding: 15px;

    display: grid;

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

    gap: 10px;
}


.folder-card {
    position: relative;

    min-width: 0;

    padding: 12px 9px;

    display: grid;

    grid-template-columns:
        42px
        1fr
        12px;

    gap: 9px;

    align-items: center;

    color: #dce7ed;

    border:
        1px solid
        rgba(75, 139, 181, .20);

    border-radius: 8px;

    background:
        linear-gradient(
            145deg,

            rgba(9, 29, 45, .44),

            rgba(3, 14, 23, .34)
        );

    transition:
        transform .25s var(--ease-premium),
        border-color .25s ease,
        background .25s ease,
        box-shadow .25s ease;
}


.folder-card:hover {
    transform:
        translateY(-2px);

    border-color:
        rgba(75, 208, 255, .38);

    background:
        linear-gradient(
            145deg,

            rgba(13, 43, 64, .50),

            rgba(4, 19, 31, .44)
        );

    box-shadow:
        0 12px 25px
        rgba(0, 0, 0, .15);
}


.folder-icon {
    width: 40px;
    height: 40px;

    display: grid;

    place-items: center;

    border:
        1px solid
        rgba(86, 184, 232, .26);

    border-radius: 9px;

    background:
        linear-gradient(
            145deg,

            rgba(41, 164, 223, .14),

            rgba(9, 55, 84, .06)
        );
}


.folder-icon i {
    color: #67d9ff;

    font-size: 17px;
}


.folder-card strong {
    display: block;

    color: #e2ebf0;

    font-size: 9.5px;
}


.folder-card span {
    display: block;

    margin-top: 4px;

    color: #728da0;

    font-size: 7px;

    line-height: 1.25;
}


.folder-arrow {
    color: #526f82;

    font-size: 7px;

    transition:
        color .17s ease,
        transform .17s ease;
}


.folder-card:hover
.folder-arrow {
    color: #5bd8ff;

    transform:
        translateX(2px);
}


.folder-labs
.folder-icon {
    border-color:
        rgba(142, 114, 255, .28);

    background:
        rgba(92, 67, 196, .10);
}


.folder-labs
.folder-icon i {
    color: #9f8bff;
}


/* =========================================================
   MOHSIN LABS
========================================================= */

.labs-window {
    border-color:
        rgba(121, 102, 235, .28);
}


.labs-status,
.labs-file-icon {
    color: #a192ff;
}


.labs-content {
    height:
        calc(
            100%
            -
            40px
        );

    padding: 18px 20px;

    display: grid;

    grid-template-columns:
        69px
        1fr
        102px;

    gap: 15px;

    align-items: center;
}


.labs-logo {
    position: relative;

    width: 66px;
    height: 66px;

    display: grid;

    place-items: center;

    overflow: hidden;

    color: #e0dbff;

    border:
        1px solid
        rgba(144, 120, 255, .36);

    border-radius: 17px;

    background:
        radial-gradient(
            circle at 28% 20%,

            rgba(158, 118, 255, .28),

            transparent 40%
        ),

        linear-gradient(
            145deg,

            #141537,

            #090c20
        );
}


.labs-logo span {
    position: relative;

    z-index: 2;

    font-size: 19px;
    font-weight: 800;
}


.labs-logo i {
    position: absolute;

    width: 35px;
    height: 35px;

    border:
        1px solid
        rgba(152, 132, 255, .18);

    transform:
        rotate(45deg);
}


.labs-founder {
    color: #9a89ed;

    font-family: var(--mono);

    font-size: 5.5px;

    letter-spacing: .04em;
}


.labs-copy h2 {
    margin:
        6px
        0
        0;

    color: #f0efff;

    font-size: 19px;
}


.labs-copy p {
    margin:
        6px
        0
        0;

    color: #aeb8cd;

    font-size: 8px;

    line-height: 1.43;
}


.labs-relation {
    display: block;

    margin-top: 6px;

    color: #706998;

    font-family: var(--mono);

    font-size: 5px;
}


.labs-button {
    height: 38px;

    padding: 0 11px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    color: #ded9ff;

    border:
        1px solid
        rgba(139, 116, 255, .38);

    border-radius: 7px;

    background:
        rgba(69, 50, 146, .11);

    font-size: 7px;

    font-weight: 600;

    transition:
        transform .22s var(--ease-premium),
        border-color .22s ease,
        background .22s ease,
        box-shadow .22s ease;
}


.labs-button:hover {
    transform:
        translateY(-1px);

    border-color:
        rgba(164, 142, 255, .56);

    background:
        rgba(79, 59, 163, .18);
}


/* =========================================================
   ARCHITECTURE
========================================================= */

.architecture-content {
    height:
        calc(
            100%
            -
            40px
        );

    padding: 19px;

    display: grid;

    grid-template-columns:
        128px
        1fr;

    gap: 16px;

    align-items: center;
}


.architecture-visual {
    position: relative;

    width: 120px;
    height: 155px;
}


.architecture-layer {
    position: absolute;

    left: 50%;

    width: 82px;
    height: 50px;

    border:
        1px solid
        rgba(78, 205, 255, .40);

    border-radius: 6px;

    background:
        linear-gradient(
            145deg,

            rgba(27, 134, 197, .16),

            rgba(9, 44, 74, .08)
        );

    transform:
        translateX(-50%)
        rotate(30deg)
        skewX(-30deg);
}


.layer-one {
    top: 8px;
}


.layer-two {
    top: 36px;
}


.layer-three {
    top: 64px;
}


.layer-four {
    top: 92px;
}


.architecture-core {
    position: absolute;

    left: 50%;
    top: 55px;

    width: 34px;
    height: 34px;

    display: grid;

    place-items: center;

    color: #80e6ff;

    border:
        1px solid
        rgba(91, 211, 255, .46);

    border-radius: 8px;

    background:
        rgba(4, 30, 46, .72);

    transform:
        translateX(-50%);
}


.architecture-core i {
    font-size: 12px;
}


.architecture-label {
    color: #66859a;

    font-family: var(--mono);

    font-size: 5.5px;
}


.architecture-copy h3 {
    margin:
        7px
        0
        0;

    color: #dfe9ee;

    font-size: 17px;

    line-height: 1.10;

    letter-spacing: -.025em;
}


.architecture-copy ul {
    margin:
        13px
        0
        0;

    padding: 0;

    display: grid;

    gap: 7px;

    list-style: none;
}


.architecture-copy li {
    position: relative;

    padding-left: 12px;

    color: #819bad;

    font-size: 7.5px;
}


.architecture-copy li::before {
    content: "";

    position: absolute;

    left: 0;
    top: 50%;

    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: #54d8ff;

    transform:
        translateY(-50%);
}


/* =========================================================
   TERMINAL
========================================================= */

.terminal-file-icon {
    color: #52e4ac;
}


.terminal-output {
    height:
        calc(
            100%
            -
            84px
        );

    padding: 18px;

    overflow-y: auto;

    color: #aebfca;

    background:
        rgba(1, 8, 14, .43);

    font-family: var(--mono);

    font-size: 9px;

    line-height: 1.65;
}


.terminal-output p {
    margin:
        0
        0
        8px;
}


.terminal-output strong {
    color: #4ee3a8;
}


.terminal-muted {
    color: #6d899c;
}


.terminal-input-row {
    height: 44px;

    padding: 0 18px;

    display: flex;

    align-items: center;

    gap: 8px;

    border-top:
        1px solid
        rgba(68, 128, 167, .16);

    background:
        rgba(2, 11, 19, .57);

    font-family: var(--mono);

    font-size: 9px;
}


.terminal-input-row span {
    color: #4ee3a8;
}


.terminal-input-row input {
    min-width: 0;

    flex: 1;

    color: #dfe8ed;

    border: 0;

    outline: 0;

    background: transparent;

    font-family: inherit;

    font-size: inherit;
}


/* =========================================================
   DOCK
========================================================= */

.os-dock {
    position: fixed;

    z-index: 2000;

    left:
        calc(
            50%
            +
            var(--sidebar-width) / 2
        );

    bottom: 18px;

    min-height: 68px;

    padding: 9px 11px;

    display: flex;

    align-items: flex-end;

    gap: 6px;

    border:
        1px solid
        rgba(114, 175, 215, .28);

    border-radius: 19px;

    background:
        linear-gradient(
            180deg,

            rgba(28, 49, 66, .58),

            rgba(6, 19, 30, .64)
        );

    box-shadow:
        0 20px 44px
        rgba(0, 0, 0, .40),

        inset 0 1px 0
        rgba(255, 255, 255, .04);

    backdrop-filter:
        blur(22px)
        saturate(130%);

    -webkit-backdrop-filter:
        blur(22px)
        saturate(130%);

    transform:
        translateX(-50%);
}


.dock-item {
    --dock-scale: 1;

    position: relative;

    width: 43px;
    height: 43px;

    flex: 0 0 auto;

    padding: 0;

    display: grid;

    place-items: center;

    border: 0;

    background: transparent;

    cursor: pointer;

    transform:
        translateY(
            calc(
                (
                    var(--dock-scale)
                    -
                    1
                )
                *
                -9px
            )
        )

        scale(
            var(--dock-scale)
        );

    transform-origin:
        center bottom;

    transition:
        transform .12s linear;
}


.dock-icon {
    width: 40px;
    height: 40px;

    display: grid;

    place-items: center;

    color: #dceaf2;

    border:
        1px solid
        rgba(111, 169, 207, .24);

    border-radius: 11px;

    background:
        linear-gradient(
            145deg,

            rgba(39, 75, 102, .82),

            rgba(8, 25, 39, .88)
        );

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, .04),

        0 8px 18px
        rgba(0, 0, 0, .18);

    transition:
        border-color .17s ease,
        box-shadow .17s ease,
        filter .17s ease;
}


.dock-item:hover
.dock-icon {
    border-color:
        rgba(92, 212, 255, .46);

    filter:
        brightness(1.05);
}


.dock-icon i {
    font-size: 18px;
}


.dock-app.is-active::before {
    content: "";

    position: absolute;

    left: 50%;
    bottom: -6px;

    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: #5ee0ff;

    transform:
        translateX(-50%);
}


.dock-item::after {
    content:
        attr(data-label);

    position: absolute;

    left: 50%;

    bottom:
        calc(
            100%
            +
            10px
        );

    padding: 5px 8px;

    color: #edf7fb;

    border:
        1px solid
        rgba(104, 168, 209, .24);

    border-radius: 6px;

    background:
        rgba(2, 11, 18, .94);

    font-size: 7px;

    white-space: nowrap;

    opacity: 0;

    pointer-events: none;

    transform:
        translateX(-50%)
        translateY(5px);

    transition: .15s ease;
}


.dock-item:hover::after {
    opacity: 1;

    transform:
        translateX(-50%)
        translateY(0);
}


.dock-divider {
    width: 1px;
    height: 38px;

    margin: 2px 5px;

    align-self: center;

    background:
        linear-gradient(
            180deg,

            transparent,

            rgba(136, 180, 207, .27),

            transparent
        );
}


/* Application icons */

.dock-home,
.dock-projects {
    color: #7fe2ff;
}


.dock-labs {
    color: #ac93ff;
}


.dock-terminal {
    color: #57e7ac;
}


.dock-about {
    color: #9ddcff;
}


/* Social icons */

.social-linkedin
.dock-icon {
    color: #fff;

    border-color:
        rgba(10, 102, 194, .56);

    background:
        linear-gradient(
            145deg,

            #1677c9,

            #075798
        );
}


.social-instagram
.dock-icon {
    color: #fff;

    border-color:
        rgba(221, 63, 132, .60);

    background:
        radial-gradient(
            circle at 30% 105%,

            #feda75 0%,

            #fa7e1e 23%,

            #d62976 48%,

            #962fbf 72%,

            #4f5bd5 100%
        );
}


.social-x
.dock-icon {
    color: #fff;

    border-color:
        rgba(255, 255, 255, .22);

    background:
        linear-gradient(
            145deg,

            #191919,

            #030303
        );
}


.social-upwork
.dock-icon {
    color: #fff;

    border-color:
        rgba(20, 216, 67, .53);

    background:
        linear-gradient(
            145deg,

            #23c855,

            #0b9d34
        );
}


.social-behance
.dock-icon {
    color: #fff;

    border-color:
        rgba(48, 105, 255, .57);

    background:
        linear-gradient(
            145deg,

            #1769ff,

            #0d45b5
        );
}


.social-github
.dock-icon {
    color: #fff;

    border-color:
        rgba(255, 255, 255, .20);

    background:
        linear-gradient(
            145deg,

            #333943,

            #12161c
        );
}


.social-fiverr
.dock-icon {
    color: #fff;

    border-color:
        rgba(29, 191, 115, .59);

    background:
        linear-gradient(
            145deg,

            #24c479,

            #13975a
        );
}


.fiverr-logo {
    font-family:
        Arial,
        sans-serif;

    font-size: 17px;

    font-weight: 900;

    letter-spacing: -2px;

    text-transform: lowercase;
}


/* =========================================================
   COMMAND PALETTE
========================================================= */

.command-overlay {
    position: fixed;

    inset: 0;

    z-index: 9000;

    padding-top: 110px;

    display: grid;

    place-items:
        start center;

    background:
        rgba(0, 5, 10, .43);

    backdrop-filter:
        blur(9px);

    -webkit-backdrop-filter:
        blur(9px);
}


.command-overlay.is-hidden {
    display: none;
}


.command-palette {
    width:
        min(
            590px,
            calc(
                100%
                -
                30px
            )
        );

    overflow: hidden;

    border:
        1px solid
        rgba(92, 198, 247, .40);

    border-radius: 13px;

    background:
        rgba(3, 15, 25, .94);

    box-shadow:
        0 28px 72px
        rgba(0, 0, 0, .52),

        inset 0 1px 0
        rgba(255, 255, 255, .03);
}


.command-search {
    height: 56px;

    padding: 0 16px;

    display: flex;

    align-items: center;

    gap: 12px;

    border-bottom:
        1px solid
        rgba(74, 130, 169, .16);
}


.command-search > i {
    color: #60d9ff;

    font-size: 13px;
}


.command-search input {
    min-width: 0;

    flex: 1;

    color: #e0eaf0;

    border: 0;

    outline: 0;

    background: transparent;

    font-size: 11px;
}


.command-search kbd,
.command-results kbd {
    padding: 3px 6px;

    color: #6e8799;

    border:
        1px solid
        rgba(255, 255, 255, .07);

    border-radius: 5px;

    background:
        rgba(255, 255, 255, .025);

    font-family: var(--mono);

    font-size: 6px;
}


.command-heading {
    padding:
        11px
        15px
        5px;

    color: #56758b;

    font-family: var(--mono);

    font-size: 6px;

    letter-spacing: .10em;
}


.command-results {
    padding:
        5px
        9px
        10px;

    display: grid;
}


.command-results a,
.command-results button {
    width: 100%;
    height: 46px;

    padding: 0 11px;

    display: grid;

    grid-template-columns:
        31px
        1fr
        auto;

    gap: 9px;

    align-items: center;

    color: #aebfca;

    border: 0;

    border-radius: 7px;

    background: transparent;

    text-align: left;

    font-size: 9px;

    cursor: pointer;
}


.command-results a:hover,
.command-results button:hover {
    color: #fff;

    background:
        rgba(49, 158, 218, .09);
}


.command-results > * > span {
    width: 29px;
    height: 29px;

    display: grid;

    place-items: center;

    color: #65d8ff;

    border:
        1px solid
        rgba(79, 153, 198, .20);

    border-radius: 6px;

    background:
        rgba(17, 61, 89, .16);
}


/* =========================================================
   MEDIUM DESKTOP
========================================================= */

@media (max-width: 1450px) {

    :root {
        --sidebar-width: 104px;
        --left-column: 320px;
        --right-column: 300px;
        --edge: 18px;
        --gap: 16px;
    }


    .os-brand-logo {
        width: 88px;
    }


    .system-bar {
        padding: 0 20px;

        grid-template-columns:
            1fr
            290px
            210px;
    }


    .welcome-content h1 {
        font-size: 28px;
    }


    .welcome-content > p {
        font-size: 9.5px;
    }


    .featured-copy h2 {
        font-size: 21px;
    }


    .featured-content {
        grid-template-columns:
            minmax(185px, 39%)
            1fr;

        gap: 17px;

        padding:
            23px
            20px;
    }


    .labs-window {
        width: 420px;
    }


    .os-dock {
        gap: 4px;
    }


    .dock-item {
        width: 40px;
        height: 40px;
    }


    .dock-icon {
        width: 38px;
        height: 38px;
    }


    .profile-header {
        grid-template-columns:
            100px
            1fr;

        gap: 14px;
    }


    .profile-frame {
        width: 100px;
        height: 100px;
    }


    .profile-intro h2 {
        font-size: 18px;
    }

}


/* =========================================================
   SHORT DESKTOP HEIGHT
========================================================= */

@media (max-height: 760px) and (min-width: 1221px) {

    .os-brand {
        height: 92px;
    }


    .os-brand-logo {
        width: 80px;
        height: 62px;
    }


    .os-brand-system {
        margin-top: -6px;
    }


    .side-nav {
        margin-top: 6px;

        gap: 2px;
    }


    .side-item {
        height: 52px;

        padding: 5px 4px;

        gap: 4px;
    }


    .side-icon {
        width: 28px;
        height: 28px;
    }


    .side-icon i {
        font-size: 15px;
    }


    .side-label {
        font-size: 7.8px;
    }


    .sidebar-status {
        min-height: 25px;

        padding-top: 7px;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1220px) {

    body {
        overflow-y: auto;
    }


    .desktop {
        height: auto;

        min-height: 100vh;

        overflow: visible;
    }


    :root {
        --sidebar-width: 82px;
    }


    .os-brand {
        height: 83px;
    }


    .os-brand-logo {
        width: 68px;
        height: 58px;
    }


    .os-brand-system,
    .side-label,
    .sidebar-status {
        display: none;
    }


    .side-item {
        height: 54px;
    }


    .system-bar {
        grid-template-columns:
            1fr
            245px
            165px;
    }


    .workspace {
        position: relative;

        left:
            var(--sidebar-width);

        top:
            var(--topbar-height);

        width:
            calc(
                100%
                -
                var(--sidebar-width)
            );

        min-height: auto;

        padding:
            20px
            20px
            125px;

        display: grid;

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

        gap: 18px;
    }


    .os-window {
        position:
            relative !important;

        inset:
            auto !important;

        width:
            100% !important;

        height:
            auto !important;

        min-height:
            280px;

        transform:
            none !important;
    }


    .featured-window {
        grid-column:
            1 / -1;

        min-height:
            430px;
    }


    .featured-content {
        grid-template-columns:
            260px
            1fr;
    }


    .labs-window {
        min-height:
            190px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 760px) {

    :root {
        --sidebar-width: 0px;
        --topbar-height: 62px;
    }


    .desktop {
        padding-bottom: 75px;
    }


    .os-sidebar {
        left: 0;
        right: 0;
        top: auto;
        bottom: 0;

        width: 100%;
        height: 67px;

        padding: 6px 7px;

        border-right: 0;

        border-top:
            1px solid
            rgba(92, 155, 197, .19);

        background:
            rgba(3, 14, 24, .80);
    }


    .os-brand,
    .sidebar-status {
        display: none;
    }


    .side-nav {
        width: 100%;

        margin: 0;

        display: flex;

        align-items: center;

        justify-content: space-around;

        gap: 2px;
    }


    .side-item {
        width: auto;
        min-width: 0;
        max-width: 52px;
        height: 54px;

        flex: 1 1 0;

        padding: 4px 2px;
    }


/* Mobile navigation keeps every primary OS destination accessible. */

.side-nav {
    justify-content: space-between;

    gap: 0;
}


.side-item {
    width: auto;
    min-width: 0;
    max-width: none;
    height: 54px;

    flex: 1 1 0;

    padding: 4px 0;

    gap: 3px;
}


.side-icon {
    width: 27px;
    height: 27px;

    border-radius: 7px;
}


.side-icon i {
    font-size: 14px;
}


.side-label {
    display: block;

    font-size: 5.3px;

    line-height: 1.05;

    white-space: nowrap;
}


    .system-bar {
        left: 0;

        grid-template-columns:
            1fr
            auto;

        padding: 0 13px;
    }


    .system-search,
    .system-indicators {
        display: none;
    }


    .system-time {
        min-width: auto;

        padding: 0;

        border: 0;
    }


    .system-time span {
        display: none;
    }


    .workspace {
        left: 0;

        width: 100%;

        padding:
            14px
            12px
            105px;

        grid-template-columns:
            1fr;
    }


    .featured-window {
        grid-column: auto;
    }


    .featured-content {
        display: block;
    }


    .project-visual {
        min-height: 310px;

        margin-top: 24px;
    }


    .profile-header {
        grid-template-columns:
            92px
            1fr;

        gap: 13px;
    }


    .profile-frame {
        width: 92px;
        height: 92px;
    }


    .folder-grid {
        grid-template-columns:
            1fr;
    }


    .labs-content {
        grid-template-columns:
            66px
            1fr;
    }


    .labs-button {
        display: none;
    }


    .architecture-content {
        grid-template-columns:
            120px
            1fr;
    }


    .os-dock {
        display: none;
    }

}


/* =========================================================
   MOTION SYSTEM
========================================================= */


/* Ambient wallpaper */

.wallpaper {
    animation:
        mbWallpaperLife
        28s
        ease-in-out
        infinite alternate;

    will-change:
        transform;
}


@keyframes mbWallpaperLife {

    0% {
        transform:
            scale(1.035)
            translate3d(-2px, -1px, 0);
    }

    50% {
        transform:
            scale(1.04)
            translate3d(2px, 1px, 0);
    }

    100% {
        transform:
            scale(1.035)
            translate3d(0, -2px, 0);
    }

}


/* Status indicators */

.window-live i,
.system-ready i,
.status-light,
.profile-online {
    animation:
        mbStatusLife
        3.4s
        ease-in-out
        infinite;
}


@keyframes mbStatusLife {

    0%,
    100% {
        opacity: .62;

        transform:
            scale(.92);
    }

    50% {
        opacity: 1;

        transform:
            scale(1);
    }

}


/* Featured project data */

.preview-chart i {
    transform-origin:
        bottom center;

    animation:
        mbDataLife
        5.4s
        ease-in-out
        infinite;
}


.preview-chart i:nth-child(1) {
    animation-delay: -.4s;
}

.preview-chart i:nth-child(2) {
    animation-delay: -1.1s;
}

.preview-chart i:nth-child(3) {
    animation-delay: -2.3s;
}

.preview-chart i:nth-child(4) {
    animation-delay: -1.6s;
}

.preview-chart i:nth-child(5) {
    animation-delay: -3.1s;
}

.preview-chart i:nth-child(6) {
    animation-delay: -2s;
}

.preview-chart i:nth-child(7) {
    animation-delay: -3.8s;
}


@keyframes mbDataLife {

    0%,
    100% {
        transform:
            scaleY(.97);

        opacity: .86;
    }

    50% {
        transform:
            scaleY(1.025);

        opacity: 1;
    }

}


/* Architecture depth */

.architecture-layer {
    animation:
        mbArchitectureLife
        7s
        ease-in-out
        infinite;
}


.layer-two {
    animation-delay: -1.4s;
}

.layer-three {
    animation-delay: -2.8s;
}

.layer-four {
    animation-delay: -4.2s;
}


@keyframes mbArchitectureLife {

    0%,
    100% {
        translate:
            0 0;
    }

    50% {
        translate:
            0 -1.5px;
    }

}


/* Mohsin Labs mark */

.labs-logo {
    animation:
        mbLabsLife
        6s
        ease-in-out
        infinite;

    transform-origin:
        center;
}


@keyframes mbLabsLife {

    0%,
    100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(-1.5px);
    }

}


/* System indicator */

.path-home {
    animation:
        mbSystemIndicator
        5s
        ease-in-out
        infinite;
}


@keyframes mbSystemIndicator {

    0%,
    100% {
        opacity: .82;
    }

    50% {
        opacity: 1;
    }

}


/* Pointer depth */

.desktop {
    --mb-depth-x: 0px;
    --mb-depth-y: 0px;
}


.workspace {
    transform:
        translate3d(
            var(--mb-depth-x),
            var(--mb-depth-y),
            0
        );

    transition:
        transform
        .9s
        var(--ease-premium);
}


.system-bar {
    transform:
        translate3d(
            calc(var(--mb-depth-x) * -.18),
            0,
            0
        );

    transition:
        transform
        1.1s
        var(--ease-premium);
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (
    prefers-reduced-motion:
    reduce
) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: .001ms !important;
    }


    .wallpaper,
    .window-live i,
    .system-ready i,
    .status-light,
    .profile-online,
    .preview-chart i,
    .architecture-layer,
    .labs-logo,
    .path-home {
        animation: none !important;
    }


    .workspace,
    .system-bar {
        transform: none !important;
    }

}