/* --- Styling fonts --- */

/* Bricolage Grotesque */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&display=swap');

/* DynaPuff */
@import url('https://fonts.googleapis.com/css2?family=DynaPuff:wght@400..700&display=swap');

/* Domine */
@import url('https://fonts.googleapis.com/css2?family=Domine:wght@400..700&display=swap');

/* Climate Crisis */
@import url('https://fonts.googleapis.com/css2?family=Climate+Crisis&display=swap');

/* JetBrains Mono */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@100..800&display=swap');

/* DotGothic16 (400) */
@import url('https://fonts.googleapis.com/css2?family=DotGothic16&display=swap');

/* Playpen Sans */
@import url('https://fonts.googleapis.com/css2?family=Playpen+Sans:wght@100..800&display=swap');

/* Jaro */
@import url('https://fonts.googleapis.com/css2?family=Jaro:opsz@6..72&display=swap');

/* Doto */
@import url('https://fonts.googleapis.com/css2?family=Doto:wght@400;700&display=swap');

/* Nunito */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200..900&display=swap');

/* Open Runde */
@font-face {
    font-family: 'Open Runde';
    font-style: normal;
    font-weight: 400;
    src: url('https://cdn.jsdelivr.net/gh/lauridskern/open-runde@main/src/web/OpenRunde-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Open Runde';
    font-style: normal;
    font-weight: 500;
    src: url('https://cdn.jsdelivr.net/gh/lauridskern/open-runde@main/src/web/OpenRunde-Medium.woff2') format('woff2');
}

@font-face {
    font-family: 'Open Runde';
    font-style: normal;
    font-weight: 700;
    src: url('https://cdn.jsdelivr.net/gh/lauridskern/open-runde@main/src/web/OpenRunde-Semibold.woff2') format('woff2');
}

@font-face {
    font-family: 'Open Runde';
    font-style: normal;
    font-weight: 800;
    src: url('https://cdn.jsdelivr.net/gh/lauridskern/open-runde@main/src/web/OpenRunde-Bold.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter Numeric';
    src: url('assets/fonts/InterNumeric.ttf') format('truetype-variations');
    font-weight: 100 900;
    /* Define the supported variable weight range */
    font-style: normal;
}

.splash-screen {
    z-index: 9999999999999 !important;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 5s ease, filter 1s ease !important;
}

/* --- Loading Screen Styles --- */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(10px);
    background-color: var(--search-background);
    z-index: 999999999999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10%;
    opacity: 1;
    transition: opacity 0.8s ease-out, filter 0.2s ease-out, backdrop-filter 0.2s ease-out, transform 1s ease-out, background-color 2s ease, color 2s ease !important;
}

.loading-overlay.hidden {
    opacity: 0;
    pointer-events: none;
    filter: blur(5px);
    backdrop-filter: blur(0px);
    transform: scale(2);
    transition: opacity 0.8s ease-out, filter 0.2s ease-out, backdrop-filter 0.2s ease-out, transform 1s ease-out, background-color 2s ease, color 2s ease !important;
}

.boot-help {
    position: fixed;
    bottom: 40px;
    color: var(--secondary-text-color);
    background-color: transparent;
    padding: 8px 10px;
    font-family: 'Inter', sans-serif;
    display: flex;
    text-align: right;
    align-items: center;
    /* Keeps the image and text aligned */
    gap: 8px;
    /* Adds spacing between image and text */
    cursor: pointer;
}

/* Disable native focus for all elements to prevent browser interference */
:focus {
    outline: none !important;
}

:root {
    --edge-refraction-filter: url('#edge-refraction-only');
    --sun-shadow: 0 0 0 0 transparent;

    /* Dark Theme (Default) Variables */
    --background-mono-dark: #1c1c1c;
    --background-pure-dark: #000000;
    --background-color-dark: #1c1c1c;
    --background-color-dark-tr: rgba(28, 28, 28, 0.7);
    --text-color-dark: #f9f9f9;
    --secondary-text-color-dark: rgba(255, 255, 255, 0.7);
    --accent-dark: rgba(255, 255, 255, 0.7);
    --tonal-dark: rgba(255, 255, 255, 0.7);
    --modal-background-dark: rgba(51, 51, 51, 0.8);
    --modal-transparent-dark: rgba(51, 51, 51, 0.7);
    --search-background-dark: rgba(51, 51, 51, 0.5);
    --dark-overlay: rgba(51, 51, 51, 0.2);
    --dark-transparent: rgba(255, 255, 255, 0.1);
    --glass-border-dark: rgba(100, 100, 100, 0.2);

    /* Light Theme Variables */
    --background-mono-light: #f0f0f0;
    --background-pure-light: #ffffff;
    --background-color-light: #f0f0f0;
    --background-color-light-tr: rgba(240, 240, 240, 0.7);
    --text-color-light: #333333;
    --secondary-text-color-light: rgba(0, 0, 0, 0.7);
    --accent-light: rgba(0, 0, 0, 0.7);
    --tonal-light: rgba(0, 0, 0, 0.7);
    --modal-background-light: rgba(220, 220, 220, 0.8);
    --modal-transparent-light: rgba(240, 240, 240, 0.7);
    --search-background-light: rgba(220, 220, 220, 0.5);
    --light-overlay: rgba(220, 220, 220, 0.2);
    --light-transparent: rgba(255, 255, 255, 0.1);
    --glass-border-light: rgba(200, 200, 200, 0.2);

    /* High Contrast Dark Theme Variables */
    --background-color-dark-highcontrast: #1c1c1c;
    --background-color-dark-tr-highcontrast: #1c1c1c;
    --text-color-dark-highcontrast: #f9f9f9;
    --secondary-text-color-dark-highcontrast: #b3b3b3;
    --accent-dark-highcontrast: #b3b3b3;
    --tonal-dark-highcontrast: #b3b3b3;
    --modal-background-dark-highcontrast: #333333;
    --modal-transparent-dark-highcontrast: #333333;
    --search-background-dark-highcontrast: #333333;
    --dark-overlay-highcontrast: #1c1c1c;
    --dark-transparent-highcontrast: #000000;

    /* High Contrast Light Theme Variables */
    --background-color-light-highcontrast: #f0f0f0;
    --background-color-light-tr-highcontrast: #f0f0f0;
    --text-color-light-highcontrast: #333333;
    --secondary-text-color-light-highcontrast: #4d4d4d;
    --accent-light-highcontrast: #4d4d4d;
    --tonal-light-highcontrast: #4d4d4d;
    --modal-background-light-highcontrast: #dcdcdc;
    --modal-transparent-light-highcontrast: #f0f0f0;
    --search-background-light-highcontrast: #dcdcdc;
    --light-overlay-highcontrast: #f0f0f0;
    --light-transparent-highcontrast: #ffffff;

    /* Base Variables */
    --base-font-size: clamp(16px, 2% + 1rem, 24px);

    /* Default to Dark Theme */
    --background-mono: var(--background-mono-dark);
    --background-pure: var(--background-pure-dark);
    --background-color: var(--background-color-dark);
    --background-color-tr: var(--background-color-dark-tr);
    --background-color-tr-op: var(--background-color-light-tr);
    --text-color: var(--text-color-dark);
    --secondary-text-color: var(--secondary-text-color-dark);
    --accent: var(--accent-dark);
    --tonal: var(--tonal-dark);
    --modal-background: var(--modal-background-dark);
    --modal-transparent: var(--modal-transparent-dark);
    --search-background: var(--search-background-dark);
    --search-background-op: var(--search-background-light);
    --overlay-color: var(--dark-overlay);
    --overlay-color-op: var(--light-overlay);
    --transparent-color: var(--dark-transparent);
    --glass-border: var(--glass-border-dark);
}

body.light-theme {
    --background-mono: var(--background-mono-light);
    --background-pure: var(--background-pure-light);
    --background-color: var(--background-color-light);
    --background-color-tr: var(--background-color-light-tr);
    --background-color-tr-op: var(--background-color-dark-tr);
    --text-color: var(--text-color-light);
    --secondary-text-color: var(--secondary-text-color-light);
    --accent: var(--accent-light);
    --tonal: var(--tonal-light);
    --modal-background: var(--modal-background-light);
    --modal-transparent: var(--modal-transparent-light);
    --search-background: var(--search-background-light);
    --search-background-op: var(--search-background-dark);
    --overlay-color: var(--light-overlay);
    --overlay-color-op: var(--dark-overlay);
    --transparent-color: var(--light-transparent);
    --glass-border: var(--glass-border-light);
    --polygol-cursor-visible: var(--polygol-cursor-light);
}

/* For dark theme (default) with high contrast */
body.high-contrast:not(.light-theme) {
    --background-mono: var(--background-mono-dark);
    --background-pure: var(--background-pure-dark);
    --background-color-tr: var(--background-color-dark-tr-highcontrast);
    --background-color-tr-op: var(--background-color-light-tr-highcontrast);
    --secondary-text-color: var(--secondary-text-color-dark-highcontrast);
    --accent: var(--accent-dark-highcontrast);
    --tonal: var(--tonal-dark-highcontrast);
    --modal-background: var(--modal-background-dark-highcontrast);
    --modal-transparent: var(--modal-transparent-dark-highcontrast);
    --search-background: var(--search-background-dark-highcontrast);
    --search-background-op: var(--search-background-light-highcontrast);
    --overlay-color: var(--dark-overlay-highcontrast);
    --overlay-color-op: var(--light-overlay-highcontrast);
    --transparent-color: var(--dark-transparent-highcontrast);
    --glass-border: var(--accent-dark-highcontrast);
}

/* For light theme with high contrast */
body.high-contrast.light-theme {
    --background-mono: var(--background-mono-light);
    --background-pure: var(--background-pure-light);
    --background-color-tr: var(--background-color-light-tr-highcontrast);
    --background-color-tr-op: var(--background-color-dark-tr-highcontrast);
    --secondary-text-color: var(--secondary-text-color-light-highcontrast);
    --accent: var(--accent-light-highcontrast);
    --tonal: var(--tonal-light-highcontrast);
    --modal-background: var(--modal-background-light-highcontrast);
    --modal-transparent: var(--modal-transparent-light-highcontrast);
    --search-background: var(--search-background-light-highcontrast);
    --search-background-op: var(--search-background-dark-highcontrast);
    --overlay-color: var(--light-overlay-highcontrast);
    --overlay-color-op: var(--dark-overlay-highcontrast);
    --transparent-color: var(--light-transparent-highcontrast);
    --glass-border: var(--accent-light-highcontrast);
}

html.trans-off {
    /* Dark Theme (Default) Variables */
    --background-mono-dark: #1c1c1c;
    --background-pure-dark: #000000;
    --background-color-dark: #1c1c1c;
    --background-color-dark-tr: rgba(28, 28, 28, 0.7);
    --text-color-dark: #f9f9f9;
    --secondary-text-color-dark: rgba(255, 255, 255, 1);
    --accent-dark: #f9f9f9;
    --tonal-dark: #f9f9f9;
    --modal-background-dark: rgba(51, 51, 51, 1);
    --modal-transparent-dark: rgba(51, 51, 51, 1);
    --search-background-dark: rgba(40, 40, 40, 1);
    --dark-overlay: rgba(51, 51, 51, 0.6);
    --dark-transparent: rgba(71, 71, 71, 1);
    --glass-border-dark: rgba(100, 100, 100, 0.2);

    /* Light Theme Variables */
    --background-mono-light: #f0f0f0;
    --background-pure-light: #ffffff;
    --background-color-light: #f0f0f0;
    --background-color-light-tr: rgba(240, 240, 240, 0.7);
    --text-color-light: #333333;
    --secondary-text-color-light: rgba(0, 0, 0, 1);
    --accent-light: #333333;
    --tonal-light: #333333;
    --modal-background-light: rgba(220, 220, 220, 1);
    --modal-transparent-light: rgba(240, 240, 240, 1);
    --search-background-light: rgba(230, 230, 230, 1);
    --light-overlay: rgba(220, 220, 220, 0.6);
    --light-transparent: rgba(230, 230, 230, 1);
    --glass-border-light: rgba(200, 200, 200, 0.2);
}

/* Universal backdrop-filter removal for high contrast */
body.high-contrast *:not(#brightness-overlay):not(#temperature-overlay):not(#a11y-overlay) {
    backdrop-filter: none !important;
}

body.glass-effects-disabled {
    --edge-refraction-filter: blur(17.5px);
    /* Frosted glass appearance */
}

body.high-contrast .persistent-clock {
    color: var(--text-color);
}

body.high-contrast #status-indicator .material-symbols-rounded {
    color: var(--text-color);
}

body.high-contrast .status-dot {
    background-color: var(--accent);
    backdrop-filter: none;
}

body.high-contrast .nav-pill {
    background-color: var(--text-color);
}

body.high-contrast .nav-btn-small .material-symbols-rounded {
    color: var(--text-color);
}

body.high-contrast .info.glass-effect .date,
body.high-contrast .clock.glass-effect>*,
body.high-contrast .info.dynamic-fill-effect .date,
body.high-contrast .clock.dynamic-fill-effect>* {
    color: var(--accent) !important;
    background: none !important;
    /* Ensure no other backgrounds interfere */
    -webkit-mask-image: none;
    -webkit-mask-clip: none;
    -webkit-mask-composite: none;
    mask-image: none;
    mask-composite: none;
    backdrop-filter: none;
}

* {
    transition: all 0.3s cubic-bezier(.2, 1.3, .64, 1) !important;
    /* Temporary */
    -webkit-tap-highlight-color: transparent;
}

*::-webkit-scrollbar {
    width: 8px;
    /* Thin scrollbar */
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background-color: var(--tonal);
    border-radius: 50px;
}

/* For all clickable elements */
[onclick],
button,
a,
input[type="button"],
input[type="submit"],
.clickable {
    cursor: pointer;
    transform: scale(1);
    transition: transform 0.3s cubic-bezier(.2, 1.3, .64, 1), filter 0.3s cubic-bezier(.2, 1.3, .64, 1);
}

/* Active effect (when clicking down) */
[onclick]:active,
button:active,
a:active,
input[type="button"]:active,
input[type="submit"]:active,
.clickable:active {
    transform: scale(1.1);
    filter: brightness(1.5);
    transition: transform 0.3s cubic-bezier(.2, 1.3, .64, 1), filter 0.3s cubic-bezier(.2, 1.3, .64, 1);
}

[onclick]:hover:not(:active),
button:hover:not(:active),
a:hover:not(:active),
input[type="button"]:hover:not(:active),
input[type="submit"]:hover:not(:active),
.clickable:hover:not(:active) {
    transform: scale(1.01);
    filter: brightness(1.25);
    transition: transform 0.3s cubic-bezier(.2, 1.3, .64, 1), filter 0.3s cubic-bezier(.2, 1.3, .64, 1);
}

html {
    overscroll-behavior: none;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--background-color);
    background-image: none !important;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	margin: 0;
	transition: background-color 0.3s, color 0.3s, background-image 0.5s;
	color: var(--text-color);
	overflow: hidden;
	user-select: none;
	overscroll-behavior: none;
	touch-action: pan-x pan-y;
	/* Set the default value on the body element */
	--bg-transform-scale: 1.05; 
}

body::before,
#background-video {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    transition: background-color 0.3s, color 0.3s, background-image 0.5s, filter 1s !important;
    background-image: var(--bg-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* Use the variable inherited from the body */
    transform: scale(var(--bg-transform-scale));
    filter: var(--wallpaper-filter, none);
    /* Use the CSS custom property */
}

body:not(.reduce-animations)::before,
#background-video:not(.reduce-animations),
#depth-layer:not(.reduce-animations) {
    transition: background-color 0.3s, color 0.3s, background-image 0.5s linear(0 0%, 0 1.8%, 0.01 3.6%, 0.03 6.35%, 0.07 9.1%, 0.13 11.4%, 0.19 13.4%, 0.27 15%, 0.34 16.1%, 0.54 18.35%, 0.66 20.6%, 0.72 22.4%, 0.77 24.6%, 0.81 27.3%, 0.85 30.4%, 0.88 35.1%, 0.92 40.6%, 0.94 47.2%, 0.96 55%, 0.98 64%, 0.99 74.4%, 1 86.4%, 1 100%), filter 1s, transform 1s linear(0 0%, 0 1.8%, 0.01 3.6%, 0.03 6.35%, 0.07 9.1%, 0.13 11.4%, 0.19 13.4%, 0.27 15%, 0.34 16.1%, 0.54 18.35%, 0.66 20.6%, 0.72 22.4%, 0.77 24.6%, 0.81 27.3%, 0.85 30.4%, 0.88 35.1%, 0.92 40.6%, 0.94 47.2%, 0.96 55%, 0.98 64%, 0.99 74.4%, 1 86.4%, 1 100%) !important
}

/* Add object-fit for video specifically */
#background-video {
    object-fit: cover;
}

#depth-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    /* Let clicks pass through to widgets */
    z-index: 5;
    /* Above Clock/Widgets, below Apps/Modals */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: background-color 0.3s, color 0.3s, background-image 0.5s, filter 1s !important;
    /* Match the main background transform for animations */
    transform: scale(var(--bg-transform-scale));
    filter: var(--wallpaper-filter, none) drop-shadow(0 10px 20px var(--search-background-dark));
    /* Use the CSS custom property */
}

#time-of-day-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    /* Just above background */
    pointer-events: none;
    mix-blend-mode: color-burn;
    transition: background-color 3s ease, opacity 3s ease;
    opacity: 0;
}

#vignette-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    /* Below depth layer, environment, and UI */
    background: radial-gradient(circle, transparent 50%, rgba(0, 0, 0, 0.85) 150%);
    transition: opacity 0.3s ease;
    opacity: 0;
}

/* 3. Environment Layer (Rain/Snow via Pixi.js) */
#environment-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 4;
    /* Above tint, below depth */
    pointer-events: none;
    filter: blur(0px);
    transition: filter 2s ease;
}

#environment-layer canvas {
    display: block;
    width: 100%;
    height: 100%;
}

body.heavy-weather #background-video,
body.heavy-weather::before {
    filter: blur(3px) !important;
    /* Simulate focus on rain */
}

.force-hide {
    display: none !important;
    content-visibility: hidden !important;
}

/* Disabled
body[style*="background-image"] .clock {
    text-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

body[style*="background-image"] .date,
body[style*="background-image"] .info {
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

body.light-theme[style*="background-image"] .clock {
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
}

body.light-theme[style*="background-image"] .date,
body.light-theme[style*="background-image"] .info {
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}
*/

.material-symbols-rounded {
    font-variation-settings:
        'FILL' 1,
        'wght' 700,
        'GRAD' 0,
        'opsz' 24;
    vertical-align: middle;
}

.loading-spinner {
    width: 24px;
    height: 24px;
    aspect-ratio: 1/1;
    color: var(--text-color);
}

.loading-spinner-ind {
    transform-origin: 50% 50%;
    animation: loading-spinner-ind-rotate 4998ms infinite;
    will-change: transform, clip-path;
    --_polygon-soft-burst: polygon(59.28% 10.04%, 60.01% 11.05%, 60.92% 11.86%, 61.99% 12.44%, 63.15% 12.76%, 64.37% 12.81%, 65.59% 12.57%, 66.75% 12.12%, 67.90% 11.66%, 69.04% 11.20%, 70.18% 10.74%, 71.32% 10.28%, 72.46% 9.83%, 73.60% 9.37%, 74.75% 8.91%, 76.01% 8.58%, 77.25% 8.56%, 78.43% 8.82%, 79.51% 9.33%, 80.44% 10.06%, 81.19% 10.98%, 81.72% 12.06%, 81.98% 13.28%, 81.96% 14.56%, 81.87% 15.78%, 81.77% 17.01%, 81.68% 18.24%, 81.59% 19.46%, 81.50% 20.69%, 81.41% 21.92%, 81.32% 23.14%, 81.32% 24.39%, 81.60% 25.58%, 82.15% 26.65%, 82.93% 27.57%, 83.91% 28.30%, 85.06% 28.79%, 86.27% 29.09%, 87.46% 29.38%, 88.66% 29.67%, 89.85% 29.96%, 91.05% 30.25%, 92.24% 30.54%, 93.44% 30.83%, 94.65% 31.13%, 95.85% 31.62%, 96.85% 32.35%, 97.62% 33.27%, 98.16% 34.32%, 98.46% 35.47%, 98.48% 36.66%, 98.22% 37.84%, 97.67% 38.97%, 96.87% 39.97%, 96.07% 40.90%, 95.27% 41.84%, 94.47% 42.77%, 93.67% 43.70%, 92.87% 44.64%, 92.07% 45.57%, 91.27% 46.51%, 90.54% 47.53%, 90.09% 48.67%, 89.92% 49.86%, 90.03% 51.06%, 90.42% 52.22%, 91.09% 53.27%, 91.89% 54.21%, 92.70% 55.15%, 93.50% 56.08%, 94.30% 57.01%, 95.10% 57.95%, 95.90% 58.88%, 96.70% 59.82%, 97.51% 60.79%, 98.13% 61.90%, 98.45% 63.07%, 98.48% 64.26%, 98.25% 65.42%, 97.76% 66.50%, 97.03% 67.45%, 96.08% 68.22%, 94.93% 68.77%, 93.70% 69.09%, 92.50% 69.38%, 91.31% 69.67%, 90.11% 69.96%, 88.92% 70.25%, 87.72% 70.54%, 86.53% 70.83%, 85.33% 71.12%, 84.14% 71.56%, 83.12% 72.24%, 82.30% 73.12%, 81.70% 74.17%, 81.36% 75.33%, 81.30% 76.58%, 81.39% 77.80%, 81.48% 79.03%, 81.57% 80.26%, 81.66% 81.48%, 81.75% 82.71%, 81.85% 83.94%, 81.94% 85.16%, 82.00% 86.43%, 81.80% 87.67%, 81.33% 88.78%, 80.62% 89.74%, 79.72% 90.52%, 78.67% 91.08%, 77.51% 91.39%, 76.28% 91.44%, 75.02% 91.18%, 73.85% 90.72%, 72.71% 90.26%, 71.57% 89.80%, 70.42% 89.34%, 69.28% 88.88%, 68.14% 88.42%, 67.00% 87.96%, 65.85% 87.50%, 64.64% 87.21%, 63.41% 87.20%, 62.23% 87.46%, 61.14% 87.98%, 60.19% 88.74%, 59.42% 89.72%, 58.77% 90.76%, 58.11% 91.81%, 57.46% 92.85%, 56.80% 93.89%, 56.15% 94.93%, 55.49% 95.97%, 54.84% 97.01%, 54.13% 98.07%, 53.22% 98.94%, 52.17% 99.55%, 51.03% 99.91%, 49.84% 100.00%, 48.66% 99.83%, 47.54% 99.41%, 46.52% 98.72%, 45.67% 97.77%, 44.99% 96.72%, 44.34% 95.67%, 43.68% 94.63%, 43.03% 93.59%, 42.37% 92.55%, 41.72% 91.51%, 41.06% 90.47%, 40.40% 89.42%, 39.57% 88.50%, 38.58% 87.80%, 37.46% 87.36%, 36.26% 87.17%, 35.03% 87.26%, 33.83% 87.64%, 32.69% 88.09%, 31.55% 88.55%, 30.41% 89.01%, 29.27% 89.47%, 28.13% 89.93%, 26.99% 90.39%, 25.85% 90.85%, 24.64% 91.28%, 23.39% 91.46%, 22.17% 91.33%, 21.04% 90.94%, 20.02% 90.32%, 19.17% 89.49%, 18.53% 88.48%, 18.13% 87.33%, 18.02% 86.06%, 18.11% 84.82%, 18.20% 83.59%, 18.29% 82.36%, 18.38% 81.14%, 18.47% 79.91%, 18.56% 78.68%, 18.65% 77.46%, 18.73% 76.22%, 18.59% 74.99%, 18.17% 73.85%, 17.51% 72.85%, 16.62% 72.02%, 15.55% 71.41%, 14.35% 71.04%, 13.15% 70.75%, 11.96% 70.46%, 10.76% 70.17%, 9.57% 69.88%, 8.37% 69.59%, 7.18% 69.30%, 5.98% 69.01%, 4.74% 68.64%, 3.64% 68.02%, 2.76% 67.20%, 2.09% 66.20%, 1.68% 65.10%, 1.52% 63.92%, 1.63% 62.73%, 2.04% 61.57%, 2.75% 60.49%, 3.55% 59.55%, 4.35% 58.62%, 5.15% 57.68%, 5.95% 56.75%, 6.75% 55.81%, 7.55% 54.88%, 8.35% 53.95%, 9.15% 52.99%, 9.74% 51.90%, 10.05% 50.72%, 10.08% 49.52%, 9.83% 48.34%, 9.30% 47.23%, 8.52% 46.24%, 7.72% 45.31%, 6.92% 44.37%, 6.12% 43.44%, 5.32% 42.50%, 4.52% 41.57%, 3.72% 40.64%, 2.92% 39.70%, 2.16% 38.66%, 1.69% 37.51%, 1.52% 36.32%, 1.62% 35.14%, 1.98% 34.01%, 2.59% 32.99%, 3.43% 32.12%, 4.49% 31.46%, 5.72% 31.04%, 6.92% 30.75%, 8.11% 30.46%, 9.31% 30.17%, 10.50% 29.88%, 11.70% 29.59%, 12.90% 29.30%, 14.09% 29.01%, 15.30% 28.68%, 16.41% 28.12%, 17.33% 27.33%, 18.05% 26.36%, 18.52% 25.25%, 18.73% 24.04%, 18.67% 22.80%, 18.58% 21.57%, 18.49% 20.34%, 18.40% 19.11%, 18.31% 17.89%, 18.22% 16.66%, 18.13% 15.43%, 18.04% 14.21%, 18.08% 12.92%, 18.42% 11.74%, 19.02% 10.70%, 19.82% 9.83%, 20.81% 9.16%, 21.92% 8.72%, 23.12% 8.53%, 24.37% 8.64%, 25.60% 9.04%, 26.74% 9.50%, 27.88% 9.96%, 29.02% 10.42%, 30.16% 10.87%, 31.31% 11.33%, 32.45% 11.79%, 33.59% 12.25%, 34.77% 12.67%, 35.99% 12.82%, 37.20% 12.69%, 38.34% 12.30%, 39.37% 11.66%, 40.24% 10.78%, 40.92% 9.74%, 41.58% 8.70%, 42.23% 7.66%, 42.89% 6.62%, 43.54% 5.58%, 44.20% 4.54%, 44.85% 3.50%, 45.51% 2.45%, 45.51% 2.45%, 46.32% 1.45%, 47.31% 0.71%, 48.41% 0.22%, 49.58% 0.00%, 50.77% 0.04%, 51.93% 0.33%, 53.01% 0.89%, 53.95% 1.71%, 54.70% 2.75%, 55.35% 3.79%, 56.01% 4.83%, 56.66% 5.87%, 57.32% 6.91%, 57.97% 7.96%, 58.63% 9.00%);
    --_polygon-7-sided-cookie: polygon(62.26% 4.67%, 62.96% 5.21%, 63.66% 5.81%, 64.65% 6.68%, 65.51% 7.42%, 66.32% 8.08%, 67.18% 8.70%, 68.07% 9.27%, 68.98% 9.79%, 69.92% 10.27%, 70.88% 10.70%, 71.87% 11.08%, 72.87% 11.41%, 73.89% 11.69%, 74.87% 11.90%, 76.12% 12.13%, 77.32% 12.34%, 78.17% 12.52%, 79.09% 12.75%, 80.13% 13.07%, 81.14% 13.44%, 82.12% 13.86%, 83.08% 14.32%, 84.00% 14.83%, 84.89% 15.39%, 85.75% 15.99%, 86.58% 16.63%, 87.37% 17.31%, 88.13% 18.03%, 88.84% 18.78%, 89.52% 19.57%, 90.16% 20.39%, 90.75% 21.24%, 91.30% 22.12%, 91.81% 23.04%, 92.28% 23.97%, 92.69% 24.93%, 93.06% 25.92%, 93.38% 26.93%, 93.64% 27.95%, 93.86% 29.00%, 94.02% 30.06%, 94.13% 31.14%, 94.18% 32.23%, 94.18% 33.03%, 94.14% 34.05%, 94.07% 35.47%, 94.04% 36.46%, 94.05% 37.52%, 94.12% 38.57%, 94.24% 39.62%, 94.42% 40.66%, 94.65% 41.69%, 94.93% 42.71%, 95.26% 43.71%, 95.64% 44.69%, 96.07% 45.66%, 96.51% 46.51%, 97.17% 47.74%, 97.69% 48.72%, 98.06% 49.45%, 98.47% 50.40%, 98.86% 51.41%, 99.18% 52.44%, 99.45% 53.47%, 99.67% 54.51%, 99.83% 55.55%, 99.94% 56.60%, 100.00% 57.65%, 100.00% 58.69%, 99.95% 59.73%, 99.85% 60.77%, 99.69% 61.80%, 99.49% 62.82%, 99.23% 63.83%, 98.92% 64.82%, 98.57% 65.80%, 98.16% 66.76%, 97.71% 67.70%, 97.20% 68.62%, 96.65% 69.51%, 96.05% 70.38%, 95.41% 71.23%, 94.72% 72.04%, 93.98% 72.82%, 93.19% 73.56%, 92.41% 74.24%, 91.77% 74.74%, 90.87% 75.39%, 89.74% 76.21%, 88.98% 76.80%, 88.17% 77.48%, 87.40% 78.20%, 86.66% 78.96%, 85.97% 79.76%, 85.32% 80.58%, 84.71% 81.45%, 84.15% 82.34%, 83.63% 83.26%, 83.16% 84.21%, 82.76% 85.12%, 82.21% 86.43%, 81.80% 87.35%, 81.45% 88.08%, 80.94% 89.04%, 80.37% 89.97%, 79.76% 90.85%, 79.12% 91.70%, 78.43% 92.51%, 77.71% 93.28%, 76.95% 94.01%, 76.16% 94.69%, 75.33% 95.33%, 74.48% 95.93%, 73.60% 96.49%, 72.69% 97.00%, 71.76% 97.46%, 70.81% 97.87%, 69.83% 98.24%, 68.84% 98.56%, 67.83% 98.82%, 66.81% 99.04%, 65.78% 99.20%, 64.73% 99.31%, 63.67% 99.37%, 62.61% 99.37%, 61.54% 99.32%, 60.47% 99.21%, 59.40% 99.05%, 58.48% 98.86%, 57.63% 98.64%, 56.44% 98.31%, 55.23% 97.98%, 54.26% 97.74%, 53.22% 97.55%, 52.17% 97.41%, 51.12% 97.33%, 50.06% 97.30%, 49.01% 97.32%, 47.96% 97.40%, 46.91% 97.53%, 45.87% 97.72%, 44.86% 97.95%, 43.74% 98.26%, 42.49% 98.61%, 41.61% 98.84%, 40.73% 99.02%, 39.66% 99.20%, 38.59% 99.31%, 37.52% 99.37%, 36.45% 99.37%, 35.40% 99.32%, 34.35% 99.22%, 33.31% 99.06%, 32.29% 98.85%, 31.28% 98.59%, 30.29% 98.28%, 29.31% 97.92%, 28.35% 97.51%, 27.42% 97.05%, 26.51% 96.55%, 25.63% 96.00%, 24.77% 95.41%, 23.94% 94.77%, 23.15% 94.09%, 22.38% 93.37%, 21.66% 92.61%, 20.96% 91.80%, 20.31% 90.96%, 19.70% 90.08%, 19.13% 89.16%, 18.61% 88.20%, 18.24% 87.44%, 17.85% 86.56%, 17.31% 85.28%, 16.89% 84.33%, 16.43% 83.37%, 15.92% 82.45%, 15.36% 81.55%, 14.75% 80.69%, 14.11% 79.85%, 13.42% 79.05%, 12.69% 78.29%, 11.93% 77.56%, 11.12% 76.88%, 10.35% 76.28%, 9.26% 75.49%, 8.33% 74.81%, 7.66% 74.30%, 6.90% 73.65%, 6.12% 72.91%, 5.37% 72.13%, 4.67% 71.33%, 4.02% 70.49%, 3.42% 69.62%, 2.86% 68.73%, 2.35% 67.81%, 1.89% 66.87%, 1.48% 65.92%, 1.12% 64.94%, 0.80% 63.95%, 0.54% 62.94%, 0.33% 61.92%, 0.17% 60.89%, 0.06% 59.86%, 0.00% 58.82%, 0.00% 57.77%, 0.05% 56.73%, 0.15% 55.68%, 0.31% 54.63%, 0.52% 53.59%, 0.78% 52.56%, 1.10% 51.54%, 1.48% 50.52%, 1.91% 49.53%, 2.26% 48.82%, 2.75% 47.88%, 3.43% 46.63%, 3.87% 45.77%, 4.31% 44.81%, 4.70% 43.83%, 5.04% 42.83%, 5.32% 41.81%, 5.56% 40.78%, 5.74% 39.75%, 5.87% 38.70%, 5.94% 37.64%, 5.96% 36.58%, 5.93% 35.62%, 5.87% 34.20%, 5.83% 33.14%, 5.82% 32.35%, 5.86% 31.27%, 5.96% 30.19%, 6.12% 29.12%, 6.33% 28.08%, 6.59% 27.05%, 6.90% 26.04%, 7.26% 25.05%, 7.67% 24.09%, 8.13% 23.15%, 8.63% 22.23%, 9.18% 21.35%, 9.77% 20.49%, 10.40% 19.67%, 11.08% 18.87%, 11.79% 18.12%, 12.54% 17.39%, 13.32% 16.71%, 14.15% 16.06%, 15.00% 15.46%, 15.89% 14.90%, 16.81% 14.38%, 17.76% 13.91%, 18.74% 13.49%, 19.75% 13.11%, 20.78% 12.79%, 21.74% 12.54%, 22.56% 12.37%, 23.71% 12.16%, 25.03% 11.92%, 25.98% 11.72%, 27.01% 11.44%, 28.01% 11.12%, 29.00% 10.75%, 29.96% 10.33%, 30.91% 9.85%, 31.82% 9.33%, 32.72% 8.77%, 33.58% 8.15%, 34.41% 7.50%, 35.21% 6.80%, 35.21% 6.80%, 36.24% 5.90%, 36.97% 5.28%, 37.64% 4.75%, 38.52% 4.12%, 39.44% 3.54%, 40.37% 3.01%, 41.32% 2.54%, 42.29% 2.12%, 43.28% 1.75%, 44.28% 1.43%, 45.29% 1.16%, 46.32% 0.95%, 47.35% 0.79%, 48.38% 0.68%, 49.42% 0.63%, 50.46% 0.63%, 51.50% 0.67%, 52.53% 0.78%, 53.56% 0.93%, 54.58% 1.14%, 55.60% 1.39%, 56.60% 1.71%, 57.59% 2.07%, 58.56% 2.48%, 59.52% 2.95%, 60.45% 3.47%, 61.37% 4.04%);
    --_polygon-pentagon: polygon(61.18% 5.13%, 62.02% 5.74%, 62.86% 6.35%, 63.70% 6.96%, 64.54% 7.58%, 65.38% 8.19%, 66.22% 8.80%, 67.07% 9.41%, 67.91% 10.02%, 68.75% 10.63%, 69.59% 11.24%, 70.43% 11.85%, 71.27% 12.47%, 72.11% 13.08%, 72.96% 13.69%, 73.80% 14.30%, 74.64% 14.91%, 75.48% 15.52%, 76.32% 16.13%, 77.16% 16.74%, 78.00% 17.36%, 78.85% 17.97%, 79.69% 18.58%, 80.53% 19.19%, 81.37% 19.80%, 82.21% 20.41%, 83.05% 21.02%, 83.89% 21.64%, 84.74% 22.25%, 85.58% 22.86%, 86.42% 23.47%, 87.26% 24.08%, 88.10% 24.69%, 88.94% 25.30%, 89.78% 25.91%, 90.62% 26.53%, 91.47% 27.14%, 92.31% 27.75%, 93.15% 28.41%, 93.95% 29.12%, 94.70% 29.85%, 95.40% 30.63%, 96.05% 31.44%, 96.66% 32.27%, 97.22% 33.14%, 97.73% 34.03%, 98.19% 34.95%, 98.60% 35.89%, 98.96% 36.85%, 99.27% 37.83%, 99.52% 38.82%, 99.72% 39.83%, 99.87% 40.84%, 99.96% 41.87%, 100.00% 42.90%, 99.98% 43.94%, 99.90% 44.98%, 99.77% 46.02%, 99.58% 47.05%, 99.32% 48.09%, 99.01% 49.11%, 98.69% 50.09%, 98.37% 51.08%, 98.05% 52.07%, 97.73% 53.06%, 97.41% 54.05%, 97.09% 55.04%, 96.76% 56.03%, 96.44% 57.02%, 96.12% 58.01%, 95.80% 59.00%, 95.48% 59.99%, 95.16% 60.97%, 94.84% 61.96%, 94.51% 62.95%, 94.19% 63.94%, 93.87% 64.93%, 93.55% 65.92%, 93.23% 66.91%, 92.91% 67.90%, 92.59% 68.89%, 92.26% 69.88%, 91.94% 70.87%, 91.62% 71.85%, 91.30% 72.84%, 90.98% 73.83%, 90.66% 74.82%, 90.34% 75.81%, 90.02% 76.80%, 89.69% 77.79%, 89.37% 78.78%, 89.05% 79.77%, 88.73% 80.76%, 88.41% 81.75%, 88.09% 82.73%, 87.77% 83.72%, 87.44% 84.71%, 87.11% 85.71%, 86.73% 86.71%, 86.30% 87.68%, 85.82% 88.61%, 85.29% 89.51%, 84.72% 90.38%, 84.10% 91.21%, 83.44% 92.00%, 82.74% 92.75%, 82.01% 93.47%, 81.23% 94.14%, 80.42% 94.77%, 79.58% 95.35%, 78.71% 95.89%, 77.81% 96.39%, 76.88% 96.83%, 75.93% 97.22%, 74.96% 97.57%, 73.96% 97.86%, 72.94% 98.10%, 71.91% 98.28%, 70.86% 98.40%, 69.80% 98.47%, 68.74% 98.48%, 67.70% 98.48%, 66.66% 98.48%, 65.62% 98.48%, 64.58% 98.48%, 63.54% 98.48%, 62.50% 98.48%, 61.46% 98.48%, 60.42% 98.48%, 59.38% 98.48%, 58.34% 98.48%, 57.30% 98.48%, 56.26% 98.48%, 55.22% 98.48%, 54.18% 98.48%, 53.14% 98.48%, 52.10% 98.48%, 51.06% 98.48%, 50.02% 98.48%, 48.98% 98.48%, 47.94% 98.48%, 46.90% 98.48%, 45.86% 98.48%, 44.82% 98.48%, 43.78% 98.48%, 42.74% 98.48%, 41.70% 98.48%, 40.66% 98.48%, 39.62% 98.48%, 38.58% 98.48%, 37.54% 98.48%, 36.50% 98.48%, 35.46% 98.48%, 34.42% 98.48%, 33.38% 98.48%, 32.34% 98.48%, 31.30% 98.48%, 30.24% 98.47%, 29.18% 98.41%, 28.13% 98.28%, 27.09% 98.10%, 26.08% 97.87%, 25.08% 97.58%, 24.11% 97.24%, 23.15% 96.85%, 22.22% 96.40%, 21.32% 95.91%, 20.45% 95.37%, 19.61% 94.79%, 18.80% 94.16%, 18.02% 93.49%, 17.28% 92.78%, 16.58% 92.03%, 15.92% 91.24%, 15.30% 90.41%, 14.73% 89.54%, 14.20% 88.64%, 13.71% 87.71%, 13.28% 86.75%, 12.90% 85.75%, 12.57% 84.75%, 12.25% 83.76%, 11.93% 82.77%, 11.60% 81.78%, 11.28% 80.79%, 10.96% 79.80%, 10.64% 78.82%, 10.32% 77.83%, 10.00% 76.84%, 9.68% 75.85%, 9.35% 74.86%, 9.03% 73.87%, 8.71% 72.88%, 8.39% 71.89%, 8.07% 70.90%, 7.75% 69.91%, 7.43% 68.92%, 7.10% 67.94%, 6.78% 66.95%, 6.46% 65.96%, 6.14% 64.97%, 5.82% 63.98%, 5.50% 62.99%, 5.18% 62.00%, 4.86% 61.01%, 4.53% 60.02%, 4.21% 59.03%, 3.89% 58.04%, 3.57% 57.06%, 3.25% 56.07%, 2.93% 55.08%, 2.61% 54.09%, 2.28% 53.10%, 1.96% 52.11%, 1.64% 51.12%, 1.32% 50.13%, 1.00% 49.14%, 0.69% 48.12%, 0.43% 47.09%, 0.24% 46.06%, 0.10% 45.02%, 0.02% 43.98%, 0.00% 42.94%, 0.03% 41.91%, 0.12% 40.88%, 0.27% 39.86%, 0.47% 38.86%, 0.72% 37.86%, 1.03% 36.89%, 1.38% 35.93%, 1.79% 34.99%, 2.25% 34.07%, 2.76% 33.17%, 3.32% 32.31%, 3.92% 31.47%, 4.58% 30.66%, 5.28% 29.88%, 6.03% 29.14%, 6.82% 28.44%, 7.66% 27.78%, 8.50% 27.16%, 9.34% 26.55%, 10.19% 25.94%, 11.03% 25.33%, 11.87% 24.71%, 12.71% 24.10%, 13.55% 23.49%, 14.39% 22.88%, 15.23% 22.27%, 16.08% 21.66%, 16.92% 21.05%, 17.76% 20.44%, 18.60% 19.82%, 19.44% 19.21%, 20.28% 18.60%, 21.12% 17.99%, 21.96% 17.38%, 22.81% 16.77%, 23.65% 16.16%, 24.49% 15.55%, 25.33% 14.93%, 26.17% 14.32%, 27.01% 13.71%, 27.85% 13.10%, 28.70% 12.49%, 29.54% 11.88%, 30.38% 11.27%, 31.22% 10.65%, 32.06% 10.04%, 32.90% 9.43%, 33.74% 8.82%, 34.59% 8.21%, 35.43% 7.60%, 36.27% 6.99%, 37.11% 6.38%, 37.95% 5.76%, 38.79% 5.15%, 38.79% 5.15%, 39.68% 4.55%, 40.58% 4.00%, 41.51% 3.50%, 42.46% 3.06%, 43.43% 2.68%, 44.41% 2.35%, 45.41% 2.07%, 46.41% 1.85%, 47.43% 1.69%, 48.45% 1.57%, 49.47% 1.52%, 50.49% 1.52%, 51.52% 1.57%, 52.54% 1.68%, 53.55% 1.84%, 54.56% 2.06%, 55.55% 2.34%, 56.53% 2.66%, 57.50% 3.05%, 58.45% 3.49%, 59.38% 3.98%, 60.29% 4.53%);
    --_polygon-pill: polygon(64.49% 0.65%, 65.49% 0.84%, 66.48% 1.05%, 67.48% 1.28%, 68.46% 1.54%, 69.44% 1.83%, 70.42% 2.13%, 71.39% 2.46%, 72.35% 2.81%, 73.30% 3.19%, 74.25% 3.59%, 75.19% 4.02%, 76.12% 4.47%, 77.05% 4.94%, 77.96% 5.43%, 78.87% 5.95%, 79.76% 6.50%, 80.64% 7.06%, 81.52% 7.66%, 82.38% 8.27%, 83.23% 8.91%, 84.06% 9.57%, 84.89% 10.26%, 85.70% 10.96%, 86.49% 11.70%, 87.28% 12.45%, 88.04% 13.23%, 88.78% 14.02%, 89.50% 14.83%, 90.19% 15.65%, 90.86% 16.48%, 91.51% 17.33%, 92.13% 18.18%, 92.73% 19.05%, 93.31% 19.93%, 93.86% 20.82%, 94.39% 21.72%, 94.89% 22.63%, 95.37% 23.55%, 95.83% 24.48%, 96.26% 25.42%, 96.67% 26.36%, 97.06% 27.32%, 97.42% 28.28%, 97.76% 29.24%, 98.07% 30.22%, 98.36% 31.20%, 98.63% 32.18%, 98.87% 33.17%, 99.09% 34.16%, 99.29% 35.16%, 99.46% 36.16%, 99.61% 37.16%, 99.73% 38.17%, 99.83% 39.18%, 99.91% 40.19%, 99.96% 41.20%, 99.99% 42.21%, 100.00% 43.23%, 99.98% 44.24%, 99.94% 45.25%, 99.88% 46.26%, 99.79% 47.27%, 99.68% 48.28%, 99.54% 49.29%, 99.38% 50.29%, 99.20% 51.29%, 98.99% 52.28%, 98.76% 53.27%, 98.50% 54.26%, 98.22% 55.24%, 97.92% 56.22%, 97.60% 57.19%, 97.25% 58.15%, 96.87% 59.11%, 96.48% 60.06%, 96.06% 61.00%, 95.61% 61.93%, 95.14% 62.86%, 94.65% 63.77%, 94.14% 64.68%, 93.60% 65.57%, 93.03% 66.46%, 92.45% 67.33%, 91.84% 68.20%, 91.20% 69.05%, 90.55% 69.89%, 89.86% 70.71%, 89.16% 71.53%, 88.43% 72.33%, 87.68% 73.11%, 86.93% 73.86%, 86.20% 74.59%, 85.47% 75.32%, 84.74% 76.06%, 84.00% 76.79%, 83.27% 77.52%, 82.54% 78.25%, 81.81% 78.99%, 81.07% 79.72%, 80.34% 80.45%, 79.61% 81.18%, 78.88% 81.92%, 78.14% 82.65%, 77.41% 83.38%, 76.68% 84.11%, 75.95% 84.85%, 75.21% 85.58%, 74.48% 86.31%, 73.75% 87.04%, 72.99% 87.79%, 72.21% 88.54%, 71.40% 89.27%, 70.59% 89.97%, 69.76% 90.65%, 68.92% 91.30%, 68.07% 91.93%, 67.20% 92.54%, 66.33% 93.12%, 65.44% 93.68%, 64.54% 94.22%, 63.64% 94.73%, 62.72% 95.22%, 61.79% 95.68%, 60.86% 96.12%, 59.91% 96.54%, 58.96% 96.93%, 58.01% 97.30%, 57.04% 97.65%, 56.07% 97.97%, 55.09% 98.27%, 54.11% 98.54%, 53.12% 98.79%, 52.13% 99.02%, 51.14% 99.22%, 50.14% 99.40%, 49.13% 99.56%, 48.13% 99.69%, 47.12% 99.80%, 46.11% 99.89%, 45.10% 99.95%, 44.09% 99.99%, 43.07% 100.00%, 42.06% 99.99%, 41.05% 99.96%, 40.04% 99.90%, 39.03% 99.82%, 38.02% 99.71%, 37.01% 99.59%, 36.01% 99.43%, 35.01% 99.26%, 34.01% 99.06%, 33.02% 98.83%, 32.03% 98.59%, 31.05% 98.32%, 30.07% 98.02%, 29.10% 97.70%, 28.13% 97.36%, 27.17% 97.00%, 26.22% 96.61%, 25.28% 96.20%, 24.34% 95.76%, 23.41% 95.30%, 22.49% 94.81%, 21.59% 94.31%, 20.69% 93.78%, 19.80% 93.22%, 18.92% 92.64%, 18.05% 92.04%, 17.20% 91.41%, 16.35% 90.76%, 15.52% 90.09%, 14.71% 89.39%, 13.90% 88.67%, 13.11% 87.92%, 12.34% 87.16%, 11.59% 86.37%, 10.86% 85.57%, 10.15% 84.76%, 9.47% 83.93%, 8.81% 83.10%, 8.18% 82.25%, 7.56% 81.38%, 6.98% 80.51%, 6.41% 79.62%, 5.87% 78.73%, 5.36% 77.82%, 4.87% 76.91%, 4.40% 75.98%, 3.95% 75.05%, 3.53% 74.11%, 3.13% 73.16%, 2.76% 72.20%, 2.41% 71.24%, 2.08% 70.27%, 1.78% 69.29%, 1.50% 68.31%, 1.25% 67.32%, 1.02% 66.33%, 0.81% 65.34%, 0.62% 64.34%, 0.46% 63.34%, 0.33% 62.33%, 0.21% 61.32%, 0.13% 60.31%, 0.06% 59.30%, 0.02% 58.29%, 0.00% 57.28%, 0.01% 56.26%, 0.04% 55.25%, 0.09% 54.24%, 0.16% 53.23%, 0.27% 52.22%, 0.39% 51.22%, 0.54% 50.21%, 0.71% 49.21%, 0.90% 48.21%, 1.12% 47.22%, 1.37% 46.23%, 1.63% 45.25%, 1.92% 44.27%, 2.24% 43.29%, 2.57% 42.33%, 2.94% 41.37%, 3.32% 40.41%, 3.73% 39.47%, 4.16% 38.53%, 4.62% 37.60%, 5.10% 36.68%, 5.60% 35.77%, 6.13% 34.87%, 6.68% 33.98%, 7.26% 33.10%, 7.85% 32.23%, 8.48% 31.37%, 9.12% 30.53%, 9.79% 29.70%, 10.49% 28.88%, 11.20% 28.07%, 11.94% 27.28%, 12.70% 26.51%, 13.43% 25.77%, 14.17% 25.04%, 14.90% 24.31%, 15.63% 23.58%, 16.36% 22.84%, 17.10% 22.11%, 17.83% 21.38%, 18.56% 20.65%, 19.29% 19.91%, 20.03% 19.18%, 20.76% 18.45%, 21.49% 17.72%, 22.22% 16.98%, 22.96% 16.25%, 23.69% 15.52%, 24.42% 14.79%, 25.15% 14.05%, 25.89% 13.32%, 26.62% 12.59%, 26.62% 12.59%, 27.40% 11.83%, 28.19% 11.09%, 29.00% 10.38%, 29.82% 9.69%, 30.66% 9.02%, 31.50% 8.38%, 32.36% 7.76%, 33.23% 7.17%, 34.11% 6.59%, 35.01% 6.05%, 35.91% 5.52%, 36.82% 5.02%, 37.74% 4.55%, 38.67% 4.09%, 39.61% 3.67%, 40.56% 3.26%, 41.51% 2.88%, 42.47% 2.52%, 43.44% 2.19%, 44.42% 1.88%, 45.40% 1.59%, 46.38% 1.33%, 47.37% 1.09%, 48.37% 0.87%, 49.36% 0.68%, 50.36% 0.51%, 51.37% 0.37%, 52.38% 0.25%, 53.38% 0.15%, 54.40% 0.08%, 55.41% 0.03%, 56.42% 0.00%, 57.43% 0.00%, 58.45% 0.02%, 59.46% 0.07%, 60.47% 0.14%, 61.48% 0.23%, 62.48% 0.35%, 63.49% 0.49%);
    --_polygon-very-sunny: polygon(60.04% 8.72%, 60.63% 9.70%, 61.23% 10.69%, 61.95% 11.60%, 62.77% 12.40%, 63.68% 13.07%, 64.66% 13.61%, 65.71% 14.02%, 66.81% 14.29%, 67.94% 14.41%, 69.08% 14.37%, 70.24% 14.18%, 71.35% 13.90%, 72.46% 13.62%, 73.56% 13.35%, 74.67% 13.07%, 75.78% 12.79%, 76.89% 12.51%, 78.06% 12.25%, 79.26% 12.15%, 80.42% 12.21%, 81.54% 12.42%, 82.60% 12.78%, 83.59% 13.28%, 84.51% 13.89%, 85.34% 14.62%, 86.08% 15.44%, 86.70% 16.36%, 87.20% 17.35%, 87.56% 18.41%, 87.79% 19.52%, 87.86% 20.68%, 87.76% 21.88%, 87.50% 23.05%, 87.23% 24.16%, 86.95% 25.27%, 86.67% 26.38%, 86.39% 27.49%, 86.11% 28.60%, 85.84% 29.71%, 85.63% 30.86%, 85.59% 32.01%, 85.70% 33.14%, 85.96% 34.24%, 86.36% 35.29%, 86.90% 36.28%, 87.57% 37.19%, 88.36% 38.01%, 89.27% 38.73%, 90.25% 39.34%, 91.23% 39.93%, 92.21% 40.52%, 93.19% 41.11%, 94.17% 41.69%, 95.15% 42.28%, 96.15% 42.89%, 97.13% 43.62%, 97.96% 44.45%, 98.65% 45.36%, 99.20% 46.35%, 99.60% 47.38%, 99.87% 48.46%, 100.00% 49.55%, 99.99% 50.66%, 99.83% 51.75%, 99.53% 52.82%, 99.10% 53.85%, 98.52% 54.82%, 97.80% 55.72%, 96.94% 56.53%, 95.94% 57.24%, 94.96% 57.83%, 93.98% 58.42%, 93.00% 59.00%, 92.02% 59.59%, 91.04% 60.18%, 90.06% 60.77%, 89.08% 61.39%, 88.19% 62.13%, 87.42% 62.98%, 86.78% 63.91%, 86.27% 64.91%, 85.90% 65.97%, 85.67% 67.08%, 85.59% 68.21%, 85.66% 69.36%, 85.89% 70.51%, 86.17% 71.62%, 86.45% 72.72%, 86.73% 73.83%, 87.00% 74.94%, 87.28% 76.05%, 87.56% 77.16%, 87.79% 78.36%, 87.85% 79.54%, 87.75% 80.69%, 87.50% 81.80%, 87.11% 82.85%, 86.58% 83.82%, 85.94% 84.72%, 85.19% 85.53%, 84.34% 86.23%, 83.40% 86.82%, 82.39% 87.29%, 81.32% 87.62%, 80.19% 87.81%, 79.02% 87.84%, 77.82% 87.70%, 76.67% 87.43%, 75.56% 87.15%, 74.45% 86.87%, 73.34% 86.59%, 72.23% 86.31%, 71.13% 86.04%, 70.01% 85.76%, 68.85% 85.60%, 67.71% 85.60%, 66.59% 85.75%, 65.50% 86.04%, 64.46% 86.48%, 63.49% 87.05%, 62.60% 87.74%, 61.80% 88.56%, 61.11% 89.50%, 60.51% 90.49%, 59.92% 91.47%, 59.34% 92.45%, 58.75% 93.43%, 58.16% 94.41%, 57.57% 95.39%, 56.94% 96.40%, 56.19% 97.34%, 55.33% 98.13%, 54.40% 98.79%, 53.40% 99.30%, 52.35% 99.68%, 51.27% 99.91%, 50.17% 100.00%, 49.07% 99.95%, 47.98% 99.76%, 46.92% 99.43%, 45.91% 98.96%, 44.95% 98.35%, 44.07% 97.59%, 43.29% 96.70%, 42.61% 95.69%, 42.03% 94.70%, 41.44% 93.72%, 40.85% 92.74%, 40.26% 91.76%, 39.68% 90.78%, 39.09% 89.80%, 38.43% 88.84%, 37.67% 87.98%, 36.80% 87.24%, 35.85% 86.63%, 34.83% 86.16%, 33.76% 85.82%, 32.64% 85.63%, 31.50% 85.58%, 30.35% 85.70%, 29.22% 85.95%, 28.11% 86.23%, 27.00% 86.51%, 25.89% 86.79%, 24.78% 87.06%, 23.67% 87.34%, 22.55% 87.62%, 21.35% 87.81%, 20.17% 87.84%, 19.03% 87.70%, 17.94% 87.41%, 16.90% 86.98%, 15.95% 86.42%, 15.07% 85.75%, 14.29% 84.97%, 13.61% 84.10%, 13.05% 83.15%, 12.61% 82.12%, 12.32% 81.03%, 12.17% 79.89%, 12.18% 78.72%, 12.37% 77.51%, 12.65% 76.38%, 12.92% 75.28%, 13.20% 74.17%, 13.48% 73.06%, 13.76% 71.95%, 14.04% 70.84%, 14.30% 69.71%, 14.42% 68.56%, 14.38% 67.42%, 14.20% 66.30%, 13.87% 65.23%, 13.40% 64.20%, 12.79% 63.25%, 12.06% 62.38%, 11.21% 61.60%, 10.25% 60.94%, 9.27% 60.36%, 8.29% 59.77%, 7.31% 59.18%, 6.33% 58.59%, 5.35% 58.01%, 4.37% 57.42%, 3.35% 56.75%, 2.45% 55.97%, 1.69% 55.10%, 1.07% 54.15%, 0.59% 53.13%, 0.25% 52.08%, 0.06% 50.99%, 0.00% 49.89%, 0.09% 48.79%, 0.31% 47.70%, 0.68% 46.65%, 1.18% 45.65%, 1.83% 44.72%, 2.62% 43.86%, 3.55% 43.10%, 4.56% 42.46%, 5.54% 41.87%, 6.52% 41.28%, 7.50% 40.70%, 8.48% 40.11%, 9.46% 39.52%, 10.45% 38.93%, 11.39% 38.24%, 12.22% 37.45%, 12.92% 36.56%, 13.50% 35.59%, 13.94% 34.56%, 14.25% 33.47%, 14.40% 32.35%, 14.41% 31.21%, 14.25% 30.05%, 13.98% 28.93%, 13.70% 27.82%, 13.42% 26.71%, 13.15% 25.61%, 12.87% 24.50%, 12.59% 23.39%, 12.32% 22.24%, 12.17% 21.04%, 12.19% 19.87%, 12.36% 18.74%, 12.69% 17.66%, 13.15% 16.65%, 13.74% 15.71%, 14.44% 14.86%, 15.24% 14.10%, 16.13% 13.45%, 17.10% 12.92%, 18.15% 12.52%, 19.25% 12.26%, 20.40% 12.15%, 21.58% 12.20%, 22.79% 12.43%, 23.89% 12.71%, 25.00% 12.98%, 26.11% 13.26%, 27.22% 13.54%, 28.33% 13.82%, 29.44% 14.10%, 30.58% 14.33%, 31.73% 14.41%, 32.87% 14.34%, 33.97% 14.12%, 35.04% 13.75%, 36.04% 13.25%, 36.98% 12.61%, 37.83% 11.85%, 38.57% 10.97%, 39.21% 10.00%, 39.79% 9.02%, 40.38% 8.03%, 40.97% 7.05%, 41.56% 6.07%, 42.14% 5.09%, 42.73% 4.11%, 42.73% 4.11%, 43.43% 3.11%, 44.24% 2.24%, 45.14% 1.51%, 46.10% 0.93%, 47.13% 0.49%, 48.20% 0.18%, 49.29% 0.02%, 50.39% 0.00%, 51.49% 0.12%, 52.56% 0.38%, 53.60% 0.78%, 54.59% 1.32%, 55.51% 2.01%, 56.34% 2.83%, 57.08% 3.79%, 57.69% 4.80%, 58.28% 5.78%, 58.87% 6.76%, 59.45% 7.74%);
    --_polygon-4-sided-cookie: polygon(63.83% 2.22%, 65.10% 1.70%, 66.36% 1.26%, 67.62% 0.89%, 68.88% 0.58%, 70.14% 0.34%, 71.39% 0.16%, 72.63% 0.05%, 73.86% 0.00%, 75.08% 0.01%, 76.28% 0.08%, 77.48% 0.21%, 78.66% 0.40%, 79.82% 0.63%, 80.97% 0.93%, 82.09% 1.27%, 83.20% 1.67%, 84.28% 2.11%, 85.34% 2.60%, 86.37% 3.14%, 87.38% 3.72%, 88.36% 4.35%, 89.31% 5.02%, 90.23% 5.73%, 91.12% 6.48%, 91.98% 7.26%, 92.80% 8.09%, 93.58% 8.94%, 94.32% 9.83%, 95.03% 10.76%, 95.70% 11.71%, 96.32% 12.69%, 96.90% 13.70%, 97.43% 14.74%, 97.92% 15.80%, 98.36% 16.88%, 98.76% 17.99%, 99.10% 19.12%, 99.38% 20.26%, 99.62% 21.43%, 99.80% 22.61%, 99.92% 23.80%, 99.99% 25.01%, 100.00% 26.23%, 99.94% 27.47%, 99.83% 28.71%, 99.65% 29.95%, 99.40% 31.21%, 99.09% 32.47%, 98.71% 33.73%, 98.26% 35.00%, 97.75% 36.25%, 97.26% 37.36%, 96.78% 38.47%, 96.30% 39.59%, 95.83% 40.72%, 95.42% 41.87%, 95.06% 43.03%, 94.76% 44.21%, 94.52% 45.40%, 94.33% 46.59%, 94.20% 47.79%, 94.12% 48.99%, 94.11% 50.19%, 94.14% 51.40%, 94.24% 52.60%, 94.39% 53.80%, 94.59% 54.99%, 94.85% 56.17%, 95.17% 57.34%, 95.55% 58.50%, 95.98% 59.65%, 96.45% 60.77%, 96.94% 61.89%, 97.42% 63.00%, 97.92% 64.15%, 98.41% 65.41%, 98.84% 66.68%, 99.20% 67.94%, 99.49% 69.20%, 99.71% 70.45%, 99.87% 71.70%, 99.97% 72.93%, 100.00% 74.16%, 99.97% 75.38%, 99.89% 76.58%, 99.75% 77.78%, 99.55% 78.95%, 99.30% 80.11%, 98.99% 81.25%, 98.63% 82.37%, 98.23% 83.47%, 97.77% 84.55%, 97.27% 85.60%, 96.72% 86.63%, 96.12% 87.63%, 95.49% 88.60%, 94.81% 89.55%, 94.09% 90.46%, 93.33% 91.34%, 92.54% 92.19%, 91.70% 93.00%, 90.84% 93.77%, 89.94% 94.51%, 89.01% 95.20%, 88.05% 95.86%, 87.06% 96.47%, 86.04% 97.04%, 85.00% 97.56%, 83.93% 98.04%, 82.84% 98.47%, 81.73% 98.85%, 80.60% 99.17%, 79.45% 99.45%, 78.28% 99.67%, 77.09% 99.84%, 75.89% 99.95%, 74.68% 100.00%, 73.46% 99.99%, 72.23% 99.92%, 70.98% 99.79%, 69.73% 99.59%, 68.48% 99.33%, 67.22% 99.00%, 65.95% 98.60%, 64.69% 98.14%, 63.47% 97.63%, 62.36% 97.14%, 61.25% 96.66%, 60.13% 96.18%, 58.99% 95.72%, 57.84% 95.32%, 56.67% 94.98%, 55.49% 94.70%, 54.31% 94.47%, 53.11% 94.29%, 51.91% 94.18%, 50.71% 94.11%, 49.50% 94.11%, 48.30% 94.16%, 47.10% 94.27%, 45.90% 94.43%, 44.71% 94.65%, 43.53% 94.93%, 42.36% 95.26%, 41.21% 95.65%, 40.07% 96.09%, 38.95% 96.58%, 37.84% 97.06%, 36.72% 97.54%, 35.54% 98.05%, 34.27% 98.53%, 33.01% 98.94%, 31.74% 99.28%, 30.49% 99.55%, 29.24% 99.76%, 27.99% 99.90%, 26.76% 99.98%, 25.53% 100.00%, 24.32% 99.96%, 23.12% 99.86%, 21.93% 99.70%, 20.76% 99.49%, 19.60% 99.23%, 18.47% 98.91%, 17.35% 98.54%, 16.26% 98.12%, 15.19% 97.65%, 14.14% 97.13%, 13.12% 96.57%, 12.12% 95.97%, 11.16% 95.32%, 10.22% 94.63%, 9.32% 93.90%, 8.45% 93.14%, 7.61% 92.33%, 6.81% 91.49%, 6.04% 90.62%, 5.32% 89.71%, 4.63% 88.77%, 3.99% 87.80%, 3.38% 86.81%, 2.83% 85.78%, 2.31% 84.74%, 1.85% 83.66%, 1.43% 82.57%, 1.07% 81.45%, 0.75% 80.31%, 0.49% 79.16%, 0.28% 77.98%, 0.13% 76.80%, 0.04% 75.59%, 0.00% 74.38%, 0.02% 73.15%, 0.11% 71.92%, 0.26% 70.67%, 0.47% 69.42%, 0.75% 68.16%, 1.09% 66.90%, 1.51% 65.64%, 1.99% 64.37%, 2.49% 63.19%, 2.98% 62.08%, 3.46% 60.97%, 3.94% 59.85%, 4.38% 58.71%, 4.77% 57.55%, 5.09% 56.38%, 5.37% 55.20%, 5.58% 54.01%, 5.74% 52.81%, 5.84% 51.61%, 5.89% 50.41%, 5.88% 49.20%, 5.82% 48.00%, 5.70% 46.80%, 5.52% 45.61%, 5.28% 44.42%, 4.99% 43.24%, 4.65% 42.07%, 4.25% 40.92%, 3.79% 39.78%, 3.30% 38.67%, 2.82% 37.56%, 2.34% 36.45%, 1.82% 35.22%, 1.36% 33.95%, 0.97% 32.69%, 0.65% 31.43%, 0.39% 30.18%, 0.20% 28.93%, 0.07% 27.68%, 0.01% 26.45%, 0.01% 25.23%, 0.06% 24.02%, 0.17% 22.82%, 0.34% 21.64%, 0.57% 20.47%, 0.85% 19.32%, 1.18% 18.19%, 1.56% 17.08%, 2.00% 15.99%, 2.48% 14.92%, 3.00% 13.88%, 3.57% 12.87%, 4.19% 11.88%, 4.85% 10.92%, 5.55% 9.99%, 6.29% 9.10%, 7.06% 8.23%, 7.88% 7.41%, 8.72% 6.61%, 9.61% 5.86%, 10.52% 5.14%, 11.47% 4.47%, 12.44% 3.83%, 13.45% 3.24%, 14.48% 2.69%, 15.53% 2.19%, 16.61% 1.74%, 17.71% 1.34%, 18.83% 0.98%, 19.98% 0.68%, 21.14% 0.43%, 22.31% 0.24%, 23.50% 0.10%, 24.71% 0.02%, 25.93% 0.00%, 27.16% 0.04%, 28.39% 0.14%, 29.64% 0.30%, 30.89% 0.53%, 32.15% 0.83%, 33.41% 1.19%, 34.68% 1.62%, 35.94% 2.12%, 37.08% 2.61%, 38.20% 3.10%, 39.31% 3.58%, 40.43% 4.06%, 41.58% 4.48%, 42.74% 4.85%, 43.91% 5.17%, 45.10% 5.43%, 46.29% 5.63%, 47.49% 5.77%, 48.69% 5.86%, 49.89% 5.90%, 51.10% 5.87%, 52.30% 5.79%, 53.50% 5.66%, 54.69% 5.47%, 55.88% 5.22%, 57.05% 4.91%, 58.21% 4.55%, 59.36% 4.14%, 60.49% 3.67%, 61.61% 3.18%, 62.72% 2.70%, 63.83% 2.22%);
    --_polygon-oval: polygon(72.29% 0.03%, 73.21% 0.08%, 74.12% 0.15%, 75.02% 0.24%, 75.92% 0.35%, 76.80% 0.49%, 77.67% 0.64%, 78.54% 0.82%, 79.39% 1.02%, 80.23% 1.24%, 81.06% 1.49%, 81.87% 1.75%, 82.68% 2.04%, 83.47% 2.35%, 84.25% 2.68%, 85.01% 3.04%, 85.76% 3.42%, 86.50% 3.82%, 87.23% 4.24%, 87.93% 4.69%, 88.63% 5.15%, 89.31% 5.65%, 89.97% 6.16%, 90.62% 6.70%, 91.25% 7.26%, 91.86% 7.84%, 92.45% 8.45%, 93.03% 9.07%, 93.57% 9.71%, 94.10% 10.36%, 94.60% 11.03%, 95.08% 11.72%, 95.54% 12.42%, 95.97% 13.13%, 96.39% 13.86%, 96.77% 14.61%, 97.14% 15.37%, 97.48% 16.14%, 97.81% 16.93%, 98.11% 17.72%, 98.38% 18.53%, 98.64% 19.36%, 98.87% 20.19%, 99.08% 21.04%, 99.27% 21.89%, 99.44% 22.76%, 99.58% 23.64%, 99.71% 24.53%, 99.81% 25.43%, 99.89% 26.33%, 99.95% 27.25%, 99.98% 28.18%, 100.00% 29.11%, 99.99% 30.05%, 99.97% 31.00%, 99.92% 31.96%, 99.85% 32.92%, 99.76% 33.89%, 99.65% 34.87%, 99.52% 35.85%, 99.37% 36.84%, 99.20% 37.83%, 99.00% 38.83%, 98.79% 39.84%, 98.55% 40.84%, 98.30% 41.86%, 98.02% 42.87%, 97.73% 43.89%, 97.41% 44.91%, 97.08% 45.93%, 96.72% 46.96%, 96.35% 47.99%, 95.95% 49.02%, 95.53% 50.05%, 95.10% 51.08%, 94.65% 52.11%, 94.17% 53.15%, 93.68% 54.18%, 93.16% 55.21%, 92.63% 56.24%, 92.08% 57.27%, 91.51% 58.30%, 90.92% 59.33%, 90.31% 60.35%, 89.68% 61.37%, 89.03% 62.39%, 88.37% 63.41%, 87.68% 64.42%, 86.98% 65.43%, 86.26% 66.43%, 85.52% 67.43%, 84.76% 68.43%, 83.98% 69.42%, 83.18% 70.40%, 82.37% 71.38%, 81.54% 72.35%, 80.69% 73.32%, 79.82% 74.27%, 78.93% 75.22%, 78.03% 76.17%, 77.10% 77.10%, 77.10% 77.10%, 76.17% 78.03%, 75.22% 78.93%, 74.27% 79.82%, 73.32% 80.69%, 72.35% 81.54%, 71.38% 82.37%, 70.40% 83.18%, 69.42% 83.98%, 68.43% 84.76%, 67.43% 85.52%, 66.43% 86.26%, 65.43% 86.98%, 64.42% 87.68%, 63.41% 88.37%, 62.39% 89.03%, 61.37% 89.68%, 60.35% 90.31%, 59.33% 90.92%, 58.30% 91.51%, 57.27% 92.08%, 56.24% 92.63%, 55.21% 93.16%, 54.18% 93.68%, 53.15% 94.17%, 52.11% 94.65%, 51.08% 95.10%, 50.05% 95.53%, 49.02% 95.95%, 47.99% 96.35%, 46.96% 96.72%, 45.93% 97.08%, 44.91% 97.41%, 43.89% 97.73%, 42.87% 98.02%, 41.86% 98.30%, 40.84% 98.55%, 39.84% 98.79%, 38.83% 99.00%, 37.83% 99.20%, 36.84% 99.37%, 35.85% 99.52%, 34.87% 99.65%, 33.89% 99.76%, 32.92% 99.85%, 31.96% 99.92%, 31.00% 99.97%, 30.05% 99.99%, 29.11% 100.00%, 28.18% 99.98%, 27.25% 99.95%, 26.33% 99.89%, 25.43% 99.81%, 24.53% 99.71%, 23.64% 99.58%, 22.76% 99.44%, 21.89% 99.27%, 21.04% 99.08%, 20.19% 98.87%, 19.36% 98.64%, 18.53% 98.38%, 17.72% 98.11%, 16.93% 97.81%, 16.14% 97.48%, 15.37% 97.14%, 14.61% 96.77%, 13.86% 96.39%, 13.13% 95.97%, 12.42% 95.54%, 11.72% 95.08%, 11.03% 94.60%, 10.36% 94.10%, 9.71% 93.57%, 9.07% 93.03%, 8.45% 92.45%, 7.84% 91.86%, 7.26% 91.25%, 6.70% 90.62%, 6.16% 89.97%, 5.65% 89.31%, 5.15% 88.63%, 4.69% 87.93%, 4.24% 87.23%, 3.82% 86.50%, 3.42% 85.76%, 3.04% 85.01%, 2.68% 84.25%, 2.35% 83.47%, 2.04% 82.68%, 1.75% 81.87%, 1.49% 81.06%, 1.24% 80.23%, 1.02% 79.39%, 0.82% 78.54%, 0.64% 77.67%, 0.49% 76.80%, 0.35% 75.92%, 0.24% 75.02%, 0.15% 74.12%, 0.08% 73.21%, 0.03% 72.29%, 0.01% 71.36%, 0.00% 70.42%, 0.02% 69.47%, 0.05% 68.52%, 0.11% 67.56%, 0.19% 66.59%, 0.29% 65.62%, 0.41% 64.64%, 0.55% 63.65%, 0.72% 62.66%, 0.90% 61.67%, 1.10% 60.67%, 1.33% 59.66%, 1.57% 58.65%, 1.84% 57.64%, 2.12% 56.62%, 2.43% 55.60%, 2.75% 54.58%, 3.10% 53.55%, 3.46% 52.53%, 3.85% 51.50%, 4.25% 50.47%, 4.68% 49.43%, 5.12% 48.40%, 5.59% 47.37%, 6.07% 46.34%, 6.58% 45.31%, 7.10% 44.27%, 7.64% 43.24%, 8.20% 42.21%, 8.78% 41.19%, 9.38% 40.16%, 10.00% 39.14%, 10.64% 38.12%, 11.30% 37.10%, 11.97% 36.09%, 12.67% 35.07%, 13.38% 34.07%, 14.11% 33.07%, 14.86% 32.07%, 15.63% 31.08%, 16.42% 30.09%, 17.22% 29.11%, 18.05% 28.13%, 18.89% 27.17%, 19.75% 26.20%, 20.62% 25.25%, 21.52% 24.30%, 22.43% 23.36%, 23.36% 22.43%, 24.30% 21.52%, 25.25% 20.62%, 26.20% 19.75%, 27.17% 18.89%, 28.13% 18.05%, 29.11% 17.22%, 30.09% 16.42%, 31.08% 15.63%, 32.07% 14.86%, 33.07% 14.11%, 34.07% 13.38%, 35.07% 12.67%, 36.09% 11.97%, 37.10% 11.30%, 38.12% 10.64%, 39.14% 10.00%, 40.16% 9.38%, 41.19% 8.78%, 42.21% 8.20%, 43.24% 7.64%, 44.27% 7.10%, 45.31% 6.58%, 46.34% 6.07%, 47.37% 5.59%, 48.40% 5.12%, 49.43% 4.68%, 50.47% 4.25%, 51.50% 3.85%, 52.53% 3.46%, 53.55% 3.10%, 54.58% 2.75%, 55.60% 2.43%, 56.62% 2.12%, 57.64% 1.84%, 58.65% 1.57%, 59.66% 1.33%, 60.67% 1.10%, 61.67% 0.90%, 62.66% 0.72%, 63.65% 0.55%, 64.64% 0.41%, 65.62% 0.29%, 66.59% 0.19%, 67.56% 0.11%, 68.52% 0.05%, 69.47% 0.02%, 70.42% 0.00%, 71.36% 0.01%);
}

@keyframes simple-spin {
    to { transform: rotate(360deg) scale(0.842); }
}

.reduce-animations .loading-spinner-ind {
    animation: simple-spin 2s cubic-bezier(0.5, 0.2, 0, 0.8) infinite !important;
    transform: rotate(0deg) scale(0.842);
    clip-path: var(--_polygon-pentagon) !important;
}

@keyframes loading-spinner-ind-rotate {
    0% {
        clip-path: var(--_polygon-soft-burst);
        transform: rotate(0deg) scale(0.842);
        animation-timing-function: cubic-bezier(0.5, 0.2, 0, 0.8);
    }

    14% {
        clip-path: var(--_polygon-7-sided-cookie);
        transform: rotate(154deg) scale(0.842);
        animation-timing-function: cubic-bezier(0.5, 0.2, 0, 0.8);
    }

    29% {
        clip-path: var(--_polygon-pentagon);
        transform: rotate(309deg) scale(0.842);
        animation-timing-function: cubic-bezier(0.5, 0.2, 0, 0.8);
    }

    43% {
        clip-path: var(--_polygon-pill);
        transform: rotate(463deg) scale(0.842);
        animation-timing-function: cubic-bezier(0.5, 0.2, 0, 0.8);
    }

    57% {
        clip-path: var(--_polygon-very-sunny);
        transform: rotate(617deg) scale(0.842);
        animation-timing-function: cubic-bezier(0.5, 0.2, 0, 0.8);
    }

    71% {
        clip-path: var(--_polygon-4-sided-cookie);
        transform: rotate(771deg) scale(0.842);
        animation-timing-function: cubic-bezier(0.5, 0.2, 0, 0.8);
    }

    83% {
        clip-path: var(--_polygon-oval);
        transform: rotate(926deg) scale(0.842);
        animation-timing-function: cubic-bezier(0.5, 0.2, 0, 0.8);
    }

    100% {
        clip-path: var(--_polygon-soft-burst);
        transform: rotate(1080deg) scale(0.842);
    }
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Open Runde', sans-serif;
}

/* When animations are disabled */
.reduce-animations * {
    /* Disable all animations */
    animation: none !important;

    /* Disable all transitions except opacity */
    transition: opacity 0.3s ease !important;
    transition-property: opacity !important;
}

/* Special handling for clickable elements */
.reduce-animations [onclick],
.reduce-animations button,
.reduce-animations a,
.reduce-animations input[type="button"],
.reduce-animations input[type="submit"],
.reduce-animations .clickable {
    /* Keep initial state but remove transition */
    transform: scale(1) !important;
    transition: opacity 0.3s ease !important;
}

/* Keep active state functional but without animation */
.reduce-animations [onclick]:active,
.reduce-animations button:active,
.reduce-animations a:active,
.reduce-animations input[type="button"]:active,
.reduce-animations input[type="submit"]:active,
.reduce-animations .clickable:active {
    /* Apply scale instantly without transition */
    transform: scale(1.1) !important;
    transition: none !important;
}

/* Accessibility Focus Ring */
.a11y-focused {
    outline: 4px solid var(--accent) !important;
    outline-offset: 4px !important;
    z-index: 999999 !important;
    transition: outline 0.1s !important;
}

/* Accessibility Overlay */
#a11y-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999997;
    display: none;
    transition: backdrop-filter 0.3s ease;
}

/* Color Filters */
html.filter-grayscale {
    filter: grayscale(100%) !important;
}

html.filter-invert {
    filter: invert(100%) !important;
}

html.filter-protanopia {
    filter: url('#a11y-protanopia') !important;
}

html.filter-deuteranopia {
    filter: url('#a11y-deuteranopia') !important;
}

html.filter-tritanopia {
    filter: url('#a11y-tritanopia') !important;
}

#nightstand-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999999;
    display: none;
    transition: backdrop-filter 0.3s ease;
    background: red;
    mix-blend-mode: multiply;
}

input[type="color"] {
    -webkit-appearance: none;
    appearance: none;
    border: 1px solid var(--glass-border);
    width: 30px;
    height: 30px;
    padding: 0;
    background: none;
    border-radius: 999px;
    cursor: pointer;
    overflow: hidden;
}

input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}

input[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: 999px;
}

input[type="color"]::-moz-color-swatch {
    border: 1px solid var(--glass-border);
    border-radius: 999px;
}

/* --- POLYGOL DESKTOP UX --- */
#top-menu-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 40px;
    text-shadow: 0 0 10px var(--background-color-tr);
    z-index: 10000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 8px;
    font-size: 0.8rem;
    box-sizing: border-box;
    pointer-events; none;
}
#top-menu-bar::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--overlay-color);
    backdrop-filter: blur(2.5px);
    -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 50%);
    mask-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 50%);
    z-index: -1;
}
.menu-left,
.menu-right {
    display: flex;
    align-items: center;
    height: 100%;
    pointer-events: auto;
}
.menu-item.logo-menu {
    padding: 0 10px;
}
#current-app-menu-label {
    font-weight: 600;
}
#top-status-icons {
    padding: 0 14px;
    height: 100%;
}
.menu-item {
    cursor: pointer;
    padding: 0 14px;
    height: 100%;
    display: flex;
    align-items: center;
    border-radius: 16px;
    corner-shape: superellipse(1.5);
    transition: background 0.1s;
}
.menu-item:hover, .menu-item.drag-hover {
    background: rgba(255, 255, 255, 0.2);
}
.menu-item.drag-hover {
    box-shadow: inset 0 0 0 2px var(--accent);
    color: var(--accent);
}

.menu-dropdown {
    position: fixed;
    top: 40px;
    background: var(--search-background);
    backdrop-filter: var(--edge-refraction-filter) saturate(2) blur(2.5px);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    corner-shape: superellipse(1.5);
    min-width: 200px;
    z-index: 9999;
    display: none;
    flex-direction: column;
    padding: 5px;
    box-shadow: var(--sun-shadow);
    max-height: calc(100% - 60px);
    overflow: auto;
}
.menu-dropdown.show {
    display: flex;
}
.dropdown-item {
    border-radius: 12px;
    corner-shape: superellipse(1.5);
    padding: 6px 10px;
    cursor: pointer;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background 0.1s;
}
.dropdown-item img {
    width: 16px;
    height: 16px;
    border-radius: 4px;
}
.dropdown-item .material-symbols-rounded {
    font-size: 16px;
}
.menu-dropdown .dropdown-item:hover {
    background-color: var(--accent);
    color: var(--background-color);
}

.control-strip {
    position: fixed;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    height: 40px;
    display: flex;
    padding: 0 8px;
    gap: 6px;
    background: var(--search-background);
    backdrop-filter: var(--edge-refraction-filter) saturate(2) blur(2.5px);
    box-shadow: var(--sun-shadow), 0 -2px 10px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--glass-border);
    border-radius: 25px;
    corner-shape: superellipse(1.5);
    overflow: hidden;
    z-index: 9998;
}
.cs-handle {
    padding: 0 5px;
    opacity: 0.5;
    display: flex;
    align-items: center;
}
.cs-apps {
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: 400px;
    overflow-x: auto;
    scrollbar-width: none;
}
.cs-apps::-webkit-scrollbar { display: none; }

.cs-app-btn {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    padding: 0;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

.cs-app-btn img {
    width: 28px;
    height: 28px;
    border-radius: 35%;
    corner-shape: superellipse(1.25);
    position: relative;
    object-fit: cover;
}

.cs-app-btn.minimized img {
    opacity: 0.8;
    filter: grayscale(0.5);
    scale: 0.8;
}

.cs-app-btn.minimized {
    background: rgba(255, 255, 255, 0.2);
}

.cs-modules {
    display: flex;
}
.cs-btn {
    background: transparent;
    border: none;
    padding: 6px;
    cursor: pointer;
    transition: background 0.1s;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-color)
}
.cs-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}
.cs-btn .material-symbols-rounded {
    font-size: 18px;
}

.desktop-window {
    position: fixed;
    backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    border-radius: 30px;
    corner-shape: superellipse(1.5);
    box-shadow: var(--sun-shadow-strong), 0 -2px 10px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 1000;
    min-width: 300px;
    min-height: 200px;
    overflow: visible;
}

.desktop-window.active-window {
    /* Stronger shadow for active window */
    box-shadow: var(--sun-shadow-strong), 0 15px 45px rgba(0, 0, 0, 0.4);
}

.desktop-window.maximized.active-window {
    outline: none;
}

.desktop-window:not(.active-window) .win-btn {
    background: rgba(155, 155, 155, 0.5);
}

/* Fix Iframe Pointer Bug */
.window-overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: block;
}

.desktop-window.active-window .window-overlay {
    /* Hide overlay when active so user can interact with iframe */
    display: none; 
}

/* Custom Resize Handles */
.resizer {
    position: absolute;
    z-index: 20;
}
.resizer.n  { top: -4px; left: 0; right: 0; height: 8px; cursor: n-resize; }
.resizer.s  { bottom: -4px; left: 0; right: 0; height: 8px; cursor: s-resize; }
.resizer.e  { top: 0; bottom: 0; right: -4px; width: 8px; cursor: e-resize; }
.resizer.w  { top: 0; bottom: 0; left: -4px; width: 8px; cursor: w-resize; }
.resizer.nw { top: -4px; left: -4px; width: 12px; height: 12px; cursor: nw-resize; }
.resizer.ne { top: -4px; right: -4px; width: 12px; height: 12px; cursor: ne-resize; }
.resizer.sw { bottom: -4px; left: -4px; width: 12px; height: 12px; cursor: sw-resize; }
.resizer.se { bottom: -4px; right: -4px; width: 12px; height: 12px; cursor: se-resize; }
.desktop-window.maximized {
    top: 40px !important;
    left: 0 !important;
    width: 100% !important;
    height: calc(100% - 95px) !important;
    border-radius: 25px;
    resize: none;
}
.desktop-window.app-window.legacy .window-content {
    background-color: var(--background-color-tr);
}
.window-header {
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 12px;
    cursor: default;
    user-select: none;
    position: fixed;
    z-index: 1;
    right: 0;
    width: calc(100% - 24px);
}
.window-title {
    font-size: 13px;
    font-family: "Inter", sans-serif;
    font-weight: 500;
    color: var(--text-color);
    flex-grow: 1;
    text-align: center;
    padding-left: 12px;
    padding-right: 70px;
    pointer-events: none;
}
.window-controls {
    display: flex;
    gap: 10px;
    align-items: center;
}
.win-btn {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
}
.win-close {
    background: #ff5f56;
}
.win-btn.win-close:hover::before {
    content: "🗙";
    display: block;
    font-size: 8px;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.5);
    position: absolute;
    top: -0.2px;
}
.win-min {
    background: #ffbd2e;
}
.win-btn.win-min:hover::before {
    content: "🗕";
    display: block;
    font-size: 8px;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.5);
    position: absolute;
    top: -0.2px;
}
.win-max {
    background: #27c93f;
}
.win-btn.win-max:hover::before {
    content: "🗖";
    display: block;
    font-size: 8px;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.5);
    position: absolute;
    top: -0.2px;
}
.menu-dropdown .dropdown-item {
    width: 100%;
    border: none;
    color: inherit;
    text-align: left;
    background: transparent;
    font: inherit;
}
.win-btn:hover {
    scale: 1.3;
}
.window-content {
    flex-grow: 1;
    width: 100%;
    height: calc(100% - 35px);
    position: relative;
    border-radius: inherit;
    corner-shape: inherit;
    overflow: hidden;
}
.window-content iframe {
    width: 100%;
    height: 100%;
    border: none;
}

#spotlight-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: none;
    justify-content: center;
    align-items: flex-start;
    padding-top: 25vh;
    transition: opacity 0.2s ease;
}

#spotlight-overlay.visible #spotlight-container {
    opacity: 1;
    transform: scale(1);
    filter: none;
}

#spotlight-container {
    width: 90%;
    max-width: 650px;
    background: var(--search-background);
    backdrop-filter: var(--edge-refraction-filter) saturate(2) blur(2.5px);
    border: 1px solid var(--glass-border);
    border-radius: 35px;
    corner-shape: superellipse(1.5);
    box-shadow: var(--sun-shadow), 0 20px 50px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    transform: scale(1.1);
    filter: blur(10px);
    transition: transform 0.2s cubic-bezier(0.2, 1.3, 0.64, 1);
}

#spotlight-input {
    width: 100%;
    background: transparent;
    border: none;
    padding: 18px 24px;
    font-size: 24px;
    color: var(--text-color);
    outline: none;
    font-family: 'Open Runde', sans-serif;
    font-weight: 500;
}

#spotlight-input::placeholder {
    color: var(--secondary-text-color);
}

#spotlight-results {
    max-height: 400px;
    overflow-y: auto;
    padding: 0 12px 12px 12px;
    display: none;
    scrollbar-width: none;
}
#spotlight-results::-webkit-scrollbar { display: none; }

.spotlight-item {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    border-radius: 25px;
    corner-shape: superellipse(1.5);
    cursor: pointer;
    gap: 16px;
    transition: background 0.1s ease, color 0.1s ease;
}

.spotlight-item.selected, 
.spotlight-item:active {
    background: var(--accent);
    color: var(--background-color);
}

.spotlight-item.selected .spotlight-subtitle {
    color: var(--background-color);
    opacity: 0.8;
}

.spotlight-icon-wrapper {
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

.spotlight-icon-img {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    object-fit: cover;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.spotlight-icon-material {
    font-size: 28px;
}

.spotlight-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
}

.spotlight-title {
    font-size: 16px;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.spotlight-subtitle {
    font-size: 13px;
    color: var(--secondary-text-color);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.drawer-handle {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    cursor: grab;
    z-index: 9993;
    touch-action: none;
    user-select: none;
    transition: transform 0.15s cubic-bezier(.2, 1.3, .64, 1);
}

.drawer-handle:active {
    cursor: grabbing;
}

.drawer-pill {
    padding: 11.5px;
    display: flex;
    justify-content: center;
    width: 50%;
    max-width: 50px;
    align-items: center;
}

.drawer-pill:active {
    transform: translateY(-5px) scale(1.2);
    transition: transform 0.1s cubic-bezier(.2, 1.3, .64, 1);
}

.nav-pill {
    transform: scale(1);
    transition: transform 0.15s cubic-bezier(.2, 1.3, .64, 1), opacity 0.3s ease, background-color 0.3s, width 0.3s;
    width: 100%;
    height: 2.5px;
    background-color: transparent;
    border-radius: 5px;
    opacity: 1;
    outline: 1px solid var(--glass-border);
    backdrop-filter: invert(0.8) hue-rotate(180deg) contrast(1) saturate(2) blur(10px);
}

/* One Button Navigation Handle */
#one-button-nav-handle {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 9993;
    touch-action: manipulation;
    user-select: none;
    transition: transform 0.15s cubic-bezier(.2, 1.3, .64, 1), opacity 0.3s ease;
}

#one-button-nav-handle .nav-pill {
    width: 20px;
    height: 5px;
    border-radius: 5px;
    transition: transform 0.15s cubic-bezier(.2, 1.3, .64, 1);
}

#one-button-nav-handle:active .nav-pill {
    padding: 0 10px;
}

/* Swapping between gesture and button handles */
body.one-button-nav-active .drawer-handle {
    display: none !important;
}

body:not(.one-button-nav-active) #one-button-nav-handle {
    display: none !important;
}

body.one-button-nav-active #one-button-nav-handle {
    display: flex !important;
}

body.one-button-nav-active .dock.show {
    bottom: 25px;
}

/* One Button Nav Split Trigger */
.nav-btn-small {
    width: 40px;
    height: 25px;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    overflow: visible;
    position: absolute;
    cursor: pointer;
    transition: transform 0.2s, opacity 0.2s;
    pointer-events: auto;
    color: transparent;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 9994;
}

.nav-btn-small:active {
    transform: scale(0.9);
}

.nav-btn-small svg {
    width: auto;
    height: auto;
    margin: 8px;
    color: var(--text-color);
    pointer-events: none;
    flex-shrink: 0;
}

#dynamic-area {
    translate: 0 0;
    height: 40px;
    display: flex;
    align-items: center;
    gap: 12px;
    /* Space between segments */
    z-index: 9995;
    pointer-events: none;
    /* Let clicks pass through, children will re-enable */
}

#activity-island {
    display: flex;
    align-items: center;
    gap: 12px;
}

.activity-capsule {
    position: relative;
    height: 26px;
    border-radius: 10px;
    corner-shape: superellipse(1.5);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(.2, 1.3, .64, 1);
    pointer-events: auto;
    cursor: pointer;
    overflow: hidden;
    border: 1px solid var(--glass-border);
}

.activity-capsule.has-text {
    background-color: var(--search-background);
    padding: 4px 8px;
    border: 1px solid var(--glass-border);
    box-shadow: var(--sun-shadow);
    border-radius: 50px;
    backdrop-filter: blur(2.5px) saturate(2) var(--edge-refraction-filter);
    display: flex;
    flex-direction: row;
    font-size: 12px;
    gap: 4px;
    font-variant-numeric: tabular-nums;
    height: 16px;
    corner-shape: round;
}

@keyframes capsule-pop {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.activity-capsule img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    scale: 1.5;
}

.activity-capsule .material-symbols-rounded {
    font-size: 20px;
    color: var(--text-color);
}

.activity-capsule.has-text .material-symbols-rounded {
    font-size: 12px;
}

#status-indicator {
    width: 8px;
    height: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s cubic-bezier(.2, 1.3, .64, 1);
    pointer-events: auto;
    /* Clickable to open Quick Settings */
    cursor: pointer;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    backdrop-filter: invert(1) grayscale(1) contrast(50) blur(10px);
    position: fixed;
    top: 6px;
    right: 6px;
}

#status-indicator .material-symbols-rounded {
    font-size: 14px;
    color: var(--text-color);
}

.persistent-clock {
    pointer-events: auto;
    font-size: 1rem;
    color: var(--text-color);
    background-color: transparent;
    opacity: 1;
    visibility: visible;
    user-select: none;
    font-family: 'Inter Numeric', 'Inter';
    font-variant-numeric: tabular-nums;
    font-variation-settings: "RDNS" 1;
    display: flex;
    align-items: center;
    /* Keeps the image and text aligned */
    gap: 0;
    cursor: pointer;
    transform: scale(1);
    transition: all 0.15s cubic-bezier(.2, 1.3, .64, 1);
    font-weight: 600;
    transform-origin: top;
    margin-right: 12px;
}

/* Fix for misaligned colon in persistent clock */
.persistent-clock .persistent-colon {
    position: relative;
    top: -0.125em;
}

@supports (-webkit-mask-clip: text) {
    body:not(.high-contrast) .nav-btn-small svg {
        -webkit-mask-image: var(--trigger-mask, url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M 3 3 L 3 9 A 10 10 0 0 0 13 19 L 19 19' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>"));
        mask-image: var(--trigger-mask, url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M 3 3 L 3 9 A 10 10 0 0 0 13 19 L 19 19' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>"));
        -webkit-mask-size: contain;
        mask-size: contain;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
        backdrop-filter: invert(0.8) hue-rotate(180deg) contrast(1) saturate(2) blur(10px);
        color: transparent;
        /* Hide solid stroke so only the masked backdrop-filter shows */
    }
}

.persistent-clock:active {
    transform: scale(1.04) scaleY(1.1);
    transition: transform 0.1s cubic-bezier(.2, 1.3, .64, 1);
}

.persistent-clock.show {
    opacity: 1;
    visibility: visible;
}

.persistent-clock-actions {
    position: fixed;
    top: 16px;
    right: 16px;
    padding: 8px;
    z-index: 9996;
    gap: 12px;
    transform-origin: right;
    transform: scale(0.9);
    filter: blur(2.5px);
    opacity: 0;
    transition: transform 0.2s ease, opacity 0.2s ease;
    pointer-events: none;
}

#quick-action-minimize,
#app-minimize-btn {
    background-color: rgba(255, 193, 7, 0.75);
    /* Amber 75% */
    color: #b26a00;
}

#quick-action-close,
#app-close-btn {
    background-color: rgba(244, 67, 54, 0.75);
    /* Red 75% */
    color: #a91b0d;
}

.persistent-clock-actions.show {
    transform: scale(1);
    filter: none;
    opacity: 1;
    pointer-events: auto;
}

.app-icon-img {
    border: 1px solid var(--glass-border);
    aspect-ratio: 1 / 1;
    corner-shape: superellipse(1.25);
    border-radius: 35%;
    overflow: hidden;
    position: relative;
    box-shadow: var(--sun-shadow), 0px 2px 10px 0px rgb(90 90 90 / 25%);
}

.app-icon-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    corner-shape: inherit;
    border-radius: inherit;
    transform: scale(1.15);
}

.app-icon-img::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    box-shadow: var(--sun-shadow-strong);
    pointer-events: none;
    /* so clicks pass through */
    corner-shape: inherit;
    border-radius: inherit;
    z-index: 1;
    border: 1px solid var(--glass-border);
}

/* --- Desktop Activities --- */
#home-activity-container {
    position: fixed;
    z-index: 49;
    width: clamp(300px, 30%, 420px);
    height: 100px;
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s ease;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#home-activity-container.pos-tl {
    top: 40px;
    left: 20px;
}

#home-activity-container.pos-tr {
    top: 40px;
    right: 20px;
}

#home-activity-container.pos-bl {
    bottom: 20px;
    left: 20px
}

#home-activity-container.pos-br {
    bottom: 20px;
    right: 20px;
}

#home-activity-container.dragging {
    transition: none;
    cursor: grabbing;
    transform: scale(1.05);
    z-index: 10000;
}

.home-activity-item {
    display: none;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background-color: var(--search-background);
    backdrop-filter: var(--edge-refraction-filter) saturate(2) blur(2.5px);
    border-radius: 35px;
    corner-shape: superellipse(1.5);
    border: 1px solid var(--glass-border);
    box-shadow: var(--sun-shadow);
}

.home-activity-item.active {
    display: flex;
}

.home-media-widget {
    align-items: stretch;
    flex-direction: column;
    padding: 12px 14px 12px 14px;
    overflow: hidden;
    transition: all 0.3s ease;
}

#home-media-art {
    width: 40px;
    height: 40px;
    position: absolute;
    left: 18px;
    top: 15px;
    object-fit: cover;
    flex-shrink: 0;
    cursor: pointer;
    transition: transform 0.15s cubic-bezier(.2, 1.3, .64, 1);
    border-radius: 10px;
    corner-shape: inherit;
    outline: 1px solid var(--glass-border);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
}

#home-media-art:active {
    transform: scale(1.1);
    transition: transform 0.1s cubic-bezier(.2, 1.3, .64, 1);
    filter: brightness(1.5);
}

.home-media-info {
    flex-grow: 1;
    min-width: 0;
    display: flex;
    gap: 4px;
    flex-direction: column;
    margin: 2px 52px 0 52px;
    z-index: 1;
    pointer-events: none;
}

.home-media-info .title {
    font-weight: bold;
    font-family: 'Open Runde';
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: 4px;
    line-height: 1.25;
}

.home-media-info .artist {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: 4px;
    line-height: 1.25;
}

#home-media-progress-bar {
    border-radius: 0;
    overflow: visible;
    margin: 0;
    box-shadow: none;
    border: none;
    flex-grow: 1;
    z-index: 1;
}

#home-media-progress {
    width: 0%;
    height: 100%;
    background-color: var(--text-color);
    border-radius: 0;
    transition: width 0.2s ease;
    --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 10'%3E%3Cpath d='M0,5 Q5,10 10,5 T20,5' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' /%3E%3C/svg%3E");
    -webkit-mask-image: var(--wave);
    mask-image: var(--wave);
    -webkit-mask-size: 15px 100%;
    mask-size: 15px 100%;
    -webkit-mask-repeat: repeat-x;
    mask-repeat: repeat-x;
    -webkit-mask-position: 0 center;
    mask-position: 0 center;
    animation: wave-move 1s linear infinite;
    position: relative;
    z-index: 2;
    flex-shrink: 0;
}

.home-media-controls {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
}

.home-media-controls button {
    background: none;
    border: none;
    color: var(--text-color);
    cursor: pointer;
    width: 40px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
}

#home-media-play-pause {
    background: var(--accent);
    box-shadow: var(--sun-shadow);
    border: 1px solid var(--glass-border);
    width: 40px;
    height: 40px;
    border-radius: 25px;
    corner-shape: superellipse(1.5);
    color: var(--background-color);
    position: absolute;
    right: 18px;
    top: 15px;
}

.container {
    position: absolute;
    top: var(--clock-pos-y, 50%);
    left: var(--clock-pos-x, 50%);
    transform: translate(-50%, -50%);
    /* Default: Center */
    text-align: center;
    transition: color 0.3s;
    user-select: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: max-content;
    z-index: 1;
}

.container.align-left {
    align-items: flex-start;
}

.container.align-right {
    align-items: flex-end;
}

.container.align-left .info,
.container.align-left .clockwidgets {
    justify-content: flex-start;
}

.container.align-right .info,
.container.align-right .clockwidgets {
    justify-content: flex-end;
}

.info.glass-effect .date,
.clock.glass-effect>* {
    color: var(--accent) !important;
    background: none !important;
    /* Ensure no other backgrounds interfere */

    -webkit-mask-image: linear-gradient(black, black);
    -webkit-mask-clip: text;
    -webkit-mask-composite: source-in;

    mask-image: linear-gradient(black, black);
    mask-composite: source-in;

    backdrop-filter: var(--edge-refraction-filter) saturate(2) blur(2.5px);
    transition: transform 0.3s cubic-bezier(.3, 1.2, .64, 1), filter 0.3s cubic-bezier(.3, 1.2, .64, 1), font-size 0.3s cubic-bezier(.3, 1.2, .64, 1) !important;
}

.info.dynamic-fill-effect .date,
.clock.dynamic-fill-effect>* {
    color: transparent !important;
    background: none !important;
    /* Ensure no other backgrounds interfere */

    -webkit-mask-image: linear-gradient(black, black);
    -webkit-mask-clip: text;
    -webkit-mask-composite: source-in;

    mask-image: linear-gradient(black, black);
    mask-composite: source-in;

    backdrop-filter: invert(0.8) hue-rotate(180deg) contrast(1) saturate(2) blur(10px);
    transition: transform 0.3s cubic-bezier(.3, 1.2, .64, 1), filter 0.3s cubic-bezier(.3, 1.2, .64, 1), font-size 0.3s cubic-bezier(.3, 1.2, .64, 1) !important;
}

.clock.gradient-effect {
    color: transparent;
}

.clock.gradient-effect>span,
.clock.gradient-effect>div {
    background-image: linear-gradient(180deg, var(--gradient-color-1, #fff), var(--gradient-color-2, #000));
    -webkit-background-clip: text;
    background-clip: text;
}

.clock {
    font-size: calc(clamp(10rem, 12%, 12rem) * var(--clock-size-multiplier, 1));
    font-weight: 700;
    color: var(--text-color);
    cursor: pointer;
    user-select: none;
    font-variant-numeric: tabular-nums;
    transform: scale(1);
    transition: transform 0.3s cubic-bezier(.3, 1.2, .64, 1), filter 0.3s cubic-bezier(.3, 1.2, .64, 1), font-size 0.3s cubic-bezier(.3, 1.2, .64, 1) !important;
    position: relative;
    line-height: 1;
    width: fit-content;
    display: flex;
    align-items: center;
    justify-content: center;
}

.clock .digit,
.clock .colon {
    display: inline-block;
    text-align: center;
    font-size: inherit;
    line-height: inherit;
    transition: transform 0.3s cubic-bezier(.3, 1.2, .64, 1), filter 0.3s cubic-bezier(.3, 1.2, .64, 1), font-size 0.3s cubic-bezier(.3, 1.2, .64, 1) !important;
}

.clock .digit {
    width: 1ch;
    /* Only for digits to maintain monospace feel */
}

.clock .colon {
    position: relative;
    top: -0.125em;
    /* Fine-tune vertical alignment if needed */
}

/* .clock::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    backdrop-filter: blur(0.1px);
    border-radius: inherit;
}

.clock::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -2;
    backdrop-filter: blur(5px);
    border-radius: inherit;
    mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
    -webkit-mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
} */

.clock:active {
    transform: scale(1.04);
    filter: brightness(1.5);
}

.info {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
    user-select: none;
    gap: clamp(0.5rem, 2%, 1rem);
    font-size: clamp(1.5rem, 3%, 2rem);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    z-index: 1;
}

.date {
    cursor: pointer;
    user-select: none;
    transform: scale(1);
    transition: transform 0.3s cubic-bezier(.3, 1.2, .64, 1), filter 0.3s cubic-bezier(.3, 1.2, .64, 1) !important;
    position: relative;
}

/* .date::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    backdrop-filter: blur(0.1px);
    border-radius: inherit;
}

.date::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -2;
    backdrop-filter: blur(5px);
    border-radius: inherit;
    mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
    -webkit-mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
} */

.date:active {
    transform: scale(1.04);
    filter: brightness(1.5);
}

.modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%) scale(0.9);
    width: auto;
    min-width: 250px;
    max-width: 500px;
    max-height: 90%;
    background-color: var(--search-background);
    backdrop-filter: var(--edge-refraction-filter) saturate(2) blur(5px);
    color: var(--text-color);
    border: 1px solid var(--glass-border);
    opacity: 0;
    filter: blur(5px);
    transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.3s, color 0.3s, border-color 0.3s, filter 0.3s;
    overflow-y: auto;
    user-select: none;
    pointer-events: none;
    border-radius: 50px;
    corner-shape: superellipse(1.5);
    padding: 16px;
    box-shadow: var(--sun-shadow), 0 0 50px rgba(0, 0, 0, 0.2);
}

/* --- Form & Dialog Styles --- */
#dialogTitle {
    margin: 0;
    padding: 0 8px;
    font-size: 1.2rem;
    font-weight: 500;
    font-family: 'Open Runde';
}

#dialogMessage {
    padding: 0 8px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-input {
    padding: 12px 16px;
    border-radius: 25px;
    corner-shape: superellipse(1.5);
    border: 1px solid var(--glass-border);
    background-color: var(--search-background);
    color: var(--text-color);
    box-shadow: var(--sun-shadow);
    font-family: 'Inter', 'sans-serif';
    font-size: 1rem;
    outline: none;
    width: 100%;
    min-width: 500px;
    box-sizing: border-box;
}

.form-row {
    display: flex;
    gap: 12px;
    margin-top: 25px;
}

.button-dialog {
    background-color: var(--search-background);
    color: var(--text-color);
    border: 1px solid var(--glass-border);
    border-radius: 25px;
    padding: 12px 16px;
    cursor: pointer;
    font-family: 'Inter', 'sans-serif';
    font-weight: 500;
    box-shadow: var(--sun-shadow);
    width: 100%;
}

.button-dialog.primary {
    background-color: var(--accent);
    color: var(--background-color);
}

#customizeModal.modal {
    position: fixed;
    top: 40px;
    right: 0px;
    margin: 0 min(5%, 20px);
    box-sizing: border-box;
    overflow: auto;
    display: flex;
    flex-direction: column;
    left: auto;
    bottom: auto;
    transform-origin: top right;
    transform: translateX(0) translateY(-50%) scale(0.9) scaleY(0.8) scaleX(0.5);
    opacity: 0;
    filter: blur(5px);
    width: clamp(280px, 90%, 500px);
    z-index: 9999 !important;
    border-radius: 50px;
    background: var(--search-background);
    backdrop-filter: var(--edge-refraction-filter) saturate(2) blur(5px);
    box-shadow: var(--sun-shadow), 0 0 50px rgba(0, 0, 0, 0.2);
    border: 1px solid var(--glass-border);
    padding: 18px 20px 22px 20px;
    corner-shape: superellipse(1.5);
    scrollbar-width: none;
}

#customizeModal.modal::-webkit-scrollbar {
    display: none;
}

#customizeModal.modal.show {
    transform: scale(1);
    opacity: 1;
    filter: none;
}

#customizeModal.modal .modal-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#customizeModal.modal .modal-content:has(.notification-shade:empty) .notification-shade::before {
    content: 'No notifications';
    display: flex;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
    color: var(--secondary-text-color);
    font-weight: 500;
    font-family: 'Open Runde', 'Inter', sans-serif;
    font-size: 1.1rem;
    opacity: 0.7;
    margin: 40px 0
}

.modal.show {
    transform: translateX(-50%) translateY(-50%) scale(1);
    opacity: 1;
    pointer-events: auto;
    filter: none;
}

.modal-content {
    text-align: left;
    position: relative;
}

.header-row-modal {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-row-modal h2 {
    margin: 0;
}

.close {
    display: none !important;
    color: var(--text-color);
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    padding: 8px;
    background-color: var(--transparent-color);
    transition: background-color 0.3s, color 0.3s;
    border: 1px solid var(--glass-border);
    border-radius: 50%;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
}

.timezone {
    font-size: 1.5rem;
    margin: 10px 0;
    user-select: none;
}

.blur-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9996;
    opacity: 0;
    transition: all 0.3s ease;
    user-select: none;
    background-color: var(--overlay-color);
    pointer-events: none;
}

.blur-overlay.show {
    opacity: 1;
    user-select: none;
    pointer-events: auto;
}

#blurOverlayControls {
    z-index: 9996;
    backdrop-filter: none;
}

#interaction-blocker {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    display: none;
    background: transparent;
}

.cust-label {
    display: inline-flex;
    align-items: center;
    /* Align text and icon vertically */
    gap: 15px;
    /* Space between text and icon */
    text-shadow: 0 0 4px var(--search-background);
}

/* --- Sheet UI Styles --- */
.sheet-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    z-index: 9995;
    display: none;
    transition: opacity 0.3s ease;
}

.sheet-overlay.show {
    background-color: var(--overlay-color);
}

.sheet-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 100%;
    max-width: 800px;
    height: 80%;
    max-height: calc(100% - 80px);
    background-color: var(--background-color-tr);
    backdrop-filter: var(--edge-refraction-filter) saturate(2) blur(5px);
    border-radius: 50px;
    corner-shape: superellipse(1.5);
    box-shadow: var(--sun-shadow), 0 10px 30px rgba(0, 0, 0, 0.2);
    border: 1px solid var(--glass-border);
    transition: transform 0.3s cubic-bezier(0.2, 1.3, 0.64, 1);
    display: flex;
    flex-direction: column;
    opacity: 0;
    filter: blur(5px);
}

.sheet-container.open {
    opacity: 1;
    transform: translateX(-50%) translateY(-50%);
    filter: none;
}

.sheet-handle {
    width: 50px;
    height: 5px;
    background-color: var(--text-color);
    border-radius: 3px;
    margin: 15px auto;
    flex-shrink: 0;
    cursor: grab;
}

.sheet-handle:active {
    cursor: grabbing;
}

.sheet-iframe {
    width: 100%;
    flex-grow: 1;
    border: none;
    border-radius: 0 0 0 0;
}

.weather-widget {
    position: relative;
    font-size: 1.2rem;
    width: fit-content;
    font-weight: 400;
    color: var(--text-color);
    padding: 8px 18px;
    background-color: var(--search-background);
    backdrop-filter: var(--edge-refraction-filter) saturate(2) blur(2.5px);
    box-shadow: var(--sun-shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.3s;
    box-sizing: border-box;
    border-radius: 50px;
    height: 52px;
    transform: scale(1);
    transition: transform 0.15s cubic-bezier(.2, 1.3, .64, 1);
    border: 1px solid var(--glass-border);
    gap: 10px;
    font-size: 1.2rem;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
}

.weather-widget:active {
    transform: scale(1.04);
    filter: brightness(1.5);
}

.temperature {
    font-size: 1.2rem;
    font-weight: 400;
    display: inline-flex;
    align-items: center;
    height: 100%;
    user-select: none;
    font-variant-numeric: tabular-nums;
}

.weather-icon {
    font-size: 1.2rem;
    font-family: 'Material Symbols Rounded', sans-serif;
    font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 24;
    display: inline-flex;
    align-items: center;
    height: 100%;
    user-select: none;
}

#temperature,
#weather-icon {
    vertical-align: middle;
}

.clockwidgets {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(0.5rem, 2%, 1rem);
    width: 100%;
    margin-top: 10px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Brightness Control Styles */
.qc-sliders {
    display: flex;
    gap: 3px;
    flex-direction: column;
}

.brightness-slider-container,
.volume-slider-container {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-grow: 1;
    padding-left: 10px;
    border: 1px solid var(--glass-border);
    background: var(--search-background);
    box-shadow: var(--sun-shadow);
    border-radius: 20px;
    corner-shape: superellipse(1.5);
    transition: background-color 0.2s, transform 0.1s;
}

.brightness-slider {
    -webkit-appearance: none;
    width: 100%;
    height: 34px;
    background: none;
    padding-right: 8px;
    outline: none;
}

.volume-slider {
    -webkit-appearance: none;
    width: 100%;
    height: 34px;
    background: none;
    outline: none;
}

.brightness-slider::-webkit-slider-thumb,
.volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
    border: 1px solid var(--glass-border);
    box-shadow: var(--sun-shadow);
    transition: width 0.3s, height 0.3s, transform 0.3s;
}

.brightness-slider::-webkit-slider-thumb:active,
.volume-slider::-webkit-slider-thumb:active {
    width: 24px;
    height: 24px;
    transform: scale(1.1);
}

.brightness-slider::-moz-range-thumb,
.volume-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
    border: 1px solid var(--glass-border);
    box-shadow: var(--sun-shadow);
    transition: width 0.3s, height 0.3s, transform 0.3s;
}

.brightness-slider::-moz-range-thumb:active,
.volume-slider::-moz-range-thumb:active {
    width: 24px;
    height: 24px;
    transform: scale(1.1);
}

/* Page brightness overlay */
#brightness-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0);
    pointer-events: none;
    z-index: 9999999;
    transition: background-color 0.3s ease;
    display: block !important;
}

#screen-curve-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2147483647;
    /* Max z-index to sit on top of everything */
    pointer-events: none;
    --curve: 0px;

    /* Squircle mask using an outward-spreading box-shadow */
    border-radius: var(--curve);
    corner-shape: superellipse(1.5);
    box-shadow: 0 0 0 calc(var(--curve) + 5px) black;
}

.settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(85px, 1fr));
    gap: 10px;
    border-bottom: 2px solid var(--transparent-color);
    border-radius: 0 !important;
    padding-bottom: 10px;
}

.settings-grid.system-settings {
    display: none;
    border-bottom: none;
    border-top: 2px solid var(--transparent-color);
    padding: 10px 0 0;
}

.settings-grid.home-settings {
    display: flex;
    flex-direction: column;
    padding: 0;
    backdrop-filter: none;
    background-color: transparent;
    border-top: 2px solid var(--transparent-color);
    border-bottom: none;
    box-shadow: none;
    padding-top: 10px;
}

.settings-grid.wallpaper-settings {
    border: none;
    padding-bottom: 0;
}

.setting-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.2s, transform 0.1s, border-color 0.2s;
}

.setting-item .setting-icon-bg {
    transform: scale(1);
    transition: all 0.3s cubic-bezier(.2, 1.3, .64, 1);
    box-shadow: var(--sun-shadow);
}

.setting-item:active .setting-icon-bg {
    transform: scale(1.1);
    transition: all 0.3s cubic-bezier(.2, 1.3, .64, 1);
    filter: brightness(1.5);
}

.setting-item.active .setting-icon-bg {
    background-color: var(--accent);
    color: var(--background-color);
    border-radius: 35px;
    corner-shape: superellipse(1.5);
}

.setting-item.active .setting-icon-bg .material-symbols-rounded {
    color: var(--background-color);
}

.setting-item.active .setting-label {
    font-family: 'Open Runde';
    font-weight: 500;
}

.setting-icon-bg {
    justify-content: center;
    /* margin-bottom: 8px; */
    pointer-events: none;
    display: flex;
    align-items: center;
    padding: 15px 20px;
    background-color: var(--search-background);
    border-radius: 32px;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s, filter 0.1s;
    position: relative;
    min-height: 32px;
    height: 32px;
    box-shadow: var(--sun-shadow);
    border: 1px solid var(--glass-border);
    width: -webkit-fill-available;
}

.setting-label {
    font-size: 13px;
    font-weight: 400;
    pointer-events: none;
    line-height: 1.2;
    color: var(--text-color);
    transition: color 0.2s;
    word-break: break-word;
    text-shadow: 0 0 4px var(--search-background);
    margin-top: 10px;
}

.control-popup {
    display: none;
    position: fixed;
    z-index: 10001;
    min-width: 155px;
    max-width: calc(100vw - 40px); /* Leave room for margin */
    max-height: calc(100vh - 40px);
    overflow: visible; /* Ensure shadows aren't clipped */
}

.control-popup select,
.control-popup input {
    /* width: 100%; */
}

.media-widget {
    display: flex;
    align-items: stretch;
    flex-direction: column;
    padding: 12px 18px 12px 16px;
    background-color: var(--search-background);
    border-radius: 35px;
    corner-shape: superellipse(1.5);
    border: 1px solid var(--glass-border);
    box-shadow: var(--sun-shadow-strong);
    overflow: hidden;
    transition: all 0.3s ease;
    height: 149px;
}

.media-widget[style*="display: none"] {
    opacity: 0;
    transform: scale(0.95);
    pointer-events: none;
    height: 0;
}

.media-widget .app-icon-img {
    position: absolute;
    top: 18px;
    left: 20px;
    width: 28px;
    height: 28px;
    border-radius: 35%;
    z-index: 2;
    mix-blend-mode: luminosity;
    pointer-events: none;
    box-shadow: none;
    corner-shape: superellipse(1.25);
}

.media-widget-device {
    background: var(--overlay-color);
    z-index: 1;
    width: fit-content;
    padding: 4px 10px 4px 8px;
    border-radius: 20px;
    backdrop-filter: var(--edge-refraction-filter) saturate(2) blur(1px);
    border: 1px solid var(--glass-border);
    box-shadow: var(--sun-shadow);
    position: absolute;
    top: 18px;
    right: 20px;
    font-size: 0.7em;
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
}

.media-widget-device .material-symbols-rounded {
    font-size: 16px;
}

#media-widget-art {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    object-fit: cover;
    flex-shrink: 0;
    cursor: pointer;
    transition: transform 0.15s cubic-bezier(.2, 1.3, .64, 1);
    mix-blend-mode: overlay;
    border-radius: inherit;
    corner-shape: inherit;
}

#media-widget-art:active {
    transform: scale(1.04);
    transition: transform 0.1s cubic-bezier(.2, 1.3, .64, 1);
    filter: brightness(1.5);
}

.media-widget-info {
    flex-grow: 1;
    min-width: 0;
    display: flex;
    gap: 6px;
    flex-direction: column;
    margin: 55px 60px 8px 2px;
    z-index: 1;
    pointer-events: none;
}

.media-widget-info .title {
    font-weight: bold;
    font-family: 'Open Runde';
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: 4px;
    line-height: 1.25;
}

.media-widget-info .artist {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: 4px;
    line-height: 1.25;
}

.media-widget-progress-container {
    display: flex;
    align-items: center;
    padding: 0 68px;
    z-index: 1;
    box-sizing: border-box;
    position: fixed;
    bottom: 8px;
    pointer-events: none;
    justify-content: space-between;
    width: 100%;
    left: 0;
}

.media-widget-time {
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    color: var(--secondary-text-color);
}

#media-widget-progress-bar {
    border-radius: 0;
    overflow: visible;
    margin: 0;
    box-shadow: none;
    border: none;
    flex-grow: 1;
    z-index: 1;
}

#media-widget-progress {
    width: 0%;
    height: 100%;
    background-color: var(--text-color);
    border-radius: 0;
    transition: width 0.2s ease;
    --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 10'%3E%3Cpath d='M0,5 Q5,10 10,5 T20,5' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' /%3E%3C/svg%3E");
    -webkit-mask-image: var(--wave);
    mask-image: var(--wave);
    -webkit-mask-size: 15px 100%;
    mask-size: 15px 100%;
    -webkit-mask-repeat: repeat-x;
    mask-repeat: repeat-x;
    -webkit-mask-position: 0 center;
    mask-position: 0 center;
    animation: wave-move 1s linear infinite;
    position: relative;
    z-index: 2;
    flex-shrink: 0;
}

@keyframes wave-move {
    0% {
        -webkit-mask-position: 0 center;
        mask-position: 0 center;
    }

    100% {
        -webkit-mask-position: -15px center;
        mask-position: -15px center;
    }
}

.media-widget-controls {
    display: flex;
    gap: 14px;
    align-items: center;
    justify-content: space-between;
}

.media-widget-controls button {
    background: none;
    border: none;
    color: var(--text-color);
    cursor: pointer;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s;
}

#media-widget-play-pause {
    background: var(--overlay-color);
    backdrop-filter: var(--edge-refraction-filter) saturate(2) blur(1px);
    box-shadow: var(--sun-shadow);
    border: 1px solid var(--glass-border);
    width: 48px;
    height: 48px;
    border-radius: 25px;
    corner-shape: superellipse(1.5);
    color: var(--text-color);
    position: fixed;
    right: 22px;
    top: 64px;
}

/* Smart Home Controls Styles */
.quick-controls {
    display: grid;
    /* Make above grid when in production */
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, auto);
    gap: 10px;
}

.qcontrol-item {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    background-color: var(--search-background);
    border-radius: 32px;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s, filter 0.1s;
    position: relative;
    min-height: 32px;
    height: 32px;
    box-shadow: var(--sun-shadow);
    border: 1px solid var(--glass-border);
}

.qcontrol-item:active {
    transform: scale(1.1) !important;
    filter: brightness(1.5) !important;
}

.qcontrol-item:hover {
    transform: scale(1.01);
    filter: brightness(1.25);
}

.qcontrol-item.active {
    background-color: var(--accent);
    color: var(--background-color);
    border-radius: 35px !important;
    corner-shape: superellipse(1.5);
}

.qcontrol-item.active .qc-label {
    font-family: 'Open Runde';
    font-weight: 500;
}

.qcontrol-item .material-symbols-rounded {
    font-size: 24px;
    margin-right: 12px;
    flex-shrink: 0;
}

.qc-label {
    flex-grow: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 0;
}

#silent_switch_qc {
    grid-column: 1;
    grid-row: 1;
}

#temp_control_qc {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    justify-content: center;
}

#temp_control_qc .qc-label {
    display: none;
}

#night-mode-qc {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    justify-content: center;
}

#night_mode_qc .qc-label {
    display: none;
}

#thermostat-value {
    font-size: 14px;
    font-weight: 500;
    margin-left: 8px;
    font-variant-numeric: tabular-nums;
}

#minimal_mode_qc {
    grid-column: 1;
    grid-row: 2;
}

#light_mode_qc {
    grid-column: 2;
    grid-row: 2;
}

.qc-switch {
    appearance: none;
    width: 50px;
    height: 32px;
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 16px;
    position: relative;
    cursor: pointer;
    transition: background-color 0.3s;
}

.qc-switch::before {
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    background-color: white;
    border-radius: 50%;
    top: 4px;
    left: 4px;
    transition: transform 0.3s;
}

.qc-switch:checked {
    background-color: #3c78d8;
}

.qc-switch:checked::before {
    transform: translateX(18px);
}

.thermostat-popup {
    display: none;
    position: absolute;
    z-index: 10000;
    border: 1px solid var(--glass-border);
    background-color: var(--modal-transparent);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    border-radius: 35px;
    corner-shape: superellipse(1.5);
    padding: 15px;
    backdrop-filter: var(--edge-refraction-filter) saturate(2) blur(2.5px);
    box-shadow: var(--sun-shadow);
    width: 155px;
}

.thermostat-popup-header {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-bottom: 15px;
}

.thermostat-popup-header .material-symbols-rounded {
    margin-right: 10px;
}

.thermostat-popup-header span:nth-child(2) {
    flex-grow: 1;
}

.close-popup-btn {
    display: none !important;
    background: none;
    cursor: pointer;
    color: var(--text-color);
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.thermostat-slider-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.thermostat-slider {
    -webkit-appearance: none;
    width: 90%;
    height: 38px;
    border-radius: 20px;
    background: rgba(0, 0, 0, 0.1);
    outline: none;
    padding: 0 8px;
    border: 1px solid var(--glass-border);
}

.thermostat-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
    border: 1px solid var(--glass-border);
    transition: width 0.3s, height 0.3s, transform 0.3s;
}

.thermostat-slider::-webkit-slider-thumb:active {
    width: 28px;
    height: 28px;
    transform: scale(1.1);
}

.thermostat-slider::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
    border: 1px solid var(--glass-border);
    transition: width 0.3s, height 0.3s, transform 0.3s;
}

.thermostat-slider::-moz-range-thumb:active {
    width: 28px;
    height: 28px;
    transform: scale(1.1);
}

#thermostat-popup-value {
    font-size: 24px;
    font-weight: bold;
    font-variant-numeric: tabular-nums;
}

/* Ensure all items take up the same space in the grid */
#smart-home-lights,
#smart-home-thermostat,
#smart-home-security,
#smart-home-camera {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

#wallpaperInput {
    display: none;
}

.version-info,
.campaign-info,
#app-management-info,
.controls-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    padding: 15px 0 0 4px;
    transition: background-color 0.2s, transform 0.1s;
    height: 32px;
    border-top: 2px solid var(--transparent-color);
}

input[type="checkbox"] {
    appearance: none;
    width: 56px;
    height: 32px;
    background-color: var(--search-background);
    border-radius: 16px;
    position: relative;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(.2, 1.3, .64, 1);
    border: 1px solid var(--glass-border);
    cursor: pointer;
    box-shadow: var(--sun-shadow);
}

input[type="checkbox"]::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: var(--accent);
    border-radius: 50%;
    top: 50%;
    left: 6.5px;
    transform: translateY(-50%);
    border: 1px solid var(--glass-border);
    box-sizing: border-box;
    box-shadow: var(--sun-shadow);
    transition: all 0.3s cubic-bezier(.2, 1.3, .64, 1);
}

input[type="checkbox"]:checked {
    background-color: var(--accent);
}

input[type="checkbox"]:checked::before {
    background-color: var(--tonal);
    transform: translateY(-50%);
    width: 46px;
    height: 40px;
    top: 50%;
    left: 14px;
    backdrop-filter: saturate(2) blur(2.5px);
    border-radius: 36px;
}

input[type="radio"] {
    appearance: none;
    background-color: var(--search-background);
    font: inherit;
    width: 20px;
    height: 20px;
    border: 1px solid var(--glass-border);
    border-radius: 50%;
    box-shadow: var(--sun-shadow);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(.2, 1.3, .64, 1);
    display: grid;
    place-content: center;
}

input[type="radio"]::before {
    content: "";
    background-color: var(--background-color);
    border-radius: 50%;
    transform: scale(0);
    transition: all 0.3s cubic-bezier(.2, 1.3, .64, 1);
    width: 12px;
    height: 12px;
    display: block;
    box-shadow: var(--sun-shadow);
    border: 1px solid var(--glass-border);
    box-sizing: border-box;
}

input[type="radio"]:checked {
    background-color: var(--accent);
}

input[type="radio"]:checked::before {
    transform: scale(1);
}

.controls-footer-button,
#uploadButton,
#versionButton,
#resetButton {
    background-color: var(--search-background);
    color: var(--text-color);
    font-family: 'Inter', sans-serif;
    padding: 10px 15px;
    border-radius: 25px;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
    border: 1px solid var(--glass-border);
    box-shadow: var(--sun-shadow);
    font-weight: 500;
}

.control-popup select {
    background-color: var(--modal-transparent);
    color: var(--text-color);
    font-family: 'Inter', sans-serif;
    padding: 10px 15px;
    border-radius: 25px;
    cursor: pointer;
    outline: none;
    transition: background-color 0.2s, transform 0.1s;
    border: 1px solid var(--glass-border);
    backdrop-filter: var(--edge-refraction-filter) saturate(2) blur(2.5px);
    box-shadow: var(--sun-shadow), 0 4px 20px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    transform: scale(1);
    transition: transform 0.15s cubic-bezier(.2, 1.3, .64, 1);
}

.control-popup select option {
    background-color: var(--background-color);
    color: var(--text-color);
    transition: background-color 0.2s, transform 0.1s;
}

.control-popup input[type="range"] {
    -webkit-appearance: none;
    width: unset !important;
    height: 32px;
    border-radius: 18px;
    background: var(--modal-transparent);
    padding: 0 8px;
    outline: none;
    border: 1px solid var(--glass-border);
    backdrop-filter: var(--edge-refraction-filter) saturate(2) blur(2.5px);
    box-shadow: var(--sun-shadow), 0 4px 20px rgba(0, 0, 0, 0.15);
}

.control-popup input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
    border: 1px solid var(--glass-border);
    transition: width 0.3s, height 0.3s, transform 0.3s;
}

.control-popup input[type="range"]::-webkit-slider-thumb:active {
    width: 24px;
    height: 24px;
    transform: scale(1.1);
}

.control-popup input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
    border: 1px solid var(--glass-border);
    transition: width 0.3s, height 0.3s, transform 0.3s;
}

.control-popup input[type="range"]::-moz-range-thumb:active {
    width: 24px;
    height: 24px;
    transform: scale(1.1);
}

.control-popup-content {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 15px;
    background: var(--modal-transparent);
    border: 1px solid var(--glass-border);
    backdrop-filter: var(--edge-refraction-filter) saturate(2) blur(2.5px);
    box-shadow: var(--sun-shadow);
    border-radius: 35px;
    corner-shape: superellipse(1.5);
}

.popup-control-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.popup-control-row label {
    font-size: 14px;
    width: -webkit-fill-available;
    flex-shrink: 100;
}

.popup-control-row input[type="range"] {
    flex-grow: 1;
}

#sticker-settings-popup {
    width: 200px;
}

#font-select option[value="Bricolage Grotesque"] {
    font-family: 'Bricolage Grotesque', sans-serif;
}

#font-select option[value="DynaPuff"] {
    font-family: 'DynaPuff', cursive;
}

#font-select option[value="Domine"] {
    font-family: 'Domine', serif;
}

#font-select option[value="Climate Crisis"] {
    font-family: 'Climate Crisis', sans-serif;
}

#font-select option[value="JetBrains Mono"] {
    font-family: 'JetBrains Mono', monospace;
}

#font-select option[value="DotGothic16"] {
    font-family: 'DotGothic16', monospace;
}

#font-select option[value="Playpen Sans"] {
    font-family: 'Playpen Sans', cursive;
}

#font-select option[value="Jaro"] {
    font-family: 'Jaro', sans-serif;
}

#font-select option[value="Doto"] {
    font-family: 'Doto', monospace;
}

#font-select option[value="Nunito"] {
    font-family: 'Nunito', sans-serif;
}

.btn {
    background-color: var(--transparent-color);
    color: var(--text-color);
    padding: 12px 24px;
    border-radius: 30px;
    cursor: pointer;
    font-size: 21px;
    font-weight: 400;
    transition: background-color 0.3s ease;
    font-family: 'Inter', sans-serif;
    font-variant-numeric: tabular-nums;
    border: 1px solid var(--glass-border);
}

.controls-container {
    display: flex;
    align-items: center;
    gap: 15px;
    justify-content: space-between;
    margin-left: 10px;
}

.btn-qc {
    background-color: var(--overlay-color);
    color: var(--text-color);
    backdrop-filter: var(--edge-refraction-filter) saturate(2) blur(2.5px);
    box-shadow: var(--sun-shadow);
    border-radius: 32px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    width: 32px;
    height: 32px;
    border: 1px solid var(--glass-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Inter';
}

.controls-container .btn-qc {
    backdrop-filter: none;
    background-color: var(--search-background);
}

.status-qc {
    display: flex;
    align-items: center;
}

.page-indicator {
    position: fixed;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 14px;
    z-index: 50;
    transition: all 0.5s;
    opacity: 1;
    background-color: var(--search-background);
    backdrop-filter: var(--edge-refraction-filter) saturate(2) blur(2.5px);
    box-shadow: var(--sun-shadow);
    padding: 14px 16px;
    border: 1px solid var(--glass-border);
    border-radius: 40px;
    filter: none;
}

/* Hide indicator when app is open */
body.app-active .page-indicator {
    display: none !important;
}

.page-indicator.persistent-mode {
    opacity: 1 !important;
    pointer-events: auto;
    /* Ensure clickable */
    filter: none;
    padding: 10px 12px;
    /* Larger hit area */
    gap: 14px;
    background-color: transparent;
    backdrop-filter: none;
    border: none;
    box-shadow: none;
    bottom: 60px;
}

.page-indicator.persistent-mode .indicator-dot {
    width: 8px;
    height: 8px;
    background-color: transparent;
    backdrop-filter: invert(0.8) hue-rotate(180deg) contrast(1) saturate(2) blur(10px);
    opacity: 0.25;
    outline: 1px solid var(--secondary-text-color);
}

.page-indicator.persistent-mode .indicator-dot.active {
    background-color: transparent;
    opacity: 1;
    outline: none;
}

.page-indicator.shifted-up {
    bottom: 120px !important;
}

.page-indicator.empty {
    padding: 9px 16px;
}

.empty-indicator,
.info-indicator {
    color: var(--text-color);
    opacity: 0.7;
    font-size: 12px;
}

.info-indicator {
    margin-left: 8px;
    font-size: 10px;
}

.indicator-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    transition: all 0.3s;
}

.indicator-dot.active {
    background-color: var(--accent);
    box-shadow: var(--sun-shadow);
    transform: scale(1.5);
}

.indicator-dot.dragging {
    z-index: 2;
    transition: none;
    background-color: var(--accent);
    transform: scale(1.8);
}

.fade-out {
    opacity: 0;
    pointer-events: none;
    filter: blur(5px);
}

/* Wallpaper Switcher UI */
.wallpaper-switcher-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9995;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    filter: blur(10px);
    transition: opacity 0.3s ease, filter 0.3s;
    backdrop-filter: blur(50px);
    background-color: var(--overlay-color);
    transform: scale(1.5);
}

.wallpaper-switcher-overlay.visible {
    opacity: 1;
    filter: none;
    transform: none;
}

.switcher-scroll-track {
    width: 200px;
    height: 8px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 8px;
    margin: 60px 0 20px 0;
    position: relative;
}

.switcher-scroll-thumb {
    margin-top: -6px;
    /* Center vertically (half of height) */
    height: 20px;
    background: var(--accent);
    box-shadow: var(--sun-shadow);
    border-radius: 20px;
    position: absolute;
    top: 0;
    left: 0;
    width: 50px;
    /* Will be calculated by JS */
    cursor: grab;
    transition: background-color 0.2s;
}

.switcher-scroll-thumb:active {
    background: var(--accent);
    scale: 1.1;
    filter: brightness(1.5);
    cursor: grabbing;
}

.wallpaper-cards-container {
    display: grid;
    gap: 25px;
    overflow-x: auto;
    padding: 0 10%;
    width: calc(100% - 10%);
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    align-items: center;
    height: 100%;
    grid-template-rows: repeat(2, minmax(150px, 1fr));
    grid-auto-columns: minmax(250px, 1fr);
    grid-auto-flow: column;
}

.wallpaper-cards-container::-webkit-scrollbar {
    display: none;
}

.switcher-card {
    flex: 0 0 auto;
    width: 100%;
    height: 100%;
    border-radius: 50px;
    corner-shape: superellipse(1.5);
    position: relative;
    scroll-snap-align: center;
    background-size: cover;
    background-position: center;
    cursor: pointer;
    overflow: hidden;
    border: 1px solid var(--glass-border);
    box-shadow: var(--sun-shadow-strong);
}

.switcher-card.is-dragging {
    opacity: 0.5;
    cursor: grabbing;
}

.switcher-edit-btn {
    position: absolute;
    top: 15px;
    left: 18px;
    color: var(--text-color);
    border: 1px solid var(--glass-border);
    font-family: 'Inter';
    padding: 8px 14px;
    background: var(--search-background);
    backdrop-filter: var(--edge-refraction-filter) saturate(2) blur(2.5px);
    border: 1px solid var(--glass-border);
    box-shadow: var(--sun-shadow);
    border-radius: 50px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    z-index: 2;
    transition: transform 0.1s;
}

.switcher-edit-btn:active {
    transform: scale(1.1);
    filter: brightness(1.5);
}

.switcher-check {
    position: absolute;
    bottom: 15px;
    right: 15px;
    background: var(--accent);
    backdrop-filter: var(--edge-refraction-filter) saturate(2) blur(2.5px);
    color: var(--background-color);
    border: 1px solid var(--glass-border);
    box-shadow: var(--sun-shadow);
    border-radius: 50%;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.switcher-add-btn {
    margin: 10px 0 60px 0;
    color: var(--text-color);
    border: 1px solid var(--glass-border);
    font-family: 'Inter';
    padding: 8px 18px 8px 14px;
    background: var(--overlay-color);
    border: 1px solid var(--glass-border);
    box-shadow: var(--sun-shadow);
    border-radius: 30px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.wallpaper-cards-container.rearranging {
    gap: 10px;
    overflow-x: hidden;
    /* Lock scrolling during rearrange */
    flex-wrap: wrap;
    /* visual mode */
    justify-content: center;
}

.wallpaper-cards-container.rearranging .switcher-card {
    width: 25%;
    height: 60%;
    transform: scale(0.9);
}

.switcher-card.is-ghost {
    opacity: 0;
    pointer-events: none;
}

.switcher-card-drag-clone {
    position: fixed;
    z-index: 10001;
    pointer-events: none;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5);
    opacity: 0.9;
    transform: scale(1.05);
    border-radius: 35px;
    corner-shape: superellipse(1.5);
    background-size: cover;
    background-position: center;
}

/* App Switcher Specifics */
#app-cards-container {
    padding: 3% 10%;
}

.app-switcher-card {
    flex: 0 0 auto;
    width: 100%;
    height: 100%;
    border-radius: 50px;
    corner-shape: superellipse(1.5);
    position: relative;
    scroll-snap-align: center;
    background-size: cover;
    background-position: center;
    cursor: pointer;
    overflow: hidden;
    border: 1px solid var(--glass-border);
    box-shadow: var(--sun-shadow-strong);
}

.app-switcher-card .app-icon-img {
    position: absolute;
    top: 20px;
    left: 24px;
    width: 48px;
    height: 48px;
    z-index: 2;
}

.app-switcher-title {
    display: none;
}

/* Edit Mode Styling */
body.edit-mode-active #dynamic-area,
body.edit-mode-active .dock,
body.edit-mode-active .drawer-handle,
body.edit-mode-active .nav-btn-small,
body.edit-mode-active .page-indicator {
    opacity: 0 !important;
    pointer-events: none !important;
}

body.edit-mode-active .container {
    pointer-events: auto !important;
    z-index: 9997; /* Above background but below edit UI */
}

body.edit-mode-active #clock,
body.edit-mode-active .info {
    position: relative;
}

body.edit-mode-active #clock::after,
body.edit-mode-active .info::after {
    content: '';
    position: absolute;
    inset: -15px;
    border: 2px dashed rgba(255,255,255,0.5);
    border-radius: 15px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s, border-color 0.2s;
}

body.edit-mode-active #clock:hover::after,
body.edit-mode-active .info:hover::after {
    opacity: 1;
}

body.edit-mode-active #clock.edit-selected::after,
body.edit-mode-active .info.edit-selected::after {
    opacity: 1;
    border-style: solid;
    border-color: var(--accent);
    background: rgba(255,255,255,0.1);
    z-index: -1;
}

body.minimal-active #blurOverlayControls {
    backdrop-filter: blur(10px) !important;
}

body.minimal-active .drawer-handle,
body.minimal-active .one-button-nav-handle,
body.minimal-active .nav-btn-small {
    opacity: 0;
}

body-minimal-active .persistent-clock-digit,
body-minimal-active .persistent-colon {
    -webkit-mask-image: none !important;
    mask-image: none !important;
    mask-composite: source-in !important;
    backdrop-filter: none !important;
}

body.minimal-active .app-drawer,
body.minimal-active .dock {
    mix-blend-mode: luminosity;
    filter: grayscale(0.5);
}

body.minimal-active .app-window iframe {
    background-color: var(--background-color);
}

body.night-mode-active #temperature-overlay {
    backdrop-filter: brightness(0.8) contrast(2) saturate(2) grayscale(0.8);
}

body.immersive-active .app-window.legacy .legacy-app-header {
    display: none !important;
}

body.immersive-active .app-window.legacy iframe {
    height: 100%;
    margin-top: 0;
    border-radius: 0;
    corner-shape: square;
}

/* Adaptive Eco Mode */
body.eco-mode-active.eco-moderate::before,
body.eco-mode-active.eco-moderate #background-video,
body.eco-mode-active.eco-moderate #depth-layer {
    opacity: 0.7 !important;
}

body.eco-mode-active.eco-severe::before,
body.eco-mode-active.eco-severe #background-video,
body.eco-mode-active.eco-severe #depth-layer {
    opacity: 0.5 !important;
    filter: grayscale(0.5) !important;
}

body.eco-mode-active.eco-severe {
    background-color: #0b0b0b !important;
}

body.eco-mode-active.eco-critical::before,
body.eco-mode-active.eco-critical #background-video,
body.eco-mode-active.eco-critical #depth-layer {
    opacity: 0.2 !important;
    filter: grayscale(1) !important;
}

body.eco-mode-active.eco-critical {
    background-color: #000 !important;
}

/* Common styles for ALL blackout modes */
body.blackout-active .persistent-clock,
body.blackout-active .drawer-handle,
body.blackout-active #one-button-nav-handle,
body.blackout-active .nav-btn-small,
body.blackout-active #dock,
body.blackout-active .page-indicator,
body.blackout-active #customizeModal.modal.show {
    display: none !important;
}

/* Style 2: Show Wallpaper, Hide Content */
body.blackout-active.blackout-style-dim-hide .container,
body.blackout-active.blackout-style-dim-hide .widget-grid,
body.blackout-active.blackout-style-dim-hide #dynamic-area,
body.blackout-active.blackout-style-dim-hide #environment-layer,
body.blackout-active.blackout-style-dim-hide #time-of-day-overlay {
    display: none !important;
}

body.blackout-active.blackout-style-dim-hide::before,
body.blackout-active.blackout-style-dim-hide #background-video {
    opacity: 1 !important;
}

/* Style 3: Hide Wallpaper, Show Content */
body.blackout-active.blackout-style-hide-show {
    background-color: #000 !important;
}

body.blackout-active.blackout-style-hide-show::before,
body.blackout-active.blackout-style-hide-show #background-video,
body.blackout-active.blackout-style-hide-show #environment-layer,
body.blackout-active.blackout-style-hide-show #time-of-day-overlay {
    display: none !important;
}

/* Style 4: Turn Off Screen */
body.blackout-active.blackout-style-off {
    background-color: #000 !important;
}

body.blackout-active.blackout-style-off #dynamic-area,
body.blackout-active.blackout-style-off::before,
body.blackout-active.blackout-style-off #background-video,
body.blackout-active.blackout-style-off .container,
body.blackout-active.blackout-style-off .widget-grid,
body.blackout-active.blackout-style-off #depth-layer,
body.blackout-active.blackout-style-off #environment-layer,
body.blackout-active.blackout-style-off #time-of-day-overlay {
    display: none !important;
}

/* Night Stand Mode */
body.night-stand-active {
    background-color: #000 !important;
}

body.night-stand-active::before,
body.night-stand-active #background-video,
body.night-stand-active #depth-layer,
body.night-stand-active #environment-layer,
body.night-stand-active #time-of-day-overlay {
    opacity: 0 !important;
    transition: opacity 1s ease !important;
}

/* Ensure content remains visible but red */
body.night-stand-active .container,
body.night-stand-active .widget-grid,
body.night-stand-active .dock,
body.night-stand-active .persistent-clock {
    z-index: 10;
}

/* Hide all main UI elements during initial setup and post-setup onboarding */
body.onboarding-active .container,
body.onboarding-active .widget-grid,
body.onboarding-active #dynamic-area,
body.onboarding-active .drawer-handle,
body.onboarding-active #split-screen-trigger,
body.onboarding-active #one-button-nav-handle,
body.onboarding-active #dock,
body.onboarding-active .page-indicator {
    display: none !important;
}

/* Immersive Mode */
body.immersive-active #dynamic-area,
body.immersive-active #split-screen-trigger {
    opacity: 0 !important;
    display: none !important;
    pointer-events: none !important;
    transition: opacity 0.3s ease !important;
}

body.immersive-active .drawer-handle,
body.immersive-active #one-button-nav-handle {
    opacity: 0 !important;
    width: 150px;
    height: 25px;
    left: 50%;
    transform: translateX(-50%);
    transition: opacity 0.3s ease !important;
}

/* App Drawer Styles */
.app-drawer {
    position: fixed;
    opacity: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--overlay-color);
    backdrop-filter: blur(5px) opacity(0.9);
    z-index: 1001;
    overflow: hidden;
    touch-action: none;
    user-select: none;
    touch-action: none;
    user-select: none;
    content-visibility: hidden;
    pointer-events: none;
    transform-origin: bottom;
    will-change: transform, opacity, bottom, content-visibility;
    transition: height 0.3s cubic-bezier(0.2, 1.3, 0.64, 1);
}

.drawer-action-btn {
    position: absolute;
    background: transparent;
    border: none;
    color: var(--text-color);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s, color 0.2s;
    top: 12px;
    left: 15px;
}

.app-drawer.open {
    bottom: 0;
    opacity: 1;
    transform: none;
    content-visibility: auto;
    pointer-events: auto;
}

.app-drawer-handle {
    width: 100%;
    height: 42px;
    background-color: transparent;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

#app-drawer .app-drawer-handle {
    height: 80px;
    left: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    justify-content: center;
    z-index: 2;
    width: auto;
    transform: none;
}

.drawer-handle-bar {
    width: 50px;
    height: 5px;
    background-color: var(--text-color);
    border-radius: 3px;
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
}

.drawer-top-btn {
    background-color: var(--search-background);
    border: 1px solid var(--glass-border);
    box-shadow: var(--sun-shadow), 0 0 15px rgba(0, 0, 0, 0.05);
    display: flex;
    gap: 8px;
    height: 46px;
    width: 46px;
    justify-content: center;
    align-items: center;
    position: relative;
    font-size: 14px;
    border-radius: 50px;
    cursor: pointer;
    backdrop-filter: var(--edge-refraction-filter) saturate(2) blur(2.5px);
}

.drawer-top-btn .material-symbols-rounded {
    font-size: 20px;
}

.app-search-container {
    display: flex;
    align-items: center;
    background-color: var(--search-background);
    border: 1px solid var(--glass-border);
    box-shadow: var(--sun-shadow), 0 0 15px rgba(0, 0, 0, 0.05);
    border-radius: 50px;
    padding: 0 8px 0 16px;
    backdrop-filter: var(--edge-refraction-filter) saturate(2) blur(2.5px);
    height: 46px;
}

.app-search-container .material-symbols-rounded {
    font-size: 20px;
}

#app-search-input {
    flex-grow: 1;
    border: none;
    background: none;
    outline: none;
    color: var(--text-color);
    padding: 12px 14px;
    font-size: 16px;
    font-family: 'Inter', 'sans-serif';
    width: 54px;
}

#app-search-input::placeholder {
    color: var(--text-color);
    font-weight: 500;
}

#app-search-input:placeholder-shown:not(:focus) {
    text-align: center;
}

#app-search-input:not(:placeholder-shown),
#app-search-input:focus {
    width: 200px;
}

.app-drawer-handle:has(#app-search-input:not(:placeholder-shown)) {
    gap: 0;
}

.app-drawer-handle:has(#app-search-input:not(:placeholder-shown)) #sort-app-btn {
    scale: 0;
    width: 0;
    opacity: 0;
    border: none;
}

#close-search-btn {
    background: none;
    border: none;
    color: var(--secondary-text-color);
    cursor: pointer;
    padding: 5px;
    display: flex;
}

.app-drawer-content {
    display: flex;
    align-items: flex-start;
    height: calc(100% - 80px);
    overflow-y: auto;
    user-select: none;
    padding: 80px 5% 0 5%;
    flex-direction: column;
}

.app-drawer-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: clamp(30px, 2%, 100px);
    width: 100%;
    padding: 0;
}

.get-app-btn-container {
    display: flex;
    justify-content: end;
    grid-column: span 6;
}

.get-app-btn {
    background-color: var(--search-background);
    color: var(--text-color);
    font-family: 'Inter', sans-serif;
    padding: 6px;
    border-radius: 25px;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
    border: 1px solid var(--glass-border);
    box-shadow: var(--sun-shadow);
    font-weight: 500;
    margin-bottom: 50px;
}

.app-icon {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: transform 0.2s;
    user-select: none;
}

.app-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1);
    transition: filter 0.2s, transform 0.2s;
    scale: 1.15;
    border-radius: inherit;
    corner-shape: inherit;
}

.app-icon .app-icon-img {
    width: 100%;
}

.app-icon:active .app-icon-img {
    filter: brightness(1.5);
    transform: scale(1.2);
}

.app-icon span {
    font-size: 0.9rem;
    margin-top: 16px;
    text-align: center;
    color: var(--text-color);
    font-weight: 500;
    text-shadow: 0 0 20px var(--background-color-tr);
}

.popup {
    position: fixed;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--modal-background);
    color: var(--text-color);
    padding: 20px;
    border-radius: 30px;
    z-index: 9999996;
    transition: opacity 0.5s;
    max-width: 80%;
    text-align: center;
}

.dock {
    display: none;
    position: fixed;
    bottom: -10px;
    transform: translateX(-50%);
    background: var(--search-background);
    backdrop-filter: var(--edge-refraction-filter) saturate(2) blur(2.5px);
    box-shadow: var(--sun-shadow);
    border: 1px solid var(--glass-border);
    border-radius: 256px;
    corner-shape: superellipse(1.5);
    padding: 12px 14px;
    gap: 12px;
    left: 50%;
    transition: all 0.3s cubic-bezier(.2, 1.3, .64, 1);
    z-index: 9996;
    box-shadow: var(--sun-shadow), 0 -2px 10px rgba(0, 0, 0, 0.1);
    transform-origin: bottom;
    will-change: transform, opacity;
    filter: blur(5px);
    opacity: 0;
    max-width: 90%;
    pointer-events: none;
}

.dock.show {
    display: flex;
    bottom: 10px;
    filter: none;
    opacity: 1;
    pointer-events: auto;
}

.dock-icon {
    width: clamp(48px, 64px, 128px);
    height: auto;
    aspect-ratio: 1/1;
    transform: scale(1);
    transition: filter 0.2s, transform 0.15s cubic-bezier(.2, 1.3, .64, 1);
    cursor: pointer;
}

.dock-icon:active {
    transform: scale(1.2);
    filter: brightness(1.5);
    transition: filter 0.2s transform 0.15s cubic-bezier(.2, 1.3, .64, 1);
    cursor: pointer;
}

.dock-icon.drawer-opener::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent-color);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.app-drawer.open~.dock .drawer-opener::after {
    opacity: 1;
}
.app-window iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.legacy-app-header {
    position: absolute;
    top: 0;
    left: 28px;
    height: 80px;
    display: none;
    /* Hidden by default */
    align-items: center;
    gap: 18px;
    z-index: 1;
    max-width: calc(100% - 140px);
    overflow: hidden;
}

.app-window.legacy .legacy-app-header {
    display: flex;
    /* Shown only on legacy embeds */
}

.legacy-app-header img {
    width: 32px;
    height: 32px;
    border-radius: 35%;
    corner-shape: superellipse(1.25);
    object-fit: cover;
}

.legacy-app-header span {
    font-weight: 500;
    color: var(--text-color);
}

.legacy-nav-controls {
    display: flex;
    gap: 8px;
    border-right: 2px solid var(--background-color-tr-op);
    padding-right: 18px;
}

.legacy-nav-controls .btn-qc {
    background-color: transparent;
    box-shadow: none;
    border: none;
    backdrop-filter: none;
}

/* AI Assistant Overlay Styles */
.ai-overlay {
    display: flex;
    justify-content: flex-end;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9996;
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, backdrop-filter 0.3s ease;
}

.ai-overlay.show {
    opacity: 1;
    pointer-events: auto;
}

#ai-response-area {
    max-width: 600px;
    max-height: 70%;
    /* Limit height */
    overflow-y: auto;
    color: var(--text-color);
    margin-bottom: 35px;
    corner-shape: superellipse(1.5);
    border-radius: 35px;
    padding: 15px 20px;
    opacity: 0;
    /* Start hidden */
    transform: translateY(10px);
    /* Start slightly lower for a subtle lift effect */
    transition: opacity 0.3s ease, transform 0.3s ease;
    scrollbar-width: thin;
    scrollbar-color: var(--transparent-color) transparent;
    background-color: var(--search-background);
    backdrop-filter: var(--edge-refraction-filter) saturate(2) blur(2.5px);
    box-shadow: var(--sun-shadow);
    border: 1px solid var(--glass-border);
}

#ai-response-area p:first-child {
    margin-top: 0;
}

#ai-response-area p:last-child {
    margin-bottom: 0;
}

#ai-response-area pre {
    background: rgba(0, 0, 0, 0.2);
    padding: 10px;
    border-radius: 8px;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.ai-search-bar {
    display: flex;
    align-items: center;
    gap: 15px;
    background-color: var(--search-background);
    backdrop-filter: var(--edge-refraction-filter) saturate(2) blur(2.5px);
    box-shadow: var(--sun-shadow);
    padding: 15px 20px;
    border-radius: 40px;
    width: 80%;
    max-width: 600px;
    margin-bottom: 25px;
    border: 1px solid var(--glass-border);
    box-shadow: var(--sun-shadow), 0 4px 20px rgba(0, 0, 0, 0.2);
}

#ai-input {
    flex-grow: 1;
    background: none;
    border: none;
    outline: none;
    color: var(--text-color);
    font-size: 1.1rem;
    font-family: 'Inter', sans-serif;
}

#ai-input::placeholder {
    color: var(--secondary-text-color);
}

.ai-search-bar .material-symbols-rounded {
    cursor: pointer;
    color: var(--text-color);
}

/* --- Widget System Styles --- */
.widget-grid {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    /* The grid itself is not interactive */
}

.widget-instance {
    position: absolute;
    background: var(--search-background);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid var(--glass-border);
    backdrop-filter: var(--edge-refraction-filter) saturate(2) blur(2.5px);
    width: 200px;
    /* Default size, can be overridden */
    height: 200px;
    pointer-events: auto;
    touch-action: none;
    /* Prevent page scroll on mobile */
    box-sizing: border-box;
    border-radius: 35px;
    corner-shape: superellipse(1.5);
    box-shadow: 0 5px 20px -10px rgba(0, 0, 0, 0.2);
}

.widget-instance.is-dragging {
    z-index: 1000;
}

.widget-instance.is-dragging .widget-instance-overlay {
    cursor: grabbing !important;
}

.widget-instance iframe {
    width: 100%;
    height: 100%;
    border: none;
    pointer-events: none;
    border-radius: 35px;
    corner-shape: superellipse(1.5);
}

.widget-instance-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: grab;
    z-index: 2;
    /* Sits on top of the iframe */
    box-shadow: var(--sun-shadow);
    border-radius: 35px;
    corner-shape: superellipse(1.5);
}

.widget-instance-overlay:active .widget-instance,
.widget-instance.is-dragging {
    transform: scale(1.04) !important;
    cursor: pointer;
    filter: brightness(1.5) !important;
}

/* --- Snap Line Indicators --- */
.snap-line {
    position: fixed;
    background-color: rgba(0, 122, 255, 0.8);
    display: none;
    /* Hidden by default */
    z-index: 9999;
}

.snap-line-v {
    width: 2px;
    height: 100%;
    top: 0;
}

.snap-line-h {
    height: 2px;
    width: 100%;
    left: 0;
}

.widget-instance-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    z-index: 2;
    /* Sits on top of the iframe */
}

.widget-instance.sticker-widget {
    z-index: 20;
    transform-origin: center center;
}

.widget-instance.sticker-widget.is-dragging {
    z-index: 1001;
}

.widget-instance.sticker-widget.widget-instance-overlay {
    cursor: default;
}

.sticker-content {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Keep aspect ratio */
    pointer-events: none;
    display: block;
    transition: filter 0.2s ease;
}

/* Border Logic using Drop Shadow for Alpha transparency support */
.sticker-content.has-border {
    --border-color: #fff;
    --border-width: 2px;
    filter:
        drop-shadow(var(--border-width) 0 0 var(--border-color)) drop-shadow(calc(var(--border-width) * -1) 0 0 var(--border-color)) drop-shadow(0 var(--border-width) 0 var(--border-color)) drop-shadow(0 calc(var(--border-width) * -1) 0 var(--border-color))
}

/* Rotation Handle for Stickers */
.widget-rotate-handle {
    position: absolute;
    opacity: 0;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 24px;
    background: var(--background-color);
    border: 1px solid var(--glass-border);
    border-radius: 50%;
    cursor: grab;
    z-index: 1002;
    /* Above everything */
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--sun-shadow);
}

.widget-rotate-handle:hover,
.widget-rotate-handle:active {
    cursor: grabbing;
    opacity: 1;
}

.widget-instance.is-dragging,
.widget-instance:hover,
.widget-instance:has(.widget-resize-handle:hover),
/* Parent contains hovered child */
.widget-instance:has(.widget-resize-handle:active)

/* Parent contains active child */
    {
    background: var(--search-background) !important;
    backdrop-filter: var(--edge-refraction-filter) saturate(2) blur(2.5px) !important;
}

/* --- Widget Picker Drawer Styles --- */
.widget-drawer {
    position: fixed;
    opacity: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: var(--background-color);
    z-index: 10000;
    transition: opacity 0.4s cubic-bezier(.2, 1.3, .64, 1);
    display: flex;
    flex-direction: column;
    pointer-events: none;
}

.widget-drawer.open {
    opacity: 1;
    pointer-events: auto;
}

.widget-drawer-handle {
    width: 100%;
    padding: 15px 0;
    display: flex;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}

.widget-drawer-handle .app-drawer-handle {
    top: 0;
}

.widget-drawer-header {
    padding: 15px 40px 15px;
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.drawer-header-button {
    background-color: var(--search-background);
    color: var(--text-color);
    backdrop-filter: var(--edge-refraction-filter) saturate(2) blur(2.5px);
    box-shadow: var(--sun-shadow);
    border-radius: 40px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    height: 40px;
    border: 1px solid var(--glass-border);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 18px 0 15px;
    font-weight: 500;
    font-family: 'Inter', sans-serif;
}

.drawer-header-button .material-symbols-rounded {
    font-size: 18px;
}

.widget-drawer-header h2 {
    margin: 0;
}

.widget-drawer-content {
    flex-grow: 1;
    overflow-y: auto;
    padding: 0 30px 30px;
}

#widget-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
}

.widget-picker-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    cursor: pointer;
    padding: 15px;
    border-radius: 18px;
    transition: background-color 0.2s;
}

.widget-picker-preview {
    width: 200px;
    height: 200px;
    overflow: auto;
    border: 1px solid var(--glass-border);
    box-shadow: var(--sun-shadow);
    border-radius: 35px;
    corner-shape: superellipse(1.5);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

.widget-picker-preview iframe {
    border: none;
    pointer-events: none;
}

.widget-resize-handle {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: se-resize;
    z-index: 2;
    /* Must be above the iframe but below the drag overlay */
}

.widget-resize-handle:hover,
.widget-resize-handle:active {
    background: var(--search-background);
    box-shadow: var(--sun-shadow);
    backdrop-filter: var(--edge-refraction-filter) saturate(2) blur(2.5px);
    border: 1px solid var(--glass-border);
}

.wallpaper-drawer-handle {
    width: 100%;
    padding: 15px 0;
    display: flex;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}

.wallpaper-drawer-handle .app-drawer-handle {
    top: 0;
}

#wallpaper-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
}

.wallpaper-picker-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.2s;
}

.wallpaper-picker-thumbnail {
    width: 100%;
    aspect-ratio: 16 / 9;
    background-size: cover;
    background-position: center;
    border: 1px solid var(--glass-border);
    border-radius: 25px;
    corner-shape: superellipse(1.5);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    box-shadow: var(--sun-shadow);
    overflow: hidden;
}

.upload-item .wallpaper-picker-thumbnail {
    background-color: var(--search-background);
}

.upload-item .material-symbols-rounded {
    font-size: 48px;
    color: var(--secondary-text-color);
}

.wallpaper-picker-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: left;
    width: 100%;
}

.wallpaper-picker-description,
.wallpaper-picker-artist {
    font-size: 12px;
    color: var(--secondary-text-color);
    margin: 0;
    line-height: 1.3;
}

.wallpaper-picker-artist {
    font-style: italic;
}

.wallpaper-picker-links {
    margin-top: 8px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.wallpaper-picker-badge {
    font-size: 14px;
    padding: 4px 8px;
    border-radius: 14px;
    corner-shape: superellipse(1.5);
    background-color: var(--search-background);
    color: var(--secondary-text-color);
    text-decoration: none;
    border: 1px solid var(--glass-border);
}

.wallpaper-picker-badge .material-symbols-rounded {
    font-size: 14px;
    margin-left: 4px;
}

.wallpaper-picker-title {
    font-weight: 500;
    color: var(--text-color);
}

/* --- App Switcher (Alt+Tab) Styles --- */
#app-switcher-overlay {
    position: fixed;
    bottom: 35px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--search-background);
    backdrop-filter: var(--edge-refraction-filter) saturate(2) blur(2.5px);
    border: 1px solid var(--glass-border);
    corner-shape: superellipse(1.5);
    border-radius: 50px;
    padding: 6px 8px;
    box-shadow: var(--sun-shadow), 0 8px 30px rgba(0, 0, 0, 0.2);
    z-index: 10000;
    opacity: 0;
    transform: translateX(-50%) scale(0.95);
    transition: opacity 0.2s ease, transform 0.2s ease;
    max-width: 90%;
    transform-origin: bottom;
}

#app-switcher-list {
    display: flex;
    gap: 4px;
    align-items: center;
}

.app-switcher-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px;
    border-radius: 35px;
    corner-shape: superellipse(1.5);
    transition: background-color 0.2s;
    aspect-ratio: 1 / 1;
}

.app-switcher-item.selected .app-icon-img {
    scale: 1.2;
    filter: brightness(1.5);
}

.app-switcher-item .app-icon-img {
    width: 60px;
    height: 60px;
}

.app-window.window-moving .window-content iframe,
.app-window.window-resizing .window-content iframe {
    pointer-events: none !important;
}

/* Donburi */
#donburi-container {
    pointer-events: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 47;
    overflow: clip;
    /* Add this to ensure border-radius works properly */
    border: none;
    transition: transform 0.3s ease, opacity 0.3s ease, border-radius 0.3s ease, filter 0.3s ease;
    filter: none;
}

#donburi-container.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

#donburi-container iframe {
    width: 100%;
    height: 100%;
    border: none;
}

#system-osk-container {
    position: fixed;
    bottom: -350px;
    left: 0;
    width: 100%;
    height: 300px;
    z-index: 10005;
    background-color: var(--search-background);
    backdrop-filter: var(--edge-refraction-filter) saturate(2) blur(5px);
    border-top: 1px solid var(--glass-border);
    transition: bottom 0.3s cubic-bezier(0.2, 1.3, 0.64, 1);
    box-shadow: var(--sun-shadow), 0 -10px 30px rgba(0, 0, 0, 0.2);
    border-radius: 50px 50px 0 0;
    corner-shape: superellipse(1.5);
    pointer-events: none;
}

#system-osk-container.open {
    bottom: 0;
    pointer-events: auto;
}

#system-osk-container iframe {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: inherit;
    corner-shape: inherit;
}

body.osk-active .app-window {
    height: calc(100% - 300px) !important;
    margin-bottom: 300px;
}

body.osk-active .modal {
    transform: translateX(-50%) translateY(-50%) scale(1) translateY(-150px);
}

body.osk-active .control-popup-content {
    transform: translateY(-150px);
}

@media (min-width: 1500px) {
    .app-drawer-grid {
        grid-template-columns: repeat(8, 1fr);
    }

    .app-drawer-content {
        padding: 80px 10% 0 10%;
    }

    .get-app-btn-container {
        grid-column: span 8;
    }
}

@media (min-width: 1000px) {
    #app-drawer .app-drawer-handle {
        left: 50%;
        transform: translateX(-50%);
    }
}

@media (max-width: 970px) {
    .app-drawer-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .get-app-btn-container {
        grid-column: span 4;
    }
}

@media (max-width: 520px) {
    .app-drawer-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .get-app-btn-container {
        grid-column: span 3;
    }
}

@media (max-width: 500px) {
    .legacy-nav-controls {
        border-right: none;
        padding-right: 0;
    }

    .legacy-app-header span {
        font-weight: 500;
        color: var(--text-color);
        display: none;
    }

    .legacy-app-header span.material-symbols-rounded {
        display: block;
    }
}

@media (max-width: 400px) {
    .app-drawer-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .get-app-btn-container {
        grid-column: span 2;
    }
}

@media (max-width: 280px) {
    .app-drawer-grid {
        grid-template-columns: repeat(1, 1fr);
    }

    .get-app-btn-container {
        grid-column: span 1;
    }
}