:root {
        color-scheme: light;
        --ink: #14242b;
        --muted: #64737a;
        --paper: #fffdf7;
        --cream: #f2eadb;
        --red: #c92f43;
        --red-dark: #8f2033;
        --gold: #efb548;
        --green: #426c5c;
        --sky-top: #a8d6da;
        --sky-mid: #efd2aa;
        --sky-bottom: #dd8b72;
        --mountain-far: #879da0;
        --mountain-mid: #4d6567;
        --mountain-front: #263e40;
        --window-shadow: 0 25px 65px rgba(25, 35, 37, 0.3), 0 3px 12px rgba(25, 35, 37, 0.16);
        --topbar-h: 44px;
        --dock-h: 78px;
}

* {
    box-sizing: border-box;
}

html,
body{
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    font-family: Inter, "Segoe UI", Arial, sans-serif;
    color: var(--ink);
}

button,
input,
textarea{
    font: inherit;
}

button{
    color: inherit;
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible{
    outline: 3px solid rgba(201, 47, 67, 0.35);
    outline-offset: 2px;/
}

.boot-screen{
    position: fixed;
    z-index: 9999;
    inset: 0;
    display: grid;
    place-content: center;
    color: #fff8e8;
    background: #172b2d;
    transition: opacity 0.6s ease, visibility 0.6s;
}

.boot-screen.is-done{
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.boot-mark{
    position: relative;
    width: 94px;
    height: 58px;
    margin-bottom: 18px;
}

.boot-mark span{
    position: absolute;
    bottom: 0;
    width: 50px;
    height: 52px;
    background: var(--red);
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.boot-mark span:nth-child(1) { left: 0; height: 37px; opacity: 0.5; }
.boot-mark span:nth-child(2) { left: 22px; z-index: 2; }
.boot-mark span:nth-child(3) { right: 0; height: 31px; opacity: 0.72; }

.boot-name {
  margin: 0;
  font-family: Georgia, serif;
  font-size: 38px;
  letter-spacing: 0.08em;
}

.boot-subtitle {
  margin: 8px 0 34px;
  color: #a8bbb8;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.boot-loader {
  width: 140px;
  height: 2px;
  overflow: hidden;
  background: rgba(255,255,255,0.13);
}

.boot-loader i {
  display: block;
  width: 45%;
  height: 100%;
  background: var(--gold);
  animation: load 1.25s ease-in-out infinite;
}

@keyframes load {
  0% { transform: translateX(-110%); }
  100% { transform: translateX(330%); }
}

.desktop {
  position: relative;
  width: 100vw;
  height: 100dvh;
  overflow: hidden;
  isolation: isolate;
  background: var(--sky-mid);
}

.wallpaper,
.wallpaper > * {
  position: absolute;
  pointer-events: none;
}

.wallpaper {
  z-index: -2;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 22% 20%, rgba(255,255,255,.24), transparent 28%),
    linear-gradient(180deg, var(--sky-top), var(--sky-mid) 54%, var(--sky-bottom));
  transition: background 0.6s ease;
}

.wallpaper::after {
  content: "";
  inset: 0;
  opacity: 0.16;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

body[data-theme="dusk"] {
  --sky-top: #a3a2bc;
  --sky-mid: #d59a93;
  --sky-bottom: #bf5c58;
  --mountain-far: #77758b;
  --mountain-mid: #554f69;
  --mountain-front: #283b44;
}

body[data-theme="night"] {
  color-scheme: dark;
  --sky-top: #07172c;
  --sky-mid: #18334d;
  --sky-bottom: #4a555e;
  --mountain-far: #405066;
  --mountain-mid: #28394e;
  --mountain-front: #142739;
}

body[data-theme="night"] .wallpaper {
  background-image:
    radial-gradient(circle at 84% 14%, rgba(236,240,210,.9) 0 3px, transparent 4px),
    radial-gradient(circle at 69% 25%, rgba(255,255,255,.7) 0 1px, transparent 2px),
    radial-gradient(circle at 33% 18%, rgba(255,255,255,.55) 0 1px, transparent 2px),
    radial-gradient(circle at 12% 33%, rgba(255,255,255,.55) 0 1px, transparent 2px),
    linear-gradient(180deg, var(--sky-top), var(--sky-mid) 54%, var(--sky-bottom));
}

.sun {
  top: 13%;
  left: 18%;
  width: clamp(78px, 9vw, 140px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #f8ce75;
  box-shadow: 0 0 70px rgba(255, 212, 122, 0.48);
  transition: .6s ease;
}

body[data-theme="dusk"] .sun { left: 72%; top: 20%; background: #e66d66; }
body[data-theme="night"] .sun { left: 78%; top: 13%; transform: scale(.66); background: #eef1d7; box-shadow: 0 0 50px rgba(231,240,215,.3); }

.cloud {
  width: 150px;
  height: 28px;
  border-radius: 50%;
  opacity: 0.22;
  filter: blur(8px);
  background: #fff;
  animation: drift 24s ease-in-out infinite alternate;
}

.cloud-one { top: 28%; left: 32%; }
.cloud-two { top: 17%; right: 16%; transform: scale(.72); animation-duration: 31s; }

@keyframes drift {
  to { transform: translateX(38px); }
}

.mountain {
  bottom: 0;
  left: -5%;
  width: 110%;
  transform-origin: bottom center;
}

.mountain-far {
  height: 58%;
  opacity: 0.62;
  background: var(--mountain-far);
  clip-path: polygon(0 67%, 7% 61%, 13% 68%, 23% 45%, 28% 54%, 37% 29%, 43% 46%, 52% 9%, 59% 42%, 68% 23%, 77% 52%, 84% 37%, 91% 57%, 100% 45%, 100% 100%, 0 100%);
}

.mountain-mid {
  height: 45%;
  background: var(--mountain-mid);
  clip-path: polygon(0 60%, 10% 35%, 19% 53%, 28% 22%, 38% 58%, 48% 33%, 58% 61%, 67% 21%, 80% 60%, 91% 32%, 100% 58%, 100% 100%, 0 100%);
}

.mountain-front {
  height: 32%;
  background: var(--mountain-front);
  clip-path: polygon(0 45%, 9% 23%, 18% 55%, 29% 27%, 42% 64%, 54% 25%, 66% 60%, 77% 17%, 89% 51%, 100% 28%, 100% 100%, 0 100%);
}

.terraces {
  right: -4%;
  bottom: -3%;
  width: 47%;
  height: 27%;
  opacity: .32;
  border-radius: 80% 0 0 0;
  background: repeating-radial-gradient(ellipse at 100% 100%, transparent 0 20px, rgba(224,189,118,.6) 21px 24px, transparent 25px 39px);
  transform: rotate(-4deg);
}

.topbar {
  position: absolute;
  z-index: 1000;
  top: 0;
  left: 0;
  right: 0;
  height: var(--topbar-h);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 14px;
  color: #fdf9ec;
  background: rgba(18, 33, 36, .76);
  border-bottom: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(18px) saturate(120%);
  box-shadow: 0 2px 16px rgba(15,26,28,.12);
}

.brand-button,
.time-button {
  height: 100%;
  display: flex;
  align-items: center;
  border: 0;
  color: inherit;
  background: transparent;
  cursor: pointer;
}

.brand-button { gap: 8px; justify-self: start; }
.brand-button { cursor: default; }
.time-button { cursor: pointer; }
.brand-button svg { width: 22px; fill: var(--red); }
.brand-button span { font-family: Georgia, serif; font-size: 18px; letter-spacing: .06em; }
.time-button:hover { background: rgba(255,255,255,.08); }

.topbar-center {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  font-size: 11px;
  letter-spacing: .05em;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  background: rgba(0,0,0,.12);
}

.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #85caa4;
  box-shadow: 0 0 8px #85caa4;
}

.topbar-separator { opacity: .35; }

.time-button {
  justify-self: end;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  min-width: 112px;
  padding: 0 10px;
}

.time-button strong { font-size: 12px; line-height: 1; letter-spacing: .04em; }
.time-button span { margin-top: 3px; color: rgba(255,255,255,.62); font-size: 9px; letter-spacing: .05em; text-transform: uppercase; }

.desktop-shortcuts {
  position: absolute;
  z-index: 2;
  top: 68px;
  left: 20px;
  display: grid;
  gap: 8px;
}

.desktop-icon {
  width: 86px;
  min-height: 83px;
  padding: 7px 5px;
  border: 1px solid transparent;
  border-radius: 11px;
  color: #fff;
  background: transparent;
  text-shadow: 0 1px 4px rgba(0,0,0,.65);
  font-size: 11px;
  line-height: 1.25;
  cursor: default;
}

.desktop-icon:hover,
.desktop-icon:focus-visible {
  border-color: rgba(255,255,255,.3);
  background: rgba(255,255,255,.14);
  backdrop-filter: blur(8px);
}

.app-icon {
  width: 47px;
  height: 47px;
  display: grid;
  place-items: center;
  margin: 0 auto 5px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 13px;
  background: rgba(255,255,255,.84);
  box-shadow: 0 8px 18px rgba(29,39,40,.22), inset 0 1px rgba(255,255,255,.7);
}

.app-icon svg { width: 38px; height: 38px; fill: var(--green); }
.app-icon .icon-detail { fill: var(--gold); }
.app-icon .icon-line { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; }
.app-icon-notes { background: #f4e1b1; }
.app-icon-notes svg { fill: var(--red); }
.app-icon-calendar { background: #fff8ee; }
.app-icon-calendar svg { fill: #e8d8bf; }
.app-icon-calendar .icon-detail { fill: var(--red); }
.app-icon-calendar .icon-line { stroke: #78675e; }

.window {
  --x: 20%;
  --y: 12%;
  --w: 620px;
  --h: 440px;
  position: absolute;
  z-index: 10;
  top: var(--y);
  left: var(--x);
  width: min(var(--w), calc(100vw - 28px));
  height: min(var(--h), calc(100dvh - 125px));
  min-width: 360px;
  min-height: 260px;
  display: none;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.65);
  border-radius: 15px;
  background: rgba(255,253,247,.96);
  box-shadow: var(--window-shadow);
  backdrop-filter: blur(20px);
  resize: both;
  animation: window-in .24s cubic-bezier(.2,.85,.3,1.05);
}

.window.is-open { display: flex; flex-direction: column; }
.window.is-minimized { display: none; }
.window.is-maximized {
  top: calc(var(--topbar-h) + 8px) !important;
  left: 8px !important;
  width: calc(100vw - 16px) !important;
  height: calc(100dvh - var(--topbar-h) - var(--dock-h) - 18px) !important;
  border-radius: 12px;
  resize: none;
}

@keyframes window-in {
  from { opacity: 0; transform: translateY(12px) scale(.975); }
}

.window-titlebar {
  flex: 0 0 38px;
  height: 38px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 11px;
  border-bottom: 1px solid #ded9cc;
  background: rgba(245,241,231,.96);
  user-select: none;
  touch-action: none;
  cursor: grab;
}

.window.is-active .window-titlebar { background: #fffdf7; }
.window-titlebar:active { cursor: grabbing; }

.window-title {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #27383c;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
}

.mini-icon {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 6px;
  color: white;
  background: var(--red);
  font-size: 11px;
  font-weight: 700;
}

.window-controls {
  align-self: stretch;
  display: flex;
}

.window-controls button {
  width: 38px;
  border: 0;
  border-left: 1px solid rgba(108,105,96,.12);
  color: #526165;
  background: transparent;
  cursor: default;
}

.window-controls button:hover { background: rgba(65,75,76,.08); }
.window-controls button:last-child:hover { color: white; background: var(--red); }

.window-content {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

.resize-grip {
  position: absolute;
  z-index: 4;
  right: 2px;
  bottom: 2px;
  width: 14px;
  height: 14px;
  opacity: .35;
  background: linear-gradient(135deg, transparent 45%, #4d5a5c 47% 53%, transparent 55% 66%, #4d5a5c 68% 74%, transparent 76%);
  pointer-events: none;
}

.eyebrow {
  margin: 0 0 10px;
  color: var(--red);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .17em;
}

.peaks-content {
  display: grid;
  grid-template-columns: 230px 1fr;
  overflow: hidden;
}

.peaks-sidebar {
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 27px 19px 17px;
  color: #f3ebdc;
  background: #244247;
}

.peaks-sidebar .eyebrow { color: #eec062; }
.peaks-sidebar h2 { margin: 0 0 8px; font-family: Georgia, serif; font-size: 29px; font-weight: 500; }
.peaks-sidebar p:not(.eyebrow) { color: #aebdba; font-size: 10px; line-height: 1.55; }
.peak-list { min-height: 0; margin: 14px -5px 0; overflow: auto; scrollbar-width: thin; }

.peak-list button {
  width: 100%;
  display: grid;
  grid-template-columns: 27px 1fr auto;
  align-items: center;
  gap: 7px;
  padding: 8px;
  border: 0;
  border-radius: 7px;
  color: #ccd6d2;
  background: transparent;
  text-align: left;
  font-size: 10px;
  cursor: pointer;
}

.peak-list button:hover { background: rgba(255,255,255,.07); }
.peak-list button.is-selected { color: white; background: rgba(255,255,255,.13); }
.peak-list button span:first-child { color: #79928d; font-size: 8px; }
.peak-list button strong { font-size: 10px; }
.peak-list button em { color: #eac26c; font-size: 9px; font-style: normal; }
.sidebar-note { margin: auto 0 0 !important; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.12); }

.peak-detail {
  min-width: 0;
  padding: 24px 30px 25px;
  overflow: auto;
  background: #f8f3e8;
}

.peak-detail-top { display: flex; justify-content: space-between; align-items: center; }
.peak-number { font-family: Georgia, serif; color: #d6c8ae; font-size: 32px; }
.peak-region { padding: 5px 8px; border: 1px solid #d9ceba; border-radius: 999px; color: #7c725f; font-size: 8px; letter-spacing: .09em; text-transform: uppercase; }

.peak-illustration {
  position: relative;
  height: 145px;
  margin: 5px 0 10px;
  overflow: hidden;
  border-bottom: 1px solid #d7cdb9;
}

.peak-sun { position: absolute; top: 14px; right: 15%; width: 55px; aspect-ratio: 1; border-radius: 50%; background: #e9ba5e; }
.peak-shape { position: absolute; left: 3%; bottom: -1px; width: 94%; height: 130px; background: #486563; clip-path: polygon(0 100%, 21% 68%, 34% 74%, 58% 5%, 70% 51%, 81% 42%, 100% 100%); }
.peak-shape::after { content: ""; position: absolute; inset: 0; background: #f7f1e1; clip-path: polygon(58% 5%, 70% 51%, 62% 42%, 58% 54%, 53% 36%, 47% 51%); }
.peak-line { position: absolute; left: 7%; bottom: 18px; width: 86%; height: 1px; background: rgba(246,237,215,.35); box-shadow: 0 8px rgba(246,237,215,.2), 0 16px rgba(246,237,215,.12); transform: rotate(-4deg); }
.peak-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 15px; }
.peak-nepali { margin: 0; color: var(--red); font-size: 12px; font-weight: 700; }
.peak-heading h2 { margin: 2px 0 0; font-family: Georgia, serif; font-size: 31px; line-height: 1; font-weight: 500; }
.peak-height { flex: 0 0 auto; margin: 0; color: var(--red); font-size: 18px; font-weight: 750; text-align: right; }
.peak-height span { display: block; color: #8b8171; font-size: 8px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
.peak-story { margin: 15px 0 17px; color: #697575; font-size: 11px; line-height: 1.55; }

.notes-content { display: flex; flex-direction: column; padding: 22px 27px 15px; background-color: #faf5e8; background-image: repeating-linear-gradient(180deg, transparent 0 29px, rgba(117,105,83,.09) 30px); }
.notes-toolbar { display: flex; justify-content: space-between; color: #8f8678; font-size: 8px; letter-spacing: .11em; }
.save-state { display: flex; align-items: center; gap: 5px; color: #668172; letter-spacing: 0; }
.save-state i { width: 5px; height: 5px; border-radius: 50%; background: #5a9976; }
.save-state.is-saving i { background: #e1a842; }
.note-title { width: 100%; margin: 18px 0 9px; padding: 0; border: 0; color: #263a3b; background: transparent; font-family: Georgia, serif; font-size: 27px; font-weight: 500; }
.note-body { flex: 1 1 auto; width: 100%; min-height: 145px; padding: 0; border: 0; resize: none; color: #536262; background: transparent; font-family: Georgia, serif; font-size: 14px; line-height: 30px; }
.note-title:focus, .note-body:focus { outline: 0; }
.notes-footer { display: flex; justify-content: space-between; padding-top: 8px; color: #948d80; border-top: 1px solid rgba(120,109,88,.15); font-size: 8px; }

.calendar-content { display: grid; grid-template-columns: 200px 1fr; overflow: hidden; }
.calendar-hero { display: grid; align-content: center; justify-items: center; padding: 28px; color: #fff6e9; background: var(--red); text-align: center; }
.calendar-hero .eyebrow { color: #f6c867; }
.calendar-hero > strong { font-family: Georgia, serif; font-size: 79px; line-height: .9; font-weight: 400; }
.calendar-hero h2 { margin: 12px 0 5px; font-family: Georgia, serif; font-size: 20px; font-weight: 500; }
.calendar-hero > p:last-child { margin: 0; color: #f3bdc3; font-size: 9px; }
.festival-list { padding: 26px 25px; overflow: auto; background: #fbf7ed; }
.festival-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.festival-heading h3 { margin: 0; font-family: Georgia, serif; font-size: 20px; font-weight: 500; }
.festival-heading > span { color: #918979; font-size: 9px; }
.festival-list article { display: grid; grid-template-columns: 39px 1fr 1.12fr; align-items: center; gap: 10px; padding: 12px 0; border-top: 1px solid #e3dccd; }
.festival-list time { color: var(--red); font-size: 8px; font-weight: 800; letter-spacing: .1em; }
.festival-list article div { min-width: 0; }
.festival-list article strong, .festival-list article span { display: block; }
.festival-list article strong { font-size: 10px; }
.festival-list article span { margin-top: 2px; color: #9a9285; font-size: 8px; }
.festival-list article p { margin: 0; color: #6d7774; font-size: 9px; line-height: 1.35; }

.clock-content { padding: 28px; background: #faf6ec; }
.clock-large { display: block; margin-top: 15px; font-family: Georgia, serif; color: #253f41; font-size: clamp(42px,6vw,67px); line-height: .9; font-weight: 400; letter-spacing: -.04em; }
.clock-large span { color: var(--red); font-size: .5em; }
.clock-date { margin: 10px 0 25px; color: #7a8581; font-size: 11px; }
.world-times { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid #ddd5c6; }
.world-times div { padding: 14px 10px 0; border-right: 1px solid #ddd5c6; }
.world-times div:first-child { padding-left: 0; }
.world-times div:last-child { border: 0; }
.world-times span, .world-times strong, .world-times small { display: block; }
.world-times span { color: #87908c; font-size: 8px; text-transform: uppercase; letter-spacing: .07em; }
.world-times strong { margin: 5px 0 2px; color: #344c4c; font-size: 17px; }
.world-times small { color: #ae594e; font-size: 7px; }

.settings-content { padding: 27px; background: #fbf7ed; }
.settings-content h2 { margin: 0 0 17px; font-family: Georgia, serif; font-size: 27px; font-weight: 500; }
.theme-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-bottom: 21px; }
.theme-card { padding: 6px 6px 10px; border: 1px solid #ded6c6; border-radius: 9px; background: #fffdf8; text-align: left; cursor: pointer; }
.theme-card.is-selected { border-color: var(--red); box-shadow: 0 0 0 2px rgba(201,47,67,.12); }
.theme-preview { display: block; height: 52px; margin-bottom: 8px; border-radius: 5px; }
.theme-preview.dawn { background: linear-gradient(#9dd2d8,#efcba6 58%,#405a58 59%); }
.theme-preview.dusk { background: linear-gradient(#9999b3,#ce827e 58%,#384b59 59%); }
.theme-preview.night { background: linear-gradient(#07182e,#21425d 58%,#142b3e 59%); }
.theme-card strong, .theme-card small { display: block; }
.theme-card strong { font-size: 9px; }
.theme-card small { margin-top: 2px; color: #918b80; font-size: 7px; }
.dock {
  position: absolute;
  z-index: 1000;
  bottom: 13px;
  left: 50%;
  height: 59px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 17px;
  background: rgba(26,42,44,.69);
  box-shadow: 0 12px 35px rgba(9,23,25,.26), inset 0 1px rgba(255,255,255,.12);
  backdrop-filter: blur(20px) saturate(140%);
  transform: translateX(-50%);
}

.dock button {
  position: relative;
  width: 45px;
  height: 45px;
  display: grid;
  place-items: center;
  border: 0;
  padding: 0;
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
  transition: transform .16s ease, background .16s;
}

.dock button:hover { z-index: 2; background: rgba(255,255,255,.12); transform: translateY(-7px) scale(1.1); }
.dock button::before { content: attr(data-tooltip); position: absolute; bottom: calc(100% + 10px); left: 50%; padding: 5px 7px; border-radius: 4px; color: white; background: rgba(18,31,33,.9); font-size: 8px; white-space: nowrap; opacity: 0; transform: translate(-50%,5px); transition: .15s; pointer-events: none; }
.dock button:hover::before { opacity: 1; transform: translate(-50%,0); }
.dock button > i { position: absolute; bottom: 1px; width: 4px; height: 4px; border-radius: 50%; background: #f4c66a; opacity: 0; }
.dock button.is-running > i { opacity: 1; }
.dock-icon { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 10px; color: #f7eddb; background: #3b5958; box-shadow: inset 0 1px rgba(255,255,255,.15); font-family: Georgia, serif; font-size: 19px; }
.dock button:nth-of-type(2) .dock-icon { color: #a52f3b; background: #f4dfad; }
.dock button:nth-of-type(3) .dock-icon { color: #b62e3f; background: #fff4df; }
.dock button:nth-of-type(4) .dock-icon { color: #263f42; background: #e7bc61; }
.dock-divider { width: 1px; height: 30px; margin: 0 3px; background: rgba(255,255,255,.18); }

.search-pill {
  position: absolute;
  z-index: 5;
  right: 16px;
  bottom: 18px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 9px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 9px;
  color: rgba(255,255,255,.9);
  background: rgba(27,43,45,.58);
  backdrop-filter: blur(12px);
  font-size: 9px;
  cursor: pointer;
}
.search-pill > span:first-child { font-size: 14px; }
kbd { padding: 2px 4px; border: 1px solid rgba(255,255,255,.2); border-radius: 3px; color: rgba(255,255,255,.65); background: rgba(255,255,255,.08); font-family: inherit; font-size: 7px; }

.command-overlay {
  position: fixed;
  z-index: 5000;
  inset: 0;
  display: grid;
  place-items: start center;
  padding-top: 16vh;
  background: rgba(10,21,24,.28);
  backdrop-filter: blur(5px);
}
.command-overlay[hidden] { display: none; }
.command-palette { width: min(510px,calc(100vw - 26px)); overflow: hidden; border: 1px solid rgba(255,255,255,.48); border-radius: 14px; background: rgba(255,253,247,.97); box-shadow: 0 30px 80px rgba(10,24,26,.38); }
.command-input-row { display: grid; grid-template-columns: 25px 1fr auto; align-items: center; gap: 8px; padding: 14px; border-bottom: 1px solid #e2dacb; }
.command-input-row > span { color: var(--red); font-size: 23px; }
.command-input-row input { min-width: 0; border: 0; outline: 0; color: #223739; background: transparent; font-size: 15px; }
.command-input-row kbd { color: #7e796f; border-color: #d5cebf; background: #eee9df; }
.command-results { max-height: 290px; padding: 7px; overflow: auto; }
.command-result { width: 100%; display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 10px; padding: 8px; border: 0; border-radius: 7px; background: transparent; text-align: left; cursor: pointer; }
.command-result:hover, .command-result.is-selected { background: #eee8db; }
.command-result > span:first-child { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; color: white; background: var(--green); }
.command-result strong, .command-result small { display: block; }
.command-result strong { font-size: 10px; }
.command-result small { margin-top: 2px; color: #8b897f; font-size: 8px; }
.command-result > span:last-child { color: #9e978b; font-size: 9px; }
.command-empty { padding: 25px; color: #8d887e; text-align: center; font-size: 10px; }
.command-hint { display: flex; gap: 14px; padding: 9px 14px; color: #969084; border-top: 1px solid #e2dacb; background: #f5f0e6; font-size: 7px; }

.context-menu {
  position: fixed;
  z-index: 4000;
  width: 165px;
  padding: 5px;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 9px;
  background: rgba(255,253,247,.96);
  box-shadow: 0 15px 38px rgba(16,29,31,.28);
  backdrop-filter: blur(16px);
}
.context-menu[hidden] { display: none; }
.context-menu button { width: 100%; display: flex; align-items: center; gap: 8px; padding: 8px; border: 0; border-radius: 5px; color: #334747; background: transparent; text-align: left; font-size: 9px; cursor: pointer; }
.context-menu button:hover { background: #ebe5d9; }
.context-menu button span { width: 18px; color: var(--red); text-align: center; }

.toast {
  position: fixed;
  z-index: 6000;
  top: 58px;
  right: 17px;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 190px;
  padding: 10px 13px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 9px;
  color: white;
  background: rgba(31,55,54,.88);
  box-shadow: 0 12px 32px rgba(14,27,29,.28);
  backdrop-filter: blur(16px);
  opacity: 0;
  transform: translateY(-10px);
  transition: .25s;
  pointer-events: none;
}
.toast.is-visible { opacity: 1; transform: translateY(0); }
.toast > span { color: #efc368; }
.toast p { margin: 0; font-size: 9px; }

@media (max-width: 900px) {
  .desktop-shortcuts { grid-template-columns: repeat(2,86px); }
  .desktop-icon:nth-child(n+4) { display: none; }
  .search-pill { display: none; }
}

@media (max-width: 680px) {
  :root { --topbar-h: 42px; --dock-h: 73px; }
  .topbar { grid-template-columns: 1fr auto; }
  .topbar-center { display: none; }
  .desktop-shortcuts { top: 58px; left: 7px; grid-template-columns: repeat(2,74px); }
  .desktop-icon { width: 72px; }
  .window,
  .window.is-maximized {
    top: calc(var(--topbar-h) + 5px) !important;
    left: 5px !important;
    width: calc(100vw - 10px) !important;
    height: calc(100dvh - var(--topbar-h) - var(--dock-h) - 12px) !important;
    min-width: 0;
    min-height: 0;
    resize: none;
    border-radius: 10px;
  }
  .peaks-content { grid-template-columns: 1fr; overflow: auto; }
  .peaks-sidebar { display: block; padding: 20px; }
  .peak-list { display: grid; grid-template-columns: repeat(2,1fr); max-height: none; }
  .sidebar-note { display: none; }
  .calendar-content { grid-template-columns: 1fr; overflow: auto; }
  .calendar-hero { min-height: 220px; }
  .dock { height: 56px; bottom: 8px; }
  .dock button { width: 39px; height: 42px; }
  .dock-icon { width: 33px; height: 33px; }
  .dock-divider:last-of-type { display: none; }
  .resize-grip { display: none; }
}

@media (max-width: 410px) {                            
  .theme-grid { grid-template-columns: 1fr; }
  .theme-preview { height: 35px; }
  .dock-divider { margin: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}