: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="ios"] .platform-ios {display: block;
    animation: platform-in 320ms cubic-bezier(0.22, 1, 0.36, 1) both;}

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

.platform button {margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;}

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

.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-bot,
.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-bot > img {object-fit: cover;}

.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;}

.telegram-welcome-toast {position:absolute;
    z-index:86;
    right:1rem;
    bottom:4.65rem;
    display:grid;
    width:min(22.5rem,calc(100vw - 2rem));
    overflow:hidden;
    padding:.68rem .75rem .78rem;
    border:1px solid rgba(255,255,255,.18);
    border-radius:.62rem;
    background:rgba(44,44,48,.52);
    box-shadow:0 18px 50px rgba(0,0,0,.45),inset 0 1px rgba(255,255,255,.22),inset 0 -1px rgba(0,0,0,.12);
    color:#fff;
    touch-action:none;
    transform-origin:top center;
    backdrop-filter:blur(28px) saturate(180%);
    animation:telegram-toast-in 480ms 620ms cubic-bezier(.22,1,.36,1) both;}

.telegram-welcome-toast > * {animation:telegram-toast-content-in 480ms 620ms ease both;}

.telegram-welcome-toast[hidden] {display:none;}

.telegram-welcome-toast.is-leaving {opacity:0;
    pointer-events:none;
    transform:translateY(-1.2rem) scale(.34,.4);
    transition:opacity 180ms ease,transform 180ms ease;}

.telegram-welcome-toast button {margin:0;
    border:0;
    background:none;
    color:inherit;
    font:inherit;
    -webkit-appearance:none;
    appearance:none;}

.telegram-welcome-header {display:grid;
    grid-template-columns:1.35rem minmax(0,1fr) auto 1.55rem;
    align-items:center;
    gap:.42rem;
    min-height:1.55rem;}

.telegram-welcome-app {display:grid;
    width:1.35rem;
    height:1.35rem;
    place-items:center;
    overflow:hidden;
    border-radius:.34rem;}

.telegram-welcome-app img {width:100%; height:100%; object-fit:contain;}

.telegram-welcome-header b {color:rgba(235,235,245,.6); font-size:.64rem; font-weight:600; letter-spacing:.02em;}

.telegram-welcome-header time {color:rgba(235,235,245,.45); font-size:.54rem;}

.telegram-welcome-header button {display:grid;
    width:1.55rem;
    height:1.55rem;
    place-items:center;
    border-radius:.26rem;
    color:rgba(235,235,245,.6);
    font-size:.86rem;}

.telegram-welcome-header button:hover {background:rgba(255,255,255,.12);}

.telegram-welcome-message {display:grid;
    grid-template-columns:2.4rem minmax(0,1fr);
    align-items:center;
    gap:.6rem;
    width:100%;
    padding:.58rem 0 0;
    color:#fff;
    text-align:left;}

.telegram-welcome-message:hover {color:rgba(235,235,245,.85);}

.telegram-welcome-avatar {display:block;
    width:2.4rem;
    aspect-ratio:1;
    overflow:hidden;
    border-radius:50%;}

.telegram-welcome-avatar img {width:100%;
    height:100%;
    object-fit:cover;}

.telegram-welcome-text {display:grid;
    gap:.14rem;
    min-width:0;}

.telegram-welcome-text strong {font-size:.72rem; font-weight:650;}

.telegram-welcome-text > span {display:-webkit-box;
    overflow:hidden;
    color:rgba(235,235,245,.8);
    font-size:.66rem;
    font-weight:500;
    line-height:1.35;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;}

.os-root[data-os="ios"] .telegram-welcome-toast {top:.8rem;
    right:.7rem;
    bottom:auto;
    left:.7rem;
    width:auto;
    border-radius:1rem;}

.os-root[data-os="ios"] .telegram-welcome-toast {background:rgba(44,44,48,.52);
    box-shadow:0 18px 50px rgba(0,0,0,.45),inset 0 1px rgba(255,255,255,.22),inset 0 -1px rgba(0,0,0,.12);}

.os-root[data-os="ios"] .telegram-welcome-message strong {font-size:.74rem;}

.apple-mark {width: .9rem !important;}

/* 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 {position: absolute;
    inset: 0;
    overflow: hidden;
    background: #101014;}

.ios-wallpaper::before {content: "";
    position: absolute;
    inset: 0;
    background: url("../wallpaper.jpg") center center / cover no-repeat;
    filter: blur(4.5px) saturate(135%) brightness(.92);
    transform: scale(1.03);}

.ios-wallpaper::after {content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(3,5,12,.44), rgba(3,5,12,.36) 50%, rgba(2,3,8,.58));}

.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,.14); border-radius:1.35rem; box-shadow:0 12px 28px rgba(0,0,0,.35),inset 0 1px rgba(255,255,255,.1); backdrop-filter:blur(24px) saturate(145%);}

.ios-weather-widget {position:relative; background:linear-gradient(155deg,rgba(38,116,203,.92),rgba(21,68,148,.85));}

.ios-weather-widget.is-night {background:linear-gradient(155deg,rgba(24,31,70,.95),rgba(9,13,38,.9));}

.ios-calendar-widget {background:rgba(28,28,30,.72); color:#fff;}

.ios-calendar-widget span,
.ios-calendar-widget small {color:rgba(255,255,255,.62);}

.ios-calendar-widget strong {color:#fff;}

.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;}

.ios-weather-icon {position: absolute;
    top: .7rem;
    right: .75rem;
    width: 3.5rem;
    height: 3.5rem;
    pointer-events: none;}

.ios-weather-icon svg {display: block;
    width: 100%;
    height: 100%;}

.ios-weather-icon :is(.wi-rays,.wi-cloud-drift,.wi-drop,.wi-flake,.wi-fog-line,.wi-bolt) {transform-box: fill-box;}

.ios-weather-icon .wi-rays {transform-origin: center; animation: wi-spin 12s linear infinite;}

.ios-weather-icon .wi-cloud-drift,
.ios-weather-icon .wi-fog-line {animation: wi-drift 4s ease-in-out infinite alternate;}

.ios-weather-icon .wi-fog-line {animation-duration: 3.5s;}

.ios-weather-icon .wi-drop {animation: wi-drop-fall 1.1s linear infinite;}

.ios-weather-icon .wi-flake {animation: wi-flake-fall 1.8s linear infinite;}

.ios-weather-icon .wi-star {animation: wi-star-twinkle 1.8s ease-in-out infinite alternate;}

.ios-weather-icon .wi-bolt {transform-origin: center; animation: wi-bolt-flash 2s ease-in-out infinite;}

.ios-weather-icon .wi-d1 {animation-delay: .4s;}

.ios-weather-icon .wi-d2 {animation-delay: .8s;}

.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: .4rem;
    color: #fff;
    font-size: .72rem;
    text-shadow: 0 1px 4px rgba(0,0,0,.5);
    text-decoration:none;}

.mobile-app-grid .app-icon {width: 4.4rem; border-radius: 1.2rem;}

.mobile-app-grid :is(button,.app-launch):active .app-icon {transform: scale(.9); filter: brightness(.82);}

/* Папка на домашнем экране (как в iOS) */
.ios-folder-launch {grid-column: 4;}

.ios-folder-preview {display: grid;
    width: 4.4rem;
    aspect-ratio: 1;
    grid-template-columns: repeat(2, 1fr);
    gap: 2px;
    padding: 6px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 1.2rem;
    background: rgba(28,28,30,.48);
    box-shadow: inset 0 1px rgba(255,255,255,.1), 0 6px 16px rgba(0,0,0,.3);
    backdrop-filter: blur(18px) saturate(150%);}

.ios-folder-mini {display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 26%;
    background: linear-gradient(160deg, #0e1a15, #091210);}

.ios-folder-mini img {width: 72%;
    height: 72%;
    object-fit: contain;}

.ios-folder-label {max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;}

.ios-folder-launch:active .ios-folder-preview {transform: scale(.9); filter: brightness(.82);}

.platform-ios .ios-widget-row,
.platform-ios .mobile-app-grid,
.platform-ios .ios-dock {transition: transform .27s cubic-bezier(.22,1,.36,1), filter .27s ease;}

.platform-ios.is-folder-open .ios-widget-row,
.platform-ios.is-folder-open .mobile-app-grid,
.platform-ios.is-folder-open .ios-dock {transform: scale(.94); filter: brightness(.7);}

.platform-ios.is-folder-open .mobile-status,
.platform-ios.is-folder-open .ios-home-indicator {z-index: 22;}

.ios-folder-scrim {position: absolute;
    z-index: 20;
    inset: 0;
    cursor: default;
    opacity: 0;
    background: rgba(2,3,8,.44);
    backdrop-filter: blur(12px) saturate(120%);
    transition: opacity .26s ease;}

.ios-folder-scrim[hidden] {display: none;}

.ios-folder-scrim.is-open {opacity: 1;}

.ios-folder-window {position: absolute;
    z-index: 21;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 .55rem;
    opacity: 0;
    transform: scale(.45);
    transform-origin: 86% 26%;
    pointer-events: none;
    transition: opacity .24s ease, transform .27s cubic-bezier(.22,1,.36,1);}

.ios-folder-window[hidden] {display: none;}

.ios-folder-window.is-open {opacity: 1;
    transform: none;}

.ios-folder-window:focus {outline: none;}

.ios-folder-title {margin: 0 0 .85rem;
    overflow: hidden;
    font-size: 1.15rem;
    font-weight: 600;
    text-align: center;
    text-overflow: ellipsis;
    text-shadow: 0 1px 8px rgba(0,0,0,.4);
    white-space: nowrap;}

.ios-folder-panel {height: min(24rem, 56dvh);
    padding: 1.6rem 1.2rem;
    pointer-events: auto;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 2rem;
    background: rgba(30,30,33,.68);
    box-shadow: inset 0 1px rgba(255,255,255,.1), 0 26px 60px rgba(0,0,0,.5);
    backdrop-filter: blur(30px) saturate(160%);}

.ios-folder-grid {display: grid;
    height: 100%;
    align-content: start;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.4rem .5rem;
    margin: 0;
    padding: 0;
    list-style: none;}

.ios-folder-grid :is(a,button) {display: grid;
    justify-items: center;
    gap: .4rem;
    color: #fff;
    font-size: .68rem;
    text-shadow: 0 1px 4px rgba(0,0,0,.5);
    text-decoration: none;}

.ios-folder-grid .app-icon {width: 4.4rem; border-radius: 1.2rem;}

.ios-folder-grid :is(a,button):active .app-icon {transform: scale(.9); filter: brightness(.82);}

.app-icon-cheapvibecode {background: linear-gradient(160deg, #0e1a15, #091210);}

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

.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: 6.4rem;
    padding: .55rem .3rem;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 1.8rem;
    background: rgba(28,28,30,.48);
    box-shadow: inset 0 1px rgba(255,255,255,.1), 0 14px 34px rgba(0,0,0,.35);
    backdrop-filter: blur(26px) saturate(160%);}

.ios-dock .app-icon {width: 4.4rem; border-radius: 1.25rem;}

.ios-dock :is(button,.app-launch):active .app-icon {transform: scale(.9);}

.ios-home-indicator {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%);}

.telegram-app-window {grid-template-rows:auto minmax(0,1fr);}

.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);}

.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;}

.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;}

@media (max-width:600px){.repo-grid {grid-template-columns:1fr;}

.contact-lines :is(button,a) {grid-template-columns:4rem minmax(0,1fr);}

.contact-lines i {grid-column:2;}
}

@media (max-width: 600px){.telegram-welcome-toast {right:.55rem; bottom:4.2rem; width:calc(100vw - 1.1rem);}

.os-root[data-os="ios"] .telegram-welcome-toast {top:.75rem; right:.55rem; bottom:auto; left:.55rem; width:auto;}
}

@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%);}

.os-root[data-os="ios"] .telegram-welcome-toast {top:.95rem; right:1rem; left:1rem;}
}

@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: 3.4rem;}

.ios-folder-preview {width: 3.4rem;}

.ios-dock {min-height: 5.3rem;}

.ios-dock .app-icon {width: 3.4rem;}
}

@media (prefers-reduced-motion: reduce){.platform,
.telegram-welcome-toast,
.telegram-welcome-toast > *,
.ios-folder-scrim,
.ios-folder-window,
.platform-ios .ios-widget-row,
.platform-ios .mobile-app-grid,
.platform-ios .ios-dock,
.ios-weather-icon * {animation: none;
        transition-duration: 1ms;}
}

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

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

@keyframes telegram-toast-in{
    0% { opacity:0; transform:translateY(-1.4rem) scale(.34,.45); border-radius:999px; }
    45% { opacity:1; }
    100% { opacity:1; transform:translateY(0) scale(1); border-radius:1rem; }
}

@keyframes telegram-toast-content-in{
    0%,55% { opacity:0; }
    100% { opacity:1; }
}

@keyframes wi-spin{
    to { transform: rotate(360deg); }
}

@keyframes wi-drift{
    from { transform: translateX(-2.5px); }
    to { transform: translateX(2.5px); }
}

@keyframes wi-drop-fall{
    0% { opacity:0; transform:translateY(-2px); }
    20% { opacity:1; }
    80% { opacity:1; }
    100% { opacity:0; transform:translateY(5px); }
}

@keyframes wi-flake-fall{
    0% { opacity:0; transform:translate(-1px,-2px); }
    20% { opacity:1; }
    100% { opacity:0; transform:translate(1.2px,5px); }
}

@keyframes wi-bolt-flash{
    0%,55%,100% { opacity:1; }
    65% { opacity:.15; }
    75% { opacity:1; }
    85% { opacity:.3; }
}

@keyframes wi-star-twinkle{
    from { opacity:.3; }
    to { opacity:1; }
}