/* ==========================================================================
   projects-os.css — /projects, the desktop ("maxOS").

   Loaded only by templates/projects-os.html, on top of projects.css. The chrome
   is the site's own language pushed further — dashed accent borders, mono type,
   hard offset shadows — and every surface colour is a suCSS variable, so light
   and dark come for free. The only literals are the eighteen type hues the
   sprites are tinted with, copied from projects-dex.css so the same repo wears
   the same colour on both views.
   ========================================================================== */

.os-root {
    --os-bar-h: 2.6rem;
    --os-shadow: color-mix(in srgb, var(--accent) 35%, transparent);
    --os-radius: 6px;
}

/* --- suCSS resets ---------------------------------------------------------
   suCSS marks every `ul li` with '» ', caps iframes at 90% and paints every
   enabled button accent-light on hover (button:enabled:hover, which outranks a
   single class). Hover rules below are prefixed with .os-root to win back. */

.os-root ul:not(.os-readme-list) > li::marker {
    content: none;
}

/* --- sprite tints (keep in sync with projects-dex.css) -------------------- */

.os-root [data-type="normal"]   { --t: #a8a77a; }
.os-root [data-type="fire"]     { --t: #ee8130; }
.os-root [data-type="water"]    { --t: #6390f0; }
.os-root [data-type="electric"] { --t: #e0b422; }
.os-root [data-type="grass"]    { --t: #7ac74c; }
.os-root [data-type="ice"]      { --t: #79c7c4; }
.os-root [data-type="fighting"] { --t: #c22e28; }
.os-root [data-type="poison"]   { --t: #a33ea1; }
.os-root [data-type="ground"]   { --t: #cba54e; }
.os-root [data-type="flying"]   { --t: #a98ff3; }
.os-root [data-type="psychic"]  { --t: #f95587; }
.os-root [data-type="bug"]      { --t: #94a516; }
.os-root [data-type="rock"]     { --t: #b6a136; }
.os-root [data-type="ghost"]    { --t: #735797; }
.os-root [data-type="dragon"]   { --t: #6f35fc; }
.os-root [data-type="dark"]     { --t: #705746; }
.os-root [data-type="steel"]    { --t: #8f8fa8; }
.os-root [data-type="fairy"]    { --t: #d685ad; }

.os-px1 { fill: color-mix(in srgb, var(--t, var(--accent)) 45%, white); }
.os-px2 { fill: var(--t, var(--accent)); }
.os-px3 { fill: color-mix(in srgb, var(--t, var(--accent)) 62%, black); }

/* --- app tile (shared by the catalogue, the desktop, folders, the launcher) */

.os-tile {
    display: grid;
    place-items: center;
    flex: none;
    width: 3.25rem;
    height: 3.25rem;
    border: 1px solid color-mix(in srgb, var(--t, var(--accent)) 55%, var(--border));
    border-radius: 14px;
    background:
        radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--t, var(--accent)) 28%, transparent), transparent 70%),
        color-mix(in srgb, var(--t, var(--accent)) 10%, var(--bg));
    box-shadow: 0 2px 0 color-mix(in srgb, var(--t, var(--accent)) 40%, transparent);
}

.os-sprite {
    width: 70%;
    height: 70%;
}

.os-tile-glyph {
    font-size: 1.6rem;
    line-height: 1;
}

/* --- no-JS catalogue ------------------------------------------------------ */

.os-cat::before {
    content: attr(data-label);
    display: block;
    margin: 1.4rem 0 0.6rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px dashed var(--accent);
    font-weight: 700;
}

.os-apps {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
    gap: 0.9rem 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.os-app {
    margin: 0;
}

.os-app-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    text-decoration: none;
    text-align: center;
}

.os-app-name {
    max-width: 100%;
    font-size: 0.8rem;
    overflow-wrap: anywhere;
}

.os-app-desc {
    display: none;
}

/* The script takes over: the catalogue becomes data. */
.os-root.is-live .os-catalog {
    display: none;
}

/* --- the screen ------------------------------------------------------------ */

/* Same width as the rest of the site (suCSS's content column); the full-screen
   button is there for anyone who wants more room. */
.os-screen {
    position: relative;
    width: 100%;
    height: clamp(30rem, 78vh, 58rem);
    margin: 0.5rem 0 0;
    overflow: hidden;
    border: 1px solid var(--accent);
    border-radius: var(--os-radius);
    background-color: var(--bg-light);
    box-shadow: 8px 8px 0 var(--os-shadow);
    font-family: var(--mono-font, ui-monospace, monospace);
    font-size: 0.85rem;
    isolation: isolate;
}

.os-screen:fullscreen {
    width: 100%;
    height: 100%;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.os-desk {
    position: absolute;
    inset: 0 0 var(--os-bar-h);
    overflow: hidden;
    background-color: var(--bg-light);
    background-image: radial-gradient(color-mix(in srgb, var(--text-light) 35%, transparent) 1px, transparent 1.2px);
    background-size: 18px 18px;
}

.os-wallmark {
    position: absolute;
    right: 1.5rem;
    bottom: 0.5rem;
    margin: 0;
    font-size: clamp(3rem, 10vw, 7.5rem);
    font-weight: 800;
    letter-spacing: -0.05em;
    line-height: 1;
    color: color-mix(in srgb, var(--text) 7%, transparent);
    pointer-events: none;
    user-select: none;
}

.os-wallmark b {
    color: color-mix(in srgb, var(--accent) 22%, transparent);
}

/* --- desktop icons --------------------------------------------------------- */

.os-icons {
    position: absolute;
    inset: 0.75rem;
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(auto-fill, 6.4rem);
    grid-auto-columns: 6.4rem;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
    align-content: start;
}

.os-icons > li,
.os-grid > li {
    margin: 0;
}

.os-icon {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    width: 100%;
    height: 100%;
    padding: 0.4rem 0.2rem;
    border: 1px dashed transparent;
    border-radius: var(--os-radius);
    background: none;
    color: var(--text);
    font: inherit;
    font-size: 0.75rem;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.os-root .os-icon:hover,
.os-root .os-icon:focus-visible {
    border-color: var(--accent);
    background-color: color-mix(in srgb, var(--accent) 10%, transparent);
    color: var(--text);
    outline: none;
}

.os-icon:hover .os-tile {
    transform: translateY(-2px);
}

.os-icon .os-tile {
    transition: transform 0.15s ease;
}

.os-icon-label {
    display: -webkit-box;
    max-width: 100%;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow-wrap: anywhere;
    line-height: 1.2;
}

/* Desktop labels sit on the dot grid; a soft plate keeps them legible. */
.os-icons .os-icon-label {
    padding: 0 0.25rem;
    border-radius: 3px;
    background-color: color-mix(in srgb, var(--bg-light) 80%, transparent);
}

/* Shortcut arrow on anything that leaves the desktop, a lock on the apps that
   refuse to be framed. */
.os-icon[data-external]::after,
.os-icon[data-locked]::after {
    content: "↗";
    position: absolute;
    top: 0.3rem;
    right: 0.75rem;
    display: grid;
    place-items: center;
    width: 1.1rem;
    height: 1.1rem;
    border: 1px solid var(--border);
    border-radius: 50%;
    background-color: var(--bg);
    font-size: 0.65rem;
}

.os-icon[data-locked]::after {
    content: "🔒";
    font-size: 0.55rem;
}

/* Folders: a tab on top of the tile, and the theme's emoji on its face. */
.os-folder .os-tile {
    position: relative;
    border-radius: 4px 12px 12px 12px;
    background: color-mix(in srgb, var(--accent) 22%, var(--bg));
    border-color: var(--accent);
    box-shadow: 0 2px 0 var(--os-shadow);
}

.os-folder .os-tile::before {
    content: "";
    position: absolute;
    top: -0.45rem;
    left: -1px;
    width: 45%;
    height: 0.45rem;
    border: 1px solid var(--accent);
    border-bottom: 0;
    border-radius: 4px 4px 0 0;
    background: inherit;
}

.os-badge {
    position: absolute;
    top: 0.2rem;
    right: 0.6rem;
    min-width: 1.2rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    background-color: var(--accent);
    color: var(--accent-text);
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1.2rem;
}

/* --- windows --------------------------------------------------------------- */

.os-windows {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.os-win {
    position: absolute;
    display: flex;
    flex-direction: column;
    min-width: 17rem;
    min-height: 11rem;
    border: 1px solid var(--border);
    border-radius: var(--os-radius);
    background-color: var(--bg);
    box-shadow: 5px 5px 0 color-mix(in srgb, var(--text) 12%, transparent);
    pointer-events: auto;
    animation: os-pop 0.16s ease-out;
}

.os-win.is-focused {
    border-color: var(--accent);
    box-shadow: 7px 7px 0 var(--os-shadow);
}

.os-win.is-min {
    display: none;
}

.os-win.is-max {
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    border-radius: 0;
    box-shadow: none;
}

.os-win.is-closing {
    animation: os-close 0.12s ease-in forwards;
}

@keyframes os-pop {
    from { opacity: 0; transform: scale(0.96) translateY(6px); }
}

@keyframes os-close {
    to { opacity: 0; transform: scale(0.96); }
}

.os-titlebar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: none;
    height: 2.1rem;
    padding: 0 0.5rem;
    border-bottom: 1px dashed var(--border);
    border-radius: var(--os-radius) var(--os-radius) 0 0;
    background-color: var(--bg-light);
    cursor: grab;
    user-select: none;
    touch-action: none;
}

.os-win.is-focused .os-titlebar {
    border-bottom-color: var(--accent);
    background-color: color-mix(in srgb, var(--accent) 14%, var(--bg-light));
}

.os-win.is-max .os-titlebar {
    border-radius: 0;
    cursor: default;
}

.os-root.is-dragging,
.os-root.is-dragging * {
    cursor: grabbing !important;
}

.os-root.is-resizing,
.os-root.is-resizing * {
    cursor: nwse-resize !important;
}

/* An iframe swallows every pointer event that crosses it, which would drop a
   drag the moment the cursor outran the title bar. */
.os-root.is-dragging iframe,
.os-root.is-resizing iframe {
    pointer-events: none;
}

.os-lights {
    display: flex;
    gap: 0.35rem;
}

.os-light {
    display: grid;
    place-items: center;
    width: 0.8rem;
    height: 0.8rem;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--text) 25%, transparent);
    border-radius: 50%;
    background-color: var(--border);
    color: transparent;
    font-size: 0.55rem;
    line-height: 1;
    cursor: pointer;
}

.os-win.is-focused .os-light[data-act="close"] { background-color: #ff5f57; }
.os-win.is-focused .os-light[data-act="min"]   { background-color: #febc2e; }
.os-win.is-focused .os-light[data-act="max"]   { background-color: #28c840; }

.os-lights:hover .os-light,
.os-light:focus-visible {
    color: rgb(0 0 0 / 0.6);
}

.os-root .os-light:hover {
    border-color: color-mix(in srgb, var(--text) 25%, transparent);
}

.os-back {
    display: none;
}

.os-title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex: 1;
    min-width: 0;
    justify-content: center;
    font-weight: 700;
}

.os-title span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.os-title .os-tile {
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 5px;
    box-shadow: none;
}

.os-title .os-tile-glyph {
    font-size: 0.8rem;
}

.os-tools {
    display: flex;
    gap: 0.15rem;
}

.os-tool {
    display: grid;
    place-items: center;
    min-width: 1.6rem;
    height: 1.5rem;
    padding: 0 0.3rem;
    border: 1px solid transparent;
    border-radius: 4px;
    color: var(--text-light);
    text-decoration: none;
    font-size: 0.75rem;
}

.os-tool:hover,
.os-tool:focus-visible {
    border-color: var(--accent);
    background: none;
    color: var(--accent);
}

.os-winbody {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: auto;
    border-radius: 0 0 var(--os-radius) var(--os-radius);
}

.os-win.is-max .os-winbody {
    border-radius: 0;
}

.os-frame {
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    border: 0;
    background-color: #fff;
}

.os-loading {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 0.8rem;
    background-color: var(--bg);
    color: var(--text-light);
    transition: opacity 0.25s ease;
}

.os-loading .os-tile {
    width: 4rem;
    height: 4rem;
    animation: os-bob 0.9s ease-in-out infinite alternate;
}

.os-win.is-loaded .os-loading {
    opacity: 0;
    pointer-events: none;
}

@keyframes os-bob {
    to { transform: translateY(-6px); }
}

.os-grip {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 1rem;
    height: 1rem;
    cursor: nwse-resize;
    touch-action: none;
    background: linear-gradient(135deg, transparent 50%, var(--border) 50%, var(--border) 60%, transparent 60%, transparent 70%, var(--border) 70%, var(--border) 80%, transparent 80%);
}

.os-win.is-max .os-grip {
    display: none;
}

/* Folder windows: a plain icon grid, its item count pinned to the bottom. */
.os-folderbody {
    display: flex;
    flex-direction: column;
}

.os-grid {
    flex: 1 0 auto;
    align-content: start;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(6.2rem, 1fr));
    grid-auto-rows: 6.4rem;
    gap: 0.25rem;
    margin: 0;
    padding: 0.75rem;
    list-style: none;
}

.os-folderfoot {
    position: sticky;
    bottom: 0;
    margin: 0;
    padding: 0.3rem 0.75rem;
    border-top: 1px dashed var(--border);
    background-color: var(--bg);
    color: var(--text-light);
    font-size: 0.75rem;
}

/* The notice shown instead of an app that refuses to be framed. */
.os-locked {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 0.4rem;
    min-height: 100%;
    padding: 1.5rem;
    text-align: center;
}

.os-locked p {
    max-width: 30rem;
    margin: 0;
    line-height: 1.5;
}

.os-locked .os-tile {
    width: 4rem;
    height: 4rem;
    margin-bottom: 0.4rem;
}

.os-locked-title {
    font-weight: 700;
}

.os-locked-open {
    margin-top: 0.6rem;
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--accent);
    border-radius: 4px;
    background-color: var(--accent);
    color: var(--accent-text) !important;
    font-weight: 700;
}

.os-root .os-locked-open:hover {
    background-color: var(--bg);
    color: var(--accent) !important;
}

/* README window */
.os-readme {
    padding: 0.9rem 1.1rem;
    line-height: 1.55;
}

.os-readme p,
.os-readme ul {
    margin: 0 0 0.8rem;
}

.os-readme ul {
    padding-left: 1.1rem;
}

.os-readme kbd,
.os-kbd {
    padding: 0 0.3rem;
    border: 1px solid var(--border);
    border-bottom-width: 2px;
    border-radius: 4px;
    font-family: inherit;
    font-size: 0.8em;
}

.os-readme-stats {
    font-weight: 700;
}

.os-langbar {
    display: flex;
    height: 0.6rem;
    overflow: hidden;
    padding: 0 !important;
    border-radius: 999px;
    list-style: none;
}

.os-langbar li {
    margin: 0;
    background-color: var(--pv-lang-color, var(--text-light));
}

.os-langkey {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem 0.9rem;
    padding: 0 !important;
    list-style: none;
    font-size: 0.75rem;
    color: var(--text-light);
}

.os-langkey li {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin: 0;
}

.os-langkey .pv-dot {
    display: inline-block;
}

/* --- taskbar ------------------------------------------------------------- */

.os-bar {
    position: absolute;
    inset: auto 0 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    height: var(--os-bar-h);
    padding: 0 0.4rem;
    border-top: 1px solid var(--accent);
    background-color: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: blur(8px);
}

.os-start {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    height: 1.9rem;
    margin: 0;
    padding: 0 0.6rem;
    border: 1px solid var(--accent);
    border-radius: 4px;
    background-color: var(--accent);
    color: var(--accent-text);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.os-root .os-start:hover,
.os-start[aria-expanded="true"] {
    background-color: var(--bg);
    color: var(--accent);
}

.os-start .os-kbd {
    border-color: currentColor;
    font-weight: 400;
    opacity: 0.75;
}

.os-tasks {
    display: flex;
    flex: 1;
    gap: 0.3rem;
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    list-style: none;
    scrollbar-width: none;
}

.os-tasks li {
    margin: 0;
}

.os-task {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    max-width: 11rem;
    height: 1.9rem;
    margin: 0;
    padding: 0 0.5rem;
    border: 1px dashed var(--border);
    border-radius: 4px;
    background: none;
    color: var(--text);
    font: inherit;
    cursor: pointer;
}

.os-task span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.os-task .os-tile {
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 4px;
    box-shadow: none;
}

.os-task .os-tile-glyph {
    font-size: 0.75rem;
}

.os-root .os-task:hover {
    border-color: var(--accent);
    background: none;
}

.os-task[aria-pressed="true"],
.os-root .os-task[aria-pressed="true"]:hover {
    border-style: solid;
    border-color: var(--accent);
    background-color: color-mix(in srgb, var(--accent) 14%, transparent);
}

.os-task.is-min {
    opacity: 0.6;
}

.os-tray-btn {
    height: 1.9rem;
    margin: 0;
    padding: 0 0.5rem;
    border: 1px solid transparent;
    border-radius: 4px;
    background: none;
    color: var(--text);
    font: inherit;
    font-size: 1rem;
    cursor: pointer;
}

.os-root .os-tray-btn:hover {
    border-color: var(--accent);
    background: none;
    color: var(--accent);
}

.os-clock {
    padding: 0 0.4rem;
    color: var(--text-light);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* --- launcher ------------------------------------------------------------- */

.os-launcher {
    position: absolute;
    top: 12%;
    left: 50%;
    z-index: 9500;
    width: min(36rem, calc(100% - 1.5rem));
    transform: translateX(-50%);
    border: 1px solid var(--accent);
    border-radius: 10px;
    background-color: var(--bg);
    box-shadow: 10px 10px 0 var(--os-shadow);
    animation: os-pop 0.14s ease-out;
}

.os-launcher[hidden] {
    display: none;
}

.os-search {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0.9rem 1rem;
    border: 0;
    border-bottom: 1px dashed var(--accent);
    border-radius: 10px 10px 0 0;
    background: none;
    color: var(--text);
    font: inherit;
    font-size: 1rem;
}

.os-search:focus {
    outline: none;
}

.os-results {
    max-height: min(24rem, 55vh);
    margin: 0;
    padding: 0.35rem;
    overflow-y: auto;
    list-style: none;
}

.os-result {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin: 0;
    padding: 0.4rem 0.55rem;
    border-radius: 6px;
    cursor: pointer;
}

.os-result[aria-selected="true"] {
    background-color: color-mix(in srgb, var(--accent) 16%, transparent);
}

.os-result .os-tile {
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 8px;
    box-shadow: none;
}

.os-result-text {
    flex: 1;
    min-width: 0;
}

.os-result-name {
    display: block;
    font-weight: 700;
}

.os-result-desc {
    display: block;
    overflow: hidden;
    color: var(--text-light);
    font-size: 0.75rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.os-result-kind {
    flex: none;
    padding: 0.05rem 0.4rem;
    border: 1px dashed var(--border);
    border-radius: 999px;
    color: var(--text-light);
    font-size: 0.7rem;
}

.os-result-kind[data-kind="window"] {
    border-style: solid;
    border-color: var(--accent);
    color: var(--accent);
}

.os-empty {
    padding: 1rem;
    color: var(--text-light);
    text-align: center;
}

/* --- boot ------------------------------------------------------------------ */

.os-boot {
    position: absolute;
    inset: 0;
    z-index: 9900;
    padding: 1.2rem 1.4rem;
    background-color: #0b0d0c;
    color: #b8f5c8;
    font-size: 0.85rem;
    line-height: 1.7;
    white-space: pre;
    overflow: hidden;
    cursor: pointer;
    transition: opacity 0.35s ease;
}

.os-boot.is-done {
    opacity: 0;
    pointer-events: none;
}

.os-boot-line {
    animation: os-type 0.2s steps(12) both;
}

.os-boot-skip {
    position: absolute;
    right: 1.2rem;
    bottom: 1rem;
    opacity: 0.5;
}

.os-boot-cursor::after {
    content: "▋";
    animation: os-blink 0.8s steps(1) infinite;
}

@keyframes os-type {
    from { clip-path: inset(0 100% 0 0); }
}

@keyframes os-blink {
    50% { opacity: 0; }
}

/* --- phone ------------------------------------------------------------------
   No floating windows on a phone: the desktop becomes a home screen and every
   window a full-screen sheet with a back button. */

.os-root.is-phone .os-screen {
    height: 78svh;
}

.os-root.is-phone .os-icons {
    grid-auto-flow: row;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: none;
    grid-auto-rows: 6.8rem;
    grid-auto-columns: auto;
    overflow-y: auto;
}

.os-root.is-phone .os-win {
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    min-width: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    animation-name: os-slide;
}

.os-root.is-phone .os-titlebar {
    border-radius: 0;
    cursor: default;
}

.os-root.is-phone .os-lights,
.os-root.is-phone .os-grip,
.os-root.is-phone .os-kbd,
.os-root.is-phone #os-full {
    display: none;
}

.os-root.is-phone .os-back {
    display: block;
    margin: 0;
    padding: 0 0.4rem;
    border: 0;
    background: none;
    color: var(--accent);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.os-root.is-phone .os-wallmark {
    font-size: 3.5rem;
}

@keyframes os-slide {
    from { transform: translateX(100%); }
}

/* --- motion ---------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .os-win,
    .os-win.is-closing,
    .os-launcher,
    .os-boot-line,
    .os-loading .os-tile,
    .os-icon .os-tile {
        animation: none;
        transition: none;
    }
}