:root {
    --os-font: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --os-shadow: 0 22px 70px rgba(0, 0, 0, 0.35);
}

html:has(.os-page),
body.os-page,
.os-page #main-content {
    width: 100%;
    height: 100%;
    min-height: 100%;
    overflow: hidden;
}

body.os-page {
    margin: 0;
    background: #08090d;
    color: #fff;
    font-family: var(--os-font);
}

body.os-page::before {
    display: none;
}

.os-page .skip-link {
    position: fixed;
    z-index: 90;
    top: 0.6rem;
    left: 0.6rem;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.os-page .skip-link:focus {
    width: auto;
    height: auto;
    padding: 0.65rem 0.9rem;
    clip-path: none;
    border-radius: 0.5rem;
    background: #fff;
    color: #111;
}

.os-root {
    position: relative;
    isolation: isolate;
    width: 100%;
    min-height: 100dvh;
    overflow: hidden;
    background: #08090d;
    user-select: none;
}

.os-loading {
    position: absolute;
    z-index: 80;
    inset: 0;
    display: grid;
    place-items: center;
    background: #0b0c11;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.82rem;
}

.os-root.is-ready .os-loading,
.os-loading[hidden] {
    display: none;
}

.platform {
    position: absolute;
    inset: 0;
    display: none;
    overflow: hidden;
}

.os-root[data-os="windows"] .platform-windows,
.os-root[data-os="macos"] .platform-macos,
.os-root[data-os="ios"] .platform-ios,
.os-root[data-os="android"] .platform-android {
    display: block;
    animation: platform-in 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

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

.platform button,
.system-switch-button,
.system-switcher button {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
}

.platform button:focus-visible,
.platform a.app-launch:focus-visible,
.system-switch-button:focus-visible,
.system-switcher button:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

.system-switch-button {
    position: fixed;
    z-index: 70;
    top: 3.25rem;
    right: 1rem;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 2.2rem;
    padding: 0.42rem 0.68rem;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 0.7rem;
    background: rgba(18, 20, 28, 0.58);
    box-shadow: 0 9px 28px rgba(0, 0, 0, 0.22), inset 0 1px rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 650;
    backdrop-filter: blur(18px) saturate(145%);
    transition: background-color 180ms ease, transform 180ms ease;
}

.system-switch-button:hover {
    background: rgba(34, 37, 48, 0.78);
}

.system-switch-button:active {
    transform: scale(0.97);
}

.system-switch-button svg {
    width: 1.15rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.system-switcher {
    position: fixed;
    z-index: 75;
    top: 6rem;
    right: 1rem;
    width: min(21rem, calc(100vw - 2rem));
    padding: 0.78rem;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 1.1rem;
    background: rgba(22, 23, 31, 0.82);
    box-shadow: var(--os-shadow), inset 0 1px rgba(255, 255, 255, 0.1);
    color: #fff;
    backdrop-filter: blur(30px) saturate(150%);
    animation: switcher-in 180ms ease both;
}

.system-switcher[hidden] {
    display: none;
}

.switcher-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.25rem 0.3rem 0.7rem;
}

.switcher-head > div {
    display: grid;
}

.switcher-head strong {
    font-size: 0.86rem;
}

.switcher-head small {
    color: rgba(255, 255, 255, 0.54);
    font-size: 0.67rem;
}

.switcher-head > button {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    font-size: 1.25rem;
}

.switcher-options {
    display: grid;
    gap: 0.32rem;
}

.switcher-options button {
    display: grid;
    min-height: 3.2rem;
    grid-template-columns: 2.25rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.65rem;
    padding: 0.42rem 0.55rem;
    border: 1px solid transparent;
    border-radius: 0.76rem;
    text-align: left;
    transition: background-color 160ms ease, border-color 160ms ease;
}

.switcher-options button:hover {
    background: rgba(255, 255, 255, 0.07);
}

.switcher-options button.is-active {
    border-color: rgba(127, 179, 255, 0.48);
    background: rgba(61, 123, 220, 0.2);
}

.switcher-options button > span {
    display: grid;
    width: 2.15rem;
    height: 2.15rem;
    place-items: center;
    border-radius: 0.62rem;
    background: rgba(255, 255, 255, 0.1);
    font-size: 0.56rem;
    font-weight: 800;
}

.switcher-options button b {
    font-size: 0.76rem;
}

.switcher-options button i {
    color: rgba(255, 255, 255, 0.48);
    font-size: 0.64rem;
    font-style: normal;
}

.mini-windows {
    background:
        linear-gradient(90deg, transparent 47%, rgba(255,255,255,.9) 47% 53%, transparent 53%),
        linear-gradient(0deg, transparent 47%, rgba(255,255,255,.9) 47% 53%, transparent 53%),
        #177bd1 !important;
}

.mini-ios { background: #f2f2f7 !important; color: #111; }
.mini-android { background: #a8c7fa !important; }
.mini-android::before { content: ""; width: 1rem; height: .75rem; border-radius: .55rem .55rem .2rem .2rem; background: #183153; }
.mini-apple { background: #ddd !important; color: #111; }

.app-icon {
    position: relative;
    display: grid;
    width: 3.15rem;
    aspect-ratio: 1;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 0.9rem;
    box-shadow: inset 0 1px rgba(255,255,255,.25), 0 6px 16px rgba(0,0,0,.2);
}

.app-icon svg,
.app-icon img {
    width: 72%;
    height: 72%;
}

.app-icon > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.app-icon-telegram,
.app-icon-browser,
.app-icon-folder,
.app-icon-terminal,
.app-icon-about,
.app-icon-mail,
.app-icon-settings,
.app-icon-github { background: transparent; }
.app-icon-happ { border-color:rgba(255,255,255,.28); border-radius:.18rem; background:#101114; }
.app-icon-happ > img { width:72%; height:78%; object-fit:contain; }
.app-icon-codex { background:#fff; }
.app-icon-codex > img { width:68%; height:68%; }
.app-icon-claude { background:#f2eee6; }
.app-icon-claude > img { width:66%; height:66%; }
.app-icon-browser svg { width: 84%; height: 84%; }
.app-icon-folder svg { fill: rgba(255,255,255,.9); stroke: #fff; stroke-width: 2; stroke-linejoin: round; }
.app-icon-terminal svg { fill: rgba(0,0,0,.2); stroke: #a8f3cd; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.app-icon-about svg { fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; }
.app-icon-mail svg { fill: none; stroke: #fff; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.app-icon-settings svg { fill: none; stroke: #fff; stroke-width: 3.8; stroke-linecap: round; stroke-linejoin: round; }

/* Windows 11 */
.platform-windows {
    color: #15171b;
    font-family: "Segoe UI Variable", "Segoe UI", var(--os-font);
    background: #367acf;
}

.windows-wallpaper,
.windows-wallpaper::after {
    position: absolute;
    inset: 0;
}

.windows-wallpaper {
    overflow: hidden;
    background:
        radial-gradient(circle at 72% 72%, rgba(181, 227, 255, 0.85), transparent 26%),
        radial-gradient(circle at 24% 30%, rgba(83, 174, 238, 0.66), transparent 42%),
        linear-gradient(137deg, #1262ac 0%, #7bc8ed 48%, #227ec9 100%);
}

.windows-wallpaper::after {
    content: "";
    background:
        linear-gradient(90deg, rgba(255,255,255,.08), transparent 42%, rgba(0,52,119,.15)),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E");
    opacity:.72;
}

.windows-wallpaper i {
    position: absolute;
    left: 50%;
    top: 50%;
    display: block;
    width: 47vw;
    height: 25vw;
    border-radius: 50% 12% 50% 10%;
    background: linear-gradient(140deg, rgba(255,255,255,.96), rgba(160,224,255,.5) 42%, rgba(12,96,184,.72));
    box-shadow: inset -18px -18px 55px rgba(0,68,150,.2), 0 30px 80px rgba(0,70,150,.2);
    filter: blur(1px);
    transform-origin: 0 0;
}

.windows-wallpaper i:nth-child(1) { transform: rotate(-36deg) translate(-5%, -100%) skewX(-9deg); }
.windows-wallpaper i:nth-child(2) { transform: rotate(52deg) translate(-3%, -6%) skewX(12deg); }
.windows-wallpaper i:nth-child(3) { transform: rotate(145deg) translate(-10%, -15%) skewX(-8deg); }
.windows-wallpaper i:nth-child(4) { transform: rotate(230deg) translate(-2%, -8%) skewX(10deg); }

.os-root[data-wallpaper="ocean"] .windows-wallpaper { background:radial-gradient(circle at 66% 31%,rgba(145,232,239,.9),transparent 29%),linear-gradient(142deg,#08325f,#2084b5 55%,#82d1d8); }
.os-root[data-wallpaper="graphite"] .windows-wallpaper { background:radial-gradient(circle at 70% 30%,rgba(167,177,193,.42),transparent 24%),linear-gradient(142deg,#101824,#354254 55%,#768394); }
.os-root[data-wallpaper="graphite"] .windows-wallpaper i { filter:grayscale(.8) brightness(.62); opacity:.56; }

.windows-brand {
    position:absolute;
    z-index:1;
    right:2rem;
    bottom:5.8rem;
    display:grid;
    grid-template-columns:auto auto;
    align-items:center;
    column-gap:.65rem;
    color:rgba(255,255,255,.72);
    text-shadow:0 1px 3px rgba(5,39,76,.38);
    user-select:none;
}
.windows-brand > span { grid-row:1/3; font:700 1.4rem/1 ui-monospace,monospace; }
.windows-brand b { font-size:.72rem; font-weight:650; letter-spacing:.02em; }
.windows-brand small { font-size:.55rem; letter-spacing:.09em; text-transform:uppercase; opacity:.72; }

.desktop-shortcuts {
    position: absolute;
    z-index: 2;
    display: grid;
    gap: 0.9rem;
}

.desktop-shortcuts-left {
    top: 1rem;
    left: 0.9rem;
}

.desktop-shortcuts :is(button,.app-launch),
.mac-desktop-icons button {
    display: grid;
    width: 5rem;
    place-items: center;
    gap: 0.25rem;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,.75);
    font-size: 0.7rem;
    text-decoration:none;
}

.desktop-shortcuts :is(button,.app-launch):hover {
    border-radius: 0.25rem;
    background: rgba(255,255,255,.18);
}

.desktop-shortcuts :is(button,.app-launch).is-selected,
.mac-desktop-icons button.is-selected {
    border-radius:.28rem;
    outline:1px solid rgba(255,255,255,.62);
    outline-offset:2px;
    background:rgba(56,139,229,.46);
}

.desktop-selection-box {
    position:fixed;
    z-index:48;
    display:none;
    pointer-events:none;
    border:1px solid rgba(116,188,255,.95);
    background:rgba(44,138,229,.2);
}

.desktop-selection-box.is-visible { display:block; }

.desktop-shortcuts .app-icon {
    width: 3rem;
    border-radius: 0.75rem;
}

.platform-windows.is-refreshing .windows-wallpaper { animation:desktop-refresh 380ms ease both; }
.platform-windows.is-easter .windows-wallpaper { animation:easter-wallpaper 1800ms ease both; }
.platform-windows.is-compact .desktop-shortcuts { gap:.48rem; }
.platform-windows.is-compact .desktop-shortcuts .app-icon { width:2.55rem; }

.windows-start-menu {
    position: absolute;
    z-index: 9;
    left: 50%;
    bottom: 4.2rem;
    width: min(38rem, calc(100vw - 2rem));
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.72);
    border-radius: .8rem;
    background: rgba(242,247,252,.91);
    box-shadow: 0 26px 70px rgba(30,69,105,.34), inset 0 1px rgba(255,255,255,.75);
    color: #20242b;
    transform: translateX(-50%);
    backdrop-filter: blur(34px) saturate(145%);
    animation: windows-start-in 190ms cubic-bezier(.22,1,.36,1) both;
}

.windows-start-menu[hidden] { display: none; }

.start-search {
    display: flex;
    height: 2.35rem;
    align-items: center;
    gap: .65rem;
    margin: 1.6rem 2.1rem 1.2rem;
    padding: 0 .85rem;
    border: 1px solid rgba(60,76,92,.28);
    border-bottom: 2px solid #1676d2;
    border-radius: .35rem;
    background: rgba(255,255,255,.78);
    color: #66717e;
    font-size: .72rem;
}

.start-search svg { width: 1rem; fill:none; stroke:#3d4650; stroke-width:1.8; stroke-linecap:round; }
.start-search input { min-width:0; flex:1; border:0; outline:0; background:transparent; color:#2c3540; font:inherit; }
.start-search input::placeholder { color:#7a8591; }
.start-search-results { position:absolute; z-index:4; top:4.15rem; right:2.1rem; left:2.1rem; max-height:18rem; padding:.35rem; overflow:auto; border:1px solid rgba(52,69,86,.14); border-radius:.55rem; background:rgba(252,253,254,.96); box-shadow:0 16px 38px rgba(31,61,89,.22); }
.start-search-results[hidden] { display:none; }
.start-search-results button,.os-search-results button { display:grid; width:100%; grid-template-columns:2rem minmax(0,1fr); align-items:center; gap:.55rem; padding:.55rem .65rem; border-radius:.4rem; text-align:left; }
.start-search-results button:hover,.start-search-results button.is-current,.os-search-results button:hover,.os-search-results button.is-current { background:rgba(31,116,198,.11); }
.start-search-results button > i,.os-search-results button > i { display:grid; width:2rem; height:2rem; place-items:center; border-radius:.42rem; background:#e7f1fa; color:#176fc3; font-style:normal; }
.start-search-results button > span,.os-search-results button > span { display:grid; min-width:0; }
.start-search-results b,.os-search-results b { font-size:.67rem; }
.start-search-results small,.os-search-results small { color:#78838f; font-size:.57rem; }
.start-search-results > p,.os-search-results > p { margin:.75rem; color:#78838f; font-size:.65rem; text-align:center; }
.start-heading { display:flex; align-items:center; justify-content:space-between; margin: 0 2.45rem .65rem; }
.start-heading strong { font-size:.76rem; }
.start-heading button { padding:.3rem .55rem; border:1px solid rgba(50,62,76,.12); border-radius:.25rem; background:rgba(255,255,255,.6); font-size:.62rem; }
.start-heading small { color:#66717e; font-size:.6rem; }

.start-apps {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: .8rem .45rem;
    padding: 0 1.85rem 1.45rem;
}

.start-apps :is(button,.app-launch) { display:grid; justify-items:center; gap:.35rem; color:inherit; font-size:.61rem; text-decoration:none; }
.start-apps .app-icon { width:2.5rem; border-radius:.62rem; box-shadow:0 3px 9px rgba(0,0,0,.12); }
.start-apps :is(button,.app-launch):hover { border-radius:.4rem; background:rgba(255,255,255,.62); }
.start-recommended { margin-top:.15rem; }

.start-files {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:.35rem 1rem;
    padding:0 2rem 1.5rem;
}

.start-files button { display:flex; align-items:center; gap:.65rem; padding:.4rem; border-radius:.4rem; text-align:left; }
.start-files button:hover { background:rgba(255,255,255,.62); }
.start-files .app-icon { width:2.2rem; border-radius:.52rem; }
.start-files button > span:last-child { display:grid; }
.start-files b { font-size:.66rem; }
.start-files small { color:#65707d; font-size:.58rem; }

.windows-start-menu footer {
    display:flex;
    height:3.5rem;
    align-items:center;
    justify-content:space-between;
    padding:0 2.4rem;
    border-top:1px solid rgba(59,74,88,.1);
    background:rgba(225,235,244,.62);
}

.windows-start-menu footer > span { display:flex; align-items:center; gap:.55rem; }
.windows-start-menu footer .app-icon { width:1.8rem; border-radius:50%; }
.windows-start-menu footer b { font-size:.66rem; }
.windows-start-menu footer button { display:grid; width:2rem; height:2rem; place-items:center; border-radius:.35rem; }
.windows-start-menu footer button:hover { background:rgba(255,255,255,.65); }
.windows-start-menu footer svg { width:1.05rem; fill:none; stroke:#343b43; stroke-width:1.8; stroke-linecap:round; }

.windows-taskbar {
    position: absolute;
    z-index: 10;
    inset: auto 0 0;
    display: grid;
    height: 3.65rem;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 0 0.8rem;
    border-top: 1px solid rgba(255,255,255,.52);
    background: rgba(238, 247, 255, 0.82);
    box-shadow: 0 -8px 30px rgba(27,82,129,.16);
    backdrop-filter: blur(28px) saturate(145%);
}

.windows-weather {
    display: grid;
    width: max-content;
    grid-template-columns: 2rem auto;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 0.45rem;
    font-size: 0.72rem;
}

.windows-weather span {
    grid-row: 1 / 3;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    background: #ffc845;
    box-shadow: 0 0 0 4px rgba(255,200,69,.18);
    color: transparent;
}

.windows-weather b { font-weight: 500; }
.windows-weather small { color: #586372; font-size: 0.65rem; }

.windows-taskbar-center {
    display: flex;
    align-items: center;
    gap: 0.28rem;
}

.windows-taskbar-center > button {
    position: relative;
    display: grid;
    width: 2.8rem;
    height: 2.8rem;
    place-items: center;
    border-radius: 0.38rem;
    transition: background-color 150ms ease, transform 150ms ease;
}

.windows-taskbar-center > button:hover { background: rgba(255,255,255,.64); }
.windows-taskbar-center > button:active { transform: scale(.9); }
.windows-taskbar-center > button::after {
    content:"";
    position:absolute;
    right:42%;
    bottom:.12rem;
    left:42%;
    height:.18rem;
    border-radius:999px;
    background:#1f7bd5;
    opacity:0;
    transition:left 160ms ease,right 160ms ease,opacity 160ms ease;
}
.windows-taskbar-center > button.is-running::after { opacity:1; }
.windows-taskbar-center > button.is-active::after { right:31%; left:31%; }
.windows-taskbar-center > button.is-active { background:rgba(255,255,255,.62); }
.windows-taskbar-center .app-icon { width: 2.1rem; border: 0; border-radius: .52rem; box-shadow: 0 3px 8px rgba(0,0,0,.16); }

.win-start svg,
.win-search svg {
    width: 1.55rem;
    fill: #1675ce;
}

.win-search svg {
    fill: none;
    stroke: #20262e;
    stroke-width: 2;
    stroke-linecap: round;
}

.windows-tray {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 0.58rem;
    color: #242a31;
}

.windows-tray > svg { width: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tray-chevron { font-size: .75rem; }

.windows-clock {
    position:relative;
    display: grid;
    justify-items: end;
    min-width: 5rem;
    font-size: 0.68rem;
    font-variant-numeric: tabular-nums;
}

.windows-clock small { font-size: .64rem; }
.notification-dot { position:absolute; top:-.25rem; right:-.1rem; display:grid; min-width:1rem; height:1rem; place-items:center; border:2px solid rgba(238,247,255,.95); border-radius:999px; background:#1473cf; color:#fff; font-size:.48rem; font-weight:700; }
.notification-dot[hidden] { display:none; }

.windows-context-menu {
    position:fixed;
    z-index:72;
    width:15rem;
    margin:0;
    padding:.38rem;
    border:1px solid rgba(255,255,255,.72);
    border-radius:.55rem;
    background:rgba(243,247,251,.92);
    box-shadow:0 18px 54px rgba(27,64,102,.32),inset 0 1px rgba(255,255,255,.9);
    color:#24282e;
    list-style:none;
    backdrop-filter:blur(30px) saturate(150%);
    animation:context-in 120ms ease both;
}
.windows-context-menu[hidden] { display:none; }
.windows-context-menu button { display:grid; width:100%; grid-template-columns:1.4rem minmax(0,1fr) auto; align-items:center; padding:.48rem .55rem; border-radius:.3rem; color:inherit; text-align:left; font-size:.68rem; }
.windows-context-menu button:hover { background:rgba(42,123,203,.12); }
.windows-context-menu button span { color:#276eaf; font-size:.82rem; }
.windows-context-menu button i { color:#6b727b; font-style:normal; }
.windows-context-menu hr { height:1px; margin:.28rem .35rem; border:0; background:rgba(44,55,69,.12); }

.windows-welcome-toast {
    position:absolute;
    z-index:8;
    right:1rem;
    bottom:4.65rem;
    width:min(22rem,calc(100vw - 2rem));
    padding:.85rem;
    border:1px solid rgba(255,255,255,.68);
    border-radius:.7rem;
    background:rgba(241,247,252,.88);
    box-shadow:0 20px 55px rgba(22,70,114,.27),inset 0 1px rgba(255,255,255,.86);
    color:#222931;
    backdrop-filter:blur(28px) saturate(150%);
    animation:toast-in 480ms 320ms cubic-bezier(.22,1,.36,1) both;
}
.windows-welcome-toast[hidden] { display:none; }
.windows-welcome-toast header { display:grid; grid-template-columns:2.15rem minmax(0,1fr) auto; align-items:center; gap:.6rem; }
.windows-welcome-toast header > span { display:grid; width:2.15rem; height:2.15rem; place-items:center; border-radius:.45rem; background:#1976cf; color:#fff; font:700 .72rem/1 ui-monospace,monospace; box-shadow:0 5px 14px rgba(24,102,181,.25); }
.windows-welcome-toast header div { display:grid; }
.windows-welcome-toast header b { font-size:.72rem; }
.windows-welcome-toast header small { color:#687482; font-size:.58rem; }
.windows-welcome-toast header button { display:grid; width:1.8rem; height:1.8rem; place-items:center; border-radius:.3rem; font-size:1rem; }
.windows-welcome-toast header button:hover { background:rgba(39,72,103,.1); }
.windows-welcome-toast p { margin:.7rem 0 .75rem; color:#52606e; font-size:.66rem; line-height:1.5; }
.windows-welcome-toast > div { display:flex; gap:.45rem; }
.windows-welcome-toast > div button { padding:.48rem .72rem; border-radius:.34rem; background:#fff; box-shadow:inset 0 0 0 1px rgba(38,57,76,.14); font-size:.64rem; font-weight:600; }
.windows-welcome-toast > div button:first-child { background:#176fc3; box-shadow:none; color:#fff; }

/* macOS */
.platform-macos {
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", var(--os-font);
    background: #120c35;
}

.mac-wallpaper,
.mac-wallpaper::after {
    position: absolute;
    inset: 0;
}

.mac-wallpaper {
    overflow: hidden;
    background:
        radial-gradient(circle at 48% 62%, rgba(243,143,89,.9), transparent 24%),
        radial-gradient(circle at 28% 25%, rgba(67,73,194,.88), transparent 42%),
        linear-gradient(145deg, #111646 0%, #7b278e 58%, #f07455 100%);
}

.mac-wallpaper::after {
    content: "";
    background: radial-gradient(ellipse at 75% 30%, rgba(255,255,255,.17), transparent 36%), linear-gradient(115deg, transparent 30%, rgba(255,255,255,.08) 48%, transparent 62%);
    mix-blend-mode: screen;
}

.mac-wallpaper i {
    position: absolute;
    display: block;
    width: 70vw;
    height: 35vw;
    border-radius: 50%;
    filter: blur(3px);
}

.mac-wallpaper i:nth-child(1) { left: -15%; bottom: -15%; background: linear-gradient(20deg,#132c74,#6865d5 45%,rgba(255,255,255,.35)); rotate: 16deg; }
.mac-wallpaper i:nth-child(2) { right: -18%; bottom: -23%; background: linear-gradient(160deg,#fc9762,#b22b94 50%,#381566); rotate: -18deg; }
.mac-wallpaper i:nth-child(3) { left: 20%; top: 32%; background: radial-gradient(ellipse,rgba(255,255,255,.24),transparent 62%); }

.mac-menubar {
    position: relative;
    z-index: 10;
    display: flex;
    height: 1.8rem;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.8rem;
    background: rgba(31,22,63,.5);
    box-shadow: 0 1px rgba(255,255,255,.08);
    backdrop-filter: blur(24px) saturate(150%);
    font-size: 0.72rem;
}

.mac-menubar > div { display: flex; align-items: center; gap: .9rem; }
.mac-menubar svg { width: .95rem; fill: currentColor; }
.mac-menubar > div:last-child svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.apple-mark { width: .9rem !important; }
.mac-control-toggle { display:flex; align-items:center; gap:.55rem; }
.mac-time-toggle { min-width:2.5rem; font-variant-numeric:tabular-nums; }

.mac-desktop-icons {
    position: absolute;
    top: 3.2rem;
    right: 1.2rem;
    display: grid;
    gap: 1rem;
}

.mac-desktop-icons .app-icon { width: 3.2rem; }

.mac-dock {
    position: absolute;
    z-index: 12;
    left: 50%;
    bottom: 0.65rem;
    display: flex;
    align-items: flex-end;
    gap: 0.42rem;
    padding: 0.48rem 0.56rem 0.38rem;
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 1.2rem;
    background: rgba(223,219,235,.28);
    box-shadow: 0 18px 45px rgba(9,4,28,.35), inset 0 1px rgba(255,255,255,.22);
    transform: translateX(-50%);
    backdrop-filter: blur(28px) saturate(155%);
}

.mac-dock > i { align-self: stretch; width: 1px; margin: .12rem .1rem .3rem; background: rgba(255,255,255,.25); }

.mac-dock :is(button,.app-launch) {
    position: relative;
    color:inherit;
    text-decoration:none;
    transition: transform 190ms cubic-bezier(.22,1,.36,1);
}

.mac-dock :is(button,.app-launch):hover { transform: translateY(-.55rem) scale(1.13); }
.mac-dock .app-icon { width: clamp(2.9rem,4.5vw,4rem); border-radius: clamp(.82rem,1.2vw,1.1rem); }
.mac-dock :is(button,.app-launch) > span:last-child:not(.app-icon) {
    position: absolute;
    left: 50%;
    bottom: calc(100% + .6rem);
    padding: .35rem .5rem;
    border-radius: .42rem;
    background: rgba(28,26,35,.74);
    font-size: .62rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%);
}
.mac-dock :is(button,.app-launch):hover > span:last-child:not(.app-icon) { opacity: 1; }

/* Functional macOS windows */
.mac-window {
    position: absolute;
    z-index: 20;
    top: 50%;
    left: 50%;
    display: grid;
    grid-template-rows: auto minmax(0,1fr);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.38);
    border-radius: .75rem;
    background: rgba(242,242,247,.94);
    box-shadow: 0 28px 90px rgba(10,5,35,.5), inset 0 1px rgba(255,255,255,.9);
    color: #1d1d1f;
    transform: translate(-50%,-50%);
    backdrop-filter: blur(38px) saturate(165%);
    animation: mac-window-in 220ms cubic-bezier(.22,1,.36,1) both;
}

.mac-window[hidden] { display: none; }
.mac-finder-window { width: min(52rem,calc(100vw - 5rem)); height: min(33rem,calc(100dvh - 8rem)); }
.mac-terminal-window { width: min(45rem,calc(100vw - 5rem)); height: min(27rem,calc(100dvh - 8rem)); background: rgba(22,22,24,.94); color: #f5f5f7; }
.mac-settings-window { width: min(49rem,calc(100vw - 5rem)); height: min(34rem,calc(100dvh - 8rem)); }

.mac-window-bar {
    position: relative;
    display: flex;
    height: 2.75rem;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid rgba(60,60,67,.18);
    background: rgba(225,225,230,.72);
    font-size: .78rem;
    cursor:move;
    user-select:none;
}

.terminal-bar { border-color: rgba(255,255,255,.08); background: rgba(46,46,48,.78); }
.mac-traffic { position: absolute; left: .9rem; display: flex; gap: .5rem; }
.mac-traffic button { display:block; width:.78rem; height:.78rem; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(0,0,0,.1); cursor:pointer; }
.mac-traffic button:nth-child(1) { background:#ff5f57; }
.mac-traffic button:nth-child(2) { background:#febc2e; }
.mac-traffic button:nth-child(3) { background:#28c840; }
.finder-actions { position:absolute; left:6.5rem; display:flex; gap:.35rem; }
.finder-actions button { width:1.8rem; height:1.6rem; border-radius:.35rem; background:rgba(120,120,128,.12); font-size:1.2rem; }

.finder-layout { display:grid; min-height:0; grid-template-columns:12rem 1fr; }
.finder-layout > aside { display:grid; align-content:start; gap:.22rem; padding:1rem .75rem; background:rgba(220,220,225,.58); }
.finder-layout > aside small { margin:.55rem .55rem .18rem; color:#73737a; font-size:.66rem; font-weight:650; }
.finder-layout > aside button { padding:.44rem .58rem; border-radius:.38rem; color:#3a3a3c; text-align:left; font-size:.76rem; }
.finder-layout > aside button.is-selected { background:rgba(120,120,128,.2); }
.finder-layout > main { padding:1.35rem 1.5rem; overflow:auto; }
.finder-title { display:flex; align-items:end; justify-content:space-between; margin-bottom:1.5rem; }
.finder-title h2 { margin:0; font-size:1.6rem; letter-spacing:-.04em; }
.finder-title span { color:#777; font-size:.7rem; }
.finder-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.1rem; }
.finder-grid button { display:grid; justify-items:center; gap:.3rem; padding:.7rem .35rem; border-radius:.65rem; }
.finder-grid button:hover { background:rgba(0,122,255,.08); }
.finder-grid b { font-size:.72rem; }
.finder-grid small { color:#777; font-size:.6rem; }
.finder-folder { position:relative; width:4.6rem; height:3.45rem; border-radius:.45rem; background:linear-gradient(180deg,#6fc9ff,#1687ef); box-shadow:inset 0 1px rgba(255,255,255,.7),0 7px 12px rgba(0,92,175,.16); }
.finder-folder::before { content:""; position:absolute; top:-.45rem; left:.35rem; width:2rem; height:.8rem; border-radius:.35rem .35rem 0 0; background:#5bbcf8; }

.terminal-screen { padding:1rem 1.15rem; overflow:auto; background:radial-gradient(circle at 70% 20%,rgba(255,255,255,.035),transparent 38%),#171719; color:#f4f4f4; font: .78rem/1.65 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; user-select:text; }
.terminal-screen p { margin:0; }
.terminal-screen b,.terminal-screen label > span { color:#72e59d; font-weight:600; }
.terminal-screen label { display:flex; gap:.6rem; }
.terminal-screen input { min-width:0; flex:1; border:0; outline:0; background:transparent; color:#fff; font:inherit; caret-color:#72e59d; }
.terminal-line-error { color:#ff7b72; }

.settings-layout { display:grid; min-height:0; grid-template-columns:15rem 1fr; }
.settings-layout > aside { display:grid; align-content:start; gap:.35rem; padding:1rem .8rem; background:rgba(225,225,230,.65); }
.settings-layout > aside > button { padding:.55rem .65rem; border-radius:.45rem; text-align:left; font-size:.74rem; }
.settings-layout > aside > button.is-selected { background:#0a84ff; color:#fff; }
.settings-user { display:flex; align-items:center; gap:.65rem; margin-bottom:1rem; padding:.5rem; }
.settings-user .app-icon { width:2.6rem; }
.settings-user span { display:grid; }
.settings-user b { font-size:.76rem; }
.settings-user small { color:#777; font-size:.62rem; }
.settings-layout > main { padding:1.4rem 1.6rem; overflow:auto; }
.settings-layout h2 { margin:0; font-size:1.5rem; }
.settings-layout p { max-width:34rem; color:#6b6b70; font-size:.72rem; line-height:1.5; }
.settings-layout h3 { margin:1.5rem 0 .65rem; font-size:.76rem; }
.settings-systems { display:grid; grid-template-columns:repeat(4,1fr); gap:.5rem; }
.settings-systems button { min-height:3.2rem; padding:.4rem; border:1px solid rgba(60,60,67,.18); border-radius:.65rem; background:#fff; font-size:.65rem; box-shadow:0 3px 10px rgba(0,0,0,.05); }
.settings-systems button:hover { border-color:#0a84ff; }
.wallpaper-options { display:grid; grid-template-columns:repeat(3,1fr); gap:.65rem; }
.wallpaper-options button { height:5.5rem; border-radius:.75rem; box-shadow:inset 0 0 0 1px rgba(255,255,255,.35),0 4px 12px rgba(0,0,0,.1); }
.wallpaper-options button:nth-child(1) { background:linear-gradient(145deg,#15194c,#762a89 58%,#ee7b5d); }
.wallpaper-options button:nth-child(2) { background:linear-gradient(145deg,#0a335e,#3d8bc5 55%,#9bd9e3); }
.wallpaper-options button:nth-child(3) { background:linear-gradient(145deg,#111318,#40444d 60%,#90949c); }

.os-root[data-wallpaper="ocean"] .mac-wallpaper { background:radial-gradient(circle at 65% 34%,#9de2ef,transparent 27%),linear-gradient(145deg,#071d42,#176c9c 58%,#6ebdce); }
.os-root[data-wallpaper="graphite"] .mac-wallpaper { background:radial-gradient(circle at 35% 42%,#6c7079,transparent 30%),linear-gradient(145deg,#090b10,#292d36 58%,#666a72); }

/* iOS and Android */
.platform-mobile {
    left: 50%;
    width: min(27rem, 100%);
    height: 100dvh;
    transform: translateX(-50%);
    box-shadow: 0 0 0 100vmax #090a0e, 0 0 0 1px rgba(255,255,255,.18), 0 30px 90px rgba(0,0,0,.55);
}

.ios-wallpaper,
.android-wallpaper {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.ios-wallpaper {
    background: linear-gradient(155deg, #13224a 0%, #692c73 48%, #f38f67 100%);
}

.ios-wallpaper::after,
.android-wallpaper::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(3,8,26,.14), rgba(6,4,20,.05) 60%, rgba(0,0,0,.16));
}

.ios-wallpaper i {
    position: absolute;
    display: block;
    border-radius: 50%;
    filter: blur(1px);
}

.ios-wallpaper i:first-child { width: 35rem; height: 20rem; top: 7%; left: -75%; background: linear-gradient(145deg,#45a8eb,#4034a8 50%,#d9568f); rotate: -20deg; }
.ios-wallpaper i:last-child { width: 34rem; height: 25rem; right: -75%; bottom: 2%; background: linear-gradient(145deg,#ffd89a,#eb6f7d 45%,#7e2a92); rotate: 27deg; }

.mobile-status {
    position: relative;
    z-index: 5;
    display: flex;
    height: 3.2rem;
    align-items: center;
    justify-content: space-between;
    padding: .25rem 1.15rem 0;
    font-size: .73rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.dynamic-island {
    position: absolute;
    top: .68rem;
    left: 50%;
    width: 7.2rem;
    height: 1.75rem;
    border-radius: 999px;
    background: #050506;
    transform: translateX(-50%);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
}

.mobile-signals {
    display: flex;
    align-items: flex-end;
    gap: 2px;
}

.mobile-signals i { display: block; width: 2px; background: currentColor; border-radius: 2px; }
.mobile-signals i:nth-child(1) { height: 4px; }
.mobile-signals i:nth-child(2) { height: 6px; }
.mobile-signals i:nth-child(3) { height: 8px; }
.mobile-signals b { width: 1.2rem; height: .55rem; margin-left: .25rem; border: 1px solid currentColor; border-radius: 2px; }
.mobile-signals b::after { content:""; display:block; width: 72%; height:100%; background:currentColor; }

.ios-widget-row { position:relative; z-index:3; display:grid; grid-template-columns:1fr 1fr; gap:.75rem; padding:1rem 1.25rem 0; }
.ios-widget-row article { display:grid; min-height:8.25rem; align-content:space-between; padding:.9rem; border:1px solid rgba(255,255,255,.16); border-radius:1.35rem; box-shadow:0 12px 28px rgba(14,5,32,.18),inset 0 1px rgba(255,255,255,.18); backdrop-filter:blur(24px) saturate(145%); }
.ios-weather-widget { background:linear-gradient(155deg,rgba(49,148,238,.92),rgba(29,92,190,.78)); }
.ios-calendar-widget { background:rgba(246,246,248,.88); color:#19191d; }
.ios-widget-row span { font-size:.7rem; font-weight:650; text-transform:capitalize; }
.ios-widget-row strong { font-size:2.35rem; font-weight:400; letter-spacing:-.06em; }
.ios-widget-row small { max-width:9rem; font-size:.62rem; line-height:1.3; opacity:.78; }

.mobile-app-grid {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 1.25rem 1.1rem 0;
    row-gap: 1.35rem;
}

.mobile-app-grid :is(button,.app-launch) {
    display: grid;
    justify-items: center;
    gap: .35rem;
    color: #fff;
    font-size: .62rem;
    text-shadow: 0 1px 4px rgba(0,0,0,.5);
    text-decoration:none;
}

.mobile-app-grid .app-icon { width: 3.65rem; border-radius: 1rem; }
.mobile-app-grid :is(button,.app-launch):active .app-icon { transform: scale(.9); filter: brightness(.82); }

.ios-dock {
    position: absolute;
    z-index: 4;
    right: .75rem;
    bottom: 1rem;
    left: .75rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    place-items: center;
    min-height: 5.4rem;
    padding: .55rem .3rem;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 1.8rem;
    background: rgba(234,229,241,.28);
    box-shadow: inset 0 1px rgba(255,255,255,.22), 0 14px 34px rgba(0,0,0,.16);
    backdrop-filter: blur(26px) saturate(160%);
}

.ios-dock .app-icon { width: 3.65rem; border-radius: 1.05rem; }
.ios-dock button:active .app-icon { transform: scale(.9); }

.ios-home-indicator,
.android-gesture {
    position: absolute;
    z-index: 6;
    bottom: .3rem;
    left: 50%;
    width: 8rem;
    height: .28rem;
    border-radius: 99px;
    background: rgba(255,255,255,.88);
    transform: translateX(-50%);
}

.android-wallpaper {
    background: linear-gradient(160deg, #143436, #715849 52%, #d09a75);
}

.android-wallpaper i { position:absolute; display:block; border-radius:46% 54% 65% 35%; filter:blur(1px); }
.android-wallpaper i:nth-child(1) { width:26rem; height:26rem; top:-10%; right:-60%; background:linear-gradient(145deg,#b7d7c6,#507d79); rotate:24deg; }
.android-wallpaper i:nth-child(2) { width:25rem; height:30rem; left:-63%; top:28%; background:linear-gradient(145deg,#edc38e,#9b6b57); rotate:-19deg; }
.android-wallpaper i:nth-child(3) { width:22rem; height:18rem; right:-38%; bottom:4%; background:linear-gradient(145deg,#8db3a4,#355c59); rotate:15deg; }

.android-status { height: 2.5rem; padding-top: .15rem; }

.android-at-glance {
    position: relative;
    z-index: 2;
    display: grid;
    gap: .2rem;
    margin: 1.15rem 1.25rem 0;
    text-shadow: 0 1px 6px rgba(0,0,0,.25);
}

.android-at-glance strong { font-size: 1.35rem; font-weight: 500; text-transform: capitalize; }
.android-at-glance span { font-size: .78rem; }

.android-search {
    position: absolute;
    z-index: 3;
    display: grid;
    width: calc(100% - 2rem);
    height: 3.3rem;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: .7rem;
    right:1rem;
    bottom:1.35rem;
    left:1rem;
    margin:0;
    padding: 0 1rem !important;
    border-radius: 999px !important;
    background: rgba(240,245,240,.9) !important;
    color: #34373c !important;
    text-align: left;
    box-shadow: 0 5px 18px rgba(0,0,0,.16);
}

.android-search > span { color: #4285f4; font-size: 1.2rem; font-weight: 800; }
.android-search b { color: #696d72; font-size: .8rem; font-weight: 500; }
.android-search svg { width: 1.2rem; fill:none; stroke:#4d5156; stroke-width:1.8; stroke-linecap:round; }
.android-grid { grid-template-columns:repeat(4,1fr); padding-top:3.4rem; }
.android-grid .app-icon { border-radius: 50%; }
.android-gesture { width: 6rem; height: .2rem; background: rgba(255,255,255,.8); }

/* Working apps */
.universal-app-window {
    position:fixed;
    z-index:55;
    top:50%;
    left:50%;
    display:grid;
    width:min(72rem,calc(100vw - 5rem));
    height:min(46rem,calc(100dvh - 6rem));
    grid-template-rows:auto auto auto minmax(0,1fr);
    overflow:hidden;
    border:1px solid rgba(255,255,255,.42);
    border-radius:.85rem;
    background:#f4f5f7;
    box-shadow:0 30px 100px rgba(0,0,0,.48),inset 0 1px rgba(255,255,255,.8);
    color:#1a1c20;
    transform:translate(-50%,-50%);
    animation:mac-window-in 220ms cubic-bezier(.22,1,.36,1) both;
}
.universal-app-window button {
    margin:0;
    padding:0;
    border:0;
    background:none;
    color:inherit;
    font:inherit;
    -webkit-tap-highlight-color:transparent;
}
.universal-app-window button:focus-visible { outline:2px solid #1473e6; outline-offset:-2px; }
.mac-window,
.universal-app-window { touch-action:none; }
.mac-window.is-dragging,
.universal-app-window.is-dragging { transition:none; animation:none; box-shadow:0 38px 110px rgba(0,0,0,.58),0 0 0 1px rgba(255,255,255,.48); }
.mac-window.is-minimizing,
.universal-app-window.is-minimizing { opacity:0; transform:translate(-50%,35vh) scale(.22); transition:opacity 180ms ease,transform 180ms ease; }
.mac-window.is-maximized,
.universal-app-window.is-maximized { position:fixed !important; inset:0 !important; width:100vw !important; height:100dvh !important; max-width:none !important; max-height:none !important; border-radius:0 !important; transform:none !important; animation:none !important; }
.universal-app-window[hidden] { display:none !important; }
.universal-titlebar { position:relative; display:flex; min-height:2.5rem; align-items:center; justify-content:center; border-bottom:1px solid rgba(0,0,0,.1); background:rgba(232,233,237,.94); font-size:.74rem; cursor:move; user-select:none; }
.universal-traffic { position:absolute; left:.85rem; display:flex; gap:.45rem; }
.universal-traffic button { width:.74rem; height:.74rem; border-radius:50%; }
.universal-traffic button:nth-child(1) { background:#ff5f57; }
.universal-traffic button:nth-child(2) { background:#febc2e; }
.universal-traffic button:nth-child(3) { background:#28c840; }
.universal-actions { position:absolute; top:0; right:0; display:flex; height:100%; }
.universal-actions button { display:grid; width:2.85rem; height:100%; place-items:center; border-radius:0; color:#303238; font:500 .9rem/1 "Segoe UI",sans-serif; }
.universal-actions button:hover { background:rgba(30,32,36,.1); }
.universal-actions button:last-child:hover { background:#c42b1c; color:#fff; }
.os-root[data-os="macos"] .universal-actions { display:none; }
.os-root[data-os="windows"] .universal-traffic,
.os-root[data-os="ios"] .universal-traffic,
.os-root[data-os="android"] .universal-traffic { display:none; }

.browser-tabs { display:flex; min-width:0; overflow-x:auto; padding:.42rem .6rem 0; gap:.3rem; background:#e8e9ed; }
.browser-tabs button { min-width:10rem; padding:.48rem .7rem; border-radius:.55rem .55rem 0 0; background:rgba(255,255,255,.45); color:#555; text-align:left; font-size:.68rem; white-space:nowrap; }
.browser-tabs button.is-active { background:#fff; color:#151515; }
.browser-address { display:grid; grid-template-columns:auto auto minmax(0,1fr); align-items:center; gap:.7rem; padding:.5rem .8rem; border-bottom:1px solid #ddd; background:#fff; color:#64666b; }
.browser-address > span { font-size:1.25rem; }
.browser-address > div { display:flex; align-items:center; gap:.45rem; min-width:0; padding:.45rem .75rem; border-radius:999px; background:#f0f1f3; }
.browser-address b { overflow:hidden; font-size:.64rem; font-weight:500; text-overflow:ellipsis; white-space:nowrap; }
.browser-frame-host,.browser-frame-host iframe { width:100%; height:100%; border:0; background:#fff; }
.browser-frame-host { position:relative; min-height:0; overflow:hidden; }
.browser-frame-host iframe { position:relative; z-index:1; display:block; }
.browser-loading { position:absolute; z-index:3; inset:0; display:grid; place-content:center; justify-items:center; gap:.42rem; background:linear-gradient(145deg,#f7f9fb,#e9eff5); color:#24313f; }
.browser-loading[hidden] { display:none; }
.browser-loading > span { width:3.4rem; height:3.4rem; border:.3rem solid rgba(23,111,195,.16); border-top-color:#176fc3; border-radius:50%; animation:browser-spinner 800ms linear infinite; }
.browser-loading b { margin-top:.55rem; font-size:.75rem; }
.browser-loading small { color:#788492; font-size:.6rem; }
.browser-progress { position:absolute; z-index:8; top:4.66rem; left:0; width:0; height:2px; background:#ee3840; opacity:0; pointer-events:none; }
.browser-progress.is-loading { opacity:1; animation:browser-progress 1600ms cubic-bezier(.1,.65,.35,1) infinite; }
.mobile-browser-start,
.mobile-browser-sitebar,
.mobile-browser-site-bottom { display:none; }

/* Native mobile Yandex Browser */
.os-root:is([data-os="ios"],[data-os="android"]) .browser-app-window {
    top:0;
    left:50%;
    width:min(27rem,100%);
    height:100dvh;
    border:0;
    border-radius:0;
    background:#071020;
    transform:translateX(-50%);
    animation:platform-in 180ms ease both;
}
.os-root:is([data-os="ios"],[data-os="android"]) .browser-app-window:is(.is-mobile-start,.is-mobile-site) > .universal-titlebar,
.os-root:is([data-os="ios"],[data-os="android"]) .browser-app-window:is(.is-mobile-start,.is-mobile-site) > .browser-tabs,
.os-root:is([data-os="ios"],[data-os="android"]) .browser-app-window:is(.is-mobile-start,.is-mobile-site) > .browser-address { display:none; }
.os-root:is([data-os="ios"],[data-os="android"]) .browser-app-window.is-mobile-start {
    display:block;
}
.os-root:is([data-os="ios"],[data-os="android"]) .browser-app-window.is-mobile-start .mobile-browser-start {
    position:absolute;
    inset:0;
    display:grid;
    min-height:0;
    grid-template-rows:3rem minmax(0,1fr) 4.7rem;
    overflow:hidden;
    background:
        radial-gradient(circle at 72% 22%,rgba(105,79,194,.5),transparent 24%),
        radial-gradient(circle at 32% 64%,rgba(39,107,174,.32),transparent 34%),
        radial-gradient(circle at 62% 84%,rgba(201,105,148,.28),transparent 26%),
        radial-gradient(circle at 8% 18%,#fff 0 1px,transparent 1.5px) 0 0/31px 37px,
        radial-gradient(circle at 82% 42%,rgba(255,255,255,.9) 0 1px,transparent 1.5px) 0 0/47px 43px,
        radial-gradient(circle at 42% 76%,rgba(174,211,255,.9) 0 1px,transparent 1.5px) 0 0/59px 53px,
        linear-gradient(165deg,#071427 0%,#111e43 42%,#302555 68%,#111629 100%);
    color:#fff;
}
.mobile-browser-start::before {
    content:"";
    position:absolute;
    right:-12%;
    bottom:3.8rem;
    left:-12%;
    height:15rem;
    pointer-events:none;
    background:
        linear-gradient(153deg,transparent 0 54%,rgba(1,7,14,.96) 55% 100%),
        linear-gradient(27deg,transparent 0 61%,rgba(2,8,17,.88) 62% 100%);
    opacity:.72;
    clip-path:polygon(0 56%,8% 46%,15% 63%,23% 35%,31% 60%,40% 43%,51% 67%,60% 38%,69% 61%,78% 31%,86% 57%,94% 39%,100% 51%,100% 100%,0 100%);
}
.mobile-browser-status {
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:.45rem 1.15rem 0;
    font:700 .72rem/1 "Segoe UI Variable","Segoe UI",sans-serif;
    font-variant-numeric:tabular-nums;
}
.mobile-browser-status > span { display:flex; align-items:flex-end; gap:2px; }
.mobile-browser-status i { display:block; width:2px; border-radius:2px; background:#fff; }
.mobile-browser-status i:nth-child(1) { height:4px; }
.mobile-browser-status i:nth-child(2) { height:6px; }
.mobile-browser-status i:nth-child(3) { height:8px; }
.mobile-browser-status b { position:relative; width:1.2rem; height:.58rem; margin-left:.25rem; border:1px solid #fff; border-radius:2px; }
.mobile-browser-status b::after { content:""; position:absolute; inset:1px 25% 1px 1px; background:#fff; }
.mobile-browser-home {
    position:relative;
    z-index:2;
    min-height:0;
    padding:2.6rem 1.05rem 1rem;
    overflow:auto;
    scrollbar-width:none;
}
.mobile-browser-home::-webkit-scrollbar { display:none; }
.mobile-browser-logo {
    display:grid;
    width:4.15rem;
    height:4.15rem;
    margin:0 auto 2rem;
    place-items:center;
    border-radius:50%;
    background:rgba(255,255,255,.96);
    box-shadow:0 12px 28px rgba(0,0,0,.24),inset 0 0 0 1px rgba(255,255,255,.7);
    color:#202858;
    font:800 2.25rem/1 "Segoe UI",sans-serif;
}
.mobile-browser-search {
    display:grid !important;
    width:100%;
    min-height:3.55rem;
    grid-template-columns:minmax(0,1fr) auto auto;
    align-items:center;
    gap:.7rem;
    padding:0 1rem !important;
    border-radius:1.8rem !important;
    background:#fff !important;
    box-shadow:0 11px 30px rgba(0,0,0,.22);
    color:#7b808a !important;
    text-align:left;
}
.mobile-browser-search span { overflow:hidden; font-size:.8rem; text-overflow:ellipsis; white-space:nowrap; }
.mobile-browser-search i { color:#262b34; font-size:1.1rem; font-style:normal; }
.mobile-browser-search b { color:#242a34; font-size:1rem; font-weight:500; }
.mobile-browser-projects { margin-top:2.45rem; }
.mobile-browser-projects h2 { margin:0 0 .85rem .2rem; color:#fff; font:600 .9rem/1.2 "Segoe UI Variable","Segoe UI",sans-serif; letter-spacing:-.01em; text-shadow:0 2px 8px rgba(0,0,0,.5); }
.mobile-browser-project-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.68rem; }
.mobile-browser-project-grid button {
    display:grid;
    min-width:0;
    min-height:8.65rem;
    align-content:center;
    justify-items:center;
    gap:.65rem;
    padding:.85rem .55rem !important;
    border-radius:1.05rem !important;
    background:rgba(255,255,255,.95) !important;
    box-shadow:0 10px 28px rgba(0,0,0,.2),inset 0 1px rgba(255,255,255,.8);
    color:#22252b !important;
    text-align:center;
    transition:transform 150ms ease,filter 150ms ease;
}
.mobile-browser-project-grid button:active { transform:scale(.97); filter:brightness(.92); }
.project-favicon { display:grid; width:3rem; height:3rem; place-items:center; border-radius:50%; color:#fff; font:800 .78rem/1 "Segoe UI",sans-serif; font-style:normal; }
.project-favicon-rozerin { background:linear-gradient(145deg,#d96b36,#a83b1e); font-family:Georgia,serif; font-size:1.25rem; }
.project-favicon-levelup { background:#171717; color:#ff821d; font-size:.82rem; }
.project-favicon-leopoker { background:#151519; color:#f23847; font-size:.72rem; }
.project-favicon-union { background:linear-gradient(145deg,#2b6658,#123d36); font-size:1.5rem; }
.project-favicon-service { background:linear-gradient(145deg,#277cc9,#123f70); font-size:.74rem; }
.mobile-browser-project-grid span { display:grid; min-width:0; gap:.2rem; }
.mobile-browser-project-grid b { overflow:hidden; font-size:.72rem; text-overflow:ellipsis; white-space:nowrap; }
.mobile-browser-project-grid small { color:#858993; font-size:.61rem; line-height:1.2; }
.mobile-browser-bottom,
.mobile-browser-site-bottom {
    position:relative;
    z-index:3;
    display:grid;
    grid-template-columns:repeat(5,1fr);
    place-items:center;
    padding:.25rem .55rem .65rem;
    background:rgba(13,17,25,.92);
    box-shadow:0 -1px rgba(255,255,255,.1);
    backdrop-filter:blur(24px) saturate(130%);
}
.mobile-browser-site-bottom { display:none; }
.mobile-browser-bottom button,
.mobile-browser-site-bottom button { display:grid; width:2.5rem; height:2.5rem; place-items:center; color:#fff; font-size:1.5rem; opacity:.9; }
.mobile-browser-bottom button:nth-child(2),
.mobile-browser-site-bottom button:nth-child(2) { opacity:.42; }
.mobile-browser-bottom button span,
.mobile-browser-site-bottom button span { display:grid; width:1.45rem; height:1.45rem; place-items:center; border:2px solid currentColor; border-radius:.38rem; font-size:.68rem; font-weight:700; }
.os-root:is([data-os="ios"],[data-os="android"]) .browser-app-window.is-mobile-start .browser-frame-host,
.os-root:is([data-os="ios"],[data-os="android"]) .browser-app-window.is-mobile-start .mobile-browser-sitebar,
.os-root:is([data-os="ios"],[data-os="android"]) .browser-app-window.is-mobile-start .mobile-browser-site-bottom { display:none; }
.os-root:is([data-os="ios"],[data-os="android"]) .browser-app-window.is-mobile-site {
    grid-template-rows:3.35rem minmax(0,1fr) 4.25rem;
    background:#fff;
}
.os-root:is([data-os="ios"],[data-os="android"]) .browser-app-window.is-mobile-site .mobile-browser-start { display:none; }
.os-root:is([data-os="ios"],[data-os="android"]) .browser-app-window.is-mobile-site .mobile-browser-sitebar {
    display:grid;
    grid-template-columns:2.45rem minmax(0,1fr) 2.45rem;
    align-items:center;
    gap:.35rem;
    padding:.42rem .55rem;
    background:#f5f6f8;
    color:#252a31;
    box-shadow:0 1px #dfe2e7;
}
.mobile-browser-sitebar > button { display:grid; width:2.25rem; height:2.25rem; place-items:center; border-radius:50% !important; font-size:1.25rem !important; }
.mobile-browser-sitebar > button:active { background:#e4e7eb; }
.mobile-browser-sitebar > div { display:flex; min-width:0; align-items:center; gap:.4rem; padding:.55rem .72rem; border-radius:999px; background:#e8ebef; }
.mobile-browser-sitebar i { color:#69707a; font-style:normal; }
.mobile-browser-sitebar b { overflow:hidden; color:#4c535c; font-size:.62rem; font-weight:500; text-overflow:ellipsis; white-space:nowrap; }
.os-root:is([data-os="ios"],[data-os="android"]) .browser-app-window.is-mobile-site .browser-frame-host { display:block; min-height:0; }
.os-root:is([data-os="ios"],[data-os="android"]) .browser-app-window.is-mobile-site .mobile-browser-site-bottom { display:grid; }

@media (min-width:601px) {
    .os-root:is([data-os="ios"],[data-os="android"]) .browser-app-window {
        top:50%;
        width:min(26.1rem,calc(100vw - 2rem));
        height:min(51.1rem,calc(100dvh - 2.9rem));
        border-radius:2.55rem;
        transform:translate(-50%,-50%);
        box-shadow:0 30px 90px rgba(0,0,0,.52),inset 0 0 0 1px rgba(255,255,255,.12);
    }
}

/* Windows 11 / Yandex Browser chrome */
.os-root[data-os="windows"] .browser-app-window {
    grid-template-rows:2.28rem 2.42rem minmax(0,1fr);
    border-color:#17181e;
    border-radius:.32rem;
    background:#30313a;
    box-shadow:0 30px 90px rgba(0,0,0,.56),0 0 0 1px rgba(255,255,255,.08);
}
.os-root[data-os="windows"] .browser-app-window .universal-titlebar {
    position:absolute;
    z-index:4;
    top:0;
    right:0;
    width:9.6rem;
    min-height:2.28rem;
    border:0;
    background:transparent;
    color:#e6e7ea;
    font-family:"Segoe UI Variable","Segoe UI",sans-serif;
}
.os-root[data-os="windows"] .browser-app-window .universal-titlebar > strong { display:none; }
.os-root[data-os="windows"] .browser-app-window .universal-actions { width:100%; }
.os-root[data-os="windows"] .browser-app-window .universal-actions button {
    width:3.2rem;
    font-size:.82rem;
    color:#e7e8ec;
    transition:background-color 120ms ease,color 120ms ease;
}
.os-root[data-os="windows"] .browser-tabs {
    min-height:2.28rem;
    align-items:center;
    gap:.12rem;
    padding:0 9.75rem 0 .3rem;
    border:0;
    background:#23242b;
    scrollbar-width:none;
}
.os-root[data-os="windows"] .browser-tabs::-webkit-scrollbar { display:none; }
.os-root[data-os="windows"] .browser-tab-counter {
    display:grid;
    width:1.65rem;
    height:1.65rem;
    flex:0 0 auto;
    place-items:center;
    border-radius:.35rem;
    background:#6c6e78;
    color:#fff;
    font:700 .66rem/1 "Segoe UI Variable","Segoe UI",sans-serif;
}
.os-root[data-os="windows"] .browser-tabs .browser-tab-menu {
    width:1.7rem;
    min-width:1.7rem;
    height:1.8rem;
    flex:0 0 auto;
    justify-content:center;
    padding:0;
    border-radius:.3rem;
    background:#31323a;
    color:#b8bac1;
    font-size:.8rem;
}
.os-root[data-os="windows"] .browser-tabs button[data-browser-url] {
    position:relative;
    display:flex;
    min-width:6.5rem;
    max-width:10rem;
    height:1.92rem;
    flex:1 1 8rem;
    align-items:center;
    gap:.42rem;
    margin-top:.36rem;
    padding:0 .58rem;
    overflow:hidden;
    border:0;
    border-radius:.34rem .34rem 0 0;
    background:#292a32;
    color:#c7c8cd;
    font-family:"Segoe UI Variable","Segoe UI",sans-serif;
    font-size:.64rem;
    text-overflow:ellipsis;
    white-space:nowrap;
    transition:background-color 130ms ease,color 130ms ease;
}
.os-root[data-os="windows"] .browser-tabs button[data-browser-url]::before {
    content:"";
    width:.62rem;
    height:.62rem;
    flex:0 0 auto;
    border-radius:50%;
    background:linear-gradient(145deg,#ff4d61,#c626d3 54%,#5b43e6);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.55);
}
.os-root[data-os="windows"] .browser-tabs button[data-browser-url="/lvlup/"]::before { background:linear-gradient(145deg,#ff6a3d,#f2b42d); }
.os-root[data-os="windows"] .browser-tabs button[data-browser-url="/demo/leopoker/"]::before { background:linear-gradient(145deg,#44a9ff,#455fe8); }
.os-root[data-os="windows"] .browser-tabs button[data-browser-url="/demo/unionsochi/"]::before { background:linear-gradient(145deg,#32c497,#168f74); }
.os-root[data-os="windows"] .browser-tabs button[data-browser-url]:hover { background:#34353e; color:#f1f1f3; }
.os-root[data-os="windows"] .browser-tabs button[data-browser-url].is-active {
    z-index:1;
    background:#3a3b45;
    color:#fff;
}
.os-root[data-os="windows"] .browser-tabs .browser-new-tab {
    display:grid;
    width:1.75rem;
    min-width:1.75rem;
    height:1.75rem;
    flex:0 0 auto;
    place-items:center;
    padding:0;
    border-radius:50%;
    background:#34353d;
    color:#cfd0d4;
    font-size:1rem;
}
.os-root[data-os="windows"] .browser-address {
    position:relative;
    min-height:2.42rem;
    grid-template-columns:2rem 2rem 2rem minmax(15rem,34rem) minmax(0,1fr) 2.2rem;
    gap:.08rem;
    padding:.22rem .42rem;
    border:0;
    background:#3a3b45;
    color:#e8e9ec;
}
.os-root[data-os="windows"] .browser-address::before {
    content:"Портфолио Самохина — интерактивный рабочий стол";
    grid-column:5;
    align-self:center;
    justify-self:center;
    overflow:hidden;
    color:#f1f1f3;
    font:500 .68rem/1 "Segoe UI Variable","Segoe UI",sans-serif;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.os-root[data-os="windows"] .browser-address > button {
    display:grid;
    width:2rem;
    height:1.95rem;
    place-items:center;
    border-radius:.28rem;
    color:#e5e6e9;
    font-size:1rem;
}
.os-root[data-os="windows"] .browser-address > button:hover { background:#494a55; }
.os-root[data-os="windows"] .browser-address .browser-yandex-button { font-weight:700; }
.os-root[data-os="windows"] .browser-address > div {
    min-height:1.95rem;
    padding:.3rem .65rem;
    border:1px solid rgba(255,255,255,.06);
    border-radius:.34rem;
    background:#30313a;
}
.os-root[data-os="windows"] .browser-address > div:focus-within { border-color:#737581; background:#2d2e36; }
.os-root[data-os="windows"] .browser-address i { color:#b6b8bf; }
.os-root[data-os="windows"] .browser-address b { color:#f0f0f2; font-family:"Segoe UI Variable","Segoe UI",sans-serif; font-size:.66rem; }
.os-root[data-os="windows"] .browser-address .browser-address-menu { grid-column:6; }
.os-root[data-os="windows"] .browser-frame-host { grid-row:3; min-height:0; }

.telegram-app-window { grid-template-rows:auto minmax(0,1fr); }
.telegram-layout { display:grid; min-height:0; grid-template-columns:19rem minmax(0,1fr); background:#fff; }
.telegram-layout > aside { padding:.7rem; border-right:1px solid #d9dde3; background:#eef1f4; overflow:auto; }
.telegram-search { margin-bottom:.6rem; padding:.5rem .7rem; border-radius:.55rem; background:#dde2e7; color:#7a8088; font-size:.7rem; }
.telegram-layout > aside a { display:flex; align-items:center; gap:.65rem; padding:.65rem; border-radius:.7rem; color:#1e252c; text-decoration:none; }
.telegram-layout > aside a:hover { background:#dfe9f1; }
.telegram-layout a > span:last-child,.telegram-layout main header > span:last-child { display:grid; min-width:0; }
.telegram-layout a b,.telegram-layout main header b { font-size:.72rem; }
.telegram-layout a small,.telegram-layout main header small { color:#77818b; font-size:.61rem; }
.telegram-avatar { display:grid; width:2.65rem; height:2.65rem; flex:0 0 auto; place-items:center; border-radius:50%; background:linear-gradient(145deg,#55b7f4,#197ec8); color:#fff; font-size:.72rem; font-weight:700; }
.telegram-avatar.channel { background:linear-gradient(145deg,#8467e9,#4b33b5); }
.telegram-avatar img { width:100%; height:100%; border-radius:inherit; object-fit:cover; box-shadow:inset 0 0 0 1px rgba(255,255,255,.16); }
.telegram-layout > main { display:grid; min-width:0; grid-template-rows:auto minmax(0,1fr); background:linear-gradient(rgba(227,219,205,.88),rgba(227,219,205,.88)),radial-gradient(circle at 20% 30%,#fff 1px,transparent 1px); background-size:auto,22px 22px; }
.telegram-layout main header { display:flex; align-items:center; gap:.6rem; padding:.55rem .8rem; background:rgba(255,255,255,.94); box-shadow:0 1px rgba(0,0,0,.08); }
.telegram-chat { display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start; gap:.45rem; padding:1.2rem; overflow:auto; }
.telegram-chat p,.telegram-chat a { max-width:28rem; margin:0; padding:.58rem .75rem; border-radius:.8rem .8rem .8rem .2rem; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.1); color:#20252b; font-size:.7rem; line-height:1.45; text-decoration:none; }
.telegram-chat a { align-self:flex-end; border-radius:.8rem .8rem .2rem .8rem; background:#d9ffc8; color:#17672f; font-weight:650; }

/* Native portfolio applications */
.native-app-window { width:min(62rem,calc(100vw - 5rem)); height:min(40rem,calc(100dvh - 6rem)); grid-template-rows:auto minmax(0,1fr); background:rgba(246,249,252,.97); }
.os-root[data-os="windows"] .native-app-window { border-color:rgba(255,255,255,.78); border-radius:.55rem; box-shadow:0 30px 90px rgba(16,54,92,.44),inset 0 1px rgba(255,255,255,.92); }
.os-root[data-os="windows"] .native-app-window .universal-titlebar { min-height:2.2rem; justify-content:flex-start; padding-left:.9rem; background:rgba(240,246,251,.92); }
.native-eyebrow { color:#1473cf; font:700 .6rem/1.2 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:.1em; text-transform:uppercase; }
.native-actions { display:flex; flex-wrap:wrap; gap:.55rem; margin-top:1.4rem; }
.native-actions :is(a,button) { display:inline-flex; min-height:2.5rem; align-items:center; justify-content:center; padding:0 1rem !important; border-radius:.42rem !important; background:#176fc3 !important; color:#fff !important; font-size:.7rem !important; font-weight:650 !important; text-decoration:none; transition:transform 150ms ease,background 150ms ease; }
.native-actions :is(a,button):hover { background:#115fa9 !important; transform:translateY(-1px); }
.native-actions :is(a,button):active { transform:translateY(1px) scale(.98); }
.native-actions :is(a,button):nth-child(2) { background:#fff !important; box-shadow:inset 0 0 0 1px rgba(39,57,76,.16); color:#26313b !important; }

.about-shell { display:grid; min-height:0; grid-template-columns:17rem minmax(0,1fr); }
.about-shell > aside { display:grid; min-height:0; align-content:center; justify-items:center; padding:2rem; background:linear-gradient(145deg,rgba(211,229,244,.92),rgba(236,243,248,.82)); box-shadow:inset -1px 0 rgba(45,64,83,.1); }
.about-avatar { display:grid; width:7.25rem; height:7.25rem; place-items:center; margin-bottom:1rem; border:1px solid rgba(255,255,255,.76); border-radius:50%; background:linear-gradient(145deg,#70baf1,#1d67b0); box-shadow:0 20px 35px rgba(19,78,133,.22),inset 0 1px rgba(255,255,255,.55); color:#fff; font-size:1.6rem; font-weight:700; }
.about-avatar-photo { overflow:hidden; }
.about-avatar-photo img { width:100%; height:100%; object-fit:cover; }
.about-shell > aside b { font-size:1.05rem; }
.about-shell > aside span { margin-top:.25rem; color:#475666; font-size:.72rem; }
.about-shell > aside small { margin-top:.25rem; color:#73808d; font-size:.62rem; }
.about-shell > aside small i { display:inline-block; width:.42rem; height:.42rem; margin-right:.2rem; border-radius:50%; background:#22a86b; box-shadow:0 0 0 3px rgba(34,168,107,.11); }
.about-shell > main { align-self:center; padding:clamp(2rem,5vw,4.8rem); }
.about-shell h1,.github-shell h1,.native-settings-shell h1,.explorer-shell h1 { margin:.7rem 0 1rem; color:#162335; font-size:clamp(1.75rem,3vw,3.15rem); line-height:1.02; letter-spacing:-.055em; text-wrap:balance; }
.about-shell main > p { max-width:38rem; margin:0; color:#586779; font-size:.83rem; line-height:1.65; }
.about-facts { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:1.8rem; overflow:hidden; border:1px solid rgba(42,65,87,.12); border-radius:.65rem; background:rgba(42,65,87,.1); }
.about-facts article { display:grid; gap:.2rem; padding:1rem; background:rgba(255,255,255,.86); }
.about-facts b { color:#146fc3; font-size:1.25rem; font-variant-numeric:tabular-nums; }
.about-facts span { color:#647181; font-size:.58rem; line-height:1.35; }
.contact-lines { display:grid; gap:.45rem; margin-top:1rem; }
.contact-lines :is(button,a) { display:grid; min-height:2.8rem; grid-template-columns:5rem minmax(0,1fr) auto; align-items:center; gap:.6rem; padding:.55rem .7rem !important; border:1px solid rgba(42,65,87,.12) !important; border-radius:.5rem !important; background:rgba(255,255,255,.86) !important; color:#263441 !important; text-align:left; text-decoration:none; }
.contact-lines :is(button,a):hover { border-color:rgba(23,111,195,.35) !important; background:#fff !important; }
.contact-lines span { color:#72808e; font-size:.58rem; }
.contact-lines b { overflow:hidden; font-size:.66rem; text-overflow:ellipsis; white-space:nowrap; }
.contact-lines i { color:#176fc3; font-size:.56rem; font-style:normal; }

.files-app-window { grid-template-rows:auto auto minmax(0,1fr); }
.explorer-toolbar { display:grid; grid-template-columns:2rem 2rem 2rem minmax(0,1fr) 2rem; align-items:center; gap:.25rem; padding:.48rem .65rem; border-bottom:1px solid rgba(43,59,76,.12); background:#f4f7fa; }
.explorer-toolbar > button { display:grid; width:2rem; height:2rem; place-items:center; border-radius:.3rem; font-size:.85rem; }
.explorer-toolbar > button:hover { background:#e4ebf1; }
.explorer-toolbar > div { display:flex; min-width:0; align-items:center; gap:.45rem; height:2rem; padding:0 .65rem; border:1px solid rgba(44,60,78,.14); border-radius:.28rem; background:#fff; font-size:.63rem; }
.explorer-toolbar > div b { font-weight:500; white-space:nowrap; }
.explorer-toolbar > div i { color:#8a939d; font-style:normal; }
.explorer-shell { display:grid; min-height:0; grid-template-columns:13rem minmax(0,1fr); }
.explorer-shell > aside { display:grid; min-height:0; align-content:start; gap:.2rem; padding:.9rem .65rem; border-right:1px solid rgba(44,60,78,.1); background:rgba(231,238,244,.76); font-size:.66rem; }
.explorer-shell > aside :is(b,span,small) { padding:.47rem .6rem; border-radius:.3rem; }
.explorer-shell > aside span.is-active { background:rgba(45,121,194,.14); color:#1b5f9f; }
.explorer-shell > aside hr { width:100%; height:1px; margin:.35rem 0; border:0; background:rgba(44,60,78,.1); }
.explorer-shell > aside small { color:#6d7884; font-size:.57rem; font-weight:650; text-transform:uppercase; }
.explorer-shell > main { display:grid; min-width:0; min-height:0; grid-template-rows:auto minmax(0,1fr) auto; padding:1.5rem 1.6rem .65rem; overflow:auto; background:#fff; }
.explorer-shell > main > header { display:flex; align-items:end; justify-content:space-between; gap:1rem; }
.explorer-shell h1 { margin:.25rem 0 1rem; font-size:2rem; }
.explorer-shell header > :is(a,button) { margin-bottom:1.1rem; color:#176fc3; font-size:.65rem; font-weight:650; text-decoration:none; }
.explorer-grid { display:grid; align-content:start; grid-template-columns:repeat(5,minmax(0,1fr)); gap:1rem .65rem; }
.explorer-grid > :is(a,button) { display:grid; min-width:0; justify-items:center; gap:.25rem; padding:.7rem .3rem; border-radius:.45rem; color:#25313d; text-align:center; text-decoration:none; }
.explorer-grid > :is(a,button):hover { background:rgba(40,119,195,.1); }
.explorer-grid b { max-width:100%; overflow:hidden; font-size:.66rem; text-overflow:ellipsis; white-space:nowrap; }
.explorer-grid small { max-width:100%; overflow:hidden; color:#77828d; font-size:.53rem; text-overflow:ellipsis; white-space:nowrap; }
.project-folder { position:relative; display:block; width:5.1rem; height:3.75rem; border-radius:.34rem; background:linear-gradient(180deg,#ffd466,#e7a82e); box-shadow:inset 0 1px rgba(255,255,255,.72),0 8px 16px rgba(166,111,16,.18); }
.project-folder::before { content:""; position:absolute; top:-.48rem; left:.35rem; width:2.2rem; height:.75rem; border-radius:.34rem .34rem 0 0; background:#f3c452; }
.project-folder i { position:absolute; right:.35rem; bottom:.3rem; display:grid; width:1.25rem; height:1.25rem; place-items:center; border-radius:.25rem; background:rgba(255,255,255,.72); color:#8a5b08; font-size:.55rem; font-style:normal; font-weight:700; }
.project-preview { position:relative; display:block; width:6rem; height:4.15rem; overflow:hidden; border:1px solid rgba(34,55,74,.12); border-radius:.42rem; background:#dfe8ef; box-shadow:0 8px 18px rgba(34,61,86,.14); }
.project-preview img { width:100%; height:100%; object-fit:cover; transition:transform 220ms ease; }
.explorer-grid > button:hover .project-preview img { transform:scale(1.06); }
.project-preview > i { position:absolute; right:.3rem; bottom:.3rem; display:grid; width:1.2rem; height:1.2rem; place-items:center; border-radius:.26rem; background:rgba(17,29,40,.72); color:#fff; font-size:.52rem; font-style:normal; font-weight:700; backdrop-filter:blur(8px); }
.secret-preview { background:linear-gradient(145deg,#151d27,#35485c); }
.secret-preview::before { content:"</>"; position:absolute; inset:0; display:grid; place-items:center; color:rgba(255,255,255,.82); font:700 1.2rem/1 ui-monospace,monospace; }
.secret-folder[hidden] { display:none !important; }
.explorer-shell footer { display:flex; justify-content:space-between; padding-top:.55rem; border-top:1px solid rgba(45,60,76,.1); color:#77818c; font-size:.55rem; }

.github-shell { min-height:0; padding:clamp(1.6rem,4vw,3.5rem); overflow:auto; background:radial-gradient(circle at 88% 8%,rgba(58,128,199,.12),transparent 28%),#f7f9fb; }
.github-shell > header { display:grid; max-width:48rem; grid-template-columns:4rem minmax(0,1fr); gap:1.2rem; align-items:start; }
.github-mark { display:grid; width:4rem; height:4rem; place-items:center; border-radius:1rem; background:#161b22; box-shadow:0 12px 28px rgba(14,22,31,.22); color:#fff; font-size:1.6rem; }
.github-shell h1 { margin:.35rem 0 .75rem; font-size:2.35rem; }
.github-shell header p { max-width:39rem; margin:0; color:#637080; font-size:.76rem; line-height:1.55; }
.repo-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.8rem; margin-top:2rem; }
.repo-grid article { min-height:11.5rem; padding:1.1rem; border:1px solid rgba(39,57,76,.12); border-radius:.55rem; background:rgba(255,255,255,.88); box-shadow:0 10px 24px rgba(36,62,86,.06); }
.repo-grid article > span { color:#2878c5; font:700 .52rem/1 ui-monospace,monospace; letter-spacing:.08em; text-transform:uppercase; }
.repo-grid h2 { margin:.75rem 0 .55rem; font:700 1rem/1.1 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:-.04em; }
.repo-grid p { margin:0; color:#626f7e; font-size:.65rem; line-height:1.5; }
.repo-grid small { display:block; margin-top:1rem; color:#176fc3; font-size:.55rem; }

.native-settings-shell { display:grid; min-height:0; grid-template-columns:16rem minmax(0,1fr); }
.native-settings-shell > aside { display:grid; align-content:start; gap:.25rem; padding:1rem .75rem; border-right:1px solid rgba(44,60,78,.1); background:rgba(229,237,244,.84); color:#3d4a57; font-size:.67rem; }
.native-settings-shell > aside > div { display:flex; align-items:center; gap:.65rem; margin-bottom:.75rem; padding:.5rem; }
.native-settings-shell .about-avatar { width:2.4rem; height:2.4rem; margin:0; font-size:.7rem; }
.native-settings-shell > aside > span { padding:.55rem .65rem; border-radius:.35rem; }
.native-settings-shell > aside > span.is-active { background:rgba(34,115,194,.15); color:#145d9e; }
.native-settings-shell > main { padding:2rem 2.2rem; overflow:auto; background:#f8fafc; }
.native-settings-shell h1 { margin:.3rem 0 2rem; font-size:2.25rem; }
.native-settings-shell h2 { margin:1.5rem 0 .7rem; font-size:.76rem; }
.native-system-options { display:grid; grid-template-columns:repeat(4,1fr); gap:.55rem; }
.native-system-options button { display:grid; min-height:6rem; place-items:center; gap:.35rem; padding:.7rem !important; border:1px solid rgba(38,57,76,.13) !important; border-radius:.55rem !important; background:#fff !important; box-shadow:0 7px 18px rgba(39,67,91,.06); }
.native-system-options button:hover { border-color:#277bc9 !important; }
.native-system-options button b { display:grid; width:2.5rem; height:2.5rem; place-items:center; border-radius:.55rem; background:#e8f2fb; color:#176fc3; font-size:1rem; }
.native-system-options button span { font-size:.62rem; }
.native-wallpapers { display:grid; grid-template-columns:repeat(3,1fr); gap:.7rem; }
.native-wallpapers button { height:7rem; border:2px solid #fff !important; border-radius:.65rem !important; box-shadow:0 0 0 1px rgba(39,58,76,.14),0 8px 20px rgba(28,64,98,.12); }
.native-wallpapers button:nth-child(1) { background:radial-gradient(circle at 65% 35%,#bfeeff,transparent 25%),linear-gradient(145deg,#1764ad,#5ab5e4); }
.native-wallpapers button:nth-child(2) { background:radial-gradient(circle at 65% 35%,#a8edf1,transparent 25%),linear-gradient(145deg,#08325f,#258eb8); }
.native-wallpapers button:nth-child(3) { background:radial-gradient(circle at 65% 35%,#8d98a8,transparent 25%),linear-gradient(145deg,#111a27,#526174); }
.sound-setting { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:1rem; margin-top:1.6rem; padding:.85rem 1rem; border:1px solid rgba(38,57,76,.12); border-radius:.6rem; background:#fff; box-shadow:0 8px 20px rgba(37,63,86,.06); cursor:pointer; }
.sound-setting > span { display:grid; gap:.18rem; }
.sound-setting b { font-size:.7rem; }
.sound-setting small { color:#76828f; font-size:.58rem; }
.sound-setting input { position:absolute; opacity:0; pointer-events:none; }
.sound-setting > i { position:relative; width:2.5rem; height:1.35rem; border-radius:999px; background:#a9b2bc; transition:background 160ms ease; }
.sound-setting > i::after { content:""; position:absolute; top:.18rem; left:.18rem; width:.99rem; height:.99rem; border-radius:50%; background:#fff; box-shadow:0 2px 5px rgba(0,0,0,.18); transition:transform 160ms ease; }
.sound-setting input:checked + i { background:#176fc3; }
.sound-setting input:checked + i::after { transform:translateX(1.15rem); }
.settings-hint { margin:1rem 0 0; color:#78838f; font-size:.6rem; }
.settings-hint kbd,.os-search-panel kbd { padding:.16rem .32rem; border:1px solid rgba(44,59,75,.16); border-bottom-width:2px; border-radius:.25rem; background:#fff; color:#4e5a67; font:600 .55rem/1 ui-monospace,monospace; }

.os-search-panel { position:fixed; z-index:90; top:15%; left:50%; width:min(36rem,calc(100vw - 1.5rem)); overflow:hidden; border:1px solid rgba(255,255,255,.78); border-radius:.8rem; background:rgba(247,250,252,.94); box-shadow:0 35px 110px rgba(14,50,83,.45),inset 0 1px rgba(255,255,255,.9); color:#22303d; transform:translateX(-50%); backdrop-filter:blur(34px) saturate(155%); animation:search-in 180ms cubic-bezier(.22,1,.36,1) both; }
.os-search-panel[hidden] { display:none; }
.os-search-panel > header { display:grid; grid-template-columns:1.4rem minmax(0,1fr) auto; align-items:center; gap:.7rem; padding:.8rem .9rem; border-bottom:1px solid rgba(44,60,77,.1); }
.os-search-panel > header svg { width:1.2rem; fill:none; stroke:#176fc3; stroke-width:1.8; stroke-linecap:round; }
.os-search-panel > header input { min-width:0; border:0; outline:0; background:transparent; color:#1f2c39; font:500 .9rem/1.2 "Segoe UI Variable","Segoe UI",sans-serif; }
.os-search-results { min-height:15rem; max-height:23rem; padding:.5rem; overflow:auto; }
.os-search-panel > footer { display:flex; gap:1rem; padding:.55rem .9rem; border-top:1px solid rgba(44,60,77,.1); color:#7b8691; font-size:.52rem; }

.taskbar-preview { position:fixed; z-index:84; width:15rem; padding:.55rem; border:1px solid rgba(255,255,255,.74); border-radius:.58rem; background:rgba(240,246,251,.94); box-shadow:0 20px 55px rgba(20,60,98,.34),inset 0 1px rgba(255,255,255,.9); color:#25313d; backdrop-filter:blur(26px) saturate(150%); animation:preview-in 140ms ease both; }
.taskbar-preview[hidden] { display:none; }
.taskbar-preview > strong { display:block; margin:.15rem .2rem .48rem; font-size:.64rem; }
.taskbar-preview > div { position:relative; height:8.2rem; overflow:hidden; border:1px solid rgba(32,50,69,.12); border-radius:.35rem; background:#e8eef3; }
.taskbar-preview > small { display:block; margin:.42rem .2rem 0; color:#78838d; font-size:.5rem; }
.taskbar-preview-clone { position:absolute !important; top:0 !important; left:0 !important; display:grid !important; width:56rem !important; height:32rem !important; overflow:hidden !important; border:0 !important; border-radius:0 !important; background:#f5f7f9 !important; box-shadow:none !important; color:#202832 !important; transform:scale(.258) !important; transform-origin:top left !important; pointer-events:none !important; }

.snap-layout-picker { position:fixed; z-index:92; width:12.5rem; padding:.65rem; border:1px solid rgba(255,255,255,.76); border-radius:.55rem; background:rgba(244,248,251,.96); box-shadow:0 20px 48px rgba(25,58,91,.32),inset 0 1px rgba(255,255,255,.9); color:#283542; backdrop-filter:blur(24px); animation:preview-in 120ms ease both; }
.snap-layout-picker[hidden] { display:none; }
.snap-layout-picker > strong { display:block; margin:0 0 .55rem; font-size:.6rem; }
.snap-layout-picker > div { display:grid; grid-template-columns:repeat(3,1fr); gap:.4rem; }
.snap-layout-picker button { display:flex; height:3.1rem; gap:2px; padding:.25rem !important; border:1px solid rgba(43,61,79,.13) !important; border-radius:.35rem !important; background:#fff !important; }
.snap-layout-picker button:hover { border-color:#2379c9 !important; background:#edf6ff !important; }
.snap-layout-picker button i { display:block; height:100%; flex:1; border-radius:.15rem; background:#b9d8f4; }
.snap-layout-picker button[data-snap="right"] i:first-child,.snap-layout-picker button[data-snap="left"] i:last-child { background:#e1e8ee; }

.notification-center > header { display:flex !important; align-items:center; justify-content:space-between; margin:0 0 .55rem !important; }
.notification-center > header button { color:#176fc3; font-size:.54rem; }
.notification-center > div { display:grid; gap:.4rem; }
.notification-center article { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.18rem .5rem; padding:.6rem; border-radius:.5rem; background:rgba(255,255,255,.5); }
.notification-center article strong { font-size:.62rem; }
.notification-center article span { grid-column:1; color:#5f6b77; font-size:.55rem; line-height:1.35; }
.notification-center article small { grid-column:2; grid-row:1; color:#87919b; font-size:.48rem; }

/* Static system panels: visually accurate, intentionally non-interactive */
.system-popover { position:fixed; z-index:60; width:min(22rem,calc(100vw - 1.4rem)); padding:.9rem; border:1px solid rgba(255,255,255,.32); border-radius:1rem; background:rgba(238,242,246,.9); box-shadow:0 22px 65px rgba(0,0,0,.3),inset 0 1px rgba(255,255,255,.68); color:#1d2127; backdrop-filter:blur(32px) saturate(155%); animation:switcher-in 170ms ease both; }
.system-popover[hidden] { display:none; }
.os-root[data-os="windows"] .system-calendar { right:.65rem; bottom:4.2rem; }
.os-root[data-os="macos"] .system-calendar { top:2.2rem; right:.65rem; bottom:auto; background:rgba(31,31,36,.82); color:#fff; }
.system-calendar > header { display:grid; margin-bottom:1rem; }
.system-calendar > header span { font-size:.65rem; opacity:.58; }
.system-calendar > header strong { font-size:1.05rem; }
.calendar-month > b { display:block; margin-bottom:.75rem; font-size:.74rem; }
.calendar-week,.calendar-days { display:grid; grid-template-columns:repeat(7,1fr); gap:.18rem; text-align:center; }
.calendar-week { margin-bottom:.35rem; font-size:.55rem; opacity:.55; }
.calendar-days span { display:grid; aspect-ratio:1; place-items:center; border-radius:50%; font-size:.62rem; }
.calendar-days span.is-today { background:#1473e6; color:#fff; }
.system-calendar > section { margin-top:.9rem; padding:.75rem; border-radius:.65rem; background:rgba(255,255,255,.36); }
.system-calendar > section strong { font-size:.68rem; }
.system-calendar > section p { margin:.2rem 0 0; font-size:.62rem; opacity:.65; }
.mac-control-center { top:2.2rem; right:.65rem; background:rgba(31,31,36,.78); color:#fff; }
.os-root:not([data-os="macos"]) .mac-control-center { display:none; }
.control-connectivity { display:grid; gap:.4rem; padding:.55rem; border-radius:.75rem; background:rgba(255,255,255,.1); }
.control-connectivity article { display:flex; align-items:center; gap:.6rem; }
.control-connectivity article > i { display:grid; width:2rem; height:2rem; place-items:center; border-radius:50%; background:#0a84ff; font-style:normal; }
.control-connectivity span { display:grid; }
.control-connectivity b { font-size:.69rem; }
.control-connectivity small { font-size:.57rem; opacity:.55; }
.control-row,.control-now { margin-top:.55rem; padding:.7rem; border-radius:.75rem; background:rgba(255,255,255,.1); font-size:.65rem; }
.control-row > i { display:block; height:.35rem; margin-top:.55rem; border-radius:99px; background:rgba(255,255,255,.25); }
.control-row > i b { display:block; width:72%; height:100%; border-radius:inherit; background:#fff; }
.control-now { display:grid; }
.control-now span { opacity:.5; }

@media (max-width:600px) {
    .universal-app-window { inset:0; width:100%; height:100dvh; border:0; border-radius:0; transform:none; animation:platform-in 180ms ease both; }
    .universal-titlebar { min-height:3.1rem; }
    .universal-titlebar > strong { font-size:.8rem; }
    .universal-actions { display:flex !important; }
    .browser-tabs { padding-left:.35rem; }
    .browser-tabs button { min-width:8rem; }
    .telegram-layout { grid-template-columns:1fr; }
    .telegram-layout > aside { display:none; }
    .native-app-window { width:100%; height:100dvh; }
    .about-shell { grid-template-columns:1fr; overflow:auto; }
    .about-shell > aside { min-height:15rem; }
    .about-avatar { width:5.5rem; height:5.5rem; }
    .about-shell > main { padding:1.5rem; }
    .about-shell h1 { font-size:2rem; }
    .about-facts { grid-template-columns:1fr; }
    .explorer-toolbar { grid-template-columns:2rem 2rem minmax(0,1fr) 2rem; }
    .explorer-toolbar > button:nth-child(3) { display:none; }
    .explorer-shell { grid-template-columns:1fr; }
    .explorer-shell > aside { display:none; }
    .explorer-shell > main { padding:1.2rem .9rem .55rem; }
    .explorer-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .github-shell { padding:1.3rem; }
    .github-shell > header { grid-template-columns:1fr; }
    .github-shell h1 { font-size:2rem; }
    .repo-grid { grid-template-columns:1fr; }
    .native-settings-shell { grid-template-columns:1fr; }
    .native-settings-shell > aside { display:none; }
    .native-settings-shell > main { padding:1.4rem 1rem; }
    .native-system-options { grid-template-columns:repeat(2,1fr); }
    .native-wallpapers { grid-template-columns:1fr; }
    .native-wallpapers button { height:5.5rem; }
    .contact-lines :is(button,a) { grid-template-columns:4rem minmax(0,1fr); }
    .contact-lines i { grid-column:2; }
    .os-search-panel { top:.65rem; width:calc(100vw - 1rem); }
    .os-search-results { max-height:calc(100dvh - 8rem); }
    .taskbar-preview,.snap-layout-picker { display:none !important; }
}

.app-notice {
    position: fixed;
    z-index: 65;
    top: 1rem;
    left: 50%;
    display: grid;
    min-width: min(22rem, calc(100vw - 2rem));
    max-width: 28rem;
    gap: .15rem;
    padding: .72rem .9rem;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: .85rem;
    background: rgba(20,22,29,.76);
    box-shadow: 0 16px 42px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.1);
    color: #fff;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -1rem);
    transition: opacity 190ms ease, transform 190ms cubic-bezier(.22,1,.36,1);
    backdrop-filter: blur(24px) saturate(145%);
}

.app-notice.is-visible { opacity: 1; transform: translate(-50%, 0); }
.app-notice strong { font-size: .78rem; }
.app-notice span { color: rgba(255,255,255,.64); font-size: .68rem; }

@media (max-width: 600px) {
    .system-switch-button {
        top: 3.2rem;
        right: .7rem;
        width: 2.35rem;
        height: 2.35rem;
        min-height: 0;
        justify-content: center;
        padding: 0;
        border-radius: 50%;
    }

    .system-switch-button span { display: none; }
    .system-switcher { top: 6rem; right: .65rem; width: calc(100vw - 1.3rem); }
    .windows-weather { display: none; }
    .windows-taskbar { grid-template-columns: 1fr auto; }
    .windows-taskbar-center { grid-column: 1; justify-self: start; }
    .windows-tray { grid-column: 2; }
    .windows-taskbar-center > button { width: 2.55rem; }
    .windows-tray > svg, .tray-chevron { display: none; }
    .windows-clock { min-width: 3.3rem; }
    .windows-start-menu { bottom:4rem; width:calc(100vw - 1rem); }
    .windows-brand { display:none; }
    .windows-welcome-toast { right:.55rem; bottom:4.2rem; width:calc(100vw - 1.1rem); }
    .start-apps { grid-template-columns:repeat(3,1fr); }
    .start-files { grid-template-columns:1fr; }
    .mac-window { width:calc(100vw - 1rem); height:calc(100dvh - 7rem); }
    .finder-layout,.settings-layout { grid-template-columns:1fr; }
    .finder-layout > aside,.settings-layout > aside { display:none; }
    .finder-grid { grid-template-columns:repeat(2,1fr); }
    .settings-systems { grid-template-columns:repeat(2,1fr); }
}

@media (min-width: 601px) {
    .platform-mobile {
        top: 50%;
        height: min(52rem, calc(100dvh - 2rem));
        border: .45rem solid #0a0a0b;
        border-radius: 3rem;
        transform: translate(-50%, -50%);
    }
}

@media (max-height: 680px) {
    .ios-widget-row article { min-height:6.3rem; }
    .ios-widget-row strong { font-size:1.85rem; }
    .mobile-app-grid { padding-top: 1rem; row-gap: .8rem; }
    .mobile-app-grid .app-icon { width: 2.8rem; }
    .ios-dock { min-height: 4.5rem; }
    .ios-dock .app-icon { width: 2.85rem; }
}

@media (prefers-reduced-motion: reduce) {
    .platform,
    .system-switcher,
    .app-notice,
    .mac-dock button {
        animation: none;
        transition-duration: 1ms;
    }
}

@keyframes platform-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes desktop-refresh {
    0%,100% { filter:none; }
    45% { filter:brightness(1.08) saturate(.9); }
}

@keyframes easter-wallpaper {
    0%,100% { filter:none; }
    20% { filter:hue-rotate(80deg) saturate(1.5); }
    45% { filter:hue-rotate(180deg) saturate(1.8); }
    70% { filter:hue-rotate(280deg) saturate(1.45); }
}

@keyframes browser-spinner { to { transform:rotate(360deg); } }

@keyframes browser-progress {
    0% { width:0; transform:translateX(0); }
    65% { width:72%; transform:translateX(0); }
    100% { width:18%; transform:translateX(520%); }
}

@keyframes search-in {
    from { opacity:0; transform:translate(-50%,-.8rem) scale(.97); }
    to { opacity:1; transform:translate(-50%,0) scale(1); }
}

@keyframes preview-in {
    from { opacity:0; transform:translateY(.35rem) scale(.97); }
    to { opacity:1; transform:translateY(0) scale(1); }
}

@keyframes context-in {
    from { opacity:0; transform:scale(.96); transform-origin:top left; }
    to { opacity:1; transform:scale(1); }
}

@keyframes toast-in {
    from { opacity:0; transform:translateY(1.2rem) scale(.98); }
    to { opacity:1; transform:translateY(0) scale(1); }
}

@keyframes switcher-in {
    from { opacity: 0; transform: translateY(-.4rem) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes windows-start-in {
    from { opacity:0; transform:translate(-50%, .8rem) scale(.97); }
    to { opacity:1; transform:translate(-50%, 0) scale(1); }
}

@keyframes mac-window-in {
    from { opacity:0; transform:translate(-50%,-47%) scale(.94); }
    to { opacity:1; transform:translate(-50%,-50%) scale(1); }
}