/* Glassline website. The page is a Glassline desktop: glass values come from the app's own
   material engine run on the wallpapers (tools/Probe material), radii and alphas from
   GLASSLINE-REFERENCE.md. */

:root {
  --bg: #0b0c0e;
  --text: #f2f2f3;
  --secondary: rgba(242, 242, 243, 0.62);
  --tertiary: rgba(242, 242, 243, 0.40);
  --hairline: rgba(255, 255, 255, 0.10);
  --charcoal: #17191d;
  --charcoal-2: rgba(23, 25, 29, 0.62);
  --charcoal-3: rgba(23, 25, 29, 0.40);
  --accent: #2f7ae5;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --gutter: 24px;
  --font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font: 17px/1.55 var(--font); -webkit-font-smoothing: antialiased; overflow-x: clip; }
a { color: inherit; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 var(--gutter); }

/* ---------------------------------------------------------------- menu bar (site nav) */

.menubar {
  position: fixed; inset: 0 0 auto 0; z-index: 20; height: 34px;
  display: flex; align-items: center; justify-content: space-between; padding: 0 8px;
  -webkit-backdrop-filter: blur(28px) saturate(150%); backdrop-filter: blur(28px) saturate(150%);
  transition: background-color 420ms var(--ease), color 420ms var(--ease), box-shadow 420ms var(--ease);
  font-size: 13px; font-weight: 500;
}
/* Materials from the engine: light glass + charcoal over bright wallpaper, dark glass over the page. */
.menubar[data-material="coast"] { background: rgba(160, 197, 232, 0.24); color: var(--charcoal); box-shadow: inset 0 -1px rgba(23, 25, 29, 0.14); }
.menubar[data-material="dark"] { background: rgba(22, 23, 26, 0.74); color: var(--text); box-shadow: inset 0 -1px rgba(242, 242, 243, 0.14); }

.menus, .status { display: flex; align-items: center; gap: 4px; }
.menus a, .status .pill { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 8px; border-radius: 6px; text-decoration: none; white-space: nowrap; }
.menus a:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
.menus .app { font-weight: 700; }
.status .pill svg { width: 16px; height: 16px; }
.status .clock { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- hero: the desktop */

.hero {
  position: relative; min-height: 100svh; min-height: max(100svh, 720px);
  background: url(/assets/wallpaper-coast-1440.jpg) center / cover no-repeat;
  display: grid; place-items: center; padding: 72px var(--gutter) 140px;
}
@media (min-width: 1000px) { .hero { background-image: url(/assets/wallpaper-coast-2560.jpg); } }

.hero-glass {
  width: min(540px, 100%); padding: 44px 40px 40px; border-radius: 28px; text-align: center; color: var(--charcoal);
  background: rgba(207, 224, 241, 0.52);
  -webkit-backdrop-filter: blur(40px) saturate(160%); backdrop-filter: blur(40px) saturate(160%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55), 0 30px 80px rgba(8, 40, 70, 0.25);
}
.hero-icon { width: 152px; height: 152px; margin: -4px auto 10px; filter: drop-shadow(0 18px 30px rgba(10, 50, 90, 0.25)); }
.hero h1 { margin: 0; font: 600 clamp(52px, 8vw, 76px)/1 var(--font-display); letter-spacing: -0.035em; }
.hero-glass p { margin: 14px 0 0; font-size: 20px; line-height: 1.4; color: var(--charcoal-2); }
.hero .actions { margin-top: 30px; }

.store {
  display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 24px; border-radius: 12px;
  background: var(--charcoal); color: #fff; font-weight: 600; font-size: 16px; text-decoration: none;
  transition: transform 180ms var(--ease), background-color 180ms;
}
.store:hover { background: #000; }
.store:active { transform: scale(0.97); }

/* ---------------------------------------------------------------- dock (live magnification in demo.js) */

.dock-area { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; justify-content: center; pointer-events: none; }
.dock { position: relative; pointer-events: auto; padding-top: 70px; }
.dock-items {
  display: flex; align-items: flex-end; gap: 10px; height: 76px; padding: 0 14px 10px; border-radius: 22px;
  background: rgba(160, 197, 232, 0.42);
  -webkit-backdrop-filter: blur(30px) saturate(150%); backdrop-filter: blur(30px) saturate(150%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45), 0 12px 40px rgba(8, 40, 70, 0.22);
}
.dock-item { position: relative; width: 56px; height: 56px; flex: none; }
.dock-item img, .dock-item .tile { width: 100%; height: 100%; }
.dock-item.running::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--charcoal); opacity: 0.7; }
.dock-sep { align-self: center; width: 1px; height: 38px; margin: 0 2px 4px; background: rgba(23, 25, 29, 0.28); flex: none; }
.dock-label {
  position: absolute; top: 0; left: 0; padding: 4px 10px; border-radius: 6px; font-size: 13px; font-weight: 500; white-space: nowrap;
  background: rgba(207, 224, 241, 0.86); color: var(--charcoal);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  box-shadow: inset 0 0 0 1px rgba(23, 25, 29, 0.10), 0 6px 16px rgba(0, 0, 0, 0.15);
  opacity: 0; transform: translateY(4px); transition: opacity 120ms, transform 160ms var(--ease); pointer-events: none;
}
.dock-label.show { opacity: 1; transform: none; }

/* App tiles: the demo's own app icons, one line glyph each. */
.tile { display: grid; place-items: center; border-radius: 23%; color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -1px 0 rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.16); }
.tile svg { width: 58%; height: 58%; stroke-width: 1.8; }
.t-files { background: linear-gradient(#5db2ff, #1f6fe0); }
.t-browser { background: linear-gradient(#44d6c4, #0f8f89); }
.t-mail { background: linear-gradient(#6fc3ff, #2a79ef); }
.t-notes { background: linear-gradient(#ffe38a, #f4b73a); color: #5a4200; }
.t-music { background: linear-gradient(#ff7a9a, #e2335a); }
.t-photos { background: linear-gradient(135deg, #ffb45e, #e0527a 55%, #8a5cf6); }
.t-terminal { background: linear-gradient(#4a5058, #1c1f24); }
.t-settings { background: linear-gradient(#c9ced6, #858d99); }
.t-downloads { background: linear-gradient(#7cc4ff, #3b86ea); }
.t-trash { background: linear-gradient(#eef1f5, #b9c0ca); color: #3d4450; }
.t-calc { background: linear-gradient(#ffa24d, #f0701a); font-weight: 700; font-size: 60%; }
.t-file { background: linear-gradient(#ffffff, #dfe4ea); color: #45505e; }
.t-calendar { background: #fff; color: var(--charcoal); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.t-calendar b { color: #e2335a; font-size: 10px; letter-spacing: 0.06em; }
.t-calendar i { font-style: normal; font-size: 26px; font-weight: 300; margin-top: 2px; }

/* ---------------------------------------------------------------- feature sections */

.feature { padding: 140px var(--gutter) 0; text-align: center;
  /* A soft glow in the wallpaper's colour behind each demo screen. */
  background: radial-gradient(55% 45% at 50% 72%, color-mix(in srgb, var(--glow, #7fb0d8) 16%, transparent), transparent 72%); }
#dock { --glow: #7fb0d8; } #maximize { --glow: #d49ac4; } #search { --glow: #2fc0c8; } #control-center { --glow: #d49ac4; } #weather { --glow: #8fc0a8; }
.copy { max-width: 820px; margin: 0 auto; }
.feature h2, .closing h2 { margin: 0; font: 600 clamp(32px, 4.8vw, 52px)/1.08 var(--font-display); letter-spacing: -0.025em; }
.copy p { margin: 18px auto 0; max-width: 640px; font-size: 19px; color: var(--secondary); }

.screen {
  position: relative; max-width: 1040px; margin: 56px auto 0; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 18px;
  background: var(--wall) center / cover no-repeat; text-align: left;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10), 0 40px 100px rgba(0, 0, 0, 0.5);
}
.screen.short { aspect-ratio: 16 / 8.6; }
/* The UI inside is drawn at 1040 px wide and scaled to the screen (demo.js sets --s). */
.stage { position: absolute; left: 0; top: 0; width: 1040px; height: 650px; transform-origin: 0 0; transform: scale(var(--s, 1)); }
.screen.short .stage { height: 559px; }

.segmented { display: inline-flex; margin-top: 28px; padding: 3px; border-radius: 10px; background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1px var(--hairline); }
.segmented button { height: 32px; padding: 0 18px; border-radius: 8px; font-size: 14px; color: var(--secondary); transition: background-color 200ms, color 200ms; }
.segmented button.on { background: rgba(255, 255, 255, 0.14); color: var(--text); }

/* Maximize demo */
.s-bar {
  position: absolute; inset: 0 0 auto 0; height: 30px; z-index: 3; display: flex; align-items: center; gap: 16px; padding: 0 14px;
  font-size: 12.5px; font-weight: 500; color: var(--charcoal);
  background: rgba(235, 207, 194, 0.24); -webkit-backdrop-filter: blur(24px) saturate(150%); backdrop-filter: blur(24px) saturate(150%);
  box-shadow: inset 0 -1px rgba(23, 25, 29, 0.14);
  transition: background-color 520ms var(--ease), color 520ms var(--ease), box-shadow 520ms;
}
.s-bar .s-app { font-weight: 700; }
.s-bar .s-fill { flex: 1; }
.s-bar svg { width: 15px; height: 15px; margin-left: -6px; }
.maxed .s-bar { background: rgba(37, 40, 46, 0.92); color: #f2f2f3; box-shadow: inset 0 -1px rgba(242, 242, 243, 0.14); }

.s-window {
  position: absolute; z-index: 2; left: 190px; top: 92px; width: 660px; height: 420px; border-radius: 10px; overflow: hidden;
  background: #16181b; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), 0 30px 70px rgba(0, 20, 40, 0.45);
  transition: left 620ms var(--ease), top 620ms var(--ease), width 620ms var(--ease), height 620ms var(--ease), border-radius 620ms var(--ease);
}
.maxed .s-window { left: 0; top: 30px; width: 1040px; height: 620px; border-radius: 0; }
.s-win-title { height: 34px; background: #25282e; display: flex; justify-content: flex-end; align-items: center; gap: 18px; padding: 0 16px; }
.s-win-title i { width: 10px; height: 1.5px; background: rgba(242, 242, 243, 0.55); }
.s-win-title i:nth-child(2) { height: 9px; background: none; box-shadow: inset 0 0 0 1.5px rgba(242, 242, 243, 0.55); border-radius: 1px; }
.s-win-title i:nth-child(3) { transform: rotate(45deg); box-shadow: 0 0 0 0; position: relative; }
.s-win-body { display: flex; height: calc(100% - 34px); }
.s-side { width: 190px; background: #1d2024; padding: 18px 14px; display: grid; gap: 12px; align-content: start; }
.s-side b { height: 34px; border-radius: 6px; background: rgba(255, 255, 255, 0.05); }
.s-side b:first-child { background: rgba(47, 122, 229, 0.35); }
.s-doc { flex: 1; padding: 34px 44px; }
.s-doc h4 { margin: 0 0 22px; font: 600 24px var(--font-display); color: #f2f2f3; }
.s-doc p { height: 10px; margin: 0 0 14px; border-radius: 5px; background: rgba(255, 255, 255, 0.10); }
.s-doc p.short { width: 62%; }

.s-dock {
  position: absolute; z-index: 1; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; padding: 8px 12px; border-radius: 16px;
  background: rgba(235, 207, 194, 0.42); -webkit-backdrop-filter: blur(24px) saturate(150%); backdrop-filter: blur(24px) saturate(150%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
  transition: transform 520ms var(--ease), opacity 520ms;
}
.maxed .s-dock { transform: translate(-50%, 90px); opacity: 0; }
.s-dock i { width: 40px; height: 40px; border-radius: 23%; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35); }
.s-dock .c1 { background: linear-gradient(#5db2ff, #1f6fe0); } .s-dock .c2 { background: linear-gradient(#44d6c4, #0f8f89); }
.s-dock .c3 { background: linear-gradient(#ffe38a, #f4b73a); } .s-dock .c4 { background: linear-gradient(#ff7a9a, #e2335a); }
.s-dock .c5 { background: linear-gradient(#4a5058, #1c1f24); } .s-dock .c6 { background: linear-gradient(#c9ced6, #858d99); }

/* Dock demo: the hero dock's styles, the lake's material, a drawn pointer and the Downloads stack. */
.demo-dock { position: absolute; left: 0; right: 0; bottom: 14px; width: fit-content; margin: 0 auto; padding-top: 0; }
.demo-dock .dock-items { background: rgba(174, 198, 226, 0.42); }
.cursor { position: absolute; left: 0; top: 0; width: 26px; height: 26px; z-index: 5; fill: #fff; stroke: #111; stroke-width: 1.3; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35)); transition: scale 120ms; pointer-events: none; }
.cursor.press { scale: 0.85; }
.stack {
  position: absolute; left: 620px; bottom: 112px; width: 330px; padding: 4px 14px 14px; border-radius: 16px; color: var(--charcoal);
  background: rgba(211, 223, 238, 0.86); -webkit-backdrop-filter: blur(30px) saturate(150%); backdrop-filter: blur(30px) saturate(150%);
  box-shadow: inset 0 0 0 1px rgba(23, 25, 29, 0.14), 0 28px 60px rgba(10, 40, 70, 0.3);
  opacity: 0; transform: translateY(12px) scale(0.96); transform-origin: 70% 100%; transition: opacity 220ms, transform 320ms var(--ease); pointer-events: none;
}
.stack.open { opacity: 1; transform: none; }
.stack-open .dock-label { opacity: 0 !important; } /* like the app: no label while a stack is open */
.stack-head { height: 44px; display: flex; align-items: baseline; gap: 10px; padding-top: 14px; font-size: 15px; }
.stack-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 6px; }
.stack-grid > span { display: grid; justify-items: center; gap: 6px; text-align: center; }
.stack-grid .tile { width: 52px; height: 52px; }
.stack-grid small { font-size: 11px; line-height: 1.25; max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-file-pdf { background: linear-gradient(#ff8a7a, #d9372b); }
.t-file-zip { background: linear-gradient(#c9ced6, #8a929e); }
.t-file-img { background: linear-gradient(135deg, #7fd3e8, #2b8fb8 55%, #1d5f86); }
.t-file-img2 { background: linear-gradient(135deg, #ffd08a, #f08a5d 60%, #b4506b); }
.t-file-doc { background: linear-gradient(#6aa8ff, #2a62d4); }
.t-file-audio { background: linear-gradient(#ff8fb0, #d63c6b); }

/* Search demo: the default palette surface (#202226 at 0.94) */
.palette {
  position: absolute; left: 210px; top: 118px; width: 620px; border-radius: 20px; overflow: hidden; color: #f3f4f6;
  background: rgba(32, 34, 38, 0.94); -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px);
  box-shadow: inset 0 0 0 1px rgba(243, 244, 246, 0.14), 0 30px 80px rgba(0, 20, 40, 0.45);
}
.p-field { display: flex; align-items: center; gap: 12px; height: 60px; padding: 0 20px; font-size: 22px; }
.p-field svg { width: 22px; height: 22px; opacity: 0.6; }
.caret { width: 2px; height: 26px; background: #f3f4f6; margin-left: -10px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.p-results { border-top: 1px solid rgba(243, 244, 246, 0.10); padding: 6px 8px 10px; min-height: 250px; }
.p-group { font-size: 12px; font-weight: 600; color: rgba(243, 244, 246, 0.6); padding: 10px 12px 4px; }
.p-row { display: flex; align-items: center; gap: 12px; height: 46px; padding: 0 12px; border-radius: 8px; font-size: 13.5px; }
.p-row.sel { background: rgba(243, 244, 246, 0.11); }
.p-row .tile { width: 30px; height: 30px; flex: none; }
.p-row small { display: block; font-size: 12px; color: rgba(243, 244, 246, 0.6); }
.p-row .big { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.p-results > * { animation: rise 260ms var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }

/* Popovers over the bright wallpapers: the engine's light popover material (0.86) with charcoal text */
.popover {
  position: absolute; border-radius: 16px; color: var(--charcoal); padding: 6px 16px 16px;
  background: rgba(233, 219, 212, 0.86); -webkit-backdrop-filter: blur(30px) saturate(150%); backdrop-filter: blur(30px) saturate(150%);
  box-shadow: inset 0 0 0 1px rgba(23, 25, 29, 0.14), 0 28px 60px rgba(60, 30, 20, 0.28);
  font-size: 13px;
}
.pop-head { height: 44px; display: flex; align-items: center; font-size: 17px; }
.pop-head b { font-weight: 600; }
.rule { height: 1px; background: rgba(23, 25, 29, 0.10); margin: 8px 0; }
.circle { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: #fff; flex: none; }
.circle.plain { background: rgba(23, 25, 29, 0.11); color: var(--charcoal); }
.circle svg { width: 16px; height: 16px; }
small { color: var(--charcoal-2); font-size: 12px; }

.cc { left: 150px; top: 70px; width: 372px; }
.cc-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cc-tile { display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 8px; border-radius: 8px; text-align: left; }
.cc-tile:hover { background: rgba(23, 25, 29, 0.07); }
.cc-tile b, .cc-slider b { display: block; font-weight: 600; }
.cc-tile:not(.on) .circle { background: rgba(23, 25, 29, 0.11); color: var(--charcoal); }
.cc-slider { display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 8px; }
.cc-slider .grow { flex: 1; }
.cc-slider small { margin-left: 4px; font-weight: 400; font-variant-numeric: tabular-nums; }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 18px; margin: 2px 0 0; background: none; cursor: pointer; }
input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--charcoal) var(--p, 60%), rgba(23, 25, 29, 0.14) var(--p, 60%)); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -7px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 0 0.5px rgba(0, 0, 0, 0.1); }
input[type=range]::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(23, 25, 29, 0.14); }
input[type=range]::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--charcoal); }
input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); }
.cc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 8px; }
.cc-grid > span { display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 8px; }

.today { left: 544px; top: 70px; width: 346px; }
.cal-head { font-size: 15px; font-weight: 500; margin: 2px 0 8px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-variant-numeric: tabular-nums; }
.cal-grid span { height: 30px; display: grid; place-items: center; }
.cal-grid .wd { height: 20px; font-size: 11px; font-weight: 500; color: var(--charcoal-2); }
.cal-grid .out { color: var(--charcoal-3); }
.cal-grid .now b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 600; }
.event { display: flex; gap: 10px; align-items: flex-start; margin-top: 10px; padding: 8px 10px; border-radius: 8px; background: rgba(47, 122, 229, 0.11); }
.event i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-top: 5px; flex: none; }
.event b, .playing b { display: block; font-weight: 600; }
.playing { display: flex; gap: 12px; align-items: center; }
.playing .art { width: 48px; height: 48px; border-radius: 6px; background: linear-gradient(135deg, #7fb4c9, #2c5f78 60%, #183746); flex: none; }

/* Weather */
.weather-pop { left: 330px; top: 60px; width: 380px; background: rgba(211, 223, 238, 0.86); box-shadow: inset 0 0 0 1px rgba(23, 25, 29, 0.14), 0 28px 60px rgba(10, 40, 70, 0.28); }
.w-head { height: 48px; display: flex; align-items: center; }
.w-head b { display: block; font-size: 13px; }
.w-now { display: flex; align-items: center; gap: 12px; margin: 4px 0 10px; }
.w-now svg { width: 44px; height: 44px; stroke-width: 1.4; }
.w-temp { font: 300 40px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.w-cond { margin-left: auto; text-align: right; }
.w-cond b { display: block; font-size: 15px; font-weight: 500; }
.w-hours { display: flex; justify-content: space-between; text-align: center; font-size: 12px; font-variant-numeric: tabular-nums; }
.w-hours span { width: 40px; display: grid; gap: 6px; justify-items: center; }
.w-hours svg { width: 20px; height: 20px; }
.w-hours b { font-size: 13px; font-weight: 500; }
.w-days div { display: grid; grid-template-columns: 56px 26px 34px 1fr 34px; align-items: center; height: 30px; font-variant-numeric: tabular-nums; }
.w-days svg { width: 18px; height: 18px; }
.w-days .lo { text-align: right; padding-right: 10px; color: var(--charcoal-2); }
.w-days .hi { text-align: right; }
.w-days .track { height: 4px; border-radius: 2px; background: rgba(23, 25, 29, 0.10); position: relative; }
.w-days .track i { position: absolute; top: 0; bottom: 0; border-radius: 2px; background: linear-gradient(to right, #4fc3e0, #f5c742); }

/* ---------------------------------------------------------------- closing */

/* Quit demo: Glassline's bar and dock leave, the Windows 11 taskbar comes back. Phases in demo.js:
   (none) Glassline, .menu the right-click menu, .quit bar and dock gone, taskbar in. */
#quit { --glow: #d49ac4; }
.q-bar {
  position: absolute; inset: 0 0 auto 0; height: 30px; display: flex; align-items: center; gap: 16px; padding: 0 14px;
  font-size: 12.5px; font-weight: 500; color: var(--charcoal);
  background: rgba(235, 207, 194, 0.24); -webkit-backdrop-filter: blur(24px) saturate(150%); backdrop-filter: blur(24px) saturate(150%);
  box-shadow: inset 0 -1px rgba(23, 25, 29, 0.14);
  transition: transform 520ms var(--ease), opacity 420ms;
}
.q-bar .s-app { font-weight: 700; }
.q-bar .s-fill { flex: 1; }
.q-bar svg { width: 15px; height: 15px; margin-left: -6px; }
.q-menu {
  position: absolute; left: 150px; top: 34px; width: 230px; padding: 4px; border-radius: 8px; font-size: 13px; color: var(--charcoal);
  background: rgba(246, 241, 238, 0.96); box-shadow: inset 0 0 0 1px rgba(23, 25, 29, 0.12), 0 18px 40px rgba(60, 30, 20, 0.28);
  opacity: 0; transform: translateY(-4px) scale(0.98); transform-origin: 20px 0; transition: opacity 160ms, transform 200ms var(--ease);
}
.q-menu span { display: block; padding: 7px 12px; border-radius: 5px; }
.q-menu i { display: block; height: 1px; margin: 4px 10px; background: rgba(23, 25, 29, 0.12); }
.q-menu .hot { background: var(--accent); color: #fff; }
.menu .q-menu { opacity: 1; transform: none; }
.quit .q-menu { opacity: 0; transition-duration: 120ms; }
.quit .q-bar { transform: translateY(-34px); opacity: 0; }
.q-dock { transition: transform 520ms var(--ease), opacity 420ms; }
.quit .q-dock { transform: translate(-50%, 90px); opacity: 0; }

.taskbar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 48px; display: flex; align-items: center; justify-content: center; color: #fff;
  background: rgba(32, 32, 36, 0.78); -webkit-backdrop-filter: blur(30px) saturate(140%); backdrop-filter: blur(30px) saturate(140%);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.08);
  transform: translateY(52px); transition: transform 560ms var(--ease) 240ms;
}
.quit .taskbar { transform: none; }
.tb-apps { display: flex; align-items: center; gap: 6px; }
.tb-apps > i { width: 30px; height: 30px; margin: 0 3px; border-radius: 23%; }
.tb-apps .c1 { background: linear-gradient(#5db2ff, #1f6fe0); } .tb-apps .c2 { background: linear-gradient(#44d6c4, #0f8f89); }
.tb-apps .c3 { background: linear-gradient(#ffe38a, #f4b73a); } .tb-apps .c4 { background: linear-gradient(#ff7a9a, #e2335a); }
.tb-start { display: grid; grid-template-columns: 9px 9px; gap: 1.5px; margin: 0 8px; }
.tb-start i { width: 9px; height: 9px; background: #4cc2ff; border-radius: 1px; }
.tb-search { display: flex; align-items: center; gap: 8px; width: 180px; height: 32px; padding: 0 12px; margin-right: 6px; border-radius: 16px; font-size: 13px; color: rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.08); }
.tb-search svg { width: 15px; height: 15px; }
.tb-tray { position: absolute; right: 12px; display: flex; align-items: center; gap: 10px; }
.tb-tray svg { width: 15px; height: 15px; }
.tb-time { display: grid; text-align: right; font-size: 11.5px; line-height: 1.35; margin-left: 6px; }
.tb-time small { color: #fff; font-size: 11.5px; }

.closing { padding: 180px var(--gutter) 40px; text-align: center; }
.closing img { width: 112px; height: 112px; margin: 0 auto 18px; }
.closing h2 { margin-bottom: 28px; }
.closing .store { background: var(--text); color: var(--charcoal); }
.closing .store:hover { background: #fff; }
.closing .note { margin: 16px 0 0; font-size: 14px; color: var(--tertiary); }

/* ---------------------------------------------------------------- reveal on scroll */

.reveal { opacity: 0; transform: translateY(28px); transition: opacity 800ms var(--ease), transform 900ms var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  * { animation: none !important; transition: none !important; }
}

/* ---------------------------------------------------------------- text pages (privacy, support) */

.page { padding: 104px var(--gutter) 40px; max-width: 768px; margin: 0 auto; }
.page h1 { margin: 0 0 8px; font: 600 44px/1.1 var(--font-display); letter-spacing: -0.02em; }
.page .updated { color: var(--tertiary); font-size: 14px; margin: 0 0 40px; }
.page .updated strong { color: var(--secondary); }
.page h2 { margin: 44px 0 10px; font: 600 22px/1.3 var(--font-display); }
.page p, .page li { color: var(--secondary); }
.page strong { color: var(--text); font-weight: 600; }
.page ul { padding-left: 20px; }
.page li { margin: 6px 0; }
.page a { text-decoration-color: var(--tertiary); text-underline-offset: 3px; }
.faq { border-top: 1px solid var(--hairline); }
.faq details { border-bottom: 1px solid var(--hairline); padding: 18px 0; }
.faq summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--tertiary); font-weight: 400; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { margin: 10px 0 0; }

/* ---------------------------------------------------------------- footer */

footer { margin-top: 120px; border-top: 1px solid var(--hairline); padding: 28px 0 44px; font-size: 14px; color: var(--tertiary); }
footer .wrap { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; }
footer a { text-decoration: none; color: var(--secondary); }
footer a:hover { color: var(--text); }
footer .spacer { flex: 1; }

/* ---------------------------------------------------------------- small screens */

@media (max-width: 720px) {
  :root { --gutter: 16px; }
  .menubar .hide-sm { display: none; }
  .hero { padding-bottom: 120px; }
  .hero-glass { padding: 32px 22px 28px; border-radius: 22px; }
  .hero-icon { width: 112px; height: 112px; }
  .hero .dock-items { gap: 5px; padding: 0 10px 8px; height: 56px; border-radius: 18px; }
  .hero .dock-item { width: 38px; height: 38px; }
  .hero .dock-item:nth-child(n+6):not(:nth-last-child(-n+2)) { display: none; }
  .hero .t-calendar i { font-size: 18px; } .hero .t-calendar b { font-size: 7px; }
  .feature { padding-top: 100px; }
  .screen { border-radius: 12px; }
}