/* The live desktop: a Mac at night with SAVISUL running. System face inside the OS, Geologica and Onest for the site's own voice. */

.desktop {
  position: relative; height: 100svh; min-height: 700px; max-height: 1180px; overflow: hidden; isolation: isolate;
  color: var(--ink); font-family: var(--ui);
}
.wallpaper { position: absolute; inset: 0; z-index: -1; background: url("../img/wallpaper.svg") center 64% / cover no-repeat, var(--ground); }
.wallpaper::after { content: ""; position: absolute; inset: auto 0 0; height: 140px; background: linear-gradient(180deg, transparent, var(--ground)); }

/* MARK: Menu bar */

.menubar {
  position: absolute; top: 0; left: 0; right: 0; height: 34px; z-index: 60; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 0 8px; font: 500 13px/1 var(--ui); color: var(--ink);
  background: rgba(40, 35, 29, 0.38); backdrop-filter: blur(28px) saturate(1.7); -webkit-backdrop-filter: blur(28px) saturate(1.7);
  box-shadow: inset 0 -0.5px 0 rgba(255, 255, 255, 0.07);
}
.menu-left, .menu-right { display: flex; align-items: center; gap: 1px; height: 100%; min-width: 0; }
.menu-wrap { position: relative; height: 100%; display: flex; align-items: center; }
.menu-trigger, .menu-link, .status-item {
  height: 24px; padding: 0 9px; border: 0; border-radius: 6px; background: none; color: inherit; display: inline-flex; align-items: center; gap: 7px;
  text-decoration: none; font: inherit; white-space: nowrap; cursor: pointer;
}
.menu-trigger:hover, .menu-link:hover, button.status-item:hover, .menu-trigger[aria-expanded="true"] { background: rgba(255, 255, 255, 0.14); }
.menu-link:focus-visible, .menu-trigger:focus-visible, .status-item:focus-visible { outline-offset: 0; }
.app-name b { font-weight: 700; letter-spacing: 0.01em; }
.app-name .mark { color: var(--champagne); }
.status-savisul .mark { color: var(--ink); }
.status-item.static { cursor: default; }
.battery-item { gap: 5px; font-variant-numeric: tabular-nums; }
.input-source { font: 650 10.5px/1 var(--ui); letter-spacing: 0.06em; padding: 0 7px; }
.input-source::before { content: ""; position: absolute; }
.clock { padding: 0 8px 0 6px; font-variant-numeric: tabular-nums; white-space: nowrap; display: inline-flex; gap: 0.5em; }
.menu {
  position: absolute; top: 30px; left: 0; min-width: 236px; padding: 5px; border-radius: 10px; z-index: 90;
  background: rgba(38, 35, 31, 0.9); backdrop-filter: blur(30px) saturate(1.6); -webkit-backdrop-filter: blur(30px) saturate(1.6);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.16), 0 24px 60px -18px rgba(0, 0, 0, 0.9);
  animation: menu-in 0.14s ease-out;
}
.menu-right .menu { left: auto; right: 0; min-width: 160px; }
.menu-item {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 26px; padding: 0 10px; border: 0; border-radius: 6px; background: none;
  color: var(--ink); text-decoration: none; font: 500 13px/1.2 var(--ui); text-align: left; cursor: pointer;
}
.menu-item:hover, .menu-item:focus-visible { background: var(--champagne); color: var(--on-champagne); outline: none; }
.menu-check { width: 14px; flex: none; display: grid; place-items: center; }
.menu hr { border: 0; height: 0.5px; background: rgba(255, 255, 255, 0.14); margin: 5px 8px; }
@keyframes menu-in { from { opacity: 0; transform: translateY(-4px); } }

/* MARK: Hero copy, set on the wallpaper */

.hero-copy {
  position: absolute; z-index: 5; left: clamp(28px, 6vw, 104px); top: clamp(176px, 25vh, 250px); width: min(580px, 42vw);
  font-family: var(--text);
}
.hero-copy h1 {
  font: 600 clamp(46px, min(5.6vw, 9.6vh), 92px)/0.98 var(--display); font-variation-settings: var(--sharp-display); letter-spacing: -0.035em; max-width: 11ch;
  text-shadow: 0 2px 40px rgba(0, 0, 0, 0.55);
}
.hero-lead { margin-top: clamp(16px, 2.6vh, 26px); font-size: clamp(16px, min(1.3vw, 2.3vh), 20px); line-height: 1.55; color: var(--ink-2); max-width: 44ch; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: clamp(20px, 3.4vh, 34px); }
.hero-meta { margin-top: 16px; font-size: 13px; color: var(--ink-3); }
.hero-live { margin-top: clamp(14px, 2.6vh, 26px); font-size: 13px; font-weight: 550; color: var(--champagne); display: flex; align-items: center; gap: 10px; }
.hero-live::before { content: ""; width: 20px; height: 1px; background: currentColor; opacity: 0.7; }

/* MARK: Island */

.island-host { position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 70; }
.island {
  --w: 236px; --h: 34px; --r: 14px;
  position: relative; width: var(--w); height: var(--h); color: var(--ink); font-family: var(--ui);
  transition: width 0.64s var(--spring), height 0.64s var(--spring);
}
.island[data-mode="peek"] { --w: min(420px, calc(100vw - 28px)); --h: 88px; --r: 28px; }
.island[data-mode="expanded"] { --w: min(684px, calc(100vw - 16px)); --h: var(--expanded-h, 220px); --r: 34px; }
.island-shape {
  position: absolute; inset: 0; background: #000; border-radius: 0 0 var(--r) var(--r);
  transition: border-radius 0.64s var(--spring), box-shadow 0.4s ease;
  box-shadow: 0 0 0 0.5px rgba(219, 199, 163, 0.3), 0 18px 44px -14px rgba(0, 0, 0, 0.95), 0 10px 50px -20px rgba(219, 199, 163, 0.26);
}
.island-shape::before, .island-shape::after { content: ""; position: absolute; top: 0; width: 12px; height: 12px; }
.island-shape::before { left: -12px; background: radial-gradient(circle at 0 100%, transparent 11.4px, #000 12px); }
.island-shape::after { right: -12px; background: radial-gradient(circle at 100% 100%, transparent 11.4px, #000 12px); }
.island-lens {
  position: absolute; z-index: 2; top: 12px; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 35% 32%, #3a4458 0, #12151c 45%, #050608 75%); box-shadow: 0 0 0 1.5px #0b0b0c, inset 0 0 0 0.5px rgba(255, 255, 255, 0.08);
}
.island-collapsed {
  position: absolute; left: 0; right: 0; top: 0; height: 34px; z-index: 1; display: flex; align-items: center; justify-content: space-between;
  padding: 0 14px 0 12px; border: 0; background: none; color: inherit; cursor: pointer; border-radius: 0 0 14px 14px; transition: opacity 0.2s ease;
}
.island[data-mode="expanded"] .island-collapsed { opacity: 0; pointer-events: none; }
.mini-art svg { border-radius: 6px; }
.eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.eq i { width: 3px; height: 30%; border-radius: 2px; background: var(--champagne); animation: eq 0.9s ease-in-out infinite alternate; }
.eq i:nth-child(2) { animation-duration: 0.62s; animation-delay: -0.2s; }
.eq i:nth-child(3) { animation-duration: 0.78s; animation-delay: -0.5s; }
.eq i:nth-child(4) { animation-duration: 0.55s; animation-delay: -0.1s; }
.island:not(.playing) .eq i { animation-play-state: paused; }
@keyframes eq { 0% { height: 22%; } 50% { height: 100%; } 100% { height: 46%; } }

.island-peek {
  position: absolute; left: 0; right: 0; top: 34px; height: 54px; display: flex; align-items: center; gap: 12px; padding: 0 22px 10px;
  opacity: 0; filter: blur(4px); pointer-events: none; transition: opacity 0.18s ease, filter 0.18s ease;
}
.island[data-mode="peek"] .island-peek { opacity: 1; filter: none; transition-delay: 0.16s; }
.peek-icon { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.12); color: var(--ink); }
.peek-icon.mint { background: rgba(140, 214, 176, 0.16); color: var(--mint); }
.peek-icon.amber { background: rgba(245, 186, 102, 0.16); color: var(--amber); }
.peek-icon.champagne { background: rgba(219, 199, 163, 0.16); color: var(--champagne); }
.peek-text { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.peek-title { font: 650 14px/1.2 var(--ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.peek-detail { font-size: 12px; color: rgba(245, 241, 234, 0.62); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.island-expanded {
  position: absolute; inset: 0; overflow: hidden; border-radius: 0 0 var(--r) var(--r); opacity: 0; filter: blur(6px); pointer-events: none;
  transition: opacity 0.16s ease, filter 0.16s ease, border-radius 0.64s var(--spring);
}
.island-inner { position: absolute; top: 0; left: 50%; width: min(684px, calc(100vw - 16px)); transform: translateX(-50%); padding: 0 16px 16px; }
.island[data-mode="expanded"] .island-expanded { opacity: 1; filter: none; pointer-events: auto; transition-delay: 0.14s; }
.island-top { height: 34px; display: flex; align-items: center; justify-content: space-between; gap: 120px; }
.island-tabs { display: flex; gap: 2px; align-items: center; }
.island-tab {
  height: 24px; min-width: 30px; padding: 0 8px; border: 0; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: none; color: rgba(245, 241, 234, 0.62); cursor: pointer; font: 650 12px/1 var(--ui);
}
.island-tab:hover { color: var(--ink); background: rgba(255, 255, 255, 0.09); }
.island-tab.active { background: var(--champagne); color: var(--on-champagne); padding: 0 11px 0 9px; }
.island-status { display: flex; align-items: center; gap: 6px; color: rgba(245, 241, 234, 0.78); font: 650 12px/1 var(--ui); }
.battery { display: inline-flex; align-items: center; gap: 5px; margin-right: 4px; font-variant-numeric: tabular-nums; }
.battery .icon { color: var(--mint); }
.icon-button { width: 26px; height: 26px; border: 0; border-radius: 13px; background: none; color: inherit; display: grid; place-items: center; cursor: pointer; }
.icon-button:hover { background: rgba(255, 255, 255, 0.1); }
.icon-button.on { color: var(--champagne); }
.island-panes { margin-top: 10px; }
.pane { animation: pane-in 0.32s var(--ease-out); }
@keyframes pane-in { from { opacity: 0; transform: translateY(4px); } }

.pane.home { display: grid; grid-template-columns: minmax(0, 1fr) 232px; gap: 14px; }
.player { display: flex; gap: 14px; min-width: 0; }
.cover { position: relative; width: 96px; height: 96px; flex: none; }
.cover > svg { width: 96px; height: 96px; border-radius: 14px; box-shadow: 0 12px 28px -12px rgba(0, 0, 0, 0.95), 0 0 0 0.5px rgba(255, 255, 255, 0.12); }
.cover-badge { position: absolute; right: -5px; bottom: -5px; width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; background: var(--champagne); color: var(--on-champagne); box-shadow: 0 0 0 2px #000; }
.track { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.track-head { display: flex; align-items: flex-start; gap: 10px; }
.track-head .grow { flex: 1; min-width: 0; }
.track-title { font: 650 15px/1.2 var(--ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.track-artist { font-size: 13px; color: rgba(245, 241, 234, 0.6); margin-top: 2px; }
.lyric-now { margin-top: 7px; font: 650 13px/1.35 var(--ui); color: var(--champagne); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lyric-now.rise { animation: rise 0.5s var(--ease-out); }
@keyframes rise { from { opacity: 0; transform: translateY(5px); filter: blur(2px); } }
.lyric-next { font-size: 12px; color: rgba(245, 241, 234, 0.45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.progress { margin-top: 9px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.14); overflow: hidden; }
.progress span { display: block; height: 100%; background: var(--ink); transform-origin: left; transition: transform 0.5s linear; }
.times { display: flex; justify-content: space-between; font: 550 11px/1 var(--ui); color: rgba(245, 241, 234, 0.5); margin-top: 5px; font-variant-numeric: tabular-nums; }
.controls { display: flex; justify-content: center; gap: 16px; margin-top: 2px; }
.ctrl { width: 36px; height: 30px; border: 0; background: none; color: var(--ink); display: grid; place-items: center; border-radius: 10px; cursor: pointer; }
.ctrl:hover { background: rgba(255, 255, 255, 0.1); }
.home-side { display: flex; flex-direction: column; gap: 10px; }
.card { border-radius: 16px; background: rgba(255, 255, 255, 0.075); padding: 10px 12px; display: flex; align-items: center; gap: 10px; min-height: 52px; }
.card .grow { flex: 1; min-width: 0; }
.card b { display: block; font: 650 13px/1.3 var(--ui); }
.card small { display: block; font-size: 12px; color: rgba(245, 241, 234, 0.58); }
.event-icon, .timer-icon { color: rgba(245, 241, 234, 0.75); display: grid; }
.chip { height: 26px; padding: 0 9px; border: 0; border-radius: 13px; background: rgba(255, 255, 255, 0.12); color: var(--ink); font: 650 12px/1 var(--ui); cursor: pointer; white-space: nowrap; }
.chip:hover { background: rgba(255, 255, 255, 0.2); }
.timer-card { gap: 6px; }
.timer-ring { width: 30px; height: 30px; flex: none; }
.timer-text { flex: 1; display: flex; flex-direction: column; }
.timer-text b { font: 650 15px/1.1 var(--ui); font-variant-numeric: tabular-nums; }
.round { width: 26px; height: 26px; flex: none; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.12); color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.round:hover { background: rgba(255, 255, 255, 0.2); }

.pane-head { display: flex; align-items: center; gap: 7px; font: 650 12px/1.2 var(--ui); color: rgba(245, 241, 234, 0.7); margin-bottom: 8px; }
.agents { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.agent { border-radius: 14px; background: rgba(255, 255, 255, 0.065); padding: 10px 12px; min-width: 0; }
.agent-head { display: flex; gap: 10px; align-items: center; }
.agent-head .grow { flex: 1; min-width: 0; }
.agent-glyph { width: 28px; height: 28px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); display: grid; place-items: center; flex: none; }
.agent b { font: 650 13px/1.25 var(--ui); display: block; }
.agent small { font-size: 12px; color: rgba(245, 241, 234, 0.58); display: flex; align-items: center; gap: 6px; }
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 3px rgba(140, 214, 176, 0.2); flex: none; }
.agent-project { margin-top: 8px; font: 500 12px/1 var(--mono); color: rgba(245, 241, 234, 0.66); }
.agent.none { opacity: 0.6; }
.usage { margin-top: 9px; }
.usage-bar { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.usage-bar span { display: block; height: 100%; background: var(--champagne); transform-origin: left; }
.usage small { margin-top: 6px; display: block; }

.pane.files { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 14px; }
.files-col { min-width: 0; }
.shelf-drop {
  border-radius: 14px; border: 1.5px dashed rgba(255, 255, 255, 0.2); min-height: 118px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; text-align: center; padding: 12px; color: rgba(245, 241, 234, 0.72); transition: border-color 0.15s, background 0.15s;
}
.shelf-drop b { font: 650 12px/1.3 var(--ui); }
.shelf-drop small { font-size: 11px; color: rgba(245, 241, 234, 0.48); }
.shelf-drop.over { border-color: var(--champagne); background: rgba(219, 199, 163, 0.08); color: var(--champagne); }
.shelf-drop.has-files { min-height: 58px; flex-direction: row; gap: 10px; }
.shelf-drop.has-files small { display: none; }
.shelf-list, .downloads { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.shelf-list { margin-top: 8px; }
.shelf-list li, .downloads li { display: flex; align-items: center; gap: 10px; min-width: 0; }
.shelf-list .grow, .downloads .grow { flex: 1; min-width: 0; }
.shelf-list b, .downloads b { display: block; font: 600 12px/1.3 var(--ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shelf-list small, .downloads small { display: block; font-size: 11px; color: rgba(245, 241, 234, 0.5); }
.downloads li { cursor: grab; padding: 3px 4px; margin: -3px -4px; border-radius: 8px; }
.downloads li:hover { background: rgba(255, 255, 255, 0.06); }
.shelf-note { justify-content: space-between; }
.file-thumb { width: 26px; height: 30px; border-radius: 5px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.12); color: rgba(245, 241, 234, 0.78); flex: none; font: 800 7.5px/1 var(--ui); }
.file-thumb.pdf { background: #ece6db; color: #b23a2b; }
.file-thumb.image { background: linear-gradient(135deg, #c18f5a, #2b2016); color: #fff; }
.file-thumb.disk { background: linear-gradient(180deg, #e3e0da, #bdb8af); color: #2c2a26; }
.link { border: 0; background: none; color: var(--champagne); font: 650 12px/1 var(--ui); cursor: pointer; padding: 0; }

.pane.camera { display: flex; gap: 16px; align-items: center; }
.mirror { width: 200px; height: 124px; border-radius: 16px; overflow: hidden; display: grid; place-items: center; flex: none; color: rgba(245, 241, 234, 0.4); background: radial-gradient(circle at 50% 40%, #2c2723, #0e0d0c); }
.mirror video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.camera-copy { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; min-width: 0; }
.camera-copy b { font: 650 15px/1.25 var(--ui); }
.camera-copy small { color: rgba(245, 241, 234, 0.58); font-size: 12px; }
.pill-button { height: 30px; padding: 0 14px; margin-top: 4px; border: 0; border-radius: 15px; background: var(--champagne); color: var(--on-champagne); font: 650 12px/1 var(--ui); cursor: pointer; }

/* MARK: Windows */

.windows { position: absolute; inset: 0; z-index: 10; pointer-events: none; }
.win {
  position: absolute; pointer-events: auto; display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; color: var(--ink); font-family: var(--ui);
  background: rgba(34, 31, 28, 0.8); backdrop-filter: blur(36px) saturate(1.6); -webkit-backdrop-filter: blur(36px) saturate(1.6);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.15), 0 44px 90px -30px rgba(0, 0, 0, 0.88), 0 14px 30px -18px rgba(0, 0, 0, 0.6);
}
.win:not(.focused) { box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.1), 0 28px 60px -30px rgba(0, 0, 0, 0.75); }
.win.gliding { transition: left 0.42s var(--ease-out), top 0.42s var(--ease-out), width 0.42s var(--ease-out), height 0.42s var(--ease-out); }
.win-bar { height: 38px; flex: none; display: flex; align-items: center; gap: 12px; padding: 0 14px; cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none; }
.win.dragging .win-bar { cursor: grabbing; }
.lights { display: flex; gap: 8px; flex: none; }
.light { width: 12px; height: 12px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; background: #ff5f57; box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.25); }
.light.min { background: #febc2e; }
.light.zoom { background: #28c840; }
.win:not(.focused) .light { background: rgba(255, 255, 255, 0.2); }
.win-title { flex: 1; text-align: center; font: 650 13px/1 var(--ui); color: rgba(245, 241, 234, 0.72); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.win-spacer { width: 52px; flex: none; }
.snap-preview {
  position: absolute; z-index: 9; border-radius: 14px; display: grid; place-items: center; opacity: 0; pointer-events: none;
  background: rgba(219, 199, 163, 0.1); box-shadow: inset 0 0 0 1.5px rgba(219, 199, 163, 0.6); transition: opacity 0.18s ease, left 0.2s var(--ease-out), top 0.2s var(--ease-out), width 0.2s var(--ease-out), height 0.2s var(--ease-out);
}
.snap-preview.show { opacity: 1; }
.snap-preview span { font: 650 13px/1 var(--ui); color: var(--champagne); padding: 8px 14px; border-radius: 99px; background: rgba(14, 13, 12, 0.72); }

/* The Start here note, on champagne paper. */
.win.note-win { background: linear-gradient(180deg, #f1e7d1, #e5d6b7); color: #2b241a; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.55), 0 34px 70px -26px rgba(0, 0, 0, 0.88); }
.note-win .win-bar { background: rgba(120, 95, 55, 0.1); }
.note-win .win-title { color: rgba(43, 36, 26, 0.66); }
.note-win:not(.focused) .light { background: rgba(43, 36, 26, 0.2); }
.note-body { padding: 14px 18px 16px; overflow: auto; }
.note-title { font: 600 20px/1.2 var(--display); font-variation-settings: var(--sharp-small); letter-spacing: -0.015em; margin-bottom: 6px; }
.note-list { list-style: none; margin: 0; padding: 0; }
.note-item { width: 100%; display: flex; gap: 10px; align-items: flex-start; text-align: left; border: 0; background: none; padding: 7px 0; font: 500 14px/1.38 var(--text); color: #2b241a; cursor: pointer; }
.note-item:hover span:last-child { text-decoration: underline; text-decoration-color: rgba(43, 36, 26, 0.4); text-underline-offset: 3px; }
.note-item:focus-visible { outline-color: #6b5531; }
.note-check { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid rgba(43, 36, 26, 0.5); flex: none; margin-top: 2px; transition: background 0.2s ease; }
.note-item.done .note-check { background: #2b241a; border-color: #2b241a; box-shadow: inset 0 0 0 3px #eadfc6; }
.note-item.done span:last-child { color: rgba(43, 36, 26, 0.62); }
.note-foot { margin-top: 10px; font-size: 12px; line-height: 1.4; color: rgba(43, 36, 26, 0.64); }

/* Terminal */
.win.terminal-win { background: rgba(17, 16, 14, 0.93); }
.term { padding: 12px 18px 16px; font: 400 13px/1.7 var(--mono); color: #ebe6dc; overflow: auto; }
.term-line { white-space: pre-wrap; overflow-wrap: anywhere; }
.term-line.dim { color: rgba(235, 230, 220, 0.5); }
.term-line.note { color: rgba(219, 199, 163, 0.8); }
.prompt { color: var(--mint); }
.term-actions { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 10px 0 6px; }
.term-link { display: inline-flex; gap: 7px; align-items: center; color: var(--champagne); text-decoration: none; border-bottom: 1px solid rgba(219, 199, 163, 0.35); }
.term-link:hover { border-color: var(--champagne); }
.cursor { display: inline-block; width: 8px; height: 15px; background: rgba(235, 230, 220, 0.8); vertical-align: -3px; animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* MARK: Browser and the extension's notch */

.win.browser-win { background: #1e1c1a; }
.browser { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.browser-chrome { flex: none; background: #151413; }
.browser-chrome .win-bar { height: 42px; align-items: flex-end; padding: 0 12px 0 14px; gap: 16px; }
.browser-chrome .lights { align-self: center; }
.browser-chrome .win-spacer { display: none; }
.browser-tabs { flex: 1; min-width: 0; display: flex; align-items: flex-end; height: 100%; }
.browser-tab {
  display: flex; align-items: center; gap: 8px; max-width: 260px; height: 33px; padding: 0 12px; border-radius: 10px 10px 0 0; background: #1e1c1a;
  color: #ece7de; font: 500 12px/1 var(--ui); min-width: 0;
}
.browser-tab .icon { color: rgba(236, 231, 222, 0.5); flex: none; }
.tab-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tab-fav { width: 16px; height: 16px; flex: none; border-radius: 4px; display: grid; place-items: center; background: #a1402b; color: #fff; font: 700 10px/1 Georgia, serif; }
.browser-bar { display: flex; align-items: center; gap: 12px; height: 42px; padding: 0 12px; background: #1e1c1a; color: #a39d93; box-shadow: inset 0 -0.5px 0 rgba(255, 255, 255, 0.07); }
.nav-buttons { display: flex; align-items: center; gap: 12px; }
.flip { display: block; transform: scaleX(-1); }
.omnibox { flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px; height: 30px; padding: 0 14px; border-radius: 999px; background: #2a2826; font: 13px/1 var(--ui); }
.omnibox .host { color: #ece7de; flex: none; }
.omnibox .path { color: #7f786e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ext-button { width: 30px; height: 30px; border: 0; border-radius: 8px; display: grid; place-items: center; background: rgba(219, 199, 163, 0.12); color: var(--champagne); cursor: pointer; flex: none; }
.ext-button:hover { background: rgba(219, 199, 163, 0.22); }
.browser-viewport { position: relative; flex: 1; min-height: 0; overflow: hidden; background: #faf8f3; }
.wp-scroll { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }

.wp {
  --wp-bg: #faf8f3; --wp-ink: #201c17; --wp-muted: #6a6358; --wp-line: #e4ddcf; --wp-accent: #a1402b; --wp-soft: #f1e8da;
  min-height: 100%; background: var(--wp-bg); color: var(--wp-ink); font: 400 16px/1.65 "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  transition: background 0.35s ease, color 0.35s ease;
}
.wp.dark { --wp-bg: #171614; --wp-ink: #e9e3d7; --wp-muted: #a49b8c; --wp-line: #2d2a26; --wp-accent: #e39478; --wp-soft: #221f1c; }
.wp-header { display: flex; align-items: center; gap: 24px; padding: 14px 32px 14px; border-bottom: 1px solid var(--wp-line); font-family: var(--ui); }
.wp-logo { font: 700 19px/1 "Iowan Old Style", Georgia, serif; letter-spacing: -0.01em; }
.wp-header nav { display: flex; gap: 18px; margin-left: auto; }
.wp-header nav a { color: var(--wp-muted); text-decoration: none; font-size: 13px; }
.wp-main { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 36px; max-width: 900px; margin: 0 auto; padding: 46px 32px 110px; }
.wp-article h1 { font: 700 clamp(26px, 3vw, 36px)/1.12 "Iowan Old Style", Georgia, serif; letter-spacing: -0.01em; margin: 0 0 10px; }
.wp-byline { font: 13px/1.4 var(--ui); color: var(--wp-muted); margin-bottom: 20px !important; }
.wp-figure { margin: 0 0 18px; }
.wp-figure svg { width: 100%; height: auto; border-radius: 6px; }
.wp-article p { margin: 0 0 14px; }
.wp-article blockquote { position: relative; margin: 26px 0; padding: 0 0 0 34px; font-size: 20px; line-height: 1.45; font-style: italic; color: var(--wp-ink); }
.wp-article blockquote::before { content: "“"; position: absolute; left: 0; top: -8px; font: 700 48px/1 Georgia, serif; color: var(--wp-accent); }
.wp-article table { width: 100%; border-collapse: collapse; font: 14px/1.4 var(--ui); margin: 20px 0 24px; }
.wp-article caption { text-align: left; font-weight: 700; margin-bottom: 8px; }
.wp-article th, .wp-article td { padding: 9px 12px 9px 0; border-bottom: 1px solid var(--wp-line); text-align: left; }
.wp-article th { font-weight: 600; color: var(--wp-muted); font-size: 12px; }
.wp-aside { position: sticky; top: 20px; align-self: start; padding: 16px; border-radius: 10px; background: var(--wp-soft); font: 13px/1.45 var(--ui); }
.wp-aside b { display: block; font-size: 14px; margin-bottom: 6px; }
.wp-sub { display: inline-block; margin-top: 10px; padding: 7px 12px; border-radius: 7px; background: var(--wp-accent); color: #fff; font: 650 12px/1 var(--ui); }
.wp-cookie { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 32px; background: #2a2622; color: #f1ece2; font: 13px/1.4 var(--ui); }
.wp.reader { --wp-bg: #f3ecdf; font-size: 18px; }
.wp.reader.dark { --wp-bg: #1a1815; }
.wp.reader .wp-header, .wp.reader .wp-aside, .wp.reader .wp-cookie { display: none; }
.wp.reader .wp-main { grid-template-columns: minmax(0, 620px); justify-content: center; padding-top: 60px; }
.wp-gone { display: none !important; }
.wp.picking, .wp.picking * { cursor: crosshair !important; }
.wp.outlines * { outline: 1px solid rgba(161, 64, 43, 0.45); }
.wp-box { position: absolute; z-index: 4; pointer-events: none; border-radius: 3px; border: 1.5px solid var(--champagne-deep); background: rgba(219, 199, 163, 0.16); opacity: 0; transition: left 0.08s linear, top 0.08s linear, width 0.08s linear, height 0.08s linear, opacity 0.12s; }
.wp-box.show { opacity: 1; }
.wp-box.danger { border-color: #e2584a; background: rgba(226, 88, 74, 0.14); }
.wp-tip { position: absolute; z-index: 5; pointer-events: none; display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 9px; background: rgba(18, 17, 15, 0.94); color: var(--ink); font: 650 12px/1.2 var(--ui); box-shadow: 0 10px 26px -10px rgba(0, 0, 0, 0.7); opacity: 0; }
.wp-tip.show { opacity: 1; }
.wp-tip small { color: rgba(245, 241, 234, 0.6); font-weight: 500; }
.sw { width: 14px; height: 14px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); flex: none; }
.wp-toast {
  position: absolute; z-index: 8; top: 52px; left: 50%; transform: translate(-50%, -8px); max-width: calc(100% - 32px); padding: 9px 14px; border-radius: 12px; opacity: 0; pointer-events: none;
  background: rgba(18, 17, 15, 0.94); color: var(--ink); font: 650 12px/1.3 var(--ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity 0.2s, transform 0.3s var(--ease-out);
}
.wp-toast.show { opacity: 1; transform: translate(-50%, 0); }

.ext-notch { position: absolute; z-index: 7; top: 0; left: 50%; transform: translateX(-50%); color: var(--ink); font-family: var(--ui); }
.ext-pill { display: flex; align-items: center; justify-content: center; width: 132px; height: 26px; border: 0; border-radius: 0 0 14px 14px; background: #0c0b0a; color: var(--ink); cursor: pointer; box-shadow: 0 8px 22px -10px rgba(0, 0, 0, 0.6); }
.ext-notch:not([data-view="idle"]) .ext-pill { display: none; }
.ext-notch[data-view="idle"] .ext-body { display: none; }
.ext-body {
  width: min(472px, calc(100vw - 48px)); padding: 12px 14px 14px; border-radius: 0 0 24px 24px; transform-origin: 50% 0;
  background: rgba(14, 13, 12, 0.95); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.12), 0 24px 60px -20px rgba(0, 0, 0, 0.8); animation: ext-in 0.32s var(--ease-out);
}
.ext-notch[data-view="mode"] .ext-body { width: min(440px, calc(100vw - 48px)); padding: 10px 12px; border-radius: 0 0 20px 20px; }
@keyframes ext-in { from { opacity: 0; transform: scaleY(0.6) scaleX(0.7); filter: blur(4px); } }
.ext-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 13px; }
.ext-head b { letter-spacing: 0.06em; font-size: 12px; }
.ext-host { flex: 1; color: rgba(245, 241, 234, 0.5); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ext-x { width: 26px; height: 26px; border: 0; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.08); color: var(--ink); cursor: pointer; flex: none; }
.ext-section { font: 650 11px/1 var(--ui); color: rgba(245, 241, 234, 0.5); margin: 12px 2px 8px; }
.ext-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.ext-tile {
  height: 62px; border: 0; border-radius: 13px; background: rgba(255, 255, 255, 0.07); color: var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; font: 550 11px/1.1 var(--ui); cursor: pointer; padding: 0 4px; text-align: center;
}
.ext-tile span:last-child { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ext-tile:hover, .ext-chip:hover { background: rgba(255, 255, 255, 0.13); }
.ext-tile.on, .ext-chip.on { background: rgba(219, 199, 163, 0.2); color: var(--champagne); }
.ext-tile.soon, .ext-chip.soon { color: rgba(245, 241, 234, 0.58); }
.ext-tile-icon { display: grid; }
.ext-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ext-chip { height: 32px; padding: 0 12px; border: 0; border-radius: 10px; background: rgba(255, 255, 255, 0.07); color: var(--ink); display: inline-flex; align-items: center; gap: 7px; font: 550 12px/1 var(--ui); cursor: pointer; }
.ext-mode { display: flex; align-items: center; gap: 10px; }
.ext-mode .grow { flex: 1; min-width: 0; }
.ext-mode b { display: block; font-size: 13px; }
.ext-mode small { display: block; font-size: 12px; color: rgba(245, 241, 234, 0.58); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ext-mode-icon { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(219, 199, 163, 0.16); color: var(--champagne); flex: none; }
.ext-small { height: 28px; padding: 0 12px; border: 0; border-radius: 9px; background: rgba(255, 255, 255, 0.1); color: var(--ink); font: 650 12px/1 var(--ui); cursor: pointer; flex: none; }
.ext-small.primary { background: var(--champagne); color: var(--on-champagne); }
.ext-panel { display: flex; flex-direction: column; gap: 10px; }
.ext-panel-head { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.ext-panel textarea { width: 100%; min-height: 92px; border: 0; border-radius: 12px; background: rgba(255, 255, 255, 0.08); color: var(--ink); padding: 10px 12px; font: 13px/1.45 var(--ui); resize: vertical; outline: none; }
.ext-panel textarea:focus { box-shadow: inset 0 0 0 1px rgba(219, 199, 163, 0.6); }
.ext-panel > .ext-small { align-self: flex-end; }
.link-row { display: flex; gap: 14px; align-items: center; }
.link-row .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.link-row code { font-size: 12px; color: var(--champagne-hi); overflow-wrap: anywhere; }
.link-row small { color: var(--mint); font-size: 12px; }
.ext-qr { width: 104px !important; height: 104px !important; border-radius: 10px; image-rendering: pixelated; flex: none; }
.link-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }

/* MARK: Overlays */

.overlay-layer { position: fixed; inset: 0; z-index: 300; pointer-events: none; }
.overlay-layer:has(.overlay:not(.closing)) { pointer-events: auto; }
.overlay {
  position: absolute; left: 50%; top: 18vh; width: min(660px, calc(100vw - 24px)); overflow: hidden; border-radius: 20px; color: var(--ink); font-family: var(--ui);
  background: rgba(30, 28, 25, 0.86); backdrop-filter: blur(44px) saturate(1.8); -webkit-backdrop-filter: blur(44px) saturate(1.8);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.16), 0 44px 110px -30px rgba(0, 0, 0, 0.92);
  opacity: 0; transform: translate(-50%, -8px) scale(0.985); filter: blur(4px); transition: opacity 0.16s ease, transform 0.24s var(--ease-out), filter 0.16s ease;
}
.overlay.show { opacity: 1; transform: translate(-50%, 0) scale(1); filter: none; }
.overlay kbd { height: 24px; min-width: 24px; font-size: 12px; padding: 0 7px; }
.cmd-field { display: flex; align-items: center; gap: 12px; padding: 0 16px 0 18px; height: 62px; color: rgba(245, 241, 234, 0.55); }
.cmd-input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--ink); font: 400 21px/1 var(--ui); letter-spacing: -0.01em; }
.cmd-input::placeholder, .clip-input::placeholder { color: rgba(245, 241, 234, 0.4); }
.cmd-results { max-height: min(420px, 52vh); overflow-y: auto; padding: 6px; border-top: 0.5px solid rgba(255, 255, 255, 0.1); scrollbar-width: thin; }
.cmd-section { font: 650 12px/1 var(--ui); color: rgba(245, 241, 234, 0.48); padding: 12px 12px 6px; }
.cmd-row, .clip-row {
  width: 100%; display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 0 12px; border: 0; border-radius: 10px; background: none; color: var(--ink);
  text-align: left; cursor: pointer; font: 500 14px/1.2 var(--ui);
}
.cmd-row.on, .clip-row.on { background: var(--champagne); color: var(--on-champagne); }
.cmd-icon, .clip-icon { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; flex: none; background: rgba(255, 255, 255, 0.08); color: rgba(245, 241, 234, 0.82); }
.cmd-row.on .cmd-icon, .clip-row.on .clip-icon { background: rgba(23, 19, 14, 0.12); color: rgba(23, 19, 14, 0.8); }
.cmd-title, .clip-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmd-detail, .clip-when { font-size: 12px; color: rgba(245, 241, 234, 0.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 48%; }
.cmd-row.on .cmd-detail, .clip-row.on .clip-when { color: rgba(23, 19, 14, 0.66); }
.cmd-empty { padding: 20px; color: rgba(245, 241, 234, 0.5); font-size: 14px; text-align: center; }
.overlay-hint { padding: 10px 16px; font-size: 12px; color: rgba(245, 241, 234, 0.5); border-top: 0.5px solid rgba(255, 255, 255, 0.08); background: rgba(0, 0, 0, 0.14); }
.overlay.clip { width: min(780px, calc(100vw - 24px)); }
.clip-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 0.5px solid rgba(255, 255, 255, 0.1); }
.clip-head b { font-size: 14px; }
.clip-input { flex: 1; min-width: 0; height: 34px; border: 0; border-radius: 9px; background: rgba(255, 255, 255, 0.08); color: var(--ink); padding: 0 12px; font: 14px/1 var(--ui); outline: 0; }
.clip-input:focus { box-shadow: inset 0 0 0 1px rgba(219, 199, 163, 0.55); }
.clip-body { display: grid; grid-template-columns: minmax(0, 1fr) 260px; height: min(380px, 52vh); }
.clip-list { overflow-y: auto; padding: 6px; scrollbar-width: thin; }
.clip-preview { border-left: 0.5px solid rgba(255, 255, 255, 0.1); padding: 16px; overflow: auto; }
.clip-kind { display: flex; gap: 8px; align-items: center; font: 650 12px/1 var(--ui); color: rgba(245, 241, 234, 0.58); margin-bottom: 14px; }
.clip-full { font: 13px/1.55 var(--mono); color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.clip-full.link { color: var(--champagne); }
.clip-big-swatch { height: 96px; border-radius: 12px; margin-bottom: 12px; box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.22); }
.clip-swatch { width: 26px; height: 26px; border-radius: 7px; flex: none; box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.3); }
.overlay.switcher { top: 32vh; width: auto; max-width: calc(100vw - 24px); }
.switch-row { display: flex; gap: 10px; padding: 16px; overflow-x: auto; }
.switch-tile { width: 136px; flex: none; border: 0; border-radius: 16px; padding: 10px; display: flex; flex-direction: column; align-items: center; gap: 10px; background: none; color: var(--ink); cursor: pointer; }
.switch-tile.on { background: rgba(255, 255, 255, 0.12); box-shadow: inset 0 0 0 1px rgba(219, 199, 163, 0.6); }
.switch-thumb { width: 116px; height: 76px; border-radius: 10px; display: grid; place-items: center; color: var(--champagne); background: linear-gradient(180deg, #2f2c28, #1a1816); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.12); }
.switch-thumb.note { background: linear-gradient(180deg, #f1e7d1, #e1d1b0); color: #2b241a; }
.switch-thumb.browser { background: linear-gradient(180deg, #faf8f3, #e9e3d6); color: #a1402b; }
.switch-thumb.terminal { background: #121110; color: var(--mint); }
.switch-title { font: 650 12px/1.2 var(--ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* MARK: Dock */

.dock {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 40; display: flex; align-items: flex-end; gap: 4px; padding: 6px 8px;
  border-radius: 22px; background: rgba(36, 33, 29, 0.42); backdrop-filter: blur(30px) saturate(1.6); -webkit-backdrop-filter: blur(30px) saturate(1.6);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.17), 0 22px 50px -20px rgba(0, 0, 0, 0.85);
}
.dock-item { --mag: 1; position: relative; display: block; width: 56px; height: 56px; padding: 0; border: 0; background: none; cursor: pointer; text-decoration: none; }
.dock-art { position: absolute; inset: 0; display: block; transform: translateY(calc((1 - var(--mag)) * 10px)) scale(var(--mag)); transform-origin: 50% 100%; transition: transform 0.14s ease-out; }
.dock-art img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.45)); }
.tile { position: absolute; inset: 9%; border-radius: 24%; display: grid; place-items: center; box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.22), 0 4px 10px -3px rgba(0, 0, 0, 0.6); }
.browser-tile { background: linear-gradient(180deg, #3a3631, #1b1917); color: var(--champagne); }
.note-tile { background: linear-gradient(180deg, #f3e9d3, #dac7a2); color: #3b3123; }
.terminal-tile { background: linear-gradient(180deg, #2c2c2c, #0e0e0e); color: var(--mint); }
.download-tile { background: linear-gradient(180deg, #efe1c4, #c4aa7c); color: var(--on-champagne); }
.dock-dot { position: absolute; bottom: -5px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: rgba(245, 241, 234, 0.8); opacity: 0; transition: opacity 0.2s; }
.dock-item.running .dock-dot { opacity: 1; }
.dock-label {
  position: absolute; bottom: calc(100% + 22px); left: 50%; transform: translateX(-50%); padding: 6px 10px; border-radius: 8px; white-space: nowrap; pointer-events: none; opacity: 0;
  background: rgba(30, 28, 25, 0.92); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.15); color: var(--ink); font: 500 12px/1 var(--ui); transition: opacity 0.12s;
}
.dock-item:hover .dock-label, .dock-item:focus-visible .dock-label { opacity: 1; }
.dock-sep { width: 1px; align-self: stretch; margin: 6px 5px; background: rgba(255, 255, 255, 0.2); }

/* MARK: Fitting the menu bar around the notch */

@media (max-width: 1320px) { .menu-link:nth-of-type(n + 4) { display: none; } }
@media (max-width: 1160px) { .menu-link:nth-of-type(n + 2) { display: none; } .battery-item, .menu-right .static { display: none; } }
@media (max-width: 960px) { .menu-link { display: none; } }

/* MARK: Phone */

.desktop.phone { height: auto; min-height: 0; max-height: none; overflow: visible; overflow-x: clip; padding: 34px 0 20px; }
.desktop.phone { display: flex; flex-direction: column; }
.phone .wallpaper { bottom: auto; height: 1180px; background-position: center 78%; }
.phone .hero-copy { order: 1; }
.phone .dock { order: 2; }
.phone .windows { order: 3; }
.phone .island { --w: 150px; }
.phone .island-collapsed { padding: 0 12px 0 10px; }
.phone .app-name b, .phone .clock-day, .phone .status-savisul { display: none; }
.phone .menubar { padding: 0 10px; }
.phone .hero-copy { position: relative; left: auto; top: auto; width: auto; padding: 96px 16px 32px; }
.phone .hero-copy h1 { font-size: clamp(40px, 11.5vw, 56px); max-width: 12ch; }
.phone .windows { position: relative; inset: auto; padding: 0 12px; pointer-events: auto; }
.phone .win { position: relative; width: 100%; }
.phone .win.popover { width: min(400px, 100%); height: 656px; margin: 0 auto; }
.phone .browser-win { height: 600px; }
.phone .terminal-win .term { font-size: 12px; }
.phone .win-bar { cursor: default; }
.phone .snap-preview { display: none; }
.phone .dock { position: relative; bottom: auto; left: auto; transform: none; width: max-content; max-width: calc(100% - 24px); margin: 0 auto 18px; }
.phone .dock-label { display: none; }
.phone .menu-right .status-item { display: none; }
.phone .clock { font-size: 12px; }
.phone .island[data-mode="expanded"] .island-top { gap: 8px; }
.phone .pane.home, .phone .pane.files { grid-template-columns: minmax(0, 1fr); }
.phone .pane.camera { flex-direction: column; align-items: flex-start; }
.phone .ext-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.phone .wp-main { grid-template-columns: minmax(0, 1fr); padding: 34px 18px 90px; }
.phone .wp-aside { position: static; }
.phone .wp-header { padding: 12px 18px; }
.phone .wp-header nav { display: none; }
.phone .clip-body { grid-template-columns: minmax(0, 1fr); }
.phone .clip-preview { display: none; }
.phone .overlay { top: 70px; }
@media (max-width: 760px) {
  .island-top .battery span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .island, .island-shape, .win.gliding, .dock-art, .switch::after { transition: none !important; }
  .eq i, .cursor, .lyric-now.rise, .pane, .ext-body, .menu { animation: none !important; }
}
.wp.dark .wp-sub { color: #1b120e; }

.display-off { position: absolute; inset: 0; z-index: 400; background: #000; opacity: 0; pointer-events: none; transition: opacity 0.5s ease; }
.display-off.on { opacity: 1; pointer-events: auto; cursor: pointer; }